diff --git a/404.html b/404.html index 4c568f89b..8142ba684 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found
We now have a YouTube Channel. Subscribe for the video content.

404

This page could not be found.

\ No newline at end of file +404: This page could not be found
We now have a YouTube Channel. Subscribe for the video content.

404

This page could not be found.

\ No newline at end of file diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/android.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/android.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/android.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/android.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/android/android.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/android/android.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/android/android.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/android/android.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/android/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/android/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/android/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/android/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/android/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/android/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/android/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/android/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/angular.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/angular.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/angular.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/angular.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/angular/angular.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/angular/angular.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/angular/angular.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/angular/angular.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/angular/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/angular/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/angular/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/angular/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/angular/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/angular/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/angular/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/angular/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/aws.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/aws.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/aws.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/aws.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/aws/aws.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/aws/aws.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/aws/aws.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/aws/aws.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/aws/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/aws/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/aws/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/aws/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/aws/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/aws/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/aws/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/aws/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/backend.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/backend.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/backend.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/backend.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/backend/backend.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/backend/backend.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/backend/backend.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/backend/backend.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/backend/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/backend/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/backend/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/backend/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/backend/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/backend/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/backend/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/backend/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/devops.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/devops.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/devops.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/devops.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/devops/devops.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/devops/devops.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/devops/devops.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/devops/devops.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/devops/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/devops/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/devops/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/devops/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/devops/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/devops/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/devops/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/devops/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:eslint.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:eslint.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:eslint.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:eslint.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:prettier.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:prettier.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:prettier.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:prettier.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:standardjs.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:standardjs.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:linters-formatters:standardjs.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:linters-formatters:standardjs.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:esbuild.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:esbuild.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:esbuild.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:esbuild.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:parcel.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:parcel.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:parcel.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:parcel.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:rollup.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:rollup.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:rollup.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:rollup.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:vite.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:vite.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:vite.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:vite.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:webpack.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:webpack.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:module-bundlers:webpack.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:module-bundlers:webpack.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:task-runners.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:task-runners.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:task-runners.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:task-runners.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:task-runners:npm-scripts.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:task-runners:npm-scripts.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/build-tools:task-runners:npm-scripts.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/build-tools:task-runners:npm-scripts.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:bem.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:bem.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:bem.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:bem.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:oocss.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:oocss.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:oocss.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:oocss.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:smacss.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:smacss.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-architecture:smacss.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-architecture:smacss.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first:bootstrap.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first:bootstrap.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first:bootstrap.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first:bootstrap.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first:bulma.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first:bulma.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:css-first:bulma.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:css-first:bulma.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:chakra-ui.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:chakra-ui.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:chakra-ui.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:chakra-ui.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:material-ui.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:material-ui.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:material-ui.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:material-ui.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:radix-ui.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:radix-ui.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:radix-ui.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:radix-ui.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:tailwind-css.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:tailwind-css.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-frameworks:js-first:tailwind-css.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-frameworks:js-first:tailwind-css.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:less.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:less.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:less.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:less.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:postcss.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:postcss.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:postcss.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:postcss.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:sass.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:sass.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css-preprocessors:sass.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css-preprocessors:sass.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:learn-the-basics.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:learn-the-basics.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:learn-the-basics.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:learn-the-basics.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:making-layouts.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:making-layouts.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:making-layouts.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:making-layouts.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:responsive-design-and-media-queries.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:responsive-design-and-media-queries.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/css:responsive-design-and-media-queries.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/css:responsive-design-and-media-queries.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:carlo.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:carlo.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:carlo.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:carlo.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:electron.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:electron.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:electron.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:electron.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:proton-native.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:proton-native.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/desktop-applications:proton-native.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/desktop-applications:proton-native.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql:apollo.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql:apollo.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql:apollo.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql:apollo.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql:relay-modern.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql:relay-modern.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/graphql:relay-modern.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/graphql:relay-modern.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/home.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/home.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/home.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/home.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:accessibility.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:accessibility.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:accessibility.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:accessibility.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:conventions-and-best-practices.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:conventions-and-best-practices.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:conventions-and-best-practices.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:conventions-and-best-practices.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:forms-and-validations.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:forms-and-validations.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:forms-and-validations.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:forms-and-validations.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:learn-the-basics.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:learn-the-basics.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:learn-the-basics.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:learn-the-basics.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:seo-basics.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:seo-basics.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:seo-basics.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:seo-basics.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:writing-semantic-html.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:writing-semantic-html.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/html:writing-semantic-html.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/html:writing-semantic-html.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:browsers-and-how-they-work.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:browsers-and-how-they-work.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:browsers-and-how-they-work.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:browsers-and-how-they-work.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:dns-and-how-it-works.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:dns-and-how-it-works.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:dns-and-how-it-works.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:dns-and-how-it-works.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:how-does-the-internet-work.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:how-does-the-internet-work.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:how-does-the-internet-work.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:how-does-the-internet-work.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-domain-name.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-domain-name.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-domain-name.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-domain-name.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-hosting.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-hosting.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-hosting.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-hosting.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-http.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-http.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/internet:what-is-http.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/internet:what-is-http.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:concepts.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:concepts.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:concepts.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:concepts.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:es6-and-modular-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:es6-and-modular-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:es6-and-modular-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:es6-and-modular-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:learn-dom-manipulation.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:learn-dom-manipulation.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:learn-dom-manipulation.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:learn-dom-manipulation.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:learn-fetch-api-ajax-xhr.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:learn-fetch-api-ajax-xhr.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:learn-fetch-api-ajax-xhr.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:learn-fetch-api-ajax-xhr.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:syntax-and-basic-constructs.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:syntax-and-basic-constructs.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/javascript:syntax-and-basic-constructs.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/javascript:syntax-and-basic-constructs.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:flutter.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:flutter.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:flutter.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:flutter.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:ionic.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:ionic.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:ionic.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:ionic.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:nativescript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:nativescript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:nativescript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:nativescript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:react-native.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:react-native.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/mobile-applications:react-native.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/mobile-applications:react-native.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:css-modules.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:css-modules.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:css-modules.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:css-modules.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:emotion.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:emotion.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:emotion.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:emotion.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:styled-components.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:styled-components.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:styled-components.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:styled-components.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:styled-jsx.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:styled-jsx.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/modern-css:styled-jsx.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/modern-css:styled-jsx.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers:npm.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers:npm.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers:npm.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers:npm.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers:yarn.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers:yarn.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/package-managers:yarn.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/package-managers:yarn.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular:ngrx.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular:ngrx.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular:ngrx.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular:ngrx.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular:rxjs.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular:rxjs.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:angular:rxjs.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:angular:rxjs.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:mobx.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:mobx.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:mobx.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:mobx.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:recoil.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:recoil.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:recoil.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:recoil.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:redux.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:redux.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:react-js:redux.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:react-js:redux.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:vue-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:vue-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:vue-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:vue-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:vue-js:vuex.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:vue-js:vuex.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/pick-a-framework:vue-js:vuex.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/pick-a-framework:vue-js:vuex.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps:apis.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps:apis.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps:apis.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps:apis.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps:performance.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps:performance.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/progressive-web-apps:performance.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/progressive-web-apps:performance.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:bitbucket.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:bitbucket.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:bitbucket.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:bitbucket.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:github.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:github.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:github.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:github.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:gitlab.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:gitlab.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/repo-hosting-services:gitlab.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/repo-hosting-services:gitlab.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:angular.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:angular.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:angular.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:angular.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:angular:universal.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:angular:universal.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:angular:universal.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:angular:universal.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js:after-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js:after-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js:after-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js:after-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js:next-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js:next-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:react-js:next-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:react-js:next-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:vue-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:vue-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:vue-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:vue-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:vue-js:nuxt-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:vue-js:nuxt-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/server-side-rendering:vue-js:nuxt-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/server-side-rendering:vue-js:nuxt-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:eleventy.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:eleventy.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:eleventy.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:eleventy.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:gatsbyjs.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:gatsbyjs.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:gatsbyjs.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:gatsbyjs.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:gridsome.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:gridsome.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:gridsome.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:gridsome.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:hugo.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:hugo.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:hugo.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:hugo.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:jekyll.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:jekyll.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:jekyll.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:jekyll.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:next-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:next-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:next-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:next-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:nuxt-js.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:nuxt-js.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:nuxt-js.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:nuxt-js.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:vuepress.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:vuepress.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/static-site-generators:vuepress.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/static-site-generators:vuepress.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:cypress.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:cypress.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:cypress.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:cypress.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:enzyme.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:enzyme.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:enzyme.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:enzyme.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:jest.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:jest.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:jest.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:jest.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:other-options.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:other-options.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:other-options.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:other-options.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:react-testing-library.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:react-testing-library.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/testing-your-apps:react-testing-library.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/testing-your-apps:react-testing-library.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers:flow.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers:flow.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers:flow.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers:flow.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers:typescript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers:typescript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/type-checkers:typescript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/type-checkers:typescript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/version-control-systems.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/version-control-systems.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/version-control-systems.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/version-control-systems.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/version-control-systems:basic-usage-of-git.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/version-control-systems:basic-usage-of-git.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/version-control-systems:basic-usage-of-git.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/version-control-systems:basic-usage-of-git.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-assembly.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-assembly.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-assembly.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-assembly.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:custom-elements.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:custom-elements.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:custom-elements.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:custom-elements.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:html-templates.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:html-templates.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:html-templates.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:html-templates.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:shadow-dom.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:shadow-dom.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-components:shadow-dom.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-components:shadow-dom.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:content-security-policy.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:content-security-policy.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:content-security-policy.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:content-security-policy.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:cors.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:cors.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:cors.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:cors.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:https.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:https.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:https.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:https.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:owasp-security-risks.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:owasp-security-risks.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/frontend/web-security-knowledge:owasp-security-risks.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/frontend/web-security-knowledge:owasp-security-risks.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/golang.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/golang.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/golang.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/golang.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/golang/golang.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/golang/golang.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/golang/golang.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/golang/golang.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/golang/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/golang/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/golang/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/golang/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/golang/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/golang/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/golang/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/golang/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/asymptotic-notation.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/asymptotic-notation.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/asymptotic-notation.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/asymptotic-notation.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/avoid-render-blocking-javascript-with-async-defer.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/avoid-render-blocking-javascript-with-async-defer.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/avoid-render-blocking-javascript-with-async-defer.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/avoid-render-blocking-javascript-with-async-defer.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/basic-authentication.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/basic-authentication.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/basic-authentication.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/basic-authentication.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/big-o-notation.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/big-o-notation.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/big-o-notation.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/big-o-notation.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/character-encodings.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/character-encodings.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/character-encodings.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/character-encodings.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/ci-cd.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/ci-cd.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/ci-cd.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/ci-cd.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/design-patterns-for-humans.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/design-patterns-for-humans.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/design-patterns-for-humans.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/design-patterns-for-humans.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/dhcp-in-one-picture.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/dhcp-in-one-picture.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/dhcp-in-one-picture.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/dhcp-in-one-picture.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/dns-in-one-picture.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/dns-in-one-picture.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/dns-in-one-picture.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/dns-in-one-picture.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/history-of-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/history-of-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/history-of-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/history-of-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/http-caching.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/http-caching.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/http-caching.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/http-caching.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/jwt-authentication.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/jwt-authentication.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/jwt-authentication.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/jwt-authentication.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/levels-of-seniority.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/levels-of-seniority.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/levels-of-seniority.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/levels-of-seniority.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/oauth.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/oauth.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/oauth.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/oauth.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/proxy-servers.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/proxy-servers.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/proxy-servers.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/proxy-servers.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/random-numbers.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/random-numbers.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/random-numbers.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/random-numbers.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/scaling-databases.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/scaling-databases.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/scaling-databases.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/scaling-databases.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/session-authentication.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/session-authentication.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/session-authentication.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/session-authentication.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/ssl-tls-https-ssh.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/ssl-tls-https-ssh.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/ssl-tls-https-ssh.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/ssl-tls-https-ssh.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/sso.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/sso.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/sso.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/sso.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/token-authentication.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/token-authentication.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/token-authentication.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/token-authentication.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/torrent-client.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/torrent-client.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/torrent-client.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/torrent-client.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/unfamiliar-codebase.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/unfamiliar-codebase.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/unfamiliar-codebase.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/unfamiliar-codebase.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-are-web-vitals.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-are-web-vitals.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-are-web-vitals.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-are-web-vitals.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-is-internet.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-is-internet.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-is-internet.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-is-internet.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-is-sli-slo-sla.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-is-sli-slo-sla.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/what-is-sli-slo-sla.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/what-is-sli-slo-sla.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/guides/why-build-it-and-they-will-come-wont-work-anymore.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/guides/why-build-it-and-they-will-come-wont-work-anymore.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/guides/why-build-it-and-they-will-come-wont-work-anymore.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/guides/why-build-it-and-they-will-come-wont-work-anymore.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/index.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/index.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/index.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/index.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/java.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/java.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/java.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/java.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/java/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/java/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/java/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/java/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/java/java.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/java/java.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/java/java.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/java/java.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/java/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/java/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/java/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/java/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/postgresql-dba.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/postgresql-dba.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/postgresql-dba.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/postgresql-dba.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/postgresql-dba/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/postgresql-dba/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/python.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/python.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/python.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/python.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/python/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/python/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/python/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/python/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/python/python.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/python/python.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/python/python.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/python/python.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/python/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/python/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/python/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/python/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/qa.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/qa.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/qa.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/qa.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/qa/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/qa/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/qa/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/qa/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/qa/qa.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/qa/qa.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/qa/qa.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/qa/qa.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/qa/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/qa/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/qa/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/qa/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/react.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/react.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/react.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/react.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/react/interactive.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/react/interactive.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/react/interactive.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/react/interactive.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/react/react.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/react/react.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/react/react.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/react/react.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/react/resources.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/react/resources.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/react/resources.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/react/resources.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/roadmaps.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/roadmaps.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/roadmaps.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/roadmaps.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/acid-explained.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/acid-explained.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/acid-explained.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/acid-explained.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/all-about-http-caching.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/all-about-http-caching.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/all-about-http-caching.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/all-about-http-caching.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/arrays-and-objects-in-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/arrays-and-objects-in-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/arrays-and-objects-in-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/arrays-and-objects-in-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/async-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/async-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/async-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/async-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/big-o-notation.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/big-o-notation.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/big-o-notation.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/big-o-notation.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/content-delivery-networks.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/content-delivery-networks.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/content-delivery-networks.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/content-delivery-networks.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/dns-explained.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/dns-explained.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/dns-explained.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/dns-explained.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/dns-records.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/dns-records.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/dns-records.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/dns-records.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/floating-point-arithmetic.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/floating-point-arithmetic.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/floating-point-arithmetic.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/floating-point-arithmetic.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/freeze-and-seal-objects-in-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/freeze-and-seal-objects-in-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/freeze-and-seal-objects-in-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/freeze-and-seal-objects-in-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/how-to-use-css-variables.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/how-to-use-css-variables.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/how-to-use-css-variables.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/how-to-use-css-variables.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/how-to-use-github-actions.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/how-to-use-github-actions.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/how-to-use-github-actions.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/how-to-use-github-actions.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/javascript-fetch-api.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/javascript-fetch-api.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/javascript-fetch-api.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/javascript-fetch-api.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/load-balancers-101.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/load-balancers-101.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/load-balancers-101.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/load-balancers-101.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/osi-model.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/osi-model.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/osi-model.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/osi-model.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/practical-intro-to-react.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/practical-intro-to-react.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/practical-intro-to-react.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/practical-intro-to-react.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/promises-in-javascript.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/promises-in-javascript.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/promises-in-javascript.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/promises-in-javascript.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/random-number-generators.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/random-number-generators.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/random-number-generators.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/random-number-generators.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/scaling-the-unscalable.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/scaling-the-unscalable.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/scaling-the-unscalable.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/scaling-the-unscalable.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/ssh-ssl-tls.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/ssh-ssl-tls.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/ssh-ssl-tls.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/ssh-ssl-tls.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/system-design-101.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/system-design-101.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/system-design-101.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/system-design-101.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/tcp-ip-model.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/tcp-ip-model.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/tcp-ip-model.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/tcp-ip-model.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/transport-protocols-tcp-vs-udp.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/transport-protocols-tcp-vs-udp.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/transport-protocols-tcp-vs-udp.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/transport-protocols-tcp-vs-udp.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-cap-theorem.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-cap-theorem.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-cap-theorem.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-cap-theorem.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-dependency-injection.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-dependency-injection.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-dependency-injection.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-dependency-injection.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-dom-shadow-dom-virtual-dom.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-dom-shadow-dom-virtual-dom.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-dom-shadow-dom-virtual-dom.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-dom-shadow-dom-virtual-dom.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-eventual-consistency.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-eventual-consistency.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/what-is-eventual-consistency.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/what-is-eventual-consistency.json diff --git a/_next/data/dk0G4bqTVB8km5BYw4XPa/watch/yaml-in-depth.json b/_next/data/XGoglMdA7JGz4xEAaJ2uf/watch/yaml-in-depth.json similarity index 100% rename from _next/data/dk0G4bqTVB8km5BYw4XPa/watch/yaml-in-depth.json rename to _next/data/XGoglMdA7JGz4xEAaJ2uf/watch/yaml-in-depth.json diff --git a/_next/static/XGoglMdA7JGz4xEAaJ2uf/_buildManifest.js b/_next/static/XGoglMdA7JGz4xEAaJ2uf/_buildManifest.js new file mode 100644 index 000000000..134f055b3 --- /dev/null +++ b/_next/static/XGoglMdA7JGz4xEAaJ2uf/_buildManifest.js @@ -0,0 +1 @@ +self.__BUILD_MANIFEST=function(s,a,c,e,t,i,d,u,r,p){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,u,a,"static/chunks/pages/index-d7cc540b30e34661.js"],"/_error":["static/chunks/pages/_error-2280fa386d040b66.js"],"/about":[s,c,a,"static/chunks/pages/about-232019b6b6353c44.js"],"/guides":[s,a,"static/chunks/pages/guides-a446a06b367081ec.js"],"/guides/[guide]":[s,c,a,e,"static/chunks/pages/guides/[guide]-97b3e15727bf199f.js"],"/privacy":[s,c,a,"static/chunks/pages/privacy-e1e530c3dfd43cc1.js"],"/roadmaps":[s,u,a,"static/chunks/pages/roadmaps-9740eedd6239df0c.js"],"/signup":[s,"static/chunks/18-03837ae87ec2cbe1.js",a,"static/chunks/pages/signup-adbf1143e131779e.js"],"/terms":[s,c,a,t,"static/chunks/pages/terms-58af618792d0ef9b.js"],"/thanks":[s,a,"static/chunks/pages/thanks-3c085bc891d82226.js"],"/watch":[s,a,"static/chunks/pages/watch-ecf973a57f0563b8.js"],"/watch/[video]":[s,c,a,i,"static/chunks/pages/watch/[video]-c0be45a5054de203.js"],"/[roadmap]":[s,c,r,a,e,i,t,d,p,"static/chunks/pages/[roadmap]-6e8e5b03b46b670e.js"],"/[roadmap]/interactive":[s,c,r,a,e,i,t,d,p,"static/chunks/pages/[roadmap]/interactive-11b738bbf0b3c890.js"],"/[roadmap]/resources":[s,c,a,e,i,t,d,"static/chunks/pages/[roadmap]/resources-f952cce1d67b2932.js"],"/[roadmap]/[group]":[s,c,a,e,i,t,d,"static/chunks/pages/[roadmap]/[group]-c7c9b559d518f9a0.js"],sortedPages:["/","/_app","/_error","/about","/guides","/guides/[guide]","/privacy","/roadmaps","/signup","/terms","/thanks","/watch","/watch/[video]","/[roadmap]","/[roadmap]/interactive","/[roadmap]/resources","/[roadmap]/[group]"]}}("static/chunks/680-be87eefc1f260b8f.js","static/chunks/515-713f89c4eebf3bd6.js","static/chunks/22-5e16bc1f52d67473.js","static/chunks/564-1bb7d36bf2fbccb8.js","static/chunks/547-f266cbae5dda46b7.js","static/chunks/568-d5ea51d640393149.js","static/chunks/280-bb270a68377858a2.js","static/chunks/919-1e7178a47a665345.js","static/chunks/26-f1efe05501904fc9.js","static/chunks/714-86c6e14669113664.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/dk0G4bqTVB8km5BYw4XPa/_middlewareManifest.js b/_next/static/XGoglMdA7JGz4xEAaJ2uf/_middlewareManifest.js similarity index 100% rename from _next/static/dk0G4bqTVB8km5BYw4XPa/_middlewareManifest.js rename to _next/static/XGoglMdA7JGz4xEAaJ2uf/_middlewareManifest.js diff --git a/_next/static/dk0G4bqTVB8km5BYw4XPa/_ssgManifest.js b/_next/static/XGoglMdA7JGz4xEAaJ2uf/_ssgManifest.js similarity index 100% rename from _next/static/dk0G4bqTVB8km5BYw4XPa/_ssgManifest.js rename to _next/static/XGoglMdA7JGz4xEAaJ2uf/_ssgManifest.js diff --git a/_next/static/chunks/116-bd3fdc1b341415ed.js b/_next/static/chunks/116-bd3fdc1b341415ed.js deleted file mode 100644 index 26ebd7a96..000000000 --- a/_next/static/chunks/116-bd3fdc1b341415ed.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[116],{9116:function(e,a,r){r.d(a,{II:function(){return T}});var n=r(7375),l=r(2846),t=r(5031),i=r(6450),s=r(7294),d=r(894);function o(){return(o=Object.assign||function(e){for(var a=1;a=0||(l[r]=e[r]);return l}var c=["id","isRequired","isInvalid","isDisabled","isReadOnly"],p=["getRootProps","htmlProps"],m=(0,i.kr)({strict:!1,name:"FormControlContext"}),v=m[0],f=m[1];var h=(0,l.Gp)((function(e,a){var r=(0,l.jC)("Form",e),d=function(e){var a=e.id,r=e.isRequired,l=e.isInvalid,d=e.isDisabled,p=e.isReadOnly,m=u(e,c),v=(0,n.Me)(),f=a||"field-"+v,h=f+"-label",b=f+"-feedback",y=f+"-helptext",I=s.useState(!1),g=I[0],N=I[1],E=s.useState(!1),_=E[0],x=E[1],R=(0,n.kt)(),k=R[0],T=R[1],q=s.useCallback((function(e,a){return void 0===e&&(e={}),void 0===a&&(a=null),o({id:y},e,{ref:(0,i.lq)(a,(function(e){e&&x(!0)}))})}),[y]),F=s.useCallback((function(e,a){var r,n;return void 0===e&&(e={}),void 0===a&&(a=null),o({},e,{ref:a,"data-focus":(0,t.PB)(k),"data-disabled":(0,t.PB)(d),"data-invalid":(0,t.PB)(l),"data-readonly":(0,t.PB)(p),id:null!=(r=e.id)?r:h,htmlFor:null!=(n=e.htmlFor)?n:f})}),[f,d,k,l,p,h]),O=s.useCallback((function(e,a){return void 0===e&&(e={}),void 0===a&&(a=null),o({id:b},e,{ref:(0,i.lq)(a,(function(e){e&&N(!0)})),"aria-live":"polite"})}),[b]),P=s.useCallback((function(e,a){return void 0===e&&(e={}),void 0===a&&(a=null),o({},e,m,{ref:a,role:"group"})}),[m]),C=s.useCallback((function(e,a){return void 0===e&&(e={}),void 0===a&&(a=null),o({},e,{ref:a,role:"presentation","aria-hidden":!0,children:e.children||"*"})}),[]);return{isRequired:!!r,isInvalid:!!l,isReadOnly:!!p,isDisabled:!!d,isFocused:!!k,onFocus:T.on,onBlur:T.off,hasFeedbackText:g,setHasFeedbackText:N,hasHelpText:_,setHasHelpText:x,id:f,labelId:h,feedbackId:b,helpTextId:y,htmlProps:m,getHelpTextProps:q,getErrorMessageProps:O,getRootProps:P,getLabelProps:F,getRequiredIndicatorProps:C}}((0,l.Lr)(e)),m=d.getRootProps;d.htmlProps;var f=u(d,p),h=(0,t.cx)("chakra-form-control",e.className),b=s.useMemo((function(){return f}),[f]);return s.createElement(v,{value:b},s.createElement(l.Fo,{value:r},s.createElement(l.m$.div,o({},m({},a),{className:h,__css:r.container}))))}));t.Ts&&(h.displayName="FormControl");var b=(0,l.Gp)((function(e,a){var r=f(),n=(0,l.yK)(),i=(0,t.cx)("chakra-form__helper-text",e.className);return s.createElement(l.m$.div,o({},null==r?void 0:r.getHelpTextProps(e,a),{__css:n.helperText,className:i}))}));t.Ts&&(b.displayName="FormHelperText");var y=["isDisabled","isInvalid","isReadOnly","isRequired"],I=["id","disabled","readOnly","required","isRequired","isInvalid","isReadOnly","isDisabled","onFocus","onBlur"];function g(e){var a=function(e){var a,r,n,l=f(),i=e.id,s=e.disabled,d=e.readOnly,c=e.required,p=e.isRequired,m=e.isInvalid,v=e.isReadOnly,h=e.isDisabled,b=e.onFocus,y=e.onBlur,g=u(e,I),N=e["aria-describedby"]?[e["aria-describedby"]]:[];null!=l&&l.hasFeedbackText&&null!=l&&l.isInvalid&&N.push(l.feedbackId);null!=l&&l.hasHelpText&&N.push(l.helpTextId);return o({},g,{"aria-describedby":N.join(" ")||void 0,id:null!=i?i:null==l?void 0:l.id,isDisabled:null!=(a=null!=s?s:h)?a:null==l?void 0:l.isDisabled,isReadOnly:null!=(r=null!=d?d:v)?r:null==l?void 0:l.isReadOnly,isRequired:null!=(n=null!=c?c:p)?n:null==l?void 0:l.isRequired,isInvalid:null!=m?m:null==l?void 0:l.isInvalid,onFocus:(0,t.v0)(null==l?void 0:l.onFocus,b),onBlur:(0,t.v0)(null==l?void 0:l.onBlur,y)})}(e),r=a.isDisabled,n=a.isInvalid,l=a.isReadOnly,i=a.isRequired;return o({},u(a,y),{disabled:r,readOnly:l,required:i,"aria-invalid":(0,t.Qm)(n),"aria-required":(0,t.Qm)(i),"aria-readonly":(0,t.Qm)(l)})}var N=(0,l.Gp)((function(e,a){var r=(0,l.jC)("FormError",e),n=(0,l.Lr)(e),i=f();return null!=i&&i.isInvalid?s.createElement(l.Fo,{value:r},s.createElement(l.m$.div,o({},null==i?void 0:i.getErrorMessageProps(n,a),{className:(0,t.cx)("chakra-form__error-message",e.className),__css:o({display:"flex",alignItems:"center"},r.text)}))):null}));t.Ts&&(N.displayName="FormErrorMessage");var E=(0,l.Gp)((function(e,a){var r=(0,l.yK)(),n=f();if(null==n||!n.isInvalid)return null;var i=(0,t.cx)("chakra-form__error-icon",e.className);return s.createElement(d.ZP,o({ref:a,"aria-hidden":!0},e,{__css:r.icon,className:i}),s.createElement("path",{fill:"currentColor",d:"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"}))}));t.Ts&&(E.displayName="FormErrorIcon");var _=["className","children","requiredIndicator"],x=(0,l.Gp)((function(e,a){var r,n=(0,l.mq)("FormLabel",e),i=(0,l.Lr)(e);i.className;var d=i.children,c=i.requiredIndicator,p=void 0===c?s.createElement(R,null):c,m=u(i,_),v=f(),h=null!=(r=null==v?void 0:v.getLabelProps(m,a))?r:o({ref:a},m);return s.createElement(l.m$.label,o({},h,{className:(0,t.cx)("chakra-form__label",i.className),__css:o({display:"block",textAlign:"start"},n)}),d,null!=v&&v.isRequired?p:null)}));t.Ts&&(x.displayName="FormLabel");var R=(0,l.Gp)((function(e,a){var r=f(),n=(0,l.yK)();if(null==r||!r.isRequired)return null;var i=(0,t.cx)("chakra-form__required-indicator",e.className);return s.createElement(l.m$.span,o({},null==r?void 0:r.getRequiredIndicatorProps(e,a),{__css:n.requiredIndicator,className:i}))}));function k(){return(k=Object.assign||function(e){for(var a=1;a=0||(l[r]=e[r]);return l}t.Ts&&(T.displayName="Input"),T.id="Input";var F=["placement"],O={left:{marginEnd:"-1px",borderEndRadius:0,borderEndColor:"transparent"},right:{marginStart:"-1px",borderStartRadius:0,borderStartColor:"transparent"}},P=(0,l.m$)("div",{baseStyle:{flex:"0 0 auto",width:"auto",display:"flex",alignItems:"center",whiteSpace:"nowrap"}}),C=(0,l.Gp)((function(e,a){var r,n=e.placement,t=void 0===n?"left":n,i=q(e,F),d=null!=(r=O[t])?r:{},o=(0,l.yK)();return s.createElement(P,k({ref:a},i,{__css:k({},o.addon,d)}))}));t.Ts&&(C.displayName="InputAddon");var G=(0,l.Gp)((function(e,a){return s.createElement(C,k({ref:a,placement:"left"},e,{className:(0,t.cx)("chakra-input__left-addon",e.className)}))}));t.Ts&&(G.displayName="InputLeftAddon"),G.id="InputLeftAddon";var L=(0,l.Gp)((function(e,a){return s.createElement(C,k({ref:a,placement:"right"},e,{className:(0,t.cx)("chakra-input__right-addon",e.className)}))}));t.Ts&&(L.displayName="InputRightAddon"),L.id="InputRightAddon";var j=["children","className"],S=(0,l.Gp)((function(e,a){var r=(0,l.jC)("Input",e),n=(0,l.Lr)(e),d=n.children,o=n.className,u=q(n,j),c=(0,t.cx)("chakra-input__group",o),p={},m=(0,i.WR)(d),v=r.field;m.forEach((function(e){if(r){var a,n;if(v&&"InputLeftElement"===e.type.id)p.paddingStart=null!=(a=v.height)?a:v.h;if(v&&"InputRightElement"===e.type.id)p.paddingEnd=null!=(n=v.height)?n:v.h;"InputRightAddon"===e.type.id&&(p.borderEndRadius=0),"InputLeftAddon"===e.type.id&&(p.borderStartRadius=0)}}));var f=m.map((function(a){var r,n,l={size:(null==(r=a.props)?void 0:r.size)||e.size,variant:(null==(n=a.props)?void 0:n.variant)||e.variant};return"Input"!==a.type.id?s.cloneElement(a,l):s.cloneElement(a,Object.assign(l,p,a.props))}));return s.createElement(l.m$.div,k({className:c,ref:a,__css:{width:"100%",display:"flex",position:"relative"}},u),s.createElement(l.Fo,{value:r},f))}));t.Ts&&(S.displayName="InputGroup");var A=["placement"],w=["className"],B=["className"],D=(0,l.m$)("div",{baseStyle:{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:"0",zIndex:2}}),$=(0,l.Gp)((function(e,a){var r,n,t,i=e.placement,d=void 0===i?"left":i,o=q(e,A),u=(0,l.yK)().field,c=((t={})["left"===d?"insetStart":"insetEnd"]="0",t.width=null!=(r=null==u?void 0:u.height)?r:null==u?void 0:u.h,t.height=null!=(n=null==u?void 0:u.height)?n:null==u?void 0:u.h,t.fontSize=null==u?void 0:u.fontSize,t);return s.createElement(D,k({ref:a,__css:c},o))}));$.id="InputElement",t.Ts&&($.displayName="InputElement");var H=(0,l.Gp)((function(e,a){var r=e.className,n=q(e,w),l=(0,t.cx)("chakra-input__left-element",r);return s.createElement($,k({ref:a,placement:"left",className:l},n))}));H.id="InputLeftElement",t.Ts&&(H.displayName="InputLeftElement");var M=(0,l.Gp)((function(e,a){var r=e.className,n=q(e,B),l=(0,t.cx)("chakra-input__right-element",r);return s.createElement($,k({ref:a,placement:"right",className:l},n))}));M.id="InputRightElement",t.Ts&&(M.displayName="InputRightElement")}}]); \ No newline at end of file diff --git a/_next/static/chunks/153-36778881c9b9f8c6.js b/_next/static/chunks/153-36778881c9b9f8c6.js deleted file mode 100644 index 0ce4c83e0..000000000 --- a/_next/static/chunks/153-36778881c9b9f8c6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[153],{3153:function(t,e,n){n.d(e,{u:function(){return ku}});var r=n(6450);function o(t,e){void 0===e&&(e=!1);var n=t.getBoundingClientRect();return{width:n.width/1,height:n.height/1,top:n.top/1,right:n.right/1,bottom:n.bottom/1,left:n.left/1,x:n.left/1,y:n.top/1}}function i(t){if(null==t)return window;if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function a(t){var e=i(t);return{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function s(t){return t instanceof i(t).Element||t instanceof Element}function u(t){return t instanceof i(t).HTMLElement||t instanceof HTMLElement}function l(t){return"undefined"!==typeof ShadowRoot&&(t instanceof i(t).ShadowRoot||t instanceof ShadowRoot)}function c(t){return t?(t.nodeName||"").toLowerCase():null}function f(t){return((s(t)?t.ownerDocument:t.document)||window.document).documentElement}function d(t){return o(f(t)).left+a(t).scrollLeft}function p(t){return i(t).getComputedStyle(t)}function v(t){var e=p(t),n=e.overflow,r=e.overflowX,o=e.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function h(t,e,n){void 0===n&&(n=!1);var r=u(e),s=u(e)&&function(t){var e=t.getBoundingClientRect(),n=e.width/t.offsetWidth||1,r=e.height/t.offsetHeight||1;return 1!==n||1!==r}(e),l=f(e),p=o(t,s),h={scrollLeft:0,scrollTop:0},m={x:0,y:0};return(r||!r&&!n)&&(("body"!==c(e)||v(l))&&(h=function(t){return t!==i(t)&&u(t)?{scrollLeft:(e=t).scrollLeft,scrollTop:e.scrollTop}:a(t);var e}(e)),u(e)?((m=o(e,!0)).x+=e.clientLeft,m.y+=e.clientTop):l&&(m.x=d(l))),{x:p.left+h.scrollLeft-m.x,y:p.top+h.scrollTop-m.y,width:p.width,height:p.height}}function m(t){var e=o(t),n=t.offsetWidth,r=t.offsetHeight;return Math.abs(e.width-n)<=1&&(n=e.width),Math.abs(e.height-r)<=1&&(r=e.height),{x:t.offsetLeft,y:t.offsetTop,width:n,height:r}}function g(t){return"html"===c(t)?t:t.assignedSlot||t.parentNode||(l(t)?t.host:null)||f(t)}function y(t){return["html","body","#document"].indexOf(c(t))>=0?t.ownerDocument.body:u(t)&&v(t)?t:y(g(t))}function b(t,e){var n;void 0===e&&(e=[]);var r=y(t),o=r===(null==(n=t.ownerDocument)?void 0:n.body),a=i(r),s=o?[a].concat(a.visualViewport||[],v(r)?r:[]):r,u=e.concat(s);return o?u:u.concat(b(g(s)))}function x(t){return["table","td","th"].indexOf(c(t))>=0}function w(t){return u(t)&&"fixed"!==p(t).position?t.offsetParent:null}function E(t){for(var e=i(t),n=w(t);n&&x(n)&&"static"===p(n).position;)n=w(n);return n&&("html"===c(n)||"body"===c(n)&&"static"===p(n).position)?e:n||function(t){var e=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&u(t)&&"fixed"===p(t).position)return null;for(var n=g(t);u(n)&&["html","body"].indexOf(c(n))<0;){var r=p(n);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||e&&"filter"===r.willChange||e&&r.filter&&"none"!==r.filter)return n;n=n.parentNode}return null}(t)||e}var P="top",O="bottom",S="right",A="left",T="auto",C=[P,O,S,A],V="start",R="end",k="viewport",M="popper",D=C.reduce((function(t,e){return t.concat([e+"-"+V,e+"-"+R])}),[]),j=[].concat(C,[T]).reduce((function(t,e){return t.concat([e,e+"-"+V,e+"-"+R])}),[]),L=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function F(t){var e=new Map,n=new Set,r=[];function o(t){n.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!n.has(t)){var r=e.get(t);r&&o(r)}})),r.push(t)}return t.forEach((function(t){e.set(t.name,t)})),t.forEach((function(t){n.has(t.name)||o(t)})),r}function B(t){var e;return function(){return e||(e=new Promise((function(n){Promise.resolve().then((function(){e=void 0,n(t())}))}))),e}}var I={placement:"bottom",modifiers:[],strategy:"absolute"};function U(){for(var t=arguments.length,e=new Array(t),n=0;n=0?"x":"y"}function X(t){var e,n=t.reference,r=t.element,o=t.placement,i=o?H(o):null,a=o?q(o):null,s=n.x+n.width/2-r.width/2,u=n.y+n.height/2-r.height/2;switch(i){case P:e={x:s,y:n.y-r.height};break;case O:e={x:s,y:n.y+n.height};break;case S:e={x:n.x+n.width,y:u};break;case A:e={x:n.x-r.width,y:u};break;default:e={x:n.x,y:n.y}}var l=i?Y(i):null;if(null!=l){var c="y"===l?"height":"width";switch(a){case V:e[l]=e[l]-(n[c]/2-r[c]/2);break;case R:e[l]=e[l]+(n[c]/2-r[c]/2)}}return e}var _={name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var e=t.state,n=t.name;e.modifiersData[n]=X({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement})},data:{}},G=Math.max,$=Math.min,Z=Math.round,K={top:"auto",right:"auto",bottom:"auto",left:"auto"};function J(t){var e,n=t.popper,r=t.popperRect,o=t.placement,a=t.variation,s=t.offsets,u=t.position,l=t.gpuAcceleration,c=t.adaptive,d=t.roundOffsets,v=!0===d?function(t){var e=t.x,n=t.y,r=window.devicePixelRatio||1;return{x:Z(Z(e*r)/r)||0,y:Z(Z(n*r)/r)||0}}(s):"function"===typeof d?d(s):s,h=v.x,m=void 0===h?0:h,g=v.y,y=void 0===g?0:g,b=s.hasOwnProperty("x"),x=s.hasOwnProperty("y"),w=A,T=P,C=window;if(c){var V=E(n),k="clientHeight",M="clientWidth";V===i(n)&&"static"!==p(V=f(n)).position&&"absolute"===u&&(k="scrollHeight",M="scrollWidth"),V=V,o!==P&&(o!==A&&o!==S||a!==R)||(T=O,y-=V[k]-r.height,y*=l?1:-1),o!==A&&(o!==P&&o!==O||a!==R)||(w=S,m-=V[M]-r.width,m*=l?1:-1)}var D,j=Object.assign({position:u},c&&K);return l?Object.assign({},j,((D={})[T]=x?"0":"",D[w]=b?"0":"",D.transform=(C.devicePixelRatio||1)<=1?"translate("+m+"px, "+y+"px)":"translate3d("+m+"px, "+y+"px, 0)",D)):Object.assign({},j,((e={})[T]=x?y+"px":"",e[w]=b?m+"px":"",e.transform="",e))}var Q={left:"right",right:"left",bottom:"top",top:"bottom"};function tt(t){return t.replace(/left|right|bottom|top/g,(function(t){return Q[t]}))}var et={start:"end",end:"start"};function nt(t){return t.replace(/start|end/g,(function(t){return et[t]}))}function rt(t,e){var n=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(n&&l(n)){var r=e;do{if(r&&t.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function ot(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function it(t,e){return e===k?ot(function(t){var e=i(t),n=f(t),r=e.visualViewport,o=n.clientWidth,a=n.clientHeight,s=0,u=0;return r&&(o=r.width,a=r.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(s=r.offsetLeft,u=r.offsetTop)),{width:o,height:a,x:s+d(t),y:u}}(t)):u(e)?function(t){var e=o(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(e):ot(function(t){var e,n=f(t),r=a(t),o=null==(e=t.ownerDocument)?void 0:e.body,i=G(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),s=G(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),u=-r.scrollLeft+d(t),l=-r.scrollTop;return"rtl"===p(o||n).direction&&(u+=G(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:s,x:u,y:l}}(f(t)))}function at(t,e,n){var r="clippingParents"===e?function(t){var e=b(g(t)),n=["absolute","fixed"].indexOf(p(t).position)>=0&&u(t)?E(t):t;return s(n)?e.filter((function(t){return s(t)&&rt(t,n)&&"body"!==c(t)})):[]}(t):[].concat(e),o=[].concat(r,[n]),i=o[0],a=o.reduce((function(e,n){var r=it(t,n);return e.top=G(r.top,e.top),e.right=$(r.right,e.right),e.bottom=$(r.bottom,e.bottom),e.left=G(r.left,e.left),e}),it(t,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function st(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function ut(t,e){return e.reduce((function(e,n){return e[n]=t,e}),{})}function lt(t,e){void 0===e&&(e={});var n=e,r=n.placement,i=void 0===r?t.placement:r,a=n.boundary,u=void 0===a?"clippingParents":a,l=n.rootBoundary,c=void 0===l?k:l,d=n.elementContext,p=void 0===d?M:d,v=n.altBoundary,h=void 0!==v&&v,m=n.padding,g=void 0===m?0:m,y=st("number"!==typeof g?g:ut(g,C)),b=p===M?"reference":M,x=t.rects.popper,w=t.elements[h?b:p],E=at(s(w)?w:w.contextElement||f(t.elements.popper),u,c),A=o(t.elements.reference),T=X({reference:A,element:x,strategy:"absolute",placement:i}),V=ot(Object.assign({},x,T)),R=p===M?V:A,D={top:E.top-R.top+y.top,bottom:R.bottom-E.bottom+y.bottom,left:E.left-R.left+y.left,right:R.right-E.right+y.right},j=t.modifiersData.offset;if(p===M&&j){var L=j[i];Object.keys(D).forEach((function(t){var e=[S,O].indexOf(t)>=0?1:-1,n=[P,O].indexOf(t)>=0?"y":"x";D[t]+=L[n]*e}))}return D}function ct(t,e,n){return G(t,$(e,n))}function ft(t,e,n){return void 0===n&&(n={x:0,y:0}),{top:t.top-e.height-n.y,right:t.right-e.width+n.x,bottom:t.bottom-e.height+n.y,left:t.left-e.width-n.x}}function dt(t){return[P,S,O,A].some((function(e){return t[e]>=0}))}var pt=z({defaultModifiers:[W,_,{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var e=t.state,n=t.options,r=n.gpuAcceleration,o=void 0===r||r,i=n.adaptive,a=void 0===i||i,s=n.roundOffsets,u=void 0===s||s,l={placement:H(e.placement),variation:q(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o};null!=e.modifiersData.popperOffsets&&(e.styles.popper=Object.assign({},e.styles.popper,J(Object.assign({},l,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:u})))),null!=e.modifiersData.arrow&&(e.styles.arrow=Object.assign({},e.styles.arrow,J(Object.assign({},l,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:u})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var e=t.state;Object.keys(e.elements).forEach((function(t){var n=e.styles[t]||{},r=e.attributes[t]||{},o=e.elements[t];u(o)&&c(o)&&(Object.assign(o.style,n),Object.keys(r).forEach((function(t){var e=r[t];!1===e?o.removeAttribute(t):o.setAttribute(t,!0===e?"":e)})))}))},effect:function(t){var e=t.state,n={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,n.popper),e.styles=n,e.elements.arrow&&Object.assign(e.elements.arrow.style,n.arrow),function(){Object.keys(e.elements).forEach((function(t){var r=e.elements[t],o=e.attributes[t]||{},i=Object.keys(e.styles.hasOwnProperty(t)?e.styles[t]:n[t]).reduce((function(t,e){return t[e]="",t}),{});u(r)&&c(r)&&(Object.assign(r.style,i),Object.keys(o).forEach((function(t){r.removeAttribute(t)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var e=t.state,n=t.options,r=t.name,o=n.offset,i=void 0===o?[0,0]:o,a=j.reduce((function(t,n){return t[n]=function(t,e,n){var r=H(t),o=[A,P].indexOf(r)>=0?-1:1,i="function"===typeof n?n(Object.assign({},e,{placement:t})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[A,S].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}(n,e.rects,i),t}),{}),s=a[e.placement],u=s.x,l=s.y;null!=e.modifiersData.popperOffsets&&(e.modifiersData.popperOffsets.x+=u,e.modifiersData.popperOffsets.y+=l),e.modifiersData[r]=a}},{name:"flip",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,r=t.name;if(!e.modifiersData[r]._skip){for(var o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0===a||a,u=n.fallbackPlacements,l=n.padding,c=n.boundary,f=n.rootBoundary,d=n.altBoundary,p=n.flipVariations,v=void 0===p||p,h=n.allowedAutoPlacements,m=e.options.placement,g=H(m),y=u||(g===m||!v?[tt(m)]:function(t){if(H(t)===T)return[];var e=tt(t);return[nt(t),e,nt(e)]}(m)),b=[m].concat(y).reduce((function(t,n){return t.concat(H(n)===T?function(t,e){void 0===e&&(e={});var n=e,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,u=n.allowedAutoPlacements,l=void 0===u?j:u,c=q(r),f=c?s?D:D.filter((function(t){return q(t)===c})):C,d=f.filter((function(t){return l.indexOf(t)>=0}));0===d.length&&(d=f);var p=d.reduce((function(e,n){return e[n]=lt(t,{placement:n,boundary:o,rootBoundary:i,padding:a})[H(n)],e}),{});return Object.keys(p).sort((function(t,e){return p[t]-p[e]}))}(e,{placement:n,boundary:c,rootBoundary:f,padding:l,flipVariations:v,allowedAutoPlacements:h}):n)}),[]),x=e.rects.reference,w=e.rects.popper,E=new Map,R=!0,k=b[0],M=0;M=0,U=I?"width":"height",z=lt(e,{placement:L,boundary:c,rootBoundary:f,altBoundary:d,padding:l}),N=I?B?S:A:B?O:P;x[U]>w[U]&&(N=tt(N));var W=tt(N),Y=[];if(i&&Y.push(z[F]<=0),s&&Y.push(z[N]<=0,z[W]<=0),Y.every((function(t){return t}))){k=L,R=!1;break}E.set(L,Y)}if(R)for(var X=function(t){var e=b.find((function(e){var n=E.get(e);if(n)return n.slice(0,t).every((function(t){return t}))}));if(e)return k=e,"break"},_=v?3:1;_>0;_--){if("break"===X(_))break}e.placement!==k&&(e.modifiersData[r]._skip=!0,e.placement=k,e.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,r=t.name,o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0!==a&&a,u=n.boundary,l=n.rootBoundary,c=n.altBoundary,f=n.padding,d=n.tether,p=void 0===d||d,v=n.tetherOffset,h=void 0===v?0:v,g=lt(e,{boundary:u,rootBoundary:l,padding:f,altBoundary:c}),y=H(e.placement),b=q(e.placement),x=!b,w=Y(y),T="x"===w?"y":"x",C=e.modifiersData.popperOffsets,R=e.rects.reference,k=e.rects.popper,M="function"===typeof h?h(Object.assign({},e.rects,{placement:e.placement})):h,D={x:0,y:0};if(C){if(i||s){var j="y"===w?P:A,L="y"===w?O:S,F="y"===w?"height":"width",B=C[w],I=C[w]+g[j],U=C[w]-g[L],z=p?-k[F]/2:0,N=b===V?R[F]:k[F],W=b===V?-k[F]:-R[F],X=e.elements.arrow,_=p&&X?m(X):{width:0,height:0},Z=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},K=Z[j],J=Z[L],Q=ct(0,R[F],_[F]),tt=x?R[F]/2-z-Q-K-M:N-Q-K-M,et=x?-R[F]/2+z+Q+J+M:W+Q+J+M,nt=e.elements.arrow&&E(e.elements.arrow),rt=nt?"y"===w?nt.clientTop||0:nt.clientLeft||0:0,ot=e.modifiersData.offset?e.modifiersData.offset[e.placement][w]:0,it=C[w]+tt-ot-rt,at=C[w]+et-ot;if(i){var st=ct(p?$(I,it):I,B,p?G(U,at):U);C[w]=st,D[w]=st-B}if(s){var ut="x"===w?P:A,ft="x"===w?O:S,dt=C[T],pt=dt+g[ut],vt=dt-g[ft],ht=ct(p?$(pt,it):pt,dt,p?G(vt,at):vt);C[T]=ht,D[T]=ht-dt}}e.modifiersData[r]=D}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(t){var e,n=t.state,r=t.name,o=t.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=H(n.placement),u=Y(s),l=[A,S].indexOf(s)>=0?"height":"width";if(i&&a){var c=function(t,e){return st("number"!==typeof(t="function"===typeof t?t(Object.assign({},e.rects,{placement:e.placement})):t)?t:ut(t,C))}(o.padding,n),f=m(i),d="y"===u?P:A,p="y"===u?O:S,v=n.rects.reference[l]+n.rects.reference[u]-a[u]-n.rects.popper[l],h=a[u]-n.rects.reference[u],g=E(i),y=g?"y"===u?g.clientHeight||0:g.clientWidth||0:0,b=v/2-h/2,x=c[d],w=y-f[l]-c[p],T=y/2-f[l]/2+b,V=ct(x,T,w),R=u;n.modifiersData[r]=((e={})[R]=V,e.centerOffset=V-T,e)}},effect:function(t){var e=t.state,n=t.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!==typeof r||(r=e.elements.popper.querySelector(r)))&&rt(e.elements.popper,r)&&(e.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var e=t.state,n=t.name,r=e.rects.reference,o=e.rects.popper,i=e.modifiersData.preventOverflow,a=lt(e,{elementContext:"reference"}),s=lt(e,{altBoundary:!0}),u=ft(a,r),l=ft(s,o,i),c=dt(u),f=dt(l);e.modifiersData[n]={referenceClippingOffsets:u,popperEscapeOffsets:l,isReferenceHidden:c,hasPopperEscaped:f},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":f})}}]}),vt=n(7294);function ht(){return(ht=Object.assign||function(t){for(var e=1;e=0||(o[n]=t[n]);return o}(n,Rt),{ref:e,"data-popper-arrow":"",style:Mt(t)})}),[]),B=(0,vt.useCallback)((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),ht({},t,{ref:e,"data-popper-arrow-inner":""})}),[]);return{update:function(){var t;null==(t=C.current)||t.update()},forceUpdate:function(){var t;null==(t=C.current)||t.forceUpdate()},transformOrigin:gt.transformOrigin.varRef,referenceRef:M,popperRef:j,getPopperProps:L,getArrowProps:F,getArrowInnerProps:B,getReferenceProps:D}}function Mt(t){var e=t.size,n=t.shadowColor,r=t.bg,o=ht({},t.style,{position:"absolute"});return e&&(o["--popper-arrow-size"]=e),n&&(o["--popper-arrow-shadow-color"]=n),r&&(o["--popper-arrow-bg"]=r),o}var Dt=n(6871),jt=n(2846),Lt=n(5031),Ft=n(1358),Bt=function(t,e){return(Bt=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function It(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}Bt(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var Ut=function(){return(Ut=Object.assign||function(t){for(var e,n=1,r=arguments.length;n=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function Wt(t,e){var n="function"===typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(s){o={error:s}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function Ht(t,e,n){if(n||2===arguments.length)for(var r,o=0,i=e.length;operformance.now():()=>Date.now(),pe="undefined"!==typeof window?t=>window.requestAnimationFrame(t):t=>setTimeout((()=>t(de())),fe);let ve=!0,he=!1,me=!1;const ge={delta:0,timestamp:0},ye=["read","update","preRender","render","postRender"],be=ye.reduce(((t,e)=>(t[e]=function(t){let e=[],n=[],r=0,o=!1,i=!1;const a=new WeakSet,s={schedule:(t,i=!1,s=!1)=>{const u=s&&o,l=u?e:n;return i&&a.add(t),-1===l.indexOf(t)&&(l.push(t),u&&o&&(r=e.length)),t},cancel:t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1),a.delete(t)},process:u=>{if(o)i=!0;else{if(o=!0,[e,n]=[n,e],n.length=0,r=e.length,r)for(let n=0;nhe=!0)),t)),{}),xe=ye.reduce(((t,e)=>{const n=be[e];return t[e]=(t,e=!1,r=!1)=>(he||Se(),n.schedule(t,e,r)),t}),{}),we=ye.reduce(((t,e)=>(t[e]=be[e].cancel,t)),{}),Ee=ye.reduce(((t,e)=>(t[e]=()=>be[e].process(ge),t)),{}),Pe=t=>be[t].process(ge),Oe=t=>{he=!1,ge.delta=ve?fe:Math.max(Math.min(t-ge.timestamp,40),1),ge.timestamp=t,me=!0,ye.forEach(Pe),me=!1,he&&(ve=!1,pe(Oe))},Se=()=>{he=!0,ve=!0,me||pe(Oe)},Ae=()=>ge;var Te=xe;const Ce=(t,e,n)=>-n*t+n*e+t;function Ve(t,e){return e?t*(1e3/e):0}function Re(t,e){-1===t.indexOf(e)&&t.push(e)}function ke(t,e){var n=t.indexOf(e);n>-1&&t.splice(n,1)}var Me=function(){function t(){this.subscriptions=[]}return t.prototype.add=function(t){var e=this;return Re(this.subscriptions,t),function(){return ke(e.subscriptions,t)}},t.prototype.notify=function(t,e,n){var r=this.subscriptions.length;if(r)if(1===r)this.subscriptions[0](t,e,n);else for(var o=0;oMath.min(Math.max(n,t),e),Be=.001;function Ie({duration:t=800,bounce:e=.25,velocity:n=0,mass:r=1}){let o,i,a=1-e;a=Fe(.05,1,a),t=Fe(.01,10,t/1e3),a<1?(o=e=>{const r=e*a,o=r*t,i=r-n,s=Ue(e,a),u=Math.exp(-o);return Be-i/s*u},i=e=>{const r=e*a*t,i=r*n+n,s=Math.pow(a,2)*Math.pow(e,2)*t,u=Math.exp(-r),l=Ue(Math.pow(e,2),a);return(-o(e)+Be>0?-1:1)*((i-s)*u)/l}):(o=e=>Math.exp(-e*t)*((e-n)*t+1)-.001,i=e=>Math.exp(-e*t)*(t*t*(n-e)));const s=function(t,e,n){let r=n;for(let o=1;o<12;o++)r-=t(r)/e(r);return r}(o,i,5/t);if(t*=1e3,isNaN(s))return{stiffness:100,damping:10,duration:t};{const e=Math.pow(s,2)*r;return{stiffness:e,damping:2*a*Math.sqrt(r*e),duration:t}}}function Ue(t,e){return t*Math.sqrt(1-e*e)}const ze=["duration","bounce"],Ne=["stiffness","damping","mass"];function We(t,e){return e.some((e=>void 0!==t[e]))}function He(t){var{from:e=0,to:n=1,restSpeed:r=2,restDelta:o}=t,i=zt(t,["from","to","restSpeed","restDelta"]);const a={done:!1,value:e};let{stiffness:s,damping:u,mass:l,velocity:c,duration:f,isResolvedFromDuration:d}=function(t){let e=Object.assign({velocity:0,stiffness:100,damping:10,mass:1,isResolvedFromDuration:!1},t);if(!We(t,Ne)&&We(t,ze)){const n=Ie(t);e=Object.assign(Object.assign(Object.assign({},e),n),{velocity:0,mass:1}),e.isResolvedFromDuration=!0}return e}(i),p=qe,v=qe;function h(){const t=c?-c/1e3:0,r=n-e,i=u/(2*Math.sqrt(s*l)),a=Math.sqrt(s/l)/1e3;if(null!==o&&void 0!==o||(o=Math.abs(n-e)<=1?.01:.4),i<1){const e=Ue(a,i);p=o=>{const s=Math.exp(-i*a*o);return n-s*((t+i*a*r)/e*Math.sin(e*o)+r*Math.cos(e*o))},v=n=>{const o=Math.exp(-i*a*n);return i*a*o*(Math.sin(e*n)*(t+i*a*r)/e+r*Math.cos(e*n))-o*(Math.cos(e*n)*(t+i*a*r)-e*r*Math.sin(e*n))}}else if(1===i)p=e=>n-Math.exp(-a*e)*(r+(t+a*r)*e);else{const e=a*Math.sqrt(i*i-1);p=o=>{const s=Math.exp(-i*a*o),u=Math.min(e*o,300);return n-s*((t+i*a*r)*Math.sinh(u)+e*r*Math.cosh(u))/e}}}return h(),{next:t=>{const e=p(t);if(d)a.done=t>=f;else{const i=1e3*v(t),s=Math.abs(i)<=r,u=Math.abs(n-e)<=o;a.done=s&&u}return a.value=a.done?n:e,a},flipTarget:()=>{c=-c,[e,n]=[n,e],h()}}}He.needsInterpolation=(t,e)=>"string"===typeof t||"string"===typeof e;const qe=t=>0,Ye=(t,e,n)=>{const r=e-t;return 0===r?1:(n-t)/r},Xe=(t,e)=>n=>Math.max(Math.min(n,e),t),_e=t=>t%1?Number(t.toFixed(5)):t,Ge=/(-)?([\d]*\.?[\d])+/g,$e=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,Ze=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function Ke(t){return"string"===typeof t}const Je={test:t=>"number"===typeof t,parse:parseFloat,transform:t=>t},Qe=Object.assign(Object.assign({},Je),{transform:Xe(0,1)}),tn=Object.assign(Object.assign({},Je),{default:1}),en=(t,e)=>n=>Boolean(Ke(n)&&Ze.test(n)&&n.startsWith(t)||e&&Object.prototype.hasOwnProperty.call(n,e)),nn=(t,e,n)=>r=>{if(!Ke(r))return r;const[o,i,a,s]=r.match(Ge);return{[t]:parseFloat(o),[e]:parseFloat(i),[n]:parseFloat(a),alpha:void 0!==s?parseFloat(s):1}},rn=Xe(0,255),on=Object.assign(Object.assign({},Je),{transform:t=>Math.round(rn(t))}),an={test:en("rgb","red"),parse:nn("red","green","blue"),transform:({red:t,green:e,blue:n,alpha:r=1})=>"rgba("+on.transform(t)+", "+on.transform(e)+", "+on.transform(n)+", "+_e(Qe.transform(r))+")"};const sn={test:en("#"),parse:function(t){let e="",n="",r="",o="";return t.length>5?(e=t.substr(1,2),n=t.substr(3,2),r=t.substr(5,2),o=t.substr(7,2)):(e=t.substr(1,1),n=t.substr(2,1),r=t.substr(3,1),o=t.substr(4,1),e+=e,n+=n,r+=r,o+=o),{red:parseInt(e,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:o?parseInt(o,16)/255:1}},transform:an.transform},un=t=>({test:e=>Ke(e)&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}),ln=un("deg"),cn=un("%"),fn=un("px"),dn=un("vh"),pn=un("vw"),vn=Object.assign(Object.assign({},cn),{parse:t=>cn.parse(t)/100,transform:t=>cn.transform(100*t)}),hn={test:en("hsl","hue"),parse:nn("hue","saturation","lightness"),transform:({hue:t,saturation:e,lightness:n,alpha:r=1})=>"hsla("+Math.round(t)+", "+cn.transform(_e(e))+", "+cn.transform(_e(n))+", "+_e(Qe.transform(r))+")"};function mn(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function gn({hue:t,saturation:e,lightness:n,alpha:r}){t/=360,n/=100;let o=0,i=0,a=0;if(e/=100){const r=n<.5?n*(1+e):n+e-n*e,s=2*n-r;o=mn(s,r,t+1/3),i=mn(s,r,t),a=mn(s,r,t-1/3)}else o=i=a=n;return{red:Math.round(255*o),green:Math.round(255*i),blue:Math.round(255*a),alpha:r}}const yn=(t,e,n)=>{const r=t*t,o=e*e;return Math.sqrt(Math.max(0,n*(o-r)+r))},bn=[sn,an,hn],xn=t=>bn.find((e=>e.test(t))),wn=t=>`'${t}' is not an animatable color. Use the equivalent color code instead.`,En=(t,e)=>{let n=xn(t),r=xn(e);wn(t),wn(e);let o=n.parse(t),i=r.parse(e);n===hn&&(o=gn(o),n=an),r===hn&&(i=gn(i),r=an);const a=Object.assign({},o);return t=>{for(const e in a)"alpha"!==e&&(a[e]=yn(o[e],i[e],t));return a.alpha=Ce(o.alpha,i.alpha,t),n.transform(a)}},Pn={test:t=>an.test(t)||sn.test(t)||hn.test(t),parse:t=>an.test(t)?an.parse(t):hn.test(t)?hn.parse(t):sn.parse(t),transform:t=>Ke(t)?t:t.hasOwnProperty("red")?an.transform(t):hn.transform(t)},On="${c}",Sn="${n}";function An(t){"number"===typeof t&&(t=`${t}`);const e=[];let n=0;const r=t.match($e);r&&(n=r.length,t=t.replace($e,On),e.push(...r.map(Pn.parse)));const o=t.match(Ge);return o&&(t=t.replace(Ge,Sn),e.push(...o.map(Je.parse))),{values:e,numColors:n,tokenised:t}}function Tn(t){return An(t).values}function Cn(t){const{values:e,numColors:n,tokenised:r}=An(t),o=e.length;return t=>{let e=r;for(let r=0;r"number"===typeof t?0:t;const Rn={test:function(t){var e,n,r,o;return isNaN(t)&&Ke(t)&&(null!==(n=null===(e=t.match(Ge))||void 0===e?void 0:e.length)&&void 0!==n?n:0)+(null!==(o=null===(r=t.match($e))||void 0===r?void 0:r.length)&&void 0!==o?o:0)>0},parse:Tn,createTransformer:Cn,getAnimatableNone:function(t){const e=Tn(t);return Cn(t)(e.map(Vn))}},kn=t=>"number"===typeof t,Mn=(t,e)=>n=>e(t(n)),Dn=(...t)=>t.reduce(Mn);function jn(t,e){return kn(t)?n=>Ce(t,e,n):Pn.test(t)?En(t,e):In(t,e)}const Ln=(t,e)=>{const n=[...t],r=n.length,o=t.map(((t,n)=>jn(t,e[n])));return t=>{for(let e=0;e{const n=Object.assign(Object.assign({},t),e),r={};for(const o in n)void 0!==t[o]&&void 0!==e[o]&&(r[o]=jn(t[o],e[o]));return t=>{for(const e in r)n[e]=r[e](t);return n}};function Bn(t){const e=Rn.parse(t),n=e.length;let r=0,o=0,i=0;for(let a=0;a{const n=Rn.createTransformer(e),r=Bn(t),o=Bn(e);return r.numHSL===o.numHSL&&r.numRGB===o.numRGB&&r.numNumbers>=o.numNumbers?Dn(Ln(r.parsed,o.parsed),n):n=>`${n>0?e:t}`},Un=(t,e)=>n=>Ce(t,e,n);function zn(t,e,n){const r=[],o=n||("number"===typeof(i=t[0])?Un:"string"===typeof i?Pn.test(i)?En:In:Array.isArray(i)?Ln:"object"===typeof i?Fn:void 0);var i;const a=t.length-1;for(let s=0;st[i-1]&&(t=[].concat(t),e=[].concat(e),t.reverse(),e.reverse());const a=zn(e,r,o),s=2===i?function([t,e],[n]){return r=>n(Ye(t,e,r))}(t,a):function(t,e){const n=t.length,r=n-1;return o=>{let i=0,a=!1;if(o<=t[0]?a=!0:o>=t[r]&&(i=r-1,a=!0),!a){let e=1;for(;eo||e===r);e++);i=e-1}const s=Ye(t[i],t[i+1],o);return e[i](s)}}(t,a);return n?e=>s(Fe(t[0],t[i-1],e)):s}const Wn=t=>e=>1-t(1-e),Hn=t=>e=>e<=.5?t(2*e)/2:(2-t(2*(1-e)))/2,qn=t=>e=>e*e*((t+1)*e-t),Yn=t=>t,Xn=(_n=2,t=>Math.pow(t,_n));var _n;const Gn=Wn(Xn),$n=Hn(Xn),Zn=t=>1-Math.sin(Math.acos(t)),Kn=Wn(Zn),Jn=Hn(Kn),Qn=qn(1.525),tr=Wn(Qn),er=Hn(Qn),nr=(t=>{const e=qn(t);return t=>(t*=2)<1?.5*e(t):.5*(2-Math.pow(2,-10*(t-1)))})(1.525),rr=t=>{if(1===t||0===t)return t;const e=t*t;return t<.36363636363636365?7.5625*e:t<.7272727272727273?9.075*e-9.9*t+3.4:t<.9?12.066481994459833*e-19.63545706371191*t+8.898060941828255:10.8*t*t-20.52*t+10.72},or=Wn(rr);function ir(t,e){return t.map((()=>e||$n)).splice(0,t.length-1)}function ar({from:t=0,to:e=1,ease:n,offset:r,duration:o=300}){const i={done:!1,value:t},a=Array.isArray(e)?e:[t,e],s=function(t,e){return t.map((t=>t*e))}(r&&r.length===a.length?r:function(t){const e=t.length;return t.map(((t,n)=>0!==n?n/(e-1):0))}(a),o);function u(){return Nn(s,a,{ease:Array.isArray(n)?n:ir(a,n)})}let l=u();return{next:t=>(i.value=l(t),i.done=t>=o,i),flipTarget:()=>{a.reverse(),l=u()}}}const sr={keyframes:ar,spring:He,decay:function({velocity:t=0,from:e=0,power:n=.8,timeConstant:r=350,restDelta:o=.5,modifyTarget:i}){const a={done:!1,value:e};let s=n*t;const u=e+s,l=void 0===i?u:i(u);return l!==u&&(s=l-e),{next:t=>{const e=-s*Math.exp(-t/r);return a.done=!(e>o||e<-o),a.value=a.done?l:l+e,a},flipTarget:()=>{}}}};const ur=1/60*1e3,lr="undefined"!==typeof performance?()=>performance.now():()=>Date.now(),cr="undefined"!==typeof window?t=>window.requestAnimationFrame(t):t=>setTimeout((()=>t(lr())),ur);let fr=!0,dr=!1,pr=!1;const vr={delta:0,timestamp:0},hr=["read","update","preRender","render","postRender"],mr=hr.reduce(((t,e)=>(t[e]=function(t){let e=[],n=[],r=0,o=!1,i=!1;const a=new WeakSet,s={schedule:(t,i=!1,s=!1)=>{const u=s&&o,l=u?e:n;return i&&a.add(t),-1===l.indexOf(t)&&(l.push(t),u&&o&&(r=e.length)),t},cancel:t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1),a.delete(t)},process:u=>{if(o)i=!0;else{if(o=!0,[e,n]=[n,e],n.length=0,r=e.length,r)for(let n=0;ndr=!0)),t)),{}),gr=hr.reduce(((t,e)=>{const n=mr[e];return t[e]=(t,e=!1,r=!1)=>(dr||wr(),n.schedule(t,e,r)),t}),{}),yr=hr.reduce(((t,e)=>(t[e]=mr[e].cancel,t)),{}),br=(hr.reduce(((t,e)=>(t[e]=()=>mr[e].process(vr),t)),{}),t=>mr[t].process(vr)),xr=t=>{dr=!1,vr.delta=fr?ur:Math.max(Math.min(t-vr.timestamp,40),1),vr.timestamp=t,pr=!0,hr.forEach(br),pr=!1,dr&&(fr=!1,cr(xr))},wr=()=>{dr=!0,fr=!0,pr||cr(xr)};var Er=gr;function Pr(t,e,n=0){return t-e-n}const Or=t=>{const e=({delta:e})=>t(e);return{start:()=>Er.update(e,!0),stop:()=>yr.update(e)}};function Sr(t){var e,n,{from:r,autoplay:o=!0,driver:i=Or,elapsed:a=0,repeat:s=0,repeatType:u="loop",repeatDelay:l=0,onPlay:c,onStop:f,onComplete:d,onRepeat:p,onUpdate:v}=t,h=zt(t,["from","autoplay","driver","elapsed","repeat","repeatType","repeatDelay","onPlay","onStop","onComplete","onRepeat","onUpdate"]);let m,g,y,{to:b}=h,x=0,w=h.duration,E=!1,P=!0;const O=function(t){if(Array.isArray(t.to))return ar;if(sr[t.type])return sr[t.type];const e=new Set(Object.keys(t));return e.has("ease")||e.has("duration")&&!e.has("dampingRatio")?ar:e.has("dampingRatio")||e.has("stiffness")||e.has("mass")||e.has("damping")||e.has("restSpeed")||e.has("restDelta")?He:ar}(h);(null===(n=(e=O).needsInterpolation)||void 0===n?void 0:n.call(e,r,b))&&(y=Nn([0,100],[r,b],{clamp:!1}),r=0,b=100);const S=O(Object.assign(Object.assign({},h),{from:r,to:b}));function A(){x++,"reverse"===u?(P=x%2===0,a=function(t,e,n=0,r=!0){return r?Pr(e+-t,e,n):e-(t-e)+n}(a,w,l,P)):(a=Pr(a,w,l),"mirror"===u&&S.flipTarget()),E=!1,p&&p()}function T(t){if(P||(t=-t),a+=t,!E){const t=S.next(Math.max(0,a));g=t.value,y&&(g=y(g)),E=P?t.done:a<=0}null===v||void 0===v||v(g),E&&(0===x&&(null!==w&&void 0!==w||(w=a)),x=e+n:t<=-n}(a,w,l,P)&&A():(m.stop(),d&&d()))}return o&&(null===c||void 0===c||c(),m=i(T),m.start()),{stop:()=>{null===f||void 0===f||f(),m.stop()}}}function Ar({from:t=0,velocity:e=0,min:n,max:r,power:o=.8,timeConstant:i=750,bounceStiffness:a=500,bounceDamping:s=10,restDelta:u=1,modifyTarget:l,driver:c,onUpdate:f,onComplete:d,onStop:p}){let v;function h(t){return void 0!==n&&tr}function m(t){return void 0===n?r:void 0===r||Math.abs(n-t){var n;null===f||void 0===f||f(e),null===(n=t.onUpdate)||void 0===n||n.call(t,e)},onComplete:d,onStop:p}))}function y(t){g(Object.assign({type:"spring",stiffness:a,damping:s,restDelta:u},t))}if(h(t))y({from:t,velocity:e,to:m(t)});else{let r=o*e+t;"undefined"!==typeof l&&(r=l(r));const a=m(r),s=a===n?-1:1;let c,f;const d=t=>{c=f,f=t,e=Ve(t-c,vr.delta),(1===s&&t>a||-1===s&&tnull===v||void 0===v?void 0:v.stop()}}var Tr=function(t){return 1e3*t};const Cr=(t,e)=>1-3*e+3*t,Vr=(t,e)=>3*e-6*t,Rr=t=>3*t,kr=(t,e,n)=>((Cr(e,n)*t+Vr(e,n))*t+Rr(e))*t,Mr=(t,e,n)=>3*Cr(e,n)*t*t+2*Vr(e,n)*t+Rr(e);const Dr=.1;function jr(t,e,n,r){if(t===e&&n===r)return Yn;const o=new Float32Array(11);for(let a=0;a<11;++a)o[a]=kr(a*Dr,t,n);function i(e){let r=0,i=1;for(;10!==i&&o[i]<=e;++i)r+=Dr;--i;const a=r+(e-o[i])/(o[i+1]-o[i])*Dr,s=Mr(a,t,n);return s>=.001?function(t,e,n,r){for(let o=0;o<8;++o){const o=Mr(e,n,r);if(0===o)return e;e-=(kr(e,n,r)-t)/o}return e}(e,a,t,n):0===s?a:function(t,e,n,r,o){let i,a,s=0;do{a=e+(n-e)/2,i=kr(a,r,o)-t,i>0?n=a:e=a}while(Math.abs(i)>1e-7&&++s<10);return a}(e,r,r+Dr,t,n)}return t=>0===t||1===t?t:kr(i(t),e,r)}var Lr={linear:Yn,easeIn:Xn,easeInOut:$n,easeOut:Gn,circIn:Zn,circInOut:Jn,circOut:Kn,backIn:Qn,backInOut:er,backOut:tr,anticipate:nr,bounceIn:or,bounceInOut:t=>t<.5?.5*(1-rr(1-2*t)):.5*rr(2*t-1)+.5,bounceOut:rr},Fr=function(t){if(Array.isArray(t)){t.length;var e=Wt(t,4);return jr(e[0],e[1],e[2],e[3])}return"string"===typeof t?("Invalid easing type '".concat(t,"'"),Lr[t]):t},Br=function(t,e){return"zIndex"!==t&&(!("number"!==typeof e&&!Array.isArray(e))||!("string"!==typeof e||!Rn.test(e)||e.startsWith("url(")))},Ir=function(t){return Array.isArray(t)},Ur=function(){return{type:"spring",stiffness:500,damping:25,restDelta:.5,restSpeed:10}},zr=function(t){return{type:"spring",stiffness:550,damping:0===t?2*Math.sqrt(550):30,restDelta:.01,restSpeed:10}},Nr=function(){return{type:"keyframes",ease:"linear",duration:.3}},Wr=function(t){return{type:"keyframes",duration:.8,values:t}},Hr={x:Ur,y:Ur,z:Ur,rotate:Ur,rotateX:Ur,rotateY:Ur,rotateZ:Ur,scaleX:zr,scaleY:zr,scale:zr,opacity:Nr,backgroundColor:Nr,color:Nr,default:zr};const qr=new Set(["brightness","contrast","saturate","opacity"]);function Yr(t){let[e,n]=t.slice(0,-1).split("(");if("drop-shadow"===e)return t;const[r]=n.match(Ge)||[];if(!r)return t;const o=n.replace(r,"");let i=qr.has(e)?1:0;return r!==n&&(i*=100),e+"("+i+o+")"}const Xr=/([a-z-]*)\(.*?\)/g,_r=Object.assign(Object.assign({},Rn),{getAnimatableNone:t=>{const e=t.match(Xr);return e?e.map(Yr).join(" "):t}});var Gr=Ut(Ut({},Je),{transform:Math.round}),$r={borderWidth:fn,borderTopWidth:fn,borderRightWidth:fn,borderBottomWidth:fn,borderLeftWidth:fn,borderRadius:fn,radius:fn,borderTopLeftRadius:fn,borderTopRightRadius:fn,borderBottomRightRadius:fn,borderBottomLeftRadius:fn,width:fn,maxWidth:fn,height:fn,maxHeight:fn,size:fn,top:fn,right:fn,bottom:fn,left:fn,padding:fn,paddingTop:fn,paddingRight:fn,paddingBottom:fn,paddingLeft:fn,margin:fn,marginTop:fn,marginRight:fn,marginBottom:fn,marginLeft:fn,rotate:ln,rotateX:ln,rotateY:ln,rotateZ:ln,scale:tn,scaleX:tn,scaleY:tn,scaleZ:tn,skew:ln,skewX:ln,skewY:ln,distance:fn,translateX:fn,translateY:fn,translateZ:fn,x:fn,y:fn,z:fn,perspective:fn,transformPerspective:fn,opacity:Qe,originX:vn,originY:vn,originZ:fn,zIndex:Gr,fillOpacity:Qe,strokeOpacity:Qe,numOctaves:Gr},Zr=Ut(Ut({},$r),{color:Pn,backgroundColor:Pn,outlineColor:Pn,fill:Pn,stroke:Pn,borderColor:Pn,borderTopColor:Pn,borderRightColor:Pn,borderBottomColor:Pn,borderLeftColor:Pn,filter:_r,WebkitFilter:_r}),Kr=function(t){return Zr[t]};function Jr(t,e){var n,r=Kr(t);return r!==_r&&(r=Rn),null===(n=r.getAnimatableNone)||void 0===n?void 0:n.call(r,e)}var Qr=!1,to=function(t){return Ir(t)?t[t.length-1]||0:t};function eo(t){var e=t.ease,n=t.times,r=t.yoyo,o=t.flip,i=t.loop,a=zt(t,["ease","times","yoyo","flip","loop"]),s=Ut({},a);return n&&(s.offset=n),a.duration&&(s.duration=Tr(a.duration)),a.repeatDelay&&(s.repeatDelay=Tr(a.repeatDelay)),e&&(s.ease=function(t){return Array.isArray(t)&&"number"!==typeof t[0]}(e)?e.map(Fr):Fr(e)),"tween"===a.type&&(s.type="keyframes"),(r||i||o)&&(!0,r?s.repeatType="reverse":i?s.repeatType="loop":o&&(s.repeatType="mirror"),s.repeat=i||r||o||a.repeat),"spring"!==a.type&&(s.type="keyframes"),s}function no(t,e,n){var r;return Array.isArray(e.to)&&(null!==(r=t.duration)&&void 0!==r||(t.duration=.8)),function(t){Array.isArray(t.to)&&null===t.to[0]&&(t.to=Ht([],Wt(t.to),!1),t.to[0]=t.from)}(e),function(t){t.when,t.delay,t.delayChildren,t.staggerChildren,t.staggerDirection,t.repeat,t.repeatType,t.repeatDelay,t.from;var e=zt(t,["when","delay","delayChildren","staggerChildren","staggerDirection","repeat","repeatType","repeatDelay","from"]);return!!Object.keys(e).length}(t)||(t=Ut(Ut({},t),function(t,e){var n;return n=Ir(e)?Wr:Hr[t]||Hr.default,Ut({to:e},n(e))}(n,e.to))),Ut(Ut({},e),eo(t))}function ro(t){return 0===t||"string"===typeof t&&0===parseFloat(t)&&-1===t.indexOf(" ")}function oo(t){return"number"===typeof t?0:Jr("",t)}function io(t,e){return t[e]||t.default||t}function ao(t,e,n,r){return void 0===r&&(r={}),Qr&&(r={type:!1}),e.start((function(o){var i,a,s=function(t,e,n,r,o){var i,a=io(r,t),s=null!==(i=a.from)&&void 0!==i?i:e.get(),u=Br(t,n);"none"===s&&u&&"string"===typeof n?s=Jr(t,n):ro(s)&&"string"===typeof n?s=oo(n):!Array.isArray(n)&&ro(n)&&"string"===typeof s&&(n=oo(s));var l=Br(t,s);return"You are trying to animate ".concat(t,' from "').concat(s,'" to "').concat(n,'". ').concat(s," is not an animatable value - to enable this animation set ").concat(s," to a value animatable to ").concat(n," via the `style` property."),l&&u&&!1!==a.type?function(){var r={from:s,to:n,velocity:e.getVelocity(),onComplete:o,onUpdate:function(t){return e.set(t)}};return"inertia"===a.type||"decay"===a.type?Ar(Ut(Ut({},r),a)):Sr(Ut(Ut({},no(a,r,t)),{onUpdate:function(t){var e;r.onUpdate(t),null===(e=a.onUpdate)||void 0===e||e.call(a,t)},onComplete:function(){var t;r.onComplete(),null===(t=a.onComplete)||void 0===t||t.call(a)}}))}:function(){var t,r,i=to(n);return e.set(i),o(),null===(t=null===a||void 0===a?void 0:a.onUpdate)||void 0===t||t.call(a,i),null===(r=null===a||void 0===a?void 0:a.onComplete)||void 0===r||r.call(a),{stop:function(){}}}}(t,e,n,r,o),u=function(t,e){var n,r;return null!==(r=null!==(n=(io(t,e)||{}).delay)&&void 0!==n?n:t.delay)&&void 0!==r?r:0}(r,t),l=function(){return a=s()};return u?i=setTimeout(l,Tr(u)):l(),function(){clearTimeout(i),null===a||void 0===a||a.stop()}}))}var so=["TopLeft","TopRight","BottomLeft","BottomRight"],uo=so.length;function lo(t,e){var n;return null!==(n=t[e])&&void 0!==n?n:t.borderRadius}var co=po(0,.5,Kn),fo=po(.5,.95,Yn);function po(t,e,n){return function(r){return re?1:n(Ye(t,e,r))}}function vo(t,e){t.min=e.min,t.max=e.max}function ho(t,e){vo(t.x,e.x),vo(t.y,e.y)}function mo(t){return void 0===t||1===t}function go(t){var e=t.scale,n=t.scaleX,r=t.scaleY;return!mo(e)||!mo(n)||!mo(r)}function yo(t){return go(t)||bo(t.x)||bo(t.y)||t.z||t.rotate||t.rotateX||t.rotateY}function bo(t){return t&&"0%"!==t}function xo(t,e,n){return n+e*(t-n)}function wo(t,e,n,r,o){return void 0!==o&&(t=xo(t,o,r)),xo(t,n,r)+e}function Eo(t,e,n,r,o){void 0===e&&(e=0),void 0===n&&(n=1),t.min=wo(t.min,e,n,r,o),t.max=wo(t.max,e,n,r,o)}function Po(t,e){var n=e.x,r=e.y;Eo(t.x,n.translate,n.scale,n.originPoint),Eo(t.y,r.translate,r.scale,r.originPoint)}function Oo(t,e){t.min=t.min+e,t.max=t.max+e}function So(t,e,n){var r=Wt(n,3),o=r[0],i=r[1],a=r[2],s=void 0!==e[a]?e[a]:.5,u=Ce(t.min,t.max,s);Eo(t,e[o],e[i],u,e.scale)}var Ao=["x","scaleX","originX"],To=["y","scaleY","originY"];function Co(t,e){So(t.x,e,Ao),So(t.y,e,To)}const Vo=t=>t.hasOwnProperty("x")&&t.hasOwnProperty("y"),Ro=t=>Vo(t)&&t.hasOwnProperty("z"),ko=(t,e)=>Math.abs(t-e);function Mo(t,e){if(kn(t)&&kn(e))return ko(t,e);if(Vo(t)&&Vo(e)){const n=ko(t.x,e.x),r=ko(t.y,e.y),o=Ro(t)&&Ro(e)?ko(t.z,e.z):0;return Math.sqrt(Math.pow(n,2)+Math.pow(r,2)+Math.pow(o,2))}}function Do(t){return t.max-t.min}function jo(t,e,n){return void 0===e&&(e=0),void 0===n&&(n=.01),Mo(t,e)=0;r--){var o=this.members[r];if(!1!==o.isPresent){e=o;break}}return!!e&&(this.promote(e),!0)},t.prototype.promote=function(t,e){var n,r=this.lead;t!==r&&(this.prevLead=r,this.lead=t,t.show(),r&&(r.instance&&r.scheduleRender(),t.scheduleRender(),t.resumeFrom=r,e&&(t.resumeFrom.preserveOpacity=!0),r.snapshot&&(t.snapshot=r.snapshot,t.snapshot.latestValues=r.animationValues||r.latestValues,t.snapshot.isShared=!0),(null===(n=t.root)||void 0===n?void 0:n.isUpdating)&&(t.isLayoutDirty=!0),!1===t.options.crossfade&&r.hide()))},t.prototype.exitAnimationComplete=function(){this.members.forEach((function(t){var e,n,r,o,i;null===(n=(e=t.options).onExitComplete)||void 0===n||n.call(e),null===(i=null===(r=t.resumingFrom)||void 0===r?void 0:(o=r.options).onExitComplete)||void 0===i||i.call(o)}))},t.prototype.scheduleRender=function(){this.members.forEach((function(t){t.instance&&t.scheduleRender(!1)}))},t.prototype.removeLeadSnapshot=function(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)},t}(),$o={};function Zo(t,e,n){var r=t.x.translate/e.x,o=t.y.translate/e.y,i="translate3d(".concat(r,"px, ").concat(o,"px, 0) ");if(n){var a=n.rotate,s=n.rotateX,u=n.rotateY;a&&(i+="rotate(".concat(a,"deg) ")),s&&(i+="rotateX(".concat(s,"deg) ")),u&&(i+="rotateY(".concat(u,"deg) "))}return"translate3d(0px, 0px, 0) scale(1, 1)"===(i+="scale(".concat(t.x.scale,", ").concat(t.y.scale,")"))?"none":i}function Ko(t){return[t("x"),t("y")]}var Jo=["","X","Y","Z"],Qo=["transformPerspective","x","y","z"];function ti(t,e){return Qo.indexOf(t)-Qo.indexOf(e)}["translate","scale","rotate","skew"].forEach((function(t){return Jo.forEach((function(e){return Qo.push(t+e)}))}));var ei=new Set(Qo);function ni(t){return ei.has(t)}var ri=new Set(["originX","originY","originZ"]);function oi(t){return ri.has(t)}var ii=function(t,e){return t.depth-e.depth},ai=function(){function t(){this.children=[],this.isDirty=!1}return t.prototype.add=function(t){Re(this.children,t),this.isDirty=!0},t.prototype.remove=function(t){ke(this.children,t),this.isDirty=!0},t.prototype.forEach=function(t){this.isDirty&&this.children.sort(ii),this.isDirty=!1,this.children.forEach(t)},t}();function si(t){var e,n=Le(t)?t.get():t;return e=n,Boolean(e&&"object"===typeof e&&e.mix&&e.toValue)?n.toValue():n}var ui={hasAnimatedSinceResize:!0,hasEverUpdated:!1};function li(t){var e=t.attachResizeListener,n=t.defaultParent,r=t.measureScroll,o=t.resetTransform;return function(){function t(t,e,r){var o=this;void 0===e&&(e={}),void 0===r&&(r=null===n||void 0===n?void 0:n()),this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.potentialNodes=new Map,this.checkUpdateFailed=function(){o.isUpdating&&(o.isUpdating=!1,o.clearAllSnapshots())},this.updateProjection=function(){o.nodes.forEach(mi),o.nodes.forEach(gi)},this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.id=t,this.latestValues=e,this.root=r?r.root||r:this,this.path=r?Ht(Ht([],Wt(r.path),!1),[r],!1):[],this.parent=r,this.depth=r?r.depth+1:0,t&&this.root.registerPotentialNode(t,this);for(var i=0;i=0;r--)if(Boolean(t.path[r].instance)){n=t.path[r];break}var o=(n&&n!==t.root?n.instance:document).querySelector('[data-projection-id="'.concat(e,'"]'));o&&t.mount(o,!0)}function Si(t){t.min=Math.round(t.min),t.max=Math.round(t.max)}function Ai(t){Si(t.x),Si(t.y)}var Ti=1;var Ci=(0,vt.createContext)({}),Vi=(0,vt.createContext)({});var Ri=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return It(e,t),e.prototype.getSnapshotBeforeUpdate=function(){return this.updateProps(),null},e.prototype.componentDidUpdate=function(){},e.prototype.updateProps=function(){var t=this.props,e=t.visualElement,n=t.props;e&&e.setProps(n)},e.prototype.render=function(){return this.props.children},e}(vt.Component);function ki(t){var e=t.preloadedFeatures,n=t.createVisualElement,r=t.projectionNodeConstructor,o=t.useRender,i=t.useVisualState,a=t.Component;return e&&function(t){for(var e in t)null!==t[e]&&("projectionNodeConstructor"===e?Yt.projectionNodeConstructor=t[e]:Yt[e].Component=t[e])}(e),(0,vt.forwardRef)((function(t,e){var s=function(t){var e,n=t.layoutId,r=null===(e=(0,vt.useContext)(Ci))||void 0===e?void 0:e.id;return r&&void 0!==n?r+"-"+n:n}(t);t=Ut(Ut({},t),{layoutId:s});var u=(0,vt.useContext)($t),l=null,c=ue(t),f=ce((function(){if(ui.hasEverUpdated)return Ti++})),d=i(t,u.isStatic);return!u.isStatic&&Jt&&(c.visualElement=te(a,d,Ut(Ut({},u),t),n),function(t,e,n,r){var o,i=e.layoutId,a=e.layout,s=e.drag,u=e.dragConstraints,l=e.layoutScroll,c=(0,vt.useContext)(Vi);r&&n&&!(null===n||void 0===n?void 0:n.projection)&&(n.projection=new r(t,n.getLatestValues(),null===(o=n.parent)||void 0===o?void 0:o.projection),n.projection.setOptions({layoutId:i,layout:a,alwaysMeasureLayout:Boolean(s)||u&&ee(u),visualElement:n,scheduleRender:function(){return n.scheduleRender()},animationType:"string"===typeof a?a:"both",initialPromotionConfig:c,layoutScroll:l}))}(f,t,c.visualElement,r||Yt.projectionNodeConstructor),l=function(t,e,n){var r=[];if((0,vt.useContext)(Xt),!e)return null;for(var o=0;o-1||/[A-Z]/.test(t))}function Li(t,e){var n=e.layout,r=e.layoutId;return ni(t)||oi(t)||(n||void 0!==r)&&(!!$o[t]||"opacity"===t)}var Fi={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"};function Bi(t){return t.startsWith("--")}var Ii=function(t,e){return e&&"number"===typeof t?e.transform(t):t};function Ui(t,e,n,r){var o,i=t.style,a=t.vars,s=t.transform,u=t.transformKeys,l=t.transformOrigin;u.length=0;var c=!1,f=!1,d=!0;for(var p in e){var v=e[p];if(Bi(p))a[p]=v;else{var h=$r[p],m=Ii(v,h);if(ni(p)){if(c=!0,s[p]=m,u.push(p),!d)continue;v!==(null!==(o=h.default)&&void 0!==o?o:0)&&(d=!1)}else oi(p)?(l[p]=m,f=!0):i[p]=m}}c?i.transform=function(t,e,n,r){var o=t.transform,i=t.transformKeys,a=e.enableHardwareAcceleration,s=void 0===a||a,u=e.allowTransformNone,l=void 0===u||u,c="";i.sort(ti);for(var f=!1,d=i.length,p=0;pv&&g,E=Array.isArray(m)?m:[m],P=E.reduce(i,{});!1===y&&(P={});var O=h.prevResolvedValues,S=void 0===O?{}:O,A=Ut(Ut({},S),P),T=function(t){w=!0,d.delete(t),h.needsAnimating[t]=!0};for(var C in A){var V=P[C],R=S[C];p.hasOwnProperty(C)||(V!==R?Ir(V)&&Ir(R)?!Ka(V,R)||x?T(C):h.protectedKeys[C]=!0:void 0!==V?T(C):d.add(C):void 0!==V&&d.has(C)?T(C):h.protectedKeys[C]=!0)}h.prevProp=m,h.prevResolvedValues=P,h.isActive&&(p=Ut(Ut({},p),P)),o&&t.blockInitialAnimation&&(w=!1),w&&!b&&f.push.apply(f,Ht([],Wt(E.map((function(t){return{animation:t,options:Ut({type:r},a)}}))),!1))},m=0;m=3;if(e||n){var o=t.point,i=Ae().timestamp;r.history.push(Ut(Ut({},o),{timestamp:i}));var a=r.handlers,s=a.onStart,u=a.onMove;e||(s&&s(r.lastMoveEvent,t),r.startEvent=r.lastMoveEvent),u&&u(r.lastMoveEvent,t)}}},this.handlePointerMove=function(t,e){r.lastMoveEvent=t,r.lastMoveEventInfo=bs(e,r.transformPagePoint),ga(t)&&0===t.buttons?r.handlePointerUp(t,e):Te.update(r.updatePoint,!0)},this.handlePointerUp=function(t,e){r.end();var n=r.handlers,o=n.onEnd,i=n.onSessionEnd,a=ws(bs(e,r.transformPagePoint),r.history);r.startEvent&&o&&o(t,a),i&&i(t,a)},!(ya(t)&&t.touches.length>1)){this.handlers=e,this.transformPagePoint=o;var i=bs(Ea(t),this.transformPagePoint),a=i.point,s=Ae().timestamp;this.history=[Ut(Ut({},a),{timestamp:s})];var u=e.onSessionStart;u&&u(t,ws(i,this.history)),this.removeListeners=Dn(Ta(window,"pointermove",this.handlePointerMove),Ta(window,"pointerup",this.handlePointerUp),Ta(window,"pointercancel",this.handlePointerUp))}}return t.prototype.updateHandlers=function(t){this.handlers=t},t.prototype.end=function(){this.removeListeners&&this.removeListeners(),we.update(this.updatePoint)},t}();function bs(t,e){return e?{point:e(t.point)}:t}function xs(t,e){return{x:t.x-e.x,y:t.y-e.y}}function ws(t,e){var n=t.point;return{point:n,delta:xs(n,Ps(e)),offset:xs(n,Es(e)),velocity:Os(e,.1)}}function Es(t){return t[0]}function Ps(t){return t[t.length-1]}function Os(t,e){if(t.length<2)return{x:0,y:0};for(var n=t.length-1,r=null,o=Ps(t);n>=0&&(r=t[n],!(o.timestamp-r.timestamp>Tr(e)));)n--;if(!r)return{x:0,y:0};var i=(o.timestamp-r.timestamp)/1e3;if(0===i)return{x:0,y:0};var a={x:(o.x-r.x)/i,y:(o.y-r.y)/i};return a.x===1/0&&(a.x=0),a.y===1/0&&(a.y=0),a}function Ss(t,e,n){return{min:void 0!==e?t.min+e:void 0,max:void 0!==n?t.max+n-(t.max-t.min):void 0}}function As(t,e){var n,r=e.min-t.min,o=e.max-t.max;return e.max-e.mine?n="y":Math.abs(t.x)>e&&(n="x");return n}(u),void(null!==n.currentDirection&&(null===a||void 0===a||a(n.currentDirection)));n.updateAxis("x",e.point,u),n.updateAxis("y",e.point,u),n.visualElement.syncRender(),null===s||void 0===s||s(t,e)}},onSessionEnd:function(t,e){return n.stop(t,e)}},{transformPagePoint:this.visualElement.getTransformPagePoint()})}},t.prototype.stop=function(t,e){var n=this.isDragging;if(this.cancel(),n){var r=e.velocity;this.startAnimation(r);var o=this.getProps().onDragEnd;null===o||void 0===o||o(t,e)}},t.prototype.cancel=function(){var t,e;this.isDragging=!1,this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!1),null===(t=this.panSession)||void 0===t||t.end(),this.panSession=void 0,!this.getProps().dragPropagation&&this.openGlobalLock&&(this.openGlobalLock(),this.openGlobalLock=null),null===(e=this.visualElement.animationState)||void 0===e||e.setActive(da.Drag,!1)},t.prototype.updateAxis=function(t,e,n){var r=this.getProps().drag;if(n&&js(t,r,this.currentDirection)){var o=this.getAxisMotionValue(t),i=this.originPoint[t]+n[t];this.constraints&&this.constraints[t]&&(i=function(t,e,n){var r=e.min,o=e.max;return void 0!==r&&to&&(t=n?Ce(o,t,n.max):Math.min(t,o)),t}(i,this.constraints[t],this.elastic[t])),o.set(i)}},t.prototype.resolveConstraints=function(){var t=this,e=this.getProps(),n=e.dragConstraints,r=e.dragElastic,o=(this.visualElement.projection||{}).layout,i=this.constraints;n&&ee(n)?this.constraints||(this.constraints=this.resolveRefConstraints()):this.constraints=!(!n||!o)&&function(t,e){var n=e.top,r=e.left,o=e.bottom,i=e.right;return{x:Ss(t.x,r,i),y:Ss(t.y,n,o)}}(o.actual,n),this.elastic=function(t){return void 0===t&&(t=Ts),!1===t?t=0:!0===t&&(t=Ts),{x:Cs(t,"left","right"),y:Cs(t,"top","bottom")}}(r),i!==this.constraints&&o&&this.constraints&&!this.hasMutatedConstraints&&Ko((function(e){t.getAxisMotionValue(e)&&(t.constraints[e]=function(t,e){var n={};return void 0!==e.min&&(n.min=e.min-t.min),void 0!==e.max&&(n.max=e.max-t.min),n}(o.actual[e],t.constraints[e]))}))},t.prototype.resolveRefConstraints=function(){var t=this.getProps(),e=t.dragConstraints,n=t.onMeasureDragConstraints;if(!e||!ee(e))return!1;var r=e.current,o=this.visualElement.projection;if(!o||!o.layout)return!1;var i=function(t,e,n){var r=ks(t,n),o=e.scroll;return o&&(Oo(r.x,o.x),Oo(r.y,o.y)),r}(r,o.root,this.visualElement.getTransformPagePoint()),a=function(t,e){return{x:As(t.x,e.x),y:As(t.y,e.y)}}(o.layout.actual,i);if(n){var s=n(function(t){var e=t.x,n=t.y;return{top:n.min,right:e.max,bottom:n.max,left:e.min}}(a));this.hasMutatedConstraints=!!s,s&&(a=Rs(s))}return a},t.prototype.startAnimation=function(t){var e=this,n=this.getProps(),r=n.drag,o=n.dragMomentum,i=n.dragElastic,a=n.dragTransition,s=n.dragSnapToOrigin,u=n.onDragTransitionEnd,l=this.constraints||{},c=Ko((function(n){var u;if(js(n,r,e.currentDirection)){var c=null!==(u=null===l||void 0===l?void 0:l[n])&&void 0!==u?u:{};s&&(c={min:0,max:0});var f=i?200:1e6,d=i?40:1e7,p=Ut(Ut({type:"inertia",velocity:o?t[n]:0,bounceStiffness:f,bounceDamping:d,timeConstant:750,restDelta:1,restSpeed:10},a),c);return e.startAxisValueAnimation(n,p)}}));return Promise.all(c).then(u)},t.prototype.startAxisValueAnimation=function(t,e){return ao(t,this.getAxisMotionValue(t),0,e)},t.prototype.stopAnimation=function(){var t=this;Ko((function(e){return t.getAxisMotionValue(e).stop()}))},t.prototype.getAxisMotionValue=function(t){var e,n,r="_drag"+t.toUpperCase(),o=this.visualElement.getProps()[r];return o||this.visualElement.getValue(t,null!==(n=null===(e=this.visualElement.getProps().initial)||void 0===e?void 0:e[t])&&void 0!==n?n:0)},t.prototype.snapToCursor=function(t){var e=this;Ko((function(n){if(js(n,e.getProps().drag,e.currentDirection)){var r=e.visualElement.projection,o=e.getAxisMotionValue(n);if(r&&r.layout){var i=r.layout.actual[n],a=i.min,s=i.max;o.set(t[n]-Ce(a,s,.5))}}}))},t.prototype.scalePositionWithinConstraints=function(){var t,e=this,n=this.getProps(),r=n.drag,o=n.dragConstraints,i=this.visualElement.projection;if(ee(o)&&i&&this.constraints){this.stopAnimation();var a={x:0,y:0};Ko((function(t){var n=e.getAxisMotionValue(t);if(n){var r=n.get();a[t]=function(t,e){var n=.5,r=Do(t),o=Do(e);return o>r?n=Ye(e.min,e.max-r,t.min):r>o&&(n=Ye(t.min,t.max-o,e.min)),Fe(0,1,n)}({min:r,max:r},e.constraints[t])}}));var s=this.visualElement.getProps().transformTemplate;this.visualElement.getInstance().style.transform=s?s({},""):"none",null===(t=i.root)||void 0===t||t.updateScroll(),i.updateLayout(),this.resolveConstraints(),Ko((function(t){if(js(t,r,null)){var n=e.getAxisMotionValue(t),o=e.constraints[t],i=o.min,s=o.max;n.set(Ce(i,s,a[t]))}}))}},t.prototype.addListeners=function(){var t,e=this;Ms.set(this.visualElement,this);var n=Ta(this.visualElement.getInstance(),"pointerdown",(function(t){var n=e.getProps(),r=n.drag,o=n.dragListener;r&&(void 0===o||o)&&e.start(t)})),r=function(){ee(e.getProps().dragConstraints)&&(e.constraints=e.resolveRefConstraints())},o=this.visualElement.projection,i=o.addEventListener("measure",r);o&&!o.layout&&(null===(t=o.root)||void 0===t||t.updateScroll(),o.updateLayout()),r();var a=ha(window,"resize",(function(){e.scalePositionWithinConstraints()}));return o.addEventListener("didUpdate",(function(t){var n=t.delta,r=t.hasLayoutChanged;e.isDragging&&r&&(Ko((function(t){var r=e.getAxisMotionValue(t);r&&(e.originPoint[t]+=n[t].translate,r.set(r.get()+n[t].translate))})),e.visualElement.syncRender())})),function(){a(),n(),i()}},t.prototype.getProps=function(){var t=this.visualElement.getProps(),e=t.drag,n=void 0!==e&&e,r=t.dragDirectionLock,o=void 0!==r&&r,i=t.dragPropagation,a=void 0!==i&&i,s=t.dragConstraints,u=void 0!==s&&s,l=t.dragElastic,c=void 0===l?Ts:l,f=t.dragMomentum,d=void 0===f||f;return Ut(Ut({},t),{drag:n,dragDirectionLock:o,dragPropagation:a,dragConstraints:u,dragElastic:c,dragMomentum:d})},t}();function js(t,e,n){return(!0===e||e===t)&&(null===n||n===t)}var Ls={pan:Ya((function(t){var e=t.onPan,n=t.onPanStart,r=t.onPanEnd,o=t.onPanSessionStart,i=t.visualElement,a=e||n||r||o,s=(0,vt.useRef)(null),u=(0,vt.useContext)($t).transformPagePoint,l={onSessionStart:o,onStart:n,onMove:e,onEnd:function(t,e){s.current=null,r&&r(t,e)}};(0,vt.useEffect)((function(){null!==s.current&&s.current.updateHandlers(l)})),Ca(i,"pointerdown",a&&function(t){s.current=new ys(t,l,{transformPagePoint:u})}),Fa((function(){return s.current&&s.current.end()}))})),drag:Ya((function(t){var e=t.dragControls,n=t.visualElement,r=ce((function(){return new Ds(n)}));(0,vt.useEffect)((function(){return e&&e.subscribe(r)}),[r,e]),(0,vt.useEffect)((function(){return r.addListeners()}),[r])}))},Fs=["LayoutMeasure","BeforeLayoutMeasure","LayoutUpdate","ViewportBoxUpdate","Update","Render","AnimationComplete","LayoutAnimationComplete","AnimationStart","SetAxisTarget","Unmount"];var Bs=function(t){var e=t.treeType,n=void 0===e?"":e,r=t.build,o=t.getBaseTarget,i=t.makeTargetAnimatable,a=t.measureViewportBox,s=t.render,u=t.readValueFromInstance,l=t.removeValueFromRenderState,c=t.sortNodePosition,f=t.scrapeMotionValuesFromProps;return function(t,e){var d=t.parent,p=t.props,v=t.presenceId,h=t.blockInitialAnimation,m=t.visualState;void 0===e&&(e={});var g,y,b=!1,x=m.latestValues,w=m.renderState,E=function(){var t=Fs.map((function(){return new Me})),e={},n={clearAllListeners:function(){return t.forEach((function(t){return t.clear()}))},updatePropListeners:function(t){Fs.forEach((function(r){var o,i="on"+r,a=t[i];null===(o=e[r])||void 0===o||o.call(e),a&&(e[r]=n[i](a))}))}};return t.forEach((function(t,e){n["on"+Fs[e]]=function(e){return t.add(e)},n["notify"+Fs[e]]=function(){for(var e=[],n=0;n5)return o;var u=Rn.createTransformer(t),l="number"!==typeof s[0]?1:0,c=r.x.scale*n.x,f=r.y.scale*n.y;s[0+l]/=c,s[1+l]/=f;var d=Ce(c,f,.5);"number"===typeof s[2+l]&&(s[2+l]/=d),"number"===typeof s[3+l]&&(s[3+l]/=d);var p=u(s);if(i){var v=0;p=p.replace(uu,(function(){var t=a[v];return v++,t}))}return p}},cu=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return It(e,t),e.prototype.componentDidMount=function(){var t,e=this,n=this.props,r=n.visualElement,o=n.layoutGroup,i=n.switchLayoutGroup,a=n.layoutId,s=r.projection;t=fu,Object.assign($o,t),s&&((null===o||void 0===o?void 0:o.group)&&o.group.add(s),(null===i||void 0===i?void 0:i.register)&&a&&i.register(s),s.root.didUpdate(),s.addEventListener("animationComplete",(function(){e.safeToRemove()})),s.setOptions(Ut(Ut({},s.options),{onExitComplete:function(){return e.safeToRemove()}}))),ui.hasEverUpdated=!0},e.prototype.getSnapshotBeforeUpdate=function(t){var e=this,n=this.props,r=n.layoutDependency,o=n.visualElement,i=n.drag,a=n.isPresent,s=o.projection;return s?(s.isPresent=a,i||t.layoutDependency!==r||void 0===r?s.willUpdate():this.safeToRemove(),t.isPresent!==a&&(a?s.promote():s.relegate()||Te.postRender((function(){var t;(null===(t=s.getStack())||void 0===t?void 0:t.members.length)||e.safeToRemove()}))),null):null},e.prototype.componentDidUpdate=function(){var t=this.props.visualElement.projection;t&&(t.root.didUpdate(),!t.currentAnimation&&t.isLead()&&this.safeToRemove())},e.prototype.componentWillUnmount=function(){var t=this.props,e=t.visualElement,n=t.layoutGroup,r=t.switchLayoutGroup,o=e.projection;o&&(o.scheduleCheckAfterUnmount(),(null===n||void 0===n?void 0:n.group)&&n.group.remove(o),(null===r||void 0===r?void 0:r.deregister)&&r.deregister(o))},e.prototype.safeToRemove=function(){var t=this.props.safeToRemove;null===t||void 0===t||t()},e.prototype.render=function(){return null},e}(vt.Component);var fu={borderRadius:Ut(Ut({},su),{applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]}),borderTopLeftRadius:su,borderTopRightRadius:su,borderBottomLeftRadius:su,borderBottomRightRadius:su,boxShadow:lu},du={measureLayout:function(t){var e=Wt(_a(),2),n=e[0],r=e[1],o=(0,vt.useContext)(Ci);return vt.createElement(cu,Ut({},t,{layoutGroup:o,switchLayoutGroup:(0,vt.useContext)(Vi),isPresent:n,safeToRemove:r}))}},pu=li({attachResizeListener:function(t,e){return t.addEventListener("resize",e,{passive:!0}),function(){return t.removeEventListener("resize",e)}},measureScroll:function(){return{x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}}}),vu={current:void 0},hu=li({measureScroll:function(t){return{x:t.scrollLeft,y:t.scrollTop}},defaultParent:function(){if(!vu.current){var t=new pu(0,{});t.mount(window),t.setOptions({layoutScroll:!0}),vu.current=t}return vu.current},resetTransform:function(t,e){t.style.transform=null!==e&&void 0!==e?e:"none"}}),mu=Ut(Ut(Ut(Ut({},gs),Xa),Ls),du),gu=Mi((function(t,e){return function(t,e,n,r,o){var i=e.forwardMotionProps,a=void 0!==i&&i,s=ji(t)?pa:va;return Ut(Ut({},s),{preloadedFeatures:n,useRender:ta(a),createVisualElement:r,projectionNodeConstructor:o,Component:t})}(t,e,mu,iu,hu)}));var yu=0;function bu(){var t=yu;return yu++,t}var xu=function(t){var e=t.children,n=t.initial,r=t.isPresent,o=t.onExitComplete,i=t.custom,a=t.presenceAffectsLayout,s=ce(wu),u=ce(bu),l=(0,vt.useMemo)((function(){return{id:u,initial:n,isPresent:r,custom:i,onExitComplete:function(t){var e,n;s.set(t,!0);try{for(var r=Nt(s.values()),i=r.next();!i.done;i=r.next()){if(!i.value)return}}catch(a){e={error:a}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(e)throw e.error}}null===o||void 0===o||o()},register:function(t){return s.set(t,!1),function(){return s.delete(t)}}}}),a?void 0:[r]);return(0,vt.useMemo)((function(){s.forEach((function(t,e){return s.set(e,!1)}))}),[r]),vt.useEffect((function(){!r&&!s.size&&(null===o||void 0===o||o())}),[r]),vt.createElement(Kt.Provider,{value:l},e)};function wu(){return new Map}function Eu(t){return t.key||""}var Pu=function(t){var e=t.children,n=t.custom,r=t.initial,o=void 0===r||r,i=t.onExitComplete,a=t.exitBeforeEnter,s=t.presenceAffectsLayout,u=void 0===s||s,l=Wt(function(){var t=(0,vt.useRef)(!1),e=Wt((0,vt.useState)(0),2),n=e[0],r=e[1];Fa((function(){return t.current=!0}));var o=(0,vt.useCallback)((function(){!t.current&&r(n+1)}),[n]);return[(0,vt.useCallback)((function(){return Te.postRender(o)}),[o]),n]}(),1)[0],c=(0,vt.useContext)(Ci).forceRender;c&&(l=c);var f=(0,vt.useRef)(!0),d=(0,vt.useRef)(!0);(0,vt.useEffect)((function(){return function(){d.current=!1}}),[]);var p=function(t){var e=[];return vt.Children.forEach(t,(function(t){(0,vt.isValidElement)(t)&&e.push(t)})),e}(e),v=(0,vt.useRef)(p),h=(0,vt.useRef)(new Map).current,m=(0,vt.useRef)(new Set).current;if(function(t,e){t.forEach((function(t){var n=Eu(t);e.set(n,t)}))}(p,h),f.current)return f.current=!1,vt.createElement(vt.Fragment,null,p.map((function(t){return vt.createElement(xu,{key:Eu(t),isPresent:!0,initial:!!o&&void 0,presenceAffectsLayout:u},t)})));for(var g=Ht([],Wt(p),!1),y=v.current.map(Eu),b=p.map(Eu),x=y.length,w=0;w=0||(o[n]=t[n]);return o}var Tu={exit:{scale:.85,opacity:0,transition:{opacity:{duration:.15,easings:"easeInOut"},scale:{duration:.2,easings:"easeInOut"}}},enter:{scale:1,opacity:1,transition:{opacity:{easings:"easeOut",duration:.2},scale:{duration:.2,ease:[.175,.885,.4,1.1]}}}},Cu=["openDelay","closeDelay","closeOnClick","closeOnMouseDown","onOpen","onClose","placement","id","isOpen","defaultIsOpen","arrowSize","arrowShadowColor","arrowPadding","modifiers","isDisabled","gutter","offset","direction"];var Vu=["children","label","shouldWrapChildren","aria-label","hasArrow","bg","portalProps"],Ru=(0,jt.m$)(gu.div),ku=(0,jt.Gp)((function(t,e){var n=(0,jt.mq)("Tooltip",t),o=(0,jt.Lr)(t),i=(0,jt.Fg)(),a=o.children,s=o.label,u=o.shouldWrapChildren,l=o["aria-label"],c=o.hasArrow,f=o.bg,d=o.portalProps,p=Au(o,Vu);f&&(n.bg=f,n[gt.arrowBg.var]=(0,Lt.K1)(i,"colors",f));var v,h=function(t){void 0===t&&(t={});var e=t,n=e.openDelay,o=void 0===n?0:n,i=e.closeDelay,a=void 0===i?0:i,s=e.closeOnClick,u=void 0===s||s,l=e.closeOnMouseDown,c=e.onOpen,f=e.onClose,d=e.placement,p=e.id,v=e.isOpen,h=e.defaultIsOpen,m=e.arrowSize,g=void 0===m?10:m,y=e.arrowShadowColor,b=e.arrowPadding,x=e.modifiers,w=e.isDisabled,E=e.gutter,P=e.offset,O=e.direction,S=Au(e,Cu),A=(0,Ou.qY)({isOpen:v,defaultIsOpen:h,onOpen:c,onClose:f}),T=A.isOpen,C=A.onOpen,V=A.onClose,R=kt({enabled:T,placement:d,arrowPadding:b,modifiers:x,gutter:E,offset:P,direction:O}),k=R.referenceRef,M=R.getPopperProps,D=R.getArrowInnerProps,j=R.getArrowProps,L=(0,Ou.Me)(p,"tooltip"),F=vt.useRef(null),B=vt.useRef(),I=vt.useRef(),U=vt.useCallback((function(){w||(B.current=window.setTimeout(C,o))}),[w,C,o]),z=vt.useCallback((function(){B.current&&clearTimeout(B.current),I.current=window.setTimeout(V,a)}),[a,V]),N=vt.useCallback((function(){u&&z()}),[u,z]),W=vt.useCallback((function(){l&&z()}),[l,z]);(0,Ou.OR)("keydown",(function(t){T&&"Escape"===t.key&&z()})),vt.useEffect((function(){return function(){clearTimeout(B.current),clearTimeout(I.current)}}),[]),(0,Ou.OR)("mouseleave",z,(function(){return F.current}));var H=vt.useCallback((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),Su({},t,{ref:(0,r.lq)(F,e,k),onMouseEnter:(0,Lt.v0)(t.onMouseEnter,U),onClick:(0,Lt.v0)(t.onClick,N),onMouseDown:(0,Lt.v0)(t.onMouseDown,W),onFocus:(0,Lt.v0)(t.onFocus,U),onBlur:(0,Lt.v0)(t.onBlur,z),"aria-describedby":T?L:void 0})}),[U,z,W,T,L,N,k]),q=vt.useCallback((function(t,e){var n;return void 0===t&&(t={}),void 0===e&&(e=null),M(Su({},t,{style:Su({},t.style,(n={},n[gt.arrowSize.var]=g?(0,Lt.px)(g):void 0,n[gt.arrowShadowColor.var]=y,n))}),e)}),[M,g,y]),Y=vt.useCallback((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),Su({ref:e},S,t,{id:L,role:"tooltip",style:Su({},t.style,{position:"relative",transformOrigin:gt.transformOrigin.varRef})})}),[S,L]);return{isOpen:T,show:U,hide:z,getTriggerProps:H,getTooltipProps:Y,getTooltipPositionerProps:q,getArrowProps:j,getArrowInnerProps:D}}(Su({},p,{direction:i.direction}));if((0,Lt.HD)(a)||u)v=vt.createElement(jt.m$.span,Su({tabIndex:0},h.getTriggerProps()),a);else{var m=vt.Children.only(a);v=vt.cloneElement(m,h.getTriggerProps(m.props,m.ref))}var g=!!l,y=h.getTooltipProps({},e),b=g?(0,Lt.CE)(y,["role","id"]):y,x=(0,Lt.ei)(y,["role","id"]);return s?vt.createElement(vt.Fragment,null,v,vt.createElement(Pu,null,h.isOpen&&vt.createElement(Dt.h_,d,vt.createElement(jt.m$.div,Su({},h.getTooltipPositionerProps(),{__css:{zIndex:n.zIndex,pointerEvents:"none"}}),vt.createElement(Ru,Su({variants:Tu},b,{initial:"exit",animate:"enter",exit:"exit",__css:n}),s,g&&vt.createElement(Ft.TX,x,l),c&&vt.createElement(jt.m$.div,{"data-popper-arrow":!0,className:"chakra-tooltip__arrow-wrapper"},vt.createElement(jt.m$.div,{"data-popper-arrow-inner":!0,className:"chakra-tooltip__arrow",__css:{bg:n.bg}}))))))):vt.createElement(vt.Fragment,null,a)}));Lt.Ts&&(ku.displayName="Tooltip")}}]); \ No newline at end of file diff --git a/_next/static/chunks/18-03837ae87ec2cbe1.js b/_next/static/chunks/18-03837ae87ec2cbe1.js new file mode 100644 index 000000000..8505f0c0d --- /dev/null +++ b/_next/static/chunks/18-03837ae87ec2cbe1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18],{4018:function(e,r,a){a.d(r,{II:function(){return C}});var n=a(7375),l=a(2846),t=a(5031),i=a(6450),s=a(7294);function o(){return(o=Object.assign||function(e){for(var r=1;r=0||(l[a]=e[a]);return l}(e,d),b={ref:r,focusable:m,className:(0,t.cx)("chakra-icon",f),__css:o({w:"1em",h:"1em",display:"inline-block",lineHeight:"1em",flexShrink:0,color:c},h)},g=null!=n?n:u.viewBox;if(a&&"string"!==typeof a)return s.createElement(l.m$.svg,o({as:a},b,y));var I=null!=v?v:u.path;return s.createElement(l.m$.svg,o({verticalAlign:"middle",viewBox:g},b,y),I)}));t.Ts&&(c.displayName="Icon");var p=c;function m(){return(m=Object.assign||function(e){for(var r=1;r=0||(l[a]=e[a]);return l}var f=["id","isRequired","isInvalid","isDisabled","isReadOnly"],h=["getRootProps","htmlProps"],y=(0,i.kr)({strict:!1,name:"FormControlContext"}),b=y[0],g=y[1];var I=(0,l.Gp)((function(e,r){var a=(0,l.jC)("Form",e),o=function(e){var r=e.id,a=e.isRequired,l=e.isInvalid,o=e.isDisabled,d=e.isReadOnly,u=v(e,f),c=(0,n.Me)(),p=r||"field-"+c,h=p+"-label",y=p+"-feedback",b=p+"-helptext",g=s.useState(!1),I=g[0],E=g[1],_=s.useState(!1),N=_[0],x=_[1],k=(0,n.kt)(),R=k[0],O=k[1],T=s.useCallback((function(e,r){return void 0===e&&(e={}),void 0===r&&(r=null),m({id:b},e,{ref:(0,i.lq)(r,(function(e){e&&x(!0)}))})}),[b]),q=s.useCallback((function(e,r){var a,n;return void 0===e&&(e={}),void 0===r&&(r=null),m({},e,{ref:r,"data-focus":(0,t.PB)(R),"data-disabled":(0,t.PB)(o),"data-invalid":(0,t.PB)(l),"data-readonly":(0,t.PB)(d),id:null!=(a=e.id)?a:h,htmlFor:null!=(n=e.htmlFor)?n:p})}),[p,o,R,l,d,h]),F=s.useCallback((function(e,r){return void 0===e&&(e={}),void 0===r&&(r=null),m({id:y},e,{ref:(0,i.lq)(r,(function(e){e&&E(!0)})),"aria-live":"polite"})}),[y]),C=s.useCallback((function(e,r){return void 0===e&&(e={}),void 0===r&&(r=null),m({},e,u,{ref:r,role:"group"})}),[u]),P=s.useCallback((function(e,r){return void 0===e&&(e={}),void 0===r&&(r=null),m({},e,{ref:r,role:"presentation","aria-hidden":!0,children:e.children||"*"})}),[]);return{isRequired:!!a,isInvalid:!!l,isReadOnly:!!d,isDisabled:!!o,isFocused:!!R,onFocus:O.on,onBlur:O.off,hasFeedbackText:I,setHasFeedbackText:E,hasHelpText:N,setHasHelpText:x,id:p,labelId:h,feedbackId:y,helpTextId:b,htmlProps:u,getHelpTextProps:T,getErrorMessageProps:F,getRootProps:C,getLabelProps:q,getRequiredIndicatorProps:P}}((0,l.Lr)(e)),d=o.getRootProps;o.htmlProps;var u=v(o,h),c=(0,t.cx)("chakra-form-control",e.className),p=s.useMemo((function(){return u}),[u]);return s.createElement(b,{value:p},s.createElement(l.Fo,{value:a},s.createElement(l.m$.div,m({},d({},r),{className:c,__css:a.container}))))}));t.Ts&&(I.displayName="FormControl");var E=(0,l.Gp)((function(e,r){var a=g(),n=(0,l.yK)(),i=(0,t.cx)("chakra-form__helper-text",e.className);return s.createElement(l.m$.div,m({},null==a?void 0:a.getHelpTextProps(e,r),{__css:n.helperText,className:i}))}));t.Ts&&(E.displayName="FormHelperText");var _=["isDisabled","isInvalid","isReadOnly","isRequired"],N=["id","disabled","readOnly","required","isRequired","isInvalid","isReadOnly","isDisabled","onFocus","onBlur"];function x(e){var r=function(e){var r,a,n,l=g(),i=e.id,s=e.disabled,o=e.readOnly,d=e.required,u=e.isRequired,c=e.isInvalid,p=e.isReadOnly,f=e.isDisabled,h=e.onFocus,y=e.onBlur,b=v(e,N),I=e["aria-describedby"]?[e["aria-describedby"]]:[];null!=l&&l.hasFeedbackText&&null!=l&&l.isInvalid&&I.push(l.feedbackId);null!=l&&l.hasHelpText&&I.push(l.helpTextId);return m({},b,{"aria-describedby":I.join(" ")||void 0,id:null!=i?i:null==l?void 0:l.id,isDisabled:null!=(r=null!=s?s:f)?r:null==l?void 0:l.isDisabled,isReadOnly:null!=(a=null!=o?o:p)?a:null==l?void 0:l.isReadOnly,isRequired:null!=(n=null!=d?d:u)?n:null==l?void 0:l.isRequired,isInvalid:null!=c?c:null==l?void 0:l.isInvalid,onFocus:(0,t.v0)(null==l?void 0:l.onFocus,h),onBlur:(0,t.v0)(null==l?void 0:l.onBlur,y)})}(e),a=r.isDisabled,n=r.isInvalid,l=r.isReadOnly,i=r.isRequired;return m({},v(r,_),{disabled:a,readOnly:l,required:i,"aria-invalid":(0,t.Qm)(n),"aria-required":(0,t.Qm)(i),"aria-readonly":(0,t.Qm)(l)})}var k=(0,l.Gp)((function(e,r){var a=(0,l.jC)("FormError",e),n=(0,l.Lr)(e),i=g();return null!=i&&i.isInvalid?s.createElement(l.Fo,{value:a},s.createElement(l.m$.div,m({},null==i?void 0:i.getErrorMessageProps(n,r),{className:(0,t.cx)("chakra-form__error-message",e.className),__css:m({display:"flex",alignItems:"center"},a.text)}))):null}));t.Ts&&(k.displayName="FormErrorMessage");var R=(0,l.Gp)((function(e,r){var a=(0,l.yK)(),n=g();if(null==n||!n.isInvalid)return null;var i=(0,t.cx)("chakra-form__error-icon",e.className);return s.createElement(p,m({ref:r,"aria-hidden":!0},e,{__css:a.icon,className:i}),s.createElement("path",{fill:"currentColor",d:"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"}))}));t.Ts&&(R.displayName="FormErrorIcon");var O=["className","children","requiredIndicator"],T=(0,l.Gp)((function(e,r){var a,n=(0,l.mq)("FormLabel",e),i=(0,l.Lr)(e);i.className;var o=i.children,d=i.requiredIndicator,u=void 0===d?s.createElement(q,null):d,c=v(i,O),p=g(),f=null!=(a=null==p?void 0:p.getLabelProps(c,r))?a:m({ref:r},c);return s.createElement(l.m$.label,m({},f,{className:(0,t.cx)("chakra-form__label",i.className),__css:m({display:"block",textAlign:"start"},n)}),o,null!=p&&p.isRequired?u:null)}));t.Ts&&(T.displayName="FormLabel");var q=(0,l.Gp)((function(e,r){var a=g(),n=(0,l.yK)();if(null==a||!a.isRequired)return null;var i=(0,t.cx)("chakra-form__required-indicator",e.className);return s.createElement(l.m$.span,m({},null==a?void 0:a.getRequiredIndicatorProps(e,r),{__css:n.requiredIndicator,className:i}))}));function F(){return(F=Object.assign||function(e){for(var r=1;r=0||(l[a]=e[a]);return l}t.Ts&&(C.displayName="Input"),C.id="Input";var L=["placement"],j={left:{marginEnd:"-1px",borderEndRadius:0,borderEndColor:"transparent"},right:{marginStart:"-1px",borderStartRadius:0,borderStartColor:"transparent"}},w=(0,l.m$)("div",{baseStyle:{flex:"0 0 auto",width:"auto",display:"flex",alignItems:"center",whiteSpace:"nowrap"}}),G=(0,l.Gp)((function(e,r){var a,n=e.placement,t=void 0===n?"left":n,i=P(e,L),o=null!=(a=j[t])?a:{},d=(0,l.yK)();return s.createElement(w,F({ref:r},i,{__css:F({},d.addon,o)}))}));t.Ts&&(G.displayName="InputAddon");var A=(0,l.Gp)((function(e,r){return s.createElement(G,F({ref:r,placement:"left"},e,{className:(0,t.cx)("chakra-input__left-addon",e.className)}))}));t.Ts&&(A.displayName="InputLeftAddon"),A.id="InputLeftAddon";var B=(0,l.Gp)((function(e,r){return s.createElement(G,F({ref:r,placement:"right"},e,{className:(0,t.cx)("chakra-input__right-addon",e.className)}))}));t.Ts&&(B.displayName="InputRightAddon"),B.id="InputRightAddon";var S=["children","className"],M=(0,l.Gp)((function(e,r){var a=(0,l.jC)("Input",e),n=(0,l.Lr)(e),o=n.children,d=n.className,u=P(n,S),c=(0,t.cx)("chakra-input__group",d),p={},m=(0,i.WR)(o),v=a.field;m.forEach((function(e){if(a){var r,n;if(v&&"InputLeftElement"===e.type.id)p.paddingStart=null!=(r=v.height)?r:v.h;if(v&&"InputRightElement"===e.type.id)p.paddingEnd=null!=(n=v.height)?n:v.h;"InputRightAddon"===e.type.id&&(p.borderEndRadius=0),"InputLeftAddon"===e.type.id&&(p.borderStartRadius=0)}}));var f=m.map((function(r){var a,n,l=(0,t.YU)({size:(null==(a=r.props)?void 0:a.size)||e.size,variant:(null==(n=r.props)?void 0:n.variant)||e.variant});return"Input"!==r.type.id?s.cloneElement(r,l):s.cloneElement(r,Object.assign(l,p,r.props))}));return s.createElement(l.m$.div,F({className:c,ref:r,__css:{width:"100%",display:"flex",position:"relative"}},u),s.createElement(l.Fo,{value:a},f))}));t.Ts&&(M.displayName="InputGroup");var $=["placement"],D=["className"],H=["className"],z=(0,l.m$)("div",{baseStyle:{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:"0",zIndex:2}}),K=(0,l.Gp)((function(e,r){var a,n,t,i=e.placement,o=void 0===i?"left":i,d=P(e,$),u=(0,l.yK)().field,c=((t={})["left"===o?"insetStart":"insetEnd"]="0",t.width=null!=(a=null==u?void 0:u.height)?a:null==u?void 0:u.h,t.height=null!=(n=null==u?void 0:u.height)?n:null==u?void 0:u.h,t.fontSize=null==u?void 0:u.fontSize,t);return s.createElement(z,F({ref:r,__css:c},d))}));K.id="InputElement",t.Ts&&(K.displayName="InputElement");var Q=(0,l.Gp)((function(e,r){var a=e.className,n=P(e,D),l=(0,t.cx)("chakra-input__left-element",a);return s.createElement(K,F({ref:r,placement:"left",className:l},n))}));Q.id="InputLeftElement",t.Ts&&(Q.displayName="InputLeftElement");var Z=(0,l.Gp)((function(e,r){var a=e.className,n=P(e,H),l=(0,t.cx)("chakra-input__right-element",a);return s.createElement(K,F({ref:r,placement:"right",className:l},n))}));Z.id="InputRightElement",t.Ts&&(Z.displayName="InputRightElement")}}]); \ No newline at end of file diff --git a/_next/static/chunks/280-3c3bc88fe5c786f4.js b/_next/static/chunks/280-3c3bc88fe5c786f4.js deleted file mode 100644 index ed2a1b1c8..000000000 --- a/_next/static/chunks/280-3c3bc88fe5c786f4.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[280],{9280:function(e,t,n){var r={"./authors":8712,"./authors.json":8712,"./guides":9552,"./guides.json":9552,"./guides/asymptotic-notation.md":3406,"./guides/avoid-render-blocking-javascript-with-async-defer.md":4109,"./guides/basic-authentication.md":4048,"./guides/big-o-notation.md":4340,"./guides/character-encodings.md":2963,"./guides/ci-cd.md":1123,"./guides/design-patterns-for-humans.md":5298,"./guides/dhcp-in-one-picture.md":8303,"./guides/dns-in-one-picture.md":6210,"./guides/history-of-javascript.md":5263,"./guides/http-caching.md":299,"./guides/journey-to-http2.md":2518,"./guides/jwt-authentication.md":3275,"./guides/levels-of-seniority.md":7824,"./guides/oauth.md":7118,"./guides/project-history.md":319,"./guides/proxy-servers.md":5282,"./guides/random-numbers.md":9177,"./guides/scaling-databases.md":3895,"./guides/session-authentication.md":4403,"./guides/ssl-tls-https-ssh.md":5740,"./guides/sso.md":2303,"./guides/token-authentication.md":5726,"./guides/torrent-client.md":9263,"./guides/unfamiliar-codebase.md":8686,"./guides/upcoming.md":4876,"./guides/what-are-web-vitals.md":9405,"./guides/what-is-internet.md":9069,"./guides/what-is-sli-slo-sla.md":8681,"./guides/why-build-it-and-they-will-come-wont-work-anymore.md":2935,"./pages/about.md":7480,"./pages/privacy.md":2612,"./pages/terms.md":9636,"./roadmaps":1662,"./roadmaps.json":1662,"./roadmaps/100-frontend/content-paths":8359,"./roadmaps/100-frontend/content-paths.json":8359,"./roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md":1080,"./roadmaps/100-frontend/content/100-internet/101-what-is-http.md":3592,"./roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md":1995,"./roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md":2229,"./roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md":4898,"./roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md":6747,"./roadmaps/100-frontend/content/100-internet/readme.md":2217,"./roadmaps/100-frontend/content/101-html/100-learn-the-basics.md":1244,"./roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md":8234,"./roadmaps/100-frontend/content/101-html/102-forms-and-validations.md":3392,"./roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md":102,"./roadmaps/100-frontend/content/101-html/104-accessibility.md":2053,"./roadmaps/100-frontend/content/101-html/105-seo-basics.md":2783,"./roadmaps/100-frontend/content/101-html/readme.md":6630,"./roadmaps/100-frontend/content/102-css/100-learn-the-basics.md":6729,"./roadmaps/100-frontend/content/102-css/101-making-layouts.md":8371,"./roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md":9738,"./roadmaps/100-frontend/content/102-css/readme.md":4814,"./roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md":9536,"./roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md":4964,"./roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md":7522,"./roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md":7919,"./roadmaps/100-frontend/content/103-javascript/104-concepts.md":2132,"./roadmaps/100-frontend/content/103-javascript/readme.md":2009,"./roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md":1343,"./roadmaps/100-frontend/content/104-version-control-systems/readme.md":1688,"./roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md":622,"./roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md":9597,"./roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md":1752,"./roadmaps/100-frontend/content/105-repo-hosting-services/readme.md":5863,"./roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md":3598,"./roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md":1342,"./roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md":8215,"./roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md":6432,"./roadmaps/100-frontend/content/106-web-security-knowledge/readme.md":9e3,"./roadmaps/100-frontend/content/107-package-managers/100-npm.md":7897,"./roadmaps/100-frontend/content/107-package-managers/101-yarn.md":6741,"./roadmaps/100-frontend/content/107-package-managers/readme.md":9897,"./roadmaps/100-frontend/content/108-css-architecture/100-bem.md":2002,"./roadmaps/100-frontend/content/108-css-architecture/101-oocss.md":9085,"./roadmaps/100-frontend/content/108-css-architecture/102-smacss.md":6235,"./roadmaps/100-frontend/content/108-css-architecture/readme.md":814,"./roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md":1516,"./roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md":2238,"./roadmaps/100-frontend/content/109-css-preprocessors/102-less.md":3765,"./roadmaps/100-frontend/content/109-css-preprocessors/readme.md":8241,"./roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md":9581,"./roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md":3619,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md":128,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md":5147,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md":2442,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md":4639,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md":5524,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md":401,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md":5050,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md":5744,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md":8572,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md":3247,"./roadmaps/100-frontend/content/110-build-tools/readme.md":749,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md":8583,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md":6445,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md":5309,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md":355,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md":5771,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md":8532,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md":9092,"./roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md":4642,"./roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md":7917,"./roadmaps/100-frontend/content/111-pick-a-framework/readme.md":8111,"./roadmaps/100-frontend/content/112-modern-css/100-styled-components.md":7038,"./roadmaps/100-frontend/content/112-modern-css/101-css-modules.md":6533,"./roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md":509,"./roadmaps/100-frontend/content/112-modern-css/103-emotion.md":2719,"./roadmaps/100-frontend/content/112-modern-css/readme.md":7576,"./roadmaps/100-frontend/content/113-web-components/100-html-templates.md":5281,"./roadmaps/100-frontend/content/113-web-components/101-custom-elements.md":9013,"./roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md":8696,"./roadmaps/100-frontend/content/113-web-components/readme.md":5689,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md":3060,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md":4743,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md":590,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md":5806,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md":2289,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md":9413,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md":2551,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md":6121,"./roadmaps/100-frontend/content/114-css-frameworks/readme.md":4093,"./roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md":3303,"./roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md":6832,"./roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md":5505,"./roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md":4459,"./roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md":7814,"./roadmaps/100-frontend/content/115-testing-your-apps/readme.md":2632,"./roadmaps/100-frontend/content/116-type-checkers/100-typescript.md":846,"./roadmaps/100-frontend/content/116-type-checkers/101-flow.md":4835,"./roadmaps/100-frontend/content/116-type-checkers/readme.md":8285,"./roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md":2552,"./roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md":8030,"./roadmaps/100-frontend/content/117-progressive-web-apps/readme.md":9759,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md":6859,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md":1860,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md":2522,"./roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md":1496,"./roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md":3669,"./roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md":1071,"./roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md":2590,"./roadmaps/100-frontend/content/118-server-side-rendering/readme.md":583,"./roadmaps/100-frontend/content/119-graphql/100-apollo.md":1285,"./roadmaps/100-frontend/content/119-graphql/101-relay-modern.md":9135,"./roadmaps/100-frontend/content/119-graphql/readme.md":7175,"./roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md":7505,"./roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md":3683,"./roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md":4978,"./roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md":4264,"./roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md":6975,"./roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md":1280,"./roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md":648,"./roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md":3221,"./roadmaps/100-frontend/content/120-static-site-generators/readme.md":6798,"./roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md":368,"./roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md":5412,"./roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md":9911,"./roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md":342,"./roadmaps/100-frontend/content/121-mobile-applications/readme.md":1483,"./roadmaps/100-frontend/content/122-desktop-applications/100-electron.md":3557,"./roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md":3759,"./roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md":3752,"./roadmaps/100-frontend/content/122-desktop-applications/readme.md":1027,"./roadmaps/100-frontend/content/123-web-assembly.md":7862,"./roadmaps/100-frontend/content/readme.md":5261,"./roadmaps/100-frontend/meta":9258,"./roadmaps/100-frontend/meta.json":9258,"./roadmaps/100-frontend/resources.md":3158,"./roadmaps/101-backend/meta":6782,"./roadmaps/101-backend/meta.json":6782,"./roadmaps/101-backend/resources.md":1325,"./roadmaps/102-devops/meta":4017,"./roadmaps/102-devops/meta.json":4017,"./roadmaps/102-devops/resources.md":8558,"./roadmaps/103-react/landscape.md":7499,"./roadmaps/103-react/meta":8477,"./roadmaps/103-react/meta.json":8477,"./roadmaps/103-react/resources.md":8274,"./roadmaps/104-angular/landscape.md":892,"./roadmaps/104-angular/meta":8834,"./roadmaps/104-angular/meta.json":8834,"./roadmaps/104-angular/resources.md":2710,"./roadmaps/105-android/landscape.md":8814,"./roadmaps/105-android/meta":9508,"./roadmaps/105-android/meta.json":9508,"./roadmaps/105-android/resources.md":2151,"./roadmaps/106-python/landscape.md":8751,"./roadmaps/106-python/meta":4099,"./roadmaps/106-python/meta.json":4099,"./roadmaps/106-python/resources.md":1894,"./roadmaps/107-golang/landscape.md":3331,"./roadmaps/107-golang/meta":2737,"./roadmaps/107-golang/meta.json":2737,"./roadmaps/107-golang/resources.md":3923,"./roadmaps/108-java/landscape.md":4464,"./roadmaps/108-java/meta":2507,"./roadmaps/108-java/meta.json":2507,"./roadmaps/108-java/resources.md":4764,"./roadmaps/109-postgresql-dba/landscape.md":4592,"./roadmaps/109-postgresql-dba/meta":8951,"./roadmaps/109-postgresql-dba/meta.json":8951,"./roadmaps/109-postgresql-dba/resources.md":165,"./roadmaps/110-aws/landscape.md":2014,"./roadmaps/110-aws/meta":7559,"./roadmaps/110-aws/meta.json":7559,"./roadmaps/110-aws/resources.md":3737,"./roadmaps/111-qa/landscape.md":611,"./roadmaps/111-qa/meta":3204,"./roadmaps/111-qa/meta.json":3204,"./roadmaps/111-qa/resources.md":4541,"./site":8641,"./site.json":8641,"./videos":1797,"./videos.json":1797,"./videos/acid-explained.md":5292,"./videos/all-about-http-caching.md":1568,"./videos/arrays-and-objects-in-javascript.md":8259,"./videos/async-javascript.md":7210,"./videos/big-o-notation.md":3501,"./videos/content-delivery-networks.md":1830,"./videos/dns-explained.md":9970,"./videos/dns-records.md":4997,"./videos/floating-point-arithmetic.md":8813,"./videos/freeze-and-seal-objects-in-javascript.md":6789,"./videos/how-to-use-css-variables.md":9320,"./videos/how-to-use-github-actions.md":7624,"./videos/javascript-fetch-api.md":6634,"./videos/load-balancers-101.md":4121,"./videos/osi-model.md":8635,"./videos/practical-intro-to-react.md":1051,"./videos/promises-in-javascript.md":5491,"./videos/random-number-generators.md":7730,"./videos/scaling-the-unscalable.md":9351,"./videos/ssh-ssl-tls.md":6765,"./videos/system-design-101.md":4322,"./videos/tcp-ip-model.md":2142,"./videos/transport-protocols-tcp-vs-udp.md":2034,"./videos/what-is-cap-theorem.md":6672,"./videos/what-is-dependency-injection.md":1454,"./videos/what-is-dom-shadow-dom-virtual-dom.md":6315,"./videos/what-is-eventual-consistency.md":104,"./videos/yaml-in-depth.md":8734};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=9280},7480:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",null,"What is roadmap.sh?"),(0,r.kt)("p",null,"Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding\ndevelopers. It started as a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"set of charts to guide the developers"),"\nwho are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get\nmore contributors involved."),(0,r.kt)("h2",null,"What are the plans for roadmap.sh?"),(0,r.kt)("p",null,"The website started off as\na ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"simple repository containing a few charts")," for developers and\nbased on my personal opinions but it could have been much more than that so I decided to expand it to a website where\npeople can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc."),(0,r.kt)("p",null,"We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into\na goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the\nlearnings, get feedbacks on their projects etc."),(0,r.kt)("h2",null,"How did you build roadmap.sh?"),(0,r.kt)("p",null,"The basic version of the website has been built with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/zeit/next.js/"}),"Next.js"),", is opensource and can\nbe found on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"github"),". It was hastily done to get it out in front of the\npeople and get people to start contributing, so it might be rough on the edges, but that is where we need your help."),(0,r.kt)("h2",null,"How does it make money?"),(0,r.kt)("p",null,"It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with\nany intentions of monetization but as a good will, to help the people get out of the frustration that I was once in."),(0,r.kt)("p",null,"Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to\nmake enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll\ncontinue growing the site however I can. My focus at the moment is not making money from it and just add content that\ncreates value for the people."),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Sponsor the efforts by ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/sponsors/kamranahmedse"}),"paying as little as 5$ per month")," or with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://paypal.me/kamranahmedse"}),"one time payment via paypal"),". Alternatively, reach out to me at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),".")),(0,r.kt)("h2",null,"Can I contribute?"),(0,r.kt)("p",null,"You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The\nsource code of the website can be ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"found on Github"),". Your contributions can\nbe:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Adding a new roadmap"),(0,r.kt)("li",{parentName:"ul"},"Updating existing roadmap"),(0,r.kt)("li",{parentName:"ul"},"Suggesting changes to the existing roadmaps"),(0,r.kt)("li",{parentName:"ul"},"Writing a Guide"),(0,r.kt)("li",{parentName:"ul"},"Updating an existing guide"),(0,r.kt)("li",{parentName:"ul"},"Fixing grammar mistakes, typos on the website or the content"),(0,r.kt)("li",{parentName:"ul"},"Updating the UI of the website"),(0,r.kt)("li",{parentName:"ul"},"Refactoring the codebase"),(0,r.kt)("li",{parentName:"ul"},"Becoming a sponsor")),(0,r.kt)("p",null,"Just make sure\nto ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing"}),"follow the contribution guidelines")," when you\ndecide to contribute."),(0,r.kt)("h2",null,"Can I redistribute the content?"),(0,r.kt)("p",null,"No, the license of the content on this website does not allow you to redistribute any of the content on this website\nanywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not\nallowed."),(0,r.kt)("h2",null,"What is the best way to contact you?"),(0,r.kt)("p",null,"Tweet or send me a message ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse")," or email me\nat ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),". I get lots of messages so apologies in advance if you don't hear back\nfrom me soon but I do reply to everyone."))}s.isMDXComponent=!0},2612:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Privacy Policy"),(0,r.kt)("p",null,"By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh\u2019s Services is at all times subject to the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/terms"}),"Terms of Use"),", which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use."),(0,r.kt)("h2",null,"What does this Privacy Policy cover?"),(0,r.kt)("p",null,'This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don\u2019t own or control, or people that we don\u2019t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.'),(0,r.kt)("p",null,"As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"Will roadmap.sh ever change this Privacy Policy?"),(0,r.kt)("p",null,"We\u2019re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you\u2019ve opted not to receive legal notice emails from us (or you haven\u2019t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected."),(0,r.kt)("h2",null,"What Information does roadmap.sh Collect?"),(0,r.kt)("p",null,"Information You Provide to Us:"),(0,r.kt)("p",null,"We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (\u201cThird Party Account Information\u201d) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features."),(0,r.kt)("p",null,"We may communicate with you if you\u2019ve provided us the means to do so. For example, if you\u2019ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"Information Collected Automatically"),(0,r.kt)("p",null,"Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, \u201ccookie\u201d information, the type of browser and/or device you\u2019re using to access our Services, and the page or feature you requested. \u201cCookies\u201d are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device\u2019s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren\u2019t responsible for their privacy policies and practices."),(0,r.kt)("p",null,"When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible."),(0,r.kt)("h2",null,"Will roadmap.sh Share Any of the Personal Information it Receives?"),(0,r.kt)("p",null,"We may share your Personal Information with third parties as described in this section:"),(0,r.kt)("p",null,"Information that\u2019s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual."),(0,r.kt)("p",null,"Advertisers: We may allow advertisers and/or merchant partners (\u201cAdvertisers\u201d) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach."),(0,r.kt)("p",null,"We may deliver a file to you through the Services (known as a \u201cweb beacon\u201d) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network\u2019s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser."),(0,r.kt)("p",null,"Affiliated Businesses: In certain situations, businesses or third party websites we\u2019re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business\u2019 or websites\u2019 policies."),(0,r.kt)("p",null,"Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us."),(0,r.kt)("p",null,"User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of \u201cfriends\u201d from that site or service may be automatically imported to the Services, and such \u201cfriends,\u201d if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service."),(0,r.kt)("p",null,"Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party."),(0,r.kt)("p",null,"Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others."),(0,r.kt)("h2",null,"Is Personal Information about me secure?"),(0,r.kt)("p",null,"Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time."),(0,r.kt)("h2",null,"What Personal Information can I access?"),(0,r.kt)("p",null,"Through your account settings, you may access, and, in some cases, edit or delete the following information you\u2019ve provided to us:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"first and last name"),(0,r.kt)("li",{parentName:"ul"},"location of residence"),(0,r.kt)("li",{parentName:"ul"},"age or birthday"),(0,r.kt)("li",{parentName:"ul"},"username")),(0,r.kt)("p",null,"The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("p",null,"Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"What choices do I have?"),(0,r.kt)("p",null,"You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features."),(0,r.kt)("p",null,"You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com")," and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally."),(0,r.kt)("h2",null,"What if I have questions about this policy?"),(0,r.kt)("p",null,"If you have any questions or concerns regarding our privacy policies, please send us a detailed message to ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),", and we will try to resolve your concerns."))}s.isMDXComponent=!0},1080:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Internet"),(0,r.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.vox.com/2014/6/16/18076282/the-internet",mdxType:"BadgeLink"},"The Internet Explained"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm",mdxType:"BadgeLink"},"How Does the Internet Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"Introduction to Internet"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=x3c1ih2NJEg",mdxType:"BadgeLink"},"How does the Internet work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the Internet Works in 5 Minutes"))}u.isMDXComponent=!0},3592:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"What is HTTP?"),(0,r.kt)("p",null,"HTTP is the ",(0,r.kt)("inlineCode",{parentName:"p"},"TCP/IP")," based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/",mdxType:"BadgeLink"},"What is HTTP?"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",mdxType:"BadgeLink"},"An overview of HTTP"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://kamranahmed.info/blog/2016/08/13/http-in-depth/",mdxType:"BadgeLink"},"Journey to HTTP/2"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=iYM2zFP3Zn0",mdxType:"BadgeLink"},"HTTP Crash Course & Exploration"))}u.isMDXComponent=!0},1995:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Browsers"),(0,r.kt)("p",null,"A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. "),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/",mdxType:"BadgeLink"},"How Browsers Work"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.browserstack.com/guide/browser-rendering-engine",mdxType:"BadgeLink"},"Role of Rendering Engine in Browsers"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work",mdxType:"BadgeLink"},"Populating the Page: How Browsers Work"))}u.isMDXComponent=!0},2229:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"DNS"),(0,r.kt)("p",null,"The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/",mdxType:"BadgeLink"},"What is DNS?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Wj0od2ag5sk",mdxType:"BadgeLink"},"DNS and How does it Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7lxgpKh_fRY",mdxType:"BadgeLink"},"DNS Records"))}u.isMDXComponent=!0},4898:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Domain Name"),(0,r.kt)("p",null,"A domain name is a unique, easy-to-remember address used to access websites, such as \u2018google.com\u2019, and \u2018facebook.com\u2019. Users can connect to websites using domain names thanks to the DNS system."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name",mdxType:"BadgeLink"},"What is a Domain Name?"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/",mdxType:"BadgeLink"},"What is a Domain Name? | Domain name vs. URL"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Y4cRx19nhJk",mdxType:"BadgeLink"},"A Beginners Guide to How Domain Names Work"))}u.isMDXComponent=!0},6747:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Hosting"),(0,r.kt)("p",null,"Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=htbY9-yggB0",mdxType:"BadgeLink"},"What Is Web Hosting? Explained"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=AXVZYzw8geg",mdxType:"BadgeLink"},"Different Types of Web Hosting Explained"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Kx_1NYYJS7Q",mdxType:"BadgeLink"},"Where to Host a Fullstack Project on a Budget"))}u.isMDXComponent=!0},2217:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Internet"),(0,r.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.vox.com/2014/6/16/18076282/the-internet",mdxType:"BadgeLink"},"The Internet Explained"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm",mdxType:"BadgeLink"},"How Does the Internet Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"Introduction to Internet"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=x3c1ih2NJEg",mdxType:"BadgeLink"},"How does the Internet work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the Internet Works in 5 Minutes"))}u.isMDXComponent=!0},1244:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"HTML Basics"),(0,r.kt)("p",null,"HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.w3schools.com/html/html_intro.asp",mdxType:"BadgeLink"},"W3Schools: Learn HTML"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=qz0aGYrrlhU",mdxType:"BadgeLink"},"HTML Tutorial for Beginners: HTML Crash Course"))}u.isMDXComponent=!0},8234:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Semantic HTML"),(0,r.kt)("p",null,"Semantic element clearly describes its meaning to both the browser and the developer."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",colorScheme:"yellow",href:"https://www.w3schools.com/html/html5_semantic_elements.asp",mdxType:"BadgeLink"},"W3Schools: Semantic HTML"),(0,r.kt)(i,{badgeText:"Read",colorScheme:"yellow",href:"https://hackernoon.com/how-to-write-semantic-html-dkq3ulo",mdxType:"BadgeLink"},"How To Write Semantic HTML"))}u.isMDXComponent=!0},3392:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Forms and validations"))}s.isMDXComponent=!0},102:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Conventions and best practices"))}s.isMDXComponent=!0},2053:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Accessibility"))}s.isMDXComponent=!0},2783:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Basics of SEO"))}s.isMDXComponent=!0},6630:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"HTML"),(0,r.kt)("p",null,"HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.w3schools.com/html/html_intro.asp",mdxType:"BadgeLink"},"W3Schools: Learn HTML"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=qz0aGYrrlhU",mdxType:"BadgeLink"},"HTML Tutorial for Beginners: HTML Crash Course"))}u.isMDXComponent=!0},6729:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"CSS Basics"),(0,r.kt)("p",null,"CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2014 Learn CSS"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.freecodecamp.org/learn/responsive-web-design/",mdxType:"BadgeLink"},"freeCodeCamp \u2014 Responsive Web Design"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://learn.shayhowe.com/html-css/building-your-first-web-page/",mdxType:"BadgeLink"},"Learn to Code HTML & CSS"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=D-h8L5hgW-w",mdxType:"BadgeLink"},"HTML and CSS Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=FqmB-Zj2-PA",mdxType:"BadgeLink"},"CSS Masterclass - Tutorial & Course for Beginners"))}u.isMDXComponent=!0},8371:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Making layouts"),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://flexboxfroggy.com/",mdxType:"BadgeLink"},"Learn and Practice Flexbox"))}u.isMDXComponent=!0},9738:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Responsive Design"))}s.isMDXComponent=!0},4814:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"CSS"),(0,r.kt)("p",null,"CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2014 Learn CSS"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.freecodecamp.org/learn/responsive-web-design/",mdxType:"BadgeLink"},"freeCodeCamp \u2014 Responsive Web Design"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://learn.shayhowe.com/html-css/building-your-first-web-page/",mdxType:"BadgeLink"},"Learn to Code HTML & CSS"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=D-h8L5hgW-w",mdxType:"BadgeLink"},"HTML and CSS Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=FqmB-Zj2-PA",mdxType:"BadgeLink"},"CSS Masterclass - Tutorial & Course for Beginners"))}u.isMDXComponent=!0},9536:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Syntax and basic constructs"))}s.isMDXComponent=!0},4964:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Learn dom manipulation"))}s.isMDXComponent=!0},7522:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Learn fetch api ajax xhr"))}s.isMDXComponent=!0},7919:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Es6 and modular javascript"))}s.isMDXComponent=!0},2132:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Concepts"))}s.isMDXComponent=!0},2009:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Javascript"))}s.isMDXComponent=!0},1343:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Basic usage of git"))}s.isMDXComponent=!0},1688:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Version control systems"))}s.isMDXComponent=!0},622:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Github"),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com"}),"GitHub")," is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://docs.github.com/en/get-started/quickstart/hello-world",mdxType:"BadgeLink"},"GitHub: Quickstart"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=w3jLJU7DT5E",mdxType:"BadgeLink"},"What is GitHub?"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=wpISo9TNjfU",mdxType:"BadgeLink"},"Git vs. GitHub: What's the difference?"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=RGOj5yH7evk",mdxType:"BadgeLink"},"Git and GitHub for Beginners"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=eulnSXkhE7I",mdxType:"BadgeLink"},"Git and GitHub - CS50 Beyond 2019"))}u.isMDXComponent=!0},9597:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gitlab"))}s.isMDXComponent=!0},1752:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bitbucket"))}s.isMDXComponent=!0},5863:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Repo hosting services"))}s.isMDXComponent=!0},3598:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Https"))}s.isMDXComponent=!0},1342:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Content security policy"))}s.isMDXComponent=!0},8215:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Cors"))}s.isMDXComponent=!0},6432:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Owasp security risks"))}s.isMDXComponent=!0},9e3:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web security knowledge"))}s.isMDXComponent=!0},7897:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Npm"))}s.isMDXComponent=!0},6741:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Yarn"))}s.isMDXComponent=!0},9897:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Package managers"))}s.isMDXComponent=!0},2002:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bem"),(0,r.kt)("p",null,"The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Article BEM 101: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://css-tricks.com/bem-101/"}),"https://css-tricks.com/bem-101/")),(0,r.kt)("li",{parentName:"ul"},"BEM Official Website: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/"}),"https://en.bem.info/")),(0,r.kt)("li",{parentName:"ul"},"BEM Documentation: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/methodology/quick-start/"}),"https://en.bem.info/methodology/quick-start/")," "),(0,r.kt)("li",{parentName:"ul"},"BEM Tutorials: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/tutorials/"}),"https://en.bem.info/tutorials/"))))}s.isMDXComponent=!0},9085:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Oocss"))}s.isMDXComponent=!0},6235:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Smacss"))}s.isMDXComponent=!0},814:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css architecture"))}s.isMDXComponent=!0},1516:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Sass"))}s.isMDXComponent=!0},2238:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Postcss"))}s.isMDXComponent=!0},3765:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Less"))}s.isMDXComponent=!0},8241:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css preprocessors"))}s.isMDXComponent=!0},9581:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Npm scripts"))}s.isMDXComponent=!0},3619:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Task runners"))}s.isMDXComponent=!0},128:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Webpack"))}s.isMDXComponent=!0},5147:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Esbuild"))}s.isMDXComponent=!0},2442:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Rollup"))}s.isMDXComponent=!0},4639:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Parcel"))}s.isMDXComponent=!0},5524:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vite"))}s.isMDXComponent=!0},401:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Module bundlers"))}s.isMDXComponent=!0},5050:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Prettier"))}s.isMDXComponent=!0},5744:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Eslint"))}s.isMDXComponent=!0},8572:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Standardjs"))}s.isMDXComponent=!0},3247:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Linters formatters"))}s.isMDXComponent=!0},749:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Build tools"))}s.isMDXComponent=!0},8583:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Redux"))}s.isMDXComponent=!0},6445:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Mobx"))}s.isMDXComponent=!0},5309:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Recoil"))}s.isMDXComponent=!0},355:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React"),(0,r.kt)("p",null,"React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Framework Website",href:"https://reactjs.org/",mdxType:"BadgeLink"},"React Website"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Read",href:"https://reactjs.org/tutorial/tutorial.html",mdxType:"BadgeLink"},"Official Getting Started"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://egghead.io/courses/the-beginner-s-guide-to-react",mdxType:"BadgeLink"},"The Beginner's Guide to React"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=nTeuhbP7wdE",mdxType:"BadgeLink"},"React JS Course for Beginners"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=i793Qm6kv3U",mdxType:"BadgeLink"},"Understanding React's UI Rendering Process"))}u.isMDXComponent=!0},5771:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Rxjs"))}s.isMDXComponent=!0},8532:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Ngrx"))}s.isMDXComponent=!0},9092:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Angular"))}s.isMDXComponent=!0},4642:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vuex"))}s.isMDXComponent=!0},7917:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vue js"))}s.isMDXComponent=!0},8111:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Pick a framework"))}s.isMDXComponent=!0},7038:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Styled components"))}s.isMDXComponent=!0},6533:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css modules"))}s.isMDXComponent=!0},509:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Styled jsx"))}s.isMDXComponent=!0},2719:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Emotion"))}s.isMDXComponent=!0},7576:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Modern css"))}s.isMDXComponent=!0},5281:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Html templates"))}s.isMDXComponent=!0},9013:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Custom elements"))}s.isMDXComponent=!0},8696:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Shadow dom"))}s.isMDXComponent=!0},5689:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web components"))}s.isMDXComponent=!0},3060:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bootstrap"))}s.isMDXComponent=!0},4743:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bulma"))}s.isMDXComponent=!0},590:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css first"))}s.isMDXComponent=!0},5806:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Tailwind CSS"),(0,r.kt)("p",null,"CSS Framework that provides atomic CSS classes to help you style components e.g. ",(0,r.kt)("inlineCode",{parentName:"p"},"flex"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"pt-4"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"text-center")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"rotate-90")," that can be composed to build any design, directly in your markup."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Framework Website",href:"https://tailwindcss.com",mdxType:"BadgeLink"},"Tailwind Website"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"YouTube Channel",href:"https://www.youtube.com/c/TailwindLabs/videos",mdxType:"BadgeLink"},"Official Screencasts"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Watch",href:"https://www.youtube.com/watch?v=hdGsFpZ0J2E",mdxType:"BadgeLink"},"Should You Use Tailwind CSS?"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction",mdxType:"BadgeLink"},"Tailwind CSS: An Introduction"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=UBOj6rqRUME",mdxType:"BadgeLink"},"Tailwind CSS Crash Course"))}u.isMDXComponent=!0},2289:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Chakra ui"))}s.isMDXComponent=!0},9413:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Material ui"))}s.isMDXComponent=!0},2551:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Radix ui"))}s.isMDXComponent=!0},6121:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Js first"))}s.isMDXComponent=!0},4093:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css frameworks"))}s.isMDXComponent=!0},3303:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Jest"))}s.isMDXComponent=!0},6832:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React testing library"))}s.isMDXComponent=!0},5505:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Cypress"))}s.isMDXComponent=!0},4459:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Enzyme"))}s.isMDXComponent=!0},7814:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Other options"))}s.isMDXComponent=!0},2632:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Testing your apps"))}s.isMDXComponent=!0},846:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Typescript"))}s.isMDXComponent=!0},4835:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Flow"))}s.isMDXComponent=!0},8285:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Type checkers"))}s.isMDXComponent=!0},2552:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Apis"))}s.isMDXComponent=!0},8030:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Performance"))}s.isMDXComponent=!0},9759:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Progressive web apps"))}s.isMDXComponent=!0},6859:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Next js"))}s.isMDXComponent=!0},1860:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"After js"))}s.isMDXComponent=!0},2522:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React js"))}s.isMDXComponent=!0},1496:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Universal"))}s.isMDXComponent=!0},3669:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Angular"))}s.isMDXComponent=!0},1071:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nuxt js"))}s.isMDXComponent=!0},2590:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vue js"))}s.isMDXComponent=!0},583:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Server side rendering"))}s.isMDXComponent=!0},1285:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Apollo"))}s.isMDXComponent=!0},9135:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Relay modern"))}s.isMDXComponent=!0},7175:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Graphql"))}s.isMDXComponent=!0},7505:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Next js"))}s.isMDXComponent=!0},3683:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gatsbyjs"))}s.isMDXComponent=!0},4978:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nuxt js"))}s.isMDXComponent=!0},4264:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vuepress"))}s.isMDXComponent=!0},6975:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Jekyll"))}s.isMDXComponent=!0},1280:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Hugo"))}s.isMDXComponent=!0},648:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gridsome"))}s.isMDXComponent=!0},3221:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Eleventy"))}s.isMDXComponent=!0},6798:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Static site generators"))}s.isMDXComponent=!0},368:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React native"))}s.isMDXComponent=!0},5412:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nativescript"))}s.isMDXComponent=!0},9911:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Flutter"),(0,r.kt)("p",null,"Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android)."),(0,r.kt)("p",null,"Flutter consists of two important parts:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android)."),(0,r.kt)("li",{parentName:"ul"},"A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.\nTo develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.")),(0,r.kt)("p",null,"Dart focuses on front-end development, and you can use it to create mobile and web applications."),(0,r.kt)("p",null,"If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Official Website",href:"https://flutter.dev",mdxType:"BadgeLink"},"Flutter Website"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3adda.com/flutter-tutorial",mdxType:"BadgeLink"},"Flutter Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ",mdxType:"BadgeLink"},"Flutter Tutorial for Beginners"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3adda.com/flutter-tutorial",mdxType:"BadgeLink"},"Flutter Tutorial"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.tutorialspoint.com/dart_programming/index.htm",mdxType:"BadgeLink"},"Learn Dart Programming"))}u.isMDXComponent=!0},342:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Ionic"))}s.isMDXComponent=!0},1483:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Mobile applications"))}s.isMDXComponent=!0},3557:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Electron"))}s.isMDXComponent=!0},3759:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Carlo"))}s.isMDXComponent=!0},3752:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Proton native"))}s.isMDXComponent=!0},1027:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Desktop applications"))}s.isMDXComponent=!0},7862:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web assembly"))}s.isMDXComponent=!0},5261:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null))}s.isMDXComponent=!0},3158:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return l}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a,s=(a="BadgeLink",function(e){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},e))}),i={};function l(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},i,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{className:"alert alert-primary",style:{marginBottom:"-10px"}},"This page is incomplete and is being worked upon. Please check back later or ",(0,r.kt)("a",{href:"/signup"},"subscribe")," / ",(0,r.kt)("a",{href:"https://twitter.com/kamranahmedse"},"follow me on twitter")," to get notified. Also, feel free to contribute by suggesting the resources in ",(0,r.kt)("a",{href:"https://github.com/kamranahmedse/developer-roadmap"},"the issues"),"."),(0,r.kt)("h1",null,"Become a Frontend Developer"),(0,r.kt)("p",null,"Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. "),(0,r.kt)("h2",null,"Internet and how it works?"),(0,r.kt)("p",null,"Get the basic understanding of internet, browsers, networks and other relevant knowledge. "),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"What is Internet?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the internet works in 5 minutes")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://kamranahmed.info/blog/2016/08/13/http-in-depth/",mdxType:"BadgeLink"},"What is HTTP and how it evolved?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://blog.cloudflare.com/http3-the-past-present-and-future/",mdxType:"BadgeLink"},"HTTP/3: the past, the present, and the future")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://kinsta.com/blog/http3/",mdxType:"BadgeLink"},"What Is HTTP/3 \u2013 Lowdown on the Fast New UDP-Based Protocol")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/",mdxType:"BadgeLink"},"How Browsers Work: Behind the scenes of modern web browsers")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Rck3BALhI5c",mdxType:"BadgeLink"},"DNS as Fast As Possible")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://howdns.works/",mdxType:"BadgeLink"},"How DNS works?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"/guides/dns-in-one-picture",mdxType:"BadgeLink"},"DNS in One Picture"))),(0,r.kt)("h2",null,"Learn HTML"),(0,r.kt)("p",null,"HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. "),(0,r.kt)("p",null,"Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=UB1O30fR-EE",mdxType:"BadgeLink"},"HTML Crash Course For Absolute Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/html/default.asp",mdxType:"BadgeLink"},"W3Schools \u2013 HTML Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://hacks.mozilla.org/2016/08/a-few-html-tips/",mdxType:"BadgeLink"},"A few HTML tips")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z",mdxType:"BadgeLink"},"Six tips to set up a better HTML document")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/html/html5_semantic_elements.asp",mdxType:"BadgeLink"},"HTML Semantic Elements")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element",mdxType:"BadgeLink"},"HTML elements reference"))),(0,r.kt)("h2",null,"Style your pages with CSS"),(0,r.kt)("p",null,"With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2013 CSS Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Wm6CUkswsNw",mdxType:"BadgeLink"},"Build An HTML5 Website With A Responsive Layout")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/JJSoEo8JSnc?t=46",mdxType:"BadgeLink"},"Flexbox CSS In 20 Minutes"))),(0,r.kt)("h2",null,"Basics of JavaScript"),(0,r.kt)("p",null,"JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/js/",mdxType:"BadgeLink"},"W3Schools \u2013 JavaScript Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/hdI2bqOjy3c?t=2",mdxType:"BadgeLink"},"JavaScript Crash Course for Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/P7t13SGytRk?t=22",mdxType:"BadgeLink"},"Build a Netflix Landing Page Clone with HTML, CSS & JS"))),(0,r.kt)("h2",null,"Version Control Systems and Git"),(0,r.kt)("p",null,"Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code \u2013 if you\u2019ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue."),(0,r.kt)("p",null,"In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS. "),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=zbKdDsNNOhg",mdxType:"BadgeLink"},"Version Control System Introduction")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=SWYqp7iY_Tc",mdxType:"BadgeLink"},"Git & GitHub Crash Course For Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/Y9XZQO1n_7c?t=21",mdxType:"BadgeLink"},"Learn Git in 20 Minutes"))),(0,r.kt)("p",null,"Now that you know what git is go ahead and create an account on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com"}),"GitHub")," and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community."),(0,r.kt)("h2",null,"Modern JavaScript"),(0,r.kt)("p",null,'In this section you will learn how to use package managers and get started with the "modern JavaScript".'),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70",mdxType:"BadgeLink"},"Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=8Rmj5UY5mJk",mdxType:"BadgeLink"},"What is NPM and how to use it")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=jHDhaSSKmB0",mdxType:"BadgeLink"},"NPM Crash Course"))),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}l.isMDXComponent=!0},1325:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8558:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},7499:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"roadmap on the Frontend Development")," that focuses on the frontend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("img",Object.assign({parentName:"p"},{src:"/roadmaps/react.png",alt:null}))),(0,r.kt)("p",null,"Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the picture if suitable."))}s.isMDXComponent=!0},8274:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},892:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Angular ecosystem and to help guide your learning if you are confused. We have another ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"roadmap on the Frontend Development")," that focuses on the frontend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("img",Object.assign({parentName:"p"},{src:"/roadmaps/angular.png",alt:null}))),(0,r.kt)("p",null,"Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the picture if suitable."))}s.isMDXComponent=!0},2710:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8814:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the roadmap if suitable."),(0,r.kt)("p",null,"There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://flutter.dev/"}),"flutter"),", ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://reactnative.dev/"}),"react-native"),", or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://www.nativescript.org/"}),"NativeScript")," are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://reactnative.dev"}),"react-native")," and I would recommend you to checkout the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"Frontend Developer Roadmap"),"."),(0,r.kt)("h2",null,"Complete Roadmap"),(0,r.kt)("p",null,"Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/roadmap.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/roadmap.svg",alt:null})))),(0,r.kt)("h2",null,"Broken Down Version"),(0,r.kt)("p",null,"Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above."),(0,r.kt)("h2",null,"Pick a Language"),(0,r.kt)("p",null,"For the languages, you can develop android apps either by using Kotlin or Java."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/pick-language.svg"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/pick-language.svg",alt:null})))),(0,r.kt)("p",null,"Although, you can use both ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Kotlin_(programming_language)"}),"Kotlin")," and ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Java_(programming_language)"}),"Java")," to develop native android apps, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html"}),"Google announced in 2019")," to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice."),(0,r.kt)("h2",null,"The Fundamentals"),(0,r.kt)("p",null,"Install the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://developer.android.com/studio"}),"Android Studio")," and learn the basics of Kotlin to get started. "),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/the-fundamentals.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/the-fundamentals.png",alt:null})))),(0,r.kt)("p",null,"We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin"}),"Learn the basics of Kotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/reference/basic-syntax.html"}),"Kotlin Docs")," and ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/tutorials/"}),"Official Kotlin Tutorials")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.studytonight.com/data-structures/introduction-to-data-structures"}),"Data Structures and Algorithms"),". Also ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.tutorialspoint.com/data_structures_algorithms/index.htm"}),"check this"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/reference/collections-overview.html"}),"Kotlin DataStructures")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/bmaslakov/kotlin-algorithm-club"}),"Algorithms and DataStructures in Kotlin"))),(0,r.kt)("h2",null,"Version Control Systems"),(0,r.kt)("p",null,"Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://git-scm.com/"}),"Git")," is the most common one these days."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/git-github.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/git-github.png",alt:null})))),(0,r.kt)("p",null,"Here are some of the resources to get you started. Feel free to google and find something else that you find easier."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.udacity.com/course/version-control-with-git--ud123"}),"Udacity \u2014 Version Control with Git")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://guides.github.com/activities/hello-world/"}),"GitHub Hello World"))),(0,r.kt)("h2",null,"Building an Application"),(0,r.kt)("p",null,"Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. "),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/build-an-application.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/build-an-application.png",alt:null})))),(0,r.kt)("p",null,"To learn more about the items listed in the image above, here are the links to the relevant docs"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/activities/intro-activities"}),"Using Activities and Activity Life Cycles")),(0,r.kt)("li",{parentName:"ul"},"Building Flexible Interfaces using ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/fragments"}),"Fragments")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/studio/debug"}),"Debugging using Android Studio Debugger")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/work/managed-configurations"}),"Handling App Configurations")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/intents-filters"}),"Using Intents and Intent Filters")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://guides.codepath.com/android/Using-Context"}),"Understand Context")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/training/multiple-threads"}),"Learn about Multithreading")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com/6901838-data-privacy-for-android"}),"Data Privacy")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android"}),"Securing Network Data")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/training/dependency-injection"}),"Dependency Injection")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/topics/providers/content-providers"}),"Content Providers")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/bumptech/glide"}),"Glide"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://square.github.io/retrofit/"}),"Retrofit"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://firebase.google.com/docs/crashlytics/get-started"}),"Crashlytics"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/google/gson"}),"GSON")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/room"}),"Room"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/navigation/navigation-getting-started"}),"Navigation"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/workmanager"}),"Work Manager"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/livedata"}),"LiveData"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/data-binding"}),"Data Binding")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/ReactiveX/RxJava"}),"RxJava"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/ReactiveX/RxKotlin"}),"RxKotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/performance/memory-overview"}),"Memory Management Overview")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814"}),"Diving deeper into context-oriented programming in Kotlin")," ")),(0,r.kt)("p",null,"I would highly recommend watching ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012"}),"this free course")," from google on Developing Android Apps with Kotlin. Also, here are some of the resources to learn more about the topics listed above."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012"}),"Developing Android Apps with Kotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide"}),"Android Developer Guides")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com"}),"Raywenderlich"))),(0,r.kt)("h2",null,"Wrap Up"),(0,r.kt)("p",null,"That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!"),(0,r.kt)("p",null,"For any suggestions, improvements and feedback, feel free to ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"submit an issue")," or reach out to me on twitter ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse"),"."),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}s.isMDXComponent=!0},2151:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8751:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Python ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/python.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/python.png",alt:null})))))}s.isMDXComponent=!0},1894:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},3331:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Go ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/golang.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/golang.png",alt:null})))))}s.isMDXComponent=!0},3923:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},4464:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Java ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/java.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/java.png",alt:null})))))}s.isMDXComponent=!0},4764:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},4592:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the DBA landscape and to help guide your learning if you are confused. The roadmap is highly opinionated \u2014 neither, knowing everything listed in the roadmap, nor the order of items given in the roadmap is required to be followed in order to be a DBA."),(0,r.kt)("h2",null,"Learn basic RDBMS terms and concepts"),(0,r.kt)("p",null,"Get basic understanding of Postgres key terms and basic RDBMS concepts."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Object model"),": data types, columns, rows, tables, schemas, databases, queries."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Relational model"),": domains, attributes, tuples, relations, constraints, NULL."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Databases high-level concepts"),": ACID, MVCC, transactions, write-ahead log, query processing."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/13/glossary.html"}),"Postgres Glossary")," "),(0,r.kt)("li",{parentName:"ul"},"SQL and Relational Theory - Christopher J. Date, 2009"),(0,r.kt)("li",{parentName:"ul"},"Database Design and Relational Theory - Christopher J. Date, 2012")))),(0,r.kt)("h2",null,"Learn how to install and run PostgreSQL"),(0,r.kt)("p",null,"Get practical skills of how to set up and run Postgres to get a working environment for further learning."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Using package managers (APT, YUM, etc.)"),(0,r.kt)("li",{parentName:"ul"},"Using ",(0,r.kt)("inlineCode",{parentName:"li"},"docker"),"."),(0,r.kt)("li",{parentName:"ul"},"Managing Postgres service using ",(0,r.kt)("inlineCode",{parentName:"li"},"systemd")," (start, stop, restart, reload)."),(0,r.kt)("li",{parentName:"ul"},"Managing Postgres service using ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_ctl"),", or OS-specific tools (like ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_ctlcluster"),")."),(0,r.kt)("li",{parentName:"ul"},"Connect to Postgres using ",(0,r.kt)("inlineCode",{parentName:"li"},"psql"),"."),(0,r.kt)("li",{parentName:"ul"},"Deploy database service in cloud environment (AWS, GCE, Azure, Heroku, DigitalOcean, etc...)."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/download/"}),"Official download and install instructions")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://hub.docker.com/_/postgres"}),"Official Docker images")," ")))),(0,r.kt)("h2",null,"Learn SQL concepts"),(0,r.kt)("p",null,"Get practical skills of how to create and manipulate database objects and how to execute queries using ",(0,r.kt)("inlineCode",{parentName:"p"},"psql")," client."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Understand basic data types."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"DML queries"),": querying data, modifying data, filtering data, joining tables.",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced topics"),": transactions, CTE, subqueries, lateral join, grouping, set operations."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"DDL queries"),": managing tables and schemas (create, alter, drop)."),(0,r.kt)("li",{parentName:"ul"},"Import and export data using ",(0,r.kt)("inlineCode",{parentName:"li"},"COPY"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.db-fiddle.com/"}),"DB Fiddle")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresqltutorial.com/"}),"PostgreSQL Tutorial")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/tutorial-sql.html"}),"PostgreSQL SQL Getting Started")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql.html"}),"The SQL Language"))))),(0,r.kt)("h2",null,"Learn how to configure Postgres"),(0,r.kt)("p",null,"Get understanding of the main aspects of how Postgres could be configured. Deep understanding of Postgres internals is not yet necessary here."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"postgresql.conf:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Resources usage"),(0,r.kt)("li",{parentName:"ul"},"Write-ahead Log"),(0,r.kt)("li",{parentName:"ul"},"Checkpoints and Background Writer"),(0,r.kt)("li",{parentName:"ul"},"Cost-based vacuum and auto-vacuum"),(0,r.kt)("li",{parentName:"ul"},"Replication"),(0,r.kt)("li",{parentName:"ul"},"Query planner"),(0,r.kt)("li",{parentName:"ul"},"Reporting, logging and statistics"),(0,r.kt)("li",{parentName:"ul"},"Adding extra extensions"),(0,r.kt)("li",{parentName:"ul"},"...keep exploring other configuration options"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://postgresqlco.nf/"}),"Postgresqlco.nf")," ")))),(0,r.kt)("h2",null,"Learn Postgres security concepts"),(0,r.kt)("p",null,"Get understanding about basic security concepts and common ways of how to deploy secure configurations."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Authentication models, roles, pg_hba.conf, SSL settings."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Objects privileges"),": grant/revoke, default privileges."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced topics")," - row-level security, selinux."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/client-authentication.html"}),"Client authentication")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/user-manag.html"}),"Roles and users managements"))))),(0,r.kt)("h2",null,"Develop infrastructure DBA skills"),(0,r.kt)("p",null,"Get practical skills of how to deploy, extend, maintain and support Postgres installations and 3rd-party Postgres ecosystem software."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Replication"),": streaming replication, logical replication"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Backup/recovery tools"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Built-in: ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_dump"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_dumpall"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_restore"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_basebackup")),(0,r.kt)("li",{parentName:"ul"},"3rd-party: ",(0,r.kt)("inlineCode",{parentName:"li"},"barman"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pgbackrest"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_probackup"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"WAL-G")),(0,r.kt)("li",{parentName:"ul"},"Backup validation procedures"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Upgrading procedures"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Minor and major upgrades using ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_upgrade")),(0,r.kt)("li",{parentName:"ul"},"Upgrades using logical replication"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Connection pooling"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Pgbouncer")),(0,r.kt)("li",{parentName:"ul"},"Alternatives: ",(0,r.kt)("inlineCode",{parentName:"li"},"Pgpool-II"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Odyssey"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Pgagroal")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Infrastructure monitoring"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Prometheus"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Zabbix"),", other favourite monitoring solution"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"High availability and cluster management tools"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Patroni")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Alternatives"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Repmgr"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Stolon"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_auto_failover"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"PAF")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Applications Load Balancing and Service Discovery"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Haproxy"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Keepalived"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Consul"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Etcd")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Deploy Postgres on ",(0,r.kt)("inlineCode",{parentName:"strong"},"Kubernetes")),": Simple ",(0,r.kt)("inlineCode",{parentName:"li"},"StatefulSet")," setup, ",(0,r.kt)("inlineCode",{parentName:"li"},"HELM"),", operators"),(0,r.kt)("li",{parentName:"ul"},"Resource usage and provisioning, capacity planning")),(0,r.kt)("h2",null,"Learn how to automate routines"),(0,r.kt)("p",null,"Get practical skills, learn automation tools and automate existing routine tasks."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Automation using shell scripts or any other favourite language (",(0,r.kt)("inlineCode",{parentName:"li"},"Bash"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Python"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Perl"),", etc)"),(0,r.kt)("li",{parentName:"ul"},"Configuration management: ",(0,r.kt)("inlineCode",{parentName:"li"},"Ansible"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Salt"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Chef"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Puppet"))),(0,r.kt)("h2",null,"Develop application DBA skills"),(0,r.kt)("p",null,"Learn theory and get practical skills of how applications should work with Postgres"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Migrations"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"practical patterns and antipatterns"),(0,r.kt)("li",{parentName:"ul"},"tools: ",(0,r.kt)("inlineCode",{parentName:"li"},"liquibase"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"sqitch"),", language-specific tools"))),(0,r.kt)("li",{parentName:"ul"},"Data import/export, bulk loading and processing"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Queues"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"practical patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Skytools PGQ")))),(0,r.kt)("li",{parentName:"ul"},"Data partitioning and sharding patterns."),(0,r.kt)("li",{parentName:"ul"},"Database normalization and normal forms."),(0,r.kt)("li",{parentName:"ul"},"Books:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"The Art of PostgreSQL - Dimitri Fontaine, 2020")))),(0,r.kt)("h2",null,"Learn Postgres advanced topics"),(0,r.kt)("p",null,"Here is important to continuously extend and develop existing knowledge about Postgres."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Low level internals"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Processes and memory architecture"),(0,r.kt)("li",{parentName:"ul"},"Vacuum processing"),(0,r.kt)("li",{parentName:"ul"},"Buffer management"),(0,r.kt)("li",{parentName:"ul"},"Lock management"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/storage.html"}),"Physical storage and file layout")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/catalogs.html"}),"System catalog")," "))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Fine-grained tuning"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Per-user, per-database settings"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-STORAGE-PARAMETERS"}),"Storage parameters")," "),(0,r.kt)("li",{parentName:"ul"},"Workload-dependant tuning: OLTP, OLAP, HTAP"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced SQL topics"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"PL/pgSQL, procedures and functions, triggers"),(0,r.kt)("li",{parentName:"ul"},"Aggregate and window functions"),(0,r.kt)("li",{parentName:"ul"},"Recursive CTE"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.interdb.jp/pg/index.html"}),"The Internals of PostgreSQL")," for database administrators and system developers"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/plpgsql.html"}),"PL/pgSQL Guide"))))),(0,r.kt)("h2",null,"Learn Postgres troubleshooting techniques"),(0,r.kt)("p",null,"Get basic understanding about troubleshooting tools and get practical skills of how to detect and resolve problems."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Operating system tools"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"top")," (",(0,r.kt)("inlineCode",{parentName:"li"},"htop"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"atop"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"sysstat")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"iotop")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres system views"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pg_stat_activity")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pg_stat_statements")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres tools"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pgcenter")," - ",(0,r.kt)("em",{parentName:"li"},"personal recommendation")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Query analyzing"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql-explain.html"}),"EXPLAIN")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://explain.depesz.com/"}),"Depesz")," online EXPLAIN visualization tool"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://tatiyants.com/pev/#/plans"}),"PEV")," online EXPLAIN visualization tool"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://explain.tensor.ru/"}),"Tensor")," online EXPLAIN visualization tool, RU language only"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Log analyzing"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pgBadger")),(0,r.kt)("li",{parentName:"ul"},"Ad-hoc analyzing using ",(0,r.kt)("inlineCode",{parentName:"li"},"grep"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"awk"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"sed"),", etc."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"External tracing/profiling tools"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"gdb"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"strace"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"perf-tools"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"ebpf"),", core dumps"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Troubleshooting methods"),": USE, RED, Golden signals"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.brendangregg.com/linuxperf.html"}),"Linux Performance")," by Brendan Gregg"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.brendangregg.com/usemethod.html"}),"USE Method"))))),(0,r.kt)("h2",null,"Learn SQL optimization technics"),(0,r.kt)("p",null,"Get understanding and practical skills of how to optimize SQL queries."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Indexes, and their use cases"),": B-tree, Hash, GiST, SP-GiST, GIN, BRIN"),(0,r.kt)("li",{parentName:"ul"},"SQL queries patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},"SQL schema design patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://use-the-index-luke.com/"}),"Use the Index, Luke")," - a Guide to Database Performance for Developers"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Books"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"SQL Antipatterns: Avoiding the Pitfalls of Database Programming - Bill Karwin, 2010 ")))),(0,r.kt)("h2",null,"Develop architect skills"),(0,r.kt)("p",null,"Get deeper understanding of Postgres use cases and where Postgres is suitable and where is not."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres forks and extensions"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Greenplum"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Timescaledb"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Citus"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Postgres-XL"),", etc."),(0,r.kt)("li",{parentName:"ul"},"RDBMS in general, benefits and limitations"),(0,r.kt)("li",{parentName:"ul"},"Differences between Postgres and other RDBMS and NoSQL databases")),(0,r.kt)("h2",null,"Develop Postgres hacker skills"),(0,r.kt)("p",null,"Get involved to Postgres community and contribute to Postgres; be a useful member of Postgres, and the open source community; use personal experience to help other people."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Daily reading and answering in ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/list/"}),"mailing lists"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"pgsql-general"),(0,r.kt)("li",{parentName:"ul"},"pgsql-admin"),(0,r.kt)("li",{parentName:"ul"},"pgsql-performance"),(0,r.kt)("li",{parentName:"ul"},"pgsql-hackers"),(0,r.kt)("li",{parentName:"ul"},"pgsql-bugs"))),(0,r.kt)("li",{parentName:"ul"},"Reviewing patches"),(0,r.kt)("li",{parentName:"ul"},"Writing patches, attending in ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://commitfest.postgresql.org/"}),"Commitfests"))),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}s.isMDXComponent=!0},165:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},2014:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}s.isMDXComponent=!0},3737:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},611:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}s.isMDXComponent=!0},4541:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8712:function(e){"use strict";e.exports=JSON.parse('[{"username":"kamranahmedse","name":"Kamran Ahmed","twitter":"kamranahmedse","picture":"/authors/kamranahmedse.jpeg","bio":"Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones."},{"username":"jesse","name":"Jesse Li","twitter":"__jesse_li","picture":"/authors/jesse.png","bio":"Software engineer."},{"username":"dmytrobol","name":"Dmytro Bolkachov","twitter":"dmytrobol","picture":"/authors/dmytrobol.png","bio":"JavaScript Lad, Movie buff and coder interested in everything web related"},{"username":"spekulatius","name":"Peter Thaleikis","twitter":"spekulatius1984","picture":"/authors/spekulatius.jpg","bio":"Developer building side-projects for fun, lover of the web and open source"},{"username":"ebrahimbharmal007","name":"Ebrahim Bharmal","twitter":"BharmalEbrahim","picture":"/authors/ebrahimbharmal007.png","bio":"Love building projects using tools completely new to me. Python forever. Senior at University of Texas at Arlington (2021)"},{"username":"lesovsky","name":"Alexey Lesovsky","bio":"Linux system administrator and PostgreSQL DBA at DataEgret.","picture":"/authors/lesovsky.jpeg"}]')},9552:function(e){"use strict";e.exports=JSON.parse('[{"id":"avoid-render-blocking-javascript-with-async-defer","title":"Async and Defer Script Loading","description":"Learn how to avoid render blocking JavaScript using async and defer scripts.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-09-10T19:59:14.191Z","createdAt":"2021-09-10T19:59:14.191Z"},{"id":"what-are-web-vitals","title":"What are Web Vitals?","description":"Learn what are the core web vitals and how to measure them.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-09-05T19:59:14.191Z","createdAt":"2021-09-05T19:59:14.191Z"},{"id":"what-is-sli-slo-sla","title":"SLIs, SLOs and SLAs","description":"Learn what are different indicators for performance identification of any service.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-08-31T19:59:14.191Z","createdAt":"2021-08-31T19:59:14.191Z"},{"id":"ci-cd","title":"What is CI and CD?","description":"Learn the basics of CI/CD and how to implement that with GitHub Actions.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-07-09T19:59:14.191Z","createdAt":"2021-07-09T19:59:14.191Z"},{"id":"sso","title":"SSO \u2014 Single Sign On","description":"Learn the basics of SAML and understand how does Single Sign On work.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-07-01T19:59:14.191Z","createdAt":"2021-07-01T19:59:14.191Z"},{"id":"oauth","title":"OAuth \u2014 Open Authorization","description":"Learn and understand what is OAuth and how it works","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-28T19:59:14.191Z","createdAt":"2021-06-28T19:59:14.191Z"},{"id":"jwt-authentication","title":"JWT Authentication","description":"Understand what is JWT authentication and how is it implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-20T19:59:14.191Z","createdAt":"2021-06-20T19:59:14.191Z"},{"id":"token-authentication","title":"Token Based Authentication","description":"Understand what is token based authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-02T20:59:14.191Z","createdAt":"2021-06-02T20:59:14.191Z"},{"id":"session-authentication","title":"Session Based Authentication","description":"Understand what is session based authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-26T20:59:14.191Z","createdAt":"2021-05-26T20:59:14.191Z"},{"id":"basic-authentication","title":"Basic Authentication","description":"Understand what is basic authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-19T20:59:14.191Z","createdAt":"2021-05-19T20:59:14.191Z"},{"id":"character-encodings","title":"Character Encodings","description":"Covers the basics of character encodings and explains ASCII vs Unicode","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-14T20:59:14.191Z","createdAt":"2021-05-14T20:59:14.191Z"},{"id":"unfamiliar-codebase","title":"Unfamiliar Codebase","description":"Tips on getting getting familiar with an unfamiliar codebase","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-04T20:59:14.191Z","createdAt":"2021-05-04T20:59:14.191Z"},{"id":"why-build-it-and-they-will-come-wont-work-anymore","title":"Build it and they will come?","description":"Why \u201cbuild it and they will come\u201d alone won\u2019t work anymore","isPro":false,"authorUsername":"spekulatius","updatedAt":"2021-05-04T12:59:14.191Z","createdAt":"2021-05-04T12:59:14.191Z"},{"id":"dhcp-in-one-picture","title":"DHCP in One Picture","description":"Here is what happens when a new device joins the network.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-28T15:48:21.191Z","createdAt":"2021-04-28T15:48:21.191Z"},{"id":"ssl-tls-https-ssh","title":"SSL vs TLS vs SSH","description":"Quick tidbit on the differences between SSL, TLS, HTTPS and SSH","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-22T15:48:21.191Z","createdAt":"2021-04-22T15:48:21.191Z"},{"id":"asymptotic-notation","title":"Asymptotic Notation","description":"Learn the basics of measuring the time and space complexity of algorithms","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-03T15:48:21.191Z","createdAt":"2021-04-03T15:48:21.191Z"},{"id":"big-o-notation","title":"Big-O Notation","description":"Easy to understand explanation of Big-O notation without any fancy terms","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-03-15T15:48:21.191Z","createdAt":"2021-03-15T15:48:21.191Z"},{"id":"random-numbers","title":"Random Numbers: Are they?","description":"Learn how they are generated and why they may not be truly random.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-03-14T15:48:21.191Z","createdAt":"2021-03-14T15:48:21.191Z"},{"id":"scaling-databases","title":"Scaling Databases","description":"Learn the ups and downs of different database scaling strategies","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-02-18T15:48:21.191Z","createdAt":"2021-02-18T15:48:21.191Z"},{"id":"what-is-internet","title":"How does the internet work?","description":"Learn the basics of internet and everything involved with this short video series","isPro":false,"authorUsername":"dmytrobol","updatedAt":"2021-02-29T15:48:21.191Z","createdAt":"2021-02-29T15:48:21.191Z"},{"id":"torrent-client","title":"Building a BitTorrent Client","description":"Learn everything you need to know about BitTorrent by writing a client in Go","isPro":false,"authorUsername":"jesse","updatedAt":"2021-01-17T15:48:21.191Z","createdAt":"2021-01-17T15:48:21.191Z","canonical":"https://blog.jse.li/posts/torrent/"},{"id":"levels-of-seniority","title":"Levels of Seniority","description":"How to Step Up as a Junior, Mid Level or a Senior Developer?","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2020-12-03T12:13:00.860Z","createdAt":"2020-12-03T12:13:00.860Z"},{"id":"design-patterns-for-humans","title":"Design Patterns for Humans","description":"A language agnostic, ultra-simplified explanation to design patterns","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2019-10-09T12:00:00.860Z","createdAt":"2019-01-23T17:00:00.860Z"},{"id":"journey-to-http2","title":"Journey to HTTP/2","description":"The evolution of HTTP. How it all started and where we stand today","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2018-12-04T12:00:00.860Z","updatedAt":"2018-12-04T12:00:00.860Z","isDraft":true},{"id":"dns-in-one-picture","title":"DNS in One Picture","description":"Quick illustrative guide on how a website is found on the internet.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2018-12-04T12:00:00.860Z","createdAt":"2018-12-04T17:00:00.860Z"},{"id":"http-caching","title":"HTTP Caching","description":"Everything you need to know about web caching","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2018-11-29T17:00:00.860Z","updatedAt":"2018-11-29T17:00:00.860Z"},{"id":"history-of-javascript","title":"Brief History of JavaScript","description":"How JavaScript was introduced and evolved over the years","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2017-10-28T17:00:00.860Z","updatedAt":"2017-10-28T17:00:00.860Z"},{"id":"proxy-servers","title":"Proxy Servers","description":"How do proxy servers work and what are forward and reverse proxies?","isPro":false,"authorUsername":"ebrahimbharmal007","createdAt":"2017-10-24T17:00:00.860Z","updatedAt":"2017-10-24T17:00:00.860Z"}]')},1662:function(e){"use strict";e.exports=JSON.parse('[{"seo":{"title":"Learn to become a modern frontend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a frontend developer","frontend developer","frontend engineer","frontend skills","frontend development","javascript developer","frontend development skills","frontend development skills test","frontend roadmap","frontend engineer roadmap","frontend developer roadmap","become a frontend developer","frontend developer career path","javascript developer","modern javascript developer","node developer","skills for frontend development","learn frontend development","what is frontend development","frontend developer quiz","frontend developer interview questions"]},"title":"Frontend Developer","description":"Step by step guide to becoming a modern frontend developer in 2021","featuredTitle":"Frontend","featuredDescription":"Step by step guide to becoming a frontend developer in 2021","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"featured":true,"imageUrl":"/roadmaps/frontend.png","jsonUrl":"/project/frontend.json","resourcesPath":"/roadmaps/100-frontend/resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/frontend-roadmap","contentPathsFilePath":"/roadmaps/100-frontend/content-paths.json","id":"frontend","metaPath":"/roadmaps/100-frontend/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a modern backend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a backend developer","backend roadmap","backend developer","backend engineer","backend skills","backend development","javascript developer","backend development skills","backend development skills test","backend engineer roadmap","backend developer roadmap","become a backend developer","backend developer career path","javascript developer","modern javascript developer","node developer","skills for backend development","learn backend development","what is backend development","backend developer quiz","backend developer interview questions"]},"title":"Backend Developer","description":"Step by step guide to becoming a modern backend developer in 2021","featuredTitle":"Backend","featuredDescription":"Step by step guide to becoming a backend developer in 2021","featured":true,"imageUrl":"/roadmaps/backend.png","jsonUrl":"/project/frontend.json","resourcesPath":"/roadmaps/101-backend/resources.md","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/backend-roadmap","id":"backend","metaPath":"/roadmaps/101-backend/meta.json","isUpcoming":false},{"seo":{"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a devops enginer","devops roadmap","sre roadmap","site reliability engineer roadmap","operations roles","become devops","devops skills","modern devops skills","devops skills test","skills for devops","learn devops","what is devops","what is sre","devops quiz","devops interview questions"]},"title":"DevOps Roadmap","description":"Step by step guide for DevOps, SRE or any other Operations Role in 2021","featuredTitle":"DevOps","featuredDescription":"Step by step guide for DevOps or operations role in 2021","featured":true,"imageUrl":"/roadmaps/devops.png","jsonUrl":"/project/devops.json","resourcesPath":"/roadmaps/102-devops/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/devops-roadmap","id":"devops","metaPath":"/roadmaps/102-devops/meta.json","isUpcoming":false},{"seo":{"title":"React Developer Roadmap: Learn to become a React developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a react developer","react developer roadmap","react roadmap","become react developer","react developer skills","react skills test","skills for react development","learn react development","what is react","react quiz","react interview questions"]},"title":"React Developer","description":"Everything that is there to learn about React and the ecosystem in 2021.","featuredTitle":"React","featuredDescription":"Step by step guide to become a React Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"landingPath":"/roadmaps/103-react/landscape.md","resourcesPath":"/roadmaps/103-react/resources.md","jsonUrl":"/project/react.json","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/react-roadmap","id":"react","metaPath":"/roadmaps/103-react/meta.json","isUpcoming":false},{"seo":{"title":"Angular Developer Roadmap: Learn to become a Angular developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a angular developer","angular developer roadmap","angular roadmap","become angular developer","angular developer skills","angular skills test","skills for angular development","learn angular development","what is angular","angular quiz","angular interview questions"]},"title":"Angular Developer","description":"Everything that is there to learn about Angular and the ecosystem in 2021.","featuredTitle":"Angular","featuredDescription":"Step by step guide to become a Angular Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"jsonUrl":"/project/angular.json","landingPath":"/roadmaps/104-angular/landscape.md","resourcesPath":"/roadmaps/104-angular/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/angular-roadmap","id":"angular","metaPath":"/roadmaps/104-angular/meta.json","isUpcoming":false},{"seo":{"title":"Android Developer Roadmap: Learn to become an Android developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an android developer","android developer roadmap","android roadmap","become android developer","android developer skills","android skills test","skills for android development","learn android development","what is android","android quiz","android interview questions"]},"title":"Android Developer","description":"Step by step guide to becoming an Android developer in 2021","featuredTitle":"Android","featuredDescription":"Step by step guide to becoming an Android Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/android.json","landingPath":"/roadmaps/105-android/landscape.md","resourcesPath":"/roadmaps/105-android/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"android","metaPath":"/roadmaps/105-android/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a modern Python developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an python developer","python developer roadmap","python roadmap","become python developer","python developer skills","python skills test","skills for python development","learn python development","what is python","python quiz","python interview questions"]},"title":"Python Developer","description":"Step by step guide to becoming a Python developer in 2021","featuredTitle":"Python","featuredDescription":"Step by step guide to becoming a Python Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/python.json","resourcesPath":"/roadmaps/106-python/resources.md","landingPath":"/roadmaps/106-python/landscape.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/python-roadmap","versions":["latest"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"python","metaPath":"/roadmaps/106-python/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a Go developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a golang developer","guide to becoming a go developer","golang developer","go developer","guide to golang","guide to go","golang roadmap","go roadmap","golang skills","go skills","golang skills test","go skills test","skills for golang","skills for go","cloud development","what is golang","what is go","golang quiz","go quiz","golang interview questions","go interview questions"]},"title":"Go Developer","description":"Step by step guide to becoming a Go developer in 2021","featuredTitle":"Go","featuredDescription":"Step by step guide to becoming a Go developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/golang.json","landingPath":"/roadmaps/107-golang/landscape.md","resourcesPath":"/roadmaps/107-golang/resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/go-roadmap","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"golang","metaPath":"/roadmaps/107-golang/meta.json"},{"seo":{"title":"Learn to become a modern Java developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a java developer","java developer","java engineer","java skills","guide to java","java roadmap","java skills","java skills test","skills for java","cloud development","what is java","java quiz","java interview questions","java engineer roadmap","java developer roadmap","become a java developer","java developer career path","java developer","modern java developer"]},"title":"Java Developer","description":"Step by step guide to becoming a Java developer in 2021","featuredTitle":"Java","featuredDescription":"Step by step guide to becoming a Java Developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/java.json","landingPath":"/roadmaps/108-java/landscape.md","resourcesPath":"/roadmaps/108-java/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/java-roadmap","id":"java","metaPath":"/roadmaps/108-java/meta.json"},{"seo":{"title":"DBA Roadmap: Learn to become a database administrator with PostgreSQL","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a database administrator","guide to becoming a DBA","dba roadmap","db administrator roadmap","database administrator roadmap","postgresql roadmap","dba skills","db administrator skills","become dba","postgresql skills","modern dba skills","dba skills test","skills for dba","skills for database administrator","learn dba","what is dba","database administrator quiz","dba interview questions"]},"title":"PostgreSQL DBA","description":"Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021","featuredTitle":"DBA","featuredDescription":"Step by step guide to become a PostgreSQL DBA in 2021","landingPath":"/roadmaps/109-postgresql-dba/landscape.md","resourcesPath":"/roadmaps/109-postgresql-dba/resources.md","author":{"name":"Alexey Lesovsky","url":"https://github.com/lesovsky"},"isCommunity":false,"isTextHeavy":true,"featured":true,"detailed":false,"versions":[],"id":"postgresql-dba","metaPath":"/roadmaps/109-postgresql-dba/meta.json","isUpcoming":false},{"seo":{"title":"AWS Roadmap: Learn to use AWS","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to aws","aws roadmap","aws skills","aws skills test","skills for aws","cloud development","what is aws","aws quiz","aws interview questions"]},"title":"AWS","description":"Everything that is there to learn about AWS and the ecosystem in 2021.","featuredTitle":"AWS","featuredDescription":"Step by step guide to learn AWS in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":true,"featured":true,"landingPath":"/roadmaps/110-aws/landscape.md","resourcesPath":"/roadmaps/110-aws/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"aws","metaPath":"/roadmaps/110-aws/meta.json"},{"seo":{"title":"QA Roadmap: Learn to become a modern QA engineer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a QA engineer","QA engineer","QA skills","QA development skills","QA development skills test","QA engineer roadmap","become a QA engineer","QA engineer career path","skills for QA development","what is QA engineer","QA engineer quiz","QA engineer interview questions"]},"title":"QA Engineer","description":"Steps to follow in order to become a modern QA Engineer in 2021","featuredTitle":"QA","featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2021","isUpcoming":true,"featured":true,"landingPath":"/roadmaps/111-qa/landscape.md","resourcesPath":"/roadmaps/111-qa/resources.md","author":{"name":"Anas Fitiani","url":"https://github.com/anas-qa"},"id":"qa","metaPath":"/roadmaps/111-qa/meta.json"}]')},8359:function(e){"use strict";e.exports=JSON.parse('{"home":"/roadmaps/100-frontend/content/readme.md","internet":"/roadmaps/100-frontend/content/100-internet/readme.md","internet:how-does-the-internet-work":"/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md","internet:what-is-http":"/roadmaps/100-frontend/content/100-internet/101-what-is-http.md","internet:browsers-and-how-they-work":"/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md","internet:dns-and-how-it-works":"/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md","internet:what-is-domain-name":"/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md","internet:what-is-hosting":"/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md","html":"/roadmaps/100-frontend/content/101-html/readme.md","html:learn-the-basics":"/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md","html:writing-semantic-html":"/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md","html:forms-and-validations":"/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md","html:conventions-and-best-practices":"/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md","html:accessibility":"/roadmaps/100-frontend/content/101-html/104-accessibility.md","html:seo-basics":"/roadmaps/100-frontend/content/101-html/105-seo-basics.md","css":"/roadmaps/100-frontend/content/102-css/readme.md","css:learn-the-basics":"/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md","css:making-layouts":"/roadmaps/100-frontend/content/102-css/101-making-layouts.md","css:responsive-design-and-media-queries":"/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md","javascript":"/roadmaps/100-frontend/content/103-javascript/readme.md","javascript:syntax-and-basic-constructs":"/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md","javascript:learn-dom-manipulation":"/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md","javascript:learn-fetch-api-ajax-xhr":"/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md","javascript:es6-and-modular-javascript":"/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md","javascript:concepts":"/roadmaps/100-frontend/content/103-javascript/104-concepts.md","version-control-systems":"/roadmaps/100-frontend/content/104-version-control-systems/readme.md","version-control-systems:basic-usage-of-git":"/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md","repo-hosting-services":"/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md","repo-hosting-services:github":"/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md","repo-hosting-services:gitlab":"/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md","repo-hosting-services:bitbucket":"/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md","web-security-knowledge":"/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md","web-security-knowledge:cors":"/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md","web-security-knowledge:https":"/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md","web-security-knowledge:content-security-policy":"/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md","web-security-knowledge:owasp-security-risks":"/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md","package-managers":"/roadmaps/100-frontend/content/107-package-managers/readme.md","package-managers:npm":"/roadmaps/100-frontend/content/107-package-managers/100-npm.md","package-managers:yarn":"/roadmaps/100-frontend/content/107-package-managers/101-yarn.md","css-architecture":"/roadmaps/100-frontend/content/108-css-architecture/readme.md","css-architecture:bem":"/roadmaps/100-frontend/content/108-css-architecture/100-bem.md","css-architecture:oocss":"/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md","css-architecture:smacss":"/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md","css-preprocessors":"/roadmaps/100-frontend/content/109-css-preprocessors/readme.md","css-preprocessors:sass":"/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md","css-preprocessors:postcss":"/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md","css-preprocessors:less":"/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md","build-tools":"/roadmaps/100-frontend/content/110-build-tools/readme.md","build-tools:task-runners":"/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md","build-tools:task-runners:npm-scripts":"/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md","build-tools:linters-formatters":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md","build-tools:linters-formatters:prettier":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md","build-tools:linters-formatters:eslint":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md","build-tools:linters-formatters:standardjs":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md","build-tools:module-bundlers":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md","build-tools:module-bundlers:webpack":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md","build-tools:module-bundlers:esbuild":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md","build-tools:module-bundlers:rollup":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md","build-tools:module-bundlers:parcel":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md","build-tools:module-bundlers:vite":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md","pick-a-framework":"/roadmaps/100-frontend/content/111-pick-a-framework/readme.md","pick-a-framework:react-js":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md","pick-a-framework:react-js:recoil":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md","pick-a-framework:react-js:redux":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md","pick-a-framework:react-js:mobx":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md","pick-a-framework:angular":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md","pick-a-framework:angular:rxjs":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md","pick-a-framework:angular:ngrx":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md","pick-a-framework:vue-js":"/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md","pick-a-framework:vue-js:vuex":"/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md","modern-css":"/roadmaps/100-frontend/content/112-modern-css/readme.md","modern-css:styled-components":"/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md","modern-css:css-modules":"/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md","modern-css:styled-jsx":"/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md","modern-css:emotion":"/roadmaps/100-frontend/content/112-modern-css/103-emotion.md","web-components":"/roadmaps/100-frontend/content/113-web-components/readme.md","web-components:html-templates":"/roadmaps/100-frontend/content/113-web-components/100-html-templates.md","web-components:custom-elements":"/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md","web-components:shadow-dom":"/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md","css-frameworks":"/roadmaps/100-frontend/content/114-css-frameworks/readme.md","css-frameworks:js-first":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md","css-frameworks:js-first:chakra-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md","css-frameworks:js-first:material-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md","css-frameworks:js-first:radix-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md","css-frameworks:js-first:tailwind-css":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md","css-frameworks:css-first":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md","css-frameworks:css-first:bootstrap":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md","css-frameworks:css-first:bulma":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md","testing-your-apps":"/roadmaps/100-frontend/content/115-testing-your-apps/readme.md","testing-your-apps:jest":"/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md","testing-your-apps:react-testing-library":"/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md","testing-your-apps:cypress":"/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md","testing-your-apps:enzyme":"/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md","testing-your-apps:other-options":"/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md","type-checkers":"/roadmaps/100-frontend/content/116-type-checkers/readme.md","type-checkers:typescript":"/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md","type-checkers:flow":"/roadmaps/100-frontend/content/116-type-checkers/101-flow.md","progressive-web-apps":"/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md","progressive-web-apps:performance":"/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md","progressive-web-apps:apis":"/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md","server-side-rendering":"/roadmaps/100-frontend/content/118-server-side-rendering/readme.md","server-side-rendering:react-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md","server-side-rendering:react-js:next-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md","server-side-rendering:react-js:after-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md","server-side-rendering:angular":"/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md","server-side-rendering:angular:universal":"/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md","server-side-rendering:vue-js":"/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md","server-side-rendering:vue-js:nuxt-js":"/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md","graphql":"/roadmaps/100-frontend/content/119-graphql/readme.md","graphql:apollo":"/roadmaps/100-frontend/content/119-graphql/100-apollo.md","graphql:relay-modern":"/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md","static-site-generators":"/roadmaps/100-frontend/content/120-static-site-generators/readme.md","static-site-generators:next-js":"/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md","static-site-generators:gatsbyjs":"/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md","static-site-generators:nuxt-js":"/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md","static-site-generators:vuepress":"/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md","static-site-generators:jekyll":"/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md","static-site-generators:hugo":"/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md","static-site-generators:gridsome":"/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md","static-site-generators:eleventy":"/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md","mobile-applications":"/roadmaps/100-frontend/content/121-mobile-applications/readme.md","mobile-applications:react-native":"/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md","mobile-applications:nativescript":"/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md","mobile-applications:flutter":"/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md","mobile-applications:ionic":"/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md","desktop-applications":"/roadmaps/100-frontend/content/122-desktop-applications/readme.md","desktop-applications:electron":"/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md","desktop-applications:carlo":"/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md","desktop-applications:proton-native":"/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md","web-assembly":"/roadmaps/100-frontend/content/123-web-assembly.md"}')},9258:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern frontend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a frontend developer","frontend developer","frontend engineer","frontend skills","frontend development","javascript developer","frontend development skills","frontend development skills test","frontend roadmap","frontend engineer roadmap","frontend developer roadmap","become a frontend developer","frontend developer career path","javascript developer","modern javascript developer","node developer","skills for frontend development","learn frontend development","what is frontend development","frontend developer quiz","frontend developer interview questions"]},"title":"Frontend Developer","description":"Step by step guide to becoming a modern frontend developer in 2021","featuredTitle":"Frontend","featuredDescription":"Step by step guide to becoming a frontend developer in 2021","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"featured":true,"imageUrl":"/roadmaps/frontend.png","jsonUrl":"/project/frontend.json","resourcesPath":"./resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/frontend-roadmap","contentPathsFilePath":"./content-paths.json"}')},6782:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern backend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a backend developer","backend roadmap","backend developer","backend engineer","backend skills","backend development","javascript developer","backend development skills","backend development skills test","backend engineer roadmap","backend developer roadmap","become a backend developer","backend developer career path","javascript developer","modern javascript developer","node developer","skills for backend development","learn backend development","what is backend development","backend developer quiz","backend developer interview questions"]},"title":"Backend Developer","description":"Step by step guide to becoming a modern backend developer in 2021","featuredTitle":"Backend","featuredDescription":"Step by step guide to becoming a backend developer in 2021","featured":true,"imageUrl":"/roadmaps/backend.png","jsonUrl":"/project/frontend.json","resourcesPath":"./resources.md","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/backend-roadmap"}')},4017:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a devops enginer","devops roadmap","sre roadmap","site reliability engineer roadmap","operations roles","become devops","devops skills","modern devops skills","devops skills test","skills for devops","learn devops","what is devops","what is sre","devops quiz","devops interview questions"]},"title":"DevOps Roadmap","description":"Step by step guide for DevOps, SRE or any other Operations Role in 2021","featuredTitle":"DevOps","featuredDescription":"Step by step guide for DevOps or operations role in 2021","featured":true,"imageUrl":"/roadmaps/devops.png","jsonUrl":"/project/devops.json","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/devops-roadmap"}')},8477:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"React Developer Roadmap: Learn to become a React developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a react developer","react developer roadmap","react roadmap","become react developer","react developer skills","react skills test","skills for react development","learn react development","what is react","react quiz","react interview questions"]},"title":"React Developer","description":"Everything that is there to learn about React and the ecosystem in 2021.","featuredTitle":"React","featuredDescription":"Step by step guide to become a React Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","jsonUrl":"/project/react.json","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/react-roadmap"}')},8834:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Angular Developer Roadmap: Learn to become a Angular developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a angular developer","angular developer roadmap","angular roadmap","become angular developer","angular developer skills","angular skills test","skills for angular development","learn angular development","what is angular","angular quiz","angular interview questions"]},"title":"Angular Developer","description":"Everything that is there to learn about Angular and the ecosystem in 2021.","featuredTitle":"Angular","featuredDescription":"Step by step guide to become a Angular Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"jsonUrl":"/project/angular.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/angular-roadmap"}')},9508:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Android Developer Roadmap: Learn to become an Android developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an android developer","android developer roadmap","android roadmap","become android developer","android developer skills","android skills test","skills for android development","learn android development","what is android","android quiz","android interview questions"]},"title":"Android Developer","description":"Step by step guide to becoming an Android developer in 2021","featuredTitle":"Android","featuredDescription":"Step by step guide to becoming an Android Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/android.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},4099:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern Python developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an python developer","python developer roadmap","python roadmap","become python developer","python developer skills","python skills test","skills for python development","learn python development","what is python","python quiz","python interview questions"]},"title":"Python Developer","description":"Step by step guide to becoming a Python developer in 2021","featuredTitle":"Python","featuredDescription":"Step by step guide to becoming a Python Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/python.json","resourcesPath":"./resources.md","landingPath":"./landscape.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/python-roadmap","versions":["latest"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},2737:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a Go developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a golang developer","guide to becoming a go developer","golang developer","go developer","guide to golang","guide to go","golang roadmap","go roadmap","golang skills","go skills","golang skills test","go skills test","skills for golang","skills for go","cloud development","what is golang","what is go","golang quiz","go quiz","golang interview questions","go interview questions"]},"title":"Go Developer","description":"Step by step guide to becoming a Go developer in 2021","featuredTitle":"Go","featuredDescription":"Step by step guide to becoming a Go developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/golang.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/go-roadmap","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},2507:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern Java developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a java developer","java developer","java engineer","java skills","guide to java","java roadmap","java skills","java skills test","skills for java","cloud development","what is java","java quiz","java interview questions","java engineer roadmap","java developer roadmap","become a java developer","java developer career path","java developer","modern java developer"]},"title":"Java Developer","description":"Step by step guide to becoming a Java developer in 2021","featuredTitle":"Java","featuredDescription":"Step by step guide to becoming a Java Developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/java.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/java-roadmap"}')},8951:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"DBA Roadmap: Learn to become a database administrator with PostgreSQL","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a database administrator","guide to becoming a DBA","dba roadmap","db administrator roadmap","database administrator roadmap","postgresql roadmap","dba skills","db administrator skills","become dba","postgresql skills","modern dba skills","dba skills test","skills for dba","skills for database administrator","learn dba","what is dba","database administrator quiz","dba interview questions"]},"title":"PostgreSQL DBA","description":"Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021","featuredTitle":"DBA","featuredDescription":"Step by step guide to become a PostgreSQL DBA in 2021","landingPath":"./landscape.md","resourcesPath":"./resources.md","author":{"name":"Alexey Lesovsky","url":"https://github.com/lesovsky"},"isCommunity":false,"isTextHeavy":true,"featured":true,"detailed":false,"versions":[]}')},7559:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"AWS Roadmap: Learn to use AWS","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to aws","aws roadmap","aws skills","aws skills test","skills for aws","cloud development","what is aws","aws quiz","aws interview questions"]},"title":"AWS","description":"Everything that is there to learn about AWS and the ecosystem in 2021.","featuredTitle":"AWS","featuredDescription":"Step by step guide to learn AWS in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":true,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},3204:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"QA Roadmap: Learn to become a modern QA engineer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a QA engineer","QA engineer","QA skills","QA development skills","QA development skills test","QA engineer roadmap","become a QA engineer","QA engineer career path","skills for QA development","what is QA engineer","QA engineer quiz","QA engineer interview questions"]},"title":"QA Engineer","description":"Steps to follow in order to become a modern QA Engineer in 2021","featuredTitle":"QA","featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2021","isUpcoming":true,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","author":{"name":"Anas Fitiani","url":"https://github.com/anas-qa"}}')},1797:function(e){"use strict";e.exports=JSON.parse('[{"id":"what-is-eventual-consistency","title":"What is Eventual Consistency?","description":"Learn about the different consistency models in distributed systems","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=rpqsSkTIdAw","authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2021-11-30T19:59:14.191Z","createdAt":"2021-11-30T19:59:14.191Z"},{"id":"ssh-ssl-tls","title":"SSH vs TLS vs SSL","description":"Learn the difference between SSH, TLS and SSL","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=k3rFFLmQCuY","authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2021-11-25T19:59:14.191Z","createdAt":"2021-11-25T19:59:14.191Z"},{"id":"async-javascript","title":"Asynchronous JavaScript","description":"Learn how to write asynchronous JavaScript using Async/Await","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=VyIK6SV5f7o","authorUsername":"kamranahmedse","duration":"15 minutes","updatedAt":"2021-11-14T19:59:14.191Z","createdAt":"2021-11-14T19:59:14.191Z"},{"id":"random-number-generators","title":"Random Number Generators","description":"How do random number generators work?","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=nDv3yXdD0rk","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-11-03T19:59:14.191Z","createdAt":"2021-11-03T19:59:14.191Z"},{"id":"big-o-notation","title":"Big O Notation","description":"Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=Z0bH0cMY0E8","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-25T19:59:14.191Z","createdAt":"2021-10-25T19:59:14.191Z"},{"id":"yaml-in-depth","title":"YAML in Depth","description":"Everything you need to know about YAML","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=ImHSpwUlNVc","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-18T19:59:14.191Z","createdAt":"2021-10-18T19:59:14.191Z"},{"id":"floating-point-arithmetic","title":"Floating Point Arithmetic","description":"Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=RIiq4tTt6rI","authorUsername":"kamranahmedse","duration":"4 minutes","updatedAt":"2021-10-10T19:59:14.191Z","createdAt":"2021-10-10T19:59:14.191Z"},{"id":"what-is-cap-theorem","title":"What is CAP Theorem?","description":"An illustrated explanation to CAP theorem with examples and proof.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=_RbsFXWRZ10","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-05T19:59:14.191Z","createdAt":"2021-10-05T19:59:14.191Z"},{"id":"acid-explained","title":"ACID Explained","description":"Learn what it means for a database to be ACID compliant with examples.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=yaQ5YMWkxq4","authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2021-09-26T19:59:14.191Z","createdAt":"2021-09-26T19:59:14.191Z"},{"id":"transport-protocols-tcp-vs-udp","title":"Transport Protocols: TCP vs UDP","description":"Learn about the Transport Layer of the TCP/IP model and different transport protocols.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=37AFBZv4_6Y","authorUsername":"kamranahmedse","duration":"10 minutes","updatedAt":"2020-11-21T19:59:14.191Z","createdAt":"2020-11-21T19:59:14.191Z"},{"id":"tcp-ip-model","title":"TCP/IP Model Explained","description":"Learn what is TCP/IP Model and the different layers involved.","isPro":false,"authorUsername":"kamranahmedse","youtubeLink":"https://www.youtube.com/watch?v=F5rni9fr1yE","duration":"5 minutes","updatedAt":"2020-11-06T19:59:14.191Z","createdAt":"2020-11-06T19:59:14.191Z"},{"id":"osi-model","title":"OSI Model Explained","description":"Learn what is OSI Model and the different layers involved.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=dV8mjZd1OtU","authorUsername":"kamranahmedse","duration":"7 minutes","updatedAt":"2020-10-24T19:59:14.191Z","createdAt":"2020-10-24T19:59:14.191Z"},{"id":"freeze-and-seal-objects-in-javascript","title":"Freeze and Seal in JavaScript","description":"Learn what is OSI Model and the different layers involved.","youtubeLink":"https://www.youtube.com/watch?v=O3uT2l6vgZ8","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-10-16T19:59:14.191Z","createdAt":"2020-10-16T19:59:14.191Z"},{"id":"all-about-http-caching","title":"All about HTTP Caching","description":"Learn what is HTTP caching, places for caching and different caching headers.","youtubeLink":"https://www.youtube.com/watch?v=HiBDZgTNpXY","isPro":false,"authorUsername":"kamranahmedse","duration":"13 minutes","updatedAt":"2020-10-04T19:59:14.191Z","createdAt":"2020-10-04T19:59:14.191Z"},{"id":"content-delivery-networks","title":"Content Delivery Networks","description":"Learn what the CDNs are and the difference between push CDN vs pull CDN.","youtubeLink":"https://www.youtube.com/watch?v=6DXEPcXKQNY","isPro":false,"authorUsername":"kamranahmedse","duration":"4 minutes","updatedAt":"2020-09-26T19:59:14.191Z","createdAt":"2020-09-26T19:59:14.191Z"},{"id":"load-balancers-101","title":"Load Balancers 101","description":"Learn the basics of load balancers, types and different algorithms.","youtubeLink":"https://www.youtube.com/watch?v=galcDRNd5Ow","isPro":false,"authorUsername":"kamranahmedse","duration":"9 minutes","updatedAt":"2020-09-18T19:59:14.191Z","createdAt":"2020-09-18T19:59:14.191Z"},{"id":"dns-records","title":"DNS Records","description":"Learn what the DNS is and how a website is found on the internet.","youtubeLink":"https://www.youtube.com/watch?v=7lxgpKh_fRY","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-08-31T19:59:14.191Z","createdAt":"2020-08-31T19:59:14.191Z"},{"id":"dns-explained","title":"DNS and how does it work?","description":"Learn what the DNS is and how a website is found on the internet.","youtubeLink":"https://www.youtube.com/watch?v=Wj0od2ag5sk","isPro":false,"authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2020-08-17T19:59:14.191Z","createdAt":"2020-08-17T19:59:14.191Z"},{"id":"system-design-101","title":"System Design 101","description":"Learn about all the bits and pieces of system design.","youtubeLink":"https://www.youtube.com/watch?v=Y-Gl4HEyeUQ","isPro":false,"authorUsername":"kamranahmedse","duration":"7 minutes","updatedAt":"2020-08-08T19:59:14.191Z","createdAt":"2020-08-08T19:59:14.191Z"},{"id":"javascript-fetch-api","title":"JavaScript Fetch API","description":"Learn how to use JavaScript\'s Fetch API to interact with remote API.","youtubeLink":"https://www.youtube.com/watch?v=-ZI0ea5O2oA","isPro":false,"authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2020-08-02T19:59:14.191Z","createdAt":"2020-08-02T19:59:14.191Z"},{"id":"scaling-the-unscalable","title":"Scaling the Unscalable","description":"Learn the basics of System Design and understand how to build a scalable application.","youtubeLink":"https://www.youtube.com/watch?v=a2rcgzludDU","isPro":false,"authorUsername":"kamranahmedse","duration":"10 minutes","updatedAt":"2020-07-26T19:59:14.191Z","createdAt":"2020-07-26T19:59:14.191Z"},{"id":"promises-in-javascript","title":"All about Promises in JavaScript","youtubeLink":"https://www.youtube.com/watch?v=BvrkobaCVVE","description":"Learn how to write asynchronous code in JavaScript using promises.","isPro":false,"authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2020-07-20T19:59:14.191Z","createdAt":"2020-07-20T19:59:14.191Z"},{"id":"how-to-use-github-actions","title":"Automate with GitHub Actions","description":"Learn how to implement CI/CD with GitHub Actions","youtubeLink":"https://www.youtube.com/watch?v=nyKZTKQS_EQ","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-07-13T19:59:14.191Z","createdAt":"2020-07-13T19:59:14.191Z"},{"id":"what-is-dependency-injection","title":"What is Dependency Injection?","description":"Learn what is dependency injection and how to write better code with the help of it.","youtubeLink":"https://www.youtube.com/watch?v=0yc2UANSDiw","isPro":false,"authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2020-07-04T19:59:14.191Z","createdAt":"2020-07-04T19:59:14.191Z"},{"id":"how-to-use-css-variables","title":"How to use CSS Variables?","description":"Learn how to write scalable CSS using CSS Variables.","youtubeLink":"https://www.youtube.com/watch?v=lgaxU7CRmxU","isPro":false,"authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2020-07-03T19:59:14.191Z","createdAt":"2020-07-03T19:59:14.191Z"},{"id":"what-is-dom-shadow-dom-virtual-dom","title":"DOM, Shadow DOM, Virtual DOM","description":"Learn what is DOM, Shadow DOM and Virtual DOM and how they work.","youtubeLink":"https://www.youtube.com/watch?v=7Tok22qxPzQ","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-07-20T19:59:14.191Z","createdAt":"2020-07-20T19:59:14.191Z"},{"id":"practical-intro-to-react","title":"Practical Introduction to React","description":"Learn how to create a React Application with practical example.","youtubeLink":"https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu","isPro":false,"authorUsername":"kamranahmedse","duration":"40 minutes","updatedAt":"2020-07-09T19:59:14.191Z","createdAt":"2020-07-09T19:59:14.191Z"},{"id":"arrays-and-objects-in-javascript","title":"Arrays and Objects in JavaScript","description":"Learn how to manipulate arrays and objects in JavaScript.","youtubeLink":"https://www.youtube.com/watch?v=n3NKGsM3iEw","isPro":false,"authorUsername":"kamranahmedse","duration":"12 minutes","updatedAt":"2020-05-09T19:59:14.191Z","createdAt":"2020-05-09T19:59:14.191Z"}]')}}]); \ No newline at end of file diff --git a/_next/static/chunks/280-bb270a68377858a2.js b/_next/static/chunks/280-bb270a68377858a2.js new file mode 100644 index 000000000..4b6437af7 --- /dev/null +++ b/_next/static/chunks/280-bb270a68377858a2.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[280],{9280:function(e,t,n){var r={"./authors":8712,"./authors.json":8712,"./guides":9552,"./guides.json":9552,"./guides/asymptotic-notation.md":3070,"./guides/avoid-render-blocking-javascript-with-async-defer.md":8829,"./guides/basic-authentication.md":5151,"./guides/big-o-notation.md":5198,"./guides/character-encodings.md":3180,"./guides/ci-cd.md":7354,"./guides/design-patterns-for-humans.md":3406,"./guides/dhcp-in-one-picture.md":3784,"./guides/dns-in-one-picture.md":9937,"./guides/history-of-javascript.md":8003,"./guides/http-caching.md":9128,"./guides/journey-to-http2.md":3045,"./guides/jwt-authentication.md":5772,"./guides/levels-of-seniority.md":3878,"./guides/oauth.md":801,"./guides/project-history.md":6681,"./guides/proxy-servers.md":7035,"./guides/random-numbers.md":513,"./guides/scaling-databases.md":7507,"./guides/session-authentication.md":8676,"./guides/ssl-tls-https-ssh.md":6053,"./guides/sso.md":9809,"./guides/token-authentication.md":5607,"./guides/torrent-client.md":4972,"./guides/unfamiliar-codebase.md":5941,"./guides/upcoming.md":5104,"./guides/what-are-web-vitals.md":3442,"./guides/what-is-internet.md":1470,"./guides/what-is-sli-slo-sla.md":1307,"./guides/why-build-it-and-they-will-come-wont-work-anymore.md":9554,"./pages/about.md":4160,"./pages/privacy.md":5591,"./pages/terms.md":2547,"./roadmaps":1662,"./roadmaps.json":1662,"./roadmaps/100-frontend/content-paths":8359,"./roadmaps/100-frontend/content-paths.json":8359,"./roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md":5606,"./roadmaps/100-frontend/content/100-internet/101-what-is-http.md":181,"./roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md":6152,"./roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md":3405,"./roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md":2222,"./roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md":8129,"./roadmaps/100-frontend/content/100-internet/readme.md":2633,"./roadmaps/100-frontend/content/101-html/100-learn-the-basics.md":7828,"./roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md":258,"./roadmaps/100-frontend/content/101-html/102-forms-and-validations.md":757,"./roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md":1881,"./roadmaps/100-frontend/content/101-html/104-accessibility.md":3699,"./roadmaps/100-frontend/content/101-html/105-seo-basics.md":584,"./roadmaps/100-frontend/content/101-html/readme.md":3913,"./roadmaps/100-frontend/content/102-css/100-learn-the-basics.md":8533,"./roadmaps/100-frontend/content/102-css/101-making-layouts.md":3780,"./roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md":1118,"./roadmaps/100-frontend/content/102-css/readme.md":5211,"./roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md":617,"./roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md":1569,"./roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md":4746,"./roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md":6401,"./roadmaps/100-frontend/content/103-javascript/104-concepts.md":2698,"./roadmaps/100-frontend/content/103-javascript/readme.md":8613,"./roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md":2555,"./roadmaps/100-frontend/content/104-version-control-systems/readme.md":8405,"./roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md":8548,"./roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md":1952,"./roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md":6145,"./roadmaps/100-frontend/content/105-repo-hosting-services/readme.md":493,"./roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md":2510,"./roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md":9377,"./roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md":8705,"./roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md":8633,"./roadmaps/100-frontend/content/106-web-security-knowledge/readme.md":9012,"./roadmaps/100-frontend/content/107-package-managers/100-npm.md":1415,"./roadmaps/100-frontend/content/107-package-managers/101-yarn.md":6356,"./roadmaps/100-frontend/content/107-package-managers/readme.md":8988,"./roadmaps/100-frontend/content/108-css-architecture/100-bem.md":6665,"./roadmaps/100-frontend/content/108-css-architecture/101-oocss.md":1750,"./roadmaps/100-frontend/content/108-css-architecture/102-smacss.md":8887,"./roadmaps/100-frontend/content/108-css-architecture/readme.md":5220,"./roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md":4447,"./roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md":5106,"./roadmaps/100-frontend/content/109-css-preprocessors/102-less.md":2972,"./roadmaps/100-frontend/content/109-css-preprocessors/readme.md":8365,"./roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md":6523,"./roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md":8664,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md":6795,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md":9500,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md":5629,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md":5648,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md":762,"./roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md":6459,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md":840,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md":2816,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md":4453,"./roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md":2310,"./roadmaps/100-frontend/content/110-build-tools/readme.md":7093,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md":7139,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md":5783,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md":7810,"./roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md":6199,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md":5685,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md":3162,"./roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md":3666,"./roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md":549,"./roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md":5277,"./roadmaps/100-frontend/content/111-pick-a-framework/readme.md":1473,"./roadmaps/100-frontend/content/112-modern-css/100-styled-components.md":3745,"./roadmaps/100-frontend/content/112-modern-css/101-css-modules.md":1720,"./roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md":4349,"./roadmaps/100-frontend/content/112-modern-css/103-emotion.md":4291,"./roadmaps/100-frontend/content/112-modern-css/readme.md":9904,"./roadmaps/100-frontend/content/113-web-components/100-html-templates.md":1484,"./roadmaps/100-frontend/content/113-web-components/101-custom-elements.md":6625,"./roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md":2901,"./roadmaps/100-frontend/content/113-web-components/readme.md":8933,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md":4642,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md":4505,"./roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md":4740,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md":1160,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md":6937,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md":9120,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md":3694,"./roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md":7562,"./roadmaps/100-frontend/content/114-css-frameworks/readme.md":1879,"./roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md":5996,"./roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md":2772,"./roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md":3431,"./roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md":4375,"./roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md":4946,"./roadmaps/100-frontend/content/115-testing-your-apps/readme.md":5770,"./roadmaps/100-frontend/content/116-type-checkers/100-typescript.md":3227,"./roadmaps/100-frontend/content/116-type-checkers/101-flow.md":9935,"./roadmaps/100-frontend/content/116-type-checkers/readme.md":8323,"./roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md":4990,"./roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md":5089,"./roadmaps/100-frontend/content/117-progressive-web-apps/readme.md":2768,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md":9086,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md":4930,"./roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md":8747,"./roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md":7815,"./roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md":6394,"./roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md":2573,"./roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md":5137,"./roadmaps/100-frontend/content/118-server-side-rendering/readme.md":1905,"./roadmaps/100-frontend/content/119-graphql/100-apollo.md":410,"./roadmaps/100-frontend/content/119-graphql/101-relay-modern.md":485,"./roadmaps/100-frontend/content/119-graphql/readme.md":4133,"./roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md":7935,"./roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md":1291,"./roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md":855,"./roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md":2374,"./roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md":1898,"./roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md":355,"./roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md":2578,"./roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md":476,"./roadmaps/100-frontend/content/120-static-site-generators/readme.md":5470,"./roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md":2919,"./roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md":5760,"./roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md":9268,"./roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md":7280,"./roadmaps/100-frontend/content/121-mobile-applications/readme.md":388,"./roadmaps/100-frontend/content/122-desktop-applications/100-electron.md":7137,"./roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md":373,"./roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md":5588,"./roadmaps/100-frontend/content/122-desktop-applications/readme.md":8773,"./roadmaps/100-frontend/content/123-web-assembly.md":9429,"./roadmaps/100-frontend/content/readme.md":7086,"./roadmaps/100-frontend/meta":9258,"./roadmaps/100-frontend/meta.json":9258,"./roadmaps/100-frontend/resources.md":7083,"./roadmaps/101-backend/meta":6782,"./roadmaps/101-backend/meta.json":6782,"./roadmaps/101-backend/resources.md":8093,"./roadmaps/102-devops/meta":4017,"./roadmaps/102-devops/meta.json":4017,"./roadmaps/102-devops/resources.md":5332,"./roadmaps/103-react/landscape.md":4558,"./roadmaps/103-react/meta":8477,"./roadmaps/103-react/meta.json":8477,"./roadmaps/103-react/resources.md":63,"./roadmaps/104-angular/landscape.md":595,"./roadmaps/104-angular/meta":8834,"./roadmaps/104-angular/meta.json":8834,"./roadmaps/104-angular/resources.md":7489,"./roadmaps/105-android/landscape.md":5191,"./roadmaps/105-android/meta":9508,"./roadmaps/105-android/meta.json":9508,"./roadmaps/105-android/resources.md":7890,"./roadmaps/106-python/landscape.md":9556,"./roadmaps/106-python/meta":4099,"./roadmaps/106-python/meta.json":4099,"./roadmaps/106-python/resources.md":8481,"./roadmaps/107-golang/landscape.md":2388,"./roadmaps/107-golang/meta":2737,"./roadmaps/107-golang/meta.json":2737,"./roadmaps/107-golang/resources.md":9101,"./roadmaps/108-java/landscape.md":7913,"./roadmaps/108-java/meta":2507,"./roadmaps/108-java/meta.json":2507,"./roadmaps/108-java/resources.md":9673,"./roadmaps/109-postgresql-dba/landscape.md":1464,"./roadmaps/109-postgresql-dba/meta":8951,"./roadmaps/109-postgresql-dba/meta.json":8951,"./roadmaps/109-postgresql-dba/resources.md":1545,"./roadmaps/110-aws/landscape.md":8188,"./roadmaps/110-aws/meta":7559,"./roadmaps/110-aws/meta.json":7559,"./roadmaps/110-aws/resources.md":1048,"./roadmaps/111-qa/landscape.md":4894,"./roadmaps/111-qa/meta":3204,"./roadmaps/111-qa/meta.json":3204,"./roadmaps/111-qa/resources.md":9598,"./site":8641,"./site.json":8641,"./videos":1797,"./videos.json":1797,"./videos/acid-explained.md":8974,"./videos/all-about-http-caching.md":3730,"./videos/arrays-and-objects-in-javascript.md":7589,"./videos/async-javascript.md":8001,"./videos/big-o-notation.md":6736,"./videos/content-delivery-networks.md":5489,"./videos/dns-explained.md":9029,"./videos/dns-records.md":4046,"./videos/floating-point-arithmetic.md":7327,"./videos/freeze-and-seal-objects-in-javascript.md":6527,"./videos/how-to-use-css-variables.md":5512,"./videos/how-to-use-github-actions.md":8688,"./videos/javascript-fetch-api.md":965,"./videos/load-balancers-101.md":2012,"./videos/osi-model.md":5495,"./videos/practical-intro-to-react.md":4913,"./videos/promises-in-javascript.md":7e3,"./videos/random-number-generators.md":1516,"./videos/scaling-the-unscalable.md":7850,"./videos/ssh-ssl-tls.md":9345,"./videos/system-design-101.md":5069,"./videos/tcp-ip-model.md":1559,"./videos/transport-protocols-tcp-vs-udp.md":2382,"./videos/what-is-cap-theorem.md":5875,"./videos/what-is-dependency-injection.md":2635,"./videos/what-is-dom-shadow-dom-virtual-dom.md":6095,"./videos/what-is-eventual-consistency.md":2068,"./videos/yaml-in-depth.md":6372};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=9280},4160:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",null,"What is roadmap.sh?"),(0,r.kt)("p",null,"Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding\ndevelopers. It started as a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"set of charts to guide the developers"),"\nwho are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get\nmore contributors involved."),(0,r.kt)("h2",null,"What are the plans for roadmap.sh?"),(0,r.kt)("p",null,"The website started off as\na ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"simple repository containing a few charts")," for developers and\nbased on my personal opinions but it could have been much more than that so I decided to expand it to a website where\npeople can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc."),(0,r.kt)("p",null,"We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into\na goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the\nlearnings, get feedbacks on their projects etc."),(0,r.kt)("h2",null,"How did you build roadmap.sh?"),(0,r.kt)("p",null,"The basic version of the website has been built with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/zeit/next.js/"}),"Next.js"),", is opensource and can\nbe found on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"github"),". It was hastily done to get it out in front of the\npeople and get people to start contributing, so it might be rough on the edges, but that is where we need your help."),(0,r.kt)("h2",null,"How does it make money?"),(0,r.kt)("p",null,"It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with\nany intentions of monetization but as a good will, to help the people get out of the frustration that I was once in."),(0,r.kt)("p",null,"Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to\nmake enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll\ncontinue growing the site however I can. My focus at the moment is not making money from it and just add content that\ncreates value for the people."),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Sponsor the efforts by ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/sponsors/kamranahmedse"}),"paying as little as 5$ per month")," or with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://paypal.me/kamranahmedse"}),"one time payment via paypal"),". Alternatively, reach out to me at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),".")),(0,r.kt)("h2",null,"Can I contribute?"),(0,r.kt)("p",null,"You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The\nsource code of the website can be ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"found on Github"),". Your contributions can\nbe:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Adding a new roadmap"),(0,r.kt)("li",{parentName:"ul"},"Updating existing roadmap"),(0,r.kt)("li",{parentName:"ul"},"Suggesting changes to the existing roadmaps"),(0,r.kt)("li",{parentName:"ul"},"Writing a Guide"),(0,r.kt)("li",{parentName:"ul"},"Updating an existing guide"),(0,r.kt)("li",{parentName:"ul"},"Fixing grammar mistakes, typos on the website or the content"),(0,r.kt)("li",{parentName:"ul"},"Updating the UI of the website"),(0,r.kt)("li",{parentName:"ul"},"Refactoring the codebase"),(0,r.kt)("li",{parentName:"ul"},"Becoming a sponsor")),(0,r.kt)("p",null,"Just make sure\nto ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing"}),"follow the contribution guidelines")," when you\ndecide to contribute."),(0,r.kt)("h2",null,"Can I redistribute the content?"),(0,r.kt)("p",null,"No, the license of the content on this website does not allow you to redistribute any of the content on this website\nanywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not\nallowed."),(0,r.kt)("h2",null,"What is the best way to contact you?"),(0,r.kt)("p",null,"Tweet or send me a message ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse")," or email me\nat ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),". I get lots of messages so apologies in advance if you don't hear back\nfrom me soon but I do reply to everyone."))}s.isMDXComponent=!0},5591:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Privacy Policy"),(0,r.kt)("p",null,"By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh\u2019s Services is at all times subject to the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/terms"}),"Terms of Use"),", which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use."),(0,r.kt)("h2",null,"What does this Privacy Policy cover?"),(0,r.kt)("p",null,'This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don\u2019t own or control, or people that we don\u2019t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.'),(0,r.kt)("p",null,"As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"Will roadmap.sh ever change this Privacy Policy?"),(0,r.kt)("p",null,"We\u2019re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you\u2019ve opted not to receive legal notice emails from us (or you haven\u2019t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected."),(0,r.kt)("h2",null,"What Information does roadmap.sh Collect?"),(0,r.kt)("p",null,"Information You Provide to Us:"),(0,r.kt)("p",null,"We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (\u201cThird Party Account Information\u201d) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features."),(0,r.kt)("p",null,"We may communicate with you if you\u2019ve provided us the means to do so. For example, if you\u2019ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"Information Collected Automatically"),(0,r.kt)("p",null,"Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, \u201ccookie\u201d information, the type of browser and/or device you\u2019re using to access our Services, and the page or feature you requested. \u201cCookies\u201d are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device\u2019s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren\u2019t responsible for their privacy policies and practices."),(0,r.kt)("p",null,"When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible."),(0,r.kt)("h2",null,"Will roadmap.sh Share Any of the Personal Information it Receives?"),(0,r.kt)("p",null,"We may share your Personal Information with third parties as described in this section:"),(0,r.kt)("p",null,"Information that\u2019s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual."),(0,r.kt)("p",null,"Advertisers: We may allow advertisers and/or merchant partners (\u201cAdvertisers\u201d) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach."),(0,r.kt)("p",null,"We may deliver a file to you through the Services (known as a \u201cweb beacon\u201d) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network\u2019s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser."),(0,r.kt)("p",null,"Affiliated Businesses: In certain situations, businesses or third party websites we\u2019re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business\u2019 or websites\u2019 policies."),(0,r.kt)("p",null,"Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us."),(0,r.kt)("p",null,"User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of \u201cfriends\u201d from that site or service may be automatically imported to the Services, and such \u201cfriends,\u201d if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service."),(0,r.kt)("p",null,"Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party."),(0,r.kt)("p",null,"Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others."),(0,r.kt)("h2",null,"Is Personal Information about me secure?"),(0,r.kt)("p",null,"Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time."),(0,r.kt)("h2",null,"What Personal Information can I access?"),(0,r.kt)("p",null,"Through your account settings, you may access, and, in some cases, edit or delete the following information you\u2019ve provided to us:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"first and last name"),(0,r.kt)("li",{parentName:"ul"},"location of residence"),(0,r.kt)("li",{parentName:"ul"},"age or birthday"),(0,r.kt)("li",{parentName:"ul"},"username")),(0,r.kt)("p",null,"The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("p",null,"Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,r.kt)("h2",null,"What choices do I have?"),(0,r.kt)("p",null,"You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features."),(0,r.kt)("p",null,"You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com")," and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally."),(0,r.kt)("h2",null,"What if I have questions about this policy?"),(0,r.kt)("p",null,"If you have any questions or concerns regarding our privacy policies, please send us a detailed message to ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),", and we will try to resolve your concerns."))}s.isMDXComponent=!0},5606:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Internet"),(0,r.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.vox.com/2014/6/16/18076282/the-internet",mdxType:"BadgeLink"},"The Internet Explained"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm",mdxType:"BadgeLink"},"How Does the Internet Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"Introduction to Internet"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=x3c1ih2NJEg",mdxType:"BadgeLink"},"How does the Internet work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the Internet Works in 5 Minutes"))}u.isMDXComponent=!0},181:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"What is HTTP?"),(0,r.kt)("p",null,"HTTP is the ",(0,r.kt)("inlineCode",{parentName:"p"},"TCP/IP")," based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/",mdxType:"BadgeLink"},"What is HTTP?"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",mdxType:"BadgeLink"},"An overview of HTTP"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://kamranahmed.info/blog/2016/08/13/http-in-depth/",mdxType:"BadgeLink"},"Journey to HTTP/2"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=iYM2zFP3Zn0",mdxType:"BadgeLink"},"HTTP Crash Course & Exploration"))}u.isMDXComponent=!0},6152:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Browsers"),(0,r.kt)("p",null,"A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. "),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/",mdxType:"BadgeLink"},"How Browsers Work"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.browserstack.com/guide/browser-rendering-engine",mdxType:"BadgeLink"},"Role of Rendering Engine in Browsers"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work",mdxType:"BadgeLink"},"Populating the Page: How Browsers Work"))}u.isMDXComponent=!0},3405:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"DNS"),(0,r.kt)("p",null,"The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/",mdxType:"BadgeLink"},"What is DNS?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Wj0od2ag5sk",mdxType:"BadgeLink"},"DNS and How does it Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7lxgpKh_fRY",mdxType:"BadgeLink"},"DNS Records"))}u.isMDXComponent=!0},2222:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Domain Name"),(0,r.kt)("p",null,"A domain name is a unique, easy-to-remember address used to access websites, such as \u2018google.com\u2019, and \u2018facebook.com\u2019. Users can connect to websites using domain names thanks to the DNS system."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name",mdxType:"BadgeLink"},"What is a Domain Name?"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/",mdxType:"BadgeLink"},"What is a Domain Name? | Domain name vs. URL"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Y4cRx19nhJk",mdxType:"BadgeLink"},"A Beginners Guide to How Domain Names Work"))}u.isMDXComponent=!0},8129:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Hosting"),(0,r.kt)("p",null,"Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=htbY9-yggB0",mdxType:"BadgeLink"},"What Is Web Hosting? Explained"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=AXVZYzw8geg",mdxType:"BadgeLink"},"Different Types of Web Hosting Explained"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Kx_1NYYJS7Q",mdxType:"BadgeLink"},"Where to Host a Fullstack Project on a Budget"))}u.isMDXComponent=!0},2633:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Internet"),(0,r.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.vox.com/2014/6/16/18076282/the-internet",mdxType:"BadgeLink"},"The Internet Explained"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm",mdxType:"BadgeLink"},"How Does the Internet Work?"),(0,r.kt)(i,{badgeText:"Watch",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"Introduction to Internet"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=x3c1ih2NJEg",mdxType:"BadgeLink"},"How does the Internet work?"),(0,r.kt)(i,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the Internet Works in 5 Minutes"))}u.isMDXComponent=!0},7828:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"HTML Basics"),(0,r.kt)("p",null,"HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.w3schools.com/html/html_intro.asp",mdxType:"BadgeLink"},"W3Schools: Learn HTML"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=qz0aGYrrlhU",mdxType:"BadgeLink"},"HTML Tutorial for Beginners: HTML Crash Course"))}u.isMDXComponent=!0},258:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Semantic HTML"),(0,r.kt)("p",null,"Semantic element clearly describes its meaning to both the browser and the developer."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",colorScheme:"yellow",href:"https://www.w3schools.com/html/html5_semantic_elements.asp",mdxType:"BadgeLink"},"W3Schools: Semantic HTML"),(0,r.kt)(i,{badgeText:"Read",colorScheme:"yellow",href:"https://hackernoon.com/how-to-write-semantic-html-dkq3ulo",mdxType:"BadgeLink"},"How To Write Semantic HTML"))}u.isMDXComponent=!0},757:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Forms and validations"))}s.isMDXComponent=!0},1881:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Conventions and best practices"))}s.isMDXComponent=!0},3699:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Accessibility"))}s.isMDXComponent=!0},584:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Basics of SEO"))}s.isMDXComponent=!0},3913:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"HTML"),(0,r.kt)("p",null,"HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.w3schools.com/html/html_intro.asp",mdxType:"BadgeLink"},"W3Schools: Learn HTML"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=qz0aGYrrlhU",mdxType:"BadgeLink"},"HTML Tutorial for Beginners: HTML Crash Course"))}u.isMDXComponent=!0},8533:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"CSS Basics"),(0,r.kt)("p",null,"CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2014 Learn CSS"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.freecodecamp.org/learn/responsive-web-design/",mdxType:"BadgeLink"},"freeCodeCamp \u2014 Responsive Web Design"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://learn.shayhowe.com/html-css/building-your-first-web-page/",mdxType:"BadgeLink"},"Learn to Code HTML & CSS"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=D-h8L5hgW-w",mdxType:"BadgeLink"},"HTML and CSS Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=FqmB-Zj2-PA",mdxType:"BadgeLink"},"CSS Masterclass - Tutorial & Course for Beginners"))}u.isMDXComponent=!0},3780:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Making layouts"),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://flexboxfroggy.com/",mdxType:"BadgeLink"},"Learn and Practice Flexbox"))}u.isMDXComponent=!0},1118:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Responsive Design"))}s.isMDXComponent=!0},5211:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"CSS"),(0,r.kt)("p",null,"CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2014 Learn CSS"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.freecodecamp.org/learn/responsive-web-design/",mdxType:"BadgeLink"},"freeCodeCamp \u2014 Responsive Web Design"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://learn.shayhowe.com/html-css/building-your-first-web-page/",mdxType:"BadgeLink"},"Learn to Code HTML & CSS"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=D-h8L5hgW-w",mdxType:"BadgeLink"},"HTML and CSS Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=FqmB-Zj2-PA",mdxType:"BadgeLink"},"CSS Masterclass - Tutorial & Course for Beginners"))}u.isMDXComponent=!0},617:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Syntax and basic constructs"))}s.isMDXComponent=!0},1569:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Learn dom manipulation"))}s.isMDXComponent=!0},4746:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Learn fetch api ajax xhr"))}s.isMDXComponent=!0},6401:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Es6 and modular javascript"))}s.isMDXComponent=!0},2698:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Concepts"))}s.isMDXComponent=!0},8613:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Javascript"))}s.isMDXComponent=!0},2555:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Basic usage of git"))}s.isMDXComponent=!0},8405:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Version control systems"))}s.isMDXComponent=!0},8548:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Github"),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com"}),"GitHub")," is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{badgeText:"Read",href:"https://docs.github.com/en/get-started/quickstart/hello-world",mdxType:"BadgeLink"},"GitHub: Quickstart"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=w3jLJU7DT5E",mdxType:"BadgeLink"},"What is GitHub?"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=wpISo9TNjfU",mdxType:"BadgeLink"},"Git vs. GitHub: What's the difference?"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=RGOj5yH7evk",mdxType:"BadgeLink"},"Git and GitHub for Beginners"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=eulnSXkhE7I",mdxType:"BadgeLink"},"Git and GitHub - CS50 Beyond 2019"))}u.isMDXComponent=!0},1952:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gitlab"))}s.isMDXComponent=!0},6145:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bitbucket"))}s.isMDXComponent=!0},493:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Repo hosting services"))}s.isMDXComponent=!0},2510:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Https"))}s.isMDXComponent=!0},9377:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Content security policy"))}s.isMDXComponent=!0},8705:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Cors"))}s.isMDXComponent=!0},8633:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Owasp security risks"))}s.isMDXComponent=!0},9012:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web security knowledge"))}s.isMDXComponent=!0},1415:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Npm"))}s.isMDXComponent=!0},6356:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Yarn"))}s.isMDXComponent=!0},8988:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Package managers"))}s.isMDXComponent=!0},6665:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bem"),(0,r.kt)("p",null,"The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Article BEM 101: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://css-tricks.com/bem-101/"}),"https://css-tricks.com/bem-101/")),(0,r.kt)("li",{parentName:"ul"},"BEM Official Website: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/"}),"https://en.bem.info/")),(0,r.kt)("li",{parentName:"ul"},"BEM Documentation: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/methodology/quick-start/"}),"https://en.bem.info/methodology/quick-start/")," "),(0,r.kt)("li",{parentName:"ul"},"BEM Tutorials: ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://en.bem.info/tutorials/"}),"https://en.bem.info/tutorials/"))))}s.isMDXComponent=!0},1750:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Oocss"))}s.isMDXComponent=!0},8887:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Smacss"))}s.isMDXComponent=!0},5220:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css architecture"))}s.isMDXComponent=!0},4447:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Sass"))}s.isMDXComponent=!0},5106:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Postcss"))}s.isMDXComponent=!0},2972:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Less"))}s.isMDXComponent=!0},8365:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css preprocessors"))}s.isMDXComponent=!0},6523:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Npm scripts"))}s.isMDXComponent=!0},8664:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Task runners"))}s.isMDXComponent=!0},6795:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Webpack"))}s.isMDXComponent=!0},9500:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Esbuild"))}s.isMDXComponent=!0},5629:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Rollup"))}s.isMDXComponent=!0},5648:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Parcel"))}s.isMDXComponent=!0},762:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vite"))}s.isMDXComponent=!0},6459:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Module bundlers"))}s.isMDXComponent=!0},840:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Prettier"))}s.isMDXComponent=!0},2816:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Eslint"))}s.isMDXComponent=!0},4453:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Standardjs"))}s.isMDXComponent=!0},2310:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Linters formatters"))}s.isMDXComponent=!0},7093:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Build tools"))}s.isMDXComponent=!0},7139:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Redux"))}s.isMDXComponent=!0},5783:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Mobx"))}s.isMDXComponent=!0},7810:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Recoil"))}s.isMDXComponent=!0},6199:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React"),(0,r.kt)("p",null,"React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Framework Website",href:"https://reactjs.org/",mdxType:"BadgeLink"},"React Website"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Read",href:"https://reactjs.org/tutorial/tutorial.html",mdxType:"BadgeLink"},"Official Getting Started"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://egghead.io/courses/the-beginner-s-guide-to-react",mdxType:"BadgeLink"},"The Beginner's Guide to React"),(0,r.kt)(i,{badgeText:"Course",colorScheme:"green",href:"https://www.youtube.com/watch?v=nTeuhbP7wdE",mdxType:"BadgeLink"},"React JS Course for Beginners"),(0,r.kt)(i,{badgeText:"Watch",colorScheme:"yellow",href:"https://www.youtube.com/watch?v=i793Qm6kv3U",mdxType:"BadgeLink"},"Understanding React's UI Rendering Process"))}u.isMDXComponent=!0},5685:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Rxjs"))}s.isMDXComponent=!0},3162:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Ngrx"))}s.isMDXComponent=!0},3666:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Angular"))}s.isMDXComponent=!0},549:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vuex"))}s.isMDXComponent=!0},5277:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vue js"))}s.isMDXComponent=!0},1473:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Pick a framework"))}s.isMDXComponent=!0},3745:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Styled components"))}s.isMDXComponent=!0},1720:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css modules"))}s.isMDXComponent=!0},4349:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Styled jsx"))}s.isMDXComponent=!0},4291:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Emotion"))}s.isMDXComponent=!0},9904:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Modern css"))}s.isMDXComponent=!0},1484:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Html templates"))}s.isMDXComponent=!0},6625:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Custom elements"))}s.isMDXComponent=!0},2901:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Shadow dom"))}s.isMDXComponent=!0},8933:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web components"))}s.isMDXComponent=!0},4642:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bootstrap"))}s.isMDXComponent=!0},4505:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Bulma"))}s.isMDXComponent=!0},4740:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css first"))}s.isMDXComponent=!0},1160:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Tailwind CSS"),(0,r.kt)("p",null,"CSS Framework that provides atomic CSS classes to help you style components e.g. ",(0,r.kt)("inlineCode",{parentName:"p"},"flex"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"pt-4"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"text-center")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"rotate-90")," that can be composed to build any design, directly in your markup."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Framework Website",href:"https://tailwindcss.com",mdxType:"BadgeLink"},"Tailwind Website"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"YouTube Channel",href:"https://www.youtube.com/c/TailwindLabs/videos",mdxType:"BadgeLink"},"Official Screencasts"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Watch",href:"https://www.youtube.com/watch?v=hdGsFpZ0J2E",mdxType:"BadgeLink"},"Should You Use Tailwind CSS?"),(0,r.kt)(i,{badgeText:"Read",href:"https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction",mdxType:"BadgeLink"},"Tailwind CSS: An Introduction"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=UBOj6rqRUME",mdxType:"BadgeLink"},"Tailwind CSS Crash Course"))}u.isMDXComponent=!0},6937:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Chakra ui"))}s.isMDXComponent=!0},9120:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Material ui"))}s.isMDXComponent=!0},3694:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Radix ui"))}s.isMDXComponent=!0},7562:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Js first"))}s.isMDXComponent=!0},1879:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Css frameworks"))}s.isMDXComponent=!0},5996:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Jest"))}s.isMDXComponent=!0},2772:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React testing library"))}s.isMDXComponent=!0},3431:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Cypress"))}s.isMDXComponent=!0},4375:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Enzyme"))}s.isMDXComponent=!0},4946:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Other options"))}s.isMDXComponent=!0},5770:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Testing your apps"))}s.isMDXComponent=!0},3227:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Typescript"))}s.isMDXComponent=!0},9935:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Flow"))}s.isMDXComponent=!0},8323:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Type checkers"))}s.isMDXComponent=!0},4990:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Apis"))}s.isMDXComponent=!0},5089:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Performance"))}s.isMDXComponent=!0},2768:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Progressive web apps"))}s.isMDXComponent=!0},9086:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Next js"))}s.isMDXComponent=!0},4930:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"After js"))}s.isMDXComponent=!0},8747:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React js"))}s.isMDXComponent=!0},7815:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Universal"))}s.isMDXComponent=!0},6394:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Angular"))}s.isMDXComponent=!0},2573:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nuxt js"))}s.isMDXComponent=!0},5137:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vue js"))}s.isMDXComponent=!0},1905:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Server side rendering"))}s.isMDXComponent=!0},410:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Apollo"))}s.isMDXComponent=!0},485:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Relay modern"))}s.isMDXComponent=!0},4133:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Graphql"))}s.isMDXComponent=!0},7935:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Next js"))}s.isMDXComponent=!0},1291:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gatsbyjs"))}s.isMDXComponent=!0},855:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nuxt js"))}s.isMDXComponent=!0},2374:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Vuepress"))}s.isMDXComponent=!0},1898:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Jekyll"))}s.isMDXComponent=!0},355:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Hugo"))}s.isMDXComponent=!0},2578:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Gridsome"))}s.isMDXComponent=!0},476:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Eleventy"))}s.isMDXComponent=!0},5470:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Static site generators"))}s.isMDXComponent=!0},2919:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"React native"))}s.isMDXComponent=!0},5760:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Nativescript"))}s.isMDXComponent=!0},9268:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return u}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},t))}},s=a("ResourceGroupTitle"),i=a("BadgeLink"),l={};function u(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Flutter"),(0,r.kt)("p",null,"Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android)."),(0,r.kt)("p",null,"Flutter consists of two important parts:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android)."),(0,r.kt)("li",{parentName:"ul"},"A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.\nTo develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.")),(0,r.kt)("p",null,"Dart focuses on front-end development, and you can use it to create mobile and web applications."),(0,r.kt)("p",null,"If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript."),(0,r.kt)(s,{mdxType:"ResourceGroupTitle"},"Free Content"),(0,r.kt)(i,{colorScheme:"blue",badgeText:"Official Website",href:"https://flutter.dev",mdxType:"BadgeLink"},"Flutter Website"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3adda.com/flutter-tutorial",mdxType:"BadgeLink"},"Flutter Tutorial"),(0,r.kt)(i,{colorScheme:"green",badgeText:"Course",href:"https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ",mdxType:"BadgeLink"},"Flutter Tutorial for Beginners"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.w3adda.com/flutter-tutorial",mdxType:"BadgeLink"},"Flutter Tutorial"),(0,r.kt)(i,{colorScheme:"yellow",badgeText:"Read",href:"https://www.tutorialspoint.com/dart_programming/index.htm",mdxType:"BadgeLink"},"Learn Dart Programming"))}u.isMDXComponent=!0},7280:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Ionic"))}s.isMDXComponent=!0},388:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Mobile applications"))}s.isMDXComponent=!0},7137:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Electron"))}s.isMDXComponent=!0},373:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Carlo"))}s.isMDXComponent=!0},5588:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Proton native"))}s.isMDXComponent=!0},8773:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Desktop applications"))}s.isMDXComponent=!0},9429:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null,"Web assembly"))}s.isMDXComponent=!0},7086:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",null))}s.isMDXComponent=!0},7083:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return l}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a,s=(a="BadgeLink",function(e){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.kt)("div",Object.assign({},e))}),i={};function l(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},i,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{className:"alert alert-primary",style:{marginBottom:"-10px"}},"This page is incomplete and is being worked upon. Please check back later or ",(0,r.kt)("a",{href:"/signup"},"subscribe")," / ",(0,r.kt)("a",{href:"https://twitter.com/kamranahmedse"},"follow me on twitter")," to get notified. Also, feel free to contribute by suggesting the resources in ",(0,r.kt)("a",{href:"https://github.com/kamranahmedse/developer-roadmap"},"the issues"),"."),(0,r.kt)("h1",null,"Become a Frontend Developer"),(0,r.kt)("p",null,"Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. "),(0,r.kt)("h2",null,"Internet and how it works?"),(0,r.kt)("p",null,"Get the basic understanding of internet, browsers, networks and other relevant knowledge. "),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"/guides/what-is-internet",mdxType:"BadgeLink"},"What is Internet?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=7_LPdttKXPc",mdxType:"BadgeLink"},"How the internet works in 5 minutes")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://kamranahmed.info/blog/2016/08/13/http-in-depth/",mdxType:"BadgeLink"},"What is HTTP and how it evolved?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://blog.cloudflare.com/http3-the-past-present-and-future/",mdxType:"BadgeLink"},"HTTP/3: the past, the present, and the future")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://kinsta.com/blog/http3/",mdxType:"BadgeLink"},"What Is HTTP/3 \u2013 Lowdown on the Fast New UDP-Based Protocol")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/",mdxType:"BadgeLink"},"How Browsers Work: Behind the scenes of modern web browsers")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Rck3BALhI5c",mdxType:"BadgeLink"},"DNS as Fast As Possible")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://howdns.works/",mdxType:"BadgeLink"},"How DNS works?")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"/guides/dns-in-one-picture",mdxType:"BadgeLink"},"DNS in One Picture"))),(0,r.kt)("h2",null,"Learn HTML"),(0,r.kt)("p",null,"HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. "),(0,r.kt)("p",null,"Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=UB1O30fR-EE",mdxType:"BadgeLink"},"HTML Crash Course For Absolute Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/html/default.asp",mdxType:"BadgeLink"},"W3Schools \u2013 HTML Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=pQN-pnXPaVg",mdxType:"BadgeLink"},"HTML Full Course - Build a Website Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://hacks.mozilla.org/2016/08/a-few-html-tips/",mdxType:"BadgeLink"},"A few HTML tips")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z",mdxType:"BadgeLink"},"Six tips to set up a better HTML document")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/html/html5_semantic_elements.asp",mdxType:"BadgeLink"},"HTML Semantic Elements")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element",mdxType:"BadgeLink"},"HTML elements reference"))),(0,r.kt)("h2",null,"Style your pages with CSS"),(0,r.kt)("p",null,"With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/css/",mdxType:"BadgeLink"},"W3Schools \u2013 CSS Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=yfoY53QXEnI",mdxType:"BadgeLink"},"CSS Crash Course For Absolute Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=Wm6CUkswsNw",mdxType:"BadgeLink"},"Build An HTML5 Website With A Responsive Layout")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/JJSoEo8JSnc?t=46",mdxType:"BadgeLink"},"Flexbox CSS In 20 Minutes"))),(0,r.kt)("h2",null,"Basics of JavaScript"),(0,r.kt)("p",null,"JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://www.w3schools.com/js/",mdxType:"BadgeLink"},"W3Schools \u2013 JavaScript Tutorial")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/hdI2bqOjy3c?t=2",mdxType:"BadgeLink"},"JavaScript Crash Course for Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/P7t13SGytRk?t=22",mdxType:"BadgeLink"},"Build a Netflix Landing Page Clone with HTML, CSS & JS"))),(0,r.kt)("h2",null,"Version Control Systems and Git"),(0,r.kt)("p",null,"Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code \u2013 if you\u2019ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue."),(0,r.kt)("p",null,"In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS. "),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=zbKdDsNNOhg",mdxType:"BadgeLink"},"Version Control System Introduction")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=SWYqp7iY_Tc",mdxType:"BadgeLink"},"Git & GitHub Crash Course For Beginners")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://youtu.be/Y9XZQO1n_7c?t=21",mdxType:"BadgeLink"},"Learn Git in 20 Minutes"))),(0,r.kt)("p",null,"Now that you know what git is go ahead and create an account on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com"}),"GitHub")," and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community."),(0,r.kt)("h2",null,"Modern JavaScript"),(0,r.kt)("p",null,'In this section you will learn how to use package managers and get started with the "modern JavaScript".'),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Read",href:"https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70",mdxType:"BadgeLink"},"Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=8Rmj5UY5mJk",mdxType:"BadgeLink"},"What is NPM and how to use it")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)(s,{badgeText:"Watch",href:"https://www.youtube.com/watch?v=jHDhaSSKmB0",mdxType:"BadgeLink"},"NPM Crash Course"))),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}l.isMDXComponent=!0},8093:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},5332:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},4558:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"roadmap on the Frontend Development")," that focuses on the frontend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("img",Object.assign({parentName:"p"},{src:"/roadmaps/react.png",alt:null}))),(0,r.kt)("p",null,"Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the picture if suitable."))}s.isMDXComponent=!0},63:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},595:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Angular ecosystem and to help guide your learning if you are confused. We have another ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"roadmap on the Frontend Development")," that focuses on the frontend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("img",Object.assign({parentName:"p"},{src:"/roadmaps/angular.png",alt:null}))),(0,r.kt)("p",null,"Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the picture if suitable."))}s.isMDXComponent=!0},7489:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},5191:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/issues/new"}),"we would love to hear your opinions")," and incorporate them in the roadmap if suitable."),(0,r.kt)("p",null,"There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://flutter.dev/"}),"flutter"),", ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://reactnative.dev/"}),"react-native"),", or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://www.nativescript.org/"}),"NativeScript")," are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://reactnative.dev"}),"react-native")," and I would recommend you to checkout the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/frontend"}),"Frontend Developer Roadmap"),"."),(0,r.kt)("h2",null,"Complete Roadmap"),(0,r.kt)("p",null,"Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/roadmap.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/roadmap.svg",alt:null})))),(0,r.kt)("h2",null,"Broken Down Version"),(0,r.kt)("p",null,"Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above."),(0,r.kt)("h2",null,"Pick a Language"),(0,r.kt)("p",null,"For the languages, you can develop android apps either by using Kotlin or Java."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/pick-language.svg"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/pick-language.svg",alt:null})))),(0,r.kt)("p",null,"Although, you can use both ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Kotlin_(programming_language)"}),"Kotlin")," and ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Java_(programming_language)"}),"Java")," to develop native android apps, ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html"}),"Google announced in 2019")," to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice."),(0,r.kt)("h2",null,"The Fundamentals"),(0,r.kt)("p",null,"Install the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://developer.android.com/studio"}),"Android Studio")," and learn the basics of Kotlin to get started. "),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/the-fundamentals.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/the-fundamentals.png",alt:null})))),(0,r.kt)("p",null,"We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin"}),"Learn the basics of Kotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/reference/basic-syntax.html"}),"Kotlin Docs")," and ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/tutorials/"}),"Official Kotlin Tutorials")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.studytonight.com/data-structures/introduction-to-data-structures"}),"Data Structures and Algorithms"),". Also ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.tutorialspoint.com/data_structures_algorithms/index.htm"}),"check this"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://kotlinlang.org/docs/reference/collections-overview.html"}),"Kotlin DataStructures")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/bmaslakov/kotlin-algorithm-club"}),"Algorithms and DataStructures in Kotlin"))),(0,r.kt)("h2",null,"Version Control Systems"),(0,r.kt)("p",null,"Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://git-scm.com/"}),"Git")," is the most common one these days."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/git-github.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/git-github.png",alt:null})))),(0,r.kt)("p",null,"Here are some of the resources to get you started. Feel free to google and find something else that you find easier."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.udacity.com/course/version-control-with-git--ud123"}),"Udacity \u2014 Version Control with Git")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://guides.github.com/activities/hello-world/"}),"GitHub Hello World"))),(0,r.kt)("h2",null,"Building an Application"),(0,r.kt)("p",null,"Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. "),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/android/build-an-application.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/android/build-an-application.png",alt:null})))),(0,r.kt)("p",null,"To learn more about the items listed in the image above, here are the links to the relevant docs"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/activities/intro-activities"}),"Using Activities and Activity Life Cycles")),(0,r.kt)("li",{parentName:"ul"},"Building Flexible Interfaces using ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/fragments"}),"Fragments")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/studio/debug"}),"Debugging using Android Studio Debugger")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/work/managed-configurations"}),"Handling App Configurations")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/components/intents-filters"}),"Using Intents and Intent Filters")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://guides.codepath.com/android/Using-Context"}),"Understand Context")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/training/multiple-threads"}),"Learn about Multithreading")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com/6901838-data-privacy-for-android"}),"Data Privacy")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android"}),"Securing Network Data")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/training/dependency-injection"}),"Dependency Injection")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/topics/providers/content-providers"}),"Content Providers")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/bumptech/glide"}),"Glide"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://square.github.io/retrofit/"}),"Retrofit"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://firebase.google.com/docs/crashlytics/get-started"}),"Crashlytics"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/google/gson"}),"GSON")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/room"}),"Room"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide/navigation/navigation-getting-started"}),"Navigation"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/workmanager"}),"Work Manager"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/architecture/livedata"}),"LiveData"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/libraries/data-binding"}),"Data Binding")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/ReactiveX/RxJava"}),"RxJava"),", ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://github.com/ReactiveX/RxKotlin"}),"RxKotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/topic/performance/memory-overview"}),"Memory Management Overview")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814"}),"Diving deeper into context-oriented programming in Kotlin")," ")),(0,r.kt)("p",null,"I would highly recommend watching ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012"}),"this free course")," from google on Developing Android Apps with Kotlin. Also, here are some of the resources to learn more about the topics listed above."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012"}),"Developing Android Apps with Kotlin")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://developer.android.com/guide"}),"Android Developer Guides")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.raywenderlich.com"}),"Raywenderlich"))),(0,r.kt)("h2",null,"Wrap Up"),(0,r.kt)("p",null,"That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!"),(0,r.kt)("p",null,"For any suggestions, improvements and feedback, feel free to ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"submit an issue")," or reach out to me on twitter ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse"),"."),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}s.isMDXComponent=!0},7890:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},9556:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Python ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/python.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/python.png",alt:null})))))}s.isMDXComponent=!0},8481:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},2388:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Go ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/golang.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/golang.png",alt:null})))))}s.isMDXComponent=!0},9101:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},7913:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the Java ecosystem and to help guide your learning if you are confused. We have another roadmap on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/backend"}),"Backend Development")," that focuses on the backend development if you are interested in that."),(0,r.kt)("p",null,"Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things."),(0,r.kt)("p",null,(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps/java.png"}),(0,r.kt)("img",Object.assign({parentName:"a"},{src:"/roadmaps/java.png",alt:null})))))}s.isMDXComponent=!0},9673:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},1464:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The intent of this guide is to give you an idea about the DBA landscape and to help guide your learning if you are confused. The roadmap is highly opinionated \u2014 neither, knowing everything listed in the roadmap, nor the order of items given in the roadmap is required to be followed in order to be a DBA."),(0,r.kt)("h2",null,"Learn basic RDBMS terms and concepts"),(0,r.kt)("p",null,"Get basic understanding of Postgres key terms and basic RDBMS concepts."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Object model"),": data types, columns, rows, tables, schemas, databases, queries."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Relational model"),": domains, attributes, tuples, relations, constraints, NULL."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Databases high-level concepts"),": ACID, MVCC, transactions, write-ahead log, query processing."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/13/glossary.html"}),"Postgres Glossary")," "),(0,r.kt)("li",{parentName:"ul"},"SQL and Relational Theory - Christopher J. Date, 2009"),(0,r.kt)("li",{parentName:"ul"},"Database Design and Relational Theory - Christopher J. Date, 2012")))),(0,r.kt)("h2",null,"Learn how to install and run PostgreSQL"),(0,r.kt)("p",null,"Get practical skills of how to set up and run Postgres to get a working environment for further learning."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Using package managers (APT, YUM, etc.)"),(0,r.kt)("li",{parentName:"ul"},"Using ",(0,r.kt)("inlineCode",{parentName:"li"},"docker"),"."),(0,r.kt)("li",{parentName:"ul"},"Managing Postgres service using ",(0,r.kt)("inlineCode",{parentName:"li"},"systemd")," (start, stop, restart, reload)."),(0,r.kt)("li",{parentName:"ul"},"Managing Postgres service using ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_ctl"),", or OS-specific tools (like ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_ctlcluster"),")."),(0,r.kt)("li",{parentName:"ul"},"Connect to Postgres using ",(0,r.kt)("inlineCode",{parentName:"li"},"psql"),"."),(0,r.kt)("li",{parentName:"ul"},"Deploy database service in cloud environment (AWS, GCE, Azure, Heroku, DigitalOcean, etc...)."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/download/"}),"Official download and install instructions")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://hub.docker.com/_/postgres"}),"Official Docker images")," ")))),(0,r.kt)("h2",null,"Learn SQL concepts"),(0,r.kt)("p",null,"Get practical skills of how to create and manipulate database objects and how to execute queries using ",(0,r.kt)("inlineCode",{parentName:"p"},"psql")," client."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Understand basic data types."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"DML queries"),": querying data, modifying data, filtering data, joining tables.",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced topics"),": transactions, CTE, subqueries, lateral join, grouping, set operations."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"DDL queries"),": managing tables and schemas (create, alter, drop)."),(0,r.kt)("li",{parentName:"ul"},"Import and export data using ",(0,r.kt)("inlineCode",{parentName:"li"},"COPY"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.db-fiddle.com/"}),"DB Fiddle")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresqltutorial.com/"}),"PostgreSQL Tutorial")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/tutorial-sql.html"}),"PostgreSQL SQL Getting Started")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql.html"}),"The SQL Language"))))),(0,r.kt)("h2",null,"Learn how to configure Postgres"),(0,r.kt)("p",null,"Get understanding of the main aspects of how Postgres could be configured. Deep understanding of Postgres internals is not yet necessary here."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"postgresql.conf:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Resources usage"),(0,r.kt)("li",{parentName:"ul"},"Write-ahead Log"),(0,r.kt)("li",{parentName:"ul"},"Checkpoints and Background Writer"),(0,r.kt)("li",{parentName:"ul"},"Cost-based vacuum and auto-vacuum"),(0,r.kt)("li",{parentName:"ul"},"Replication"),(0,r.kt)("li",{parentName:"ul"},"Query planner"),(0,r.kt)("li",{parentName:"ul"},"Reporting, logging and statistics"),(0,r.kt)("li",{parentName:"ul"},"Adding extra extensions"),(0,r.kt)("li",{parentName:"ul"},"...keep exploring other configuration options"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://postgresqlco.nf/"}),"Postgresqlco.nf")," ")))),(0,r.kt)("h2",null,"Learn Postgres security concepts"),(0,r.kt)("p",null,"Get understanding about basic security concepts and common ways of how to deploy secure configurations."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Authentication models, roles, pg_hba.conf, SSL settings."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Objects privileges"),": grant/revoke, default privileges."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced topics")," - row-level security, selinux."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/client-authentication.html"}),"Client authentication")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/user-manag.html"}),"Roles and users managements"))))),(0,r.kt)("h2",null,"Develop infrastructure DBA skills"),(0,r.kt)("p",null,"Get practical skills of how to deploy, extend, maintain and support Postgres installations and 3rd-party Postgres ecosystem software."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Replication"),": streaming replication, logical replication"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Backup/recovery tools"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Built-in: ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_dump"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_dumpall"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_restore"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_basebackup")),(0,r.kt)("li",{parentName:"ul"},"3rd-party: ",(0,r.kt)("inlineCode",{parentName:"li"},"barman"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pgbackrest"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_probackup"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"WAL-G")),(0,r.kt)("li",{parentName:"ul"},"Backup validation procedures"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Upgrading procedures"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Minor and major upgrades using ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_upgrade")),(0,r.kt)("li",{parentName:"ul"},"Upgrades using logical replication"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Connection pooling"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Pgbouncer")),(0,r.kt)("li",{parentName:"ul"},"Alternatives: ",(0,r.kt)("inlineCode",{parentName:"li"},"Pgpool-II"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Odyssey"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Pgagroal")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Infrastructure monitoring"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Prometheus"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Zabbix"),", other favourite monitoring solution"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"High availability and cluster management tools"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Patroni")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Alternatives"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Repmgr"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Stolon"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"pg_auto_failover"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"PAF")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Applications Load Balancing and Service Discovery"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Haproxy"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Keepalived"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Consul"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Etcd")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Deploy Postgres on ",(0,r.kt)("inlineCode",{parentName:"strong"},"Kubernetes")),": Simple ",(0,r.kt)("inlineCode",{parentName:"li"},"StatefulSet")," setup, ",(0,r.kt)("inlineCode",{parentName:"li"},"HELM"),", operators"),(0,r.kt)("li",{parentName:"ul"},"Resource usage and provisioning, capacity planning")),(0,r.kt)("h2",null,"Learn how to automate routines"),(0,r.kt)("p",null,"Get practical skills, learn automation tools and automate existing routine tasks."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Automation using shell scripts or any other favourite language (",(0,r.kt)("inlineCode",{parentName:"li"},"Bash"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Python"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Perl"),", etc)"),(0,r.kt)("li",{parentName:"ul"},"Configuration management: ",(0,r.kt)("inlineCode",{parentName:"li"},"Ansible"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Salt"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Chef"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Puppet"))),(0,r.kt)("h2",null,"Develop application DBA skills"),(0,r.kt)("p",null,"Learn theory and get practical skills of how applications should work with Postgres"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Migrations"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"practical patterns and antipatterns"),(0,r.kt)("li",{parentName:"ul"},"tools: ",(0,r.kt)("inlineCode",{parentName:"li"},"liquibase"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"sqitch"),", language-specific tools"))),(0,r.kt)("li",{parentName:"ul"},"Data import/export, bulk loading and processing"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Queues"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"practical patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Skytools PGQ")))),(0,r.kt)("li",{parentName:"ul"},"Data partitioning and sharding patterns."),(0,r.kt)("li",{parentName:"ul"},"Database normalization and normal forms."),(0,r.kt)("li",{parentName:"ul"},"Books:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"The Art of PostgreSQL - Dimitri Fontaine, 2020")))),(0,r.kt)("h2",null,"Learn Postgres advanced topics"),(0,r.kt)("p",null,"Here is important to continuously extend and develop existing knowledge about Postgres."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Low level internals"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Processes and memory architecture"),(0,r.kt)("li",{parentName:"ul"},"Vacuum processing"),(0,r.kt)("li",{parentName:"ul"},"Buffer management"),(0,r.kt)("li",{parentName:"ul"},"Lock management"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/storage.html"}),"Physical storage and file layout")," "),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/catalogs.html"}),"System catalog")," "))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Fine-grained tuning"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Per-user, per-database settings"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-STORAGE-PARAMETERS"}),"Storage parameters")," "),(0,r.kt)("li",{parentName:"ul"},"Workload-dependant tuning: OLTP, OLAP, HTAP"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Advanced SQL topics"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"PL/pgSQL, procedures and functions, triggers"),(0,r.kt)("li",{parentName:"ul"},"Aggregate and window functions"),(0,r.kt)("li",{parentName:"ul"},"Recursive CTE"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.interdb.jp/pg/index.html"}),"The Internals of PostgreSQL")," for database administrators and system developers"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/plpgsql.html"}),"PL/pgSQL Guide"))))),(0,r.kt)("h2",null,"Learn Postgres troubleshooting techniques"),(0,r.kt)("p",null,"Get basic understanding about troubleshooting tools and get practical skills of how to detect and resolve problems."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Operating system tools"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"top")," (",(0,r.kt)("inlineCode",{parentName:"li"},"htop"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"atop"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"sysstat")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"iotop")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres system views"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pg_stat_activity")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pg_stat_statements")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres tools"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pgcenter")," - ",(0,r.kt)("em",{parentName:"li"},"personal recommendation")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Query analyzing"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/docs/current/sql-explain.html"}),"EXPLAIN")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://explain.depesz.com/"}),"Depesz")," online EXPLAIN visualization tool"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://tatiyants.com/pev/#/plans"}),"PEV")," online EXPLAIN visualization tool"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://explain.tensor.ru/"}),"Tensor")," online EXPLAIN visualization tool, RU language only"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Log analyzing"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pgBadger")),(0,r.kt)("li",{parentName:"ul"},"Ad-hoc analyzing using ",(0,r.kt)("inlineCode",{parentName:"li"},"grep"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"awk"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"sed"),", etc."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"External tracing/profiling tools"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"gdb"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"strace"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"perf-tools"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"ebpf"),", core dumps"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Troubleshooting methods"),": USE, RED, Golden signals"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.brendangregg.com/linuxperf.html"}),"Linux Performance")," by Brendan Gregg"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"http://www.brendangregg.com/usemethod.html"}),"USE Method"))))),(0,r.kt)("h2",null,"Learn SQL optimization technics"),(0,r.kt)("p",null,"Get understanding and practical skills of how to optimize SQL queries."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Indexes, and their use cases"),": B-tree, Hash, GiST, SP-GiST, GIN, BRIN"),(0,r.kt)("li",{parentName:"ul"},"SQL queries patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},"SQL schema design patterns and anti-patterns"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Links"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://use-the-index-luke.com/"}),"Use the Index, Luke")," - a Guide to Database Performance for Developers"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Books"),":",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"SQL Antipatterns: Avoiding the Pitfalls of Database Programming - Bill Karwin, 2010 ")))),(0,r.kt)("h2",null,"Develop architect skills"),(0,r.kt)("p",null,"Get deeper understanding of Postgres use cases and where Postgres is suitable and where is not."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Postgres forks and extensions"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Greenplum"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Timescaledb"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Citus"),", ",(0,r.kt)("inlineCode",{parentName:"li"},"Postgres-XL"),", etc."),(0,r.kt)("li",{parentName:"ul"},"RDBMS in general, benefits and limitations"),(0,r.kt)("li",{parentName:"ul"},"Differences between Postgres and other RDBMS and NoSQL databases")),(0,r.kt)("h2",null,"Develop Postgres hacker skills"),(0,r.kt)("p",null,"Get involved to Postgres community and contribute to Postgres; be a useful member of Postgres, and the open source community; use personal experience to help other people."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Daily reading and answering in ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://www.postgresql.org/list/"}),"mailing lists"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"pgsql-general"),(0,r.kt)("li",{parentName:"ul"},"pgsql-admin"),(0,r.kt)("li",{parentName:"ul"},"pgsql-performance"),(0,r.kt)("li",{parentName:"ul"},"pgsql-hackers"),(0,r.kt)("li",{parentName:"ul"},"pgsql-bugs"))),(0,r.kt)("li",{parentName:"ul"},"Reviewing patches"),(0,r.kt)("li",{parentName:"ul"},"Writing patches, attending in ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"https://commitfest.postgresql.org/"}),"Commitfests"))),(0,r.kt)("br",null),(0,r.kt)("br",null),(0,r.kt)("br",null))}s.isMDXComponent=!0},1545:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8188:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}s.isMDXComponent=!0},1048:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},4894:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}s.isMDXComponent=!0},9598:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return s}});n(7294);var r=n(4137);function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function s(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"We are still preparing the resources"),". Please check back later or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,r.kt)("p",null,"While we prepare the list, follow this simple advice to learn anything"),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Just ",(0,r.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")))}s.isMDXComponent=!0},8712:function(e){"use strict";e.exports=JSON.parse('[{"username":"kamranahmedse","name":"Kamran Ahmed","twitter":"kamranahmedse","picture":"/authors/kamranahmedse.jpeg","bio":"Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones."},{"username":"jesse","name":"Jesse Li","twitter":"__jesse_li","picture":"/authors/jesse.png","bio":"Software engineer."},{"username":"dmytrobol","name":"Dmytro Bolkachov","twitter":"dmytrobol","picture":"/authors/dmytrobol.png","bio":"JavaScript Lad, Movie buff and coder interested in everything web related"},{"username":"spekulatius","name":"Peter Thaleikis","twitter":"spekulatius1984","picture":"/authors/spekulatius.jpg","bio":"Developer building side-projects for fun, lover of the web and open source"},{"username":"ebrahimbharmal007","name":"Ebrahim Bharmal","twitter":"BharmalEbrahim","picture":"/authors/ebrahimbharmal007.png","bio":"Love building projects using tools completely new to me. Python forever. Senior at University of Texas at Arlington (2021)"},{"username":"lesovsky","name":"Alexey Lesovsky","bio":"Linux system administrator and PostgreSQL DBA at DataEgret.","picture":"/authors/lesovsky.jpeg"}]')},9552:function(e){"use strict";e.exports=JSON.parse('[{"id":"avoid-render-blocking-javascript-with-async-defer","title":"Async and Defer Script Loading","description":"Learn how to avoid render blocking JavaScript using async and defer scripts.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-09-10T19:59:14.191Z","createdAt":"2021-09-10T19:59:14.191Z"},{"id":"what-are-web-vitals","title":"What are Web Vitals?","description":"Learn what are the core web vitals and how to measure them.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-09-05T19:59:14.191Z","createdAt":"2021-09-05T19:59:14.191Z"},{"id":"what-is-sli-slo-sla","title":"SLIs, SLOs and SLAs","description":"Learn what are different indicators for performance identification of any service.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-08-31T19:59:14.191Z","createdAt":"2021-08-31T19:59:14.191Z"},{"id":"ci-cd","title":"What is CI and CD?","description":"Learn the basics of CI/CD and how to implement that with GitHub Actions.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-07-09T19:59:14.191Z","createdAt":"2021-07-09T19:59:14.191Z"},{"id":"sso","title":"SSO \u2014 Single Sign On","description":"Learn the basics of SAML and understand how does Single Sign On work.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-07-01T19:59:14.191Z","createdAt":"2021-07-01T19:59:14.191Z"},{"id":"oauth","title":"OAuth \u2014 Open Authorization","description":"Learn and understand what is OAuth and how it works","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-28T19:59:14.191Z","createdAt":"2021-06-28T19:59:14.191Z"},{"id":"jwt-authentication","title":"JWT Authentication","description":"Understand what is JWT authentication and how is it implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-20T19:59:14.191Z","createdAt":"2021-06-20T19:59:14.191Z"},{"id":"token-authentication","title":"Token Based Authentication","description":"Understand what is token based authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-06-02T20:59:14.191Z","createdAt":"2021-06-02T20:59:14.191Z"},{"id":"session-authentication","title":"Session Based Authentication","description":"Understand what is session based authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-26T20:59:14.191Z","createdAt":"2021-05-26T20:59:14.191Z"},{"id":"basic-authentication","title":"Basic Authentication","description":"Understand what is basic authentication and how it is implemented","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-19T20:59:14.191Z","createdAt":"2021-05-19T20:59:14.191Z"},{"id":"character-encodings","title":"Character Encodings","description":"Covers the basics of character encodings and explains ASCII vs Unicode","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-14T20:59:14.191Z","createdAt":"2021-05-14T20:59:14.191Z"},{"id":"unfamiliar-codebase","title":"Unfamiliar Codebase","description":"Tips on getting getting familiar with an unfamiliar codebase","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-05-04T20:59:14.191Z","createdAt":"2021-05-04T20:59:14.191Z"},{"id":"why-build-it-and-they-will-come-wont-work-anymore","title":"Build it and they will come?","description":"Why \u201cbuild it and they will come\u201d alone won\u2019t work anymore","isPro":false,"authorUsername":"spekulatius","updatedAt":"2021-05-04T12:59:14.191Z","createdAt":"2021-05-04T12:59:14.191Z"},{"id":"dhcp-in-one-picture","title":"DHCP in One Picture","description":"Here is what happens when a new device joins the network.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-28T15:48:21.191Z","createdAt":"2021-04-28T15:48:21.191Z"},{"id":"ssl-tls-https-ssh","title":"SSL vs TLS vs SSH","description":"Quick tidbit on the differences between SSL, TLS, HTTPS and SSH","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-22T15:48:21.191Z","createdAt":"2021-04-22T15:48:21.191Z"},{"id":"asymptotic-notation","title":"Asymptotic Notation","description":"Learn the basics of measuring the time and space complexity of algorithms","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-04-03T15:48:21.191Z","createdAt":"2021-04-03T15:48:21.191Z"},{"id":"big-o-notation","title":"Big-O Notation","description":"Easy to understand explanation of Big-O notation without any fancy terms","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-03-15T15:48:21.191Z","createdAt":"2021-03-15T15:48:21.191Z"},{"id":"random-numbers","title":"Random Numbers: Are they?","description":"Learn how they are generated and why they may not be truly random.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-03-14T15:48:21.191Z","createdAt":"2021-03-14T15:48:21.191Z"},{"id":"scaling-databases","title":"Scaling Databases","description":"Learn the ups and downs of different database scaling strategies","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2021-02-18T15:48:21.191Z","createdAt":"2021-02-18T15:48:21.191Z"},{"id":"what-is-internet","title":"How does the internet work?","description":"Learn the basics of internet and everything involved with this short video series","isPro":false,"authorUsername":"dmytrobol","updatedAt":"2021-02-29T15:48:21.191Z","createdAt":"2021-02-29T15:48:21.191Z"},{"id":"torrent-client","title":"Building a BitTorrent Client","description":"Learn everything you need to know about BitTorrent by writing a client in Go","isPro":false,"authorUsername":"jesse","updatedAt":"2021-01-17T15:48:21.191Z","createdAt":"2021-01-17T15:48:21.191Z","canonical":"https://blog.jse.li/posts/torrent/"},{"id":"levels-of-seniority","title":"Levels of Seniority","description":"How to Step Up as a Junior, Mid Level or a Senior Developer?","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2020-12-03T12:13:00.860Z","createdAt":"2020-12-03T12:13:00.860Z"},{"id":"design-patterns-for-humans","title":"Design Patterns for Humans","description":"A language agnostic, ultra-simplified explanation to design patterns","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2019-10-09T12:00:00.860Z","createdAt":"2019-01-23T17:00:00.860Z"},{"id":"journey-to-http2","title":"Journey to HTTP/2","description":"The evolution of HTTP. How it all started and where we stand today","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2018-12-04T12:00:00.860Z","updatedAt":"2018-12-04T12:00:00.860Z","isDraft":true},{"id":"dns-in-one-picture","title":"DNS in One Picture","description":"Quick illustrative guide on how a website is found on the internet.","isPro":false,"authorUsername":"kamranahmedse","updatedAt":"2018-12-04T12:00:00.860Z","createdAt":"2018-12-04T17:00:00.860Z"},{"id":"http-caching","title":"HTTP Caching","description":"Everything you need to know about web caching","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2018-11-29T17:00:00.860Z","updatedAt":"2018-11-29T17:00:00.860Z"},{"id":"history-of-javascript","title":"Brief History of JavaScript","description":"How JavaScript was introduced and evolved over the years","isPro":false,"authorUsername":"kamranahmedse","createdAt":"2017-10-28T17:00:00.860Z","updatedAt":"2017-10-28T17:00:00.860Z"},{"id":"proxy-servers","title":"Proxy Servers","description":"How do proxy servers work and what are forward and reverse proxies?","isPro":false,"authorUsername":"ebrahimbharmal007","createdAt":"2017-10-24T17:00:00.860Z","updatedAt":"2017-10-24T17:00:00.860Z"}]')},1662:function(e){"use strict";e.exports=JSON.parse('[{"seo":{"title":"Learn to become a modern frontend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a frontend developer","frontend developer","frontend engineer","frontend skills","frontend development","javascript developer","frontend development skills","frontend development skills test","frontend roadmap","frontend engineer roadmap","frontend developer roadmap","become a frontend developer","frontend developer career path","javascript developer","modern javascript developer","node developer","skills for frontend development","learn frontend development","what is frontend development","frontend developer quiz","frontend developer interview questions"]},"title":"Frontend Developer","description":"Step by step guide to becoming a modern frontend developer in 2021","featuredTitle":"Frontend","featuredDescription":"Step by step guide to becoming a frontend developer in 2021","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"featured":true,"imageUrl":"/roadmaps/frontend.png","jsonUrl":"/project/frontend.json","resourcesPath":"/roadmaps/100-frontend/resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/frontend-roadmap","contentPathsFilePath":"/roadmaps/100-frontend/content-paths.json","id":"frontend","metaPath":"/roadmaps/100-frontend/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a modern backend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a backend developer","backend roadmap","backend developer","backend engineer","backend skills","backend development","javascript developer","backend development skills","backend development skills test","backend engineer roadmap","backend developer roadmap","become a backend developer","backend developer career path","javascript developer","modern javascript developer","node developer","skills for backend development","learn backend development","what is backend development","backend developer quiz","backend developer interview questions"]},"title":"Backend Developer","description":"Step by step guide to becoming a modern backend developer in 2021","featuredTitle":"Backend","featuredDescription":"Step by step guide to becoming a backend developer in 2021","featured":true,"imageUrl":"/roadmaps/backend.png","jsonUrl":"/project/frontend.json","resourcesPath":"/roadmaps/101-backend/resources.md","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/backend-roadmap","id":"backend","metaPath":"/roadmaps/101-backend/meta.json","isUpcoming":false},{"seo":{"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a devops enginer","devops roadmap","sre roadmap","site reliability engineer roadmap","operations roles","become devops","devops skills","modern devops skills","devops skills test","skills for devops","learn devops","what is devops","what is sre","devops quiz","devops interview questions"]},"title":"DevOps Roadmap","description":"Step by step guide for DevOps, SRE or any other Operations Role in 2021","featuredTitle":"DevOps","featuredDescription":"Step by step guide for DevOps or operations role in 2021","featured":true,"imageUrl":"/roadmaps/devops.png","jsonUrl":"/project/devops.json","resourcesPath":"/roadmaps/102-devops/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/devops-roadmap","id":"devops","metaPath":"/roadmaps/102-devops/meta.json","isUpcoming":false},{"seo":{"title":"React Developer Roadmap: Learn to become a React developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a react developer","react developer roadmap","react roadmap","become react developer","react developer skills","react skills test","skills for react development","learn react development","what is react","react quiz","react interview questions"]},"title":"React Developer","description":"Everything that is there to learn about React and the ecosystem in 2021.","featuredTitle":"React","featuredDescription":"Step by step guide to become a React Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"landingPath":"/roadmaps/103-react/landscape.md","resourcesPath":"/roadmaps/103-react/resources.md","jsonUrl":"/project/react.json","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/react-roadmap","id":"react","metaPath":"/roadmaps/103-react/meta.json","isUpcoming":false},{"seo":{"title":"Angular Developer Roadmap: Learn to become a Angular developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a angular developer","angular developer roadmap","angular roadmap","become angular developer","angular developer skills","angular skills test","skills for angular development","learn angular development","what is angular","angular quiz","angular interview questions"]},"title":"Angular Developer","description":"Everything that is there to learn about Angular and the ecosystem in 2021.","featuredTitle":"Angular","featuredDescription":"Step by step guide to become a Angular Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"jsonUrl":"/project/angular.json","landingPath":"/roadmaps/104-angular/landscape.md","resourcesPath":"/roadmaps/104-angular/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/angular-roadmap","id":"angular","metaPath":"/roadmaps/104-angular/meta.json","isUpcoming":false},{"seo":{"title":"Android Developer Roadmap: Learn to become an Android developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an android developer","android developer roadmap","android roadmap","become android developer","android developer skills","android skills test","skills for android development","learn android development","what is android","android quiz","android interview questions"]},"title":"Android Developer","description":"Step by step guide to becoming an Android developer in 2021","featuredTitle":"Android","featuredDescription":"Step by step guide to becoming an Android Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/android.json","landingPath":"/roadmaps/105-android/landscape.md","resourcesPath":"/roadmaps/105-android/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"android","metaPath":"/roadmaps/105-android/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a modern Python developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an python developer","python developer roadmap","python roadmap","become python developer","python developer skills","python skills test","skills for python development","learn python development","what is python","python quiz","python interview questions"]},"title":"Python Developer","description":"Step by step guide to becoming a Python developer in 2021","featuredTitle":"Python","featuredDescription":"Step by step guide to becoming a Python Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/python.json","resourcesPath":"/roadmaps/106-python/resources.md","landingPath":"/roadmaps/106-python/landscape.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/python-roadmap","versions":["latest"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"python","metaPath":"/roadmaps/106-python/meta.json","isUpcoming":false},{"seo":{"title":"Learn to become a Go developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a golang developer","guide to becoming a go developer","golang developer","go developer","guide to golang","guide to go","golang roadmap","go roadmap","golang skills","go skills","golang skills test","go skills test","skills for golang","skills for go","cloud development","what is golang","what is go","golang quiz","go quiz","golang interview questions","go interview questions"]},"title":"Go Developer","description":"Step by step guide to becoming a Go developer in 2021","featuredTitle":"Go","featuredDescription":"Step by step guide to becoming a Go developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/golang.json","landingPath":"/roadmaps/107-golang/landscape.md","resourcesPath":"/roadmaps/107-golang/resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/go-roadmap","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"golang","metaPath":"/roadmaps/107-golang/meta.json"},{"seo":{"title":"Learn to become a modern Java developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a java developer","java developer","java engineer","java skills","guide to java","java roadmap","java skills","java skills test","skills for java","cloud development","what is java","java quiz","java interview questions","java engineer roadmap","java developer roadmap","become a java developer","java developer career path","java developer","modern java developer"]},"title":"Java Developer","description":"Step by step guide to becoming a Java developer in 2021","featuredTitle":"Java","featuredDescription":"Step by step guide to becoming a Java Developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/java.json","landingPath":"/roadmaps/108-java/landscape.md","resourcesPath":"/roadmaps/108-java/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/java-roadmap","id":"java","metaPath":"/roadmaps/108-java/meta.json"},{"seo":{"title":"DBA Roadmap: Learn to become a database administrator with PostgreSQL","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a database administrator","guide to becoming a DBA","dba roadmap","db administrator roadmap","database administrator roadmap","postgresql roadmap","dba skills","db administrator skills","become dba","postgresql skills","modern dba skills","dba skills test","skills for dba","skills for database administrator","learn dba","what is dba","database administrator quiz","dba interview questions"]},"title":"PostgreSQL DBA","description":"Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021","featuredTitle":"DBA","featuredDescription":"Step by step guide to become a PostgreSQL DBA in 2021","landingPath":"/roadmaps/109-postgresql-dba/landscape.md","resourcesPath":"/roadmaps/109-postgresql-dba/resources.md","author":{"name":"Alexey Lesovsky","url":"https://github.com/lesovsky"},"isCommunity":false,"isTextHeavy":true,"featured":true,"detailed":false,"versions":[],"id":"postgresql-dba","metaPath":"/roadmaps/109-postgresql-dba/meta.json","isUpcoming":false},{"seo":{"title":"AWS Roadmap: Learn to use AWS","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to aws","aws roadmap","aws skills","aws skills test","skills for aws","cloud development","what is aws","aws quiz","aws interview questions"]},"title":"AWS","description":"Everything that is there to learn about AWS and the ecosystem in 2021.","featuredTitle":"AWS","featuredDescription":"Step by step guide to learn AWS in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":true,"featured":true,"landingPath":"/roadmaps/110-aws/landscape.md","resourcesPath":"/roadmaps/110-aws/resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"id":"aws","metaPath":"/roadmaps/110-aws/meta.json"},{"seo":{"title":"QA Roadmap: Learn to become a modern QA engineer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a QA engineer","QA engineer","QA skills","QA development skills","QA development skills test","QA engineer roadmap","become a QA engineer","QA engineer career path","skills for QA development","what is QA engineer","QA engineer quiz","QA engineer interview questions"]},"title":"QA Engineer","description":"Steps to follow in order to become a modern QA Engineer in 2021","featuredTitle":"QA","featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2021","isUpcoming":true,"featured":true,"landingPath":"/roadmaps/111-qa/landscape.md","resourcesPath":"/roadmaps/111-qa/resources.md","author":{"name":"Anas Fitiani","url":"https://github.com/anas-qa"},"id":"qa","metaPath":"/roadmaps/111-qa/meta.json"}]')},8359:function(e){"use strict";e.exports=JSON.parse('{"home":"/roadmaps/100-frontend/content/readme.md","internet":"/roadmaps/100-frontend/content/100-internet/readme.md","internet:how-does-the-internet-work":"/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md","internet:what-is-http":"/roadmaps/100-frontend/content/100-internet/101-what-is-http.md","internet:browsers-and-how-they-work":"/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md","internet:dns-and-how-it-works":"/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md","internet:what-is-domain-name":"/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md","internet:what-is-hosting":"/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md","html":"/roadmaps/100-frontend/content/101-html/readme.md","html:learn-the-basics":"/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md","html:writing-semantic-html":"/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md","html:forms-and-validations":"/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md","html:conventions-and-best-practices":"/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md","html:accessibility":"/roadmaps/100-frontend/content/101-html/104-accessibility.md","html:seo-basics":"/roadmaps/100-frontend/content/101-html/105-seo-basics.md","css":"/roadmaps/100-frontend/content/102-css/readme.md","css:learn-the-basics":"/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md","css:making-layouts":"/roadmaps/100-frontend/content/102-css/101-making-layouts.md","css:responsive-design-and-media-queries":"/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md","javascript":"/roadmaps/100-frontend/content/103-javascript/readme.md","javascript:syntax-and-basic-constructs":"/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md","javascript:learn-dom-manipulation":"/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md","javascript:learn-fetch-api-ajax-xhr":"/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md","javascript:es6-and-modular-javascript":"/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md","javascript:concepts":"/roadmaps/100-frontend/content/103-javascript/104-concepts.md","version-control-systems":"/roadmaps/100-frontend/content/104-version-control-systems/readme.md","version-control-systems:basic-usage-of-git":"/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md","repo-hosting-services":"/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md","repo-hosting-services:github":"/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md","repo-hosting-services:gitlab":"/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md","repo-hosting-services:bitbucket":"/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md","web-security-knowledge":"/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md","web-security-knowledge:cors":"/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md","web-security-knowledge:https":"/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md","web-security-knowledge:content-security-policy":"/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md","web-security-knowledge:owasp-security-risks":"/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md","package-managers":"/roadmaps/100-frontend/content/107-package-managers/readme.md","package-managers:npm":"/roadmaps/100-frontend/content/107-package-managers/100-npm.md","package-managers:yarn":"/roadmaps/100-frontend/content/107-package-managers/101-yarn.md","css-architecture":"/roadmaps/100-frontend/content/108-css-architecture/readme.md","css-architecture:bem":"/roadmaps/100-frontend/content/108-css-architecture/100-bem.md","css-architecture:oocss":"/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md","css-architecture:smacss":"/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md","css-preprocessors":"/roadmaps/100-frontend/content/109-css-preprocessors/readme.md","css-preprocessors:sass":"/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md","css-preprocessors:postcss":"/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md","css-preprocessors:less":"/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md","build-tools":"/roadmaps/100-frontend/content/110-build-tools/readme.md","build-tools:task-runners":"/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md","build-tools:task-runners:npm-scripts":"/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md","build-tools:linters-formatters":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md","build-tools:linters-formatters:prettier":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md","build-tools:linters-formatters:eslint":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md","build-tools:linters-formatters:standardjs":"/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md","build-tools:module-bundlers":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md","build-tools:module-bundlers:webpack":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md","build-tools:module-bundlers:esbuild":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md","build-tools:module-bundlers:rollup":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md","build-tools:module-bundlers:parcel":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md","build-tools:module-bundlers:vite":"/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md","pick-a-framework":"/roadmaps/100-frontend/content/111-pick-a-framework/readme.md","pick-a-framework:react-js":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md","pick-a-framework:react-js:recoil":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md","pick-a-framework:react-js:redux":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md","pick-a-framework:react-js:mobx":"/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md","pick-a-framework:angular":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md","pick-a-framework:angular:rxjs":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md","pick-a-framework:angular:ngrx":"/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md","pick-a-framework:vue-js":"/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md","pick-a-framework:vue-js:vuex":"/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md","modern-css":"/roadmaps/100-frontend/content/112-modern-css/readme.md","modern-css:styled-components":"/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md","modern-css:css-modules":"/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md","modern-css:styled-jsx":"/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md","modern-css:emotion":"/roadmaps/100-frontend/content/112-modern-css/103-emotion.md","web-components":"/roadmaps/100-frontend/content/113-web-components/readme.md","web-components:html-templates":"/roadmaps/100-frontend/content/113-web-components/100-html-templates.md","web-components:custom-elements":"/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md","web-components:shadow-dom":"/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md","css-frameworks":"/roadmaps/100-frontend/content/114-css-frameworks/readme.md","css-frameworks:js-first":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md","css-frameworks:js-first:chakra-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md","css-frameworks:js-first:material-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md","css-frameworks:js-first:radix-ui":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md","css-frameworks:js-first:tailwind-css":"/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md","css-frameworks:css-first":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md","css-frameworks:css-first:bootstrap":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md","css-frameworks:css-first:bulma":"/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md","testing-your-apps":"/roadmaps/100-frontend/content/115-testing-your-apps/readme.md","testing-your-apps:jest":"/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md","testing-your-apps:react-testing-library":"/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md","testing-your-apps:cypress":"/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md","testing-your-apps:enzyme":"/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md","testing-your-apps:other-options":"/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md","type-checkers":"/roadmaps/100-frontend/content/116-type-checkers/readme.md","type-checkers:typescript":"/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md","type-checkers:flow":"/roadmaps/100-frontend/content/116-type-checkers/101-flow.md","progressive-web-apps":"/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md","progressive-web-apps:performance":"/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md","progressive-web-apps:apis":"/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md","server-side-rendering":"/roadmaps/100-frontend/content/118-server-side-rendering/readme.md","server-side-rendering:react-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md","server-side-rendering:react-js:next-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md","server-side-rendering:react-js:after-js":"/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md","server-side-rendering:angular":"/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md","server-side-rendering:angular:universal":"/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md","server-side-rendering:vue-js":"/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md","server-side-rendering:vue-js:nuxt-js":"/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md","graphql":"/roadmaps/100-frontend/content/119-graphql/readme.md","graphql:apollo":"/roadmaps/100-frontend/content/119-graphql/100-apollo.md","graphql:relay-modern":"/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md","static-site-generators":"/roadmaps/100-frontend/content/120-static-site-generators/readme.md","static-site-generators:next-js":"/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md","static-site-generators:gatsbyjs":"/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md","static-site-generators:nuxt-js":"/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md","static-site-generators:vuepress":"/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md","static-site-generators:jekyll":"/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md","static-site-generators:hugo":"/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md","static-site-generators:gridsome":"/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md","static-site-generators:eleventy":"/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md","mobile-applications":"/roadmaps/100-frontend/content/121-mobile-applications/readme.md","mobile-applications:react-native":"/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md","mobile-applications:nativescript":"/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md","mobile-applications:flutter":"/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md","mobile-applications:ionic":"/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md","desktop-applications":"/roadmaps/100-frontend/content/122-desktop-applications/readme.md","desktop-applications:electron":"/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md","desktop-applications:carlo":"/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md","desktop-applications:proton-native":"/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md","web-assembly":"/roadmaps/100-frontend/content/123-web-assembly.md"}')},9258:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern frontend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a frontend developer","frontend developer","frontend engineer","frontend skills","frontend development","javascript developer","frontend development skills","frontend development skills test","frontend roadmap","frontend engineer roadmap","frontend developer roadmap","become a frontend developer","frontend developer career path","javascript developer","modern javascript developer","node developer","skills for frontend development","learn frontend development","what is frontend development","frontend developer quiz","frontend developer interview questions"]},"title":"Frontend Developer","description":"Step by step guide to becoming a modern frontend developer in 2021","featuredTitle":"Frontend","featuredDescription":"Step by step guide to becoming a frontend developer in 2021","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"featured":true,"imageUrl":"/roadmaps/frontend.png","jsonUrl":"/project/frontend.json","resourcesPath":"./resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/frontend-roadmap","contentPathsFilePath":"./content-paths.json"}')},6782:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern backend developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a backend developer","backend roadmap","backend developer","backend engineer","backend skills","backend development","javascript developer","backend development skills","backend development skills test","backend engineer roadmap","backend developer roadmap","become a backend developer","backend developer career path","javascript developer","modern javascript developer","node developer","skills for backend development","learn backend development","what is backend development","backend developer quiz","backend developer interview questions"]},"title":"Backend Developer","description":"Step by step guide to becoming a modern backend developer in 2021","featuredTitle":"Backend","featuredDescription":"Step by step guide to becoming a backend developer in 2021","featured":true,"imageUrl":"/roadmaps/backend.png","jsonUrl":"/project/frontend.json","resourcesPath":"./resources.md","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/backend-roadmap"}')},4017:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"DevOps Roadmap: Learn to become a DevOps Engineer or SRE","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a devops enginer","devops roadmap","sre roadmap","site reliability engineer roadmap","operations roles","become devops","devops skills","modern devops skills","devops skills test","skills for devops","learn devops","what is devops","what is sre","devops quiz","devops interview questions"]},"title":"DevOps Roadmap","description":"Step by step guide for DevOps, SRE or any other Operations Role in 2021","featuredTitle":"DevOps","featuredDescription":"Step by step guide for DevOps or operations role in 2021","featured":true,"imageUrl":"/roadmaps/devops.png","jsonUrl":"/project/devops.json","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/devops-roadmap"}')},8477:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"React Developer Roadmap: Learn to become a React developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a react developer","react developer roadmap","react roadmap","become react developer","react developer skills","react skills test","skills for react development","learn react development","what is react","react quiz","react interview questions"]},"title":"React Developer","description":"Everything that is there to learn about React and the ecosystem in 2021.","featuredTitle":"React","featuredDescription":"Step by step guide to become a React Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","jsonUrl":"/project/react.json","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/react-roadmap"}')},8834:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Angular Developer Roadmap: Learn to become a Angular developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a angular developer","angular developer roadmap","angular roadmap","become angular developer","angular developer skills","angular skills test","skills for angular development","learn angular development","what is angular","angular quiz","angular interview questions"]},"title":"Angular Developer","description":"Everything that is there to learn about Angular and the ecosystem in 2021.","featuredTitle":"Angular","featuredDescription":"Step by step guide to become a Angular Developer in 2021","isTextHeavy":false,"isCommunity":false,"featured":true,"jsonUrl":"/project/angular.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/angular-roadmap"}')},9508:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Android Developer Roadmap: Learn to become an Android developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an android developer","android developer roadmap","android roadmap","become android developer","android developer skills","android skills test","skills for android development","learn android development","what is android","android quiz","android interview questions"]},"title":"Android Developer","description":"Step by step guide to becoming an Android developer in 2021","featuredTitle":"Android","featuredDescription":"Step by step guide to becoming an Android Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/android.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},4099:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern Python developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming an python developer","python developer roadmap","python roadmap","become python developer","python developer skills","python skills test","skills for python development","learn python development","what is python","python quiz","python interview questions"]},"title":"Python Developer","description":"Step by step guide to becoming a Python developer in 2021","featuredTitle":"Python","featuredDescription":"Step by step guide to becoming a Python Developer in 2021","isTextHeavy":true,"isCommunity":false,"featured":true,"jsonUrl":"/project/python.json","resourcesPath":"./resources.md","landingPath":"./landscape.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/python-roadmap","versions":["latest"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},2737:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a Go developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a golang developer","guide to becoming a go developer","golang developer","go developer","guide to golang","guide to go","golang roadmap","go roadmap","golang skills","go skills","golang skills test","go skills test","skills for golang","skills for go","cloud development","what is golang","what is go","golang quiz","go quiz","golang interview questions","go interview questions"]},"title":"Go Developer","description":"Step by step guide to becoming a Go developer in 2021","featuredTitle":"Go","featuredDescription":"Step by step guide to becoming a Go developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/golang.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","pdfUrl":"https://kamranahmedse.gumroad.com/l/go-roadmap","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},2507:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"Learn to become a modern Java developer","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a developer","guide to becoming a java developer","java developer","java engineer","java skills","guide to java","java roadmap","java skills","java skills test","skills for java","cloud development","what is java","java quiz","java interview questions","java engineer roadmap","java developer roadmap","become a java developer","java developer career path","java developer","modern java developer"]},"title":"Java Developer","description":"Step by step guide to becoming a Java developer in 2021","featuredTitle":"Java","featuredDescription":"Step by step guide to becoming a Java Developer in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":false,"featured":true,"jsonUrl":"/project/java.json","landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"pdfUrl":"https://kamranahmedse.gumroad.com/l/java-roadmap"}')},8951:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"DBA Roadmap: Learn to become a database administrator with PostgreSQL","description":"Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a database administrator","guide to becoming a DBA","dba roadmap","db administrator roadmap","database administrator roadmap","postgresql roadmap","dba skills","db administrator skills","become dba","postgresql skills","modern dba skills","dba skills test","skills for dba","skills for database administrator","learn dba","what is dba","database administrator quiz","dba interview questions"]},"title":"PostgreSQL DBA","description":"Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021","featuredTitle":"DBA","featuredDescription":"Step by step guide to become a PostgreSQL DBA in 2021","landingPath":"./landscape.md","resourcesPath":"./resources.md","author":{"name":"Alexey Lesovsky","url":"https://github.com/lesovsky"},"isCommunity":false,"isTextHeavy":true,"featured":true,"detailed":false,"versions":[]}')},7559:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"AWS Roadmap: Learn to use AWS","description":"Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to aws","aws roadmap","aws skills","aws skills test","skills for aws","cloud development","what is aws","aws quiz","aws interview questions"]},"title":"AWS","description":"Everything that is there to learn about AWS and the ecosystem in 2021.","featuredTitle":"AWS","featuredDescription":"Step by step guide to learn AWS in 2021","isTextHeavy":false,"isCommunity":false,"isUpcoming":true,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","versions":["latest","2018","2017"],"author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"}}')},3204:function(e){"use strict";e.exports=JSON.parse('{"seo":{"title":"QA Roadmap: Learn to become a modern QA engineer","description":"Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.","keywords":["guide to becoming a QA engineer","QA engineer","QA skills","QA development skills","QA development skills test","QA engineer roadmap","become a QA engineer","QA engineer career path","skills for QA development","what is QA engineer","QA engineer quiz","QA engineer interview questions"]},"title":"QA Engineer","description":"Steps to follow in order to become a modern QA Engineer in 2021","featuredTitle":"QA","featuredDescription":"Step by step guide to becoming a modern QA Engineer in 2021","isUpcoming":true,"featured":true,"landingPath":"./landscape.md","resourcesPath":"./resources.md","author":{"name":"Anas Fitiani","url":"https://github.com/anas-qa"}}')},1797:function(e){"use strict";e.exports=JSON.parse('[{"id":"what-is-eventual-consistency","title":"What is Eventual Consistency?","description":"Learn about the different consistency models in distributed systems","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=rpqsSkTIdAw","authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2021-11-30T19:59:14.191Z","createdAt":"2021-11-30T19:59:14.191Z"},{"id":"ssh-ssl-tls","title":"SSH vs TLS vs SSL","description":"Learn the difference between SSH, TLS and SSL","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=k3rFFLmQCuY","authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2021-11-25T19:59:14.191Z","createdAt":"2021-11-25T19:59:14.191Z"},{"id":"async-javascript","title":"Asynchronous JavaScript","description":"Learn how to write asynchronous JavaScript using Async/Await","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=VyIK6SV5f7o","authorUsername":"kamranahmedse","duration":"15 minutes","updatedAt":"2021-11-14T19:59:14.191Z","createdAt":"2021-11-14T19:59:14.191Z"},{"id":"random-number-generators","title":"Random Number Generators","description":"How do random number generators work?","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=nDv3yXdD0rk","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-11-03T19:59:14.191Z","createdAt":"2021-11-03T19:59:14.191Z"},{"id":"big-o-notation","title":"Big O Notation","description":"Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=Z0bH0cMY0E8","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-25T19:59:14.191Z","createdAt":"2021-10-25T19:59:14.191Z"},{"id":"yaml-in-depth","title":"YAML in Depth","description":"Everything you need to know about YAML","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=ImHSpwUlNVc","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-18T19:59:14.191Z","createdAt":"2021-10-18T19:59:14.191Z"},{"id":"floating-point-arithmetic","title":"Floating Point Arithmetic","description":"Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=RIiq4tTt6rI","authorUsername":"kamranahmedse","duration":"4 minutes","updatedAt":"2021-10-10T19:59:14.191Z","createdAt":"2021-10-10T19:59:14.191Z"},{"id":"what-is-cap-theorem","title":"What is CAP Theorem?","description":"An illustrated explanation to CAP theorem with examples and proof.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=_RbsFXWRZ10","authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2021-10-05T19:59:14.191Z","createdAt":"2021-10-05T19:59:14.191Z"},{"id":"acid-explained","title":"ACID Explained","description":"Learn what it means for a database to be ACID compliant with examples.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=yaQ5YMWkxq4","authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2021-09-26T19:59:14.191Z","createdAt":"2021-09-26T19:59:14.191Z"},{"id":"transport-protocols-tcp-vs-udp","title":"Transport Protocols: TCP vs UDP","description":"Learn about the Transport Layer of the TCP/IP model and different transport protocols.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=37AFBZv4_6Y","authorUsername":"kamranahmedse","duration":"10 minutes","updatedAt":"2020-11-21T19:59:14.191Z","createdAt":"2020-11-21T19:59:14.191Z"},{"id":"tcp-ip-model","title":"TCP/IP Model Explained","description":"Learn what is TCP/IP Model and the different layers involved.","isPro":false,"authorUsername":"kamranahmedse","youtubeLink":"https://www.youtube.com/watch?v=F5rni9fr1yE","duration":"5 minutes","updatedAt":"2020-11-06T19:59:14.191Z","createdAt":"2020-11-06T19:59:14.191Z"},{"id":"osi-model","title":"OSI Model Explained","description":"Learn what is OSI Model and the different layers involved.","isPro":false,"youtubeLink":"https://www.youtube.com/watch?v=dV8mjZd1OtU","authorUsername":"kamranahmedse","duration":"7 minutes","updatedAt":"2020-10-24T19:59:14.191Z","createdAt":"2020-10-24T19:59:14.191Z"},{"id":"freeze-and-seal-objects-in-javascript","title":"Freeze and Seal in JavaScript","description":"Learn what is OSI Model and the different layers involved.","youtubeLink":"https://www.youtube.com/watch?v=O3uT2l6vgZ8","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-10-16T19:59:14.191Z","createdAt":"2020-10-16T19:59:14.191Z"},{"id":"all-about-http-caching","title":"All about HTTP Caching","description":"Learn what is HTTP caching, places for caching and different caching headers.","youtubeLink":"https://www.youtube.com/watch?v=HiBDZgTNpXY","isPro":false,"authorUsername":"kamranahmedse","duration":"13 minutes","updatedAt":"2020-10-04T19:59:14.191Z","createdAt":"2020-10-04T19:59:14.191Z"},{"id":"content-delivery-networks","title":"Content Delivery Networks","description":"Learn what the CDNs are and the difference between push CDN vs pull CDN.","youtubeLink":"https://www.youtube.com/watch?v=6DXEPcXKQNY","isPro":false,"authorUsername":"kamranahmedse","duration":"4 minutes","updatedAt":"2020-09-26T19:59:14.191Z","createdAt":"2020-09-26T19:59:14.191Z"},{"id":"load-balancers-101","title":"Load Balancers 101","description":"Learn the basics of load balancers, types and different algorithms.","youtubeLink":"https://www.youtube.com/watch?v=galcDRNd5Ow","isPro":false,"authorUsername":"kamranahmedse","duration":"9 minutes","updatedAt":"2020-09-18T19:59:14.191Z","createdAt":"2020-09-18T19:59:14.191Z"},{"id":"dns-records","title":"DNS Records","description":"Learn what the DNS is and how a website is found on the internet.","youtubeLink":"https://www.youtube.com/watch?v=7lxgpKh_fRY","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-08-31T19:59:14.191Z","createdAt":"2020-08-31T19:59:14.191Z"},{"id":"dns-explained","title":"DNS and how does it work?","description":"Learn what the DNS is and how a website is found on the internet.","youtubeLink":"https://www.youtube.com/watch?v=Wj0od2ag5sk","isPro":false,"authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2020-08-17T19:59:14.191Z","createdAt":"2020-08-17T19:59:14.191Z"},{"id":"system-design-101","title":"System Design 101","description":"Learn about all the bits and pieces of system design.","youtubeLink":"https://www.youtube.com/watch?v=Y-Gl4HEyeUQ","isPro":false,"authorUsername":"kamranahmedse","duration":"7 minutes","updatedAt":"2020-08-08T19:59:14.191Z","createdAt":"2020-08-08T19:59:14.191Z"},{"id":"javascript-fetch-api","title":"JavaScript Fetch API","description":"Learn how to use JavaScript\'s Fetch API to interact with remote API.","youtubeLink":"https://www.youtube.com/watch?v=-ZI0ea5O2oA","isPro":false,"authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2020-08-02T19:59:14.191Z","createdAt":"2020-08-02T19:59:14.191Z"},{"id":"scaling-the-unscalable","title":"Scaling the Unscalable","description":"Learn the basics of System Design and understand how to build a scalable application.","youtubeLink":"https://www.youtube.com/watch?v=a2rcgzludDU","isPro":false,"authorUsername":"kamranahmedse","duration":"10 minutes","updatedAt":"2020-07-26T19:59:14.191Z","createdAt":"2020-07-26T19:59:14.191Z"},{"id":"promises-in-javascript","title":"All about Promises in JavaScript","youtubeLink":"https://www.youtube.com/watch?v=BvrkobaCVVE","description":"Learn how to write asynchronous code in JavaScript using promises.","isPro":false,"authorUsername":"kamranahmedse","duration":"8 minutes","updatedAt":"2020-07-20T19:59:14.191Z","createdAt":"2020-07-20T19:59:14.191Z"},{"id":"how-to-use-github-actions","title":"Automate with GitHub Actions","description":"Learn how to implement CI/CD with GitHub Actions","youtubeLink":"https://www.youtube.com/watch?v=nyKZTKQS_EQ","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-07-13T19:59:14.191Z","createdAt":"2020-07-13T19:59:14.191Z"},{"id":"what-is-dependency-injection","title":"What is Dependency Injection?","description":"Learn what is dependency injection and how to write better code with the help of it.","youtubeLink":"https://www.youtube.com/watch?v=0yc2UANSDiw","isPro":false,"authorUsername":"kamranahmedse","duration":"3 minutes","updatedAt":"2020-07-04T19:59:14.191Z","createdAt":"2020-07-04T19:59:14.191Z"},{"id":"how-to-use-css-variables","title":"How to use CSS Variables?","description":"Learn how to write scalable CSS using CSS Variables.","youtubeLink":"https://www.youtube.com/watch?v=lgaxU7CRmxU","isPro":false,"authorUsername":"kamranahmedse","duration":"5 minutes","updatedAt":"2020-07-03T19:59:14.191Z","createdAt":"2020-07-03T19:59:14.191Z"},{"id":"what-is-dom-shadow-dom-virtual-dom","title":"DOM, Shadow DOM, Virtual DOM","description":"Learn what is DOM, Shadow DOM and Virtual DOM and how they work.","youtubeLink":"https://www.youtube.com/watch?v=7Tok22qxPzQ","isPro":false,"authorUsername":"kamranahmedse","duration":"6 minutes","updatedAt":"2020-07-20T19:59:14.191Z","createdAt":"2020-07-20T19:59:14.191Z"},{"id":"practical-intro-to-react","title":"Practical Introduction to React","description":"Learn how to create a React Application with practical example.","youtubeLink":"https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu","isPro":false,"authorUsername":"kamranahmedse","duration":"40 minutes","updatedAt":"2020-07-09T19:59:14.191Z","createdAt":"2020-07-09T19:59:14.191Z"},{"id":"arrays-and-objects-in-javascript","title":"Arrays and Objects in JavaScript","description":"Learn how to manipulate arrays and objects in JavaScript.","youtubeLink":"https://www.youtube.com/watch?v=n3NKGsM3iEw","isPro":false,"authorUsername":"kamranahmedse","duration":"12 minutes","updatedAt":"2020-05-09T19:59:14.191Z","createdAt":"2020-05-09T19:59:14.191Z"}]')}}]); \ No newline at end of file diff --git a/_next/static/chunks/515-a4a0c0a6e6c086d1.js b/_next/static/chunks/515-713f89c4eebf3bd6.js similarity index 97% rename from _next/static/chunks/515-a4a0c0a6e6c086d1.js rename to _next/static/chunks/515-713f89c4eebf3bd6.js index 394b5d191..4c445d21e 100644 --- a/_next/static/chunks/515-a4a0c0a6e6c086d1.js +++ b/_next/static/chunks/515-713f89c4eebf3bd6.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[515],{6673:function(e,t,r){r.d(t,{$:function(){return c}});var n=r(5893),o=r(8527),i=r(4651),a=r(8641);function s(){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.Kq,{isInline:!0,d:["none","none","flex"],color:"gray.400",fontWeight:600,spacing:"30px",children:[(0,n.jsx)(o.rU,{_hover:{color:"white"},href:"/roadmaps",children:"Roadmaps"}),(0,n.jsx)(o.rU,{_hover:{color:"white"},href:"/guides",children:"Guides"}),(0,n.jsx)(o.rU,{_hover:{color:"white"},href:"/watch",children:"Videos"}),(0,n.jsx)(o.rU,{_hover:{color:"white"},href:"/about",children:"About"}),(0,n.jsx)(o.rU,{_hover:{color:"white"},href:a.url.youtube,target:"_blank",children:"YouTube"})]}),(0,n.jsxs)(o.Kq,{d:["flex","flex","none"],color:"gray.400",fontWeight:600,spacing:0,children:[(0,n.jsx)(o.rU,{py:"7px",borderBottomWidth:1,borderBottomColor:"gray.800",_hover:{color:"white"},href:"/roadmaps",children:"Roadmaps"}),(0,n.jsx)(o.rU,{py:"7px",borderBottomWidth:1,borderBottomColor:"gray.800",_hover:{color:"white"},href:"/guides",children:"Guides"}),(0,n.jsx)(o.rU,{py:"7px",borderBottomWidth:1,borderBottomColor:"gray.800",_hover:{color:"white"},href:"/watch",children:"Videos"}),(0,n.jsx)(o.rU,{py:"7px",borderBottomWidth:1,borderBottomColor:"gray.800",_hover:{color:"white"},href:"/thanks",children:"Thanks"}),(0,n.jsx)(o.rU,{py:"7px",borderBottomWidth:1,borderBottomColor:"gray.800",_hover:{color:"white"},href:"/about",children:"About"}),(0,n.jsx)(o.rU,{py:"7px",_hover:{color:"white"},target:"_blank",href:a.url.youtube,children:"YouTube"})]})]})}function c(){return(0,n.jsxs)(o.xu,{bg:"brand.hero",p:["25px 0","25px 0","40px 0"],children:[(0,n.jsxs)(o.W2,{maxW:"container.md",children:[(0,n.jsx)(s,{}),(0,n.jsxs)(o.xu,{mt:["40px","40px","50px"],mb:"40px",maxW:"500px",children:[(0,n.jsxs)(o.kC,{spacing:0,alignItems:"center",color:"gray.400",children:[(0,n.jsxs)(o.rU,{d:"flex",alignItems:"center",fontWeight:600,_hover:{textDecoration:"none",color:"white"},href:"/",children:[(0,n.jsx)(i.Ee,{alt:"",h:"25px",w:"25px",src:"/logo.svg",mr:"6px"}),"roadmap.sh"]}),(0,n.jsx)(o.xv,{as:"span",mx:"7px",children:"by"}),(0,n.jsx)(o.rU,{bg:"blue.500",px:"6px",py:"2px",rounded:"4px",color:"white",fontWeight:600,fontSize:"13px",_hover:{textDecoration:"none",bg:"blue.600"},href:a.url.twitter,target:"_blank",children:"@kamranahmedse"})]}),(0,n.jsx)(o.xv,{my:"15px",fontSize:"14px",color:"gray.500",children:"Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career."}),(0,n.jsxs)(o.xv,{fontSize:"14px",color:"gray.500",children:[(0,n.jsx)(o.xv,{as:"span",mr:"10px",children:"\xa9 roadmap.sh"}),"\xb7",(0,n.jsx)(o.rU,{href:"/about",_hover:{textDecoration:"none",color:"white"},color:"gray.400",mx:"10px",children:"FAQs"}),"\xb7",(0,n.jsx)(o.rU,{href:"/terms",_hover:{textDecoration:"none",color:"white"},color:"gray.400",mx:"10px",children:"Terms"}),"\xb7",(0,n.jsx)(o.rU,{href:"/privacy",_hover:{textDecoration:"none",color:"white"},color:"gray.400",mx:"10px",children:"Privacy"})]})]})]}),(0,n.jsx)("script",{async:!0,type:"text/javascript",src:"//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh",id:"_carbonads_js"})]})}},2438:function(e,t,r){r.d(t,{e:function(){return g}});var n,o,i=r(5893),a=r(7294),s=r(9876),c=r(8527),x=r(5193),l=r(4746);function p(){return(p=Object.assign||function(e){for(var t=1;t=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var n={};function i(e){var t=e.components,o=r(e,["components"]);return(0,a.kt)("wrapper",Object.assign({},n,o,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",null,"Terms of Service"),(0,a.kt)("p",null,"PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER."),(0,a.kt)("p",null,"Welcome to roadmap.sh. Please read on to learn the rules and restrictions that govern your use of our website(s), products, services and applications (the \u201cServices\u201d). If you have any questions, comments, or concerns regarding these terms or the Services, please contact us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,a.kt)("p",null,"These Terms of Use (the \u201cTerms\u201d) are a binding contract between you and roadmap.sh (\u201croadmap.sh,\u201d \u201cwe\u201d, and \u201cus\u201d). You must agree to and accept all of the Terms, or you don\u2019t have the right to use the Services. Your using the Services in any way means that you agree to all of these Terms, and these Terms will remain in effect while you use the Services. These Terms include the provisions in this document, as well as those in the Privacy Policy and Copyright Dispute Policy."),(0,a.kt)("h2",null,"Will these Terms ever change?"),(0,a.kt)("p",null,"We are constantly trying to improve our Services, so these Terms may need to change along with the Services. We reserve the right to change the Terms at any time, but if we do, we will bring it to your attention by updating the terms on the roadmap.sh website, by sending you an email, and/or by some other means."),(0,a.kt)("p",null,"If you don\u2019t agree with the new Terms, you are free to reject them, however it means you will no longer be able to use the Services. If you use the Services in any way after a change to the Terms is effective, that means you agree to all of the changes."),(0,a.kt)("p",null,"Except for changes by us as described here, no other amendment or modification of these Terms will be effective unless in writing and signed by both you and us."),(0,a.kt)("h2",null,"Do these terms cover privacy?"),(0,a.kt)("p",null,"You can view the current roadmap.sh Privacy Policy ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"/privacy"}),"here"),"."),(0,a.kt)("p",null,"The Children\u2019s Online Privacy Protection Act (\u201cCOPPA\u201d) requires that online service providers obtain parental consent before they knowingly collect personally identifiable information online from children who are under 13. We do not knowingly collect or solicit personally identifiable information from children under 13. If you are a child under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn we have collected personal information from a child under 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,a.kt)("h2",null,"What are the basics of using roadmap.sh?"),(0,a.kt)("p",null,"You may be required to sign up for an account, and select a password and username. You agree to provide us with accurate, complete, and up-to-date registration information about yourself. You may not select as your username a name that you don\u2019t have the right to use, or another person\u2019s name with the intent to impersonate that person. You may not transfer your account to anyone else without our prior written permission."),(0,a.kt)("p",null,"You represent and warrant that you are an individual of legal age to form a binding contract, or if not, you\u2019ve received your parent\u2019s or guardian\u2019s permission to use the Services and gotten your parent or guardian to agree to these Terms on your behalf."),(0,a.kt)("p",null,"You will only use the Services for your own internal, personal, non-commercial use, and not on behalf of or for the benefit of any third party, and only in a manner that complies with all laws that apply to you. If your use of the Services is prohibited by applicable laws, then you aren\u2019t authorized to use the Services. We can\u2019t and won\u2019t be responsible for your using the Services in a way that breaks the law."),(0,a.kt)("p",null,"You will not share your account or password with anyone, and you must protect the security of your account and your password. You\u2019re responsible for any activity associated with your account."),(0,a.kt)("h2",null,"Your use of the Services is subject to the following additional restrictions:"),(0,a.kt)("p",null,"You represent, warrant, and agree that you will not contribute any Content or User Submission (each of those terms is defined below) or otherwise use the Services or interact with the Services in a manner that:"),(0,a.kt)("p",null,"(a) Infringes or violates the intellectual property rights or any other rights of anyone else (including roadmap.sh); (b) Violates any law or regulation, including any applicable export control laws; (c) Is harmful, fraudulent, deceptive, threatening, harassing, defamatory, obscene, or otherwise objectionable; (d) Jeopardizes the security of your roadmap.sh account or anyone else\u2019s (such as allowing someone else to log in to the Services as you); (e) Attempts, in any manner, to obtain the password, account, or other security information from any other user; (f) Violates the security of any computer network, or cracks any passwords or security encryption codes; (g) Runs Maillist, Listserv, any form of auto-responder or \u201cspam\u201d on the Services, or any processes that run or are activated while you are not logged into the Services, or that otherwise interfere with the proper working of the Services (including by placing an unreasonable load on the Services\u2019 infrastructure); (h) \u201cCrawls,\u201d \u201cscrapes,\u201d or \u201cspiders\u201d any page, data, or portion of or relating to the Services or Content (through use of manual or automated means); (i) Copies or stores any significant portion of the Content; (j) Decompiles, reverse engineers, or otherwise attempts to obtain the source code or underlying ideas or information of or relating to the Services."),(0,a.kt)("p",null,"A violation of any of the foregoing is grounds for termination of your right to use or access the Services."),(0,a.kt)("h2",null,"What are my rights in roadmap.sh?"),(0,a.kt)("p",null,"The materials displayed or performed or available on or through the Services, including, but not limited to, text, graphics, data, articles, photos, images, illustrations, User Submissions, and so forth (all of the foregoing, the \u201cContent\u201d) are protected by copyright and/or other intellectual property laws. You promise to abide by all copyright notices, trademark rules, information, and restrictions contained in any Content you access through the Services, and you won\u2019t use, copy, reproduce, modify, translate, publish, broadcast, transmit, distribute, perform, upload, display, license, sell or otherwise exploit for any purpose any Content not owned by you, (i) without the prior consent of the owner of that Content or (ii) in a way that violates someone else\u2019s (including roadmap.sh\u2019s) rights."),(0,a.kt)("p",null,"You understand that roadmap.sh owns the Services. You won\u2019t modify, publish, transmit, participate in the transfer or sale of, reproduce (except as expressly provided in this Section), create derivative works based on, or otherwise exploit any of the Services."),(0,a.kt)("p",null,"The Services may allow you to copy or download certain Content; please remember that just because this functionality exists, doesn\u2019t mean that all the restrictions above don\u2019t apply \u2013 they do!"),(0,a.kt)("h2",null,"Do I have to grant any licenses to roadmap.sh or to other users?"),(0,a.kt)("p",null,"Anything you post, upload, share, store, or otherwise provide through the Services is your \u201cUser Submission.\u201d Some User Submissions are viewable by other users. In order to display your User Submissions on the Services, and to allow other users to enjoy them (where applicable), you grant us certain rights in those User Submissions. Please note that all of the following licenses are subject to our Privacy Policy to the extent they relate to User Submissions that are also your personally-identifiable information."),(0,a.kt)("p",null,"For all User Submissions, you hereby grant roadmap.sh a license to translate, modify (for technical purposes, for example making sure your content is viewable on an iPhone as well as a computer) and reproduce and otherwise act with respect to such User Submissions, in each case to enable us to operate the Services, as described in more detail below. This is a license only \u2013 your ownership in User Submissions is not affected."),(0,a.kt)("p",null,"If you store a User Submission in your own personal roadmap.sh account, in a manner that is not viewable by any other user except you (a \u201cPersonal User Submission\u201d), you grant roadmap.sh the license above, as well as a license to display, perform, and distribute your Personal User Submission for the sole purpose of making that Personal User Submission accessible to you and providing the Services necessary to do so."),(0,a.kt)("p",null,"If you share a User Submission only in a manner that only certain specified users can view (for example, a private message to one or more other users) (a \u201cLimited Audience User Submission\u201d), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Limited Audience User Submission for the sole purpose of making that Limited Audience User Submission accessible to such other specified users, and providing the Services necessary to do so. Also, you grant such other specified users a license to access that Limited Audience User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services."),(0,a.kt)("p",null,"If you share a User Submission publicly on the Services and/or in a manner that more than just you or certain specified users can view, or if you provide us (in a direct email or otherwise) with any feedback, suggestions, improvements, enhancements, and/or feature requests relating to the Services] (each of the foregoing, a \u201cPublic User Submission\u201d), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Public User Submission for the purpose of making that Public User Submission accessible to all roadmap.sh users and providing the Services necessary to do so, as well as all other rights necessary to use and exercise all rights in that Public User Submission in connection with the Services and/or otherwise in connection with roadmap.sh\u2019s business for any purpose, provided that roadmap.sh will try to notify you if it uses your Public User Submission for any reason other than displaying it on the Services. Also, you grant all other users of the Services a license to access that Public User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services."),(0,a.kt)("p",null,"You agree that the licenses you grant are royalty-free, perpetual, sublicenseable, irrevocable, and worldwide, provided that when you delete your roadmap.sh account, we will stop displaying your User Submissions (other than Public User Submissions, which may remain fully available)] to other users (if applicable), but you understand and agree that it may not be possible to completely delete that content from roadmap.sh\u2019s records, and that your User Submissions may remain viewable elsewhere to the extent that they were copied or stored by other users."),(0,a.kt)("p",null,"Finally, you understand and agree that roadmap.sh, in performing the required technical steps to provide the Services to our users (including you), may need to make changes to your User Submissions to conform and adapt those User Submissions to the technical requirements of connection networks, devices, services, or media, and the foregoing licenses include the rights to do so."),(0,a.kt)("h2",null,"What if I see something on the Services that infringes my copyright?"),(0,a.kt)("p",null,"You may have heard of the Digital Millennium Copyright Act (the \u201cDMCA\u201d), as it relates to online service providers, like roadmap.sh, being asked to remove material that allegedly violates someone\u2019s copyright. We respect others\u2019 intellectual property rights, and we reserve the right to delete or disable Content alleged to be infringing, and to terminate the accounts of repeat alleged infringers."),(0,a.kt)("h2",null,"Who is responsible for what I see and do on the Services?"),(0,a.kt)("p",null,"Any information or content publicly posted or privately transmitted through the Services is the sole responsibility of the person from whom such content originated, and you access all such information and content at your own risk, and we aren\u2019t liable for any errors or omissions in that information or content or for any damages or loss you might suffer in connection with it. We cannot control and have no duty to take any action regarding how you may interpret and use the Content or what actions you may take as a result of having been exposed to the Content, and you hereby release us from all liability for you having acquired or not acquired Content through the Services. We can\u2019t guarantee the identity of any users with whom you interact in using the Services and are not responsible for which users gain access to the Services."),(0,a.kt)("p",null,"You are responsible for all Content you contribute, in any manner, to the Services, and you represent and warrant you have all rights necessary to do so, in the manner in which you contribute it. You will keep all your registration information accurate and current. You are responsible for all your activity in connection with the Services."),(0,a.kt)("p",null,"The Services may contain links or connections to third party websites or services that are not owned or controlled by roadmap.sh. When you access third party websites or use third party services, you accept that there are risks in doing so, and that roadmap.sh is not responsible for such risks. We encourage you to be aware when you leave the Services and to read the terms and conditions and privacy policy of each third party website or service that you visit or utilize."),(0,a.kt)("p",null,"roadmap.sh has no control over, and assumes no responsibility for, the content, accuracy, privacy policies, or practices of or opinions expressed in any third party websites or by any third party that you interact with through the Services. In addition, roadmap.sh will not and cannot monitor, verify, censor or edit the content of any third party site or service. By using the Services, you release and hold us harmless from any and all liability arising from your use of any third party website or service."),(0,a.kt)("p",null,"Your interactions with organizations and/or individuals found on or through the Services, including payment and delivery of goods or services, and any other terms, conditions, warranties or representations associated with such dealings, are solely between you and such organizations and/or individuals. You should make whatever investigation you feel necessary or appropriate before proceeding with any online or offline transaction with any of these third parties. You agree that roadmap.sh shall not be responsible or liable for any loss or damage of any sort incurred as the result of any such dealings."),(0,a.kt)("p",null,'If there is a dispute between participants on this site, or between users and any third party, you agree that roadmap.sh is under no obligation to become involved. In the event that you have a dispute with one or more other users, you release roadmap.sh, its officers, employees, agents, and successors from claims, demands, and damages of every kind or nature, known or unknown, suspected or unsuspected, disclosed or undisclosed, arising out of or in any way related to such disputes and/or our Services. If you are a California resident, you shall and hereby do waive California Civil Code Section 1542, which says: "A general release does not extend to claims which the creditor does not know or suspect to exist in his or her favor at the time of executing the release, which, if known by him or her must have materially affected his or her settlement with the debtor."'),(0,a.kt)("h2",null,"Will roadmap.sh ever change the Services?"),(0,a.kt)("p",null,"We\u2019re always trying to improve the Services, so they may change over time. We may suspend or discontinue any part of the Services, or we may introduce new features or impose limits on certain features or restrict access to parts or all of the Services. We\u2019ll try to give you notice when we make a material change to the Services that would adversely affect you, but this isn\u2019t always practical. Similarly, we reserve the right to remove any Content from the Services at any time, for any reason (including, but not limited to, if someone alleges you contributed that Content in violation of these Terms), in our sole discretion, and without notice."),(0,a.kt)("h2",null,"Does roadmap.sh cost anything?"),(0,a.kt)("p",null,"The roadmap.sh Services are currently free, but we reserve the right to charge for certain or all Services in the future. We will notify you before any Services you are then using begin carrying a fee, and if you wish to continue using such Services, you must pay all applicable fees for such Services."),(0,a.kt)("h2",null,"What if I want to stop using roadmap.sh?"),(0,a.kt)("p",null,"You\u2019re free to do that at any time, by contacting us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"; please refer to our Privacy Policy, as well as the licenses above, to understand how we treat information you provide to us after you have stopped using our Services. roadmap.sh is also free to terminate (or suspend access to) your use of the Services or your account, for any reason in our discretion, including your breach of these Terms. roadmap.sh has the sole right to decide whether you are in violation of any of the restrictions set forth in these Terms."),(0,a.kt)("p",null,"Account termination may result in destruction of any Content associated with your account, so keep that in mind before you decide to terminate your account. We will try to provide advance notice to you prior to our terminating your account so that you are able to retrieve any important User Submissions you may have stored in your account (to the extent allowed by law and these Terms), but we may not do so if we determine it would be impractical, illegal, not in the interest of someone\u2019s safety or security, or otherwise harmful to the rights or property of roadmap.sh."),(0,a.kt)("p",null,"Provisions that, by their nature, should survive termination of these Terms shall survive termination. By way of example, all of the following will survive termination: any obligation you have to pay us or indemnify us, any limitations on our liability, any terms regarding ownership or intellectual property rights, and terms regarding disputes between us."),(0,a.kt)("h2",null,"What if I use roadmap.sh via an app available on the Apple App Store?"),(0,a.kt)("p",null,"These Terms apply to your use of all the Services, including the iOS applications available via the Apple, Inc. (\u201cApple\u201d) App Store (the \u201cApplication\u201d), but the following additional terms also apply to the Application:"),(0,a.kt)("p",null,"(a) Both you and roadmap.sh acknowledge that the Terms are concluded between you and roadmap.sh only, and not with Apple, and that Apple is not responsible for the Application or the Content; (b) The Application is licensed to you on a limited, non-exclusive, non-transferrable, non-sublicensable basis, solely to be used in connection with the Services for your private, personal, non-commercial use, subject to all the terms and conditions of these Terms as they are applicable to the Services; (c) You will only use the Application in connection with an Apple device that you own or control; (d) You acknowledge and agree that Apple has no obligation whatsoever to furnish any maintenance and support services with respect to the Application; (e) In the event of any failure of the Application to conform to any applicable warranty, including those implied by law, you may notify Apple of such failure; upon notification, Apple\u2019s sole warranty obligation to you will be to refund to you the purchase price, if any, of the Application; (f) You acknowledge and agree that roadmap.sh, and not Apple, is responsible for addressing any claims you or any third party may have in relation to the Application; (g) You acknowledge and agree that, in the event of any third party claim that the Application or your possession and use of the Application infringes that third party\u2019s intellectual property rights, roadmap.sh, and not Apple, will be responsible for the investigation, defense, settlement and discharge of any such infringement claim; (h) You represent and warrant that you are not located in a country subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a \u201cterrorist supporting\u201d country, and that you are not listed on any U.S. Government list of prohibited or restricted parties; (i) Both you and roadmap.sh acknowledge and agree that, in your use of the Application, you will comply with any applicable third party terms of agreement which may affect or be affected by such use; and (j) Both you and roadmap.sh acknowledge and agree that Apple and Apple\u2019s subsidiaries are third party beneficiaries of these Terms, and that upon your acceptance of these Terms, Apple will have the right (and will be deemed to have accepted the right) to enforce these Terms against you as the third party beneficiary hereof."),(0,a.kt)("h2",null,"What are roadmap.sh's Terms of Sale?"),(0,a.kt)("p",null,"If you purchase any goods or services or license any software through the site whether or not in connection with an Offer or Discount, in addition to agreeing to these Terms of Use, you are agreeing to the Terms of Sale, available here."),(0,a.kt)("h2",null,"What else do I need to know?"),(0,a.kt)("p",null,"Warranty Disclaimer. Neither roadmap.sh nor its licensors or suppliers makes any representations or warranties concerning any content contained in or accessed through the Services, and we will not be responsible or liable for the accuracy, copyright compliance, legality, or decency of material contained in or accessed through the Services. We (and our licensors and suppliers) make no representations or warranties regarding suggestions or recommendations of services or products offered or purchased through the Services. Products and services purchased or offered (whether or not following such recommendations and suggestions) through the Services are provided \u201cAS IS\u201d and without any warranty of any kind from roadmap.sh or others (unless, with respect to such others only, provided expressly and unambiguously in writing by a designated third party for a specific product). THE SERVICES AND CONTENT ARE PROVIDED BY ROADMAP.SH (AND ITS LICENSORS AND SUPPLIERS) ON AN \u201cAS-IS\u201d BASIS, WITHOUT WARRANTIES OR ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR THAT USE OF THE SERVICES WILL BE UNINTERRUPTED OR ERROR-FREE. SOME STATES DO NOT ALLOW LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY LASTS, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU."),(0,a.kt)("p",null,"Limitation of Liability. TO THE FULLEST EXTENT ALLOWED BY APPLICABLE LAW, UNDER NO CIRCUMSTANCES AND UNDER NO LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, TORT, CONTRACT, STRICT LIABILITY, OR OTHERWISE) SHALL ROADMAP.SH (OR ITS LICENSORS OR SUPPLIERS) BE LIABLE TO YOU OR TO ANY OTHER PERSON FOR (A) ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND, INCLUDING DAMAGES FOR LOST PROFITS, LOSS OF GOODWILL, WORK STOPPAGE, ACCURACY OF RESULTS, OR COMPUTER FAILURE OR MALFUNCTION, OR (B) ANY AMOUNT, IN THE AGGREGATE, IN EXCESS OF THE GREATER OF (I) $100 OR (II) THE AMOUNTS PAID BY YOU TO ROADMAP.SH IN CONNECTION WITH THE SERVICES IN THE TWELVE (12) MONTH PERIOD PRECEDING THIS APPLICABLE CLAIM, OR (III) ANY MATTER BEYOND OUR REASONABLE CONTROL. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES, SO THE ABOVE LIMITATION AND EXCLUSIONS MAY NOT APPLY TO YOU."),(0,a.kt)("p",null,"Indemnity. To the fullest extent allowed by applicable law, You agree to indemnify and hold roadmap.sh, its affiliates, officers, agents, employees, and partners harmless from and against any and all claims, liabilities, damages (actual and consequential), losses and expenses (including attorneys\u2019 fees) arising from or in any way related to any third party claims relating to (a) your use of the Services (including any actions taken by a third party using your account), and (b) your violation of these Terms. In the event of such a claim, suit, or action (\u201cClaim\u201d), we will attempt to provide notice of the Claim to the contact information we have for your account (provided that failure to deliver such notice shall not eliminate or reduce your indemnification obligations hereunder)."),(0,a.kt)("p",null,"Assignment. You may not assign, delegate or transfer these Terms or your rights or obligations hereunder, or your Services account, in any way (by operation of law or otherwise) without roadmap.sh\u2019s prior written consent. We may transfer, assign, or delegate these Terms and our rights and obligations without consent."),(0,a.kt)("p",null,'Choice of Law; Arbitration. These Terms are governed by and will be construed under the laws of the State of California, without regard to the conflicts of laws provisions thereof. Any dispute arising from or relating to the subject matter of these Terms shall be finally settled in San Francisco County, California, in English, in accordance with the Streamlined Arbitration Rules and Procedures of Judicial Arbitration and Mediation Services, Inc. ("JAMS") then in effect, by one commercial arbitrator with substantial experience in resolving intellectual property and commercial contract disputes, who shall be selected from the appropriate list of JAMS arbitrators in accordance with such Rules. Judgment upon the award rendered by such arbitrator may be entered in any court of competent jurisdiction. Notwithstanding the foregoing obligation to arbitrate disputes, each party shall have the right to pursue injunctive or other equitable relief at any time, from any court of competent jurisdiction. For all purposes of this Agreement, the parties consent to exclusive jurisdiction and venue in the state or federal courts located in, respectively, San Francisco County, California, or the Northern District of California. Any arbitration under this Agreement will take place on an individual basis: class arbitrations and class actions are not permitted. YOU UNDERSTAND AND AGREE THAT BY ENTERING INTO THIS AGREEMENT, YOU AND ROADMAP.SH ARE EACH WAIVING THE RIGHT TO TRIAL BY JURY OR TO PARTICIPATE IN A CLASS ACTION.'),(0,a.kt)("p",null,"Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit. The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms."))}i.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[547],{2547:function(e,t,o){o.r(t),o.d(t,{default:function(){return i}});o(7294);var a=o(4137);function r(e,t){if(null==e)return{};var o,a,r=function(e,t){if(null==e)return{};var o,a,r={},n=Object.keys(e);for(a=0;a=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var n={};function i(e){var t=e.components,o=r(e,["components"]);return(0,a.kt)("wrapper",Object.assign({},n,o,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",null,"Terms of Service"),(0,a.kt)("p",null,"PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER."),(0,a.kt)("p",null,"Welcome to roadmap.sh. Please read on to learn the rules and restrictions that govern your use of our website(s), products, services and applications (the \u201cServices\u201d). If you have any questions, comments, or concerns regarding these terms or the Services, please contact us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,a.kt)("p",null,"These Terms of Use (the \u201cTerms\u201d) are a binding contract between you and roadmap.sh (\u201croadmap.sh,\u201d \u201cwe\u201d, and \u201cus\u201d). You must agree to and accept all of the Terms, or you don\u2019t have the right to use the Services. Your using the Services in any way means that you agree to all of these Terms, and these Terms will remain in effect while you use the Services. These Terms include the provisions in this document, as well as those in the Privacy Policy and Copyright Dispute Policy."),(0,a.kt)("h2",null,"Will these Terms ever change?"),(0,a.kt)("p",null,"We are constantly trying to improve our Services, so these Terms may need to change along with the Services. We reserve the right to change the Terms at any time, but if we do, we will bring it to your attention by updating the terms on the roadmap.sh website, by sending you an email, and/or by some other means."),(0,a.kt)("p",null,"If you don\u2019t agree with the new Terms, you are free to reject them, however it means you will no longer be able to use the Services. If you use the Services in any way after a change to the Terms is effective, that means you agree to all of the changes."),(0,a.kt)("p",null,"Except for changes by us as described here, no other amendment or modification of these Terms will be effective unless in writing and signed by both you and us."),(0,a.kt)("h2",null,"Do these terms cover privacy?"),(0,a.kt)("p",null,"You can view the current roadmap.sh Privacy Policy ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"/privacy"}),"here"),"."),(0,a.kt)("p",null,"The Children\u2019s Online Privacy Protection Act (\u201cCOPPA\u201d) requires that online service providers obtain parental consent before they knowingly collect personally identifiable information online from children who are under 13. We do not knowingly collect or solicit personally identifiable information from children under 13. If you are a child under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn we have collected personal information from a child under 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,a.kt)("h2",null,"What are the basics of using roadmap.sh?"),(0,a.kt)("p",null,"You may be required to sign up for an account, and select a password and username. You agree to provide us with accurate, complete, and up-to-date registration information about yourself. You may not select as your username a name that you don\u2019t have the right to use, or another person\u2019s name with the intent to impersonate that person. You may not transfer your account to anyone else without our prior written permission."),(0,a.kt)("p",null,"You represent and warrant that you are an individual of legal age to form a binding contract, or if not, you\u2019ve received your parent\u2019s or guardian\u2019s permission to use the Services and gotten your parent or guardian to agree to these Terms on your behalf."),(0,a.kt)("p",null,"You will only use the Services for your own internal, personal, non-commercial use, and not on behalf of or for the benefit of any third party, and only in a manner that complies with all laws that apply to you. If your use of the Services is prohibited by applicable laws, then you aren\u2019t authorized to use the Services. We can\u2019t and won\u2019t be responsible for your using the Services in a way that breaks the law."),(0,a.kt)("p",null,"You will not share your account or password with anyone, and you must protect the security of your account and your password. You\u2019re responsible for any activity associated with your account."),(0,a.kt)("h2",null,"Your use of the Services is subject to the following additional restrictions:"),(0,a.kt)("p",null,"You represent, warrant, and agree that you will not contribute any Content or User Submission (each of those terms is defined below) or otherwise use the Services or interact with the Services in a manner that:"),(0,a.kt)("p",null,"(a) Infringes or violates the intellectual property rights or any other rights of anyone else (including roadmap.sh); (b) Violates any law or regulation, including any applicable export control laws; (c) Is harmful, fraudulent, deceptive, threatening, harassing, defamatory, obscene, or otherwise objectionable; (d) Jeopardizes the security of your roadmap.sh account or anyone else\u2019s (such as allowing someone else to log in to the Services as you); (e) Attempts, in any manner, to obtain the password, account, or other security information from any other user; (f) Violates the security of any computer network, or cracks any passwords or security encryption codes; (g) Runs Maillist, Listserv, any form of auto-responder or \u201cspam\u201d on the Services, or any processes that run or are activated while you are not logged into the Services, or that otherwise interfere with the proper working of the Services (including by placing an unreasonable load on the Services\u2019 infrastructure); (h) \u201cCrawls,\u201d \u201cscrapes,\u201d or \u201cspiders\u201d any page, data, or portion of or relating to the Services or Content (through use of manual or automated means); (i) Copies or stores any significant portion of the Content; (j) Decompiles, reverse engineers, or otherwise attempts to obtain the source code or underlying ideas or information of or relating to the Services."),(0,a.kt)("p",null,"A violation of any of the foregoing is grounds for termination of your right to use or access the Services."),(0,a.kt)("h2",null,"What are my rights in roadmap.sh?"),(0,a.kt)("p",null,"The materials displayed or performed or available on or through the Services, including, but not limited to, text, graphics, data, articles, photos, images, illustrations, User Submissions, and so forth (all of the foregoing, the \u201cContent\u201d) are protected by copyright and/or other intellectual property laws. You promise to abide by all copyright notices, trademark rules, information, and restrictions contained in any Content you access through the Services, and you won\u2019t use, copy, reproduce, modify, translate, publish, broadcast, transmit, distribute, perform, upload, display, license, sell or otherwise exploit for any purpose any Content not owned by you, (i) without the prior consent of the owner of that Content or (ii) in a way that violates someone else\u2019s (including roadmap.sh\u2019s) rights."),(0,a.kt)("p",null,"You understand that roadmap.sh owns the Services. You won\u2019t modify, publish, transmit, participate in the transfer or sale of, reproduce (except as expressly provided in this Section), create derivative works based on, or otherwise exploit any of the Services."),(0,a.kt)("p",null,"The Services may allow you to copy or download certain Content; please remember that just because this functionality exists, doesn\u2019t mean that all the restrictions above don\u2019t apply \u2013 they do!"),(0,a.kt)("h2",null,"Do I have to grant any licenses to roadmap.sh or to other users?"),(0,a.kt)("p",null,"Anything you post, upload, share, store, or otherwise provide through the Services is your \u201cUser Submission.\u201d Some User Submissions are viewable by other users. In order to display your User Submissions on the Services, and to allow other users to enjoy them (where applicable), you grant us certain rights in those User Submissions. Please note that all of the following licenses are subject to our Privacy Policy to the extent they relate to User Submissions that are also your personally-identifiable information."),(0,a.kt)("p",null,"For all User Submissions, you hereby grant roadmap.sh a license to translate, modify (for technical purposes, for example making sure your content is viewable on an iPhone as well as a computer) and reproduce and otherwise act with respect to such User Submissions, in each case to enable us to operate the Services, as described in more detail below. This is a license only \u2013 your ownership in User Submissions is not affected."),(0,a.kt)("p",null,"If you store a User Submission in your own personal roadmap.sh account, in a manner that is not viewable by any other user except you (a \u201cPersonal User Submission\u201d), you grant roadmap.sh the license above, as well as a license to display, perform, and distribute your Personal User Submission for the sole purpose of making that Personal User Submission accessible to you and providing the Services necessary to do so."),(0,a.kt)("p",null,"If you share a User Submission only in a manner that only certain specified users can view (for example, a private message to one or more other users) (a \u201cLimited Audience User Submission\u201d), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Limited Audience User Submission for the sole purpose of making that Limited Audience User Submission accessible to such other specified users, and providing the Services necessary to do so. Also, you grant such other specified users a license to access that Limited Audience User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services."),(0,a.kt)("p",null,"If you share a User Submission publicly on the Services and/or in a manner that more than just you or certain specified users can view, or if you provide us (in a direct email or otherwise) with any feedback, suggestions, improvements, enhancements, and/or feature requests relating to the Services] (each of the foregoing, a \u201cPublic User Submission\u201d), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Public User Submission for the purpose of making that Public User Submission accessible to all roadmap.sh users and providing the Services necessary to do so, as well as all other rights necessary to use and exercise all rights in that Public User Submission in connection with the Services and/or otherwise in connection with roadmap.sh\u2019s business for any purpose, provided that roadmap.sh will try to notify you if it uses your Public User Submission for any reason other than displaying it on the Services. Also, you grant all other users of the Services a license to access that Public User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services."),(0,a.kt)("p",null,"You agree that the licenses you grant are royalty-free, perpetual, sublicenseable, irrevocable, and worldwide, provided that when you delete your roadmap.sh account, we will stop displaying your User Submissions (other than Public User Submissions, which may remain fully available)] to other users (if applicable), but you understand and agree that it may not be possible to completely delete that content from roadmap.sh\u2019s records, and that your User Submissions may remain viewable elsewhere to the extent that they were copied or stored by other users."),(0,a.kt)("p",null,"Finally, you understand and agree that roadmap.sh, in performing the required technical steps to provide the Services to our users (including you), may need to make changes to your User Submissions to conform and adapt those User Submissions to the technical requirements of connection networks, devices, services, or media, and the foregoing licenses include the rights to do so."),(0,a.kt)("h2",null,"What if I see something on the Services that infringes my copyright?"),(0,a.kt)("p",null,"You may have heard of the Digital Millennium Copyright Act (the \u201cDMCA\u201d), as it relates to online service providers, like roadmap.sh, being asked to remove material that allegedly violates someone\u2019s copyright. We respect others\u2019 intellectual property rights, and we reserve the right to delete or disable Content alleged to be infringing, and to terminate the accounts of repeat alleged infringers."),(0,a.kt)("h2",null,"Who is responsible for what I see and do on the Services?"),(0,a.kt)("p",null,"Any information or content publicly posted or privately transmitted through the Services is the sole responsibility of the person from whom such content originated, and you access all such information and content at your own risk, and we aren\u2019t liable for any errors or omissions in that information or content or for any damages or loss you might suffer in connection with it. We cannot control and have no duty to take any action regarding how you may interpret and use the Content or what actions you may take as a result of having been exposed to the Content, and you hereby release us from all liability for you having acquired or not acquired Content through the Services. We can\u2019t guarantee the identity of any users with whom you interact in using the Services and are not responsible for which users gain access to the Services."),(0,a.kt)("p",null,"You are responsible for all Content you contribute, in any manner, to the Services, and you represent and warrant you have all rights necessary to do so, in the manner in which you contribute it. You will keep all your registration information accurate and current. You are responsible for all your activity in connection with the Services."),(0,a.kt)("p",null,"The Services may contain links or connections to third party websites or services that are not owned or controlled by roadmap.sh. When you access third party websites or use third party services, you accept that there are risks in doing so, and that roadmap.sh is not responsible for such risks. We encourage you to be aware when you leave the Services and to read the terms and conditions and privacy policy of each third party website or service that you visit or utilize."),(0,a.kt)("p",null,"roadmap.sh has no control over, and assumes no responsibility for, the content, accuracy, privacy policies, or practices of or opinions expressed in any third party websites or by any third party that you interact with through the Services. In addition, roadmap.sh will not and cannot monitor, verify, censor or edit the content of any third party site or service. By using the Services, you release and hold us harmless from any and all liability arising from your use of any third party website or service."),(0,a.kt)("p",null,"Your interactions with organizations and/or individuals found on or through the Services, including payment and delivery of goods or services, and any other terms, conditions, warranties or representations associated with such dealings, are solely between you and such organizations and/or individuals. You should make whatever investigation you feel necessary or appropriate before proceeding with any online or offline transaction with any of these third parties. You agree that roadmap.sh shall not be responsible or liable for any loss or damage of any sort incurred as the result of any such dealings."),(0,a.kt)("p",null,'If there is a dispute between participants on this site, or between users and any third party, you agree that roadmap.sh is under no obligation to become involved. In the event that you have a dispute with one or more other users, you release roadmap.sh, its officers, employees, agents, and successors from claims, demands, and damages of every kind or nature, known or unknown, suspected or unsuspected, disclosed or undisclosed, arising out of or in any way related to such disputes and/or our Services. If you are a California resident, you shall and hereby do waive California Civil Code Section 1542, which says: "A general release does not extend to claims which the creditor does not know or suspect to exist in his or her favor at the time of executing the release, which, if known by him or her must have materially affected his or her settlement with the debtor."'),(0,a.kt)("h2",null,"Will roadmap.sh ever change the Services?"),(0,a.kt)("p",null,"We\u2019re always trying to improve the Services, so they may change over time. We may suspend or discontinue any part of the Services, or we may introduce new features or impose limits on certain features or restrict access to parts or all of the Services. We\u2019ll try to give you notice when we make a material change to the Services that would adversely affect you, but this isn\u2019t always practical. Similarly, we reserve the right to remove any Content from the Services at any time, for any reason (including, but not limited to, if someone alleges you contributed that Content in violation of these Terms), in our sole discretion, and without notice."),(0,a.kt)("h2",null,"Does roadmap.sh cost anything?"),(0,a.kt)("p",null,"The roadmap.sh Services are currently free, but we reserve the right to charge for certain or all Services in the future. We will notify you before any Services you are then using begin carrying a fee, and if you wish to continue using such Services, you must pay all applicable fees for such Services."),(0,a.kt)("h2",null,"What if I want to stop using roadmap.sh?"),(0,a.kt)("p",null,"You\u2019re free to do that at any time, by contacting us at ",(0,a.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"; please refer to our Privacy Policy, as well as the licenses above, to understand how we treat information you provide to us after you have stopped using our Services. roadmap.sh is also free to terminate (or suspend access to) your use of the Services or your account, for any reason in our discretion, including your breach of these Terms. roadmap.sh has the sole right to decide whether you are in violation of any of the restrictions set forth in these Terms."),(0,a.kt)("p",null,"Account termination may result in destruction of any Content associated with your account, so keep that in mind before you decide to terminate your account. We will try to provide advance notice to you prior to our terminating your account so that you are able to retrieve any important User Submissions you may have stored in your account (to the extent allowed by law and these Terms), but we may not do so if we determine it would be impractical, illegal, not in the interest of someone\u2019s safety or security, or otherwise harmful to the rights or property of roadmap.sh."),(0,a.kt)("p",null,"Provisions that, by their nature, should survive termination of these Terms shall survive termination. By way of example, all of the following will survive termination: any obligation you have to pay us or indemnify us, any limitations on our liability, any terms regarding ownership or intellectual property rights, and terms regarding disputes between us."),(0,a.kt)("h2",null,"What if I use roadmap.sh via an app available on the Apple App Store?"),(0,a.kt)("p",null,"These Terms apply to your use of all the Services, including the iOS applications available via the Apple, Inc. (\u201cApple\u201d) App Store (the \u201cApplication\u201d), but the following additional terms also apply to the Application:"),(0,a.kt)("p",null,"(a) Both you and roadmap.sh acknowledge that the Terms are concluded between you and roadmap.sh only, and not with Apple, and that Apple is not responsible for the Application or the Content; (b) The Application is licensed to you on a limited, non-exclusive, non-transferrable, non-sublicensable basis, solely to be used in connection with the Services for your private, personal, non-commercial use, subject to all the terms and conditions of these Terms as they are applicable to the Services; (c) You will only use the Application in connection with an Apple device that you own or control; (d) You acknowledge and agree that Apple has no obligation whatsoever to furnish any maintenance and support services with respect to the Application; (e) In the event of any failure of the Application to conform to any applicable warranty, including those implied by law, you may notify Apple of such failure; upon notification, Apple\u2019s sole warranty obligation to you will be to refund to you the purchase price, if any, of the Application; (f) You acknowledge and agree that roadmap.sh, and not Apple, is responsible for addressing any claims you or any third party may have in relation to the Application; (g) You acknowledge and agree that, in the event of any third party claim that the Application or your possession and use of the Application infringes that third party\u2019s intellectual property rights, roadmap.sh, and not Apple, will be responsible for the investigation, defense, settlement and discharge of any such infringement claim; (h) You represent and warrant that you are not located in a country subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a \u201cterrorist supporting\u201d country, and that you are not listed on any U.S. Government list of prohibited or restricted parties; (i) Both you and roadmap.sh acknowledge and agree that, in your use of the Application, you will comply with any applicable third party terms of agreement which may affect or be affected by such use; and (j) Both you and roadmap.sh acknowledge and agree that Apple and Apple\u2019s subsidiaries are third party beneficiaries of these Terms, and that upon your acceptance of these Terms, Apple will have the right (and will be deemed to have accepted the right) to enforce these Terms against you as the third party beneficiary hereof."),(0,a.kt)("h2",null,"What are roadmap.sh's Terms of Sale?"),(0,a.kt)("p",null,"If you purchase any goods or services or license any software through the site whether or not in connection with an Offer or Discount, in addition to agreeing to these Terms of Use, you are agreeing to the Terms of Sale, available here."),(0,a.kt)("h2",null,"What else do I need to know?"),(0,a.kt)("p",null,"Warranty Disclaimer. Neither roadmap.sh nor its licensors or suppliers makes any representations or warranties concerning any content contained in or accessed through the Services, and we will not be responsible or liable for the accuracy, copyright compliance, legality, or decency of material contained in or accessed through the Services. We (and our licensors and suppliers) make no representations or warranties regarding suggestions or recommendations of services or products offered or purchased through the Services. Products and services purchased or offered (whether or not following such recommendations and suggestions) through the Services are provided \u201cAS IS\u201d and without any warranty of any kind from roadmap.sh or others (unless, with respect to such others only, provided expressly and unambiguously in writing by a designated third party for a specific product). THE SERVICES AND CONTENT ARE PROVIDED BY ROADMAP.SH (AND ITS LICENSORS AND SUPPLIERS) ON AN \u201cAS-IS\u201d BASIS, WITHOUT WARRANTIES OR ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR THAT USE OF THE SERVICES WILL BE UNINTERRUPTED OR ERROR-FREE. SOME STATES DO NOT ALLOW LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY LASTS, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU."),(0,a.kt)("p",null,"Limitation of Liability. TO THE FULLEST EXTENT ALLOWED BY APPLICABLE LAW, UNDER NO CIRCUMSTANCES AND UNDER NO LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, TORT, CONTRACT, STRICT LIABILITY, OR OTHERWISE) SHALL ROADMAP.SH (OR ITS LICENSORS OR SUPPLIERS) BE LIABLE TO YOU OR TO ANY OTHER PERSON FOR (A) ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND, INCLUDING DAMAGES FOR LOST PROFITS, LOSS OF GOODWILL, WORK STOPPAGE, ACCURACY OF RESULTS, OR COMPUTER FAILURE OR MALFUNCTION, OR (B) ANY AMOUNT, IN THE AGGREGATE, IN EXCESS OF THE GREATER OF (I) $100 OR (II) THE AMOUNTS PAID BY YOU TO ROADMAP.SH IN CONNECTION WITH THE SERVICES IN THE TWELVE (12) MONTH PERIOD PRECEDING THIS APPLICABLE CLAIM, OR (III) ANY MATTER BEYOND OUR REASONABLE CONTROL. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES, SO THE ABOVE LIMITATION AND EXCLUSIONS MAY NOT APPLY TO YOU."),(0,a.kt)("p",null,"Indemnity. To the fullest extent allowed by applicable law, You agree to indemnify and hold roadmap.sh, its affiliates, officers, agents, employees, and partners harmless from and against any and all claims, liabilities, damages (actual and consequential), losses and expenses (including attorneys\u2019 fees) arising from or in any way related to any third party claims relating to (a) your use of the Services (including any actions taken by a third party using your account), and (b) your violation of these Terms. In the event of such a claim, suit, or action (\u201cClaim\u201d), we will attempt to provide notice of the Claim to the contact information we have for your account (provided that failure to deliver such notice shall not eliminate or reduce your indemnification obligations hereunder)."),(0,a.kt)("p",null,"Assignment. You may not assign, delegate or transfer these Terms or your rights or obligations hereunder, or your Services account, in any way (by operation of law or otherwise) without roadmap.sh\u2019s prior written consent. We may transfer, assign, or delegate these Terms and our rights and obligations without consent."),(0,a.kt)("p",null,'Choice of Law; Arbitration. These Terms are governed by and will be construed under the laws of the State of California, without regard to the conflicts of laws provisions thereof. Any dispute arising from or relating to the subject matter of these Terms shall be finally settled in San Francisco County, California, in English, in accordance with the Streamlined Arbitration Rules and Procedures of Judicial Arbitration and Mediation Services, Inc. ("JAMS") then in effect, by one commercial arbitrator with substantial experience in resolving intellectual property and commercial contract disputes, who shall be selected from the appropriate list of JAMS arbitrators in accordance with such Rules. Judgment upon the award rendered by such arbitrator may be entered in any court of competent jurisdiction. Notwithstanding the foregoing obligation to arbitrate disputes, each party shall have the right to pursue injunctive or other equitable relief at any time, from any court of competent jurisdiction. For all purposes of this Agreement, the parties consent to exclusive jurisdiction and venue in the state or federal courts located in, respectively, San Francisco County, California, or the Northern District of California. Any arbitration under this Agreement will take place on an individual basis: class arbitrations and class actions are not permitted. YOU UNDERSTAND AND AGREE THAT BY ENTERING INTO THIS AGREEMENT, YOU AND ROADMAP.SH ARE EACH WAIVING THE RIGHT TO TRIAL BY JURY OR TO PARTICIPATE IN A CLASS ACTION.'),(0,a.kt)("p",null,"Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit. The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms."))}i.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/_next/static/chunks/122-24a7dd4256dd34e8.js b/_next/static/chunks/564-1bb7d36bf2fbccb8.js similarity index 89% rename from _next/static/chunks/122-24a7dd4256dd34e8.js rename to _next/static/chunks/564-1bb7d36bf2fbccb8.js index d61cc3b68..a24db77c2 100644 --- a/_next/static/chunks/122-24a7dd4256dd34e8.js +++ b/_next/static/chunks/564-1bb7d36bf2fbccb8.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[122],{2348:function(e,a,t){t.d(a,{Z:function(){return _}});var n=t(5893),s=(t(7294),t(4137)),o=t(3606),c=t(8527),p=t(8797);function i(){var e,a,t=(e=["\n line-height: 27px;\n font-size: 16px;\n color: black;\n margin-bottom: 18px;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return i=function(){return t},t}var r=p.ZP.p(i());function m(e,a){return a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}}))}function k(){var e=m(["\n position: absolute;\n top: 0;\n left: -25px;\n width: 25px;\n display: none;\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n"]);return k=function(){return e},e}function l(){var e=m(["\n position: relative;\n font-size: 32px;\n line-height: 40px;\n font-weight: 700;\n margin: 20px 0 10px !important;\n\n &:hover "," {\n display: flex;\n }\n"]);return l=function(){return e},e}function N(){var e=m(["\n font-size: 30px;\n"]);return N=function(){return e},e}function d(){var e=m(["\n margin: 22px 0 8px;\n font-size: 28px;\n"]);return d=function(){return e},e}function u(){var e=m(["\n margin: 18px 0 8px;\n font-size: 24px;\n"]);return u=function(){return e},e}function g(){var e=m(["\n margin: 14px 0 8px;\n font-size: 18px;\n"]);return g=function(){return e},e}function b(){var e=m(["\n margin: 12px 0 8px;\n font-size: 18px;\n"]);return b=function(){return e},e}var j=p.ZP.a(k()),O=p.ZP.h1(l(),j),h={h1:O,h2:(0,p.ZP)(O).attrs({as:"h2"})(N()),h3:(0,p.ZP)(O).attrs({as:"h3"})(d()),h4:(0,p.ZP)(O).attrs({as:"h4"})(u()),h5:(0,p.ZP)(O).attrs({as:"h5"})(g()),h6:(0,p.ZP)(O).attrs({as:"h6"})(b())};function f(){var e,a,t=(e=["\n margin: 25px -25px 25px -25px !important;\n padding: 20px 25px !important;\n border-radius: 10px;\n line-height: 1.5 !important;\n \n code {\n background: transparent;\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return f=function(){return t},t}var y=p.ZP.pre(f());function w(){var e,a,t=(e=["\n padding: 16px 20px;\n position: relative;\n background: #e8e8e8;\n border-radius: 5px;\n margin-bottom: 18px;\n\n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n }\n\n p + h4 {\n margin-top: 15px;\n }\n\n p {\n margin: 0;\n\n & + p {\n margin-top: 10px;\n }\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return w=function(){return t},t}var v=p.ZP.blockquote(w());function x(){var e,a,t=(e=["\n border-collapse: separate;\n width: 100%;\n border-spacing: 0;\n margin: 20px 0;\n\n th {\n color: #666;\n font-size: 12px;\n font-weight: 400;\n background: #FAFAFA;\n text-transform: uppercase;\n height: 40px;\n vertical-align: middle;\n padding: 5px 10px;\n }\n\n td {\n font-size: 14px;\n padding: 10px;\n border-bottom: 1px solid #EAEAEA;\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return x=function(){return t},t}var T=p.ZP.table(x());function C(){var e,a,t=(e=['\n position: relative;\n max-width: 100%;\n margin-bottom: 18px;\n\n &:before {\n height: 0;\n content: "";\n display: block;\n padding-bottom: 50%;\n }\n\n & > iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return C=function(){return t},t}var $=p.ZP.div(C());function P(){var e,a,t=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return P=function(){return t},t}var S=p.ZP.img(P());function q(){var e,a,t=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return q=function(){return t},t}var I=p.ZP.a(q()),D=function(e){var a=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,n.jsx)(I,{href:e.href,target:a?"_blank":"_self",children:e.children})};function A(e,a){return a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}}))}function M(){var e=A(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return M=function(){return e},e}function E(){var e=A(["\n margin-bottom: 7px;\n"]);return E=function(){return e},e}var H=p.ZP.ul(M()),B=p.ZP.li(E()),W=t(5193),L=t(9876);function R(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}var z=function(e){for(var a=1;a=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={title:"WebStorm \u2014 Project History",description:"Learn how to peek through the history of any git repository to learn how it grew.",url:"/guides/project-history",fileName:"project-history",featured:!0,author:"kamranahmedse",updatedAt:"2020-07-16T19:59:14.191Z",createdAt:"2020-07-16T19:59:14.191Z"},c={guideMeta:o};function p(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},c,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,'Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/big-o-notation"}),"previous guide here"),"."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/asymptotic-notation.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/asymptotic-notation.png",alt:null})))))}p.isMDXComponent=!0},4109:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/avoid-render-blocking-javascript-with-async-defer.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/avoid-render-blocking-javascript-with-async-defer.png",alt:null})))))}c.isMDXComponent=!0},4048:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/basic-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/basic-authentication.png",alt:null})))))}c.isMDXComponent=!0},4340:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. "),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/big-o-notation.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/big-o-notation.png",alt:null})))))}c.isMDXComponent=!0},2963:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/character-encodings.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/character-encodings.png",alt:null})))))}c.isMDXComponent=!0},1123:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"The image below details the differences between the continuous integration and continuous delivery. Also, here is the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.youtube.com/watch?v=nyKZTKQS_EQ"}),"accompanying video on implementing that with GitHub actions"),"."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/ci-cd.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/ci-cd.png",alt:null})))))}c.isMDXComponent=!0},5298:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Design patterns are solutions to recurring problems; ",(0,n.kt)("strong",{parentName:"p"},"guidelines on how to tackle certain problems"),". They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations."),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems")),(0,n.kt)("p",null,"Wikipedia describes them as"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.")),(0,n.kt)("h2",null,"Be Careful"),(0,n.kt)("p",null,"Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns."),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Design patterns are not a silver bullet to all your problems."),(0,n.kt)("li",{parentName:"ul"},"Do not try to force them; bad things are supposed to happen, if done so. "),(0,n.kt)("li",{parentName:"ul"},"Keep in mind that design patterns are solutions ",(0,n.kt)("strong",{parentName:"li"},"to")," problems, not solutions ",(0,n.kt)("strong",{parentName:"li"},"finding")," problems; so don't overthink."),(0,n.kt)("li",{parentName:"ul"},"If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code.")),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways.")),(0,n.kt)("h2",null,"Types of Design Patterns"),(0,n.kt)("p",null,"This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Design_Patterns"}),"the book which introduced these design patterns"),". There are three types of design patterns:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#creational-design-patterns"}),"Creational")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#structural-design-patterns"}),"Structural")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#behavioral-design-patterns"}),"Behavioral"))),(0,n.kt)("h2",null,"Creational Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Creational patterns are focused towards how to instantiate an object or group of related objects.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation.")),(0,n.kt)("p",null,"There are 6 types of Creational patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-simple-factory"}),"Simple Factory")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-factory-method"}),"Factory Method")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-abstract-factory"}),"Abstract Factory")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-builder"}),"Builder")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-prototype"}),"Prototype")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-singleton"}),"Singleton"))),(0,n.kt)("h2",null,"\ud83c\udfe0 Simple Factory"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Simple factory simply generates an instance for client without exposing any instantiation logic to the client")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'In object-oriented programming (OOP), a factory is an object for creating other objects \u2013 formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new".')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"First of all we have a door interface and the implementation"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"width")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"height")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our door factory that makes the door and returns it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Make me a door of 100x200"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"DoorFactory",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"200"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Width: '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Height: '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Make me a door of 50x100"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door2")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"DoorFactory",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"50"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to Use?")),(0,n.kt)("p",null,"When creating an object is not just a few assignments and involves some logic, it makes sense to put it in a dedicated factory instead of repeating the same code everywhere."),(0,n.kt)("h2",null,"\ud83c\udfed Factory Method"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider the case of a hiring manager. It is impossible for one person to interview for each of the positions. Based on the job opening, she has to decide and delegate the interview steps to different people.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It provides a way to delegate the instantiation logic to child classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In class-based programming, the factory method pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by creating objects by calling a factory method\u2014either specified in an interface and implemented by child classes, or implemented in a base class and optionally overridden by derived classes\u2014rather than by calling a constructor.")),(0,n.kt)("p",null," ",(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our hiring manager example above. First of all we have an interviewer interface and some implementations for it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Developer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Asking about design patterns!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"CommunityExecutive")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Asking about community building'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let us create our ",(0,n.kt)("inlineCode",{parentName:"p"},"HiringManager")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Factory method"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$interviewer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$interviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n")),(0,n.kt)("p",null,"Now any child can extend it and provide the required interviewer"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DevelopmentManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Developer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"MarketingManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"CommunityExecutive"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"and then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$devManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DevelopmentManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$devManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Asking about design patterns"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$marketingManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"MarketingManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$marketingManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Asking about community building."),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"Useful when there is some generic processing in a class but the required sub-class is dynamically decided at runtime. Or putting it in other words, when the client doesn't know what exact sub-class it might need."),(0,n.kt)("h2",null,"\ud83d\udd28 Abstract Factory"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Extending our door example from Simple Factory. Based on your needs you might get a wooden door from a wooden door shop, iron door from an iron shop or a PVC door from the relevant shop. Plus you might need a guy with different kind of specialities to fit the door, for example a carpenter for wooden door, welder for iron door etc. As you can see there is a dependency between the doors now, wooden door needs carpenter, iron door needs a welder etc.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A factory of factories; a factory that groups the individual but related/dependent factories together without specifying their concrete classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating the door example above. First of all we have our ",(0,n.kt)("inlineCode",{parentName:"p"},"Door")," interface and some implementation for it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I am a wooden door'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IronDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I am an iron door'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have some fitting experts for each door type"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Welder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I can only fit iron doors'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Carpenter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I can only fit wooden doors'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now we have our abstract factory that would let us make family of related objects i.e. wooden door factory would create a wooden door and wooden door fitting expert and iron door factory would create an iron door and iron door fitting expert"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Wooden factory to return carpenter and wooden door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoorFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Carpenter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Iron door factory to get iron door and the relevant fitting expert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IronDoorFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IronDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Welder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoorFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I am a wooden door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I can only fit wooden doors"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Same for Iron Factory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IronDoorFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I am an iron door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I can only fit iron doors"),"\n")),(0,n.kt)("p",null,"As you can see the wooden door factory has encapsulated the ",(0,n.kt)("inlineCode",{parentName:"p"},"carpenter")," and the ",(0,n.kt)("inlineCode",{parentName:"p"},"wooden door")," also iron door factory has encapsulated the ",(0,n.kt)("inlineCode",{parentName:"p"},"iron door")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"welder"),". And thus it had helped us make sure that for each of the created door, we do not get a wrong fitting expert. "),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When there are interrelated dependencies with not-that-simple creation logic involved"),(0,n.kt)("h2",null,"\ud83d\udc77 Builder"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'Imagine you are at Hardee\'s and you order a specific deal, lets say, "Big Hardee" and they hand it over to you without ',(0,n.kt)("em",{parentName:"p"},"any questions"),"; this is the example of simple factory. But there are cases when the creation logic might involve more steps. For example you want a customized Subway deal, you have several options in how your burger is made e.g what bread do you want? what types of sauces would you like? What cheese would you want? etc. In such cases builder pattern comes to the rescue.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The builder pattern is an object creation software design pattern with the intentions of finding a solution to the telescoping constructor anti-pattern.")),(0,n.kt)("p",null,"Having said that let me add a bit about what telescoping constructor anti-pattern is. At one point or the other we have all seen a constructor like below:"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"As you can see; the number of constructor parameters can quickly get out of hand and it might become difficult to understand the arrangement of parameters. Plus this parameter list could keep on growing if you would want to add more options in future. This is called telescoping constructor anti-pattern."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"The sane alternative is to use the builder pattern. First of all we have our burger that we want to make"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Burger"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"BurgerBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then we have the builder"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"BurgerBuilder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addPepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addLettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addCheese"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addTomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Burger"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Burger"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as:"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$burger")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"BurgerBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"14"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addPepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addLettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addTomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When there could be several flavors of an object and to avoid the constructor telescoping. The key difference from the factory pattern is that; factory pattern is to be used when the creation is a one step process while builder pattern is to be used when the creation is a multi step process."),(0,n.kt)("h2",null,"\ud83d\udc11 Prototype"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Remember dolly? The sheep that was cloned! Lets not get into the details but the key point here is that it is all about cloning")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Create object based on an existing object through cloning.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The prototype pattern is a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects.")),(0,n.kt)("p",null,"In short, it allows you to create a copy of an existing object and modify it to your needs, instead of going through the trouble of creating an object from scratch and setting it up."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"In PHP, it can be easily done using ",(0,n.kt)("inlineCode",{parentName:"p"},"clone")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Sheep"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Mountain Sheep'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then it can be cloned like below"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sheep"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jolly'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jolly"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mountain Sheep"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Clone and modify what is required"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"clone")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Dolly'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Dolly"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mountain sheep"),"\n")),(0,n.kt)("p",null,"Also you could use the magic method ",(0,n.kt)("inlineCode",{parentName:"p"},"__clone")," to modify the cloning behavior."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When an object is required that is similar to existing object or when the creation would be expensive as compared to cloning."),(0,n.kt)("h2",null,"\ud83d\udc8d Singleton"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"There can only be one president of a country at a time. The same president has to be brought to action, whenever duty calls. President here is singleton.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Ensures that only one object of a particular class is ever created.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.")),(0,n.kt)("p",null,"Singleton pattern is actually considered an anti-pattern and overuse of it should be avoided. It is not necessarily bad and could have some valid use-cases but should be used with caution because it introduces a global state in your application and change to it in one place could affect in the other areas and it could become pretty difficult to debug. The other bad thing about them is it makes your code tightly coupled plus mocking the singleton could be difficult."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"To create a singleton, make the constructor private, disable cloning, disable extension and create a static variable to house the instance"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"final")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"President"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hide the constructor"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"President"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__clone"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable cloning"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__wakeup"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable unserialize"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then in order to use"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"President",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president2")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"President",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"var_dump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"===")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// true"),"\n")),(0,n.kt)("h2",null,"Structural Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?"')),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, structural design patterns are design patterns that ease the design by identifying a simple way to realize relationships between entities.")),(0,n.kt)("p",null,"There are 7 types of structural patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-adapter"}),"Adapter")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-bridge"}),"Bridge")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-composite"}),"Composite")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-decorator"}),"Decorator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-facade"}),"Facade")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-flyweight"}),"Flyweight")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-proxy"}),"Proxy"))),(0,n.kt)("h2",null,"\ud83d\udd0c Adapter"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider that you have some pictures in your memory card and you need to transfer them to your computer. In order to transfer them you need some kind of adapter that is compatible with your computer ports so that you can attach memory card to your computer. In this case card reader is an adapter.\nAnother example would be the famous power adapter; a three legged plug can't be connected to a two pronged outlet, it needs to use a power adapter that makes it compatible with the two pronged outlet.\nYet another example would be a translator translating words spoken by one person to another")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Adapter pattern lets you wrap an otherwise incompatible object in an adapter to make it compatible with another class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Consider a game where there is a hunter and he hunts lions."),(0,n.kt)("p",null,"First we have an interface ",(0,n.kt)("inlineCode",{parentName:"p"},"Lion")," that all types of lions have to implement"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AfricanLion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AsianLion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And hunter expects any implementation of ",(0,n.kt)("inlineCode",{parentName:"p"},"Lion")," interface to hunt."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Hunter"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"hunt"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let's say we have to add a ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDog")," in our game so that hunter can hunt that also. But we can't do that directly because dog has a different interface. To make it compatible for our hunter, we will have to create an adapter that is compatible"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This needs to be added to the game"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WildDog"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"bark"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Adapter around wild dog to make it compatible with our game"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WildDogAdapter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WildDog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"dog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"bark"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And now the ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDog")," can be used in our game using ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDogAdapter"),"."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WildDog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDogAdapter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WildDogAdapter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$hunter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Hunter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$hunter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"hunt"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDogAdapter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("h2",null,"\ud83d\udea1 Bridge"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider you have a website with different pages and you are supposed to allow the user to change the theme. What would you do? Create multiple copies of each of the pages for each of the themes or would you just create separate theme and load them based on the user's preferences? Bridge pattern allows you to do the second i.e.")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://cloud.githubusercontent.com/assets/11269635/23065293/33b7aea0-f515-11e6-983f-98823c9845ee.png",alt:"With and without the bridge pattern"}))),(0,n.kt)("p",null,"In Plain Words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Bridge pattern is about preferring composition over inheritance. Implementation details are pushed from a hierarchy to another object with a separate hierarchy.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'The bridge pattern is a design pattern used in software engineering that is meant to "decouple an abstraction from its implementation so that the two can vary independently"')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating our WebPage example from above. Here we have the ",(0,n.kt)("inlineCode",{parentName:"p"},"WebPage")," hierarchy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"About")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"About page in "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Careers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Careers page in "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And the separate theme hierarchy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DarkTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Dark Black'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LightTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Off white'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AquaTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Light blue'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And both the hierarchies"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DarkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$about")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"About"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$careers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Careers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$about"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),'// "About page in Dark Black";'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$careers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),'// "Careers page in Dark Black";'),"\n")),(0,n.kt)("h2",null,"\ud83c\udf3f Composite"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Every organization is composed of employees. Each of the employees has the same features i.e. has a salary, has some responsibilities, may or may not report to someone, may or may not have some subordinates etc.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Composite pattern lets clients treat the individual objects in a uniform manner.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'In software engineering, the composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets clients treat individual objects and compositions uniformly.')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our employees example from above. Here we have different employee types"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Developer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n \n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Designer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have an organization which consists of several different types of employees"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Organization"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employees"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Employee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"employees"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getNetSalaries"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"employees")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Prepare the employees"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Developer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"12000"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Designer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"15000"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Add them to organization"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Net salaries: "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getNetSalaries"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Net Salaries: 27000"),"\n")),(0,n.kt)("h2",null,"\u2615 Decorator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Imagine you run a car service shop offering multiple services. Now how do you calculate the bill to be charged? You pick one service and dynamically keep adding to it the prices for the provided services till you get the final cost. Here each type of service is a decorator.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Decorator pattern lets you dynamically change the behavior of an object at run time by wrapping them in an object of a decorator class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the decorator pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class. The decorator pattern is often useful for adhering to the Single Responsibility Principle, as it allows functionality to be divided between classes with unique areas of concern.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Lets take coffee for example. First of all we have a simple coffee implementing the coffee interface"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SimpleCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"10"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Simple coffee'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"We want to make the code extensible to allow options to modify it if required. Lets make some add-ons (decorators)"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"MilkCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', milk'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WhipCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', whip'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"VanillaCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', vanilla'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Lets make a coffee now"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SimpleCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 10"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"MilkCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 12"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WhipCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 17"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk, whip"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"VanillaCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 20"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk, whip, vanilla"),"\n")),(0,n.kt)("h2",null,"\ud83d\udce6 Facade"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'How do you turn on the computer? "Hit the power button" you say! That is what you believe because you are using a simple interface that computer provides on the outside, internally it has to do a lot of stuff to make it happen. This simple interface to the complex subsystem is a facade.')),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Facade pattern provides a simplified interface to a complex subsystem.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A facade is an object that provides a simplified interface to a larger body of code, such as a class library.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our computer example from above. Here we have the computer class"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Computer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getElectricShock"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Ouch!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeSound"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Beep beep!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showLoadingScreen"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Loading.."'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"bam"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Ready to be used!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"closeEverything"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Bup bup bup buzzzz!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sooth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Zzzzz"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"pullCurrent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Haaah!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Here we have the facade"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ComputerFacade"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getElectricShock"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeSound"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"showLoadingScreen"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"bam"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"closeEverything"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pullCurrent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sooth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now to use the facade"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ComputerFacade"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ouch! Beep beep! Loading.. Ready to be used!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bup bup buzzz! Haah! Zzzzz"),"\n")),(0,n.kt)("h2",null,"\ud83c\udf43 Flyweight"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Did you ever have fresh tea from some stall? They often make more than one cup that you demanded and save the rest for any other customer so to save the resources e.g. gas etc. Flyweight pattern is all about that i.e. sharing.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It is used to minimize memory usage or computational expenses by sharing as much as possible with similar objects.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In computer programming, flyweight is a software design pattern. A flyweight is an object that minimizes memory use by sharing as much data as possible with other similar objects; it is a way to use objects in large numbers when a simple repeated representation would use an unacceptable amount of memory.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our tea example from above. First of all we have tea types and tea maker"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Anything that will be cached is flyweight."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Types of tea here will be flyweights."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"KarakTea"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Acts as a factory and saves the tea"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TeaMaker"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$availableTea")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"empty"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"KarakTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have the ",(0,n.kt)("inlineCode",{parentName:"p"},"TeaShop")," which takes orders and serves them"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TeaShop"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$orders"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"TeaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"teaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaType"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"orders"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaType"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"serve"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"orders")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=>")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Serving tea to table# "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And it can be used as below"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TeaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TeaShop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'less sugar'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'more milk'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'without sugar'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"serve"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 1"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 2"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 5"),"\n")),(0,n.kt)("h2",null,"\ud83c\udfb1 Proxy"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Have you ever used an access card to go through a door? There are multiple options to open that door i.e. it can be opened either using access card or by pressing a button that bypasses the security. The door's main functionality is to open but there is a proxy added on top of it to add some functionality. Let me better explain it using the code example below.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Using the proxy pattern, a class represents the functionality of another class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A proxy, in its most general form, is a class functioning as an interface to something else. A proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our security door example from above. Firstly we have the door interface and an implementation of door"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LabDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Opening lab door"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Closing the lab door"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have a proxy to secure any doors that we want"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SecuredDoor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"authenticate"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"else")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Big no! It ain\'t possible."'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"authenticate"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"===")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'$ecr@t'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And here is how it can be used"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SecuredDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"LabDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'invalid'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Big no! It ain't possible."),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'$ecr@t'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Opening lab door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Closing lab door"),"\n")),(0,n.kt)("p",null,"Yet another example would be some sort of data-mapper implementation. For example, I recently made an ODM (Object Data Mapper) for MongoDB using this pattern where I wrote a proxy around mongo classes while utilizing the magic method ",(0,n.kt)("inlineCode",{parentName:"p"},"__call()"),". All the method calls were proxied to the original mongo class and result retrieved was returned as it is but in case of ",(0,n.kt)("inlineCode",{parentName:"p"},"find")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"findOne")," data was mapped to the required class objects and the object was returned instead of ",(0,n.kt)("inlineCode",{parentName:"p"},"Cursor"),"."),(0,n.kt)("h2",null,"Behavioral Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'It is concerned with assignment of responsibilities between the objects. What makes them different from structural patterns is they don\'t just specify the structure but also outline the patterns for message passing/communication between them. Or in other words, they assist in answering "How to run a behavior in software component?"')),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, behavioral design patterns are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication.")),(0,n.kt)("p",null,"There are 10 types of behavioral design patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-chain-of-responsibility"}),"Chain of Responsibility")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-command"}),"Command")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-iterator"}),"Iterator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-mediator"}),"Mediator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-memento"}),"Memento")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-observer"}),"Observer")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-visitor"}),"Visitor")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-strategy"}),"Strategy")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-state"}),"State")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-template-method"}),"Template Method"))),(0,n.kt)("h2",null,"\ud83d\udd17 Chain of Responsibility"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"For example, you have three payment methods (",(0,n.kt)("inlineCode",{parentName:"p"},"A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"C"),") setup in your account; each having a different amount in it. ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," has 100 USD, ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," has 300 USD and ",(0,n.kt)("inlineCode",{parentName:"p"},"C")," having 1000 USD and the preference for payments is chosen as ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," then ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," then ",(0,n.kt)("inlineCode",{parentName:"p"},"C"),". You try to purchase something that is worth 210 USD. Using Chain of Responsibility, first of all account ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," will be checked if it can make the purchase, if yes purchase will be made and the chain will be broken. If not, request will move forward to account ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," checking for amount if yes chain will be broken otherwise the request will keep forwarding till it finds the suitable handler. Here ",(0,n.kt)("inlineCode",{parentName:"p"},"A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"C")," are links of the chain and the whole phenomenon is Chain of Responsibility.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It helps building a chain of objects. Request enters from one end and keeps going from object to object till it finds the suitable handler.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented design, the chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating our account example above. First of all we have a base account having the logic for chaining the accounts together and some accounts"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Account")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$account"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$account"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"canPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sprintf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Paid %s using %s'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"get_called_class"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"elseif")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sprintf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Cannot pay using %s. Proceeding ..'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"get_called_class"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"else")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"throw")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Exception"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'None of the accounts have enough balance'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"canPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amount"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"bool"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),">=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amount"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bank")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Paypal")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bitcoin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let's prepare the chain using the links defined above (i.e. Bank, Paypal, Bitcoin)"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Let's prepare a chain like below"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// $bank->$paypal->$bitcoin"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"//"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// First priority bank"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If bank can't pay then paypal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If paypal can't pay then bit coin"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bank with balance 100"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"200"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Paypal with balance 200"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bitcoin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bitcoin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"300"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bitcoin with balance 300"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bitcoin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Let's try to pay using the first priority i.e. bank"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"259"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output will be"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// =============="),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Cannot pay using bank. Proceeding .."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Cannot pay using paypal. Proceeding ..:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Paid 259 using Bitcoin!"),"\n")),(0,n.kt)("h2",null,"\ud83d\udc6e Command"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A generic example would be you ordering food at a restaurant. You (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Client"),") ask the waiter (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker"),") to bring some food (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Command"),") and waiter simply forwards the request to Chef (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Receiver"),") who has the knowledge of what and how to cook.\nAnother example would be you (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Client"),") switching on (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Command"),") the television (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Receiver"),") using a remote control (",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker"),").")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Allows you to encapsulate actions in objects. The key idea behind this pattern is to provide the means to decouple client from receiver.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to encapsulate all information needed to perform an action or trigger an event at a later time. This information includes the method name, the object that owns the method and values for the method parameters.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"First of all we have the receiver that has the implementation of every action that could be performed"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Receiver"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bulb"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Bulb has been lit"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Darkness!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"then we have an interface that each of the commands are going to implement and then we have a set of commands"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TurnOn")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TurnOff")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have an ",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker")," with whom the client will interact to process any commands"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Invoker"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"RemoteControl"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Command")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$command"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$command"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Finally let's see how we can use it in our client"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOn")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TurnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOff")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TurnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RemoteControl"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bulb has been lit!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Darkness!"),"\n")),(0,n.kt)("p",null,"Command pattern can also be used to implement a transaction based system. Where you keep maintaining the history of commands as soon as you execute them. If the final command is successfully executed, all good otherwise just iterate through the history and keep executing the ",(0,n.kt)("inlineCode",{parentName:"p"},"undo")," on all the executed commands."),(0,n.kt)("h2",null,"\u27bf Iterator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"An old radio set will be a good example of iterator, where user could start at some channel and then use next or previous buttons to go through the respective channels. Or take an example of MP3 player or a TV set where you could press the next and previous buttons to go through the consecutive channels or in other words they all provide an interface to iterate through the respective channels, songs or radio stations. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It presents a way to access the elements of an object without exposing the underlying presentation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers; in some cases, algorithms are necessarily container-specific and thus cannot be decoupled.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"In PHP it is quite easy to implement using SPL (Standard PHP Library). Translating our radio stations example from above. First of all we have ",(0,n.kt)("inlineCode",{parentName:"p"},"RadioStation")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"RadioStation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"frequency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our iterator"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token package"}),"Countable"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token package"}),"Iterator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"StationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Countable"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," Iterator\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token doc-comment comment"}),"/** ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"@var")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token class-name"}),"RadioStation",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"]"))," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token parameter"}),"$stations")," */"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stations")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token doc-comment comment"}),"/** ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"@var")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token class-name"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"int"))," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token parameter"}),"$counter")," */"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"removeStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemove"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemove"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"array_filter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"count"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"int"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"count"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"current"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"RadioStation"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"key"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"next"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"rewind"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"valid"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"bool"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"isset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"StationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"89"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"101"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"102"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"103.2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"removeStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"89"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Will remove station 89"),"\n")),(0,n.kt)("h2",null,"\ud83d\udc7d Mediator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Mediator pattern adds a third party object (called mediator) to control the interaction between two objects (called colleagues). It helps reduce the coupling between the classes communicating with each other. Because now they don't need to have the knowledge of each other's implementation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the mediator pattern defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program's running behavior.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Here is the simplest example of a chat room (i.e. mediator) with users (i.e. colleagues) sending messages to each other."),(0,n.kt)("p",null,"First of all, we have the mediator i.e. the chat room"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ChatRoomMediator")," \n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mediator"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ChatRoom")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ChatRoomMediator"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$time")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"date"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'M d, y H:i'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sender")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$time")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'['")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sender")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"']:'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our users i.e. colleagues"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"ChatRoomMediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"chatMediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And the usage"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ChatRoom"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"User"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"User"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hi there!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hey!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output will be"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Feb 14, 10:58 [John]: Hi there!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Feb 14, 10:58 [Jane]: Hey!"),"\n")),(0,n.kt)("h2",null,"\ud83d\udcbe Memento"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Take the example of calculator (i.e. originator), where whenever you perform some calculation the last calculation is saved in memory (i.e. memento) so that you can get back to it and maybe get it restored using some action buttons (i.e. caretaker).")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Memento pattern is about capturing and storing the current state of an object in a manner that it can be restored later on in a smooth manner.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The memento pattern is a software design pattern that provides the ability to restore an object to its previous state (undo via rollback).")),(0,n.kt)("p",null,"Usually useful when you need to provide some sort of undo functionality."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Lets take an example of text editor which keeps saving the state from time to time and that you can restore if you want."),(0,n.kt)("p",null,"First of all we have our memento object that will be able to hold the editor state"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"EditorMemento"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our editor i.e. originator that is going to use memento object"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Editor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"''"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"' '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"save"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"EditorMemento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"restore"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"EditorMemento")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$memento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$memento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Type some stuff"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'This is the first sentence.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'This is second.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Save the state to restore to : This is the first sentence. This is second."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$saved")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"save"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Type some more"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'And this is third.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Content before Saving"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This is the first sentence. This is second. And this is third."),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Restoring to last saved state"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"restore"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$saved"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This is the first sentence. This is second."),"\n")),(0,n.kt)("h2",null,"\ud83d\ude0e Observer"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A good example would be the job seekers where they subscribe to some job posting site and they are notified whenever there is a matching job opportunity. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Defines a dependency between objects so that whenever an object changes its state, all its dependents are notified.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our example from above. First of all we have job seekers that need to be notified for a job posting"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"JobPost"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"title")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getTitle"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"JobSeeker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Observer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"onJobPosted"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$job"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do something with the job posting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hi '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'! New job posted: '"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$job"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getTitle"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our job postings to which the job seekers will subscribe"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"EmploymentAgency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Observable"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"notify"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"observers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"onJobPosted"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Observer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"observers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addJob"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"notify"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Create subscribers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$johnDoe")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobSeeker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$janeDoe")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobSeeker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Create publisher and attach subscribers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"EmploymentAgency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$johnDoe"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$janeDoe"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Add a new job and see if subscribers get notified"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addJob"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobPost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Software Engineer'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hi John Doe! New job posted: Software Engineer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hi Jane Doe! New job posted: Software Engineer"),"\n")),(0,n.kt)("h2",null,"\ud83c\udfc3 Visitor"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider someone visiting Dubai. They just need a way (i.e. visa) to enter Dubai. After arrival, they can come and visit any place in Dubai on their own without having to ask for permission or to do some leg work in order to visit any place here; just let them know of a place and they can visit it. Visitor pattern lets you do just that, it helps you add places to visit so that they can visit as much as they can without having to do any legwork.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Visitor pattern lets you add further operations to objects without having to modify them.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming and software engineering, the visitor design pattern is a way of separating an algorithm from an object structure on which it operates. A practical result of this separation is the ability to add new operations to existing object structures without modifying those structures. It is one way to follow the open/closed principle.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Let's take an example of a zoo simulation where we have several different kinds of animals and we have to make them Sound. Let's translate this using visitor pattern"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Visitee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Visitor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our implementations for the animals"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"shout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Ooh oo aa aa!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Roaaar!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Tuut tuttu tuutt!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Let's implement our visitor"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Speak")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"shout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ooh oo aa aa! "),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Roaaar!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Tuut tutt tuutt!"),"\n")),(0,n.kt)("p",null,"We could have done this simply by having an inheritance hierarchy for the animals but then we would have to modify the animals whenever we would have to add new actions to animals. But now we will not have to change them. For example, let's say we are asked to add the jump behavior to the animals, we can simply add that by creating a new visitor i.e."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Jump")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jumped 20 feet high! on to the tree!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jumped 7 feet! Back on the ground!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Walked on water a little and disappeared'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And for the usage"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ooh oo aa aa!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jumped 20 feet high! on to the tree!"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Roaaar!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jumped 7 feet! Back on the ground!"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Tuut tutt tuutt!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Walked on water a little and disappeared"),"\n")),(0,n.kt)("h2",null,"\ud83d\udca1 Strategy"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider the example of sorting, we implemented bubble sort but the data started to grow and bubble sort started getting very slow. In order to tackle this we implemented Quick sort. But now although the quick sort algorithm was doing better for large datasets, it was very slow for smaller datasets. In order to handle this we implemented a strategy where for small datasets, bubble sort will be used and for larger, quick sort.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Strategy pattern allows you to switch the algorithm or strategy based upon the situation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In computer programming, the strategy pattern (also known as the policy pattern) is a behavioural software design pattern that enables an algorithm's behavior to be selected at runtime.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our example from above. First of all we have our strategy interface and different strategy implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"BubbleSortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Sorting using bubble sort"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do sorting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"QuickSortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Sorting using quick sort"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do sorting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then we have our client that is going to use any strategy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Sorter"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"SortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"BubbleSortStrategy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output : Sorting using bubble sort"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"QuickSortStrategy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output : Sorting using quick sort"),"\n")),(0,n.kt)("h2",null,"\ud83d\udca2 State"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Imagine you are using some drawing application, you choose the paint brush to draw. Now the brush changes its behavior based on the selected color i.e. if you have chosen red color it will draw in red, if blue then it will be in blue etc. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It lets you change the behavior of a class when the state changes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The state pattern is a behavioral software design pattern that implements a state machine in an object-oriented way. With the state pattern, a state machine is implemented by implementing each individual state as a derived class of the state pattern interface, and implementing state transitions by invoking methods defined by the pattern's superclass.\nThe state pattern can be interpreted as a strategy pattern which is able to switch the current strategy through invocations of methods defined in the pattern's interface.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Let's take an example of text editor, it lets you change the state of text that is typed i.e. if you have selected bold, it starts writing in bold, if italic then in italics etc."),(0,n.kt)("p",null,"First of all we have our state interface and some state implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"UpperCase")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"strtoupper"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LowerCase")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"strtolower"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DefaultText")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our editor"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TextEditor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WritingState")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WritingState")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TextEditor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DefaultText"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'First line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"UpperCase"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Second line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Third line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"LowerCase"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Fourth line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Fifth line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// First line"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// SECOND LINE"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// THIRD LINE"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// fourth line"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// fifth line"),"\n")),(0,n.kt)("h2",null,"\ud83d\udcd2 Template Method"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Suppose we are getting some house built. The steps for building might look like"),(0,n.kt)("ul",{parentName:"blockquote"},(0,n.kt)("li",{parentName:"ul"},"Prepare the base of house"),(0,n.kt)("li",{parentName:"ul"},"Build the walls"),(0,n.kt)("li",{parentName:"ul"},"Add roof"),(0,n.kt)("li",{parentName:"ul"},"Add other floors"))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The order of these steps could never be changed i.e. you can't build the roof before building the walls etc but each of the steps could be modified for example walls can be made of wood or polyester or stone.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Template method defines the skeleton of how a certain algorithm could be performed, but defers the implementation of those steps to the children classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the template method pattern is a behavioral design pattern that defines the program skeleton of an algorithm in an operation, deferring some steps to subclasses. It lets one redefine certain steps of an algorithm without changing the algorithm's structure.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Imagine we have a build tool that helps us test, lint, build, generate build reports (i.e. code coverage reports, linting report etc) and deploy our app on the test server."),(0,n.kt)("p",null,"First of all we have our base class that specifies the skeleton for the build algorithm"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Template method"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"final")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we can have our implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AndroidBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Running android tests'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Linting the android code'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Assembling the android build'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Deploying android build to server'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IosBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Running ios tests'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Linting the ios code'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Assembling the ios build'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Deploying ios build to server'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$androidBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AndroidBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$androidBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Running android tests"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Linting the android code"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Assembling the android build"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Deploying android build to server"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$iosBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IosBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$iosBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Running ios tests"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Linting the ios code"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Assembling the ios build"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Deploying ios build to server"),"\n")),(0,n.kt)("h2",null,"Wrap Up Folks"),(0,n.kt)("p",null,"And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it."))}c.isMDXComponent=!0},8303:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/dhcp.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/dhcp.png",alt:null})))))}c.isMDXComponent=!0},6210:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works."),(0,n.kt)("p",null,"DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://i.imgur.com/z9rwm5A.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"https://i.imgur.com/z9rwm5A.png",alt:null})))))}c.isMDXComponent=!0},5263:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the \u201cAtwood Law\u201d which states that ",(0,n.kt)("em",{parentName:"p"},"Any application that can be written in JavaScript will eventually be written in JavaScript"),". Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption."),(0,n.kt)("h3",null,"JavaScript is announced"),(0,n.kt)("p",null,"JavaScript was initially created by ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/BrendanEich"}),"Brendan Eich")," of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named ",(0,n.kt)("inlineCode",{parentName:"p"},"Mocha")," by the creator, which was later renamed to ",(0,n.kt)("inlineCode",{parentName:"p"},"LiveScript"),". In 1996, about a year later after the release, NetScape decided to rename it to be ",(0,n.kt)("inlineCode",{parentName:"p"},"JavaScript")," with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript."),(0,n.kt)("h3",null,"ES1, ES2 and ES3"),(0,n.kt)("p",null,"In 1996, Netscape decided to submit it to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Ecma_International"}),"ECMA International")," with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, ",(0,n.kt)("inlineCode",{parentName:"p"},"ECMAScript")," was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999."),(0,n.kt)("h3",null,"Decade of Silence and ES4"),(0,n.kt)("p",null,"After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads \u2014 adding polyfills to battle compatibility issues between different browsers."),(0,n.kt)("h3",null,"From silence to ES5"),(0,n.kt)("p",null,"Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn\u2019t much of a splash in the water \u2014 it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the \u201cmodern\u201d standards."),(0,n.kt)("h3",null,"Release of ES6 \u2014 ECMAScript 2015"),(0,n.kt)("p",null,"After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://es6-features.org/#Constants"}),"etc")),(0,n.kt)("p",null,"Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don\u2019t have to wait for the full specification to be drafted and approved \u2014 thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year."),(0,n.kt)("h3",null,"Release of ES7 \u2014 ECMAScript 2016"),(0,n.kt)("p",null,"In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Exponentiation operator ",(0,n.kt)("inlineCode",{parentName:"li"},"**")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Array.prototype.includes"))),(0,n.kt)("h3",null,"Release of ES8 \u2014 ECMAScript 2017"),(0,n.kt)("p",null,"The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Object.values()")," and ",(0,n.kt)("inlineCode",{parentName:"li"},"Object.entries()")),(0,n.kt)("li",{parentName:"ul"},"String padding i.e. ",(0,n.kt)("inlineCode",{parentName:"li"},"String.prototype.padEnd()")," and ",(0,n.kt)("inlineCode",{parentName:"li"},"String.prototype.padStart()")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Object.getOwnPropertyDescriptors")),(0,n.kt)("li",{parentName:"ul"},"Trailing commas in function parameter lists and calls"),(0,n.kt)("li",{parentName:"ul"},"Async functions")),(0,n.kt)("h3",null,"What is ESNext then?"),(0,n.kt)("p",null,"ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing ",(0,n.kt)("inlineCode",{parentName:"p"},"ES2017")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"ES8")," is ",(0,n.kt)("inlineCode",{parentName:"p"},"ESNext"),"."),(0,n.kt)("h3",null,"What does the future hold?"),(0,n.kt)("p",null,"Since the release of ES6, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39"}),"TC39")," has quite streamlined their process. TC39 operates through a Github organization now and there are ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39/proposals"}),"several proposals")," for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39/proposals"}),"submit a proposal")," thus resulting in increasing the participation from the community. Every proposal goes through ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://tc39.github.io/process-document/"}),"four stages of maturity")," before it makes it into the specification."),(0,n.kt)("p",null,"And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/6.0/"}),"ES6"),", ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/7.0/"}),"ES7")," and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/8.0/"}),"ES8"),"."))}c.isMDXComponent=!0},299:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. "),(0,n.kt)("h3",null,"Introduction"),(0,n.kt)("p",null,"What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/mJYVvTh.png",alt:"Web Cache"}))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later.")),(0,n.kt)("p",null,"Before we get into further details, let me give you an overview of the terms that will be used, further in the article"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Client")," could be your browser or any application requesting the server for some resource"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Origin Server"),", the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Stale Content")," is the cached but expired content"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Fresh Content")," is the content available in cache that hasn't expired yet"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Cache Validation")," is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Cache Invalidation")," is the process of removing any stale content available in the cache")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/9MjlzvW.png",alt:null}))),(0,n.kt)("h3",null,"Caching Locations"),(0,n.kt)("p",null,"Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#browser-cache"}),"Browser Cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-cache"}),"Proxy Cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#reverse-proxy-cache"}),"Reverse Proxy Cache"))),(0,n.kt)("h4",null,"Browser Cache"),(0,n.kt)("p",null,"You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/mJYVvTh.png",alt:"Web Cache"}))),(0,n.kt)("p",null,'A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later.'),(0,n.kt)("h4",null,"Proxy Cache"),(0,n.kt)("p",null,"Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/3mj6e1O.png",alt:"Proxy Cache"}))),(0,n.kt)("h4",null,"Reverse Proxy Cache"),(0,n.kt)("p",null,"Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/Eg4Cru3.png",alt:"Reverse Proxy Cache"}))),(0,n.kt)("p",null,"Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches."),(0,n.kt)("h3",null,"Caching Headers"),(0,n.kt)("p",null,"So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content."),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#expires"}),"Expires")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#pragma"}),"Pragma")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#cache-control"}),"Cache-Control"),(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#private"}),"private")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#public"}),"public")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#no-store"}),"no-store")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#no-cache"}),"no-cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#max-age"}),"max-age: seconds")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#s-maxage"}),"s-maxage: seconds")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#must-revalidate"}),"must-revalidate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-revalidate"}),"proxy-revalidate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#mixing-values"}),"Mixing Values")))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#validators"}),"Validators"),(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#etag"}),"ETag")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#last-modified"}),"Last-Modified"))))),(0,n.kt)("h4",null,"Expires"),(0,n.kt)("p",null,"Before HTTP/1.1 and introduction of ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control"),", there was ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Expires: Mon, 13 Mar 2017 12:22:00 GMT\n")),(0,n.kt)("p",null,"It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. "),(0,n.kt)("p",null,"Although, ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control"),". "),(0,n.kt)("h4",null,"Pragma"),(0,n.kt)("p",null,"Another one from the old, pre HTTP/1.1 days, is ",(0,n.kt)("inlineCode",{parentName:"p"},"Pragma"),". Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see ",(0,n.kt)("inlineCode",{parentName:"p"},"Pragma: no-cache")," being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control")," header should be used to control the caching."),(0,n.kt)("h4",null,"Cache-Control"),(0,n.kt)("p",null,"Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header."),(0,n.kt)("p",null,"Value for the ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control")," header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. "),(0,n.kt)("h5",null,"private"),(0,n.kt)("p",null,"Setting the cache to ",(0,n.kt)("inlineCode",{parentName:"p"},"private")," means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser)"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: private\n")),(0,n.kt)("p",null,"Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. "),(0,n.kt)("h5",null,"public"),(0,n.kt)("p",null,"If set to ",(0,n.kt)("inlineCode",{parentName:"p"},"public"),", apart from being cached by the client, it can also be cached by the proxies; serving many other users"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: public\n")),(0,n.kt)("h5",null,"no-store"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"no-store"))," specifies that the content is not to be cached by any of the caches"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: no-store\n")),(0,n.kt)("h5",null,"no-cache"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"no-cache"))," indicates that the cache can be maintained but the cached content is to be re-validated (using ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, no-cache, public\n")),(0,n.kt)("h5",null,"max-age: seconds"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"max-age"))," specifies the number of seconds for which the content will be cached. For example, if the ",(0,n.kt)("inlineCode",{parentName:"p"},"cache-control")," looks like below:"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, public\n")),(0,n.kt)("p",null,"it would mean that the content is publicly cacheable and will be considered stale after 60 minutes"),(0,n.kt)("h5",null,"s-maxage: seconds"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"s-maxage"))," here ",(0,n.kt)("inlineCode",{parentName:"p"},"s-")," prefix stands for shared. This directive specifically targets the shared caches. Like ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age")," it also gets the number of seconds for which something is to be cached. If present, it will override ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"expires")," headers for shared caching."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: s-maxage=3600, public\n")),(0,n.kt)("h5",null,"must-revalidate"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"must-revalidate"))," it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. "),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, public, must-revalidate\n")),(0,n.kt)("h5",null,"proxy-revalidate"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"proxy-revalidate"))," is similar to ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," but it specifies the same for shared or proxy caches. In other words ",(0,n.kt)("inlineCode",{parentName:"p"},"proxy-revalidate")," is to ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," as ",(0,n.kt)("inlineCode",{parentName:"p"},"s-maxage")," is to ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age"),". But why did they not call it ",(0,n.kt)("inlineCode",{parentName:"p"},"s-revalidate"),"?. I have no idea why, if you have any clue please leave a comment below. "),(0,n.kt)("h5",null,"Mixing Values"),(0,n.kt)("p",null,"You can combine these directives in different ways to achieve different caching behaviors, however ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache/no-store")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"public/private")," are mutually exclusive. "),(0,n.kt)("p",null,"If you specify both ",(0,n.kt)("inlineCode",{parentName:"p"},"no-store")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"no-store")," will be given precedence over ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache"),"."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"; If specified both\nCache-Control: no-store, no-cache\n\n; Below will be considered\nCache-Control: no-store\n")),(0,n.kt)("p",null,"For ",(0,n.kt)("inlineCode",{parentName:"p"},"private/public"),", for any unauthenticated requests cache is considered ",(0,n.kt)("inlineCode",{parentName:"p"},"public")," and for any authenticated ones cache is considered ",(0,n.kt)("inlineCode",{parentName:"p"},"private"),"."),(0,n.kt)("h3",null,"Validators"),(0,n.kt)("p",null,"Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose."),(0,n.kt)("h4",null,"ETag"),(0,n.kt)("p",null,'Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating ',(0,n.kt)("inlineCode",{parentName:"p"},'"give me this resource if ETag is not same as the ETag that I have"')," and the content is downloaded only if the etags do not match. "),(0,n.kt)("p",null,"Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'ETag: "j82j8232ha7sdh0q2882" - Strong Etag\nETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)\n')),(0,n.kt)("p",null,"A strong validating ETag means that two resources are ",(0,n.kt)("strong",{parentName:"p"},"exactly")," same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example."),(0,n.kt)("p",null,"Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in ",(0,n.kt)("inlineCode",{parentName:"p"},"If-None-Match")," header."),(0,n.kt)("p",null,"Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of ",(0,n.kt)("inlineCode",{parentName:"p"},"abc123xyz"),". After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in ",(0,n.kt)("inlineCode",{parentName:"p"},"if-none-match")," header"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'If-None-Match: "abc123xyz"\n')),(0,n.kt)("p",null,"Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of ",(0,n.kt)("inlineCode",{parentName:"p"},"304 Not Modified")," which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has."),(0,n.kt)("h4",null,"Last-Modified"),(0,n.kt)("p",null,"Server might include the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," header indicating the date and time at which some content was last modified on."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT\n")),(0,n.kt)("p",null,"When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called ",(0,n.kt)("inlineCode",{parentName:"p"},"If-Modified-Since")," to server to get the updated ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date; if it matches the date that the client has, ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date for the content is updated to be considered fresh for another ",(0,n.kt)("inlineCode",{parentName:"p"},"n")," seconds. If the received ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT\n")),(0,n.kt)("p",null,"You might be questioning now, what if the cached content has both the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," matches the newly retrieved one and so does the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date. If either the ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," does not match or the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," is greater than the one from the server, content has to be downloaded again. "),(0,n.kt)("h3",null,"Where do I start?"),(0,n.kt)("p",null,"Now that we have got ",(0,n.kt)("em",{parentName:"p"},"everything")," covered, let us put everything in perspective and see how you can use this information."),(0,n.kt)("h4",null,"Utilizing Server"),(0,n.kt)("p",null,"Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. "),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"For example"),", if you are using Apache and you have your static content placed at ",(0,n.kt)("inlineCode",{parentName:"p"},"/static"),", you can put below ",(0,n.kt)("inlineCode",{parentName:"p"},".htaccess")," file in the directory to make all the content in it be cached for an year using below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'# Cache everything for an year\nHeader set Cache-Control "max-age=31536000, public"\n')),(0,n.kt)("p",null,"You can further use ",(0,n.kt)("inlineCode",{parentName:"p"},"filesMatch")," directive to add conditionals and use different caching strategy for different kinds of files e.g."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"# Cache any images for one year\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"filesMatch")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),'".(png|jpg|jpeg|gif)$"'),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),'\n Header set Cache-Control "max-age=31536000, public"\n',(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"")),"\n\n# Cache any CSS and JS files for a month\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"filesMatch")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),'".(css|js)$"'),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),'\n Header set Cache-Control "max-age=2628000, public"\n',(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"")),"\n")),(0,n.kt)("p",null,"Or if you don't want to use the ",(0,n.kt)("inlineCode",{parentName:"p"},".htaccess")," file you can modify Apache's configuration file ",(0,n.kt)("inlineCode",{parentName:"p"},"http.conf"),". Same goes for Nginx, you can add the caching information in the location or server block. "),(0,n.kt)("h4",null,"Caching Recommendations"),(0,n.kt)("p",null,"There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. ",(0,n.kt)("inlineCode",{parentName:"li"},"style.ju2i90.css"),") so that the cache is automatically rejected whenever the files are updated.\nAlso it should be noted that you should not cross the upper limit of one year as it ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9"}),"might not be honored")," "),(0,n.kt)("li",{parentName:"ul"},"Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP."),(0,n.kt)("li",{parentName:"ul"},"Always add the validators (preferably ETags) in your response."),(0,n.kt)("li",{parentName:"ul"},"Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all."),(0,n.kt)("li",{parentName:"ul"},"Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale. "),(0,n.kt)("li",{parentName:"ul"},"Test and monitor the caching headers being served by your site. You can use the browser console or ",(0,n.kt)("inlineCode",{parentName:"li"},"curl -I http://some-url.com")," for that purpose. ")),(0,n.kt)("p",null,"And that about wraps it up. Stay tuned for more!"))}c.isMDXComponent=!0},2518:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"HTTP is the protocol that every web developer should know as it powers the whole web and knowing it is definitely going to help you develop better applications. In this guide, I am going to be discussing what HTTP is, how it came to be, where it is today and how did we get here."),(0,n.kt)("h3",null,"What is HTTP?"),(0,n.kt)("p",null,"First things first, what is HTTP? HTTP is the ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP/IP")," based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet. By application layer protocol, I mean it's just an abstraction layer that standardizes how the hosts (clients and servers) communicate and itself it depends upon ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP/IP")," to get request and response between the client and server. By default TCP port ",(0,n.kt)("inlineCode",{parentName:"p"},"80")," is used but other ports can be used as well. HTTPS, however, uses port ",(0,n.kt)("inlineCode",{parentName:"p"},"443"),"."),(0,n.kt)("h3",null,"HTTP/0.9 \u2013 The One Liner (1991)"),(0,n.kt)("p",null,"The first documented version of HTTP was ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.w3.org/Protocols/HTTP/AsImplemented.html"}),(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/0.9"))," which was put forward in 1991. It was the simplest protocol ever; having a single method called ",(0,n.kt)("inlineCode",{parentName:"p"},"GET"),". If a client had to access some webpage on the server, it would have made the simple request like below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"GET /index.html\n")),(0,n.kt)("p",null,"And the response from server would have looked as follows"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"(response body)\n(connection closed)\n")),(0,n.kt)("p",null,"That is, the server would get the request, reply with the HTML in response and as soon as the content has been transferred, the connection will be closed. There were "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"No headers"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"GET")," was the only allowed method "),(0,n.kt)("li",{parentName:"ul"},"Response had to be HTML")),(0,n.kt)("p",null,"As you can see, the protocol really had nothing more than being a stepping stone for what was to come."),(0,n.kt)("h3",null,"HTTP/1.0 - 1996"),(0,n.kt)("p",null,"In 1996, the next version of HTTP i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," evolved that vastly improved over the original version. "),(0,n.kt)("p",null,"Unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/0.9")," which was only designed for HTML response, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," could now deal with other response formats i.e. images, video files, plain text or any other content type as well. It added more methods (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"POST")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"HEAD"),"), request/response formats got changed, HTTP headers got added to both the request and responses, status codes were added to identify the response, character set support was introduced, multi-part types, authorization, caching, content encoding and more was included."),(0,n.kt)("p",null,"Here is how a sample ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," request and response might have looked like:"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"GET / HTTP/1.0\nHost: kamranahmed.info\nUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5)\nAccept: */*\n")),(0,n.kt)("p",null,"As you can see, alongside the request, client has also sent its personal information, required response type etc. While in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/0.9")," client could never send such information because there were no headers."),(0,n.kt)("p",null,"Example response to the request above may have looked like below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"HTTP/1.0 200 OK \nContent-Type: text/plain\nContent-Length: 137582\nExpires: Thu, 05 Dec 1997 16:00:00 GMT\nLast-Modified: Wed, 5 August 1996 15:55:28 GMT\nServer: Apache 0.84\n\n(response body)\n(connection closed)\n")),(0,n.kt)("p",null,"In the very beginning of the response there is ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," (HTTP followed by the version number), then there is the status code ",(0,n.kt)("inlineCode",{parentName:"p"},"200")," followed by the reason phrase (or description of the status code, if you will). "),(0,n.kt)("p",null,"In this newer version, request and response headers were still kept as ",(0,n.kt)("inlineCode",{parentName:"p"},"ASCII"),' encoded, but the response body could have been of any type i.e. image, video, HTML, plain text or any other content type. So, now that server could send any content type to the client; not so long after the introduction, the term "Hyper Text" in ',(0,n.kt)("inlineCode",{parentName:"p"},"HTTP")," became misnomer. ",(0,n.kt)("inlineCode",{parentName:"p"},"HMTP")," or Hypermedia transfer protocol might have made more sense but, I guess, we are stuck with the name for life."),(0,n.kt)("p",null,"One of the major drawbacks of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," were you couldn't have multiple requests per connection. That is, whenever a client will need something from the server, it will have to open a new TCP connection and after that single request has been fulfilled, connection will be closed. And for any next requirement, it will have to be on a new connection. Why is it bad? Well, let's assume that you visit a webpage having ",(0,n.kt)("inlineCode",{parentName:"p"},"10")," images, ",(0,n.kt)("inlineCode",{parentName:"p"},"5")," stylesheets and ",(0,n.kt)("inlineCode",{parentName:"p"},"5")," javascript files, totalling to ",(0,n.kt)("inlineCode",{parentName:"p"},"20")," items that needs to fetched when request to that webpage is made. Since the server closes the connection as soon as the request has been fulfilled, there will be a series of ",(0,n.kt)("inlineCode",{parentName:"p"},"20")," separate connections where each of the items will be served one by one on their separate connections. This large number of connections results in a serious performance hit as requiring a new ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP")," connection imposes a significant performance penalty because of three-way handshake followed by slow-start."),(0,n.kt)("h4",null,"Three-way Handshake"),(0,n.kt)("p",null,"Three-way handshake in its simplest form is that all the ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP")," connections begin with a three-way handshake in which the client and the server share a series of packets before starting to share the application data. "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"SYN")," - Client picks up a random number, let's say ",(0,n.kt)("inlineCode",{parentName:"li"},"x"),", and sends it to the server."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"SYN ACK")," - Server acknowledges the request by sending an ",(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," packet back to the client which is made up of a random number, let's say ",(0,n.kt)("inlineCode",{parentName:"li"},"y")," picked up by server and the number ",(0,n.kt)("inlineCode",{parentName:"li"},"x+1")," where ",(0,n.kt)("inlineCode",{parentName:"li"},"x")," is the number that was sent by the client"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," - Client increments the number ",(0,n.kt)("inlineCode",{parentName:"li"},"y")," received from the server and sends an ",(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," packet back with the number ",(0,n.kt)("inlineCode",{parentName:"li"},"y+1"))),(0,n.kt)("p",null,"Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet but the server will still have to wait for the ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet to be recieved in order to fulfill the request."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/uERG2G2.png",alt:null}))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Please note that there is a minor issue with the image, the last ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet sent by the client to end the handshake contains only ",(0,n.kt)("inlineCode",{parentName:"p"},"y+1")," i.e. it should have been ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK:y+1")," instead of ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK: x+1, y+1")," ")),(0,n.kt)("p",null,"However, some implementations of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," tried to overcome this issue by introducing a new header called ",(0,n.kt)("inlineCode",{parentName:"p"},"Connection: keep-alive"),' which was meant to tell the server "Hey server, do not close this connection, I need it again". But still, it wasn\'t that widely supported and the problem still persisted.'),(0,n.kt)("p",null,"Apart from being connectionless, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP")," also is a stateless protocol i.e. server doesn't maintain the information about the client and so each of the requests has to have the information necessary for the server to fulfill the request on its own without any association with any old requests. And so this adds fuel to the fire i.e. apart from the large number of connections that the client has to open, it also has to send some redundant data on the wire causing increased bandwidth usage."),(0,n.kt)("h3",null,"HTTP/1.1 - 1999"),(0,n.kt)("p",null,"After merely 3 years of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0"),", the next version i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," was released in 1999; which made alot of improvements over its predecessor. The major improvements over ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," included"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"New HTTP methods")," were added, which introduced ",(0,n.kt)("inlineCode",{parentName:"p"},"PUT"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"PATCH"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"OPTIONS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"DELETE"))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Hostname Identification")," In ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," ",(0,n.kt)("inlineCode",{parentName:"p"},"Host")," header wasn't required but ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," made it required.")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Persistent Connections")," As discussed above, in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," introduced the persistent connections i.e. ",(0,n.kt)("strong",{parentName:"p"},"connections weren't closed by default")," and were kept open which allowed multiple sequential requests. To close the connections, the header ",(0,n.kt)("inlineCode",{parentName:"p"},"Connection: close")," had to be available on the request. Clients usually send this header in the last request to safely close the connection.")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Pipelining")," It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," header present which clients can use to identify where the response ends and it can start waiting for the next response."),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("p",{parentName:"blockquote"},"It should be noted that in order to benefit from persistent connections or pipelining, ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," header must be available on the response, because this would let the client know when the transmission completes and it can send the next request (in normal sequential way of sending requests) or start waiting for the the next response (when pipelining is enabled). ")),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("p",{parentName:"blockquote"},"But there was still an issue with this approach. And that is, what if the data is dynamic and server cannot find the content length before hand? Well in that case, you really can't benefit from persistent connections, could you?! In order to solve this ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," introduced chunked encoding. In such cases server may omit content-Length in favor of chunked encoding (more to it in a moment). However, if none of them are available, then the connection must be closed at the end of request."))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Chunked Transfers")," In case of dynamic content, when the server cannot really find out the ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," when the transmission starts, it may start sending the content in pieces (chunk by chunk) and add the ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," for each chunk when it is sent. And when all of the chunks are sent i.e. whole transmission has completed, it sends an empty chunk i.e. the one with ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," set to zero in order to identify the client that transmission has completed. In order to notify the client about the chunked transfer, server includes the header ",(0,n.kt)("inlineCode",{parentName:"p"},"Transfer-Encoding: chunked"))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," which had Basic authentication only, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," included digest and proxy authentication")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Caching")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Byte Ranges")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Character sets")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Language negotiation")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Client cookies")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Enhanced compression support")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"New status codes")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"..and more "))),(0,n.kt)("p",null,"I am not going to dwell about all the ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf"}),"Key differences between ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/1.0")," and HTTP/1.1")," and here is the link to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://tools.ietf.org/html/rfc2616"}),"original RFC")," for the overachievers."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," has persistent connections, then why so many connections? you say! The reason is, in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," it can only have one outstanding connection at any moment of time. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," tried to fix this by introducing pipelining but it didn't completely address the issue because of the ",(0,n.kt)("strong",{parentName:"p"},"head-of-line blocking")," where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1"),", the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/"}),"domain sharding")," etc."),(0,n.kt)("h3",null,"SPDY - 2009"),(0,n.kt)("p",null,"Google went ahead and started experimenting with alternative protocols to make the web faster and improving web security while reducing the latency of web pages. In 2009, they announced ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY"),". "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," is a trademark of Google and isn't an acronym.")),(0,n.kt)("p",null,"It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY"),", decrease the latency to increase the network performance."),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transfered per second (bits per second).")),(0,n.kt)("p",null,"The features of ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," in the next section as I said ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is mostly inspired from SPDY."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," didn't really try to replace HTTP; it was a translation layer over HTTP which existed at the application layer and modified the request before sending it over to the wire. It started to become a defacto standards and majority of browsers started implementing it. "),(0,n.kt)("p",null,"In 2015, at Google, they didn't want to have two competing standards and so they decided to merge it into HTTP while giving birth to ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," and deprecating SPDY. "),(0,n.kt)("h3",null,"HTTP/2 - 2015"),(0,n.kt)("p",null,"By now, you must be convinced that why we needed another revision of the HTTP protocol. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," was designed for low latency transport of content. The key features or differences from the old version of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," include"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Binary instead of Textual"),(0,n.kt)("li",{parentName:"ul"},"Multiplexing - Multiple asynchronous HTTP requests over a single connection"),(0,n.kt)("li",{parentName:"ul"},"Header compression using HPACK"),(0,n.kt)("li",{parentName:"ul"},"Server Push - Multiple responses for single request"),(0,n.kt)("li",{parentName:"ul"},"Request Prioritization"),(0,n.kt)("li",{parentName:"ul"},"Security")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/S85j8gg.png",alt:null}))),(0,n.kt)("h4",null,"1. Binary Protocol"),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," tends to address the issue of increased latency that existed in HTTP/1.x by making it a binary protocol. Being a binary protocol, it easier to parse but unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.x")," it is no longer readable by the human eye. The major building blocks of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," are Frames and Streams"),(0,n.kt)("h5",null,"Frames and Streams"),(0,n.kt)("p",null,"HTTP messages are now composed of one or more frames. There is a ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," frame for the meta data and ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA")," frame for the payload and there exist several other types of frames (",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"SETTINGS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"PRIORITY")," etc) that you can check through ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://http2.github.io/http2-spec/#FrameTypes"}),"the ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/2")," specs"),". "),(0,n.kt)("p",null,"Every ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," request and response is given a unique stream ID and it is divided into frames. Frames are nothing but binary pieces of data. A collection of frames is called a Stream. Each frame has a stream id that identifies the stream to which it belongs and each frame has a common header. Also, apart from stream ID being unique, it is worth mentioning that, any request initiated by client uses odd numbers and the response from server has even numbers stream IDs."),(0,n.kt)("p",null,"Apart from the ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA"),", another frame type that I think worth mentioning here is ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM")," which is a special frame type that is used to abort some stream i.e. client may send this frame to let the server know that I don't need this stream anymore. In ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," the only way to make the server stop sending the response to client was closing the connection which resulted in increased latency because a new connection had to be opened for any consecutive requests. While in HTTP/2, client can use ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM")," and stop receiving a specific stream while the connection will still be open and the other streams will still be in play."),(0,n.kt)("h4",null,"2. Multiplexing"),(0,n.kt)("p",null,"Since ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is now a binary protocol and as I said above that it uses frames and streams for requests and responses, once a TCP connection is opened, all the streams are sent asynchronously through the same connection without opening any additional connections. And in turn, the server responds in the same asynchronous way i.e. the response has no order and the client uses the assigned stream id to identify the stream to which a specific packet belongs. This also solves the ",(0,n.kt)("strong",{parentName:"p"},"head-of-line blocking")," issue that existed in HTTP/1.x i.e. the client will not have to wait for the request that is taking time and other requests will still be getting processed."),(0,n.kt)("h4",null,"3. HPACK Header Compression"),(0,n.kt)("p",null,"It was part of a separate RFC which was specifically aimed at optimizing the sent headers. The essence of it is that when we are constantly accessing the server from a same client there is alot of redundant data that we are sending in the headers over and over, and sometimes there might be cookies increasing the headers size which results in bandwidth usage and increased latency. To overcome this, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," introduced header compression."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/3IPWXvR.png",alt:null}))),(0,n.kt)("p",null,"Unlike request and response, headers are not compressed in ",(0,n.kt)("inlineCode",{parentName:"p"},"gzip")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"compress")," etc formats but there is a different mechanism in place for header compression which is literal values are encoded using Huffman code and a headers table is maintained by the client and server and both the client and server omit any repetitive headers (e.g. user agent etc) in the subsequent requests and reference them using the headers table maintained by both."),(0,n.kt)("p",null,"While we are talking headers, let me add here that the headers are still the same as in HTTP/1.1, except for the addition of some pseudo headers i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},":method"),", ",(0,n.kt)("inlineCode",{parentName:"p"},":scheme"),", ",(0,n.kt)("inlineCode",{parentName:"p"},":host")," and ",(0,n.kt)("inlineCode",{parentName:"p"},":path")),(0,n.kt)("h4",null,"4. Server Push"),(0,n.kt)("p",null,"Server push is another tremendous feature of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," where the server, knowing that the client is going to ask for a certain resource, can push it to the client without even client asking for it. For example, let's say a browser loads a web page, it parses the whole page to find out the remote content that it has to load from the server and then sends consequent requests to the server to get that content."),(0,n.kt)("p",null,"Server push allows the server to decrease the roundtrips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called ",(0,n.kt)("inlineCode",{parentName:"p"},"PUSH_PROMISE"),' notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The ',(0,n.kt)("inlineCode",{parentName:"p"},"PUSH_PROMISE")," frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed."),(0,n.kt)("h4",null,"5. Request Prioritization"),(0,n.kt)("p",null,"A client can assign a priority to a stream by including the prioritization information in the ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," frame by which a stream is opened. At any other time, client can send a ",(0,n.kt)("inlineCode",{parentName:"p"},"PRIORITY")," frame to change the priority of a stream."),(0,n.kt)("p",null,"Without any priority information, server processes the requests asynchronously i.e. without any order. If there is priority assigned to a stream, then based on this prioritization information, server decides how much of the resources need to be given to process which request."),(0,n.kt)("h4",null,"6. Security"),(0,n.kt)("p",null,"There was extensive discussion on whether security (through ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS"),") should be made mandatory for ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," when it is used over ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS"),". So, although ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," when implemented over ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS")," does impose some requirementsi.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS")," version ",(0,n.kt)("inlineCode",{parentName:"p"},"1.2")," or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is here and it has already ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://caniuse.com/#search=http2"}),"surpassed SPDY in adaption")," which is gradually increasing. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," has alot to offer in terms of performance gain and it is about time we should start using it. "),(0,n.kt)("p",null,"For anyone interested in further details here is the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://http2.github.io/http2-spec"}),"link to specs")," and a link ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://www.http2demo.io/"}),"demonstrating the performance benefits of ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/2")),". "),(0,n.kt)("p",null,"And that about wraps it up. Until next time! stay tuned."))}c.isMDXComponent=!0},3275:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/jwt-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/jwt-authentication.png",alt:null})))))}c.isMDXComponent=!0},7824:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"I have been working on redoing the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://roadmap.sh"}),"roadmaps")," \u2013 splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles."),(0,n.kt)("p",null,'I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren\'t even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below.'),(0,n.kt)("h3",null,"Different Seniority Titles"),(0,n.kt)("p",null,"Different organizations might have different seniority titles but they mainly fall into three categories:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Junior Developer"),(0,n.kt)("li",{parentName:"ul"},"Mid Level Developer"),(0,n.kt)("li",{parentName:"ul"},"Senior Developer")),(0,n.kt)("h3",null,"Junior Developer"),(0,n.kt)("p",null,"Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},'Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent. '),(0,n.kt)("li",{parentName:"ul"},"They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members."),(0,n.kt)("li",{parentName:"ul"},"Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something."),(0,n.kt)("li",{parentName:"ul"},"They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain."),(0,n.kt)("li",{parentName:"ul"},"Over-engineering is a major problem, often leading to fragility and bugs."),(0,n.kt)("li",{parentName:"ul"},"When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem."),(0,n.kt)("li",{parentName:"ul"},'You might notice the "',(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Somebody_else%27s_problem"}),"Somebody Else's Problem"),'" behavior from them.'),(0,n.kt)("li",{parentName:"ul"},"They don't know what or how much they don't know, thanks to the ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect"}),"Dunning\u2013Kruger effect"),"."),(0,n.kt)("li",{parentName:"ul"},"They don't take initiatives and they might be afraid to work on an unfamiliar codebase."),(0,n.kt)("li",{parentName:"ul"},"They don't participate in team discussions.")),(0,n.kt)("p",null,'Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority:'),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},'All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn\'t have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me."'),(0,n.kt)("li",{parentName:"ul"},"Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice. "),(0,n.kt)("li",{parentName:"ul"},"Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, \"modernized\" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that. "),(0,n.kt)("li",{parentName:"ul"},"Avoid what is known as ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Somebody_else%27s_problem"}),'"Somebody Else\'s Problem Field"')," behavior. "),(0,n.kt)("li",{parentName:"ul"},"When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does."),(0,n.kt)("li",{parentName:"ul"},'Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.'),(0,n.kt)("li",{parentName:"ul"},"It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively."),(0,n.kt)("li",{parentName:"ul"},"Don't let yourself be limited by the job title that you have. Keep working on your self-improvement."),(0,n.kt)("li",{parentName:"ul"},"Do your homework. Predict what\u2019s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something."),(0,n.kt)("li",{parentName:"ul"},"Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt."),(0,n.kt)("li",{parentName:"ul"},"Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner."),(0,n.kt)("li",{parentName:"ul"},"Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people."),(0,n.kt)("li",{parentName:"ul"},'Don\'t just blindly follow the advice of "experts", take it with a grain of salt.'),(0,n.kt)("li",{parentName:"ul"},"If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'."),(0,n.kt)("li",{parentName:"ul"},"Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues. "),(0,n.kt)("li",{parentName:"ul"},'Avoid saying "it works on my machine" -- yes, I have heard that a lot.'),(0,n.kt)("li",{parentName:"ul"},"Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge.")),(0,n.kt)("h3",null,"Mid Level Developers"),(0,n.kt)("p",null,"The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level."),(0,n.kt)("p",null,'Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don\'t know when to make tradeoffs and they still don\'t know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback.'),(0,n.kt)("p",null,'Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one.'),(0,n.kt)("h3",null,"Senior Developers"),(0,n.kt)("p",null,"Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it \u2014 they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture. "),(0,n.kt)("li",{parentName:"ul"},'They don\'t have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic.'),(0,n.kt)("li",{parentName:"ul"},"They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it."),(0,n.kt)("li",{parentName:"ul"},"They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done."),(0,n.kt)("li",{parentName:"ul"},"They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development."),(0,n.kt)("li",{parentName:"ul"},"They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions."),(0,n.kt)("li",{parentName:"ul"},"They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code."),(0,n.kt)("li",{parentName:"ul"},"They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them."),(0,n.kt)("li",{parentName:"ul"},'They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.'),(0,n.kt)("li",{parentName:"ul"},"They know how to give feedback without hurting anyone.")),(0,n.kt)("h3",null,"Conclusion"),(0,n.kt)("p",null,'All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don\'t gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience". '),(0,n.kt)("p",null,"The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one."),(0,n.kt)("p",null,"With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned!"))}c.isMDXComponent=!0},7118:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/oauth.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/oauth.png",alt:null})))))}c.isMDXComponent=!0},319:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"One of my favorite pastimes is going through the history of my favorite projects to learn how they grew over time or how certain features were implemented."),(0,n.kt)("p",null,"The image below describes how I do that in WebStorm."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/project-history.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/project-history.png",alt:null})))))}c.isMDXComponent=!0},5282:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about ",(0,n.kt)("strong",{parentName:"p"},"proxies")," which play a vital role in mitigating these risks. We will cover the following topics in this guide: "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-server"}),"Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#forward-proxy-server"}),"Forward Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#reverse-proxy-server"}),"Reverse Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#summary"}),"Summary"))),(0,n.kt)("h2",null,"Proxy Server"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("em",{parentName:"strong"},"Every web request which is sent from the client to a web server goes through some type of proxy server."))," A proxy server acts as a gateway between client ",(0,n.kt)("em",{parentName:"p"},"(you)")," and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/proxy-example.png",alt:"Proxy Server Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration. ")),(0,n.kt)("p",null,"Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This ",(0,n.kt)("strong",{parentName:"p"},"saves big companies thousands of dollars")," by reducing load on their servers as their website is visited by millions of users every day."),(0,n.kt)("h2",null,"Forward Proxy Server"),(0,n.kt)("p",null,"A forward proxy is generally implemented on the client side and ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple clients")," or client sources. Forward proxy servers are mainly used by companies to ",(0,n.kt)("strong",{parentName:"p"},"manage internet usage")," of their employees and ",(0,n.kt)("strong",{parentName:"p"},"restrict content"),". It is also used as a ",(0,n.kt)("strong",{parentName:"p"},"firewall")," to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to ",(0,n.kt)("strong",{parentName:"p"},"bypass geo-restriction")," and browse content which might be blocked in user's country. It enables users to ",(0,n.kt)("strong",{parentName:"p"},"browse anonymously"),", as the proxy server masks their details from the website's servers. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/forward-proxy.png",alt:"Forward Proxy Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration")),(0,n.kt)("h2",null,"Reverse Proxy Server"),(0,n.kt)("p",null,"Reverse proxy servers are implemented on the ",(0,n.kt)("strong",{parentName:"p"},"server side")," instead of the client side. It ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple webservers")," and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the ",(0,n.kt)("strong",{parentName:"p"},"back-end web servers and not the client"),". Reverse proxy servers are generally used to perform tasks such as ",(0,n.kt)("strong",{parentName:"p"},"authentication, content caching, and encryption/decryption")," on behalf of the web server. These tasks would ",(0,n.kt)("strong",{parentName:"p"},"hog CPU cycles")," on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as ",(0,n.kt)("strong",{parentName:"p"},"load balancers")," to distribute the incoming traffic efficiently among the web servers but it is ",(0,n.kt)("strong",{parentName:"p"},"not optimized")," for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/reverse-proxy.png",alt:"Reverse Proxy Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s). ")),(0,n.kt)("h2",null,"Summary"),(0,n.kt)("p",null,"A proxy server acts as a gateway between client ",(0,n.kt)("em",{parentName:"p"},"(you)")," and the internet and separates end-users from the websites you browse. ",(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("em",{parentName:"strong"},"The position of the proxy server on the network determines whether it is a forward or a reverse proxy server")),". Forward proxy is implemented on the client side and ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple clients")," or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the ",(0,n.kt)("strong",{parentName:"p"},"server side")," it ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple webservers")," and manages the incoming requests by forwarding them to the web servers. "),(0,n.kt)("p",null,"If all this was too much to take in, I have a simple analogy for you. "),(0,n.kt)("p",null,"At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen. "),(0,n.kt)("p",null,"In this analogy: "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"You are the client"),(0,n.kt)("li",{parentName:"ul"},"Your order is the web request"),(0,n.kt)("li",{parentName:"ul"},"Waiter/Waitress is your forward proxy server"),(0,n.kt)("li",{parentName:"ul"},"Kitchen head chef is the reverse proxy server"),(0,n.kt)("li",{parentName:"ul"},"Other chefs working in the kitchen are the web servers")),(0,n.kt)("p",null,"With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below."))}c.isMDXComponent=!0},9177:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random. "),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/random-numbers.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/random-numbers.png",alt:null})))))}c.isMDXComponent=!0},3895:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/scaling-databases.svg"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/scaling-databases.svg",alt:null})))))}c.isMDXComponent=!0},4403:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/session-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/session-authentication.png",alt:null})))))}c.isMDXComponent=!0},5740:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/ssl-tls-https-ssh.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/ssl-tls-https-ssh.png",alt:null})))))}c.isMDXComponent=!0},2303:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/sso.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/sso.png",alt:null})))))}c.isMDXComponent=!0},5726:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/token-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/token-authentication.png",alt:null})))))}c.isMDXComponent=!0},9263:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"BitTorrent is a protocol for downloading and distributing files across the Internet. In contrast with the traditional client/server relationship, in which downloaders connect to a central server (for example: watching a movie on Netflix, or loading the web page you're reading now), participants in the BitTorrent network, called ",(0,n.kt)("strong",{parentName:"p"},"peers"),", download pieces of files from ",(0,n.kt)("em",{parentName:"p"},"each other"),"\u2014this is what makes it a ",(0,n.kt)("strong",{parentName:"p"},"peer-to-peer")," protocol. In this article we will investigate how this works, and build our own client that can find peers and exchange data between them."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/client-server-p2p.png",alt:"diagram showing the difference between client/server (all clients connecting to one server) and peer-to-peer (peers connecting to each other) relationships"}))),(0,n.kt)("p",null,"The protocol evolved organically over the past 20 years, and various people and organizations added extensions for features like encryption, private torrents, and new ways of finding peers. We'll be implementing the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.bittorrent.org/beps/bep_0003.html"}),"original spec")," from 2001 to keep this a weekend-sized project."),(0,n.kt)("p",null,"I'll be using a ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist"}),"Debian ISO")," file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content."),(0,n.kt)("h2",null,"Finding peers"),(0,n.kt)("p",null,"Here\u2019s a problem: we want to download a file with BitTorrent, but it\u2019s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends\u2014maybe we\u2019ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They\u2019re just web servers running over HTTP, and you can find Debian\u2019s at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://bttracker.debian.org:6969/"}),"http://bttracker.debian.org:6969/")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/trackers.png",alt:"illustration of a desktop computer and laptop sitting at a pub"}))),(0,n.kt)("p",null,"Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even ",(0,n.kt)("strong",{parentName:"p"},"peer discovery")," a distributed process. We won't be implementing them, but if you're interested, some terms you can research are ",(0,n.kt)("strong",{parentName:"p"},"DHT"),", ",(0,n.kt)("strong",{parentName:"p"},"PEX"),", and ",(0,n.kt)("strong",{parentName:"p"},"magnet links"),"."),(0,n.kt)("h3",null,"Parsing a .torrent file"),(0,n.kt)("p",null,"A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),'d8:announce41:http://bttracker.debian.org:6969/announce7:comment35:"Debian CD from cdimage.debian.org"13:creation datei1573903810e9:httpseedsl145:https://cdimage.debian.org/cdimage/release/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.iso145:https://cdimage.debian.org/cdimage/archive/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.isoe4:infod6:lengthi351272960e4:name31:debian-10.2.0-amd64-netinst.iso12:piece lengthi262144e6:pieces26800:\ufffd\x1f\ufffd\x0f\ufffd\ufffd\ufffdPS\ufffd^\ufffd\ufffd (binary blob of the hashes of each piece)ee\n')),(0,n.kt)("p",null,"That mess is encoded in a format called ",(0,n.kt)("strong",{parentName:"p"},"Bencode")," (pronounced ",(0,n.kt)("em",{parentName:"p"},"bee-encode"),"), and we'll need to decode it."),(0,n.kt)("p",null,"Bencode can encode roughly the same types of structures as JSON\u2014strings, integers, lists, and dictionaries. Bencoded data is not as human-readable/writable as JSON, but it can efficiently handle binary data and it's really simple to parse from a stream. Strings come with a length prefix, and look like ",(0,n.kt)("inlineCode",{parentName:"p"},"4:spam"),". Integers go between ",(0,n.kt)("em",{parentName:"p"},"start")," and ",(0,n.kt)("em",{parentName:"p"},"end")," markers, so ",(0,n.kt)("inlineCode",{parentName:"p"},"7")," would encode to ",(0,n.kt)("inlineCode",{parentName:"p"},"i7e"),". Lists and dictionaries work in a similar way: ",(0,n.kt)("inlineCode",{parentName:"p"},"l4:spami7ee")," represents ",(0,n.kt)("inlineCode",{parentName:"p"},"['spam', 7]"),", while ",(0,n.kt)("inlineCode",{parentName:"p"},"d4:spami7ee")," means ",(0,n.kt)("inlineCode",{parentName:"p"},"{spam: 7}"),"."),(0,n.kt)("p",null,"In a prettier format, our .torrent file looks like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),'d\n 8:announce\n 41:http://bttracker.debian.org:6969/announce\n 7:comment\n 35:"Debian CD from cdimage.debian.org"\n 13:creation date\n i1573903810e\n 4:info\n d\n 6:length\n i351272960e\n 4:name\n 31:debian-10.2.0-amd64-netinst.iso\n 12:piece length\n i262144e\n 6:pieces\n 26800:\ufffd\x1f\ufffd\x0f\ufffd\ufffd\ufffdPS\ufffd^\ufffd\ufffd (binary blob of the hashes of each piece)\n e\ne\n')),(0,n.kt)("p",null,"In this file, we can spot the URL of the tracker, the creation date (as a Unix timestamp), the name and size of the file, and a big binary blob containing the SHA-1 hashes of each ",(0,n.kt)("strong",{parentName:"p"},"piece"),", which are equally-sized parts of the file we want to download. The exact size of a piece varies between torrents, but they are usually somewhere between 256KB and 1MB. This means that a large file might be made up of ",(0,n.kt)("em",{parentName:"p"},"thousands")," of pieces. We'll download these pieces from our peers, check them against the hashes from our torrent file, assemble them together, and boom, we've got a file!"),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/pieces.png",alt:'"illustration of a file being cut with scissors into multiple pieces, starting with piece 0'}))),(0,n.kt)("p",null,"This mechanism allows us to verify the integrity of each piece as we go. It makes BitTorrent resistant to accidental corruption or intentional ",(0,n.kt)("strong",{parentName:"p"},"torrent poisoning"),". Unless an attacker is capable of breaking SHA-1 with a preimage attack, we will get exactly the content we asked for."),(0,n.kt)("p",null,"It would be really fun to write a bencode parser, but parsing isn't our focus today. But I found Fredrik Lundh's ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://effbot.org/zone/bencode.htm"}),"50 line parser")," to be especially illuminating. For this project, I used ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/jackpal/bencode-go"}),"github.com/jackpal/bencode-go"),":"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"import")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"github.com/jackpal/bencode-go"'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," bencodeInfo ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Pieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"pieces"`'),"\n PieceLength ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"piece length"`'),"\n Length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"length"`'),"\n Name ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"name"`'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," bencodeTorrent ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Announce ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"announce"`'),"\n Info bencodeInfo ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"info"`'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Open parses a torrent file"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n bto ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," bencode",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Unmarshal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"bto",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"bto",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Because I like to keep my structures relatively flat, and I like to keep my application structs separate from my serialization structs, I exported a different, flatter struct named ",(0,n.kt)("inlineCode",{parentName:"p"},"TorrentFile")," and wrote a few helper functions to convert between the two."),(0,n.kt)("p",null,"Notably, I split ",(0,n.kt)("inlineCode",{parentName:"p"},"pieces")," (previously a string) into a slice of hashes (each ",(0,n.kt)("inlineCode",{parentName:"p"},"[20]byte"),") so that I can easily access individual hashes later. I also computed the SHA-1 hash of the entire bencoded ",(0,n.kt)("inlineCode",{parentName:"p"},"info")," dict (the one which contained the name, size, and piece hashes). We know this as the ",(0,n.kt)("strong",{parentName:"p"},"infohash")," and it uniquely identifies files when we talk to trackers and peers. More on this later."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/info-hash.png",alt:"a name tag saying 'Hello my name is 86d4c80024a469be4c50bc5a102cf71780310074'"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," TorrentFile ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Announce ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n InfoHash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PieceHashes ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PieceLength ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n Length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n Name ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bto ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"toTorrentFile"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"TorrentFile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// ..."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Retrieving peers from the tracker"),(0,n.kt)("p",null,"Now that we have information about the file and its tracker, let's talk to the tracker to ",(0,n.kt)("strong",{parentName:"p"},"announce")," our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the ",(0,n.kt)("inlineCode",{parentName:"p"},"announce")," URL supplied in the .torrent file, with a few query parameters:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"TorrentFile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"buildTrackerURL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peerID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint16"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," url",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Parse"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Announce",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'""'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n params ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," url",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Values",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"info_hash"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"peer_id"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"port"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"strconv",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Itoa"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"Port",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"uploaded"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"0"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"downloaded"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"0"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"compact"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"1"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"left"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"strconv",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Itoa"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"RawQuery ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," params",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Encode"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"String"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"The important ones:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"info_hash"),": Identifies the ",(0,n.kt)("em",{parentName:"li"},"file")," we're trying to download. It's the infohash we calculated earlier from the bencoded ",(0,n.kt)("inlineCode",{parentName:"li"},"info")," dict. The tracker will use this to figure out which peers to show us."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"peer_id"),": A 20 byte name to identify ",(0,n.kt)("em",{parentName:"li"},"ourselves")," to trackers and peers. We'll just generate 20 random bytes for this. Real BitTorrent clients have IDs like ",(0,n.kt)("inlineCode",{parentName:"li"},"-TR2940-k8hj0wgej6ch")," which identify the client software and version\u2014in this case, TR2940 stands for Transmission client 2.94.")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/info-hash-peer-id.png",alt:"a file with a name tag saying 'info_hash' and a person with a name tag 'peer_id'"}))),(0,n.kt)("h3",null,"Parsing the tracker response"),(0,n.kt)("p",null,"We get back a bencoded response:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),"d\n 8:interval\n i900e\n 5:peers\n 252:(another long binary blob)\ne\n")),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"Interval")," tells us how often we're supposed to connect to the tracker again to refresh our list of peers. A value of 900 means we should reconnect every 15 minutes (900 seconds)."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"Peers")," is another long binary blob containing the IP addresses of each peer. It's made out of ",(0,n.kt)("strong",{parentName:"p"},"groups of six bytes"),". The first four bytes in each group represent the peer's IP address\u2014each byte represents a number in the IP. The last two bytes represent the port, as a big-endian ",(0,n.kt)("inlineCode",{parentName:"p"},"uint16"),". ",(0,n.kt)("strong",{parentName:"p"},"Big-endian"),", or ",(0,n.kt)("strong",{parentName:"p"},"network order"),", means that we can interpret a group of bytes as an integer by just squishing them together left to right. For example, the bytes ",(0,n.kt)("inlineCode",{parentName:"p"},"0x1A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"0xE1")," make ",(0,n.kt)("inlineCode",{parentName:"p"},"0x1AE1"),", or 6881 in decimal."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/address.png",alt:"diagram showing how 192, 0, 2, 123, 0x1A, 0xE1 can be interpreted as 192.0.1.123:6881"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Peer encodes connection information for a peer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Peer ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n IP net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP\n Port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint16"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Unmarshal parses peer IP addresses and ports from a buffer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Unmarshal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," peerSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 4 for IP, 2 for port"),"\n numPeers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," peerSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%"),"peerSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," fmt",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Errorf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Received malformed peers"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n peers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," numPeers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," numPeers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*")," peerSize\n peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"IP"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Uint16"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h2",null,"Downloading from peers"),(0,n.kt)("p",null,"Now that we have a list of peers, it's time to connect with them and start downloading pieces! We can break down the process into a few steps. For each peer, we want to:"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"Start a TCP connection with the peer. This is like starting a phone call."),(0,n.kt)("li",{parentName:"ol"},"Complete a two-way BitTorrent ",(0,n.kt)("strong",{parentName:"li"},"handshake"),". ",(0,n.kt)("em",{parentName:"li"},'"Hello?" "Hello."')),(0,n.kt)("li",{parentName:"ol"},"Exchange ",(0,n.kt)("strong",{parentName:"li"},"messages")," to download ",(0,n.kt)("strong",{parentName:"li"},"pieces"),". ",(0,n.kt)("em",{parentName:"li"},'"I\'d like piece #231 please."'))),(0,n.kt)("h2",null,"Start a TCP connection"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),"conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"DialTimeout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"tcp"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"String"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Second",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"I set a timeout so that I don't waste too much time on peers that aren't going to let me connect. For the most part, it's a pretty standard TCP connection."),(0,n.kt)("h3",null,"Complete the handshake"),(0,n.kt)("p",null,"We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"can communicate using the BitTorrent protocol"),(0,n.kt)("li",{parentName:"ul"},"is able to understand and respond to our messages"),(0,n.kt)("li",{parentName:"ul"},"has the file that we want, or at least knows what we're talking about")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/handshake.png",alt:"Two computers communicating. One asks 'do you speak BitTorrent and have this file?' and the other replies 'I speak BitTorrent and have that file'"}))),(0,n.kt)("p",null,"My father told me that the secret to a good handshake is a firm grip and eye contact. The secret to a good BitTorrent handshake is that it's made up of five parts:"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"The length of the protocol identifier, which is always 19 (0x13 in hex)"),(0,n.kt)("li",{parentName:"ol"},"The protocol identifier, called the ",(0,n.kt)("strong",{parentName:"li"},"pstr")," which is always ",(0,n.kt)("inlineCode",{parentName:"li"},"BitTorrent protocol")),(0,n.kt)("li",{parentName:"ol"},"Eight ",(0,n.kt)("strong",{parentName:"li"},"reserved bytes"),", all set to 0. We'd flip some of them to 1 to indicate that we support certain ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"http://www.bittorrent.org/beps/bep_0010.html"}),"extensions"),". But we don't, so we'll keep them at 0."),(0,n.kt)("li",{parentName:"ol"},"The ",(0,n.kt)("strong",{parentName:"li"},"infohash")," that we calculated earlier to identify which file we want"),(0,n.kt)("li",{parentName:"ol"},"The ",(0,n.kt)("strong",{parentName:"li"},"Peer ID")," that we made up to identify ourselves")),(0,n.kt)("p",null,"Put together, a handshake string might look like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),"\\x13BitTorrent protocol\\x00\\x00\\x00\\x00\\x00\\x00\\x00\\x00\\x86\\xd4\\xc8\\x00\\x24\\xa4\\x69\\xbe\\x4c\\x50\\xbc\\x5a\\x10\\x2c\\xf7\\x17\\x80\\x31\\x00\\x74-TR2940-k8hj0wgej6ch\n")),(0,n.kt)("p",null,"After we send a handshake to our peer, we should receive a handshake back in the same format. The infohash we get back should match the one we sent so that we know that we're talking about the same file. If everything goes as planned, we're good to go. If not, we can sever the connection because there's something wrong. ",(0,n.kt)("em",{parentName:"p"},'"Hello?" "\u8fd9\u662f\u8c01\uff1f \u4f60\u60f3\u8981\u4ec0\u4e48\uff1f" "Okay, wow, wrong number."')),(0,n.kt)("p",null,"In our code, let's make a struct to represent a handshake, and write a few methods for serializing and reading them:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// A Handshake is a special message that a peer uses to identify itself"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Handshake ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Pstr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n InfoHash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PeerID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serialize serializes the handshake to a buffer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Handshake",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Serialize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"49"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 8 reserved bytes"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PeerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," buf\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Read parses a handshake from a stream"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Handshake",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do Serialize(), but backwards"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// ..."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Send and receive messages"),(0,n.kt)("p",null,"Once we've completed the initial handshake, we can send and receive ",(0,n.kt)("strong",{parentName:"p"},"messages"),". Well, not quite\u2014if the other peer isn't ready to accept messages, we can't send any until they tell us they're ready. In this state, we're considered ",(0,n.kt)("strong",{parentName:"p"},"choked")," by the other peer. They'll send us an ",(0,n.kt)("strong",{parentName:"p"},"unchoke")," message to let us know that we can begin asking them for data. By default, we assume that we're choked until proven otherwise."),(0,n.kt)("p",null,"Once we've been unchoked, we can then begin sending ",(0,n.kt)("strong",{parentName:"p"},"requests")," for pieces, and they can send us messages back containing pieces."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/choke.png",alt:"\"A cartoon in which person 1 says 'hello I would like piece number\u2014' and person 2 grabs him by the neck and says '00 00 00 01 00 (choke)'"}))),(0,n.kt)("h4",null,"Interpreting messages"),(0,n.kt)("p",null,"A message has a length, an ",(0,n.kt)("strong",{parentName:"p"},"ID")," and a ",(0,n.kt)("strong",{parentName:"p"},"payload"),". On the wire, it looks like:"),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/message.png",alt:"A message with 4 byte for the length, 1 byte for ID, and an optional payload"}))),(0,n.kt)("p",null,"A message starts with a length indicator which tells us how many bytes long the message will be. It's a 32-bit integer, meaning it's made out of four bytes smooshed together in big-endian order. The next byte, the ",(0,n.kt)("strong",{parentName:"p"},"ID"),", tells us which type of message we're receiving\u2014for example, a ",(0,n.kt)("inlineCode",{parentName:"p"},"2"),' byte means "interested." Finally, the optional ',(0,n.kt)("strong",{parentName:"p"},"payload")," fills out the remaining length of the message."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint8"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n MsgChoke messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n MsgUnchoke messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),"\n MsgInterested messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),"\n MsgNotInterested messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),"\n MsgHave messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),"\n MsgBitfield messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),"\n MsgRequest messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6"),"\n MsgPiece messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7"),"\n MsgCancel messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Message stores ID and payload of a message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Message ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ID messageID\n Payload ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serialize serializes a message into a buffer of the form"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// "),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Interprets `nil` as a keep-alive message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Serialize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"uint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// +1 for id"),"\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"PutUint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"ID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," buf\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"To read a message from a stream, we just follow the format of a message. We read four bytes and interpret them as a ",(0,n.kt)("inlineCode",{parentName:"p"},"uint32")," to get the ",(0,n.kt)("strong",{parentName:"p"},"length")," of the message. Then, we read that number of bytes to get the ",(0,n.kt)("strong",{parentName:"p"},"ID")," (the first byte) and the ",(0,n.kt)("strong",{parentName:"p"},"payload")," (the remaining bytes)."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Read parses a message from a stream. Returns `nil` on keep-alive message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n lengthBuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ReadFull"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," lengthBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Uint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"lengthBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// keep-alive message"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n messageBuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ReadFull"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"messageID"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Bitfields"),(0,n.kt)("p",null,"One of the most interesting types of message is the ",(0,n.kt)("strong",{parentName:"p"},"bitfield"),", which is a data structure that peers use to efficiently encode which pieces they are able to send us. A bitfield looks like a byte array, and to check which pieces they have, we just need to look at the positions of the ",(0,n.kt)("em",{parentName:"p"},"bits")," set to 1. You can think of it like the digital equivalent of a coffee shop loyalty card. We start with a blank card of all ",(0,n.kt)("inlineCode",{parentName:"p"},"0"),", and flip bits to ",(0,n.kt)("inlineCode",{parentName:"p"},"1"),' to mark their positions as "stamped."'),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/bitfield.png",alt:"a coffee shop loyalty card with eight slots, with stamps on the first four slots and a stamp on the second to last slot, represented as 11110010"}))),(0,n.kt)("p",null,"By working with ",(0,n.kt)("em",{parentName:"p"},"bits")," instead of ",(0,n.kt)("em",{parentName:"p"},"bytes"),", this data structure is super compact. We can stuff information about eight pieces in the space of a single byte\u2014the size of a ",(0,n.kt)("inlineCode",{parentName:"p"},"bool"),". The tradeoff is that accessing values becomes a little more tricky. The smallest unit of memory that computers can address are bytes, so to get to our bits, we have to do some bitwise manipulation:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// A Bitfield represents the pieces that a peer has"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Bitfield ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// HasPiece tells if a bitfield has a particular index set"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bf Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"HasPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"bool")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n byteIndex ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," bf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"byteIndex",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),">>"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-"),"offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// SetPiece sets a bit in the bitfield"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bf Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n byteIndex ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n bf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"byteIndex",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"|=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<<")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Putting it all together"),(0,n.kt)("p",null,"We now have all the tools we need to download a torrent: we have a list of peers obtained from the tracker, and we can communicate with them by dialing a TCP connection, initiating a handshake, and sending and receiving messages. Our last big problems are handling the ",(0,n.kt)("strong",{parentName:"p"},"concurrency")," involved in talking to multiple peers at once, and managing the ",(0,n.kt)("strong",{parentName:"p"},"state")," of our peers as we interact with them. These are both classically Hard problems."),(0,n.kt)("h4",null,"Managing concurrency: channels as queues"),(0,n.kt)("p",null,"In Go, we ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://blog.golang.org/share-memory-by-communicating"}),"share memory by communicating"),", and we can think of a Go channel as a cheap thread-safe queue."),(0,n.kt)("p",null,"We'll set up two channels to synchronize our concurrent workers: one for dishing out work (pieces to download) between peers, and another for collecting downloaded pieces. As downloaded pieces come in through the results channel, we can copy them into a buffer to start assembling our complete file."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Init queues for workers to retrieve work and send results"),"\nworkQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\nresults ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," hash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"calculatePieceSize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," hash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Start workers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Peers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"go")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"startDownloadWorker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," workQueue",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," results",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Collect results into a buffer until full"),"\nbuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\ndonePieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," donePieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n res ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-"),"results\n begin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," end ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"calculateBoundsForPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"res",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"begin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"end",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," res",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n donePieces",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"workQueue",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n")),(0,n.kt)("p",null,"We'll spawn a worker goroutine for each peer we've received from the tracker. It'll connect and handshake with the peer, and then start retrieving work from the ",(0,n.kt)("inlineCode",{parentName:"p"},"workQueue"),", attempting to download it, and sending downloaded pieces back through the ",(0,n.kt)("inlineCode",{parentName:"p"},"results")," channel."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/download.png",alt:"a flow chart of the download strategy"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Torrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"startDownloadWorker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," results ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"New"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PeerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Could not handshake with %s. Disconnecting\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"defer")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Completed handshake with %s\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendUnchoke"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendInterested"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),"c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"HasPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"continue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Download the piece"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attemptDownloadPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Println"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Exiting"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"checkIntegrity"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Piece #%d failed integrity check\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"continue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendHave"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n results ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Managing state"),(0,n.kt)("p",null,"We'll keep track of each peer in a struct, and modify that struct as we read messages. It'll include data like how much we've downloaded from the peer, how much we've requested from them, and whether we're choked. If we wanted to scale this further, we could formalize this as a finite state machine. But a struct and a switch are good enough for now."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," pieceProgress ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n client ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Client\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n backlog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"state ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceProgress",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"readMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// this call blocks"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"switch")," msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"ID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgUnchoke",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"false"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgChoke",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"true"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgHave",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ParseHave"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgPiece",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ParsePiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," n\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"--"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Time to make requests!"),(0,n.kt)("p",null,"Files, pieces, and piece hashes aren't the full story\u2014we can go further by breaking down pieces into ",(0,n.kt)("strong",{parentName:"p"},"blocks"),". A block is a part of a piece, and we can fully define a block by the ",(0,n.kt)("strong",{parentName:"p"},"index")," of the piece it's part of, its byte ",(0,n.kt)("strong",{parentName:"p"},"offset")," within the piece, and its ",(0,n.kt)("strong",{parentName:"p"},"length"),". When we make requests for data from peers, we are actually requesting ",(0,n.kt)("em",{parentName:"p"},"blocks"),". A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests."),(0,n.kt)("p",null,"A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec."),(0,n.kt)("h4",null,"Pipelining"),(0,n.kt)("p",null,"Network round-trips are expensive, and requesting each block one by one will absolutely tank the performance of our download. Therefore, it's important to ",(0,n.kt)("strong",{parentName:"p"},"pipeline")," our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/pipelining.png",alt:"Two email threads simulating peer connections. The thread on the left shows a request followed by a reply, repeated three times. The thread on the left sends three requests, and receives three replies in quick succession."}))),(0,n.kt)("p",null,"Classically, BitTorrent clients kept a queue of five pipelined requests, and that's the value I'll be using. I found that increasing it can up to double the speed of a download. Newer clients use an ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://luminarys.com/posts/writing-a-bittorrent-client.html"}),"adaptive")," queue size to better accommodate modern network speeds and conditions. This is definitely a parameter worth tweaking, and it's pretty low hanging fruit for future performance optimization."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// MaxBlockSize is the largest number of bytes a request can ask for"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," MaxBlockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"16384"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// MaxBacklog is the number of unfulfilled requests a client can have in its pipeline"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," MaxBacklog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attemptDownloadPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"c ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n state ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," pieceProgress",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Setting a deadline helps get unresponsive peers unstuck."),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 30 seconds is more than enough time to download a 262 KB piece"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetDeadline"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Now"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Add"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"30")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*")," time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Second",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"defer")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetDeadline"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable the deadline"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If unchoked, send requests until we have enough unfulfilled requests"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," MaxBacklog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&&")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," MaxBlockSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Last block might be shorter than the typical block"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-"),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendRequest"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," blockSize",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," blockSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"readMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"main.go"),(0,n.kt)("p",null,"This is a short one. We're almost there."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"package")," main\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"import")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"log"'),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"os"'),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"github.com/veggiedefender/torrent-client/torrentfile"'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"main"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n inPath ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," os",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Args",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"\n outPath ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," os",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Args",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"\n\n tf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," torrentfile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"inPath",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Fatal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," tf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"DownloadToFile"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"outPath",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Fatal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("script",{id:"asciicast-xqRSB0Jec8RN91Zt89rbb9PcL",src:"https://asciinema.org/a/xqRSB0Jec8RN91Zt89rbb9PcL.js",async:!0}),(0,n.kt)("h2",null,"This isn't the full story"),(0,n.kt)("p",null,"For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/veggiedefender/torrent-client"}),"full implementation")," if you're interested."))}c.isMDXComponent=!0},8686:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/unfamiliar-codebase.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/unfamiliar-codebase.png",alt:null})))))}c.isMDXComponent=!0},4876:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,n.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Just ",(0,n.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}c.isMDXComponent=!0},9405:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/web-vitals.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/web-vitals.png",alt:null})))))}c.isMDXComponent=!0},9069:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://code.org"}),"code.org"),", you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"What is the Internet?"),(0,n.kt)("li",{parentName:"ul"},"How does the information move on the internet?"),(0,n.kt)("li",{parentName:"ul"},"How do the networks talk to each other and the protocols involved?"),(0,n.kt)("li",{parentName:"ul"},"What's the relationship between packets, routers, and reliability? "),(0,n.kt)("li",{parentName:"ul"},"HTTP and the HTML \u2013 How are you viewing this webpage in your browser?"),(0,n.kt)("li",{parentName:"ul"},"How is the information transfer on the internet made secure?"),(0,n.kt)("li",{parentName:"ul"},"What is cybersecurity and what are some common internet crimes?")),(0,n.kt)("h2",null,"What is the Internet?"),(0,n.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. "),(0,n.kt)("p",null,'In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it. '),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/Dxcc6ycZ73M",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Wires, Cables, and Wi-Fi"),(0,n.kt)("p",null,"Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves)."),(0,n.kt)("p",null,"In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/ZhEf7e4kopM",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"IP Addresses and DNS"),(0,n.kt)("p",null,"Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers? "),(0,n.kt)("p",null,"In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/5o8CwafCxnU",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Packets, Routing, and Reliability"),(0,n.kt)("p",null,"Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors."),(0,n.kt)("p",null,"In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/AYdF7b3nMto",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"HTTP and HTML"),(0,n.kt)("p",null,"HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you."),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/kBXQZMmiA4s",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Encryption and Public Keys"),(0,n.kt)("p",null,"Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure."),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/ZghMPWGXexs",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Cybersecurity and Crime"),(0,n.kt)("p",null,"In this video, you will learn about the basics of cybersecurity and common cybercrimes"),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/AuYNXgO_f3Y",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("p",null,"And that wraps it up for this article. To learn more about the Internet, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"Kamran Ahmed")," has a nice little guide on ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/dns-in-one-picture"}),"DNS: How a website is found on the Internet"),". Also, go through the episodes of ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://howdns.works/"}),"howdns.works")," and read this ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/"}),"cartoon intro to DNS over HTTPS"),"."))}c.isMDXComponent=!0},8681:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/sli-slo-sla.jpeg"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/sli-slo-sla.jpeg",alt:null})))))}c.isMDXComponent=!0},2935:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"We all have heard the mantra ",(0,n.kt)("em",{parentName:"p"},'"build it and they will come"')," many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups."),(0,n.kt)("p",null,"Before the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Wright_brothers"}),"Wright brothers"),' built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Field_of_Dreams"}),"Field of Dreams"),", this and similar historic events gave birth to the idea behind it."),(0,n.kt)("p",null,"The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore."),(0,n.kt)("h2",null,'Why doesn\'t "build it and they will come" work anymore?'),(0,n.kt)("p",null,"There are a few reasons working hard to make \"build it and they will come\" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it."),(0,n.kt)("h3",null,"Building got much easier"),(0,n.kt)("p",null,"As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://laravel.com/"}),"Laravel")," and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://quasar.dev/"}),"Quasar Framework")," are available for anyone to build projects on - for free."),(0,n.kt)("p",null,'In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.'),(0,n.kt)("h3",null,"Too much going on: information overload"),(0,n.kt)("p",null,"We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey."),(0,n.kt)("h3",null,"Smaller Problems"),(0,n.kt)("p",null,"Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed."),(0,n.kt)("p",null,"Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers."),(0,n.kt)("h2",null,"How to market your project nowadays?"),(0,n.kt)("p",null,"The very first step to improving the odds of success is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/business-idea-validation/"}),"idea validation"),". While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time."),(0,n.kt)("h3",null,"Build your Audience first and the project after."),(0,n.kt)("p",null,"Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://startupnamecheck.com/blog/how-to-start-a-small-business-blog"}),"project blog"),"."),(0,n.kt)("p",null,"Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans."),(0,n.kt)("h3",null,"Tool by Tool"),(0,n.kt)("p",null,'Another approach is the "Tool by Tool" approach. I\'ve first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://hatchful.shopify.com/"}),"logo generator")," and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time."),(0,n.kt)("p",null,"Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://kambanthemaker.com/"}),"Kamban")," with ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://flatga.io/"}),"FlatGA"),". He built FlatGA as phase one of a bigger project currently in development."),(0,n.kt)("h3",null,"Join a Maker community"),(0,n.kt)("p",null,"While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://getmakerlog.com/"}),"makerlog")," or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://wip.chat"}),"WIP.chat")," can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time."),(0,n.kt)("h3",null,"Getting ready to Launch"),(0,n.kt)("p",null,"Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch."),(0,n.kt)("h3",null,"Marketing Is an On-going Fight"),(0,n.kt)("p",null,"Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://wheretopost.email"}),"newsletter with small marketing opportunities"),". This way, you are regularly reminded and given bite-sized tasks to complete."),(0,n.kt)("h2",null,"Closing Words"),(0,n.kt)("p",null,"I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/newsletter"}),"my newsletter"),". I'll send out the occasional email about interesting new articles or side-projects."),(0,n.kt)("h2",null,"About the author"),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/"}),"Peter Thaleikis")," a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://bringyourownideas.com/"}),"Bring Your Own Ideas Ltd."),", he has been Lead Developer for multiple organisations."))}c.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[564],{2348:function(e,a,t){t.d(a,{Z:function(){return _}});var n=t(5893),s=(t(7294),t(4137)),o=t(3606),c=t(5115),p=t(8797);function i(){var e,a,t=(e=["\n line-height: 27px;\n font-size: 16px;\n color: black;\n margin-bottom: 18px;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return i=function(){return t},t}var r=p.ZP.p(i());function m(e,a){return a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}}))}function k(){var e=m(["\n position: absolute;\n top: 0;\n left: -25px;\n width: 25px;\n display: none;\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n"]);return k=function(){return e},e}function l(){var e=m(["\n position: relative;\n font-size: 32px;\n line-height: 40px;\n font-weight: 700;\n margin: 20px 0 10px !important;\n\n &:hover "," {\n display: flex;\n }\n"]);return l=function(){return e},e}function N(){var e=m(["\n font-size: 30px;\n"]);return N=function(){return e},e}function d(){var e=m(["\n margin: 22px 0 8px;\n font-size: 28px;\n"]);return d=function(){return e},e}function u(){var e=m(["\n margin: 18px 0 8px;\n font-size: 24px;\n"]);return u=function(){return e},e}function g(){var e=m(["\n margin: 14px 0 8px;\n font-size: 18px;\n"]);return g=function(){return e},e}function b(){var e=m(["\n margin: 12px 0 8px;\n font-size: 18px;\n"]);return b=function(){return e},e}var j=p.ZP.a(k()),O=p.ZP.h1(l(),j),h={h1:O,h2:(0,p.ZP)(O).attrs({as:"h2"})(N()),h3:(0,p.ZP)(O).attrs({as:"h3"})(d()),h4:(0,p.ZP)(O).attrs({as:"h4"})(u()),h5:(0,p.ZP)(O).attrs({as:"h5"})(g()),h6:(0,p.ZP)(O).attrs({as:"h6"})(b())};function f(){var e,a,t=(e=["\n margin: 25px -25px 25px -25px !important;\n padding: 20px 25px !important;\n border-radius: 10px;\n line-height: 1.5 !important;\n \n code {\n background: transparent;\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return f=function(){return t},t}var y=p.ZP.pre(f());function w(){var e,a,t=(e=["\n padding: 16px 20px;\n position: relative;\n background: #e8e8e8;\n border-radius: 5px;\n margin-bottom: 18px;\n\n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n }\n\n p + h4 {\n margin-top: 15px;\n }\n\n p {\n margin: 0;\n\n & + p {\n margin-top: 10px;\n }\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return w=function(){return t},t}var v=p.ZP.blockquote(w());function x(){var e,a,t=(e=["\n border-collapse: separate;\n width: 100%;\n border-spacing: 0;\n margin: 20px 0;\n\n th {\n color: #666;\n font-size: 12px;\n font-weight: 400;\n background: #FAFAFA;\n text-transform: uppercase;\n height: 40px;\n vertical-align: middle;\n padding: 5px 10px;\n }\n\n td {\n font-size: 14px;\n padding: 10px;\n border-bottom: 1px solid #EAEAEA;\n }\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return x=function(){return t},t}var T=p.ZP.table(x());function C(){var e,a,t=(e=['\n position: relative;\n max-width: 100%;\n margin-bottom: 18px;\n\n &:before {\n height: 0;\n content: "";\n display: block;\n padding-bottom: 50%;\n }\n\n & > iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return C=function(){return t},t}var $=p.ZP.div(C());function P(){var e,a,t=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return P=function(){return t},t}var S=p.ZP.img(P());function q(){var e,a,t=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}})));return q=function(){return t},t}var I=p.ZP.a(q()),D=function(e){var a=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,n.jsx)(I,{href:e.href,target:a?"_blank":"_self",children:e.children})};function A(e,a){return a||(a=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(a)}}))}function M(){var e=A(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return M=function(){return e},e}function E(){var e=A(["\n margin-bottom: 7px;\n"]);return E=function(){return e},e}var H=p.ZP.ul(M()),B=p.ZP.li(E()),W=t(5193),L=t(1277);function R(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}var z=function(e){for(var a=1;a=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={title:"WebStorm \u2014 Project History",description:"Learn how to peek through the history of any git repository to learn how it grew.",url:"/guides/project-history",fileName:"project-history",featured:!0,author:"kamranahmedse",updatedAt:"2020-07-16T19:59:14.191Z",createdAt:"2020-07-16T19:59:14.191Z"},c={guideMeta:o};function p(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},c,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,'Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/big-o-notation"}),"previous guide here"),"."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/asymptotic-notation.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/asymptotic-notation.png",alt:null})))))}p.isMDXComponent=!0},8829:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/avoid-render-blocking-javascript-with-async-defer.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/avoid-render-blocking-javascript-with-async-defer.png",alt:null})))))}c.isMDXComponent=!0},5151:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/basic-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/basic-authentication.png",alt:null})))))}c.isMDXComponent=!0},5198:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. "),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/big-o-notation.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/big-o-notation.png",alt:null})))))}c.isMDXComponent=!0},3180:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/character-encodings.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/character-encodings.png",alt:null})))))}c.isMDXComponent=!0},7354:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"The image below details the differences between the continuous integration and continuous delivery. Also, here is the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.youtube.com/watch?v=nyKZTKQS_EQ"}),"accompanying video on implementing that with GitHub actions"),"."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/ci-cd.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/ci-cd.png",alt:null})))))}c.isMDXComponent=!0},3406:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Design patterns are solutions to recurring problems; ",(0,n.kt)("strong",{parentName:"p"},"guidelines on how to tackle certain problems"),". They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations."),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems")),(0,n.kt)("p",null,"Wikipedia describes them as"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.")),(0,n.kt)("h2",null,"Be Careful"),(0,n.kt)("p",null,"Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns."),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Design patterns are not a silver bullet to all your problems."),(0,n.kt)("li",{parentName:"ul"},"Do not try to force them; bad things are supposed to happen, if done so. "),(0,n.kt)("li",{parentName:"ul"},"Keep in mind that design patterns are solutions ",(0,n.kt)("strong",{parentName:"li"},"to")," problems, not solutions ",(0,n.kt)("strong",{parentName:"li"},"finding")," problems; so don't overthink."),(0,n.kt)("li",{parentName:"ul"},"If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code.")),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways.")),(0,n.kt)("h2",null,"Types of Design Patterns"),(0,n.kt)("p",null,"This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Design_Patterns"}),"the book which introduced these design patterns"),". There are three types of design patterns:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#creational-design-patterns"}),"Creational")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#structural-design-patterns"}),"Structural")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#behavioral-design-patterns"}),"Behavioral"))),(0,n.kt)("h2",null,"Creational Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Creational patterns are focused towards how to instantiate an object or group of related objects.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation.")),(0,n.kt)("p",null,"There are 6 types of Creational patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-simple-factory"}),"Simple Factory")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-factory-method"}),"Factory Method")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-abstract-factory"}),"Abstract Factory")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-builder"}),"Builder")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-prototype"}),"Prototype")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-singleton"}),"Singleton"))),(0,n.kt)("h2",null,"\ud83c\udfe0 Simple Factory"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Simple factory simply generates an instance for client without exposing any instantiation logic to the client")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'In object-oriented programming (OOP), a factory is an object for creating other objects \u2013 formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new".')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"First of all we have a door interface and the implementation"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"width")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"height")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our door factory that makes the door and returns it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$width"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$height"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Make me a door of 100x200"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"DoorFactory",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"200"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Width: '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getWidth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Height: '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getHeight"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Make me a door of 50x100"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door2")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"DoorFactory",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"50"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to Use?")),(0,n.kt)("p",null,"When creating an object is not just a few assignments and involves some logic, it makes sense to put it in a dedicated factory instead of repeating the same code everywhere."),(0,n.kt)("h2",null,"\ud83c\udfed Factory Method"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider the case of a hiring manager. It is impossible for one person to interview for each of the positions. Based on the job opening, she has to decide and delegate the interview steps to different people.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It provides a way to delegate the instantiation logic to child classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In class-based programming, the factory method pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by creating objects by calling a factory method\u2014either specified in an interface and implemented by child classes, or implemented in a base class and optionally overridden by derived classes\u2014rather than by calling a constructor.")),(0,n.kt)("p",null," ",(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our hiring manager example above. First of all we have an interviewer interface and some implementations for it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Developer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Asking about design patterns!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"CommunityExecutive")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Interviewer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Asking about community building'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let us create our ",(0,n.kt)("inlineCode",{parentName:"p"},"HiringManager")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Factory method"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$interviewer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$interviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"askQuestions"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n")),(0,n.kt)("p",null,"Now any child can extend it and provide the required interviewer"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DevelopmentManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Developer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"MarketingManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"HiringManager"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeInterviewer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Interviewer"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"CommunityExecutive"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"and then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$devManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DevelopmentManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$devManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Asking about design patterns"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$marketingManager")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"MarketingManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$marketingManager"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeInterview"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Asking about community building."),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"Useful when there is some generic processing in a class but the required sub-class is dynamically decided at runtime. Or putting it in other words, when the client doesn't know what exact sub-class it might need."),(0,n.kt)("h2",null,"\ud83d\udd28 Abstract Factory"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Extending our door example from Simple Factory. Based on your needs you might get a wooden door from a wooden door shop, iron door from an iron shop or a PVC door from the relevant shop. Plus you might need a guy with different kind of specialities to fit the door, for example a carpenter for wooden door, welder for iron door etc. As you can see there is a dependency between the doors now, wooden door needs carpenter, iron door needs a welder etc.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A factory of factories; a factory that groups the individual but related/dependent factories together without specifying their concrete classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating the door example above. First of all we have our ",(0,n.kt)("inlineCode",{parentName:"p"},"Door")," interface and some implementation for it"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I am a wooden door'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IronDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I am an iron door'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have some fitting experts for each door type"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Welder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I can only fit iron doors'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Carpenter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFittingExpert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'I can only fit wooden doors'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now we have our abstract factory that would let us make family of related objects i.e. wooden door factory would create a wooden door and wooden door fitting expert and iron door factory would create an iron door and iron door fitting expert"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Wooden factory to return carpenter and wooden door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WoodenDoorFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Carpenter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Iron door factory to get iron door and the relevant fitting expert"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IronDoorFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DoorFactory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Door"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IronDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"DoorFittingExpert"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Welder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WoodenDoorFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$woodenFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I am a wooden door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I can only fit wooden doors"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Same for Iron Factory"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IronDoorFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$ironFactory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeFittingExpert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I am an iron door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$expert"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: I can only fit iron doors"),"\n")),(0,n.kt)("p",null,"As you can see the wooden door factory has encapsulated the ",(0,n.kt)("inlineCode",{parentName:"p"},"carpenter")," and the ",(0,n.kt)("inlineCode",{parentName:"p"},"wooden door")," also iron door factory has encapsulated the ",(0,n.kt)("inlineCode",{parentName:"p"},"iron door")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"welder"),". And thus it had helped us make sure that for each of the created door, we do not get a wrong fitting expert. "),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When there are interrelated dependencies with not-that-simple creation logic involved"),(0,n.kt)("h2",null,"\ud83d\udc77 Builder"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'Imagine you are at Hardee\'s and you order a specific deal, lets say, "Big Hardee" and they hand it over to you without ',(0,n.kt)("em",{parentName:"p"},"any questions"),"; this is the example of simple factory. But there are cases when the creation logic might involve more steps. For example you want a customized Subway deal, you have several options in how your burger is made e.g what bread do you want? what types of sauces would you like? What cheese would you want? etc. In such cases builder pattern comes to the rescue.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The builder pattern is an object creation software design pattern with the intentions of finding a solution to the telescoping constructor anti-pattern.")),(0,n.kt)("p",null,"Having said that let me add a bit about what telescoping constructor anti-pattern is. At one point or the other we have all seen a constructor like below:"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"As you can see; the number of constructor parameters can quickly get out of hand and it might become difficult to understand the arrangement of parameters. Plus this parameter list could keep on growing if you would want to add more options in future. This is called telescoping constructor anti-pattern."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"The sane alternative is to use the builder pattern. First of all we have our burger that we want to make"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Burger"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"BurgerBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$builder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then we have the builder"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"BurgerBuilder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"false"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"size")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$size"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addPepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"pepperoni")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addLettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"lettuce")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addCheese"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"cheese")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addTomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"tomato")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant boolean"}),"true"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"Burger"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Burger"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as:"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$burger")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"BurgerBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"14"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addPepperoni"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addLettuce"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addTomato"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When there could be several flavors of an object and to avoid the constructor telescoping. The key difference from the factory pattern is that; factory pattern is to be used when the creation is a one step process while builder pattern is to be used when the creation is a multi step process."),(0,n.kt)("h2",null,"\ud83d\udc11 Prototype"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Remember dolly? The sheep that was cloned! Lets not get into the details but the key point here is that it is all about cloning")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Create object based on an existing object through cloning.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The prototype pattern is a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects.")),(0,n.kt)("p",null,"In short, it allows you to create a copy of an existing object and modify it to your needs, instead of going through the trouble of creating an object from scratch and setting it up."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"In PHP, it can be easily done using ",(0,n.kt)("inlineCode",{parentName:"p"},"clone")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Sheep"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Mountain Sheep'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"category"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then it can be cloned like below"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sheep"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jolly'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jolly"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mountain Sheep"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Clone and modify what is required"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"clone")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$original"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Dolly'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Dolly"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$cloned"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCategory"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mountain sheep"),"\n")),(0,n.kt)("p",null,"Also you could use the magic method ",(0,n.kt)("inlineCode",{parentName:"p"},"__clone")," to modify the cloning behavior."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"When to use?")),(0,n.kt)("p",null,"When an object is required that is similar to existing object or when the creation would be expensive as compared to cloning."),(0,n.kt)("h2",null,"\ud83d\udc8d Singleton"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"There can only be one president of a country at a time. The same president has to be brought to action, whenever duty calls. President here is singleton.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Ensures that only one object of a particular class is ever created.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.")),(0,n.kt)("p",null,"Singleton pattern is actually considered an anti-pattern and overuse of it should be avoided. It is not necessarily bad and could have some valid use-cases but should be used with caution because it introduces a global state in your application and change to it in one place could affect in the other areas and it could become pretty difficult to debug. The other bad thing about them is it makes your code tightly coupled plus mocking the singleton could be difficult."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"To create a singleton, make the constructor private, disable cloning, disable extension and create a static variable to house the instance"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"final")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"President"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hide the constructor"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"static")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"President"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"self"),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$instance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__clone"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable cloning"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"private")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__wakeup"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable unserialize"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then in order to use"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"President",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president2")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token scope"}),"President",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"::")),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getInstance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"var_dump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"===")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$president2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// true"),"\n")),(0,n.kt)("h2",null,"Structural Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?"')),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, structural design patterns are design patterns that ease the design by identifying a simple way to realize relationships between entities.")),(0,n.kt)("p",null,"There are 7 types of structural patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-adapter"}),"Adapter")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-bridge"}),"Bridge")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-composite"}),"Composite")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-decorator"}),"Decorator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-facade"}),"Facade")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-flyweight"}),"Flyweight")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-proxy"}),"Proxy"))),(0,n.kt)("h2",null,"\ud83d\udd0c Adapter"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider that you have some pictures in your memory card and you need to transfer them to your computer. In order to transfer them you need some kind of adapter that is compatible with your computer ports so that you can attach memory card to your computer. In this case card reader is an adapter.\nAnother example would be the famous power adapter; a three legged plug can't be connected to a two pronged outlet, it needs to use a power adapter that makes it compatible with the two pronged outlet.\nYet another example would be a translator translating words spoken by one person to another")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Adapter pattern lets you wrap an otherwise incompatible object in an adapter to make it compatible with another class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Consider a game where there is a hunter and he hunts lions."),(0,n.kt)("p",null,"First we have an interface ",(0,n.kt)("inlineCode",{parentName:"p"},"Lion")," that all types of lions have to implement"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AfricanLion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AsianLion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And hunter expects any implementation of ",(0,n.kt)("inlineCode",{parentName:"p"},"Lion")," interface to hunt."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Hunter"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"hunt"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let's say we have to add a ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDog")," in our game so that hunter can hunt that also. But we can't do that directly because dog has a different interface. To make it compatible for our hunter, we will have to create an adapter that is compatible"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This needs to be added to the game"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WildDog"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"bark"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Adapter around wild dog to make it compatible with our game"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WildDogAdapter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WildDog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"dog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"dog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"bark"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And now the ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDog")," can be used in our game using ",(0,n.kt)("inlineCode",{parentName:"p"},"WildDogAdapter"),"."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDog")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WildDog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDogAdapter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WildDogAdapter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDog"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$hunter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Hunter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$hunter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"hunt"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$wildDogAdapter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,n.kt)("h2",null,"\ud83d\udea1 Bridge"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider you have a website with different pages and you are supposed to allow the user to change the theme. What would you do? Create multiple copies of each of the pages for each of the themes or would you just create separate theme and load them based on the user's preferences? Bridge pattern allows you to do the second i.e.")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://cloud.githubusercontent.com/assets/11269635/23065293/33b7aea0-f515-11e6-983f-98823c9845ee.png",alt:"With and without the bridge pattern"}))),(0,n.kt)("p",null,"In Plain Words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Bridge pattern is about preferring composition over inheritance. Implementation details are pushed from a hierarchy to another object with a separate hierarchy.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'The bridge pattern is a design pattern used in software engineering that is meant to "decouple an abstraction from its implementation so that the two can vary independently"')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating our WebPage example from above. Here we have the ",(0,n.kt)("inlineCode",{parentName:"p"},"WebPage")," hierarchy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"About")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"About page in "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Careers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WebPage"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Careers page in "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"theme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And the separate theme hierarchy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DarkTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Dark Black'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LightTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Off white'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AquaTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Theme"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getColor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Light blue'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And both the hierarchies"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DarkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$about")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"About"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$careers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Careers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$darkTheme"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$about"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),'// "About page in Dark Black";'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$careers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),'// "Careers page in Dark Black";'),"\n")),(0,n.kt)("h2",null,"\ud83c\udf3f Composite"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Every organization is composed of employees. Each of the employees has the same features i.e. has a salary, has some responsibilities, may or may not report to someone, may or may not have some subordinates etc.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Composite pattern lets clients treat the individual objects in a uniform manner.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'In software engineering, the composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets clients treat individual objects and compositions uniformly.')),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our employees example from above. Here we have different employee types"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Developer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n \n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Designer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Employee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"string"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"salary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getRoles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"roles"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have an organization which consists of several different types of employees"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Organization"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employees"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Employee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"employees"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getNetSalaries"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"employees")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$employee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$netSalary"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Prepare the employees"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Developer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"12000"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Designer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"15000"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Add them to organization"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addEmployee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Net salaries: "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$organization"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getNetSalaries"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Net Salaries: 27000"),"\n")),(0,n.kt)("h2",null,"\u2615 Decorator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Imagine you run a car service shop offering multiple services. Now how do you calculate the bill to be charged? You pick one service and dynamically keep adding to it the prices for the provided services till you get the final cost. Here each type of service is a decorator.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Decorator pattern lets you dynamically change the behavior of an object at run time by wrapping them in an object of a decorator class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the decorator pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class. The decorator pattern is often useful for adhering to the Single Responsibility Principle, as it allows functionality to be divided between classes with unique areas of concern.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Lets take coffee for example. First of all we have a simple coffee implementing the coffee interface"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SimpleCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"10"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Simple coffee'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"We want to make the code extensible to allow options to modify it if required. Lets make some add-ons (decorators)"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"MilkCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', milk'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WhipCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', whip'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"VanillaCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Coffee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"coffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"', vanilla'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Lets make a coffee now"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SimpleCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 10"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"MilkCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 12"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WhipCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 17"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk, whip"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"VanillaCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getCost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 20"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$someCoffee"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getDescription"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Simple Coffee, milk, whip, vanilla"),"\n")),(0,n.kt)("h2",null,"\ud83d\udce6 Facade"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'How do you turn on the computer? "Hit the power button" you say! That is what you believe because you are using a simple interface that computer provides on the outside, internally it has to do a lot of stuff to make it happen. This simple interface to the complex subsystem is a facade.')),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Facade pattern provides a simplified interface to a complex subsystem.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A facade is an object that provides a simplified interface to a larger body of code, such as a class library.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our computer example from above. Here we have the computer class"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Computer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getElectricShock"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Ouch!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"makeSound"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Beep beep!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showLoadingScreen"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Loading.."'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"bam"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Ready to be used!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"closeEverything"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Bup bup bup buzzzz!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sooth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Zzzzz"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"pullCurrent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Haaah!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Here we have the facade"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ComputerFacade"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getElectricShock"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"makeSound"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"showLoadingScreen"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"bam"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"closeEverything"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pullCurrent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sooth"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now to use the facade"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ComputerFacade"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ouch! Beep beep! Loading.. Ready to be used!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$computer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bup bup buzzz! Haah! Zzzzz"),"\n")),(0,n.kt)("h2",null,"\ud83c\udf43 Flyweight"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Did you ever have fresh tea from some stall? They often make more than one cup that you demanded and save the rest for any other customer so to save the resources e.g. gas etc. Flyweight pattern is all about that i.e. sharing.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It is used to minimize memory usage or computational expenses by sharing as much as possible with similar objects.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In computer programming, flyweight is a software design pattern. A flyweight is an object that minimizes memory use by sharing as much data as possible with other similar objects; it is a way to use objects in large numbers when a simple repeated representation would use an unacceptable amount of memory.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our tea example from above. First of all we have tea types and tea maker"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Anything that will be cached is flyweight."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Types of tea here will be flyweights."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"KarakTea"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Acts as a factory and saves the tea"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TeaMaker"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$availableTea")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"empty"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"KarakTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"availableTea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$preference"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have the ",(0,n.kt)("inlineCode",{parentName:"p"},"TeaShop")," which takes orders and serves them"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TeaShop"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$orders"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"TeaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"teaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaType"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"orders"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaType"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"serve"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"orders")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=>")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$tea"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Serving tea to table# "')," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$table"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And it can be used as below"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TeaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TeaShop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$teaMaker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'less sugar'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'more milk'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"takeOrder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'without sugar'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$shop"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"serve"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 1"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 2"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serving tea to table# 5"),"\n")),(0,n.kt)("h2",null,"\ud83c\udfb1 Proxy"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Have you ever used an access card to go through a door? There are multiple options to open that door i.e. it can be opened either using access card or by pressing a button that bypasses the security. The door's main functionality is to open but there is a proxy added on top of it to add some functionality. Let me better explain it using the code example below.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Using the proxy pattern, a class represents the functionality of another class.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A proxy, in its most general form, is a class functioning as an interface to something else. A proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Taking our security door example from above. Firstly we have the door interface and an implementation of door"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LabDoor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Opening lab door"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Closing the lab door"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have a proxy to secure any doors that we want"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SecuredDoor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"authenticate"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"else")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Big no! It ain\'t possible."'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"authenticate"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$password")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"===")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'$ecr@t'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And here is how it can be used"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SecuredDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"LabDoor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'invalid'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Big no! It ain't possible."),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'$ecr@t'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Opening lab door"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$door"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Closing lab door"),"\n")),(0,n.kt)("p",null,"Yet another example would be some sort of data-mapper implementation. For example, I recently made an ODM (Object Data Mapper) for MongoDB using this pattern where I wrote a proxy around mongo classes while utilizing the magic method ",(0,n.kt)("inlineCode",{parentName:"p"},"__call()"),". All the method calls were proxied to the original mongo class and result retrieved was returned as it is but in case of ",(0,n.kt)("inlineCode",{parentName:"p"},"find")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"findOne")," data was mapped to the required class objects and the object was returned instead of ",(0,n.kt)("inlineCode",{parentName:"p"},"Cursor"),"."),(0,n.kt)("h2",null,"Behavioral Design Patterns"),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},'It is concerned with assignment of responsibilities between the objects. What makes them different from structural patterns is they don\'t just specify the structure but also outline the patterns for message passing/communication between them. Or in other words, they assist in answering "How to run a behavior in software component?"')),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, behavioral design patterns are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication.")),(0,n.kt)("p",null,"There are 10 types of behavioral design patterns"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-chain-of-responsibility"}),"Chain of Responsibility")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-command"}),"Command")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-iterator"}),"Iterator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-mediator"}),"Mediator")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-memento"}),"Memento")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-observer"}),"Observer")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-visitor"}),"Visitor")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-strategy"}),"Strategy")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-state"}),"State")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#-template-method"}),"Template Method"))),(0,n.kt)("h2",null,"\ud83d\udd17 Chain of Responsibility"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"For example, you have three payment methods (",(0,n.kt)("inlineCode",{parentName:"p"},"A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"C"),") setup in your account; each having a different amount in it. ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," has 100 USD, ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," has 300 USD and ",(0,n.kt)("inlineCode",{parentName:"p"},"C")," having 1000 USD and the preference for payments is chosen as ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," then ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," then ",(0,n.kt)("inlineCode",{parentName:"p"},"C"),". You try to purchase something that is worth 210 USD. Using Chain of Responsibility, first of all account ",(0,n.kt)("inlineCode",{parentName:"p"},"A")," will be checked if it can make the purchase, if yes purchase will be made and the chain will be broken. If not, request will move forward to account ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," checking for amount if yes chain will be broken otherwise the request will keep forwarding till it finds the suitable handler. Here ",(0,n.kt)("inlineCode",{parentName:"p"},"A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"B")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"C")," are links of the chain and the whole phenomenon is Chain of Responsibility.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It helps building a chain of objects. Request enters from one end and keeps going from object to object till it finds the suitable handler.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented design, the chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Translating our account example above. First of all we have a base account having the logic for chaining the accounts together and some accounts"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Account")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$account"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$account"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"canPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sprintf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Paid %s using %s'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"get_called_class"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"elseif")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sprintf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Cannot pay using %s. Proceeding ..'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"get_called_class"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"successor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amountToPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"else")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"throw")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Exception"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'None of the accounts have enough balance'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"canPay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amount"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"bool"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),">=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$amount"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bank")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Paypal")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bitcoin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Account"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"balance")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$balance"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Now let's prepare the chain using the links defined above (i.e. Bank, Paypal, Bitcoin)"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Let's prepare a chain like below"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// $bank->$paypal->$bitcoin"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"//"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// First priority bank"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If bank can't pay then paypal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If paypal can't pay then bit coin"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bank with balance 100"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"200"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Paypal with balance 200"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bitcoin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bitcoin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"300"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bitcoin with balance 300"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$paypal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setNext"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bitcoin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Let's try to pay using the first priority i.e. bank"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bank"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"pay"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"259"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output will be"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// =============="),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Cannot pay using bank. Proceeding .."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Cannot pay using paypal. Proceeding ..:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Paid 259 using Bitcoin!"),"\n")),(0,n.kt)("h2",null,"\ud83d\udc6e Command"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A generic example would be you ordering food at a restaurant. You (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Client"),") ask the waiter (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker"),") to bring some food (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Command"),") and waiter simply forwards the request to Chef (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Receiver"),") who has the knowledge of what and how to cook.\nAnother example would be you (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Client"),") switching on (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Command"),") the television (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Receiver"),") using a remote control (",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker"),").")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Allows you to encapsulate actions in objects. The key idea behind this pattern is to provide the means to decouple client from receiver.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to encapsulate all information needed to perform an action or trigger an event at a later time. This information includes the method name, the object that owns the method and values for the method parameters.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"First of all we have the receiver that has the implementation of every action that could be performed"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Receiver"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Bulb"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Bulb has been lit"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Darkness!"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"then we have an interface that each of the commands are going to implement and then we have a set of commands"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TurnOn")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TurnOff")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Command"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"undo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"redo"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have an ",(0,n.kt)("inlineCode",{parentName:"p"},"Invoker")," with whom the client will interact to process any commands"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Invoker"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"RemoteControl"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Command")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$command"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$command"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"execute"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Finally let's see how we can use it in our client"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOn")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TurnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOff")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TurnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$bulb"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RemoteControl"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOn"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Bulb has been lit!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$remote"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"submit"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$turnOff"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Darkness!"),"\n")),(0,n.kt)("p",null,"Command pattern can also be used to implement a transaction based system. Where you keep maintaining the history of commands as soon as you execute them. If the final command is successfully executed, all good otherwise just iterate through the history and keep executing the ",(0,n.kt)("inlineCode",{parentName:"p"},"undo")," on all the executed commands."),(0,n.kt)("h2",null,"\u27bf Iterator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"An old radio set will be a good example of iterator, where user could start at some channel and then use next or previous buttons to go through the respective channels. Or take an example of MP3 player or a TV set where you could press the next and previous buttons to go through the consecutive channels or in other words they all provide an interface to iterate through the respective channels, songs or radio stations. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It presents a way to access the elements of an object without exposing the underlying presentation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers; in some cases, algorithms are necessarily container-specific and thus cannot be decoupled.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"In PHP it is quite easy to implement using SPL (Standard PHP Library). Translating our radio stations example from above. First of all we have ",(0,n.kt)("inlineCode",{parentName:"p"},"RadioStation")),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"RadioStation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"float")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"frequency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"float"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"frequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our iterator"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token package"}),"Countable"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token package"}),"Iterator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"StationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Countable"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," Iterator\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token doc-comment comment"}),"/** ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"@var")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token class-name"}),"RadioStation",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"]"))," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token parameter"}),"$stations")," */"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stations")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token doc-comment comment"}),"/** ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"@var")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token class-name"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token keyword"}),"int"))," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token parameter"}),"$counter")," */"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"removeStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemove"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemove"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"array_filter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"RadioStation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"use")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$toRemoveFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"count"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"int"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"count"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"current"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name return-type"}),"RadioStation"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"key"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"next"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"rewind"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"valid"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"bool"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"isset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"stations"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"counter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"StationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"89"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"101"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"102"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"103.2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$station"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getFrequency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token constant"}),"PHP_EOL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$stationList"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"removeStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"RadioStation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"89"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Will remove station 89"),"\n")),(0,n.kt)("h2",null,"\ud83d\udc7d Mediator"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Mediator pattern adds a third party object (called mediator) to control the interaction between two objects (called colleagues). It helps reduce the coupling between the classes communicating with each other. Because now they don't need to have the knowledge of each other's implementation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the mediator pattern defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program's running behavior.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Here is the simplest example of a chat room (i.e. mediator) with users (i.e. colleagues) sending messages to each other."),(0,n.kt)("p",null,"First of all, we have the mediator i.e. the chat room"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ChatRoomMediator")," \n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Mediator"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"ChatRoom")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ChatRoomMediator"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$time")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"date"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'M d, y H:i'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sender")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$user"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$time")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'['")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sender")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"']:'")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our users i.e. colleagues"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"User")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"ChatRoomMediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"chatMediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getName"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"chatMediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"showMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$message"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And the usage"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"ChatRoom"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"User"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"User"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$mediator"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$john"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hi there!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jane"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"send"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hey!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output will be"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Feb 14, 10:58 [John]: Hi there!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Feb 14, 10:58 [Jane]: Hey!"),"\n")),(0,n.kt)("h2",null,"\ud83d\udcbe Memento"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Take the example of calculator (i.e. originator), where whenever you perform some calculation the last calculation is saved in memory (i.e. memento) so that you can get back to it and maybe get it restored using some action buttons (i.e. caretaker).")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Memento pattern is about capturing and storing the current state of an object in a manner that it can be restored later on in a smooth manner.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The memento pattern is a software design pattern that provides the ability to restore an object to its previous state (undo via rollback).")),(0,n.kt)("p",null,"Usually useful when you need to provide some sort of undo functionality."),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Lets take an example of text editor which keeps saving the state from time to time and that you can restore if you want."),(0,n.kt)("p",null,"First of all we have our memento object that will be able to hold the editor state"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"EditorMemento"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our editor i.e. originator that is going to use memento object"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Editor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"''"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"' '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"save"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"EditorMemento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"restore"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"EditorMemento")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$memento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"content")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$memento"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Type some stuff"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'This is the first sentence.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'This is second.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Save the state to restore to : This is the first sentence. This is second."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$saved")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"save"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Type some more"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'And this is third.'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output: Content before Saving"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This is the first sentence. This is second. And this is third."),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Restoring to last saved state"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"restore"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$saved"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getContent"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// This is the first sentence. This is second."),"\n")),(0,n.kt)("h2",null,"\ud83d\ude0e Observer"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"A good example would be the job seekers where they subscribe to some job posting site and they are notified whenever there is a matching job opportunity. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Defines a dependency between objects so that whenever an object changes its state, all its dependents are notified.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our example from above. First of all we have job seekers that need to be notified for a job posting"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"JobPost"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"title")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"getTitle"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"title"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"JobSeeker")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Observer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$name"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"onJobPosted"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$job"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do something with the job posting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Hi '")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"name")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'! New job posted: '"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),".")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$job"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"getTitle"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our job postings to which the job seekers will subscribe"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"EmploymentAgency")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Observable"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"notify"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"foreach")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"observers")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"as")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"onJobPosted"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Observer")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"observers"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$observer"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"addJob"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"JobPost")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"notify"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPosting"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Create subscribers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$johnDoe")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobSeeker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'John Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$janeDoe")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobSeeker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jane Doe'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Create publisher and attach subscribers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"EmploymentAgency"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$johnDoe"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attach"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$janeDoe"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Add a new job and see if subscribers get notified"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jobPostings"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"addJob"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"JobPost"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Software Engineer'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hi John Doe! New job posted: Software Engineer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Hi Jane Doe! New job posted: Software Engineer"),"\n")),(0,n.kt)("h2",null,"\ud83c\udfc3 Visitor"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider someone visiting Dubai. They just need a way (i.e. visa) to enter Dubai. After arrival, they can come and visit any place in Dubai on their own without having to ask for permission or to do some leg work in order to visit any place here; just let them know of a place and they can visit it. Visitor pattern lets you do just that, it helps you add places to visit so that they can visit as much as they can without having to do any legwork.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Visitor pattern lets you add further operations to objects without having to modify them.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In object-oriented programming and software engineering, the visitor design pattern is a way of separating an algorithm from an object structure on which it operates. A practical result of this separation is the ability to add new operations to existing object structures without modifying those structures. It is one way to follow the open/closed principle.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Let's take an example of a zoo simulation where we have several different kinds of animals and we have to make them Sound. Let's translate this using visitor pattern"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Visitee"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Visitor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our implementations for the animals"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"shout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Ooh oo aa aa!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Roaaar!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Animal"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Tuut tuttu tuutt!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"AnimalOperation")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$operation"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Let's implement our visitor"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Speak")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"shout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"roar"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ooh oo aa aa! "),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Roaaar!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Tuut tutt tuutt!"),"\n")),(0,n.kt)("p",null,"We could have done this simply by having an inheritance hierarchy for the animals but then we would have to modify the animals whenever we would have to add new actions to animals. But now we will not have to change them. For example, let's say we are asked to add the jump behavior to the animals, we can simply add that by creating a new visitor i.e."),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Jump")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AnimalOperation"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitMonkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Monkey")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jumped 20 feet high! on to the tree!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitLion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Lion")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Jumped 7 feet! Back on the ground!'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"visitDolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"Dolphin")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Walked on water a little and disappeared'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And for the usage"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Ooh oo aa aa!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$monkey"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jumped 20 feet high! on to the tree!"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Roaaar!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$lion"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Jumped 7 feet! Back on the ground!"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$speak"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Tuut tutt tuutt!"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dolphin"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"accept"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$jump"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Walked on water a little and disappeared"),"\n")),(0,n.kt)("h2",null,"\ud83d\udca1 Strategy"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Consider the example of sorting, we implemented bubble sort but the data started to grow and bubble sort started getting very slow. In order to tackle this we implemented Quick sort. But now although the quick sort algorithm was doing better for large datasets, it was very slow for smaller datasets. In order to handle this we implemented a strategy where for small datasets, bubble sort will be used and for larger, quick sort.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Strategy pattern allows you to switch the algorithm or strategy based upon the situation.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In computer programming, the strategy pattern (also known as the policy pattern) is a behavioural software design pattern that enables an algorithm's behavior to be selected at runtime.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Translating our example from above. First of all we have our strategy interface and different strategy implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"BubbleSortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Sorting using bubble sort"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do sorting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"QuickSortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"SortStrategy"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string double-quoted-string"}),'"Sorting using quick sort"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do sorting"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then we have our client that is going to use any strategy"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Sorter"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"SortStrategy")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"array")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword return-type"}),"array"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"BubbleSortStrategy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output : Sorting using bubble sort"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"QuickSortStrategy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$sorter"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"sort"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$dataset"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output : Sorting using quick sort"),"\n")),(0,n.kt)("h2",null,"\ud83d\udca2 State"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Imagine you are using some drawing application, you choose the paint brush to draw. Now the brush changes its behavior based on the selected color i.e. if you have chosen red color it will draw in red, if blue then it will be in blue etc. ")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"It lets you change the behavior of a class when the state changes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The state pattern is a behavioral software design pattern that implements a state machine in an object-oriented way. With the state pattern, a state machine is implemented by implementing each individual state as a derived class of the state pattern interface, and implementing state transitions by invoking methods defined by the pattern's superclass.\nThe state pattern can be interpreted as a strategy pattern which is able to switch the current strategy through invocations of methods defined in the pattern's interface.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic example")),(0,n.kt)("p",null,"Let's take an example of text editor, it lets you change the state of text that is typed i.e. if you have selected bold, it starts writing in bold, if italic then in italics etc."),(0,n.kt)("p",null,"First of all we have our state interface and some state implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"interface")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"UpperCase")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"strtoupper"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"LowerCase")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"strtolower"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"DefaultText")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"implements")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"WritingState"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we have our editor"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"TextEditor"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"protected")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"__construct"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WritingState")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name type-declaration"}),"WritingState")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword type-hint"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token property"}),"state"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"write"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$words"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"TextEditor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"DefaultText"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'First line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"UpperCase"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Second line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Third line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"setState"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"LowerCase"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Fourth line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$editor"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"type"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Fifth line'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// First line"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// SECOND LINE"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// THIRD LINE"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// fourth line"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// fifth line"),"\n")),(0,n.kt)("h2",null,"\ud83d\udcd2 Template Method"),(0,n.kt)("p",null,"Real world example"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Suppose we are getting some house built. The steps for building might look like"),(0,n.kt)("ul",{parentName:"blockquote"},(0,n.kt)("li",{parentName:"ul"},"Prepare the base of house"),(0,n.kt)("li",{parentName:"ul"},"Build the walls"),(0,n.kt)("li",{parentName:"ul"},"Add roof"),(0,n.kt)("li",{parentName:"ul"},"Add other floors"))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"The order of these steps could never be changed i.e. you can't build the roof before building the walls etc but each of the steps could be modified for example walls can be made of wood or polyester or stone.")),(0,n.kt)("p",null,"In plain words"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Template method defines the skeleton of how a certain algorithm could be performed, but defers the implementation of those steps to the children classes.")),(0,n.kt)("p",null,"Wikipedia says"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"In software engineering, the template method pattern is a behavioral design pattern that defines the program skeleton of an algorithm in an operation, deferring some steps to subclasses. It lets one redefine certain steps of an algorithm without changing the algorithm's structure.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"Programmatic Example")),(0,n.kt)("p",null,"Imagine we have a build tool that helps us test, lint, build, generate build reports (i.e. code coverage reports, linting report etc) and deploy our app on the test server."),(0,n.kt)("p",null,"First of all we have our base class that specifies the skeleton for the build algorithm"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Template method"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"final")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token this"}),"$this"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"abstract")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Then we can have our implementations"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"AndroidBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Running android tests'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Linting the android code'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Assembling the android build'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Deploying android build to server'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"class")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name-definition class-name"}),"IosBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"extends")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"Builder"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"test"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Running ios tests'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"lint"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Linting the ios code'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"assemble"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Assembling the ios build'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"public")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function-definition function"}),"deploy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"echo")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string single-quoted-string"}),"'Deploying ios build to server'"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"And then it can be used as"),(0,n.kt)("pre",Object.assign({},{className:"language-php"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-php"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$androidBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"AndroidBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$androidBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Running android tests"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Linting the android code"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Assembling the android build"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Deploying android build to server"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$iosBuilder")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"new")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token class-name"}),"IosBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token variable"}),"$iosBuilder"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"->"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"build"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Output:"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Running ios tests"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Linting the ios code"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Assembling the ios build"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Deploying ios build to server"),"\n")),(0,n.kt)("h2",null,"Wrap Up Folks"),(0,n.kt)("p",null,"And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it."))}c.isMDXComponent=!0},3784:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/dhcp.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/dhcp.png",alt:null})))))}c.isMDXComponent=!0},9937:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works."),(0,n.kt)("p",null,"DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://i.imgur.com/z9rwm5A.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"https://i.imgur.com/z9rwm5A.png",alt:null})))))}c.isMDXComponent=!0},8003:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the \u201cAtwood Law\u201d which states that ",(0,n.kt)("em",{parentName:"p"},"Any application that can be written in JavaScript will eventually be written in JavaScript"),". Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption."),(0,n.kt)("h3",null,"JavaScript is announced"),(0,n.kt)("p",null,"JavaScript was initially created by ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/BrendanEich"}),"Brendan Eich")," of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named ",(0,n.kt)("inlineCode",{parentName:"p"},"Mocha")," by the creator, which was later renamed to ",(0,n.kt)("inlineCode",{parentName:"p"},"LiveScript"),". In 1996, about a year later after the release, NetScape decided to rename it to be ",(0,n.kt)("inlineCode",{parentName:"p"},"JavaScript")," with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript."),(0,n.kt)("h3",null,"ES1, ES2 and ES3"),(0,n.kt)("p",null,"In 1996, Netscape decided to submit it to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Ecma_International"}),"ECMA International")," with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, ",(0,n.kt)("inlineCode",{parentName:"p"},"ECMAScript")," was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999."),(0,n.kt)("h3",null,"Decade of Silence and ES4"),(0,n.kt)("p",null,"After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads \u2014 adding polyfills to battle compatibility issues between different browsers."),(0,n.kt)("h3",null,"From silence to ES5"),(0,n.kt)("p",null,"Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn\u2019t much of a splash in the water \u2014 it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the \u201cmodern\u201d standards."),(0,n.kt)("h3",null,"Release of ES6 \u2014 ECMAScript 2015"),(0,n.kt)("p",null,"After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://es6-features.org/#Constants"}),"etc")),(0,n.kt)("p",null,"Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don\u2019t have to wait for the full specification to be drafted and approved \u2014 thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year."),(0,n.kt)("h3",null,"Release of ES7 \u2014 ECMAScript 2016"),(0,n.kt)("p",null,"In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Exponentiation operator ",(0,n.kt)("inlineCode",{parentName:"li"},"**")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Array.prototype.includes"))),(0,n.kt)("h3",null,"Release of ES8 \u2014 ECMAScript 2017"),(0,n.kt)("p",null,"The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Object.values()")," and ",(0,n.kt)("inlineCode",{parentName:"li"},"Object.entries()")),(0,n.kt)("li",{parentName:"ul"},"String padding i.e. ",(0,n.kt)("inlineCode",{parentName:"li"},"String.prototype.padEnd()")," and ",(0,n.kt)("inlineCode",{parentName:"li"},"String.prototype.padStart()")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"Object.getOwnPropertyDescriptors")),(0,n.kt)("li",{parentName:"ul"},"Trailing commas in function parameter lists and calls"),(0,n.kt)("li",{parentName:"ul"},"Async functions")),(0,n.kt)("h3",null,"What is ESNext then?"),(0,n.kt)("p",null,"ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing ",(0,n.kt)("inlineCode",{parentName:"p"},"ES2017")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"ES8")," is ",(0,n.kt)("inlineCode",{parentName:"p"},"ESNext"),"."),(0,n.kt)("h3",null,"What does the future hold?"),(0,n.kt)("p",null,"Since the release of ES6, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39"}),"TC39")," has quite streamlined their process. TC39 operates through a Github organization now and there are ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39/proposals"}),"several proposals")," for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/tc39/proposals"}),"submit a proposal")," thus resulting in increasing the participation from the community. Every proposal goes through ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://tc39.github.io/process-document/"}),"four stages of maturity")," before it makes it into the specification."),(0,n.kt)("p",null,"And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/6.0/"}),"ES6"),", ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/7.0/"}),"ES7")," and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.ecma-international.org/ecma-262/8.0/"}),"ES8"),"."))}c.isMDXComponent=!0},9128:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. "),(0,n.kt)("h3",null,"Introduction"),(0,n.kt)("p",null,"What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/mJYVvTh.png",alt:"Web Cache"}))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later.")),(0,n.kt)("p",null,"Before we get into further details, let me give you an overview of the terms that will be used, further in the article"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Client")," could be your browser or any application requesting the server for some resource"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Origin Server"),", the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Stale Content")," is the cached but expired content"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Fresh Content")," is the content available in cache that hasn't expired yet"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Cache Validation")," is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Cache Invalidation")," is the process of removing any stale content available in the cache")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/9MjlzvW.png",alt:null}))),(0,n.kt)("h3",null,"Caching Locations"),(0,n.kt)("p",null,"Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#browser-cache"}),"Browser Cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-cache"}),"Proxy Cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#reverse-proxy-cache"}),"Reverse Proxy Cache"))),(0,n.kt)("h4",null,"Browser Cache"),(0,n.kt)("p",null,"You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/mJYVvTh.png",alt:"Web Cache"}))),(0,n.kt)("p",null,'A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later.'),(0,n.kt)("h4",null,"Proxy Cache"),(0,n.kt)("p",null,"Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"https://i.imgur.com/3mj6e1O.png",alt:"Proxy Cache"}))),(0,n.kt)("h4",null,"Reverse Proxy Cache"),(0,n.kt)("p",null,"Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/Eg4Cru3.png",alt:"Reverse Proxy Cache"}))),(0,n.kt)("p",null,"Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches."),(0,n.kt)("h3",null,"Caching Headers"),(0,n.kt)("p",null,"So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content."),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#expires"}),"Expires")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#pragma"}),"Pragma")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#cache-control"}),"Cache-Control"),(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#private"}),"private")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#public"}),"public")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#no-store"}),"no-store")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#no-cache"}),"no-cache")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#max-age"}),"max-age: seconds")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#s-maxage"}),"s-maxage: seconds")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#must-revalidate"}),"must-revalidate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-revalidate"}),"proxy-revalidate")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#mixing-values"}),"Mixing Values")))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#validators"}),"Validators"),(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#etag"}),"ETag")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#last-modified"}),"Last-Modified"))))),(0,n.kt)("h4",null,"Expires"),(0,n.kt)("p",null,"Before HTTP/1.1 and introduction of ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control"),", there was ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Expires: Mon, 13 Mar 2017 12:22:00 GMT\n")),(0,n.kt)("p",null,"It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. "),(0,n.kt)("p",null,"Although, ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control"),". "),(0,n.kt)("h4",null,"Pragma"),(0,n.kt)("p",null,"Another one from the old, pre HTTP/1.1 days, is ",(0,n.kt)("inlineCode",{parentName:"p"},"Pragma"),". Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see ",(0,n.kt)("inlineCode",{parentName:"p"},"Pragma: no-cache")," being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control")," header should be used to control the caching."),(0,n.kt)("h4",null,"Cache-Control"),(0,n.kt)("p",null,"Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the ",(0,n.kt)("inlineCode",{parentName:"p"},"Expires")," header."),(0,n.kt)("p",null,"Value for the ",(0,n.kt)("inlineCode",{parentName:"p"},"Cache-Control")," header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. "),(0,n.kt)("h5",null,"private"),(0,n.kt)("p",null,"Setting the cache to ",(0,n.kt)("inlineCode",{parentName:"p"},"private")," means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser)"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: private\n")),(0,n.kt)("p",null,"Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. "),(0,n.kt)("h5",null,"public"),(0,n.kt)("p",null,"If set to ",(0,n.kt)("inlineCode",{parentName:"p"},"public"),", apart from being cached by the client, it can also be cached by the proxies; serving many other users"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: public\n")),(0,n.kt)("h5",null,"no-store"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"no-store"))," specifies that the content is not to be cached by any of the caches"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: no-store\n")),(0,n.kt)("h5",null,"no-cache"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"no-cache"))," indicates that the cache can be maintained but the cached content is to be re-validated (using ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, no-cache, public\n")),(0,n.kt)("h5",null,"max-age: seconds"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"max-age"))," specifies the number of seconds for which the content will be cached. For example, if the ",(0,n.kt)("inlineCode",{parentName:"p"},"cache-control")," looks like below:"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, public\n")),(0,n.kt)("p",null,"it would mean that the content is publicly cacheable and will be considered stale after 60 minutes"),(0,n.kt)("h5",null,"s-maxage: seconds"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"s-maxage"))," here ",(0,n.kt)("inlineCode",{parentName:"p"},"s-")," prefix stands for shared. This directive specifically targets the shared caches. Like ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age")," it also gets the number of seconds for which something is to be cached. If present, it will override ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"expires")," headers for shared caching."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: s-maxage=3600, public\n")),(0,n.kt)("h5",null,"must-revalidate"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"must-revalidate"))," it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. "),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Cache-Control: max-age=3600, public, must-revalidate\n")),(0,n.kt)("h5",null,"proxy-revalidate"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("inlineCode",{parentName:"strong"},"proxy-revalidate"))," is similar to ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," but it specifies the same for shared or proxy caches. In other words ",(0,n.kt)("inlineCode",{parentName:"p"},"proxy-revalidate")," is to ",(0,n.kt)("inlineCode",{parentName:"p"},"must-revalidate")," as ",(0,n.kt)("inlineCode",{parentName:"p"},"s-maxage")," is to ",(0,n.kt)("inlineCode",{parentName:"p"},"max-age"),". But why did they not call it ",(0,n.kt)("inlineCode",{parentName:"p"},"s-revalidate"),"?. I have no idea why, if you have any clue please leave a comment below. "),(0,n.kt)("h5",null,"Mixing Values"),(0,n.kt)("p",null,"You can combine these directives in different ways to achieve different caching behaviors, however ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache/no-store")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"public/private")," are mutually exclusive. "),(0,n.kt)("p",null,"If you specify both ",(0,n.kt)("inlineCode",{parentName:"p"},"no-store")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"no-store")," will be given precedence over ",(0,n.kt)("inlineCode",{parentName:"p"},"no-cache"),"."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"; If specified both\nCache-Control: no-store, no-cache\n\n; Below will be considered\nCache-Control: no-store\n")),(0,n.kt)("p",null,"For ",(0,n.kt)("inlineCode",{parentName:"p"},"private/public"),", for any unauthenticated requests cache is considered ",(0,n.kt)("inlineCode",{parentName:"p"},"public")," and for any authenticated ones cache is considered ",(0,n.kt)("inlineCode",{parentName:"p"},"private"),"."),(0,n.kt)("h3",null,"Validators"),(0,n.kt)("p",null,"Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose."),(0,n.kt)("h4",null,"ETag"),(0,n.kt)("p",null,'Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating ',(0,n.kt)("inlineCode",{parentName:"p"},'"give me this resource if ETag is not same as the ETag that I have"')," and the content is downloaded only if the etags do not match. "),(0,n.kt)("p",null,"Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'ETag: "j82j8232ha7sdh0q2882" - Strong Etag\nETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)\n')),(0,n.kt)("p",null,"A strong validating ETag means that two resources are ",(0,n.kt)("strong",{parentName:"p"},"exactly")," same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example."),(0,n.kt)("p",null,"Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in ",(0,n.kt)("inlineCode",{parentName:"p"},"If-None-Match")," header."),(0,n.kt)("p",null,"Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of ",(0,n.kt)("inlineCode",{parentName:"p"},"abc123xyz"),". After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in ",(0,n.kt)("inlineCode",{parentName:"p"},"if-none-match")," header"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'If-None-Match: "abc123xyz"\n')),(0,n.kt)("p",null,"Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of ",(0,n.kt)("inlineCode",{parentName:"p"},"304 Not Modified")," which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has."),(0,n.kt)("h4",null,"Last-Modified"),(0,n.kt)("p",null,"Server might include the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," header indicating the date and time at which some content was last modified on."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT\n")),(0,n.kt)("p",null,"When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called ",(0,n.kt)("inlineCode",{parentName:"p"},"If-Modified-Since")," to server to get the updated ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date; if it matches the date that the client has, ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date for the content is updated to be considered fresh for another ",(0,n.kt)("inlineCode",{parentName:"p"},"n")," seconds. If the received ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT\n")),(0,n.kt)("p",null,"You might be questioning now, what if the cached content has both the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," matches the newly retrieved one and so does the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," date. If either the ",(0,n.kt)("inlineCode",{parentName:"p"},"ETag")," does not match or the ",(0,n.kt)("inlineCode",{parentName:"p"},"Last-Modified")," is greater than the one from the server, content has to be downloaded again. "),(0,n.kt)("h3",null,"Where do I start?"),(0,n.kt)("p",null,"Now that we have got ",(0,n.kt)("em",{parentName:"p"},"everything")," covered, let us put everything in perspective and see how you can use this information."),(0,n.kt)("h4",null,"Utilizing Server"),(0,n.kt)("p",null,"Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. "),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"For example"),", if you are using Apache and you have your static content placed at ",(0,n.kt)("inlineCode",{parentName:"p"},"/static"),", you can put below ",(0,n.kt)("inlineCode",{parentName:"p"},".htaccess")," file in the directory to make all the content in it be cached for an year using below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'# Cache everything for an year\nHeader set Cache-Control "max-age=31536000, public"\n')),(0,n.kt)("p",null,"You can further use ",(0,n.kt)("inlineCode",{parentName:"p"},"filesMatch")," directive to add conditionals and use different caching strategy for different kinds of files e.g."),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"# Cache any images for one year\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"filesMatch")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),'".(png|jpg|jpeg|gif)$"'),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),'\n Header set Cache-Control "max-age=31536000, public"\n',(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"")),"\n\n# Cache any CSS and JS files for a month\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"filesMatch")," ",(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),'".(css|js)$"'),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),'\n Header set Cache-Control "max-age=2628000, public"\n',(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,n.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"")),"\n")),(0,n.kt)("p",null,"Or if you don't want to use the ",(0,n.kt)("inlineCode",{parentName:"p"},".htaccess")," file you can modify Apache's configuration file ",(0,n.kt)("inlineCode",{parentName:"p"},"http.conf"),". Same goes for Nginx, you can add the caching information in the location or server block. "),(0,n.kt)("h4",null,"Caching Recommendations"),(0,n.kt)("p",null,"There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. ",(0,n.kt)("inlineCode",{parentName:"li"},"style.ju2i90.css"),") so that the cache is automatically rejected whenever the files are updated.\nAlso it should be noted that you should not cross the upper limit of one year as it ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9"}),"might not be honored")," "),(0,n.kt)("li",{parentName:"ul"},"Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP."),(0,n.kt)("li",{parentName:"ul"},"Always add the validators (preferably ETags) in your response."),(0,n.kt)("li",{parentName:"ul"},"Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all."),(0,n.kt)("li",{parentName:"ul"},"Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale. "),(0,n.kt)("li",{parentName:"ul"},"Test and monitor the caching headers being served by your site. You can use the browser console or ",(0,n.kt)("inlineCode",{parentName:"li"},"curl -I http://some-url.com")," for that purpose. ")),(0,n.kt)("p",null,"And that about wraps it up. Stay tuned for more!"))}c.isMDXComponent=!0},3045:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"HTTP is the protocol that every web developer should know as it powers the whole web and knowing it is definitely going to help you develop better applications. In this guide, I am going to be discussing what HTTP is, how it came to be, where it is today and how did we get here."),(0,n.kt)("h3",null,"What is HTTP?"),(0,n.kt)("p",null,"First things first, what is HTTP? HTTP is the ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP/IP")," based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet. By application layer protocol, I mean it's just an abstraction layer that standardizes how the hosts (clients and servers) communicate and itself it depends upon ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP/IP")," to get request and response between the client and server. By default TCP port ",(0,n.kt)("inlineCode",{parentName:"p"},"80")," is used but other ports can be used as well. HTTPS, however, uses port ",(0,n.kt)("inlineCode",{parentName:"p"},"443"),"."),(0,n.kt)("h3",null,"HTTP/0.9 \u2013 The One Liner (1991)"),(0,n.kt)("p",null,"The first documented version of HTTP was ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.w3.org/Protocols/HTTP/AsImplemented.html"}),(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/0.9"))," which was put forward in 1991. It was the simplest protocol ever; having a single method called ",(0,n.kt)("inlineCode",{parentName:"p"},"GET"),". If a client had to access some webpage on the server, it would have made the simple request like below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"GET /index.html\n")),(0,n.kt)("p",null,"And the response from server would have looked as follows"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"(response body)\n(connection closed)\n")),(0,n.kt)("p",null,"That is, the server would get the request, reply with the HTML in response and as soon as the content has been transferred, the connection will be closed. There were "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"No headers"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"GET")," was the only allowed method "),(0,n.kt)("li",{parentName:"ul"},"Response had to be HTML")),(0,n.kt)("p",null,"As you can see, the protocol really had nothing more than being a stepping stone for what was to come."),(0,n.kt)("h3",null,"HTTP/1.0 - 1996"),(0,n.kt)("p",null,"In 1996, the next version of HTTP i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," evolved that vastly improved over the original version. "),(0,n.kt)("p",null,"Unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/0.9")," which was only designed for HTML response, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," could now deal with other response formats i.e. images, video files, plain text or any other content type as well. It added more methods (i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"POST")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"HEAD"),"), request/response formats got changed, HTTP headers got added to both the request and responses, status codes were added to identify the response, character set support was introduced, multi-part types, authorization, caching, content encoding and more was included."),(0,n.kt)("p",null,"Here is how a sample ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," request and response might have looked like:"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"GET / HTTP/1.0\nHost: kamranahmed.info\nUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5)\nAccept: */*\n")),(0,n.kt)("p",null,"As you can see, alongside the request, client has also sent its personal information, required response type etc. While in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/0.9")," client could never send such information because there were no headers."),(0,n.kt)("p",null,"Example response to the request above may have looked like below"),(0,n.kt)("pre",Object.assign({},{className:"language-html"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"HTTP/1.0 200 OK \nContent-Type: text/plain\nContent-Length: 137582\nExpires: Thu, 05 Dec 1997 16:00:00 GMT\nLast-Modified: Wed, 5 August 1996 15:55:28 GMT\nServer: Apache 0.84\n\n(response body)\n(connection closed)\n")),(0,n.kt)("p",null,"In the very beginning of the response there is ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," (HTTP followed by the version number), then there is the status code ",(0,n.kt)("inlineCode",{parentName:"p"},"200")," followed by the reason phrase (or description of the status code, if you will). "),(0,n.kt)("p",null,"In this newer version, request and response headers were still kept as ",(0,n.kt)("inlineCode",{parentName:"p"},"ASCII"),' encoded, but the response body could have been of any type i.e. image, video, HTML, plain text or any other content type. So, now that server could send any content type to the client; not so long after the introduction, the term "Hyper Text" in ',(0,n.kt)("inlineCode",{parentName:"p"},"HTTP")," became misnomer. ",(0,n.kt)("inlineCode",{parentName:"p"},"HMTP")," or Hypermedia transfer protocol might have made more sense but, I guess, we are stuck with the name for life."),(0,n.kt)("p",null,"One of the major drawbacks of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," were you couldn't have multiple requests per connection. That is, whenever a client will need something from the server, it will have to open a new TCP connection and after that single request has been fulfilled, connection will be closed. And for any next requirement, it will have to be on a new connection. Why is it bad? Well, let's assume that you visit a webpage having ",(0,n.kt)("inlineCode",{parentName:"p"},"10")," images, ",(0,n.kt)("inlineCode",{parentName:"p"},"5")," stylesheets and ",(0,n.kt)("inlineCode",{parentName:"p"},"5")," javascript files, totalling to ",(0,n.kt)("inlineCode",{parentName:"p"},"20")," items that needs to fetched when request to that webpage is made. Since the server closes the connection as soon as the request has been fulfilled, there will be a series of ",(0,n.kt)("inlineCode",{parentName:"p"},"20")," separate connections where each of the items will be served one by one on their separate connections. This large number of connections results in a serious performance hit as requiring a new ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP")," connection imposes a significant performance penalty because of three-way handshake followed by slow-start."),(0,n.kt)("h4",null,"Three-way Handshake"),(0,n.kt)("p",null,"Three-way handshake in its simplest form is that all the ",(0,n.kt)("inlineCode",{parentName:"p"},"TCP")," connections begin with a three-way handshake in which the client and the server share a series of packets before starting to share the application data. "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"SYN")," - Client picks up a random number, let's say ",(0,n.kt)("inlineCode",{parentName:"li"},"x"),", and sends it to the server."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"SYN ACK")," - Server acknowledges the request by sending an ",(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," packet back to the client which is made up of a random number, let's say ",(0,n.kt)("inlineCode",{parentName:"li"},"y")," picked up by server and the number ",(0,n.kt)("inlineCode",{parentName:"li"},"x+1")," where ",(0,n.kt)("inlineCode",{parentName:"li"},"x")," is the number that was sent by the client"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," - Client increments the number ",(0,n.kt)("inlineCode",{parentName:"li"},"y")," received from the server and sends an ",(0,n.kt)("inlineCode",{parentName:"li"},"ACK")," packet back with the number ",(0,n.kt)("inlineCode",{parentName:"li"},"y+1"))),(0,n.kt)("p",null,"Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet but the server will still have to wait for the ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet to be recieved in order to fulfill the request."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/uERG2G2.png",alt:null}))),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Please note that there is a minor issue with the image, the last ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK")," packet sent by the client to end the handshake contains only ",(0,n.kt)("inlineCode",{parentName:"p"},"y+1")," i.e. it should have been ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK:y+1")," instead of ",(0,n.kt)("inlineCode",{parentName:"p"},"ACK: x+1, y+1")," ")),(0,n.kt)("p",null,"However, some implementations of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," tried to overcome this issue by introducing a new header called ",(0,n.kt)("inlineCode",{parentName:"p"},"Connection: keep-alive"),' which was meant to tell the server "Hey server, do not close this connection, I need it again". But still, it wasn\'t that widely supported and the problem still persisted.'),(0,n.kt)("p",null,"Apart from being connectionless, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP")," also is a stateless protocol i.e. server doesn't maintain the information about the client and so each of the requests has to have the information necessary for the server to fulfill the request on its own without any association with any old requests. And so this adds fuel to the fire i.e. apart from the large number of connections that the client has to open, it also has to send some redundant data on the wire causing increased bandwidth usage."),(0,n.kt)("h3",null,"HTTP/1.1 - 1999"),(0,n.kt)("p",null,"After merely 3 years of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0"),", the next version i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," was released in 1999; which made alot of improvements over its predecessor. The major improvements over ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," included"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"New HTTP methods")," were added, which introduced ",(0,n.kt)("inlineCode",{parentName:"p"},"PUT"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"PATCH"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"OPTIONS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"DELETE"))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Hostname Identification")," In ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," ",(0,n.kt)("inlineCode",{parentName:"p"},"Host")," header wasn't required but ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," made it required.")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Persistent Connections")," As discussed above, in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in accute performance hit and latency problems. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," introduced the persistent connections i.e. ",(0,n.kt)("strong",{parentName:"p"},"connections weren't closed by default")," and were kept open which allowed multiple sequential requests. To close the connections, the header ",(0,n.kt)("inlineCode",{parentName:"p"},"Connection: close")," had to be available on the request. Clients usually send this header in the last request to safely close the connection.")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Pipelining")," It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," header present which clients can use to identify where the response ends and it can start waiting for the next response."),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("p",{parentName:"blockquote"},"It should be noted that in order to benefit from persistent connections or pipelining, ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," header must be available on the response, because this would let the client know when the transmission completes and it can send the next request (in normal sequential way of sending requests) or start waiting for the the next response (when pipelining is enabled). ")),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("p",{parentName:"blockquote"},"But there was still an issue with this approach. And that is, what if the data is dynamic and server cannot find the content length before hand? Well in that case, you really can't benefit from persistent connections, could you?! In order to solve this ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," introduced chunked encoding. In such cases server may omit content-Length in favor of chunked encoding (more to it in a moment). However, if none of them are available, then the connection must be closed at the end of request."))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("strong",{parentName:"p"},"Chunked Transfers")," In case of dynamic content, when the server cannot really find out the ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," when the transmission starts, it may start sending the content in pieces (chunk by chunk) and add the ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," for each chunk when it is sent. And when all of the chunks are sent i.e. whole transmission has completed, it sends an empty chunk i.e. the one with ",(0,n.kt)("inlineCode",{parentName:"p"},"Content-Length")," set to zero in order to identify the client that transmission has completed. In order to notify the client about the chunked transfer, server includes the header ",(0,n.kt)("inlineCode",{parentName:"p"},"Transfer-Encoding: chunked"))),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.0")," which had Basic authentication only, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," included digest and proxy authentication")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Caching")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Byte Ranges")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Character sets")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Language negotiation")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Client cookies")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"Enhanced compression support")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"New status codes")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("p",{parentName:"li"},"..and more "))),(0,n.kt)("p",null,"I am not going to dwell about all the ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf"}),"Key differences between ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/1.0")," and HTTP/1.1")," and here is the link to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://tools.ietf.org/html/rfc2616"}),"original RFC")," for the overachievers."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," has persistent connections, then why so many connections? you say! The reason is, in ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," it can only have one outstanding connection at any moment of time. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," tried to fix this by introducing pipelining but it didn't completely address the issue because of the ",(0,n.kt)("strong",{parentName:"p"},"head-of-line blocking")," where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1"),", the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/"}),"domain sharding")," etc."),(0,n.kt)("h3",null,"SPDY - 2009"),(0,n.kt)("p",null,"Google went ahead and started experimenting with alternative protocols to make the web faster and improving web security while reducing the latency of web pages. In 2009, they announced ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY"),". "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," is a trademark of Google and isn't an acronym.")),(0,n.kt)("p",null,"It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY"),", decrease the latency to increase the network performance."),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transfered per second (bits per second).")),(0,n.kt)("p",null,"The features of ",(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," in the next section as I said ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is mostly inspired from SPDY."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"SPDY")," didn't really try to replace HTTP; it was a translation layer over HTTP which existed at the application layer and modified the request before sending it over to the wire. It started to become a defacto standards and majority of browsers started implementing it. "),(0,n.kt)("p",null,"In 2015, at Google, they didn't want to have two competing standards and so they decided to merge it into HTTP while giving birth to ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," and deprecating SPDY. "),(0,n.kt)("h3",null,"HTTP/2 - 2015"),(0,n.kt)("p",null,"By now, you must be convinced that why we needed another revision of the HTTP protocol. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," was designed for low latency transport of content. The key features or differences from the old version of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," include"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Binary instead of Textual"),(0,n.kt)("li",{parentName:"ul"},"Multiplexing - Multiple asynchronous HTTP requests over a single connection"),(0,n.kt)("li",{parentName:"ul"},"Header compression using HPACK"),(0,n.kt)("li",{parentName:"ul"},"Server Push - Multiple responses for single request"),(0,n.kt)("li",{parentName:"ul"},"Request Prioritization"),(0,n.kt)("li",{parentName:"ul"},"Security")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/S85j8gg.png",alt:null}))),(0,n.kt)("h4",null,"1. Binary Protocol"),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," tends to address the issue of increased latency that existed in HTTP/1.x by making it a binary protocol. Being a binary protocol, it easier to parse but unlike ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.x")," it is no longer readable by the human eye. The major building blocks of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," are Frames and Streams"),(0,n.kt)("h5",null,"Frames and Streams"),(0,n.kt)("p",null,"HTTP messages are now composed of one or more frames. There is a ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," frame for the meta data and ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA")," frame for the payload and there exist several other types of frames (",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"SETTINGS"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"PRIORITY")," etc) that you can check through ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://http2.github.io/http2-spec/#FrameTypes"}),"the ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/2")," specs"),". "),(0,n.kt)("p",null,"Every ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," request and response is given a unique stream ID and it is divided into frames. Frames are nothing but binary pieces of data. A collection of frames is called a Stream. Each frame has a stream id that identifies the stream to which it belongs and each frame has a common header. Also, apart from stream ID being unique, it is worth mentioning that, any request initiated by client uses odd numbers and the response from server has even numbers stream IDs."),(0,n.kt)("p",null,"Apart from the ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"DATA"),", another frame type that I think worth mentioning here is ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM")," which is a special frame type that is used to abort some stream i.e. client may send this frame to let the server know that I don't need this stream anymore. In ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/1.1")," the only way to make the server stop sending the response to client was closing the connection which resulted in increased latency because a new connection had to be opened for any consecutive requests. While in HTTP/2, client can use ",(0,n.kt)("inlineCode",{parentName:"p"},"RST_STREAM")," and stop receiving a specific stream while the connection will still be open and the other streams will still be in play."),(0,n.kt)("h4",null,"2. Multiplexing"),(0,n.kt)("p",null,"Since ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is now a binary protocol and as I said above that it uses frames and streams for requests and responses, once a TCP connection is opened, all the streams are sent asynchronously through the same connection without opening any additional connections. And in turn, the server responds in the same asynchronous way i.e. the response has no order and the client uses the assigned stream id to identify the stream to which a specific packet belongs. This also solves the ",(0,n.kt)("strong",{parentName:"p"},"head-of-line blocking")," issue that existed in HTTP/1.x i.e. the client will not have to wait for the request that is taking time and other requests will still be getting processed."),(0,n.kt)("h4",null,"3. HPACK Header Compression"),(0,n.kt)("p",null,"It was part of a separate RFC which was specifically aimed at optimizing the sent headers. The essence of it is that when we are constantly accessing the server from a same client there is alot of redundant data that we are sending in the headers over and over, and sometimes there might be cookies increasing the headers size which results in bandwidth usage and increased latency. To overcome this, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," introduced header compression."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"http://i.imgur.com/3IPWXvR.png",alt:null}))),(0,n.kt)("p",null,"Unlike request and response, headers are not compressed in ",(0,n.kt)("inlineCode",{parentName:"p"},"gzip")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"compress")," etc formats but there is a different mechanism in place for header compression which is literal values are encoded using Huffman code and a headers table is maintained by the client and server and both the client and server omit any repetitive headers (e.g. user agent etc) in the subsequent requests and reference them using the headers table maintained by both."),(0,n.kt)("p",null,"While we are talking headers, let me add here that the headers are still the same as in HTTP/1.1, except for the addition of some pseudo headers i.e. ",(0,n.kt)("inlineCode",{parentName:"p"},":method"),", ",(0,n.kt)("inlineCode",{parentName:"p"},":scheme"),", ",(0,n.kt)("inlineCode",{parentName:"p"},":host")," and ",(0,n.kt)("inlineCode",{parentName:"p"},":path")),(0,n.kt)("h4",null,"4. Server Push"),(0,n.kt)("p",null,"Server push is another tremendous feature of ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," where the server, knowing that the client is going to ask for a certain resource, can push it to the client without even client asking for it. For example, let's say a browser loads a web page, it parses the whole page to find out the remote content that it has to load from the server and then sends consequent requests to the server to get that content."),(0,n.kt)("p",null,"Server push allows the server to decrease the roundtrips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called ",(0,n.kt)("inlineCode",{parentName:"p"},"PUSH_PROMISE"),' notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The ',(0,n.kt)("inlineCode",{parentName:"p"},"PUSH_PROMISE")," frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed."),(0,n.kt)("h4",null,"5. Request Prioritization"),(0,n.kt)("p",null,"A client can assign a priority to a stream by including the prioritization information in the ",(0,n.kt)("inlineCode",{parentName:"p"},"HEADERS")," frame by which a stream is opened. At any other time, client can send a ",(0,n.kt)("inlineCode",{parentName:"p"},"PRIORITY")," frame to change the priority of a stream."),(0,n.kt)("p",null,"Without any priority information, server processes the requests asynchronously i.e. without any order. If there is priority assigned to a stream, then based on this prioritization information, server decides how much of the resources need to be given to process which request."),(0,n.kt)("h4",null,"6. Security"),(0,n.kt)("p",null,"There was extensive discussion on whether security (through ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS"),") should be made mandatory for ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," when it is used over ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS"),". So, although ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," when implemented over ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS")," does impose some requirementsi.e. ",(0,n.kt)("inlineCode",{parentName:"p"},"TLS")," version ",(0,n.kt)("inlineCode",{parentName:"p"},"1.2")," or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," is here and it has already ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://caniuse.com/#search=http2"}),"surpassed SPDY in adaption")," which is gradually increasing. ",(0,n.kt)("inlineCode",{parentName:"p"},"HTTP/2")," has alot to offer in terms of performance gain and it is about time we should start using it. "),(0,n.kt)("p",null,"For anyone interested in further details here is the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://http2.github.io/http2-spec"}),"link to specs")," and a link ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://www.http2demo.io/"}),"demonstrating the performance benefits of ",(0,n.kt)("inlineCode",{parentName:"a"},"HTTP/2")),". "),(0,n.kt)("p",null,"And that about wraps it up. Until next time! stay tuned."))}c.isMDXComponent=!0},5772:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/jwt-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/jwt-authentication.png",alt:null})))))}c.isMDXComponent=!0},3878:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"I have been working on redoing the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://roadmap.sh"}),"roadmaps")," \u2013 splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles."),(0,n.kt)("p",null,'I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren\'t even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below.'),(0,n.kt)("h3",null,"Different Seniority Titles"),(0,n.kt)("p",null,"Different organizations might have different seniority titles but they mainly fall into three categories:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Junior Developer"),(0,n.kt)("li",{parentName:"ul"},"Mid Level Developer"),(0,n.kt)("li",{parentName:"ul"},"Senior Developer")),(0,n.kt)("h3",null,"Junior Developer"),(0,n.kt)("p",null,"Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},'Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent. '),(0,n.kt)("li",{parentName:"ul"},"They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members."),(0,n.kt)("li",{parentName:"ul"},"Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something."),(0,n.kt)("li",{parentName:"ul"},"They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain."),(0,n.kt)("li",{parentName:"ul"},"Over-engineering is a major problem, often leading to fragility and bugs."),(0,n.kt)("li",{parentName:"ul"},"When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem."),(0,n.kt)("li",{parentName:"ul"},'You might notice the "',(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Somebody_else%27s_problem"}),"Somebody Else's Problem"),'" behavior from them.'),(0,n.kt)("li",{parentName:"ul"},"They don't know what or how much they don't know, thanks to the ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect"}),"Dunning\u2013Kruger effect"),"."),(0,n.kt)("li",{parentName:"ul"},"They don't take initiatives and they might be afraid to work on an unfamiliar codebase."),(0,n.kt)("li",{parentName:"ul"},"They don't participate in team discussions.")),(0,n.kt)("p",null,'Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority:'),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},'All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn\'t have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me."'),(0,n.kt)("li",{parentName:"ul"},"Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice. "),(0,n.kt)("li",{parentName:"ul"},"Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, \"modernized\" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that. "),(0,n.kt)("li",{parentName:"ul"},"Avoid what is known as ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Somebody_else%27s_problem"}),'"Somebody Else\'s Problem Field"')," behavior. "),(0,n.kt)("li",{parentName:"ul"},"When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does."),(0,n.kt)("li",{parentName:"ul"},'Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.'),(0,n.kt)("li",{parentName:"ul"},"It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively."),(0,n.kt)("li",{parentName:"ul"},"Don't let yourself be limited by the job title that you have. Keep working on your self-improvement."),(0,n.kt)("li",{parentName:"ul"},"Do your homework. Predict what\u2019s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something."),(0,n.kt)("li",{parentName:"ul"},"Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt."),(0,n.kt)("li",{parentName:"ul"},"Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner."),(0,n.kt)("li",{parentName:"ul"},"Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people."),(0,n.kt)("li",{parentName:"ul"},'Don\'t just blindly follow the advice of "experts", take it with a grain of salt.'),(0,n.kt)("li",{parentName:"ul"},"If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'."),(0,n.kt)("li",{parentName:"ul"},"Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues. "),(0,n.kt)("li",{parentName:"ul"},'Avoid saying "it works on my machine" -- yes, I have heard that a lot.'),(0,n.kt)("li",{parentName:"ul"},"Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge.")),(0,n.kt)("h3",null,"Mid Level Developers"),(0,n.kt)("p",null,"The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level."),(0,n.kt)("p",null,'Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don\'t know when to make tradeoffs and they still don\'t know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback.'),(0,n.kt)("p",null,'Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one.'),(0,n.kt)("h3",null,"Senior Developers"),(0,n.kt)("p",null,"Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it \u2014 they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture. "),(0,n.kt)("li",{parentName:"ul"},'They don\'t have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic.'),(0,n.kt)("li",{parentName:"ul"},"They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it."),(0,n.kt)("li",{parentName:"ul"},"They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done."),(0,n.kt)("li",{parentName:"ul"},"They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development."),(0,n.kt)("li",{parentName:"ul"},"They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions."),(0,n.kt)("li",{parentName:"ul"},"They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code."),(0,n.kt)("li",{parentName:"ul"},"They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them."),(0,n.kt)("li",{parentName:"ul"},'They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.'),(0,n.kt)("li",{parentName:"ul"},"They know how to give feedback without hurting anyone.")),(0,n.kt)("h3",null,"Conclusion"),(0,n.kt)("p",null,'All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don\'t gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience". '),(0,n.kt)("p",null,"The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one."),(0,n.kt)("p",null,"With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned!"))}c.isMDXComponent=!0},801:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/oauth.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/oauth.png",alt:null})))))}c.isMDXComponent=!0},6681:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"One of my favorite pastimes is going through the history of my favorite projects to learn how they grew over time or how certain features were implemented."),(0,n.kt)("p",null,"The image below describes how I do that in WebStorm."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/project-history.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/project-history.png",alt:null})))))}c.isMDXComponent=!0},7035:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about ",(0,n.kt)("strong",{parentName:"p"},"proxies")," which play a vital role in mitigating these risks. We will cover the following topics in this guide: "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#proxy-server"}),"Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#forward-proxy-server"}),"Forward Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#reverse-proxy-server"}),"Reverse Proxy Server")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",Object.assign({parentName:"li"},{href:"#summary"}),"Summary"))),(0,n.kt)("h2",null,"Proxy Server"),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("em",{parentName:"strong"},"Every web request which is sent from the client to a web server goes through some type of proxy server."))," A proxy server acts as a gateway between client ",(0,n.kt)("em",{parentName:"p"},"(you)")," and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/proxy-example.png",alt:"Proxy Server Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration. ")),(0,n.kt)("p",null,"Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This ",(0,n.kt)("strong",{parentName:"p"},"saves big companies thousands of dollars")," by reducing load on their servers as their website is visited by millions of users every day."),(0,n.kt)("h2",null,"Forward Proxy Server"),(0,n.kt)("p",null,"A forward proxy is generally implemented on the client side and ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple clients")," or client sources. Forward proxy servers are mainly used by companies to ",(0,n.kt)("strong",{parentName:"p"},"manage internet usage")," of their employees and ",(0,n.kt)("strong",{parentName:"p"},"restrict content"),". It is also used as a ",(0,n.kt)("strong",{parentName:"p"},"firewall")," to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to ",(0,n.kt)("strong",{parentName:"p"},"bypass geo-restriction")," and browse content which might be blocked in user's country. It enables users to ",(0,n.kt)("strong",{parentName:"p"},"browse anonymously"),", as the proxy server masks their details from the website's servers. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/forward-proxy.png",alt:"Forward Proxy Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration")),(0,n.kt)("h2",null,"Reverse Proxy Server"),(0,n.kt)("p",null,"Reverse proxy servers are implemented on the ",(0,n.kt)("strong",{parentName:"p"},"server side")," instead of the client side. It ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple webservers")," and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the ",(0,n.kt)("strong",{parentName:"p"},"back-end web servers and not the client"),". Reverse proxy servers are generally used to perform tasks such as ",(0,n.kt)("strong",{parentName:"p"},"authentication, content caching, and encryption/decryption")," on behalf of the web server. These tasks would ",(0,n.kt)("strong",{parentName:"p"},"hog CPU cycles")," on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as ",(0,n.kt)("strong",{parentName:"p"},"load balancers")," to distribute the incoming traffic efficiently among the web servers but it is ",(0,n.kt)("strong",{parentName:"p"},"not optimized")," for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers. "),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/proxy/reverse-proxy.png",alt:"Reverse Proxy Description"}))," "),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s). ")),(0,n.kt)("h2",null,"Summary"),(0,n.kt)("p",null,"A proxy server acts as a gateway between client ",(0,n.kt)("em",{parentName:"p"},"(you)")," and the internet and separates end-users from the websites you browse. ",(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("em",{parentName:"strong"},"The position of the proxy server on the network determines whether it is a forward or a reverse proxy server")),". Forward proxy is implemented on the client side and ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple clients")," or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the ",(0,n.kt)("strong",{parentName:"p"},"server side")," it ",(0,n.kt)("strong",{parentName:"p"},"sits in front of multiple webservers")," and manages the incoming requests by forwarding them to the web servers. "),(0,n.kt)("p",null,"If all this was too much to take in, I have a simple analogy for you. "),(0,n.kt)("p",null,"At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen. "),(0,n.kt)("p",null,"In this analogy: "),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"You are the client"),(0,n.kt)("li",{parentName:"ul"},"Your order is the web request"),(0,n.kt)("li",{parentName:"ul"},"Waiter/Waitress is your forward proxy server"),(0,n.kt)("li",{parentName:"ul"},"Kitchen head chef is the reverse proxy server"),(0,n.kt)("li",{parentName:"ul"},"Other chefs working in the kitchen are the web servers")),(0,n.kt)("p",null,"With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below."))}c.isMDXComponent=!0},513:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random. "),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/random-numbers.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/random-numbers.png",alt:null})))))}c.isMDXComponent=!0},7507:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load."),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/scaling-databases.svg"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/scaling-databases.svg",alt:null})))))}c.isMDXComponent=!0},8676:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/session-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/session-authentication.png",alt:null})))))}c.isMDXComponent=!0},6053:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/ssl-tls-https-ssh.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/ssl-tls-https-ssh.png",alt:null})))))}c.isMDXComponent=!0},9809:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/sso.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/sso.png",alt:null})))))}c.isMDXComponent=!0},5607:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/token-authentication.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/token-authentication.png",alt:null})))))}c.isMDXComponent=!0},4972:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"BitTorrent is a protocol for downloading and distributing files across the Internet. In contrast with the traditional client/server relationship, in which downloaders connect to a central server (for example: watching a movie on Netflix, or loading the web page you're reading now), participants in the BitTorrent network, called ",(0,n.kt)("strong",{parentName:"p"},"peers"),", download pieces of files from ",(0,n.kt)("em",{parentName:"p"},"each other"),"\u2014this is what makes it a ",(0,n.kt)("strong",{parentName:"p"},"peer-to-peer")," protocol. In this article we will investigate how this works, and build our own client that can find peers and exchange data between them."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/client-server-p2p.png",alt:"diagram showing the difference between client/server (all clients connecting to one server) and peer-to-peer (peers connecting to each other) relationships"}))),(0,n.kt)("p",null,"The protocol evolved organically over the past 20 years, and various people and organizations added extensions for features like encryption, private torrents, and new ways of finding peers. We'll be implementing the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://www.bittorrent.org/beps/bep_0003.html"}),"original spec")," from 2001 to keep this a weekend-sized project."),(0,n.kt)("p",null,"I'll be using a ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist"}),"Debian ISO")," file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content."),(0,n.kt)("h2",null,"Finding peers"),(0,n.kt)("p",null,"Here\u2019s a problem: we want to download a file with BitTorrent, but it\u2019s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends\u2014maybe we\u2019ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They\u2019re just web servers running over HTTP, and you can find Debian\u2019s at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"http://bttracker.debian.org:6969/"}),"http://bttracker.debian.org:6969/")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/trackers.png",alt:"illustration of a desktop computer and laptop sitting at a pub"}))),(0,n.kt)("p",null,"Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even ",(0,n.kt)("strong",{parentName:"p"},"peer discovery")," a distributed process. We won't be implementing them, but if you're interested, some terms you can research are ",(0,n.kt)("strong",{parentName:"p"},"DHT"),", ",(0,n.kt)("strong",{parentName:"p"},"PEX"),", and ",(0,n.kt)("strong",{parentName:"p"},"magnet links"),"."),(0,n.kt)("h3",null,"Parsing a .torrent file"),(0,n.kt)("p",null,"A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),'d8:announce41:http://bttracker.debian.org:6969/announce7:comment35:"Debian CD from cdimage.debian.org"13:creation datei1573903810e9:httpseedsl145:https://cdimage.debian.org/cdimage/release/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.iso145:https://cdimage.debian.org/cdimage/archive/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.isoe4:infod6:lengthi351272960e4:name31:debian-10.2.0-amd64-netinst.iso12:piece lengthi262144e6:pieces26800:\ufffd\x1f\ufffd\x0f\ufffd\ufffd\ufffdPS\ufffd^\ufffd\ufffd (binary blob of the hashes of each piece)ee\n')),(0,n.kt)("p",null,"That mess is encoded in a format called ",(0,n.kt)("strong",{parentName:"p"},"Bencode")," (pronounced ",(0,n.kt)("em",{parentName:"p"},"bee-encode"),"), and we'll need to decode it."),(0,n.kt)("p",null,"Bencode can encode roughly the same types of structures as JSON\u2014strings, integers, lists, and dictionaries. Bencoded data is not as human-readable/writable as JSON, but it can efficiently handle binary data and it's really simple to parse from a stream. Strings come with a length prefix, and look like ",(0,n.kt)("inlineCode",{parentName:"p"},"4:spam"),". Integers go between ",(0,n.kt)("em",{parentName:"p"},"start")," and ",(0,n.kt)("em",{parentName:"p"},"end")," markers, so ",(0,n.kt)("inlineCode",{parentName:"p"},"7")," would encode to ",(0,n.kt)("inlineCode",{parentName:"p"},"i7e"),". Lists and dictionaries work in a similar way: ",(0,n.kt)("inlineCode",{parentName:"p"},"l4:spami7ee")," represents ",(0,n.kt)("inlineCode",{parentName:"p"},"['spam', 7]"),", while ",(0,n.kt)("inlineCode",{parentName:"p"},"d4:spami7ee")," means ",(0,n.kt)("inlineCode",{parentName:"p"},"{spam: 7}"),"."),(0,n.kt)("p",null,"In a prettier format, our .torrent file looks like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),'d\n 8:announce\n 41:http://bttracker.debian.org:6969/announce\n 7:comment\n 35:"Debian CD from cdimage.debian.org"\n 13:creation date\n i1573903810e\n 4:info\n d\n 6:length\n i351272960e\n 4:name\n 31:debian-10.2.0-amd64-netinst.iso\n 12:piece length\n i262144e\n 6:pieces\n 26800:\ufffd\x1f\ufffd\x0f\ufffd\ufffd\ufffdPS\ufffd^\ufffd\ufffd (binary blob of the hashes of each piece)\n e\ne\n')),(0,n.kt)("p",null,"In this file, we can spot the URL of the tracker, the creation date (as a Unix timestamp), the name and size of the file, and a big binary blob containing the SHA-1 hashes of each ",(0,n.kt)("strong",{parentName:"p"},"piece"),", which are equally-sized parts of the file we want to download. The exact size of a piece varies between torrents, but they are usually somewhere between 256KB and 1MB. This means that a large file might be made up of ",(0,n.kt)("em",{parentName:"p"},"thousands")," of pieces. We'll download these pieces from our peers, check them against the hashes from our torrent file, assemble them together, and boom, we've got a file!"),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/pieces.png",alt:'"illustration of a file being cut with scissors into multiple pieces, starting with piece 0'}))),(0,n.kt)("p",null,"This mechanism allows us to verify the integrity of each piece as we go. It makes BitTorrent resistant to accidental corruption or intentional ",(0,n.kt)("strong",{parentName:"p"},"torrent poisoning"),". Unless an attacker is capable of breaking SHA-1 with a preimage attack, we will get exactly the content we asked for."),(0,n.kt)("p",null,"It would be really fun to write a bencode parser, but parsing isn't our focus today. But I found Fredrik Lundh's ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://effbot.org/zone/bencode.htm"}),"50 line parser")," to be especially illuminating. For this project, I used ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/jackpal/bencode-go"}),"github.com/jackpal/bencode-go"),":"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"import")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"github.com/jackpal/bencode-go"'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," bencodeInfo ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Pieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"pieces"`'),"\n PieceLength ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"piece length"`'),"\n Length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"length"`'),"\n Name ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"name"`'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," bencodeTorrent ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Announce ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"announce"`'),"\n Info bencodeInfo ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'`bencode:"info"`'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Open parses a torrent file"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n bto ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," bencode",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Unmarshal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"bto",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"bto",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"Because I like to keep my structures relatively flat, and I like to keep my application structs separate from my serialization structs, I exported a different, flatter struct named ",(0,n.kt)("inlineCode",{parentName:"p"},"TorrentFile")," and wrote a few helper functions to convert between the two."),(0,n.kt)("p",null,"Notably, I split ",(0,n.kt)("inlineCode",{parentName:"p"},"pieces")," (previously a string) into a slice of hashes (each ",(0,n.kt)("inlineCode",{parentName:"p"},"[20]byte"),") so that I can easily access individual hashes later. I also computed the SHA-1 hash of the entire bencoded ",(0,n.kt)("inlineCode",{parentName:"p"},"info")," dict (the one which contained the name, size, and piece hashes). We know this as the ",(0,n.kt)("strong",{parentName:"p"},"infohash")," and it uniquely identifies files when we talk to trackers and peers. More on this later."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/info-hash.png",alt:"a name tag saying 'Hello my name is 86d4c80024a469be4c50bc5a102cf71780310074'"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," TorrentFile ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Announce ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n InfoHash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PieceHashes ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PieceLength ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n Length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n Name ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bto ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"bencodeTorrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"toTorrentFile"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"TorrentFile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// ..."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Retrieving peers from the tracker"),(0,n.kt)("p",null,"Now that we have information about the file and its tracker, let's talk to the tracker to ",(0,n.kt)("strong",{parentName:"p"},"announce")," our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the ",(0,n.kt)("inlineCode",{parentName:"p"},"announce")," URL supplied in the .torrent file, with a few query parameters:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"TorrentFile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"buildTrackerURL"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peerID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint16"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," url",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Parse"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Announce",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'""'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n params ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," url",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Values",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"info_hash"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"peer_id"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"port"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"strconv",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Itoa"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"Port",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"uploaded"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"0"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"downloaded"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"0"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"compact"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"1"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"left"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"strconv",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Itoa"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"RawQuery ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," params",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Encode"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," base",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"String"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"The important ones:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"info_hash"),": Identifies the ",(0,n.kt)("em",{parentName:"li"},"file")," we're trying to download. It's the infohash we calculated earlier from the bencoded ",(0,n.kt)("inlineCode",{parentName:"li"},"info")," dict. The tracker will use this to figure out which peers to show us."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"peer_id"),": A 20 byte name to identify ",(0,n.kt)("em",{parentName:"li"},"ourselves")," to trackers and peers. We'll just generate 20 random bytes for this. Real BitTorrent clients have IDs like ",(0,n.kt)("inlineCode",{parentName:"li"},"-TR2940-k8hj0wgej6ch")," which identify the client software and version\u2014in this case, TR2940 stands for Transmission client 2.94.")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/info-hash-peer-id.png",alt:"a file with a name tag saying 'info_hash' and a person with a name tag 'peer_id'"}))),(0,n.kt)("h3",null,"Parsing the tracker response"),(0,n.kt)("p",null,"We get back a bencoded response:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),"d\n 8:interval\n i900e\n 5:peers\n 252:(another long binary blob)\ne\n")),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"Interval")," tells us how often we're supposed to connect to the tracker again to refresh our list of peers. A value of 900 means we should reconnect every 15 minutes (900 seconds)."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"Peers")," is another long binary blob containing the IP addresses of each peer. It's made out of ",(0,n.kt)("strong",{parentName:"p"},"groups of six bytes"),". The first four bytes in each group represent the peer's IP address\u2014each byte represents a number in the IP. The last two bytes represent the port, as a big-endian ",(0,n.kt)("inlineCode",{parentName:"p"},"uint16"),". ",(0,n.kt)("strong",{parentName:"p"},"Big-endian"),", or ",(0,n.kt)("strong",{parentName:"p"},"network order"),", means that we can interpret a group of bytes as an integer by just squishing them together left to right. For example, the bytes ",(0,n.kt)("inlineCode",{parentName:"p"},"0x1A"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"0xE1")," make ",(0,n.kt)("inlineCode",{parentName:"p"},"0x1AE1"),", or 6881 in decimal."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/address.png",alt:"diagram showing how 192, 0, 2, 123, 0x1A, 0xE1 can be interpreted as 192.0.1.123:6881"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Peer encodes connection information for a peer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Peer ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n IP net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP\n Port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint16"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Unmarshal parses peer IP addresses and ports from a buffer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Unmarshal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," peerSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 4 for IP, 2 for port"),"\n numPeers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," peerSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%"),"peerSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," fmt",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Errorf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Received malformed peers"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n peers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," numPeers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," numPeers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";")," i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," i ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*")," peerSize\n peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"IP"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"i",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Port ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Uint16"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peersBin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h2",null,"Downloading from peers"),(0,n.kt)("p",null,"Now that we have a list of peers, it's time to connect with them and start downloading pieces! We can break down the process into a few steps. For each peer, we want to:"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"Start a TCP connection with the peer. This is like starting a phone call."),(0,n.kt)("li",{parentName:"ol"},"Complete a two-way BitTorrent ",(0,n.kt)("strong",{parentName:"li"},"handshake"),". ",(0,n.kt)("em",{parentName:"li"},'"Hello?" "Hello."')),(0,n.kt)("li",{parentName:"ol"},"Exchange ",(0,n.kt)("strong",{parentName:"li"},"messages")," to download ",(0,n.kt)("strong",{parentName:"li"},"pieces"),". ",(0,n.kt)("em",{parentName:"li"},'"I\'d like piece #231 please."'))),(0,n.kt)("h2",null,"Start a TCP connection"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),"conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," net",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"DialTimeout"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"tcp"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"String"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Second",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"I set a timeout so that I don't waste too much time on peers that aren't going to let me connect. For the most part, it's a pretty standard TCP connection."),(0,n.kt)("h3",null,"Complete the handshake"),(0,n.kt)("p",null,"We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"can communicate using the BitTorrent protocol"),(0,n.kt)("li",{parentName:"ul"},"is able to understand and respond to our messages"),(0,n.kt)("li",{parentName:"ul"},"has the file that we want, or at least knows what we're talking about")),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/handshake.png",alt:"Two computers communicating. One asks 'do you speak BitTorrent and have this file?' and the other replies 'I speak BitTorrent and have that file'"}))),(0,n.kt)("p",null,"My father told me that the secret to a good handshake is a firm grip and eye contact. The secret to a good BitTorrent handshake is that it's made up of five parts:"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"The length of the protocol identifier, which is always 19 (0x13 in hex)"),(0,n.kt)("li",{parentName:"ol"},"The protocol identifier, called the ",(0,n.kt)("strong",{parentName:"li"},"pstr")," which is always ",(0,n.kt)("inlineCode",{parentName:"li"},"BitTorrent protocol")),(0,n.kt)("li",{parentName:"ol"},"Eight ",(0,n.kt)("strong",{parentName:"li"},"reserved bytes"),", all set to 0. We'd flip some of them to 1 to indicate that we support certain ",(0,n.kt)("a",Object.assign({parentName:"li"},{href:"http://www.bittorrent.org/beps/bep_0010.html"}),"extensions"),". But we don't, so we'll keep them at 0."),(0,n.kt)("li",{parentName:"ol"},"The ",(0,n.kt)("strong",{parentName:"li"},"infohash")," that we calculated earlier to identify which file we want"),(0,n.kt)("li",{parentName:"ol"},"The ",(0,n.kt)("strong",{parentName:"li"},"Peer ID")," that we made up to identify ourselves")),(0,n.kt)("p",null,"Put together, a handshake string might look like this:"),(0,n.kt)("pre",Object.assign({},{className:"language-markdown"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-markdown"}),"\\x13BitTorrent protocol\\x00\\x00\\x00\\x00\\x00\\x00\\x00\\x00\\x86\\xd4\\xc8\\x00\\x24\\xa4\\x69\\xbe\\x4c\\x50\\xbc\\x5a\\x10\\x2c\\xf7\\x17\\x80\\x31\\x00\\x74-TR2940-k8hj0wgej6ch\n")),(0,n.kt)("p",null,"After we send a handshake to our peer, we should receive a handshake back in the same format. The infohash we get back should match the one we sent so that we know that we're talking about the same file. If everything goes as planned, we're good to go. If not, we can sever the connection because there's something wrong. ",(0,n.kt)("em",{parentName:"p"},'"Hello?" "\u8fd9\u662f\u8c01\uff1f \u4f60\u60f3\u8981\u4ec0\u4e48\uff1f" "Okay, wow, wrong number."')),(0,n.kt)("p",null,"In our code, let's make a struct to represent a handshake, and write a few methods for serializing and reading them:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// A Handshake is a special message that a peer uses to identify itself"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Handshake ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n Pstr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"string"),"\n InfoHash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n PeerID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"20"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serialize serializes the handshake to a buffer"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Handshake",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Serialize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"49"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Pstr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 8 reserved bytes"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n curr ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"curr",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," h",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PeerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," buf\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Read parses a handshake from a stream"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Handshake",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Do Serialize(), but backwards"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// ..."),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Send and receive messages"),(0,n.kt)("p",null,"Once we've completed the initial handshake, we can send and receive ",(0,n.kt)("strong",{parentName:"p"},"messages"),". Well, not quite\u2014if the other peer isn't ready to accept messages, we can't send any until they tell us they're ready. In this state, we're considered ",(0,n.kt)("strong",{parentName:"p"},"choked")," by the other peer. They'll send us an ",(0,n.kt)("strong",{parentName:"p"},"unchoke")," message to let us know that we can begin asking them for data. By default, we assume that we're choked until proven otherwise."),(0,n.kt)("p",null,"Once we've been unchoked, we can then begin sending ",(0,n.kt)("strong",{parentName:"p"},"requests")," for pieces, and they can send us messages back containing pieces."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/choke.png",alt:"\"A cartoon in which person 1 says 'hello I would like piece number\u2014' and person 2 grabs him by the neck and says '00 00 00 01 00 (choke)'"}))),(0,n.kt)("h4",null,"Interpreting messages"),(0,n.kt)("p",null,"A message has a length, an ",(0,n.kt)("strong",{parentName:"p"},"ID")," and a ",(0,n.kt)("strong",{parentName:"p"},"payload"),". On the wire, it looks like:"),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/message.png",alt:"A message with 4 byte for the length, 1 byte for ID, and an optional payload"}))),(0,n.kt)("p",null,"A message starts with a length indicator which tells us how many bytes long the message will be. It's a 32-bit integer, meaning it's made out of four bytes smooshed together in big-endian order. The next byte, the ",(0,n.kt)("strong",{parentName:"p"},"ID"),", tells us which type of message we're receiving\u2014for example, a ",(0,n.kt)("inlineCode",{parentName:"p"},"2"),' byte means "interested." Finally, the optional ',(0,n.kt)("strong",{parentName:"p"},"payload")," fills out the remaining length of the message."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"uint8"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n MsgChoke messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n MsgUnchoke messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),"\n MsgInterested messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),"\n MsgNotInterested messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"3"),"\n MsgHave messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),"\n MsgBitfield messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),"\n MsgRequest messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"6"),"\n MsgPiece messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7"),"\n MsgCancel messageID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Message stores ID and payload of a message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Message ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ID messageID\n Payload ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Serialize serializes a message into a buffer of the form"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// "),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Interprets `nil` as a keep-alive message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Serialize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"uint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// +1 for id"),"\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+"),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"PutUint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"ID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," buf\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("p",null,"To read a message from a stream, we just follow the format of a message. We read four bytes and interpret them as a ",(0,n.kt)("inlineCode",{parentName:"p"},"uint32")," to get the ",(0,n.kt)("strong",{parentName:"p"},"length")," of the message. Then, we read that number of bytes to get the ",(0,n.kt)("strong",{parentName:"p"},"ID")," (the first byte) and the ",(0,n.kt)("strong",{parentName:"p"},"payload")," (the remaining bytes)."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Read parses a message from a stream. Returns `nil` on keep-alive message"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Reader",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n lengthBuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"4"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ReadFull"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," lengthBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," binary",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"BigEndian",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Uint32"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"lengthBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// keep-alive message"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"==")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n messageBuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," io",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ReadFull"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"r",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n m ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," Message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"messageID"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n Payload",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," messageBuf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"m",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Bitfields"),(0,n.kt)("p",null,"One of the most interesting types of message is the ",(0,n.kt)("strong",{parentName:"p"},"bitfield"),", which is a data structure that peers use to efficiently encode which pieces they are able to send us. A bitfield looks like a byte array, and to check which pieces they have, we just need to look at the positions of the ",(0,n.kt)("em",{parentName:"p"},"bits")," set to 1. You can think of it like the digital equivalent of a coffee shop loyalty card. We start with a blank card of all ",(0,n.kt)("inlineCode",{parentName:"p"},"0"),", and flip bits to ",(0,n.kt)("inlineCode",{parentName:"p"},"1"),' to mark their positions as "stamped."'),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/bitfield.png",alt:"a coffee shop loyalty card with eight slots, with stamps on the first four slots and a stamp on the second to last slot, represented as 11110010"}))),(0,n.kt)("p",null,"By working with ",(0,n.kt)("em",{parentName:"p"},"bits")," instead of ",(0,n.kt)("em",{parentName:"p"},"bytes"),", this data structure is super compact. We can stuff information about eight pieces in the space of a single byte\u2014the size of a ",(0,n.kt)("inlineCode",{parentName:"p"},"bool"),". The tradeoff is that accessing values becomes a little more tricky. The smallest unit of memory that computers can address are bytes, so to get to our bits, we have to do some bitwise manipulation:"),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// A Bitfield represents the pieces that a peer has"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," Bitfield ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// HasPiece tells if a bitfield has a particular index set"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bf Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"HasPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"bool")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n byteIndex ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," bf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"byteIndex",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),">>"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-"),"offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// SetPiece sets a bit in the bitfield"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"bf Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n byteIndex ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"/")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n offset ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"%")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"8"),"\n bf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"byteIndex",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"|=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<<")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"7")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," offset",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h3",null,"Putting it all together"),(0,n.kt)("p",null,"We now have all the tools we need to download a torrent: we have a list of peers obtained from the tracker, and we can communicate with them by dialing a TCP connection, initiating a handshake, and sending and receiving messages. Our last big problems are handling the ",(0,n.kt)("strong",{parentName:"p"},"concurrency")," involved in talking to multiple peers at once, and managing the ",(0,n.kt)("strong",{parentName:"p"},"state")," of our peers as we interact with them. These are both classically Hard problems."),(0,n.kt)("h4",null,"Managing concurrency: channels as queues"),(0,n.kt)("p",null,"In Go, we ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://blog.golang.org/share-memory-by-communicating"}),"share memory by communicating"),", and we can think of a Go channel as a cheap thread-safe queue."),(0,n.kt)("p",null,"We'll set up two channels to synchronize our concurrent workers: one for dishing out work (pieces to download) between peers, and another for collecting downloaded pieces. As downloaded pieces come in through the results channel, we can copy them into a buffer to start assembling our complete file."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Init queues for workers to retrieve work and send results"),"\nworkQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\nresults ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," hash ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"calculatePieceSize"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," hash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Start workers"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"_"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Peers ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"go")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"startDownloadWorker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," workQueue",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," results",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Collect results into a buffer until full"),"\nbuf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\ndonePieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"0"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," donePieces ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"len"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PieceHashes",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n res ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-"),"results\n begin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," end ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"calculateBoundsForPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"res",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"copy"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"begin",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"end",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," res",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n donePieces",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"workQueue",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n")),(0,n.kt)("p",null,"We'll spawn a worker goroutine for each peer we've received from the tracker. It'll connect and handshake with the peer, and then start retrieving work from the ",(0,n.kt)("inlineCode",{parentName:"p"},"workQueue"),", attempting to download it, and sending downloaded pieces back through the ",(0,n.kt)("inlineCode",{parentName:"p"},"results")," channel."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/download.png",alt:"a flow chart of the download strategy"}))),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"t ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"Torrent",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"startDownloadWorker"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer peers",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," results ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"chan")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"New"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"PeerID",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," t",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"InfoHash",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Could not handshake with %s. Disconnecting\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"defer")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Close"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Completed handshake with %s\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," peer",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"IP",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendUnchoke"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendInterested"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"range")," workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),"c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"HasPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"continue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Download the piece"),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attemptDownloadPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Println"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Exiting"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"checkIntegrity"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Printf"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"Piece #%d failed integrity check\\n"'),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n workQueue ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Put piece back on the queue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"continue"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendHave"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n results ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<-")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&"),"pieceResult",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Managing state"),(0,n.kt)("p",null,"We'll keep track of each peer in a struct, and modify that struct as we read messages. It'll include data like how much we've downloaded from the peer, how much we've requested from them, and whether we're choked. If we wanted to scale this further, we could formalize this as a finite state machine. But a struct and a switch are good enough for now."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"type")," pieceProgress ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"struct")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n index ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n client ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Client\n buf ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),"\n downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n backlog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"int"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"state ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceProgress",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"readMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Read"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// this call blocks"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"switch")," msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"ID ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgUnchoke",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"false"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgChoke",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"true"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgHave",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ParseHave"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Bitfield",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"case")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"MsgPiece",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":"),"\n n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," message",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"ParsePiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," msg",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," n\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"--"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"Time to make requests!"),(0,n.kt)("p",null,"Files, pieces, and piece hashes aren't the full story\u2014we can go further by breaking down pieces into ",(0,n.kt)("strong",{parentName:"p"},"blocks"),". A block is a part of a piece, and we can fully define a block by the ",(0,n.kt)("strong",{parentName:"p"},"index")," of the piece it's part of, its byte ",(0,n.kt)("strong",{parentName:"p"},"offset")," within the piece, and its ",(0,n.kt)("strong",{parentName:"p"},"length"),". When we make requests for data from peers, we are actually requesting ",(0,n.kt)("em",{parentName:"p"},"blocks"),". A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests."),(0,n.kt)("p",null,"A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec."),(0,n.kt)("h4",null,"Pipelining"),(0,n.kt)("p",null,"Network round-trips are expensive, and requesting each block one by one will absolutely tank the performance of our download. Therefore, it's important to ",(0,n.kt)("strong",{parentName:"p"},"pipeline")," our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude."),(0,n.kt)("p",null,(0,n.kt)("img",Object.assign({parentName:"p"},{src:"/guides/torrent-client/pipelining.png",alt:"Two email threads simulating peer connections. The thread on the left shows a request followed by a reply, repeated three times. The thread on the left sends three requests, and receives three replies in quick succession."}))),(0,n.kt)("p",null,"Classically, BitTorrent clients kept a queue of five pipelined requests, and that's the value I'll be using. I found that increasing it can up to double the speed of a download. Newer clients use an ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://luminarys.com/posts/writing-a-bittorrent-client.html"}),"adaptive")," queue size to better accommodate modern network speeds and conditions. This is definitely a parameter worth tweaking, and it's pretty low hanging fruit for future performance optimization."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// MaxBlockSize is the largest number of bytes a request can ask for"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," MaxBlockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"16384"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// MaxBacklog is the number of unfulfilled requests a client can have in its pipeline"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," MaxBacklog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"5"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"attemptDownloadPiece"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"c ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*"),"pieceWork",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"error"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n state ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," pieceProgress",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"make"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token builtin"}),"byte"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Setting a deadline helps get unresponsive peers unstuck."),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// 30 seconds is more than enough time to download a 262 KB piece"),"\n c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetDeadline"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Now"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Add"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"30")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"*")," time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Second",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"defer")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Conn",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SetDeadline"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Time",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Disable the deadline"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"downloaded ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// If unchoked, send requests until we have enough unfulfilled requests"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!"),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"client",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Choked ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"for")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," MaxBacklog ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"&&")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," MaxBlockSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// Last block might be shorter than the typical block"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-"),"state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"<")," blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n blockSize ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"length ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," c",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"SendRequest"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"pw",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"index",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," blockSize",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"backlog",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"++"),"\n state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"requested ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"+=")," blockSize\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"readMessage"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"return")," state",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"buf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("h4",null,"main.go"),(0,n.kt)("p",null,"This is a short one. We're almost there."),(0,n.kt)("pre",Object.assign({},{className:"language-go"}),(0,n.kt)("code",Object.assign({parentName:"pre"},{className:"language-go"}),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"package")," main\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"import")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"log"'),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"os"'),"\n\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token string"}),'"github.com/veggiedefender/torrent-client/torrentfile"'),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"func")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"main"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n inPath ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," os",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Args",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"\n outPath ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," os",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),"Args",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token number"}),"2"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"\n\n tf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),",")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),":=")," torrentfile",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Open"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"inPath",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Fatal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," tf",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"DownloadToFile"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"outPath",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"if")," err ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token operator"}),"!=")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token boolean"}),"nil")," ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n log",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token function"}),"Fatal"),(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),"err",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n ",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,n.kt)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,n.kt)("script",{id:"asciicast-xqRSB0Jec8RN91Zt89rbb9PcL",src:"https://asciinema.org/a/xqRSB0Jec8RN91Zt89rbb9PcL.js",async:!0}),(0,n.kt)("h2",null,"This isn't the full story"),(0,n.kt)("p",null,"For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/veggiedefender/torrent-client"}),"full implementation")," if you're interested."))}c.isMDXComponent=!0},5941:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/unfamiliar-codebase.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/unfamiliar-codebase.png",alt:null})))))}c.isMDXComponent=!0},5104:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("strong",{parentName:"p"},"Roadmap is not ready yet"),". Please check back later or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"subscribe to get notified"),".")),(0,n.kt)("p",null,"While we prepare the roadmap, follow this simple advice to learn anything"),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Just ",(0,n.kt)("strong",{parentName:"p"},"pick a project and start working on it"),", you will learn all that you need along the way.")),(0,n.kt)("p",null,(0,n.kt)("strong",{parentName:"p"},"\u2192")," ","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/roadmaps"}),"All Roadmaps")," ","\xa0","\u2022","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides"}),"Programming guides")," ","\xa0","\u2022","\xa0"," ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/signup"}),"Subscribe")," "))}c.isMDXComponent=!0},3442:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/web-vitals.png"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/web-vitals.png",alt:null})))))}c.isMDXComponent=!0},1470:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://code.org"}),"code.org"),", you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"What is the Internet?"),(0,n.kt)("li",{parentName:"ul"},"How does the information move on the internet?"),(0,n.kt)("li",{parentName:"ul"},"How do the networks talk to each other and the protocols involved?"),(0,n.kt)("li",{parentName:"ul"},"What's the relationship between packets, routers, and reliability? "),(0,n.kt)("li",{parentName:"ul"},"HTTP and the HTML \u2013 How are you viewing this webpage in your browser?"),(0,n.kt)("li",{parentName:"ul"},"How is the information transfer on the internet made secure?"),(0,n.kt)("li",{parentName:"ul"},"What is cybersecurity and what are some common internet crimes?")),(0,n.kt)("h2",null,"What is the Internet?"),(0,n.kt)("p",null,"The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. "),(0,n.kt)("p",null,'In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it. '),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/Dxcc6ycZ73M",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Wires, Cables, and Wi-Fi"),(0,n.kt)("p",null,"Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves)."),(0,n.kt)("p",null,"In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/ZhEf7e4kopM",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"IP Addresses and DNS"),(0,n.kt)("p",null,"Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers? "),(0,n.kt)("p",null,"In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/5o8CwafCxnU",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Packets, Routing, and Reliability"),(0,n.kt)("p",null,"Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors."),(0,n.kt)("p",null,"In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination. "),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/AYdF7b3nMto",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"HTTP and HTML"),(0,n.kt)("p",null,"HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you."),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/kBXQZMmiA4s",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Encryption and Public Keys"),(0,n.kt)("p",null,"Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure."),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/ZghMPWGXexs",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("h2",null,"Cybersecurity and Crime"),(0,n.kt)("p",null,"In this video, you will learn about the basics of cybersecurity and common cybercrimes"),(0,n.kt)("iframe",{width:"100%",height:"400",src:"https://www.youtube.com/embed/AuYNXgO_f3Y",frameborder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),(0,n.kt)("p",null,"And that wraps it up for this article. To learn more about the Internet, ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"Kamran Ahmed")," has a nice little guide on ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/dns-in-one-picture"}),"DNS: How a website is found on the Internet"),". Also, go through the episodes of ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://howdns.works/"}),"howdns.works")," and read this ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/"}),"cartoon intro to DNS over HTTPS"),"."))}c.isMDXComponent=!0},1307:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/guides/sli-slo-sla.jpeg"}),(0,n.kt)("img",Object.assign({parentName:"a"},{src:"/guides/sli-slo-sla.jpeg",alt:null})))))}c.isMDXComponent=!0},9554:function(e,a,t){t.r(a),t.d(a,{default:function(){return c}});t(7294);var n=t(4137);function s(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},o=Object.keys(e);for(n=0;n=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var o={};function c(e){var a=e.components,t=s(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"We all have heard the mantra ",(0,n.kt)("em",{parentName:"p"},'"build it and they will come"')," many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups."),(0,n.kt)("p",null,"Before the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Wright_brothers"}),"Wright brothers"),' built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Field_of_Dreams"}),"Field of Dreams"),", this and similar historic events gave birth to the idea behind it."),(0,n.kt)("p",null,"The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore."),(0,n.kt)("h2",null,'Why doesn\'t "build it and they will come" work anymore?'),(0,n.kt)("p",null,"There are a few reasons working hard to make \"build it and they will come\" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it."),(0,n.kt)("h3",null,"Building got much easier"),(0,n.kt)("p",null,"As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://laravel.com/"}),"Laravel")," and ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://quasar.dev/"}),"Quasar Framework")," are available for anyone to build projects on - for free."),(0,n.kt)("p",null,'In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.'),(0,n.kt)("h3",null,"Too much going on: information overload"),(0,n.kt)("p",null,"We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey."),(0,n.kt)("h3",null,"Smaller Problems"),(0,n.kt)("p",null,"Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed."),(0,n.kt)("p",null,"Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers."),(0,n.kt)("h2",null,"How to market your project nowadays?"),(0,n.kt)("p",null,"The very first step to improving the odds of success is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/business-idea-validation/"}),"idea validation"),". While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time."),(0,n.kt)("h3",null,"Build your Audience first and the project after."),(0,n.kt)("p",null,"Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://startupnamecheck.com/blog/how-to-start-a-small-business-blog"}),"project blog"),"."),(0,n.kt)("p",null,"Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans."),(0,n.kt)("h3",null,"Tool by Tool"),(0,n.kt)("p",null,'Another approach is the "Tool by Tool" approach. I\'ve first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a ',(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://hatchful.shopify.com/"}),"logo generator")," and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time."),(0,n.kt)("p",null,"Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://kambanthemaker.com/"}),"Kamban")," with ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://flatga.io/"}),"FlatGA"),". He built FlatGA as phase one of a bigger project currently in development."),(0,n.kt)("h3",null,"Join a Maker community"),(0,n.kt)("p",null,"While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://getmakerlog.com/"}),"makerlog")," or ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://wip.chat"}),"WIP.chat")," can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time."),(0,n.kt)("h3",null,"Getting ready to Launch"),(0,n.kt)("p",null,"Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch."),(0,n.kt)("h3",null,"Marketing Is an On-going Fight"),(0,n.kt)("p",null,"Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://wheretopost.email"}),"newsletter with small marketing opportunities"),". This way, you are regularly reminded and given bite-sized tasks to complete."),(0,n.kt)("h2",null,"Closing Words"),(0,n.kt)("p",null,"I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/newsletter"}),"my newsletter"),". I'll send out the occasional email about interesting new articles or side-projects."),(0,n.kt)("h2",null,"About the author"),(0,n.kt)("p",null,(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://peterthaleikis.com/"}),"Peter Thaleikis")," a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"https://bringyourownideas.com/"}),"Bring Your Own Ideas Ltd."),", he has been Lead Developer for multiple organisations."))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/_next/static/chunks/568-d5ea51d640393149.js b/_next/static/chunks/568-d5ea51d640393149.js new file mode 100644 index 000000000..8062ab363 --- /dev/null +++ b/_next/static/chunks/568-d5ea51d640393149.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[568],{8974:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/yaQ5YMWkxq4",title:"Acid Explained with Examples"}))}i.isMDXComponent=!0},3730:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/HiBDZgTNpXY",title:"All about HTTP Caching"}))}i.isMDXComponent=!0},7589:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/n3NKGsM3iEw",title:"Arrays and Objects in JavaScript"}))}i.isMDXComponent=!0},8001:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/VyIK6SV5f7o",title:"Asynchronous JavaScript"}))}i.isMDXComponent=!0},6736:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Z0bH0cMY0E8",title:"Big O Notation \u2014 Calculating Time Complexity"}))}i.isMDXComponent=!0},5489:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/6DXEPcXKQNY",title:"Content Delivery Networks"}))}i.isMDXComponent=!0},9029:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Wj0od2ag5sk",title:"DNS and how does it work?"}))}i.isMDXComponent=!0},4046:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/7lxgpKh_fRY",title:"DNS Records"}))}i.isMDXComponent=!0},7327:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/RIiq4tTt6rI",title:"Floating Point Arithmetic"}))}i.isMDXComponent=!0},6527:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/O3uT2l6vgZ8",title:"Freeze and Seal in JavaScript"}))}i.isMDXComponent=!0},5512:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/lgaxU7CRmxU",title:"How to use CSS Variables?"}))}i.isMDXComponent=!0},8688:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/nyKZTKQS_EQ",title:"Automate with GitHub Actions"}))}i.isMDXComponent=!0},965:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/-ZI0ea5O2oA",title:"JavaScript Fetch API"}))}i.isMDXComponent=!0},2012:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/galcDRNd5Ow",title:"Load Balancers 101"}))}i.isMDXComponent=!0},5495:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/dV8mjZd1OtU",title:"OSI Model Explained"}))}i.isMDXComponent=!0},4913:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub's API and shows you in the form of listing."),(0,r.kt)("p",null,"If you want to get an idea of what we are going to be building have a look at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://kamranahmed.info/githunt"}),"GitHunt"),". Also the complete source code can be found at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/githunt"}),"@kamranahmedse/githunt")),(0,r.kt)("h2",null,"Intro and Basic Setup"),(0,r.kt)("p",null,"The video below gives you the basic introduction about the project and explains what we are going to build."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/NyG7YJWJd6s",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Building the Interface"),(0,r.kt)("p",null,"In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/zPqzKqjtEL4",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Building the View Switcher"),(0,r.kt)("p",null,'In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the "Grid View" and the "List View" and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.'),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/EYzPJsJwjFg",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Fetching Remote Data"),(0,r.kt)("p",null,"Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/G2IbP9B_4PU",title:"Practical Introduction to React Part 1"}))}i.isMDXComponent=!0},7e3:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/BvrkobaCVVE",title:"All about Promises in JavaScript"}))}i.isMDXComponent=!0},1516:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/nDv3yXdD0rk",title:"Random Number Generators"}))}i.isMDXComponent=!0},7850:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/a2rcgzludDU",title:"Scaling the Unscalable"}))}i.isMDXComponent=!0},9345:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/k3rFFLmQCuY",title:"SSH vs TLS vs SSL"}))}i.isMDXComponent=!0},5069:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Y-Gl4HEyeUQ",title:"System Design 101"}))}i.isMDXComponent=!0},1559:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/F5rni9fr1yE",title:"TCP/IP Model Explained"}))}i.isMDXComponent=!0},2382:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/37AFBZv4_6Y",title:"Transport Protocols: TCP vs UDP"}))}i.isMDXComponent=!0},5875:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/_RbsFXWRZ10",title:"What is CAP Theorem?"}))}i.isMDXComponent=!0},2635:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/0yc2UANSDiw",title:"What is Dependency Injection?"}))}i.isMDXComponent=!0},6095:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/7Tok22qxPzQ",title:"DOM, Shadow DOM, Virtual DOM"}))}i.isMDXComponent=!0},2068:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/rpqsSkTIdAw",title:"What is Eventual Consistency?"}))}i.isMDXComponent=!0},6372:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/ImHSpwUlNVc",title:"YAML in Depth"}))}i.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/_next/static/chunks/680-be87eefc1f260b8f.js b/_next/static/chunks/680-be87eefc1f260b8f.js new file mode 100644 index 000000000..ace141e9d --- /dev/null +++ b/_next/static/chunks/680-be87eefc1f260b8f.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[680],{5193:function(e,a,t){"use strict";t.d(a,{zx:function(){return N},hU:function(){return k}});var n=t(7375),r=t(2846),l=t(5031),o=t(8554),c=t.n(o),i=t(7294),s=t(6450),d=t(9609);function m(e,a){if(null==e)return{};var t,n,r={},l=Object.keys(e);for(n=0;n=0||(r[t]=e[t]);return r}function p(){return(p=Object.assign||function(e){for(var a=1;a *:first-of-type:not(:last-of-type)":{borderEndRadius:0},"> *:not(:first-of-type):not(:last-of-type)":{borderRadius:0},"> *:not(:first-of-type):last-of-type":{borderStartRadius:0}}:{"& > *:not(style) ~ *:not(style)":{marginStart:d}}),i.createElement(f,{value:y},i.createElement(r.m$.div,p({ref:a,role:"group",__css:g,className:C},v)))}));l.Ts&&(v.displayName="ButtonGroup");var C=["label","placement","spacing","children","className","__css"],y=function(e){var a=e.label,t=e.placement;e.spacing;var n=e.children,o=void 0===n?i.createElement(d.$,{color:"currentColor",width:"1em",height:"1em"}):n,c=e.className,s=e.__css,u=m(e,C),h=(0,l.cx)("chakra-button__spinner",c),f="start"===t?"marginEnd":"marginStart",L=i.useMemo((function(){var e;return p(((e={display:"flex",alignItems:"center",position:a?"relative":"absolute"})[f]=a?"0.5rem":0,e.fontSize="1em",e.lineHeight="normal",e),s)}),[s,a,f]);return i.createElement(r.m$.div,p({className:h},u,{__css:L}),o)};l.Ts&&(y.displayName="ButtonSpinner");var g=["children","className"],E=function(e){var a=e.children,t=e.className,n=m(e,g),o=i.isValidElement(a)?i.cloneElement(a,{"aria-hidden":!0,focusable:!1}):a,c=(0,l.cx)("chakra-button__icon",t);return i.createElement(r.m$.span,p({display:"inline-flex",alignSelf:"center",flexShrink:0},n,{className:c}),o)};l.Ts&&(E.displayName="ButtonIcon");var M=["isDisabled","isLoading","isActive","isFullWidth","children","leftIcon","rightIcon","loadingText","iconSpacing","type","spinner","spinnerPlacement","className","as"],N=(0,r.Gp)((function(e,a){var t=L(),o=(0,r.mq)("Button",p({},t,e)),s=(0,r.Lr)(e),d=s.isDisabled,u=void 0===d?null==t?void 0:t.isDisabled:d,h=s.isLoading,f=s.isActive,v=s.isFullWidth,C=s.children,g=s.leftIcon,E=s.rightIcon,N=s.loadingText,b=s.iconSpacing,k=void 0===b?"0.5rem":b,x=s.type,I=s.spinner,Z=s.spinnerPlacement,w=void 0===Z?"start":Z,_=s.className,S=s.as,V=m(s,M),z=i.useMemo((function(){var e,a=c()({},null!=(e=null==o?void 0:o._focus)?e:{},{zIndex:1});return p({display:"inline-flex",appearance:"none",alignItems:"center",justifyContent:"center",userSelect:"none",position:"relative",whiteSpace:"nowrap",verticalAlign:"middle",outline:"none",width:v?"100%":"auto"},o,!!t&&{_focus:a})}),[o,t,v]),B=function(e){var a=i.useState(!e),t=a[0],n=a[1];return{ref:i.useCallback((function(e){e&&n("BUTTON"===e.tagName)}),[]),type:t?"button":void 0}}(S),O=B.ref,H=B.type,T={rightIcon:E,leftIcon:g,iconSpacing:k,children:C};return i.createElement(r.m$.button,p({disabled:u||h,ref:(0,n.qq)(a,O),as:S,type:null!=x?x:H,"data-active":(0,l.PB)(f),"data-loading":(0,l.PB)(h),__css:z,className:(0,l.cx)("chakra-button",_)},V),h&&"start"===w&&i.createElement(y,{className:"chakra-button__spinner--start",label:N,placement:"start"},I),h?N||i.createElement(r.m$.span,{opacity:0},i.createElement(A,T)):i.createElement(A,T),h&&"end"===w&&i.createElement(y,{className:"chakra-button__spinner--end",label:N,placement:"end"},I))}));function A(e){var a=e.leftIcon,t=e.rightIcon,n=e.children,r=e.iconSpacing;return i.createElement(i.Fragment,null,a&&i.createElement(E,{marginEnd:r},a),n,t&&i.createElement(E,{marginStart:r},t))}l.Ts&&(N.displayName="Button");var b=["icon","children","isRound","aria-label"],k=(0,r.Gp)((function(e,a){var t=e.icon,n=e.children,r=e.isRound,l=e["aria-label"],o=m(e,b),c=t||n,s=i.isValidElement(c)?i.cloneElement(c,{"aria-hidden":!0,focusable:!1}):null;return i.createElement(N,p({padding:"0",borderRadius:r?"full":void 0,ref:a,"aria-label":l},o),s)}));l.Ts&&(k.displayName="IconButton")},6406:function(e,a,t){"use strict";t.d(a,{P:function(){return u}});var n=t(2846),r=t(5031),l=t(7294);function o(){return(o=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(e,c),C={ref:a,focusable:u,className:(0,r.cx)("chakra-icon",f),__css:o({w:"1em",h:"1em",display:"inline-block",lineHeight:"1em",flexShrink:0,color:m},L)},y=null!=s?s:i.viewBox;if(t&&"string"!==typeof t)return l.createElement(n.m$.svg,o({as:t},C,v));var g=null!=h?h:i.path;return l.createElement(n.m$.svg,o({verticalAlign:"middle",viewBox:y},C,v),g)}));r.Ts&&(s.displayName="Icon");function d(){return(d=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(r,m);return l.createElement(n.m$.button,d({type:"button","aria-label":"Close",ref:a,disabled:c,__css:d({},{outline:0,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},t,i)},s),o||l.createElement(p,{width:"1em",height:"1em"}))}));r.Ts&&(u.displayName="CloseButton")},1277:function(e,a,t){"use strict";t.d(a,{Km:function(){return L},rE:function(){return m},nQ:function(){return y},XC:function(){return f},Tw:function(){return v},_8:function(){return u},Uq:function(){return g},sz:function(){return C},mB:function(){return p},ny:function(){return h}});var n=t(2846),r=t(5031),l=t(7294);function o(){return(o=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(e,c),C={ref:a,focusable:u,className:(0,r.cx)("chakra-icon",f),__css:o({w:"1em",h:"1em",display:"inline-block",lineHeight:"1em",flexShrink:0,color:m},L)},y=null!=s?s:i.viewBox;if(t&&"string"!==typeof t)return l.createElement(n.m$.svg,o({as:t},C,v));var g=null!=h?h:i.path;return l.createElement(n.m$.svg,o({verticalAlign:"middle",viewBox:y},C,v),g)}));r.Ts&&(s.displayName="Icon");function d(e){var a=e.viewBox,t=void 0===a?"0 0 24 24":a,c=e.d,i=e.path,d=e.displayName,m=e.defaultProps,p=void 0===m?{}:m,u=(0,n.Gp)((function(e,a){return l.createElement(s,o({ref:a,viewBox:t},p,e),null!=i?i:l.createElement("path",{fill:"currentColor",d:c}))}));return r.Ts&&(u.displayName=d),u}d({d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",displayName:"CopyIcon"}),d({d:"M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z",displayName:"SearchIcon"}),d({d:"M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z",displayName:"Search2Icon"}),d({d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z",displayName:"MoonIcon"}),d({displayName:"SunIcon",path:l.createElement("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor"},l.createElement("circle",{cx:"12",cy:"12",r:"5"}),l.createElement("path",{d:"M12 1v2"}),l.createElement("path",{d:"M12 21v2"}),l.createElement("path",{d:"M4.22 4.22l1.42 1.42"}),l.createElement("path",{d:"M18.36 18.36l1.42 1.42"}),l.createElement("path",{d:"M1 12h2"}),l.createElement("path",{d:"M21 12h2"}),l.createElement("path",{d:"M4.22 19.78l1.42-1.42"}),l.createElement("path",{d:"M18.36 5.64l1.42-1.42"}))}),d({d:"M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z",displayName:"AddIcon"}),d({displayName:"SmallAddIcon",viewBox:"0 0 20 20",path:l.createElement("path",{fill:"currentColor",d:"M14 9h-3V6c0-.55-.45-1-1-1s-1 .45-1 1v3H6c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1z",fillRule:"evenodd"})}),d({viewBox:"0 0 14 14",d:"M14,7.77 L14,6.17 L12.06,5.53 L11.61,4.44 L12.49,2.6 L11.36,1.47 L9.55,2.38 L8.46,1.93 L7.77,0.01 L6.17,0.01 L5.54,1.95 L4.43,2.4 L2.59,1.52 L1.46,2.65 L2.37,4.46 L1.92,5.55 L0,6.23 L0,7.82 L1.94,8.46 L2.39,9.55 L1.51,11.39 L2.64,12.52 L4.45,11.61 L5.54,12.06 L6.23,13.98 L7.82,13.98 L8.45,12.04 L9.56,11.59 L11.4,12.47 L12.53,11.34 L11.61,9.53 L12.08,8.44 L14,7.75 L14,7.77 Z M7,10 C5.34,10 4,8.66 4,7 C4,5.34 5.34,4 7,4 C8.66,4 10,5.34 10,7 C10,8.66 8.66,10 7,10 Z",displayName:"SettingsIcon"});var m=d({displayName:"CheckCircleIcon",d:"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"}),p=d({d:"M19.5,9.5h-.75V6.75a6.75,6.75,0,0,0-13.5,0V9.5H4.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h15a2,2,0,0,0,2-2V11.5A2,2,0,0,0,19.5,9.5Zm-9.5,6a2,2,0,1,1,3,1.723V19.5a1,1,0,0,1-2,0V17.223A1.994,1.994,0,0,1,10,15.5ZM7.75,6.75a4.25,4.25,0,0,1,8.5,0V9a.5.5,0,0,1-.5.5H8.25a.5.5,0,0,1-.5-.5Z",displayName:"LockIcon"}),u=(d({d:"M19.5,9.5h-.75V6.75A6.751,6.751,0,0,0,5.533,4.811a1.25,1.25,0,1,0,2.395.717A4.251,4.251,0,0,1,16.25,6.75V9a.5.5,0,0,1-.5.5H4.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h15a2,2,0,0,0,2-2V11.5A2,2,0,0,0,19.5,9.5Zm-9.5,6a2,2,0,1,1,3,1.723V19.5a1,1,0,0,1-2,0V17.223A1.994,1.994,0,0,1,10,15.5Z",displayName:"UnlockIcon"}),d({displayName:"ViewIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M23.432,10.524C20.787,7.614,16.4,4.538,12,4.6,7.6,4.537,3.213,7.615.568,10.524a2.211,2.211,0,0,0,0,2.948C3.182,16.351,7.507,19.4,11.839,19.4h.308c4.347,0,8.671-3.049,11.288-5.929A2.21,2.21,0,0,0,23.432,10.524ZM7.4,12A4.6,4.6,0,1,1,12,16.6,4.6,4.6,0,0,1,7.4,12Z"}),l.createElement("circle",{cx:"12",cy:"12",r:"2"}))}),d({displayName:"ViewOffIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M23.2,10.549a20.954,20.954,0,0,0-4.3-3.6l4-3.995a1,1,0,1,0-1.414-1.414l-.018.018a.737.737,0,0,1-.173.291l-19.5,19.5c-.008.007-.018.009-.026.017a1,1,0,0,0,1.631,1.088l4.146-4.146a11.26,11.26,0,0,0,4.31.939h.3c4.256,0,8.489-2.984,11.051-5.8A2.171,2.171,0,0,0,23.2,10.549ZM16.313,13.27a4.581,4.581,0,0,1-3,3.028,4.3,4.3,0,0,1-3.1-.19.253.253,0,0,1-.068-.407l5.56-5.559a.252.252,0,0,1,.407.067A4.3,4.3,0,0,1,16.313,13.27Z"}),l.createElement("path",{d:"M7.615,13.4a.244.244,0,0,0,.061-.24A4.315,4.315,0,0,1,7.5,12,4.5,4.5,0,0,1,12,7.5a4.276,4.276,0,0,1,1.16.173.244.244,0,0,0,.24-.062l1.941-1.942a.254.254,0,0,0-.1-.421A10.413,10.413,0,0,0,12,4.75C7.7,4.692,3.4,7.7.813,10.549a2.15,2.15,0,0,0-.007,2.9,21.209,21.209,0,0,0,3.438,3.03.256.256,0,0,0,.326-.029Z"}))}),d({d:"M11.2857,6.05714 L10.08571,4.85714 L7.85714,7.14786 L7.85714,1 L6.14286,1 L6.14286,7.14786 L3.91429,4.85714 L2.71429,6.05714 L7,10.42857 L11.2857,6.05714 Z M1,11.2857 L1,13 L13,13 L13,11.2857 L1,11.2857 Z",displayName:"DownloadIcon",viewBox:"0 0 14 14"})),h=(d({displayName:"DeleteIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z"}))}),d({displayName:"RepeatIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M10.319,4.936a7.239,7.239,0,0,1,7.1,2.252,1.25,1.25,0,1,0,1.872-1.657A9.737,9.737,0,0,0,9.743,2.5,10.269,10.269,0,0,0,2.378,9.61a.249.249,0,0,1-.271.178l-1.033-.13A.491.491,0,0,0,.6,9.877a.5.5,0,0,0-.019.526l2.476,4.342a.5.5,0,0,0,.373.248.43.43,0,0,0,.062,0,.5.5,0,0,0,.359-.152l3.477-3.593a.5.5,0,0,0-.3-.844L5.15,10.172a.25.25,0,0,1-.2-.333A7.7,7.7,0,0,1,10.319,4.936Z"}),l.createElement("path",{d:"M23.406,14.1a.5.5,0,0,0,.015-.526l-2.5-4.329A.5.5,0,0,0,20.546,9a.489.489,0,0,0-.421.151l-3.456,3.614a.5.5,0,0,0,.3.842l1.848.221a.249.249,0,0,1,.183.117.253.253,0,0,1,.023.216,7.688,7.688,0,0,1-5.369,4.9,7.243,7.243,0,0,1-7.1-2.253,1.25,1.25,0,1,0-1.872,1.656,9.74,9.74,0,0,0,9.549,3.03,10.261,10.261,0,0,0,7.369-7.12.251.251,0,0,1,.27-.179l1.058.127a.422.422,0,0,0,.06,0A.5.5,0,0,0,23.406,14.1Z"}))})),f=(d({displayName:"RepeatClockIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M12.965,6a1,1,0,0,0-1,1v5.5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2h-3.75a.25.25,0,0,1-.25-.25V7A1,1,0,0,0,12.965,6Z"}),l.createElement("path",{d:"M12.567,1.258A10.822,10.822,0,0,0,2.818,8.4a.25.25,0,0,1-.271.163L.858,8.309a.514.514,0,0,0-.485.213.5.5,0,0,0-.021.53l2.679,4.7a.5.5,0,0,0,.786.107l3.77-3.746a.5.5,0,0,0-.279-.85L5.593,9.007a.25.25,0,0,1-.192-.35,8.259,8.259,0,1,1,7.866,11.59,1.25,1.25,0,0,0,.045,2.5h.047a10.751,10.751,0,1,0-.792-21.487Z"}))}),d({displayName:"EditIcon",path:l.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},l.createElement("path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}),l.createElement("path",{d:"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"}))}),d({d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z",displayName:"ChevronLeftIcon"}),d({d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",displayName:"ChevronRightIcon"})),L=(d({displayName:"ChevronDownIcon",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}),d({d:"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",displayName:"ChevronUpIcon"}),d({d:"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",displayName:"ArrowBackIcon"}),d({d:"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",displayName:"ArrowForwardIcon"}),d({d:"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z",displayName:"ArrowUpIcon"}),d({viewBox:"0 0 16 16",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z",displayName:"ArrowUpDownIcon"}),d({d:"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",displayName:"ArrowDownIcon"}),d({displayName:"ExternalLinkIcon",path:l.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},l.createElement("path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}),l.createElement("path",{d:"M15 3h6v6"}),l.createElement("path",{d:"M10 14L21 3"}))}),d({displayName:"LinkIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z"}),l.createElement("path",{d:"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z"}))}),d({displayName:"PlusSquareIcon",path:l.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},l.createElement("rect",{height:"18",width:"18",rx:"2",ry:"2",x:"3",y:"3"}),l.createElement("path",{d:"M12 8v8"}),l.createElement("path",{d:"M8 12h8"}))}),d({displayName:"CalendarIcon",viewBox:"0 0 14 14",d:"M10.8889,5.5 L3.11111,5.5 L3.11111,7.05556 L10.8889,7.05556 L10.8889,5.5 Z M12.4444,1.05556 L11.6667,1.05556 L11.6667,0 L10.1111,0 L10.1111,1.05556 L3.88889,1.05556 L3.88889,0 L2.33333,0 L2.33333,1.05556 L1.55556,1.05556 C0.692222,1.05556 0.00777777,1.75556 0.00777777,2.61111 L0,12.5 C0,13.3556 0.692222,14 1.55556,14 L12.4444,14 C13.3,14 14,13.3556 14,12.5 L14,2.61111 C14,1.75556 13.3,1.05556 12.4444,1.05556 Z M12.4444,12.5 L1.55556,12.5 L1.55556,3.94444 L12.4444,3.94444 L12.4444,12.5 Z M8.55556,8.61111 L3.11111,8.61111 L3.11111,10.1667 L8.55556,10.1667 L8.55556,8.61111 Z"}),d({d:"M0.913134,0.920639 C1.49851,0.331726 2.29348,0 3.12342,0 L10.8766,0 C11.7065,0 12.5015,0.331725 13.0869,0.920639 C13.6721,1.50939 14,2.30689 14,3.13746 L14,8.12943 C13.9962,8.51443 13.9059,8.97125 13.7629,9.32852 C13.6128,9.683 13.3552,10.0709 13.0869,10.3462 C12.813,10.6163 12.4265,10.8761 12.0734,11.0274 C11.7172,11.1716 11.2607,11.263 10.8766,11.2669 L10.1234,11.2669 L10.1234,12.5676 L10.1209,12.5676 C10.1204,12.793 10.0633,13.0791 9.97807,13.262 C9.8627,13.466 9.61158,13.7198 9.40818,13.8382 L9.40824,13.8383 C9.4077,13.8386 9.40716,13.8388 9.40661,13.8391 C9.40621,13.8393 9.4058,13.8396 9.40539,13.8398 L9.40535,13.8397 C9.22958,13.9254 8.94505,13.9951 8.75059,14 L8.74789,14 C8.35724,13.9963 7.98473,13.8383 7.71035,13.5617 L5.39553,11.2669 L3.12342,11.2669 C2.29348,11.2669 1.49851,10.9352 0.913134,10.3462 C0.644826,10.0709 0.387187,9.683 0.23711,9.32852 C0.0941235,8.97125 0.00379528,8.51443 0,8.12943 L0,3.13746 C0,2.30689 0.327915,1.50939 0.913134,0.920639 Z M3.12342,1.59494 C2.71959,1.59494 2.33133,1.75628 2.04431,2.04503 C1.75713,2.33395 1.59494,2.72681 1.59494,3.13746 L1.59494,8.12943 C1.59114,8.35901 1.62114,8.51076 1.71193,8.72129 C1.79563,8.9346 1.88065,9.06264 2.04431,9.22185 C2.33133,9.5106 2.71959,9.67195 3.12342,9.67195 L5.72383,9.67195 C5.93413,9.67195 6.13592,9.75502 6.28527,9.90308 L8.52848,12.1269 L8.52848,10.4694 C8.52848,10.029 8.88552,9.67195 9.32595,9.67195 L10.8766,9.67195 C11.1034,9.67583 11.2517,9.64614 11.4599,9.55518 C11.6712,9.47132 11.7976,9.38635 11.9557,9.22185 C12.1193,9.06264 12.2044,8.9346 12.2881,8.72129 C12.3789,8.51076 12.4089,8.35901 12.4051,8.12943 L12.4051,3.13746 C12.4051,2.72681 12.2429,2.33394 11.9557,2.04503 C11.6687,1.75628 11.2804,1.59494 10.8766,1.59494 L3.12342,1.59494 Z",displayName:"ChatIcon",viewBox:"0 0 14 14"}),d({displayName:"TimeIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z"}),l.createElement("path",{d:"M17.134,15.81,12.5,11.561V6.5a1,1,0,0,0-2,0V12a1,1,0,0,0,.324.738l4.959,4.545a1.01,1.01,0,0,0,1.413-.061A1,1,0,0,0,17.134,15.81Z"}))}),d({displayName:"ArrowRightIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M13.584,12a2.643,2.643,0,0,1-.775,1.875L3.268,23.416a1.768,1.768,0,0,1-2.5-2.5l8.739-8.739a.25.25,0,0,0,0-.354L.768,3.084a1.768,1.768,0,0,1,2.5-2.5l9.541,9.541A2.643,2.643,0,0,1,13.584,12Z"}),l.createElement("path",{d:"M23.75,12a2.643,2.643,0,0,1-.775,1.875l-9.541,9.541a1.768,1.768,0,0,1-2.5-2.5l8.739-8.739a.25.25,0,0,0,0-.354L10.934,3.084a1.768,1.768,0,0,1,2.5-2.5l9.541,9.541A2.643,2.643,0,0,1,23.75,12Z"}))}),d({displayName:"ArrowLeftIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M10.416,12a2.643,2.643,0,0,1,.775-1.875L20.732.584a1.768,1.768,0,0,1,2.5,2.5l-8.739,8.739a.25.25,0,0,0,0,.354l8.739,8.739a1.768,1.768,0,0,1-2.5,2.5l-9.541-9.541A2.643,2.643,0,0,1,10.416,12Z"}),l.createElement("path",{d:"M.25,12a2.643,2.643,0,0,1,.775-1.875L10.566.584a1.768,1.768,0,0,1,2.5,2.5L4.327,11.823a.25.25,0,0,0,0,.354l8.739,8.739a1.768,1.768,0,0,1-2.5,2.5L1.025,13.875A2.643,2.643,0,0,1,.25,12Z"}))}),d({displayName:"AtSignIcon",d:"M12,.5A11.634,11.634,0,0,0,.262,12,11.634,11.634,0,0,0,12,23.5a11.836,11.836,0,0,0,6.624-2,1.25,1.25,0,1,0-1.393-2.076A9.34,9.34,0,0,1,12,21a9.132,9.132,0,0,1-9.238-9A9.132,9.132,0,0,1,12,3a9.132,9.132,0,0,1,9.238,9v.891a1.943,1.943,0,0,1-3.884,0V12A5.355,5.355,0,1,0,12,17.261a5.376,5.376,0,0,0,3.861-1.634,4.438,4.438,0,0,0,7.877-2.736V12A11.634,11.634,0,0,0,12,.5Zm0,14.261A2.763,2.763,0,1,1,14.854,12,2.812,2.812,0,0,1,12,14.761Z"})),v=(d({displayName:"AttachmentIcon",d:"M21.843,3.455a6.961,6.961,0,0,0-9.846,0L1.619,13.832a5.128,5.128,0,0,0,7.252,7.252L17.3,12.653A3.293,3.293,0,1,0,12.646,8L7.457,13.184A1,1,0,1,0,8.871,14.6L14.06,9.409a1.294,1.294,0,0,1,1.829,1.83L7.457,19.67a3.128,3.128,0,0,1-4.424-4.424L13.411,4.869a4.962,4.962,0,1,1,7.018,7.018L12.646,19.67a1,1,0,1,0,1.414,1.414L21.843,13.3a6.96,6.96,0,0,0,0-9.846Z"}),d({displayName:"UpDownIcon",viewBox:"-1 -1 9 11",d:"M 3.5 0L 3.98809 -0.569442L 3.5 -0.987808L 3.01191 -0.569442L 3.5 0ZM 3.5 9L 3.01191 9.56944L 3.5 9.98781L 3.98809 9.56944L 3.5 9ZM 0.488094 3.56944L 3.98809 0.569442L 3.01191 -0.569442L -0.488094 2.43056L 0.488094 3.56944ZM 3.01191 0.569442L 6.51191 3.56944L 7.48809 2.43056L 3.98809 -0.569442L 3.01191 0.569442ZM -0.488094 6.56944L 3.01191 9.56944L 3.98809 8.43056L 0.488094 5.43056L -0.488094 6.56944ZM 3.98809 9.56944L 7.48809 6.56944L 6.51191 5.43056L 3.01191 8.43056L 3.98809 9.56944Z"}),d({d:"M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z",displayName:"StarIcon"}),d({displayName:"EmailIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("path",{d:"M11.114,14.556a1.252,1.252,0,0,0,1.768,0L22.568,4.87a.5.5,0,0,0-.281-.849A1.966,1.966,0,0,0,22,4H2a1.966,1.966,0,0,0-.289.021.5.5,0,0,0-.281.849Z"}),l.createElement("path",{d:"M23.888,5.832a.182.182,0,0,0-.2.039l-6.2,6.2a.251.251,0,0,0,0,.354l5.043,5.043a.75.75,0,1,1-1.06,1.061l-5.043-5.043a.25.25,0,0,0-.354,0l-2.129,2.129a2.75,2.75,0,0,1-3.888,0L7.926,13.488a.251.251,0,0,0-.354,0L2.529,18.531a.75.75,0,0,1-1.06-1.061l5.043-5.043a.251.251,0,0,0,0-.354l-6.2-6.2a.18.18,0,0,0-.2-.039A.182.182,0,0,0,0,6V18a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V6A.181.181,0,0,0,23.888,5.832Z"}))}),d({d:"M2.20731,0.0127209 C2.1105,-0.0066419 1.99432,-0.00664663 1.91687,0.032079 C0.871279,0.438698 0.212942,1.92964 0.0580392,2.95587 C-0.426031,6.28627 2.20731,9.17133 4.62766,11.0689 C6.77694,12.7534 10.9012,15.5223 13.3409,12.8503 C13.6507,12.5211 14.0186,12.037 13.9993,11.553 C13.9412,10.7397 13.186,10.1588 12.6051,9.71349 C12.1598,9.38432 11.2304,8.47427 10.6495,8.49363 C10.1267,8.51299 9.79754,9.05515 9.46837,9.38432 L8.88748,9.96521 C8.79067,10.062 7.55145,9.24878 7.41591,9.15197 C6.91248,8.8228 6.4284,8.45491 6.00242,8.04829 C5.57644,7.64167 5.18919,7.19632 4.86002,6.73161 C4.7632,6.59607 3.96933,5.41495 4.04678,5.31813 C4.04678,5.31813 4.72448,4.58234 4.91811,4.2919 C5.32473,3.67229 5.63453,3.18822 5.16982,2.45243 C4.99556,2.18135 4.78257,1.96836 4.55021,1.73601 C4.14359,1.34875 3.73698,0.942131 3.27227,0.612963 C3.02055,0.419335 2.59457,0.0708094 2.20731,0.0127209 Z",displayName:"PhoneIcon",viewBox:"0 0 14 14"}),d({viewBox:"0 0 10 10",d:"M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z",displayName:"DragHandleIcon"}),d({displayName:"SpinnerIcon",path:l.createElement(l.Fragment,null,l.createElement("defs",null,l.createElement("linearGradient",{x1:"28.154%",y1:"63.74%",x2:"74.629%",y2:"17.783%",id:"a"},l.createElement("stop",{stopColor:"currentColor",offset:"0%"}),l.createElement("stop",{stopColor:"#fff",stopOpacity:"0",offset:"100%"}))),l.createElement("g",{transform:"translate(2)",fill:"none"},l.createElement("circle",{stroke:"url(#a)",strokeWidth:"4",cx:"10",cy:"12",r:"10"}),l.createElement("path",{d:"M10 2C4.477 2 0 6.477 0 12",stroke:"currentColor",strokeWidth:"4"}),l.createElement("rect",{fill:"currentColor",x:"8",width:"4",height:"4",rx:"8"})))}),d({displayName:"CloseIcon",d:"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"})),C=(d({displayName:"SmallCloseIcon",viewBox:"0 0 16 16",path:l.createElement("path",{d:"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z",fillRule:"evenodd",fill:"currentColor"})}),d({d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z",displayName:"NotAllowedIcon"}),d({d:"M21,5H3C2.621,5,2.275,5.214,2.105,5.553C1.937,5.892,1.973,6.297,2.2,6.6l9,12 c0.188,0.252,0.485,0.4,0.8,0.4s0.611-0.148,0.8-0.4l9-12c0.228-0.303,0.264-0.708,0.095-1.047C21.725,5.214,21.379,5,21,5z",displayName:"TriangleDownIcon"}),d({d:"M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z",displayName:"TriangleUpIcon"}),d({displayName:"InfoOutlineIcon",path:l.createElement("g",{fill:"currentColor",stroke:"currentColor",strokeLinecap:"square",strokeWidth:"2"},l.createElement("circle",{cx:"12",cy:"12",fill:"none",r:"11",stroke:"currentColor"}),l.createElement("line",{fill:"none",x1:"11.959",x2:"11.959",y1:"11",y2:"17"}),l.createElement("circle",{cx:"11.959",cy:"7",r:"1",stroke:"none"}))}),d({displayName:"BellIcon",d:"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"}),d({d:"M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"})),y=(d({d:"M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z",displayName:"QuestionIcon"}),d({displayName:"QuestionOutlineIcon",path:l.createElement("g",{stroke:"currentColor",strokeWidth:"1.5"},l.createElement("path",{strokeLinecap:"round",fill:"none",d:"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"}),l.createElement("path",{fill:"none",strokeLinecap:"round",d:"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"}),l.createElement("circle",{fill:"none",strokeMiterlimit:"10",cx:"12",cy:"12",r:"11.25"}))}),d({d:"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z",displayName:"WarningIcon"}),d({displayName:"WarningTwoIcon",d:"M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"}),d({viewBox:"0 0 14 14",path:l.createElement("g",{fill:"currentColor"},l.createElement("polygon",{points:"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"}))})),g=(d({displayName:"MinusIcon",path:l.createElement("g",{fill:"currentColor"},l.createElement("rect",{height:"4",width:"20",x:"2",y:"10"}))}),d({displayName:"HamburgerIcon",viewBox:"0 0 24 24",d:"M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z"}))},4651:function(e,a,t){"use strict";t.d(a,{Ee:function(){return p}});var n=t(2846),r=t(5031),l=t(7294),o=t(7375);function c(){return(c=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}var s=["htmlWidth","htmlHeight","alt"],d=["fallbackSrc","fallback","src","srcSet","align","fit","loading","ignoreFallback","crossOrigin"],m=l.forwardRef((function(e,a){var t=e.htmlWidth,n=e.htmlHeight,r=e.alt,o=i(e,s);return l.createElement("img",c({width:t,height:n,ref:a,alt:r},o))})),p=(0,n.Gp)((function(e,a){var t=e.fallbackSrc,s=e.fallback,p=e.src,u=e.srcSet,h=e.align,f=e.fit,L=e.loading,v=e.ignoreFallback,C=e.crossOrigin,y=i(e,d),g=null!=L||v||void 0===t&&void 0===s,E=function(e){var a=e.loading,t=e.src,n=e.srcSet,r=e.onLoad,c=e.onError,i=e.crossOrigin,s=e.sizes,d=e.ignoreFallback,m=(0,l.useState)("pending"),p=m[0],u=m[1];(0,l.useEffect)((function(){u(t?"loading":"pending")}),[t]);var h=(0,l.useRef)(),f=(0,l.useCallback)((function(){if(t){L();var e=new Image;e.src=t,i&&(e.crossOrigin=i),n&&(e.srcset=n),s&&(e.sizes=s),a&&(e.loading=a),e.onload=function(e){L(),u("loaded"),null==r||r(e)},e.onerror=function(e){L(),u("failed"),null==c||c(e)},h.current=e}}),[t,i,n,s,r,c,a]),L=function(){h.current&&(h.current.onload=null,h.current.onerror=null,h.current=null)};return(0,o.Gw)((function(){if(!d)return"loading"===p&&f(),function(){L()}}),[p,f,d]),d?"loaded":p}(c({},e,{ignoreFallback:g})),M=c({ref:a,objectFit:f,objectPosition:h},g?y:(0,r.CE)(y,["onError","onLoad"]));return"loaded"!==E?s||l.createElement(n.m$.img,c({as:m,className:"chakra-image__placeholder",src:t},M)):l.createElement(n.m$.img,c({as:m,src:p,srcSet:u,crossOrigin:C,loading:L,className:"chakra-image"},M))}));r.Ts&&(p.displayName="Image")},9609:function(e,a,t){"use strict";t.d(a,{$:function(){return m}});var n=t(917),r=t(2846),l=t(5031),o=t(1358),c=t(7294);function i(){return(i=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(n,s),E=(0,l.cx)("chakra-spinner",y),M=i({display:"inline-block",borderColor:"currentColor",borderStyle:"solid",borderRadius:"99999px",borderWidth:h,borderBottomColor:C,borderLeftColor:C,animation:d+" "+L+" linear infinite"},t);return c.createElement(r.m$.div,i({ref:a,__css:M,className:E},g),p&&c.createElement(o.TX,null,p))}));l.Ts&&(m.displayName="Spinner")},1358:function(e,a,t){"use strict";t.d(a,{TX:function(){return o}});var n=t(2846),r=t(5031),l={border:"0px",clip:"rect(0px, 0px, 0px, 0px)",height:"1px",width:"1px",margin:"-1px",padding:"0px",overflow:"hidden",whiteSpace:"nowrap",position:"absolute"},o=(0,n.m$)("span",{baseStyle:l});r.Ts&&(o.displayName="VisuallyHidden");var c=(0,n.m$)("input",{baseStyle:l});r.Ts&&(c.displayName="VisuallyHiddenInput")},9008:function(e,a,t){e.exports=t(5443)}}]); \ No newline at end of file diff --git a/_next/static/chunks/70-0e8008ae0f695c42.js b/_next/static/chunks/70-0e8008ae0f695c42.js deleted file mode 100644 index 638b3c991..000000000 --- a/_next/static/chunks/70-0e8008ae0f695c42.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[70],{5292:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/yaQ5YMWkxq4",title:"Acid Explained with Examples"}))}i.isMDXComponent=!0},1568:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/HiBDZgTNpXY",title:"All about HTTP Caching"}))}i.isMDXComponent=!0},8259:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/n3NKGsM3iEw",title:"Arrays and Objects in JavaScript"}))}i.isMDXComponent=!0},7210:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/VyIK6SV5f7o",title:"Asynchronous JavaScript"}))}i.isMDXComponent=!0},3501:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Z0bH0cMY0E8",title:"Big O Notation \u2014 Calculating Time Complexity"}))}i.isMDXComponent=!0},1830:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/6DXEPcXKQNY",title:"Content Delivery Networks"}))}i.isMDXComponent=!0},9970:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Wj0od2ag5sk",title:"DNS and how does it work?"}))}i.isMDXComponent=!0},4997:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/7lxgpKh_fRY",title:"DNS Records"}))}i.isMDXComponent=!0},8813:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/RIiq4tTt6rI",title:"Floating Point Arithmetic"}))}i.isMDXComponent=!0},6789:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/O3uT2l6vgZ8",title:"Freeze and Seal in JavaScript"}))}i.isMDXComponent=!0},9320:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/lgaxU7CRmxU",title:"How to use CSS Variables?"}))}i.isMDXComponent=!0},7624:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/nyKZTKQS_EQ",title:"Automate with GitHub Actions"}))}i.isMDXComponent=!0},6634:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/-ZI0ea5O2oA",title:"JavaScript Fetch API"}))}i.isMDXComponent=!0},4121:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/galcDRNd5Ow",title:"Load Balancers 101"}))}i.isMDXComponent=!0},8635:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/dV8mjZd1OtU",title:"OSI Model Explained"}))}i.isMDXComponent=!0},1051:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub's API and shows you in the form of listing."),(0,r.kt)("p",null,"If you want to get an idea of what we are going to be building have a look at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://kamranahmed.info/githunt"}),"GitHunt"),". Also the complete source code can be found at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/githunt"}),"@kamranahmedse/githunt")),(0,r.kt)("h2",null,"Intro and Basic Setup"),(0,r.kt)("p",null,"The video below gives you the basic introduction about the project and explains what we are going to build."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/NyG7YJWJd6s",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Building the Interface"),(0,r.kt)("p",null,"In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/zPqzKqjtEL4",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Building the View Switcher"),(0,r.kt)("p",null,'In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the "Grid View" and the "List View" and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.'),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/EYzPJsJwjFg",title:"Practical Introduction to React Part 1"}),(0,r.kt)("h2",null,"Fetching Remote Data"),(0,r.kt)("p",null,"Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic."),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/G2IbP9B_4PU",title:"Practical Introduction to React Part 1"}))}i.isMDXComponent=!0},5491:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/BvrkobaCVVE",title:"All about Promises in JavaScript"}))}i.isMDXComponent=!0},7730:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/nDv3yXdD0rk",title:"Random Number Generators"}))}i.isMDXComponent=!0},9351:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/a2rcgzludDU",title:"Scaling the Unscalable"}))}i.isMDXComponent=!0},6765:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/k3rFFLmQCuY",title:"SSH vs TLS vs SSL"}))}i.isMDXComponent=!0},4322:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/Y-Gl4HEyeUQ",title:"System Design 101"}))}i.isMDXComponent=!0},2142:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/F5rni9fr1yE",title:"TCP/IP Model Explained"}))}i.isMDXComponent=!0},2034:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/37AFBZv4_6Y",title:"Transport Protocols: TCP vs UDP"}))}i.isMDXComponent=!0},6672:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/_RbsFXWRZ10",title:"What is CAP Theorem?"}))}i.isMDXComponent=!0},1454:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/0yc2UANSDiw",title:"What is Dependency Injection?"}))}i.isMDXComponent=!0},6315:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/7Tok22qxPzQ",title:"DOM, Shadow DOM, Virtual DOM"}))}i.isMDXComponent=!0},104:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/rpqsSkTIdAw",title:"What is Eventual Consistency?"}))}i.isMDXComponent=!0},8734:function(t,e,n){n.r(e),n.d(e,{default:function(){return i}});n(7294);var r=n(4137);function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var u={};function i(t){var e=t.components,n=o(t,["components"]);return(0,r.kt)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("iframe",{src:"https://www.youtube.com/embed/ImHSpwUlNVc",title:"YAML in Depth"}))}i.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/_next/static/chunks/714-254b923e776db71f.js b/_next/static/chunks/714-86c6e14669113664.js similarity index 97% rename from _next/static/chunks/714-254b923e776db71f.js rename to _next/static/chunks/714-86c6e14669113664.js index 245a6077b..2eea04637 100644 --- a/_next/static/chunks/714-254b923e776db71f.js +++ b/_next/static/chunks/714-86c6e14669113664.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[714],{4866:function(e,n,t){t.d(n,{v:function(){return l}});var o=t(5893),r=t(8527),i=t(8641),a=t(5657);t(7294);function l(){return(0,o.jsxs)(r.xv,{_hover:{textDecoration:"none",color:"blue.700","& .new-badge":{bg:"blue.700"}},as:r.rU,href:i.url.youtube,d:"block",target:"_blank",color:"red.700",fontSize:"sm",mb:"10px",fontWeight:500,onClick:function(){return(0,a.B)({category:"Subscription",action:"Clicked the YouTube banner",label:"YouTube Alert on Roadmap"})},children:[(0,o.jsx)(r.Ct,{transition:"all 300ms",className:"new-badge",mr:"7px",colorScheme:"red",variant:"solid",children:"New"}),(0,o.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["none","inline"],children:"Roadmap topics to be covered on our YouTube Channel"}),(0,o.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["inline","none"],children:"Topic videos being made on YouTube"}),(0,o.jsx)(r.xv,{as:"span",ml:"5px",children:"\xbb"})]})}},1177:function(e,n,t){t.d(n,{h:function(){return c}});var o=t(5893),r=t(4866),i=t(8527),a=t(5193),l=t(9876);t(7294);function c(e){var n=e.roadmap;return(0,o.jsx)(i.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:(0,o.jsxs)(i.W2,{maxW:"container.md",position:"relative",children:[(0,o.jsx)(r.v,{}),(0,o.jsx)(i.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:n.title}),(0,o.jsx)(i.xv,{fontSize:["13px","14px","15px"],children:n.description}),(0,o.jsx)(i.kC,{justifyContent:"space-between",alignItems:"center",mt:"20px",children:(0,o.jsxs)(i.Kq,{isInline:!0,children:[(0,o.jsxs)(a.zx,{d:["flex","flex"],as:i.rU,href:"/roadmaps",size:"xs",py:"14px",px:"10px",colorScheme:"teal",variant:"solid",_hover:{textDecoration:"none"},children:["\u2190",(0,o.jsx)(i.xv,{as:"span",d:["none","inline"],ml:"5px",children:"All Roadmaps"})]}),n.pdfUrl&&(0,o.jsx)(a.zx,{as:i.rU,href:n.pdfUrl,target:"_blank",size:"xs",py:"14px",px:"10px",leftIcon:(0,o.jsx)(l._8,{}),colorScheme:"yellow",variant:"solid",_hover:{textDecoration:"none"},children:"Download"}),(0,o.jsx)(a.zx,{as:i.rU,href:"/signup",size:"xs",py:"14px",px:"10px",variant:"solid",colorScheme:"yellow",leftIcon:(0,o.jsx)(l.Km,{}),_hover:{textDecoration:"none"},children:"Subscribe"})]})}),"frontend"===n.id&&(0,o.jsxs)(i.xv,{mt:"30px",mb:["-37px","-32px","-47px"],fontWeight:500,fontSize:"14px",bg:"white",borderWidth:1,p:"5px 7px",rounded:"3px",children:[(0,o.jsx)(i.Ct,{pos:"relative",top:"-1px",mr:"6px",colorScheme:"yellow",children:"New"}),"Resources are here, try clicking any nodes."]})]})})}},2903:function(e,n,t){t.r(n),t.d(n,{__N_SSG:function(){return g},default:function(){return y}});var o=t(5893),r=t(8527),i=t(1739),a=t(2438),l=t(1832),c=t(600),s=t(6673),d=t(2348),u=t(202),p=(t(7294),t(9876)),f=t(8641),x=t(5193);function v(e){var n=e.href;return(0,o.jsxs)(r.xu,{my:"30px",children:[(0,o.jsx)(r.iz,{mb:"15px",orientation:"horizontal"}),(0,o.jsx)(r.xv,{lineHeight:"23px",fontWeight:500,fontSize:"14px",color:"gray.500",mb:"10px",children:"This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic."}),(0,o.jsx)(x.zx,{size:"sm",py:"20px",as:r.rU,href:n,target:"_blank",isFullWidth:!0,colorScheme:"gray",_hover:{textDecoration:"none",bg:"gray.200"},children:"Edit this Page"})]})}function h(e){var n=e.roadmap,i=e.group;if(!n.contentPathsFilePath)return null;var a=n.contentPathsFilePath.replace(/^\//,""),l=(t(9280)("./".concat(a))[i]||"").replace(/^\//,""),c=t(9280)("./".concat(l)).default;return(0,o.jsx)(r.xu,{children:(0,o.jsxs)(d.Z,{children:[(0,o.jsx)(c,{}),(0,o.jsx)(v,{href:"".concat(f.url.repoData,"/").concat(l)})]})})}function m(e){var n=e.roadmap,t=e.group.split(":");return(0,o.jsxs)(i.aG,{fontWeight:"medium",fontSize:"sm",separator:(0,o.jsx)(p.XC,{color:"gray.500"}),children:[(0,o.jsx)(i.gN,{children:(0,o.jsx)(i.At,{color:"blue.500",href:"/".concat(n.id),children:n.featuredTitle})}),t.map((function(e,r){return(0,o.jsx)(i.gN,{isCurrentPage:r===t.length-1,children:(0,o.jsx)(i.At,{textTransform:"capitalize",color:"blue.500",href:"/".concat(n.id,"/").concat(t.slice(0,r+1).join(":")),children:e.split("-").join(" ")})},e)}))]})}var g=!0;function y(e){var n,t,i=e.roadmap,d=e.group,p=e.isOutlet;return void 0!==p&&p?(0,o.jsx)(h,{roadmap:i,group:d}):(0,o.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,o.jsx)(a.e,{}),(0,o.jsx)(u.Z,{title:(null===i||void 0===i||null===(n=i.seo)||void 0===n?void 0:n.title)||i.title,description:(null===i||void 0===i||null===(t=i.seo)||void 0===t?void 0:t.description)||i.description,keywords:(null===i||void 0===i?void 0:i.seo.keywords)||[]}),(0,o.jsxs)(r.W2,{my:"60px",maxW:"container.md",position:"relative",children:[(0,o.jsx)(m,{roadmap:i,group:d}),(0,o.jsx)(h,{roadmap:i,group:d})]}),(0,o.jsx)(l.z,{}),(0,o.jsx)(c.q,{}),(0,o.jsx)(s.$,{})]})}},1714:function(e,n,t){t.r(n),t.d(n,{InteractiveRoadmapRenderer:function(){return L},__N_SSG:function(){return A},default:function(){return N}});var o=t(5893),r=t(2730),i=t(7294),a=t(8527),l=t(2438),c=t(1832),s=t(600),d=t(6673),u=t(202),p=t(8520),f=t.n(p);function x(e){return(e||"").replace(/^\d+-/,"")}function v(e,n,t){var o=void 0===n?{}:n,r=document.createElementNS("http://www.w3.org/2000/svg",e);for(var i in o)o.hasOwnProperty(i)&&r.setAttribute(i,o[i]);return t&&t.appendChild(r),r}var h=2.7,m={black:["#000"],gray:["#000","#333","#666","#999","#ccc","#ddd","#eee"],white:["#fff"],red:["#cf2a27","#ea9999","#eo6666","#cc0000","#990000","#660000"],orange:["#ff9900","#f9cb9c","#f6b26b","#e69138","#b45f06","#783f04"],yellow:["#ffff00","#ffe599","#ffd966","#f1c232","#bf9000","#7f6000"],green:["#009e0f","#b6d7a8","#93c47d","#6aa84f","#38761d","#274e13"],cyan:["#00ffff","#a2c4c9","#76a5af","#45818e","#134f5c","#0c343d"],blue:["#2b78e4","#9fc5f8","#6fa8dc","#597eaa","#085394","#073763"],purple:["#9900ff","#b4a7d6","#8e7cc3","#674ea7","#351c75","#20124d"],pink:["#ff00ff","#d5a6bd","#c27ba0","#a64d79","#741b47","#4c1130"]};function g(e,n){for(var t=0;t>8&255,t=255&e;return"rgb(".concat(e>>16&255,",").concat(n,",").concat(t,")")}(e)}},{key:"parseFontProperties",value:function(e){var n,t,o;return{style:(null===(n=e.properties)||void 0===n?void 0:n.italic)?"italic":"normal",weight:(null===(t=e.properties)||void 0===t?void 0:t.bold)?"bold":"normal",size:(null===(o=e.properties)||void 0===o?void 0:o.size)?e.properties.size+"px":"13px",family:this.fontFamily}}},{key:"measureText",value:function(e,n){return this.canvasRenderingContext2D.font=n,this.canvasRenderingContext2D.measureText(e)}},{key:"drawRectangle",value:function(e,n){var t,o,r,i,a,l;v("rect",{x:parseInt(e.x)+1.35,y:parseInt(e.y)+1.35,width:parseInt(null!==(i=e.w)&&void 0!==i?i:e.measuredW)-h,height:parseInt(null!==(a=e.h)&&void 0!==a?a:e.measuredH)-h,rx:2,fill:this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"255,255,255"),"fill-opacity":null!==(l=null===(o=e.properties)||void 0===o?void 0:o.backgroundAlpha)&&void 0!==l?l:1,stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.borderColor,"0,0,0"),"stroke-width":h},n)}},{key:"addText",value:function(e,n,t,o){var r,i,a=null!==(r=e.properties.text)&&void 0!==r?r:"",l=parseInt(e.x),c=parseInt(e.y),s=this.parseFontProperties(e),d=this.measureText(a,"".concat(s.style," ").concat(s.weight," ").concat(s.size," ").concat(s.family)),u=v("text",{x:"center"===o?l+(null!==(i=e.w)&&void 0!==i?i:e.measuredW)/2-d.width/2:l,y:c+e.measuredH/2+d.actualBoundingBoxAscent/2,fill:t,"font-style":s.style,"font-weight":s.weight,"font-size":s.size},n);a.includes("{color:")?a.split(/{color:|{color}/).forEach((function(e){if(e.includes("}")){var n=b(e.split("}"),2),t=n[0],o=n[1];if(!t.startsWith("#")){var r=parseInt(t.slice(-1));t=isNaN(r)?m[t][0]:m[t][r]}v("tspan",{fill:t},u).textContent=o}else v("tspan",{},u).textContent=e})):v("tspan",{},u).textContent=a}},{key:"TextArea",value:function(e,n){this.drawRectangle(e,n)}},{key:"Canvas",value:function(e,n){this.drawRectangle(e,n)}},{key:"Label",value:function(e,n){var t;this.addText(e,n,this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"0,0,0"),"left")}},{key:"TextInput",value:function(e,n){var t;this.drawRectangle(e,n),this.addText(e,n,this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.textColor,"0,0,0"),"center")}},{key:"Arrow",value:function(e,n){var t,o,r,i,a=parseInt(e.x),l=parseInt(e.y),c=e.properties,s=c.p0,d=c.p1,u=c.p2;"dotted"===(null===(t=e.properties)||void 0===t?void 0:t.stroke)?i="0.8 12":"dashed"===(null===(o=e.properties)||void 0===o?void 0:o.stroke)&&(i="28 46");var p=(u.x-s.x)*d.x,f=(u.y-s.y)*d.x;v("path",{d:"M".concat(a+s.x," ").concat(l+s.y,"Q").concat(a+s.x+p+f*d.y*3.6," ").concat(l+s.y+f+-p*d.y*3.6," ").concat(a+u.x," ").concat(l+u.y),fill:"none",stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.color,"0,0,0"),"stroke-width":4,"stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":i},n)}},{key:"Icon",value:function(e,n){var t,o=parseInt(e.x),r=parseInt(e.y),i=10;v("circle",{cx:o+i,cy:r+i,r:i,fill:this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"0,0,0")},n),"check-circle"===e.properties.icon.ID&&v("path",{d:"M".concat(o+4.5," ").concat(r+i,"L").concat(o+8.5," ").concat(r+i+4," ").concat(o+15," ").concat(r+i-2.5),fill:"none",stroke:"#fff","stroke-width":3.5,"stroke-linecap":"round","stroke-linejoin":"round"},n)}},{key:"HRule",value:function(e,n){var t,o,r,i,a,l=parseInt(e.x),c=parseInt(e.y);"dotted"===(null===(t=e.properties)||void 0===t?void 0:t.stroke)?i="0.8, 8":"dashed"===(null===(o=e.properties)||void 0===o?void 0:o.stroke)&&(i="18, 30"),v("path",{d:"M".concat(l," ").concat(c,"L").concat(l+parseInt(null!==(a=e.w)&&void 0!==a?a:e.measuredW)," ").concat(c),fill:"none",stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.color,"0,0,0"),"stroke-width":h,"stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":i},n)}},{key:"__group__",value:function(e,n){var t,o=this,r=null===e||void 0===e||null===(t=e.properties)||void 0===t?void 0:t.controlName,i=x(r),a="done"===localStorage.getItem(i),l=v("g",function(e){for(var n=1;n>8&255,t=255&e;return"rgb(".concat(e>>16&255,",").concat(n,",").concat(t,")")}(e)}},{key:"parseFontProperties",value:function(e){var n,t,o;return{style:(null===(n=e.properties)||void 0===n?void 0:n.italic)?"italic":"normal",weight:(null===(t=e.properties)||void 0===t?void 0:t.bold)?"bold":"normal",size:(null===(o=e.properties)||void 0===o?void 0:o.size)?e.properties.size+"px":"13px",family:this.fontFamily}}},{key:"measureText",value:function(e,n){return this.canvasRenderingContext2D.font=n,this.canvasRenderingContext2D.measureText(e)}},{key:"drawRectangle",value:function(e,n){var t,o,r,i,a,l;v("rect",{x:parseInt(e.x)+1.35,y:parseInt(e.y)+1.35,width:parseInt(null!==(i=e.w)&&void 0!==i?i:e.measuredW)-h,height:parseInt(null!==(a=e.h)&&void 0!==a?a:e.measuredH)-h,rx:2,fill:this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"255,255,255"),"fill-opacity":null!==(l=null===(o=e.properties)||void 0===o?void 0:o.backgroundAlpha)&&void 0!==l?l:1,stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.borderColor,"0,0,0"),"stroke-width":h},n)}},{key:"addText",value:function(e,n,t,o){var r,i,a=null!==(r=e.properties.text)&&void 0!==r?r:"",l=parseInt(e.x),c=parseInt(e.y),s=this.parseFontProperties(e),d=this.measureText(a,"".concat(s.style," ").concat(s.weight," ").concat(s.size," ").concat(s.family)),u=v("text",{x:"center"===o?l+(null!==(i=e.w)&&void 0!==i?i:e.measuredW)/2-d.width/2:l,y:c+e.measuredH/2+d.actualBoundingBoxAscent/2,fill:t,"font-style":s.style,"font-weight":s.weight,"font-size":s.size},n);a.includes("{color:")?a.split(/{color:|{color}/).forEach((function(e){if(e.includes("}")){var n=b(e.split("}"),2),t=n[0],o=n[1];if(!t.startsWith("#")){var r=parseInt(t.slice(-1));t=isNaN(r)?m[t][0]:m[t][r]}v("tspan",{fill:t},u).textContent=o}else v("tspan",{},u).textContent=e})):v("tspan",{},u).textContent=a}},{key:"TextArea",value:function(e,n){this.drawRectangle(e,n)}},{key:"Canvas",value:function(e,n){this.drawRectangle(e,n)}},{key:"Label",value:function(e,n){var t;this.addText(e,n,this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"0,0,0"),"left")}},{key:"TextInput",value:function(e,n){var t;this.drawRectangle(e,n),this.addText(e,n,this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.textColor,"0,0,0"),"center")}},{key:"Arrow",value:function(e,n){var t,o,r,i,a=parseInt(e.x),l=parseInt(e.y),c=e.properties,s=c.p0,d=c.p1,u=c.p2;"dotted"===(null===(t=e.properties)||void 0===t?void 0:t.stroke)?i="0.8 12":"dashed"===(null===(o=e.properties)||void 0===o?void 0:o.stroke)&&(i="28 46");var p=(u.x-s.x)*d.x,f=(u.y-s.y)*d.x;v("path",{d:"M".concat(a+s.x," ").concat(l+s.y,"Q").concat(a+s.x+p+f*d.y*3.6," ").concat(l+s.y+f+-p*d.y*3.6," ").concat(a+u.x," ").concat(l+u.y),fill:"none",stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.color,"0,0,0"),"stroke-width":4,"stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":i},n)}},{key:"Icon",value:function(e,n){var t,o=parseInt(e.x),r=parseInt(e.y),i=10;v("circle",{cx:o+i,cy:r+i,r:i,fill:this.parseColor(null===(t=e.properties)||void 0===t?void 0:t.color,"0,0,0")},n),"check-circle"===e.properties.icon.ID&&v("path",{d:"M".concat(o+4.5," ").concat(r+i,"L").concat(o+8.5," ").concat(r+i+4," ").concat(o+15," ").concat(r+i-2.5),fill:"none",stroke:"#fff","stroke-width":3.5,"stroke-linecap":"round","stroke-linejoin":"round"},n)}},{key:"HRule",value:function(e,n){var t,o,r,i,a,l=parseInt(e.x),c=parseInt(e.y);"dotted"===(null===(t=e.properties)||void 0===t?void 0:t.stroke)?i="0.8, 8":"dashed"===(null===(o=e.properties)||void 0===o?void 0:o.stroke)&&(i="18, 30"),v("path",{d:"M".concat(l," ").concat(c,"L").concat(l+parseInt(null!==(a=e.w)&&void 0!==a?a:e.measuredW)," ").concat(c),fill:"none",stroke:this.parseColor(null===(r=e.properties)||void 0===r?void 0:r.color,"0,0,0"),"stroke-width":h,"stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":i},n)}},{key:"__group__",value:function(e,n){var t,o=this,r=null===e||void 0===e||null===(t=e.properties)||void 0===t?void 0:t.controlName,i=x(r),a="done"===localStorage.getItem(i),l=v("g",function(e){for(var n=1;n=0||(r[t]=e[t]);return r}function p(){return(p=Object.assign||function(e){for(var a=1;a *:first-of-type:not(:last-of-type)":{borderEndRadius:0},"> *:not(:first-of-type):not(:last-of-type)":{borderRadius:0},"> *:not(:first-of-type):last-of-type":{borderStartRadius:0}}:{"& > *:not(style) ~ *:not(style)":{marginStart:d}}),o.createElement(L,{value:y},o.createElement(r.m$.div,p({ref:a,role:"group",__css:v,className:I},C)))}));l.Ts&&(C.displayName="ButtonGroup");var I=["label","placement","spacing","children","className","__css"],y=function(e){var a=e.label,t=e.placement;e.spacing;var n=e.children,c=void 0===n?o.createElement(d.$,{color:"currentColor",width:"1em",height:"1em"}):n,i=e.className,s=e.__css,u=m(e,I),h=(0,l.cx)("chakra-button__spinner",i),L="start"===t?"marginEnd":"marginStart",f=o.useMemo((function(){var e;return p(((e={display:"flex",alignItems:"center",position:a?"relative":"absolute"})[L]=a?"0.5rem":0,e.fontSize="1em",e.lineHeight="normal",e),s)}),[s,a,L]);return o.createElement(r.m$.div,p({className:h},u,{__css:f}),c)};l.Ts&&(y.displayName="ButtonSpinner");var v=["children","className"],g=function(e){var a=e.children,t=e.className,n=m(e,v),c=o.isValidElement(a)?o.cloneElement(a,{"aria-hidden":!0,focusable:!1}):a,i=(0,l.cx)("chakra-button__icon",t);return o.createElement(r.m$.span,p({display:"inline-flex",alignSelf:"center",flexShrink:0},n,{className:i}),c)};l.Ts&&(g.displayName="ButtonIcon");var E=["isDisabled","isLoading","isActive","isFullWidth","children","leftIcon","rightIcon","loadingText","iconSpacing","type","spinner","spinnerPlacement","className","as"],M=(0,r.Gp)((function(e,a){var t=f(),c=(0,r.mq)("Button",p({},t,e)),s=(0,r.Lr)(e),d=s.isDisabled,u=void 0===d?null==t?void 0:t.isDisabled:d,h=s.isLoading,L=s.isActive,C=s.isFullWidth,I=s.children,v=s.leftIcon,g=s.rightIcon,M=s.loadingText,N=s.iconSpacing,b=void 0===N?"0.5rem":N,Z=s.type,k=s.spinner,U=s.spinnerPlacement,x=void 0===U?"start":U,w=s.className,S=s.as,V=m(s,E),z=o.useMemo((function(){var e,a=i()({},null!=(e=null==c?void 0:c._focus)?e:{},{zIndex:1});return p({display:"inline-flex",appearance:"none",alignItems:"center",justifyContent:"center",userSelect:"none",position:"relative",whiteSpace:"nowrap",verticalAlign:"middle",outline:"none",width:C?"100%":"auto"},c,!!t&&{_focus:a})}),[c,t,C]),_=function(e){var a=o.useState(!e),t=a[0],n=a[1];return{ref:o.useCallback((function(e){e&&n("BUTTON"===e.tagName)}),[]),type:t?"button":void 0}}(S),H=_.ref,O=_.type,B={rightIcon:g,leftIcon:v,iconSpacing:b,children:I};return o.createElement(r.m$.button,p({disabled:u||h,ref:(0,n.qq)(a,H),as:S,type:null!=Z?Z:O,"data-active":(0,l.PB)(L),"data-loading":(0,l.PB)(h),__css:z,className:(0,l.cx)("chakra-button",w)},V),h&&"start"===x&&o.createElement(y,{className:"chakra-button__spinner--start",label:M,placement:"start"},k),h?M||o.createElement(r.m$.span,{opacity:0},o.createElement(A,B)):o.createElement(A,B),h&&"end"===x&&o.createElement(y,{className:"chakra-button__spinner--end",label:M,placement:"end"},k))}));function A(e){var a=e.leftIcon,t=e.rightIcon,n=e.children,r=e.iconSpacing;return o.createElement(o.Fragment,null,a&&o.createElement(g,{marginEnd:r},a),n,t&&o.createElement(g,{marginStart:r},t))}l.Ts&&(M.displayName="Button");var N=["icon","children","isRound","aria-label"],b=(0,r.Gp)((function(e,a){var t=e.icon,n=e.children,r=e.isRound,l=e["aria-label"],c=m(e,N),i=t||n,s=o.isValidElement(i)?o.cloneElement(i,{"aria-hidden":!0,focusable:!1}):null;return o.createElement(M,p({padding:"0",borderRadius:r?"full":void 0,ref:a,"aria-label":l},c),s)}));l.Ts&&(b.displayName="IconButton")},4746:function(e,a,t){"use strict";t.d(a,{P:function(){return d}});var n=t(894),r=t(2846),l=t(5031),c=t(7294);function i(){return(i=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(n,o);return c.createElement(r.m$.button,i({type:"button","aria-label":"Close",ref:a,disabled:d,__css:i({},{outline:0,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},t,m)},p),l||c.createElement(s,{width:"1em",height:"1em"}))}));l.Ts&&(d.displayName="CloseButton")},9876:function(e,a,t){"use strict";t.d(a,{Km:function(){return d},rE:function(){return l},nQ:function(){return u},XC:function(){return s},Tw:function(){return m},_8:function(){return i},Uq:function(){return h},sz:function(){return p},mB:function(){return c},ny:function(){return o}});var n=t(894),r=t(7294),l=((0,n.IU)({d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",displayName:"CopyIcon"}),(0,n.IU)({d:"M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z",displayName:"SearchIcon"}),(0,n.IU)({d:"M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z",displayName:"Search2Icon"}),(0,n.IU)({d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z",displayName:"MoonIcon"}),(0,n.IU)({displayName:"SunIcon",path:r.createElement("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor"},r.createElement("circle",{cx:"12",cy:"12",r:"5"}),r.createElement("path",{d:"M12 1v2"}),r.createElement("path",{d:"M12 21v2"}),r.createElement("path",{d:"M4.22 4.22l1.42 1.42"}),r.createElement("path",{d:"M18.36 18.36l1.42 1.42"}),r.createElement("path",{d:"M1 12h2"}),r.createElement("path",{d:"M21 12h2"}),r.createElement("path",{d:"M4.22 19.78l1.42-1.42"}),r.createElement("path",{d:"M18.36 5.64l1.42-1.42"}))}),(0,n.IU)({d:"M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z",displayName:"AddIcon"}),(0,n.IU)({displayName:"SmallAddIcon",viewBox:"0 0 20 20",path:r.createElement("path",{fill:"currentColor",d:"M14 9h-3V6c0-.55-.45-1-1-1s-1 .45-1 1v3H6c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1z",fillRule:"evenodd"})}),(0,n.IU)({viewBox:"0 0 14 14",d:"M14,7.77 L14,6.17 L12.06,5.53 L11.61,4.44 L12.49,2.6 L11.36,1.47 L9.55,2.38 L8.46,1.93 L7.77,0.01 L6.17,0.01 L5.54,1.95 L4.43,2.4 L2.59,1.52 L1.46,2.65 L2.37,4.46 L1.92,5.55 L0,6.23 L0,7.82 L1.94,8.46 L2.39,9.55 L1.51,11.39 L2.64,12.52 L4.45,11.61 L5.54,12.06 L6.23,13.98 L7.82,13.98 L8.45,12.04 L9.56,11.59 L11.4,12.47 L12.53,11.34 L11.61,9.53 L12.08,8.44 L14,7.75 L14,7.77 Z M7,10 C5.34,10 4,8.66 4,7 C4,5.34 5.34,4 7,4 C8.66,4 10,5.34 10,7 C10,8.66 8.66,10 7,10 Z",displayName:"SettingsIcon"}),(0,n.IU)({displayName:"CheckCircleIcon",d:"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"})),c=(0,n.IU)({d:"M19.5,9.5h-.75V6.75a6.75,6.75,0,0,0-13.5,0V9.5H4.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h15a2,2,0,0,0,2-2V11.5A2,2,0,0,0,19.5,9.5Zm-9.5,6a2,2,0,1,1,3,1.723V19.5a1,1,0,0,1-2,0V17.223A1.994,1.994,0,0,1,10,15.5ZM7.75,6.75a4.25,4.25,0,0,1,8.5,0V9a.5.5,0,0,1-.5.5H8.25a.5.5,0,0,1-.5-.5Z",displayName:"LockIcon"}),i=((0,n.IU)({d:"M19.5,9.5h-.75V6.75A6.751,6.751,0,0,0,5.533,4.811a1.25,1.25,0,1,0,2.395.717A4.251,4.251,0,0,1,16.25,6.75V9a.5.5,0,0,1-.5.5H4.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h15a2,2,0,0,0,2-2V11.5A2,2,0,0,0,19.5,9.5Zm-9.5,6a2,2,0,1,1,3,1.723V19.5a1,1,0,0,1-2,0V17.223A1.994,1.994,0,0,1,10,15.5Z",displayName:"UnlockIcon"}),(0,n.IU)({displayName:"ViewIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M23.432,10.524C20.787,7.614,16.4,4.538,12,4.6,7.6,4.537,3.213,7.615.568,10.524a2.211,2.211,0,0,0,0,2.948C3.182,16.351,7.507,19.4,11.839,19.4h.308c4.347,0,8.671-3.049,11.288-5.929A2.21,2.21,0,0,0,23.432,10.524ZM7.4,12A4.6,4.6,0,1,1,12,16.6,4.6,4.6,0,0,1,7.4,12Z"}),r.createElement("circle",{cx:"12",cy:"12",r:"2"}))}),(0,n.IU)({displayName:"ViewOffIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M23.2,10.549a20.954,20.954,0,0,0-4.3-3.6l4-3.995a1,1,0,1,0-1.414-1.414l-.018.018a.737.737,0,0,1-.173.291l-19.5,19.5c-.008.007-.018.009-.026.017a1,1,0,0,0,1.631,1.088l4.146-4.146a11.26,11.26,0,0,0,4.31.939h.3c4.256,0,8.489-2.984,11.051-5.8A2.171,2.171,0,0,0,23.2,10.549ZM16.313,13.27a4.581,4.581,0,0,1-3,3.028,4.3,4.3,0,0,1-3.1-.19.253.253,0,0,1-.068-.407l5.56-5.559a.252.252,0,0,1,.407.067A4.3,4.3,0,0,1,16.313,13.27Z"}),r.createElement("path",{d:"M7.615,13.4a.244.244,0,0,0,.061-.24A4.315,4.315,0,0,1,7.5,12,4.5,4.5,0,0,1,12,7.5a4.276,4.276,0,0,1,1.16.173.244.244,0,0,0,.24-.062l1.941-1.942a.254.254,0,0,0-.1-.421A10.413,10.413,0,0,0,12,4.75C7.7,4.692,3.4,7.7.813,10.549a2.15,2.15,0,0,0-.007,2.9,21.209,21.209,0,0,0,3.438,3.03.256.256,0,0,0,.326-.029Z"}))}),(0,n.IU)({d:"M11.2857,6.05714 L10.08571,4.85714 L7.85714,7.14786 L7.85714,1 L6.14286,1 L6.14286,7.14786 L3.91429,4.85714 L2.71429,6.05714 L7,10.42857 L11.2857,6.05714 Z M1,11.2857 L1,13 L13,13 L13,11.2857 L1,11.2857 Z",displayName:"DownloadIcon",viewBox:"0 0 14 14"})),o=((0,n.IU)({displayName:"DeleteIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z"}))}),(0,n.IU)({displayName:"RepeatIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M10.319,4.936a7.239,7.239,0,0,1,7.1,2.252,1.25,1.25,0,1,0,1.872-1.657A9.737,9.737,0,0,0,9.743,2.5,10.269,10.269,0,0,0,2.378,9.61a.249.249,0,0,1-.271.178l-1.033-.13A.491.491,0,0,0,.6,9.877a.5.5,0,0,0-.019.526l2.476,4.342a.5.5,0,0,0,.373.248.43.43,0,0,0,.062,0,.5.5,0,0,0,.359-.152l3.477-3.593a.5.5,0,0,0-.3-.844L5.15,10.172a.25.25,0,0,1-.2-.333A7.7,7.7,0,0,1,10.319,4.936Z"}),r.createElement("path",{d:"M23.406,14.1a.5.5,0,0,0,.015-.526l-2.5-4.329A.5.5,0,0,0,20.546,9a.489.489,0,0,0-.421.151l-3.456,3.614a.5.5,0,0,0,.3.842l1.848.221a.249.249,0,0,1,.183.117.253.253,0,0,1,.023.216,7.688,7.688,0,0,1-5.369,4.9,7.243,7.243,0,0,1-7.1-2.253,1.25,1.25,0,1,0-1.872,1.656,9.74,9.74,0,0,0,9.549,3.03,10.261,10.261,0,0,0,7.369-7.12.251.251,0,0,1,.27-.179l1.058.127a.422.422,0,0,0,.06,0A.5.5,0,0,0,23.406,14.1Z"}))})),s=((0,n.IU)({displayName:"RepeatClockIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M12.965,6a1,1,0,0,0-1,1v5.5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2h-3.75a.25.25,0,0,1-.25-.25V7A1,1,0,0,0,12.965,6Z"}),r.createElement("path",{d:"M12.567,1.258A10.822,10.822,0,0,0,2.818,8.4a.25.25,0,0,1-.271.163L.858,8.309a.514.514,0,0,0-.485.213.5.5,0,0,0-.021.53l2.679,4.7a.5.5,0,0,0,.786.107l3.77-3.746a.5.5,0,0,0-.279-.85L5.593,9.007a.25.25,0,0,1-.192-.35,8.259,8.259,0,1,1,7.866,11.59,1.25,1.25,0,0,0,.045,2.5h.047a10.751,10.751,0,1,0-.792-21.487Z"}))}),(0,n.IU)({displayName:"EditIcon",path:r.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},r.createElement("path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}),r.createElement("path",{d:"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"}))}),(0,n.IU)({d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z",displayName:"ChevronLeftIcon"}),(0,n.IU)({d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",displayName:"ChevronRightIcon"})),d=((0,n.IU)({displayName:"ChevronDownIcon",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}),(0,n.IU)({d:"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",displayName:"ChevronUpIcon"}),(0,n.IU)({d:"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",displayName:"ArrowBackIcon"}),(0,n.IU)({d:"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",displayName:"ArrowForwardIcon"}),(0,n.IU)({d:"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z",displayName:"ArrowUpIcon"}),(0,n.IU)({viewBox:"0 0 16 16",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z",displayName:"ArrowUpDownIcon"}),(0,n.IU)({d:"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",displayName:"ArrowDownIcon"}),(0,n.IU)({displayName:"ExternalLinkIcon",path:r.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},r.createElement("path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}),r.createElement("path",{d:"M15 3h6v6"}),r.createElement("path",{d:"M10 14L21 3"}))}),(0,n.IU)({displayName:"LinkIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z"}),r.createElement("path",{d:"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z"}))}),(0,n.IU)({displayName:"PlusSquareIcon",path:r.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"},r.createElement("rect",{height:"18",width:"18",rx:"2",ry:"2",x:"3",y:"3"}),r.createElement("path",{d:"M12 8v8"}),r.createElement("path",{d:"M8 12h8"}))}),(0,n.IU)({displayName:"CalendarIcon",viewBox:"0 0 14 14",d:"M10.8889,5.5 L3.11111,5.5 L3.11111,7.05556 L10.8889,7.05556 L10.8889,5.5 Z M12.4444,1.05556 L11.6667,1.05556 L11.6667,0 L10.1111,0 L10.1111,1.05556 L3.88889,1.05556 L3.88889,0 L2.33333,0 L2.33333,1.05556 L1.55556,1.05556 C0.692222,1.05556 0.00777777,1.75556 0.00777777,2.61111 L0,12.5 C0,13.3556 0.692222,14 1.55556,14 L12.4444,14 C13.3,14 14,13.3556 14,12.5 L14,2.61111 C14,1.75556 13.3,1.05556 12.4444,1.05556 Z M12.4444,12.5 L1.55556,12.5 L1.55556,3.94444 L12.4444,3.94444 L12.4444,12.5 Z M8.55556,8.61111 L3.11111,8.61111 L3.11111,10.1667 L8.55556,10.1667 L8.55556,8.61111 Z"}),(0,n.IU)({d:"M0.913134,0.920639 C1.49851,0.331726 2.29348,0 3.12342,0 L10.8766,0 C11.7065,0 12.5015,0.331725 13.0869,0.920639 C13.6721,1.50939 14,2.30689 14,3.13746 L14,8.12943 C13.9962,8.51443 13.9059,8.97125 13.7629,9.32852 C13.6128,9.683 13.3552,10.0709 13.0869,10.3462 C12.813,10.6163 12.4265,10.8761 12.0734,11.0274 C11.7172,11.1716 11.2607,11.263 10.8766,11.2669 L10.1234,11.2669 L10.1234,12.5676 L10.1209,12.5676 C10.1204,12.793 10.0633,13.0791 9.97807,13.262 C9.8627,13.466 9.61158,13.7198 9.40818,13.8382 L9.40824,13.8383 C9.4077,13.8386 9.40716,13.8388 9.40661,13.8391 C9.40621,13.8393 9.4058,13.8396 9.40539,13.8398 L9.40535,13.8397 C9.22958,13.9254 8.94505,13.9951 8.75059,14 L8.74789,14 C8.35724,13.9963 7.98473,13.8383 7.71035,13.5617 L5.39553,11.2669 L3.12342,11.2669 C2.29348,11.2669 1.49851,10.9352 0.913134,10.3462 C0.644826,10.0709 0.387187,9.683 0.23711,9.32852 C0.0941235,8.97125 0.00379528,8.51443 0,8.12943 L0,3.13746 C0,2.30689 0.327915,1.50939 0.913134,0.920639 Z M3.12342,1.59494 C2.71959,1.59494 2.33133,1.75628 2.04431,2.04503 C1.75713,2.33395 1.59494,2.72681 1.59494,3.13746 L1.59494,8.12943 C1.59114,8.35901 1.62114,8.51076 1.71193,8.72129 C1.79563,8.9346 1.88065,9.06264 2.04431,9.22185 C2.33133,9.5106 2.71959,9.67195 3.12342,9.67195 L5.72383,9.67195 C5.93413,9.67195 6.13592,9.75502 6.28527,9.90308 L8.52848,12.1269 L8.52848,10.4694 C8.52848,10.029 8.88552,9.67195 9.32595,9.67195 L10.8766,9.67195 C11.1034,9.67583 11.2517,9.64614 11.4599,9.55518 C11.6712,9.47132 11.7976,9.38635 11.9557,9.22185 C12.1193,9.06264 12.2044,8.9346 12.2881,8.72129 C12.3789,8.51076 12.4089,8.35901 12.4051,8.12943 L12.4051,3.13746 C12.4051,2.72681 12.2429,2.33394 11.9557,2.04503 C11.6687,1.75628 11.2804,1.59494 10.8766,1.59494 L3.12342,1.59494 Z",displayName:"ChatIcon",viewBox:"0 0 14 14"}),(0,n.IU)({displayName:"TimeIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z"}),r.createElement("path",{d:"M17.134,15.81,12.5,11.561V6.5a1,1,0,0,0-2,0V12a1,1,0,0,0,.324.738l4.959,4.545a1.01,1.01,0,0,0,1.413-.061A1,1,0,0,0,17.134,15.81Z"}))}),(0,n.IU)({displayName:"ArrowRightIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M13.584,12a2.643,2.643,0,0,1-.775,1.875L3.268,23.416a1.768,1.768,0,0,1-2.5-2.5l8.739-8.739a.25.25,0,0,0,0-.354L.768,3.084a1.768,1.768,0,0,1,2.5-2.5l9.541,9.541A2.643,2.643,0,0,1,13.584,12Z"}),r.createElement("path",{d:"M23.75,12a2.643,2.643,0,0,1-.775,1.875l-9.541,9.541a1.768,1.768,0,0,1-2.5-2.5l8.739-8.739a.25.25,0,0,0,0-.354L10.934,3.084a1.768,1.768,0,0,1,2.5-2.5l9.541,9.541A2.643,2.643,0,0,1,23.75,12Z"}))}),(0,n.IU)({displayName:"ArrowLeftIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M10.416,12a2.643,2.643,0,0,1,.775-1.875L20.732.584a1.768,1.768,0,0,1,2.5,2.5l-8.739,8.739a.25.25,0,0,0,0,.354l8.739,8.739a1.768,1.768,0,0,1-2.5,2.5l-9.541-9.541A2.643,2.643,0,0,1,10.416,12Z"}),r.createElement("path",{d:"M.25,12a2.643,2.643,0,0,1,.775-1.875L10.566.584a1.768,1.768,0,0,1,2.5,2.5L4.327,11.823a.25.25,0,0,0,0,.354l8.739,8.739a1.768,1.768,0,0,1-2.5,2.5L1.025,13.875A2.643,2.643,0,0,1,.25,12Z"}))}),(0,n.IU)({displayName:"AtSignIcon",d:"M12,.5A11.634,11.634,0,0,0,.262,12,11.634,11.634,0,0,0,12,23.5a11.836,11.836,0,0,0,6.624-2,1.25,1.25,0,1,0-1.393-2.076A9.34,9.34,0,0,1,12,21a9.132,9.132,0,0,1-9.238-9A9.132,9.132,0,0,1,12,3a9.132,9.132,0,0,1,9.238,9v.891a1.943,1.943,0,0,1-3.884,0V12A5.355,5.355,0,1,0,12,17.261a5.376,5.376,0,0,0,3.861-1.634,4.438,4.438,0,0,0,7.877-2.736V12A11.634,11.634,0,0,0,12,.5Zm0,14.261A2.763,2.763,0,1,1,14.854,12,2.812,2.812,0,0,1,12,14.761Z"})),m=((0,n.IU)({displayName:"AttachmentIcon",d:"M21.843,3.455a6.961,6.961,0,0,0-9.846,0L1.619,13.832a5.128,5.128,0,0,0,7.252,7.252L17.3,12.653A3.293,3.293,0,1,0,12.646,8L7.457,13.184A1,1,0,1,0,8.871,14.6L14.06,9.409a1.294,1.294,0,0,1,1.829,1.83L7.457,19.67a3.128,3.128,0,0,1-4.424-4.424L13.411,4.869a4.962,4.962,0,1,1,7.018,7.018L12.646,19.67a1,1,0,1,0,1.414,1.414L21.843,13.3a6.96,6.96,0,0,0,0-9.846Z"}),(0,n.IU)({displayName:"UpDownIcon",viewBox:"-1 -1 9 11",d:"M 3.5 0L 3.98809 -0.569442L 3.5 -0.987808L 3.01191 -0.569442L 3.5 0ZM 3.5 9L 3.01191 9.56944L 3.5 9.98781L 3.98809 9.56944L 3.5 9ZM 0.488094 3.56944L 3.98809 0.569442L 3.01191 -0.569442L -0.488094 2.43056L 0.488094 3.56944ZM 3.01191 0.569442L 6.51191 3.56944L 7.48809 2.43056L 3.98809 -0.569442L 3.01191 0.569442ZM -0.488094 6.56944L 3.01191 9.56944L 3.98809 8.43056L 0.488094 5.43056L -0.488094 6.56944ZM 3.98809 9.56944L 7.48809 6.56944L 6.51191 5.43056L 3.01191 8.43056L 3.98809 9.56944Z"}),(0,n.IU)({d:"M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z",displayName:"StarIcon"}),(0,n.IU)({displayName:"EmailIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("path",{d:"M11.114,14.556a1.252,1.252,0,0,0,1.768,0L22.568,4.87a.5.5,0,0,0-.281-.849A1.966,1.966,0,0,0,22,4H2a1.966,1.966,0,0,0-.289.021.5.5,0,0,0-.281.849Z"}),r.createElement("path",{d:"M23.888,5.832a.182.182,0,0,0-.2.039l-6.2,6.2a.251.251,0,0,0,0,.354l5.043,5.043a.75.75,0,1,1-1.06,1.061l-5.043-5.043a.25.25,0,0,0-.354,0l-2.129,2.129a2.75,2.75,0,0,1-3.888,0L7.926,13.488a.251.251,0,0,0-.354,0L2.529,18.531a.75.75,0,0,1-1.06-1.061l5.043-5.043a.251.251,0,0,0,0-.354l-6.2-6.2a.18.18,0,0,0-.2-.039A.182.182,0,0,0,0,6V18a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V6A.181.181,0,0,0,23.888,5.832Z"}))}),(0,n.IU)({d:"M2.20731,0.0127209 C2.1105,-0.0066419 1.99432,-0.00664663 1.91687,0.032079 C0.871279,0.438698 0.212942,1.92964 0.0580392,2.95587 C-0.426031,6.28627 2.20731,9.17133 4.62766,11.0689 C6.77694,12.7534 10.9012,15.5223 13.3409,12.8503 C13.6507,12.5211 14.0186,12.037 13.9993,11.553 C13.9412,10.7397 13.186,10.1588 12.6051,9.71349 C12.1598,9.38432 11.2304,8.47427 10.6495,8.49363 C10.1267,8.51299 9.79754,9.05515 9.46837,9.38432 L8.88748,9.96521 C8.79067,10.062 7.55145,9.24878 7.41591,9.15197 C6.91248,8.8228 6.4284,8.45491 6.00242,8.04829 C5.57644,7.64167 5.18919,7.19632 4.86002,6.73161 C4.7632,6.59607 3.96933,5.41495 4.04678,5.31813 C4.04678,5.31813 4.72448,4.58234 4.91811,4.2919 C5.32473,3.67229 5.63453,3.18822 5.16982,2.45243 C4.99556,2.18135 4.78257,1.96836 4.55021,1.73601 C4.14359,1.34875 3.73698,0.942131 3.27227,0.612963 C3.02055,0.419335 2.59457,0.0708094 2.20731,0.0127209 Z",displayName:"PhoneIcon",viewBox:"0 0 14 14"}),(0,n.IU)({viewBox:"0 0 10 10",d:"M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z",displayName:"DragHandleIcon"}),(0,n.IU)({displayName:"SpinnerIcon",path:r.createElement(r.Fragment,null,r.createElement("defs",null,r.createElement("linearGradient",{x1:"28.154%",y1:"63.74%",x2:"74.629%",y2:"17.783%",id:"a"},r.createElement("stop",{stopColor:"currentColor",offset:"0%"}),r.createElement("stop",{stopColor:"#fff",stopOpacity:"0",offset:"100%"}))),r.createElement("g",{transform:"translate(2)",fill:"none"},r.createElement("circle",{stroke:"url(#a)",strokeWidth:"4",cx:"10",cy:"12",r:"10"}),r.createElement("path",{d:"M10 2C4.477 2 0 6.477 0 12",stroke:"currentColor",strokeWidth:"4"}),r.createElement("rect",{fill:"currentColor",x:"8",width:"4",height:"4",rx:"8"})))}),(0,n.IU)({displayName:"CloseIcon",d:"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"})),p=((0,n.IU)({displayName:"SmallCloseIcon",viewBox:"0 0 16 16",path:r.createElement("path",{d:"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z",fillRule:"evenodd",fill:"currentColor"})}),(0,n.IU)({d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z",displayName:"NotAllowedIcon"}),(0,n.IU)({d:"M21,5H3C2.621,5,2.275,5.214,2.105,5.553C1.937,5.892,1.973,6.297,2.2,6.6l9,12 c0.188,0.252,0.485,0.4,0.8,0.4s0.611-0.148,0.8-0.4l9-12c0.228-0.303,0.264-0.708,0.095-1.047C21.725,5.214,21.379,5,21,5z",displayName:"TriangleDownIcon"}),(0,n.IU)({d:"M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z",displayName:"TriangleUpIcon"}),(0,n.IU)({displayName:"InfoOutlineIcon",path:r.createElement("g",{fill:"currentColor",stroke:"currentColor",strokeLinecap:"square",strokeWidth:"2"},r.createElement("circle",{cx:"12",cy:"12",fill:"none",r:"11",stroke:"currentColor"}),r.createElement("line",{fill:"none",x1:"11.959",x2:"11.959",y1:"11",y2:"17"}),r.createElement("circle",{cx:"11.959",cy:"7",r:"1",stroke:"none"}))}),(0,n.IU)({displayName:"BellIcon",d:"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"}),(0,n.IU)({d:"M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"})),u=((0,n.IU)({d:"M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z",displayName:"QuestionIcon"}),(0,n.IU)({displayName:"QuestionOutlineIcon",path:r.createElement("g",{stroke:"currentColor",strokeWidth:"1.5"},r.createElement("path",{strokeLinecap:"round",fill:"none",d:"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"}),r.createElement("path",{fill:"none",strokeLinecap:"round",d:"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"}),r.createElement("circle",{fill:"none",strokeMiterlimit:"10",cx:"12",cy:"12",r:"11.25"}))}),(0,n.IU)({d:"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z",displayName:"WarningIcon"}),(0,n.IU)({displayName:"WarningTwoIcon",d:"M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"}),(0,n.IU)({viewBox:"0 0 14 14",path:r.createElement("g",{fill:"currentColor"},r.createElement("polygon",{points:"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"}))})),h=((0,n.IU)({displayName:"MinusIcon",path:r.createElement("g",{fill:"currentColor"},r.createElement("rect",{height:"4",width:"20",x:"2",y:"10"}))}),(0,n.IU)({displayName:"HamburgerIcon",viewBox:"0 0 24 24",d:"M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z"}))},4651:function(e,a,t){"use strict";t.d(a,{Ee:function(){return p}});var n=t(2846),r=t(5031),l=t(7294),c=t(7375);function i(){return(i=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}var s=["htmlWidth","htmlHeight","alt"],d=["fallbackSrc","fallback","src","srcSet","align","fit","loading","ignoreFallback","crossOrigin"],m=l.forwardRef((function(e,a){var t=e.htmlWidth,n=e.htmlHeight,r=e.alt,c=o(e,s);return l.createElement("img",i({width:t,height:n,ref:a,alt:r},c))})),p=(0,n.Gp)((function(e,a){var t=e.fallbackSrc,s=e.fallback,p=e.src,u=e.srcSet,h=e.align,L=e.fit,f=e.loading,C=e.ignoreFallback,I=e.crossOrigin,y=o(e,d),v=null!=f||C||void 0===t&&void 0===s,g=function(e){var a=e.loading,t=e.src,n=e.srcSet,r=e.onLoad,i=e.onError,o=e.crossOrigin,s=e.sizes,d=e.ignoreFallback,m=(0,l.useState)("pending"),p=m[0],u=m[1];(0,l.useEffect)((function(){u(t?"loading":"pending")}),[t]);var h=(0,l.useRef)(),L=(0,l.useCallback)((function(){if(t){f();var e=new Image;e.src=t,o&&(e.crossOrigin=o),n&&(e.srcset=n),s&&(e.sizes=s),a&&(e.loading=a),e.onload=function(e){f(),u("loaded"),null==r||r(e)},e.onerror=function(e){f(),u("failed"),null==i||i(e)},h.current=e}}),[t,o,n,s,r,i,a]),f=function(){h.current&&(h.current.onload=null,h.current.onerror=null,h.current=null)};return(0,c.Gw)((function(){if(!d)return"loading"===p&&L(),function(){f()}}),[p,L,d]),d?"loaded":p}(i({},e,{ignoreFallback:v})),E=i({ref:a,objectFit:L,objectPosition:h},v?y:(0,r.CE)(y,["onError","onLoad"]));return"loaded"!==g?s||l.createElement(n.m$.img,i({as:m,className:"chakra-image__placeholder",src:t},E)):l.createElement(n.m$.img,i({as:m,src:p,srcSet:u,crossOrigin:I,loading:f,className:"chakra-image"},E))}));r.Ts&&(p.displayName="Image")},9609:function(e,a,t){"use strict";t.d(a,{$:function(){return m}});var n=t(917),r=t(2846),l=t(5031),c=t(1358),i=t(7294);function o(){return(o=Object.assign||function(e){for(var a=1;a=0||(r[t]=e[t]);return r}(n,s),g=(0,l.cx)("chakra-spinner",y),E=o({display:"inline-block",borderColor:"currentColor",borderStyle:"solid",borderRadius:"99999px",borderWidth:h,borderBottomColor:I,borderLeftColor:I,animation:d+" "+f+" linear infinite"},t);return i.createElement(r.m$.div,o({ref:a,__css:E,className:g},v),p&&i.createElement(c.TX,null,p))}));l.Ts&&(m.displayName="Spinner")},1358:function(e,a,t){"use strict";t.d(a,{TX:function(){return c}});var n=t(2846),r=t(5031),l={border:"0px",clip:"rect(0px, 0px, 0px, 0px)",height:"1px",width:"1px",margin:"-1px",padding:"0px",overflow:"hidden",whiteSpace:"nowrap",position:"absolute"},c=(0,n.m$)("span",{baseStyle:l});r.Ts&&(c.displayName="VisuallyHidden");var i=(0,n.m$)("input",{baseStyle:l});r.Ts&&(i.displayName="VisuallyHiddenInput")},9008:function(e,a,t){e.exports=t(5443)}}]); \ No newline at end of file diff --git a/_next/static/chunks/919-1e7178a47a665345.js b/_next/static/chunks/919-1e7178a47a665345.js new file mode 100644 index 000000000..adadbfade --- /dev/null +++ b/_next/static/chunks/919-1e7178a47a665345.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[919],{919:function(t,e,n){n.d(e,{u:function(){return Vu}});var r=n(6450);function o(t){if(null==t)return window;if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return t instanceof o(t).Element||t instanceof Element}function a(t){return t instanceof o(t).HTMLElement||t instanceof HTMLElement}function s(t){return"undefined"!==typeof ShadowRoot&&(t instanceof o(t).ShadowRoot||t instanceof ShadowRoot)}var u=Math.max,l=Math.min,c=Math.round;function f(t,e){void 0===e&&(e=!1);var n=t.getBoundingClientRect(),r=1,o=1;if(a(t)&&e){var i=t.offsetHeight,s=t.offsetWidth;s>0&&(r=c(n.width)/s||1),i>0&&(o=c(n.height)/i||1)}return{width:n.width/r,height:n.height/o,top:n.top/o,right:n.right/r,bottom:n.bottom/o,left:n.left/r,x:n.left/r,y:n.top/o}}function d(t){var e=o(t);return{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function p(t){return t?(t.nodeName||"").toLowerCase():null}function v(t){return((i(t)?t.ownerDocument:t.document)||window.document).documentElement}function h(t){return f(v(t)).left+d(t).scrollLeft}function m(t){return o(t).getComputedStyle(t)}function g(t){var e=m(t),n=e.overflow,r=e.overflowX,o=e.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function y(t,e,n){void 0===n&&(n=!1);var r=a(e),i=a(e)&&function(t){var e=t.getBoundingClientRect(),n=c(e.width)/t.offsetWidth||1,r=c(e.height)/t.offsetHeight||1;return 1!==n||1!==r}(e),s=v(e),u=f(t,i),l={scrollLeft:0,scrollTop:0},m={x:0,y:0};return(r||!r&&!n)&&(("body"!==p(e)||g(s))&&(l=function(t){return t!==o(t)&&a(t)?{scrollLeft:(e=t).scrollLeft,scrollTop:e.scrollTop}:d(t);var e}(e)),a(e)?((m=f(e,!0)).x+=e.clientLeft,m.y+=e.clientTop):s&&(m.x=h(s))),{x:u.left+l.scrollLeft-m.x,y:u.top+l.scrollTop-m.y,width:u.width,height:u.height}}function b(t){var e=f(t),n=t.offsetWidth,r=t.offsetHeight;return Math.abs(e.width-n)<=1&&(n=e.width),Math.abs(e.height-r)<=1&&(r=e.height),{x:t.offsetLeft,y:t.offsetTop,width:n,height:r}}function x(t){return"html"===p(t)?t:t.assignedSlot||t.parentNode||(s(t)?t.host:null)||v(t)}function w(t){return["html","body","#document"].indexOf(p(t))>=0?t.ownerDocument.body:a(t)&&g(t)?t:w(x(t))}function E(t,e){var n;void 0===e&&(e=[]);var r=w(t),i=r===(null==(n=t.ownerDocument)?void 0:n.body),a=o(r),s=i?[a].concat(a.visualViewport||[],g(r)?r:[]):r,u=e.concat(s);return i?u:u.concat(E(x(s)))}function P(t){return["table","td","th"].indexOf(p(t))>=0}function O(t){return a(t)&&"fixed"!==m(t).position?t.offsetParent:null}function A(t){for(var e=o(t),n=O(t);n&&P(n)&&"static"===m(n).position;)n=O(n);return n&&("html"===p(n)||"body"===p(n)&&"static"===m(n).position)?e:n||function(t){var e=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&a(t)&&"fixed"===m(t).position)return null;for(var n=x(t);a(n)&&["html","body"].indexOf(p(n))<0;){var r=m(n);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||e&&"filter"===r.willChange||e&&r.filter&&"none"!==r.filter)return n;n=n.parentNode}return null}(t)||e}var S="top",T="bottom",C="right",V="left",R="auto",k=[S,T,C,V],M="start",D="end",j="viewport",L="popper",F=k.reduce((function(t,e){return t.concat([e+"-"+M,e+"-"+D])}),[]),B=[].concat(k,[R]).reduce((function(t,e){return t.concat([e,e+"-"+M,e+"-"+D])}),[]),I=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function U(t){var e=new Map,n=new Set,r=[];function o(t){n.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!n.has(t)){var r=e.get(t);r&&o(r)}})),r.push(t)}return t.forEach((function(t){e.set(t.name,t)})),t.forEach((function(t){n.has(t.name)||o(t)})),r}function z(t){var e;return function(){return e||(e=new Promise((function(n){Promise.resolve().then((function(){e=void 0,n(t())}))}))),e}}var N={placement:"bottom",modifiers:[],strategy:"absolute"};function W(){for(var t=arguments.length,e=new Array(t),n=0;n=0?"x":"y"}function G(t){var e,n=t.reference,r=t.element,o=t.placement,i=o?Y(o):null,a=o?X(o):null,s=n.x+n.width/2-r.width/2,u=n.y+n.height/2-r.height/2;switch(i){case S:e={x:s,y:n.y-r.height};break;case T:e={x:s,y:n.y+n.height};break;case C:e={x:n.x+n.width,y:u};break;case V:e={x:n.x-r.width,y:u};break;default:e={x:n.x,y:n.y}}var l=i?_(i):null;if(null!=l){var c="y"===l?"height":"width";switch(a){case M:e[l]=e[l]-(n[c]/2-r[c]/2);break;case D:e[l]=e[l]+(n[c]/2-r[c]/2)}}return e}var $={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Z(t){var e,n=t.popper,r=t.popperRect,i=t.placement,a=t.variation,s=t.offsets,u=t.position,l=t.gpuAcceleration,f=t.adaptive,d=t.roundOffsets,p=t.isFixed,h=!0===d?function(t){var e=t.x,n=t.y,r=window.devicePixelRatio||1;return{x:c(e*r)/r||0,y:c(n*r)/r||0}}(s):"function"===typeof d?d(s):s,g=h.x,y=void 0===g?0:g,b=h.y,x=void 0===b?0:b,w=s.hasOwnProperty("x"),E=s.hasOwnProperty("y"),P=V,O=S,R=window;if(f){var k=A(n),M="clientHeight",j="clientWidth";if(k===o(n)&&"static"!==m(k=v(n)).position&&"absolute"===u&&(M="scrollHeight",j="scrollWidth"),k=k,i===S||(i===V||i===C)&&a===D)O=T,x-=(p&&R.visualViewport?R.visualViewport.height:k[M])-r.height,x*=l?1:-1;if(i===V||(i===S||i===T)&&a===D)P=C,y-=(p&&R.visualViewport?R.visualViewport.width:k[j])-r.width,y*=l?1:-1}var L,F=Object.assign({position:u},f&&$);return l?Object.assign({},F,((L={})[O]=E?"0":"",L[P]=w?"0":"",L.transform=(R.devicePixelRatio||1)<=1?"translate("+y+"px, "+x+"px)":"translate3d("+y+"px, "+x+"px, 0)",L)):Object.assign({},F,((e={})[O]=E?x+"px":"",e[P]=w?y+"px":"",e.transform="",e))}var K={left:"right",right:"left",bottom:"top",top:"bottom"};function J(t){return t.replace(/left|right|bottom|top/g,(function(t){return K[t]}))}var Q={start:"end",end:"start"};function tt(t){return t.replace(/start|end/g,(function(t){return Q[t]}))}function et(t,e){var n=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(n&&s(n)){var r=e;do{if(r&&t.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function nt(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function rt(t,e){return e===j?nt(function(t){var e=o(t),n=v(t),r=e.visualViewport,i=n.clientWidth,a=n.clientHeight,s=0,u=0;return r&&(i=r.width,a=r.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(s=r.offsetLeft,u=r.offsetTop)),{width:i,height:a,x:s+h(t),y:u}}(t)):i(e)?function(t){var e=f(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(e):nt(function(t){var e,n=v(t),r=d(t),o=null==(e=t.ownerDocument)?void 0:e.body,i=u(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=u(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-r.scrollLeft+h(t),l=-r.scrollTop;return"rtl"===m(o||n).direction&&(s+=u(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:s,y:l}}(v(t)))}function ot(t,e,n){var r="clippingParents"===e?function(t){var e=E(x(t)),n=["absolute","fixed"].indexOf(m(t).position)>=0,r=n&&a(t)?A(t):t;return i(r)?e.filter((function(t){return i(t)&&et(t,r)&&"body"!==p(t)&&(!n||"static"!==m(t).position)})):[]}(t):[].concat(e),o=[].concat(r,[n]),s=o[0],c=o.reduce((function(e,n){var r=rt(t,n);return e.top=u(r.top,e.top),e.right=l(r.right,e.right),e.bottom=l(r.bottom,e.bottom),e.left=u(r.left,e.left),e}),rt(t,s));return c.width=c.right-c.left,c.height=c.bottom-c.top,c.x=c.left,c.y=c.top,c}function it(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function at(t,e){return e.reduce((function(e,n){return e[n]=t,e}),{})}function st(t,e){void 0===e&&(e={});var n=e,r=n.placement,o=void 0===r?t.placement:r,a=n.boundary,s=void 0===a?"clippingParents":a,u=n.rootBoundary,l=void 0===u?j:u,c=n.elementContext,d=void 0===c?L:c,p=n.altBoundary,h=void 0!==p&&p,m=n.padding,g=void 0===m?0:m,y=it("number"!==typeof g?g:at(g,k)),b=d===L?"reference":L,x=t.rects.popper,w=t.elements[h?b:d],E=ot(i(w)?w:w.contextElement||v(t.elements.popper),s,l),P=f(t.elements.reference),O=G({reference:P,element:x,strategy:"absolute",placement:o}),A=nt(Object.assign({},x,O)),V=d===L?A:P,R={top:E.top-V.top+y.top,bottom:V.bottom-E.bottom+y.bottom,left:E.left-V.left+y.left,right:V.right-E.right+y.right},M=t.modifiersData.offset;if(d===L&&M){var D=M[o];Object.keys(R).forEach((function(t){var e=[C,T].indexOf(t)>=0?1:-1,n=[S,T].indexOf(t)>=0?"y":"x";R[t]+=D[n]*e}))}return R}function ut(t,e,n){return u(t,l(e,n))}function lt(t,e,n){return void 0===n&&(n={x:0,y:0}),{top:t.top-e.height-n.y,right:t.right-e.width+n.x,bottom:t.bottom-e.height+n.y,left:t.left-e.width-n.x}}function ct(t){return[S,C,T,V].some((function(e){return t[e]>=0}))}var ft=H({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var e=t.state,n=t.instance,r=t.options,i=r.scroll,a=void 0===i||i,s=r.resize,u=void 0===s||s,l=o(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return a&&c.forEach((function(t){t.addEventListener("scroll",n.update,q)})),u&&l.addEventListener("resize",n.update,q),function(){a&&c.forEach((function(t){t.removeEventListener("scroll",n.update,q)})),u&&l.removeEventListener("resize",n.update,q)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var e=t.state,n=t.name;e.modifiersData[n]=G({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var e=t.state,n=t.options,r=n.gpuAcceleration,o=void 0===r||r,i=n.adaptive,a=void 0===i||i,s=n.roundOffsets,u=void 0===s||s,l={placement:Y(e.placement),variation:X(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o,isFixed:"fixed"===e.options.strategy};null!=e.modifiersData.popperOffsets&&(e.styles.popper=Object.assign({},e.styles.popper,Z(Object.assign({},l,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:u})))),null!=e.modifiersData.arrow&&(e.styles.arrow=Object.assign({},e.styles.arrow,Z(Object.assign({},l,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:u})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var e=t.state;Object.keys(e.elements).forEach((function(t){var n=e.styles[t]||{},r=e.attributes[t]||{},o=e.elements[t];a(o)&&p(o)&&(Object.assign(o.style,n),Object.keys(r).forEach((function(t){var e=r[t];!1===e?o.removeAttribute(t):o.setAttribute(t,!0===e?"":e)})))}))},effect:function(t){var e=t.state,n={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,n.popper),e.styles=n,e.elements.arrow&&Object.assign(e.elements.arrow.style,n.arrow),function(){Object.keys(e.elements).forEach((function(t){var r=e.elements[t],o=e.attributes[t]||{},i=Object.keys(e.styles.hasOwnProperty(t)?e.styles[t]:n[t]).reduce((function(t,e){return t[e]="",t}),{});a(r)&&p(r)&&(Object.assign(r.style,i),Object.keys(o).forEach((function(t){r.removeAttribute(t)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var e=t.state,n=t.options,r=t.name,o=n.offset,i=void 0===o?[0,0]:o,a=B.reduce((function(t,n){return t[n]=function(t,e,n){var r=Y(t),o=[V,S].indexOf(r)>=0?-1:1,i="function"===typeof n?n(Object.assign({},e,{placement:t})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[V,C].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}(n,e.rects,i),t}),{}),s=a[e.placement],u=s.x,l=s.y;null!=e.modifiersData.popperOffsets&&(e.modifiersData.popperOffsets.x+=u,e.modifiersData.popperOffsets.y+=l),e.modifiersData[r]=a}},{name:"flip",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,r=t.name;if(!e.modifiersData[r]._skip){for(var o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0===a||a,u=n.fallbackPlacements,l=n.padding,c=n.boundary,f=n.rootBoundary,d=n.altBoundary,p=n.flipVariations,v=void 0===p||p,h=n.allowedAutoPlacements,m=e.options.placement,g=Y(m),y=u||(g===m||!v?[J(m)]:function(t){if(Y(t)===R)return[];var e=J(t);return[tt(t),e,tt(e)]}(m)),b=[m].concat(y).reduce((function(t,n){return t.concat(Y(n)===R?function(t,e){void 0===e&&(e={});var n=e,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,u=n.allowedAutoPlacements,l=void 0===u?B:u,c=X(r),f=c?s?F:F.filter((function(t){return X(t)===c})):k,d=f.filter((function(t){return l.indexOf(t)>=0}));0===d.length&&(d=f);var p=d.reduce((function(e,n){return e[n]=st(t,{placement:n,boundary:o,rootBoundary:i,padding:a})[Y(n)],e}),{});return Object.keys(p).sort((function(t,e){return p[t]-p[e]}))}(e,{placement:n,boundary:c,rootBoundary:f,padding:l,flipVariations:v,allowedAutoPlacements:h}):n)}),[]),x=e.rects.reference,w=e.rects.popper,E=new Map,P=!0,O=b[0],A=0;A=0,U=I?"width":"height",z=st(e,{placement:D,boundary:c,rootBoundary:f,altBoundary:d,padding:l}),N=I?L?C:V:L?T:S;x[U]>w[U]&&(N=J(N));var W=J(N),H=[];if(i&&H.push(z[j]<=0),s&&H.push(z[N]<=0,z[W]<=0),H.every((function(t){return t}))){O=D,P=!1;break}E.set(D,H)}if(P)for(var q=function(t){var e=b.find((function(e){var n=E.get(e);if(n)return n.slice(0,t).every((function(t){return t}))}));if(e)return O=e,"break"},_=v?3:1;_>0;_--){if("break"===q(_))break}e.placement!==O&&(e.modifiersData[r]._skip=!0,e.placement=O,e.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,r=t.name,o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0!==a&&a,c=n.boundary,f=n.rootBoundary,d=n.altBoundary,p=n.padding,v=n.tether,h=void 0===v||v,m=n.tetherOffset,g=void 0===m?0:m,y=st(e,{boundary:c,rootBoundary:f,padding:p,altBoundary:d}),x=Y(e.placement),w=X(e.placement),E=!w,P=_(x),O="x"===P?"y":"x",R=e.modifiersData.popperOffsets,k=e.rects.reference,D=e.rects.popper,j="function"===typeof g?g(Object.assign({},e.rects,{placement:e.placement})):g,L="number"===typeof j?{mainAxis:j,altAxis:j}:Object.assign({mainAxis:0,altAxis:0},j),F=e.modifiersData.offset?e.modifiersData.offset[e.placement]:null,B={x:0,y:0};if(R){if(i){var I,U="y"===P?S:V,z="y"===P?T:C,N="y"===P?"height":"width",W=R[P],H=W+y[U],q=W-y[z],G=h?-D[N]/2:0,$=w===M?k[N]:D[N],Z=w===M?-D[N]:-k[N],K=e.elements.arrow,J=h&&K?b(K):{width:0,height:0},Q=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},tt=Q[U],et=Q[z],nt=ut(0,k[N],J[N]),rt=E?k[N]/2-G-nt-tt-L.mainAxis:$-nt-tt-L.mainAxis,ot=E?-k[N]/2+G+nt+et+L.mainAxis:Z+nt+et+L.mainAxis,it=e.elements.arrow&&A(e.elements.arrow),at=it?"y"===P?it.clientTop||0:it.clientLeft||0:0,lt=null!=(I=null==F?void 0:F[P])?I:0,ct=W+ot-lt,ft=ut(h?l(H,W+rt-lt-at):H,W,h?u(q,ct):q);R[P]=ft,B[P]=ft-W}if(s){var dt,pt="x"===P?S:V,vt="x"===P?T:C,ht=R[O],mt="y"===O?"height":"width",gt=ht+y[pt],yt=ht-y[vt],bt=-1!==[S,V].indexOf(x),xt=null!=(dt=null==F?void 0:F[O])?dt:0,wt=bt?gt:ht-k[mt]-D[mt]-xt+L.altAxis,Et=bt?ht+k[mt]+D[mt]-xt-L.altAxis:yt,Pt=h&&bt?function(t,e,n){var r=ut(t,e,n);return r>n?n:r}(wt,ht,Et):ut(h?wt:gt,ht,h?Et:yt);R[O]=Pt,B[O]=Pt-ht}e.modifiersData[r]=B}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(t){var e,n=t.state,r=t.name,o=t.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=Y(n.placement),u=_(s),l=[V,C].indexOf(s)>=0?"height":"width";if(i&&a){var c=function(t,e){return it("number"!==typeof(t="function"===typeof t?t(Object.assign({},e.rects,{placement:e.placement})):t)?t:at(t,k))}(o.padding,n),f=b(i),d="y"===u?S:V,p="y"===u?T:C,v=n.rects.reference[l]+n.rects.reference[u]-a[u]-n.rects.popper[l],h=a[u]-n.rects.reference[u],m=A(i),g=m?"y"===u?m.clientHeight||0:m.clientWidth||0:0,y=v/2-h/2,x=c[d],w=g-f[l]-c[p],E=g/2-f[l]/2+y,P=ut(x,E,w),O=u;n.modifiersData[r]=((e={})[O]=P,e.centerOffset=P-E,e)}},effect:function(t){var e=t.state,n=t.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!==typeof r||(r=e.elements.popper.querySelector(r)))&&et(e.elements.popper,r)&&(e.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var e=t.state,n=t.name,r=e.rects.reference,o=e.rects.popper,i=e.modifiersData.preventOverflow,a=st(e,{elementContext:"reference"}),s=st(e,{altBoundary:!0}),u=lt(a,r),l=lt(s,o,i),c=ct(u),f=ct(l);e.modifiersData[n]={referenceClippingOffsets:u,popperEscapeOffsets:l,isReferenceHidden:c,hasPopperEscaped:f},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":f})}}]}),dt=n(7294);function pt(){return(pt=Object.assign||function(t){for(var e=1;e=0||(o[n]=t[n]);return o}(n,Ct),{ref:e,"data-popper-arrow":"",style:Rt(t)})}),[]),B=(0,dt.useCallback)((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),pt({},t,{ref:e,"data-popper-arrow-inner":""})}),[]);return{update:function(){var t;null==(t=C.current)||t.update()},forceUpdate:function(){var t;null==(t=C.current)||t.forceUpdate()},transformOrigin:ht.transformOrigin.varRef,referenceRef:M,popperRef:j,getPopperProps:L,getArrowProps:F,getArrowInnerProps:B,getReferenceProps:D}}function Rt(t){var e=t.size,n=t.shadowColor,r=t.bg,o=pt({},t.style,{position:"absolute"});return e&&(o["--popper-arrow-size"]=e),n&&(o["--popper-arrow-shadow-color"]=n),r&&(o["--popper-arrow-bg"]=r),o}var kt=n(6871),Mt=n(2846),Dt=n(5031),jt=n(1358),Lt=function(t,e){return(Lt=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function Ft(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}Lt(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var Bt=function(){return(Bt=Object.assign||function(t){for(var e,n=1,r=arguments.length;n=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function zt(t,e){var n="function"===typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(s){o={error:s}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function Nt(t,e,n){if(n||2===arguments.length)for(var r,o=0,i=e.length;operformance.now():()=>Date.now(),fe="undefined"!==typeof window?t=>window.requestAnimationFrame(t):t=>setTimeout((()=>t(ce())),le);let de=!0,pe=!1,ve=!1;const he={delta:0,timestamp:0},me=["read","update","preRender","render","postRender"],ge=me.reduce(((t,e)=>(t[e]=function(t){let e=[],n=[],r=0,o=!1,i=!1;const a=new WeakSet,s={schedule:(t,i=!1,s=!1)=>{const u=s&&o,l=u?e:n;return i&&a.add(t),-1===l.indexOf(t)&&(l.push(t),u&&o&&(r=e.length)),t},cancel:t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1),a.delete(t)},process:u=>{if(o)i=!0;else{if(o=!0,[e,n]=[n,e],n.length=0,r=e.length,r)for(let n=0;npe=!0)),t)),{}),ye=me.reduce(((t,e)=>{const n=ge[e];return t[e]=(t,e=!1,r=!1)=>(pe||Pe(),n.schedule(t,e,r)),t}),{}),be=me.reduce(((t,e)=>(t[e]=ge[e].cancel,t)),{}),xe=me.reduce(((t,e)=>(t[e]=()=>ge[e].process(he),t)),{}),we=t=>ge[t].process(he),Ee=t=>{pe=!1,he.delta=de?le:Math.max(Math.min(t-he.timestamp,40),1),he.timestamp=t,ve=!0,me.forEach(we),ve=!1,pe&&(de=!1,fe(Ee))},Pe=()=>{pe=!0,de=!0,ve||fe(Ee)},Oe=()=>he;var Ae=ye;const Se=(t,e,n)=>-n*t+n*e+t;function Te(t,e){return e?t*(1e3/e):0}function Ce(t,e){-1===t.indexOf(e)&&t.push(e)}function Ve(t,e){var n=t.indexOf(e);n>-1&&t.splice(n,1)}var Re=function(){function t(){this.subscriptions=[]}return t.prototype.add=function(t){var e=this;return Ce(this.subscriptions,t),function(){return Ve(e.subscriptions,t)}},t.prototype.notify=function(t,e,n){var r=this.subscriptions.length;if(r)if(1===r)this.subscriptions[0](t,e,n);else for(var o=0;oMath.min(Math.max(n,t),e),Le=.001;function Fe({duration:t=800,bounce:e=.25,velocity:n=0,mass:r=1}){let o,i,a=1-e;a=je(.05,1,a),t=je(.01,10,t/1e3),a<1?(o=e=>{const r=e*a,o=r*t,i=r-n,s=Be(e,a),u=Math.exp(-o);return Le-i/s*u},i=e=>{const r=e*a*t,i=r*n+n,s=Math.pow(a,2)*Math.pow(e,2)*t,u=Math.exp(-r),l=Be(Math.pow(e,2),a);return(-o(e)+Le>0?-1:1)*((i-s)*u)/l}):(o=e=>Math.exp(-e*t)*((e-n)*t+1)-.001,i=e=>Math.exp(-e*t)*(t*t*(n-e)));const s=function(t,e,n){let r=n;for(let o=1;o<12;o++)r-=t(r)/e(r);return r}(o,i,5/t);if(t*=1e3,isNaN(s))return{stiffness:100,damping:10,duration:t};{const e=Math.pow(s,2)*r;return{stiffness:e,damping:2*a*Math.sqrt(r*e),duration:t}}}function Be(t,e){return t*Math.sqrt(1-e*e)}const Ie=["duration","bounce"],Ue=["stiffness","damping","mass"];function ze(t,e){return e.some((e=>void 0!==t[e]))}function Ne(t){var{from:e=0,to:n=1,restSpeed:r=2,restDelta:o}=t,i=It(t,["from","to","restSpeed","restDelta"]);const a={done:!1,value:e};let{stiffness:s,damping:u,mass:l,velocity:c,duration:f,isResolvedFromDuration:d}=function(t){let e=Object.assign({velocity:0,stiffness:100,damping:10,mass:1,isResolvedFromDuration:!1},t);if(!ze(t,Ue)&&ze(t,Ie)){const n=Fe(t);e=Object.assign(Object.assign(Object.assign({},e),n),{velocity:0,mass:1}),e.isResolvedFromDuration=!0}return e}(i),p=We,v=We;function h(){const t=c?-c/1e3:0,r=n-e,i=u/(2*Math.sqrt(s*l)),a=Math.sqrt(s/l)/1e3;if(void 0===o&&(o=Math.min(Math.abs(n-e)/100,.4)),i<1){const e=Be(a,i);p=o=>{const s=Math.exp(-i*a*o);return n-s*((t+i*a*r)/e*Math.sin(e*o)+r*Math.cos(e*o))},v=n=>{const o=Math.exp(-i*a*n);return i*a*o*(Math.sin(e*n)*(t+i*a*r)/e+r*Math.cos(e*n))-o*(Math.cos(e*n)*(t+i*a*r)-e*r*Math.sin(e*n))}}else if(1===i)p=e=>n-Math.exp(-a*e)*(r+(t+a*r)*e);else{const e=a*Math.sqrt(i*i-1);p=o=>{const s=Math.exp(-i*a*o),u=Math.min(e*o,300);return n-s*((t+i*a*r)*Math.sinh(u)+e*r*Math.cosh(u))/e}}}return h(),{next:t=>{const e=p(t);if(d)a.done=t>=f;else{const i=1e3*v(t),s=Math.abs(i)<=r,u=Math.abs(n-e)<=o;a.done=s&&u}return a.value=a.done?n:e,a},flipTarget:()=>{c=-c,[e,n]=[n,e],h()}}}Ne.needsInterpolation=(t,e)=>"string"===typeof t||"string"===typeof e;const We=t=>0,He=(t,e,n)=>{const r=e-t;return 0===r?1:(n-t)/r},qe=(t,e)=>n=>Math.max(Math.min(n,e),t),Ye=t=>t%1?Number(t.toFixed(5)):t,Xe=/(-)?([\d]*\.?[\d])+/g,_e=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,Ge=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function $e(t){return"string"===typeof t}const Ze={test:t=>"number"===typeof t,parse:parseFloat,transform:t=>t},Ke=Object.assign(Object.assign({},Ze),{transform:qe(0,1)}),Je=Object.assign(Object.assign({},Ze),{default:1}),Qe=(t,e)=>n=>Boolean($e(n)&&Ge.test(n)&&n.startsWith(t)||e&&Object.prototype.hasOwnProperty.call(n,e)),tn=(t,e,n)=>r=>{if(!$e(r))return r;const[o,i,a,s]=r.match(Xe);return{[t]:parseFloat(o),[e]:parseFloat(i),[n]:parseFloat(a),alpha:void 0!==s?parseFloat(s):1}},en=qe(0,255),nn=Object.assign(Object.assign({},Ze),{transform:t=>Math.round(en(t))}),rn={test:Qe("rgb","red"),parse:tn("red","green","blue"),transform:({red:t,green:e,blue:n,alpha:r=1})=>"rgba("+nn.transform(t)+", "+nn.transform(e)+", "+nn.transform(n)+", "+Ye(Ke.transform(r))+")"};const on={test:Qe("#"),parse:function(t){let e="",n="",r="",o="";return t.length>5?(e=t.substr(1,2),n=t.substr(3,2),r=t.substr(5,2),o=t.substr(7,2)):(e=t.substr(1,1),n=t.substr(2,1),r=t.substr(3,1),o=t.substr(4,1),e+=e,n+=n,r+=r,o+=o),{red:parseInt(e,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:o?parseInt(o,16)/255:1}},transform:rn.transform},an=t=>({test:e=>$e(e)&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}),sn=an("deg"),un=an("%"),ln=an("px"),cn=an("vh"),fn=an("vw"),dn=Object.assign(Object.assign({},un),{parse:t=>un.parse(t)/100,transform:t=>un.transform(100*t)}),pn={test:Qe("hsl","hue"),parse:tn("hue","saturation","lightness"),transform:({hue:t,saturation:e,lightness:n,alpha:r=1})=>"hsla("+Math.round(t)+", "+un.transform(Ye(e))+", "+un.transform(Ye(n))+", "+Ye(Ke.transform(r))+")"};function vn(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function hn({hue:t,saturation:e,lightness:n,alpha:r}){t/=360,n/=100;let o=0,i=0,a=0;if(e/=100){const r=n<.5?n*(1+e):n+e-n*e,s=2*n-r;o=vn(s,r,t+1/3),i=vn(s,r,t),a=vn(s,r,t-1/3)}else o=i=a=n;return{red:Math.round(255*o),green:Math.round(255*i),blue:Math.round(255*a),alpha:r}}const mn=(t,e,n)=>{const r=t*t,o=e*e;return Math.sqrt(Math.max(0,n*(o-r)+r))},gn=[on,rn,pn],yn=t=>gn.find((e=>e.test(t))),bn=t=>`'${t}' is not an animatable color. Use the equivalent color code instead.`,xn=(t,e)=>{let n=yn(t),r=yn(e);bn(t),bn(e);let o=n.parse(t),i=r.parse(e);n===pn&&(o=hn(o),n=rn),r===pn&&(i=hn(i),r=rn);const a=Object.assign({},o);return t=>{for(const e in a)"alpha"!==e&&(a[e]=mn(o[e],i[e],t));return a.alpha=Se(o.alpha,i.alpha,t),n.transform(a)}},wn={test:t=>rn.test(t)||on.test(t)||pn.test(t),parse:t=>rn.test(t)?rn.parse(t):pn.test(t)?pn.parse(t):on.parse(t),transform:t=>$e(t)?t:t.hasOwnProperty("red")?rn.transform(t):pn.transform(t)},En="${c}",Pn="${n}";function On(t){"number"===typeof t&&(t=`${t}`);const e=[];let n=0;const r=t.match(_e);r&&(n=r.length,t=t.replace(_e,En),e.push(...r.map(wn.parse)));const o=t.match(Xe);return o&&(t=t.replace(Xe,Pn),e.push(...o.map(Ze.parse))),{values:e,numColors:n,tokenised:t}}function An(t){return On(t).values}function Sn(t){const{values:e,numColors:n,tokenised:r}=On(t),o=e.length;return t=>{let e=r;for(let r=0;r"number"===typeof t?0:t;const Cn={test:function(t){var e,n,r,o;return isNaN(t)&&$e(t)&&(null!==(n=null===(e=t.match(Xe))||void 0===e?void 0:e.length)&&void 0!==n?n:0)+(null!==(o=null===(r=t.match(_e))||void 0===r?void 0:r.length)&&void 0!==o?o:0)>0},parse:An,createTransformer:Sn,getAnimatableNone:function(t){const e=An(t);return Sn(t)(e.map(Tn))}},Vn=t=>"number"===typeof t,Rn=(t,e)=>n=>e(t(n)),kn=(...t)=>t.reduce(Rn);function Mn(t,e){return Vn(t)?n=>Se(t,e,n):wn.test(t)?xn(t,e):Fn(t,e)}const Dn=(t,e)=>{const n=[...t],r=n.length,o=t.map(((t,n)=>Mn(t,e[n])));return t=>{for(let e=0;e{const n=Object.assign(Object.assign({},t),e),r={};for(const o in n)void 0!==t[o]&&void 0!==e[o]&&(r[o]=Mn(t[o],e[o]));return t=>{for(const e in r)n[e]=r[e](t);return n}};function Ln(t){const e=Cn.parse(t),n=e.length;let r=0,o=0,i=0;for(let a=0;a{const n=Cn.createTransformer(e),r=Ln(t),o=Ln(e);return r.numHSL===o.numHSL&&r.numRGB===o.numRGB&&r.numNumbers>=o.numNumbers?kn(Dn(r.parsed,o.parsed),n):n=>`${n>0?e:t}`},Bn=(t,e)=>n=>Se(t,e,n);function In(t,e,n){const r=[],o=n||("number"===typeof(i=t[0])?Bn:"string"===typeof i?wn.test(i)?xn:Fn:Array.isArray(i)?Dn:"object"===typeof i?jn:void 0);var i;const a=t.length-1;for(let s=0;st[i-1]&&(t=[].concat(t),e=[].concat(e),t.reverse(),e.reverse());const a=In(e,r,o),s=2===i?function([t,e],[n]){return r=>n(He(t,e,r))}(t,a):function(t,e){const n=t.length,r=n-1;return o=>{let i=0,a=!1;if(o<=t[0]?a=!0:o>=t[r]&&(i=r-1,a=!0),!a){let e=1;for(;eo||e===r);e++);i=e-1}const s=He(t[i],t[i+1],o);return e[i](s)}}(t,a);return n?e=>s(je(t[0],t[i-1],e)):s}const zn=t=>e=>1-t(1-e),Nn=t=>e=>e<=.5?t(2*e)/2:(2-t(2*(1-e)))/2,Wn=t=>e=>e*e*((t+1)*e-t),Hn=t=>t,qn=(Yn=2,t=>Math.pow(t,Yn));var Yn;const Xn=zn(qn),_n=Nn(qn),Gn=t=>1-Math.sin(Math.acos(t)),$n=zn(Gn),Zn=Nn($n),Kn=Wn(1.525),Jn=zn(Kn),Qn=Nn(Kn),tr=(t=>{const e=Wn(t);return t=>(t*=2)<1?.5*e(t):.5*(2-Math.pow(2,-10*(t-1)))})(1.525),er=t=>{if(1===t||0===t)return t;const e=t*t;return t<.36363636363636365?7.5625*e:t<.7272727272727273?9.075*e-9.9*t+3.4:t<.9?12.066481994459833*e-19.63545706371191*t+8.898060941828255:10.8*t*t-20.52*t+10.72},nr=zn(er);function rr(t,e){return t.map((()=>e||_n)).splice(0,t.length-1)}function or({from:t=0,to:e=1,ease:n,offset:r,duration:o=300}){const i={done:!1,value:t},a=Array.isArray(e)?e:[t,e],s=function(t,e){return t.map((t=>t*e))}(r&&r.length===a.length?r:function(t){const e=t.length;return t.map(((t,n)=>0!==n?n/(e-1):0))}(a),o);function u(){return Un(s,a,{ease:Array.isArray(n)?n:rr(a,n)})}let l=u();return{next:t=>(i.value=l(t),i.done=t>=o,i),flipTarget:()=>{a.reverse(),l=u()}}}const ir={keyframes:or,spring:Ne,decay:function({velocity:t=0,from:e=0,power:n=.8,timeConstant:r=350,restDelta:o=.5,modifyTarget:i}){const a={done:!1,value:e};let s=n*t;const u=e+s,l=void 0===i?u:i(u);return l!==u&&(s=l-e),{next:t=>{const e=-s*Math.exp(-t/r);return a.done=!(e>o||e<-o),a.value=a.done?l:l+e,a},flipTarget:()=>{}}}};const ar=1/60*1e3,sr="undefined"!==typeof performance?()=>performance.now():()=>Date.now(),ur="undefined"!==typeof window?t=>window.requestAnimationFrame(t):t=>setTimeout((()=>t(sr())),ar);let lr=!0,cr=!1,fr=!1;const dr={delta:0,timestamp:0},pr=["read","update","preRender","render","postRender"],vr=pr.reduce(((t,e)=>(t[e]=function(t){let e=[],n=[],r=0,o=!1,i=!1;const a=new WeakSet,s={schedule:(t,i=!1,s=!1)=>{const u=s&&o,l=u?e:n;return i&&a.add(t),-1===l.indexOf(t)&&(l.push(t),u&&o&&(r=e.length)),t},cancel:t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1),a.delete(t)},process:u=>{if(o)i=!0;else{if(o=!0,[e,n]=[n,e],n.length=0,r=e.length,r)for(let n=0;ncr=!0)),t)),{}),hr=pr.reduce(((t,e)=>{const n=vr[e];return t[e]=(t,e=!1,r=!1)=>(cr||br(),n.schedule(t,e,r)),t}),{}),mr=pr.reduce(((t,e)=>(t[e]=vr[e].cancel,t)),{}),gr=(pr.reduce(((t,e)=>(t[e]=()=>vr[e].process(dr),t)),{}),t=>vr[t].process(dr)),yr=t=>{cr=!1,dr.delta=lr?ar:Math.max(Math.min(t-dr.timestamp,40),1),dr.timestamp=t,fr=!0,pr.forEach(gr),fr=!1,cr&&(lr=!1,ur(yr))},br=()=>{cr=!0,lr=!0,fr||ur(yr)};var xr=hr;function wr(t,e,n=0){return t-e-n}const Er=t=>{const e=({delta:e})=>t(e);return{start:()=>xr.update(e,!0),stop:()=>mr.update(e)}};function Pr(t){var e,n,{from:r,autoplay:o=!0,driver:i=Er,elapsed:a=0,repeat:s=0,repeatType:u="loop",repeatDelay:l=0,onPlay:c,onStop:f,onComplete:d,onRepeat:p,onUpdate:v}=t,h=It(t,["from","autoplay","driver","elapsed","repeat","repeatType","repeatDelay","onPlay","onStop","onComplete","onRepeat","onUpdate"]);let m,g,y,{to:b}=h,x=0,w=h.duration,E=!1,P=!0;const O=function(t){if(Array.isArray(t.to))return or;if(ir[t.type])return ir[t.type];const e=new Set(Object.keys(t));return e.has("ease")||e.has("duration")&&!e.has("dampingRatio")?or:e.has("dampingRatio")||e.has("stiffness")||e.has("mass")||e.has("damping")||e.has("restSpeed")||e.has("restDelta")?Ne:or}(h);(null===(n=(e=O).needsInterpolation)||void 0===n?void 0:n.call(e,r,b))&&(y=Un([0,100],[r,b],{clamp:!1}),r=0,b=100);const A=O(Object.assign(Object.assign({},h),{from:r,to:b}));function S(){x++,"reverse"===u?(P=x%2===0,a=function(t,e,n=0,r=!0){return r?wr(e+-t,e,n):e-(t-e)+n}(a,w,l,P)):(a=wr(a,w,l),"mirror"===u&&A.flipTarget()),E=!1,p&&p()}function T(t){if(P||(t=-t),a+=t,!E){const t=A.next(Math.max(0,a));g=t.value,y&&(g=y(g)),E=P?t.done:a<=0}null===v||void 0===v||v(g),E&&(0===x&&(null!==w&&void 0!==w||(w=a)),x=e+n:t<=-n}(a,w,l,P)&&S():(m.stop(),d&&d()))}return o&&(null===c||void 0===c||c(),m=i(T),m.start()),{stop:()=>{null===f||void 0===f||f(),m.stop()}}}function Or({from:t=0,velocity:e=0,min:n,max:r,power:o=.8,timeConstant:i=750,bounceStiffness:a=500,bounceDamping:s=10,restDelta:u=1,modifyTarget:l,driver:c,onUpdate:f,onComplete:d,onStop:p}){let v;function h(t){return void 0!==n&&tr}function m(t){return void 0===n?r:void 0===r||Math.abs(n-t){var n;null===f||void 0===f||f(e),null===(n=t.onUpdate)||void 0===n||n.call(t,e)},onComplete:d,onStop:p}))}function y(t){g(Object.assign({type:"spring",stiffness:a,damping:s,restDelta:u},t))}if(h(t))y({from:t,velocity:e,to:m(t)});else{let r=o*e+t;"undefined"!==typeof l&&(r=l(r));const a=m(r),s=a===n?-1:1;let c,f;const d=t=>{c=f,f=t,e=Te(t-c,dr.delta),(1===s&&t>a||-1===s&&tnull===v||void 0===v?void 0:v.stop()}}var Ar=function(t){return 1e3*t};const Sr=(t,e)=>1-3*e+3*t,Tr=(t,e)=>3*e-6*t,Cr=t=>3*t,Vr=(t,e,n)=>((Sr(e,n)*t+Tr(e,n))*t+Cr(e))*t,Rr=(t,e,n)=>3*Sr(e,n)*t*t+2*Tr(e,n)*t+Cr(e);const kr=.1;function Mr(t,e,n,r){if(t===e&&n===r)return Hn;const o=new Float32Array(11);for(let a=0;a<11;++a)o[a]=Vr(a*kr,t,n);function i(e){let r=0,i=1;for(;10!==i&&o[i]<=e;++i)r+=kr;--i;const a=r+(e-o[i])/(o[i+1]-o[i])*kr,s=Rr(a,t,n);return s>=.001?function(t,e,n,r){for(let o=0;o<8;++o){const o=Rr(e,n,r);if(0===o)return e;e-=(Vr(e,n,r)-t)/o}return e}(e,a,t,n):0===s?a:function(t,e,n,r,o){let i,a,s=0;do{a=e+(n-e)/2,i=Vr(a,r,o)-t,i>0?n=a:e=a}while(Math.abs(i)>1e-7&&++s<10);return a}(e,r,r+kr,t,n)}return t=>0===t||1===t?t:Vr(i(t),e,r)}var Dr={linear:Hn,easeIn:qn,easeInOut:_n,easeOut:Xn,circIn:Gn,circInOut:Zn,circOut:$n,backIn:Kn,backInOut:Qn,backOut:Jn,anticipate:tr,bounceIn:nr,bounceInOut:t=>t<.5?.5*(1-er(1-2*t)):.5*er(2*t-1)+.5,bounceOut:er},jr=function(t){if(Array.isArray(t)){t.length;var e=zt(t,4);return Mr(e[0],e[1],e[2],e[3])}return"string"===typeof t?("Invalid easing type '".concat(t,"'"),Dr[t]):t},Lr=function(t,e){return"zIndex"!==t&&(!("number"!==typeof e&&!Array.isArray(e))||!("string"!==typeof e||!Cn.test(e)||e.startsWith("url(")))},Fr=function(t){return Array.isArray(t)},Br=function(){return{type:"spring",stiffness:500,damping:25,restSpeed:10}},Ir=function(t){return{type:"spring",stiffness:550,damping:0===t?2*Math.sqrt(550):30,restSpeed:10}},Ur=function(){return{type:"keyframes",ease:"linear",duration:.3}},zr=function(t){return{type:"keyframes",duration:.8,values:t}},Nr={x:Br,y:Br,z:Br,rotate:Br,rotateX:Br,rotateY:Br,rotateZ:Br,scaleX:Ir,scaleY:Ir,scale:Ir,opacity:Ur,backgroundColor:Ur,color:Ur,default:Ir};const Wr=new Set(["brightness","contrast","saturate","opacity"]);function Hr(t){let[e,n]=t.slice(0,-1).split("(");if("drop-shadow"===e)return t;const[r]=n.match(Xe)||[];if(!r)return t;const o=n.replace(r,"");let i=Wr.has(e)?1:0;return r!==n&&(i*=100),e+"("+i+o+")"}const qr=/([a-z-]*)\(.*?\)/g,Yr=Object.assign(Object.assign({},Cn),{getAnimatableNone:t=>{const e=t.match(qr);return e?e.map(Hr).join(" "):t}});var Xr=Bt(Bt({},Ze),{transform:Math.round}),_r={borderWidth:ln,borderTopWidth:ln,borderRightWidth:ln,borderBottomWidth:ln,borderLeftWidth:ln,borderRadius:ln,radius:ln,borderTopLeftRadius:ln,borderTopRightRadius:ln,borderBottomRightRadius:ln,borderBottomLeftRadius:ln,width:ln,maxWidth:ln,height:ln,maxHeight:ln,size:ln,top:ln,right:ln,bottom:ln,left:ln,padding:ln,paddingTop:ln,paddingRight:ln,paddingBottom:ln,paddingLeft:ln,margin:ln,marginTop:ln,marginRight:ln,marginBottom:ln,marginLeft:ln,rotate:sn,rotateX:sn,rotateY:sn,rotateZ:sn,scale:Je,scaleX:Je,scaleY:Je,scaleZ:Je,skew:sn,skewX:sn,skewY:sn,distance:ln,translateX:ln,translateY:ln,translateZ:ln,x:ln,y:ln,z:ln,perspective:ln,transformPerspective:ln,opacity:Ke,originX:dn,originY:dn,originZ:ln,zIndex:Xr,fillOpacity:Ke,strokeOpacity:Ke,numOctaves:Xr},Gr=Bt(Bt({},_r),{color:wn,backgroundColor:wn,outlineColor:wn,fill:wn,stroke:wn,borderColor:wn,borderTopColor:wn,borderRightColor:wn,borderBottomColor:wn,borderLeftColor:wn,filter:Yr,WebkitFilter:Yr}),$r=function(t){return Gr[t]};function Zr(t,e){var n,r=$r(t);return r!==Yr&&(r=Cn),null===(n=r.getAnimatableNone)||void 0===n?void 0:n.call(r,e)}var Kr=!1,Jr=function(t){return Fr(t)?t[t.length-1]||0:t};function Qr(t){var e=t.ease,n=t.times,r=t.yoyo,o=t.flip,i=t.loop,a=It(t,["ease","times","yoyo","flip","loop"]),s=Bt({},a);return n&&(s.offset=n),a.duration&&(s.duration=Ar(a.duration)),a.repeatDelay&&(s.repeatDelay=Ar(a.repeatDelay)),e&&(s.ease=function(t){return Array.isArray(t)&&"number"!==typeof t[0]}(e)?e.map(jr):jr(e)),"tween"===a.type&&(s.type="keyframes"),(r||i||o)&&(!0,r?s.repeatType="reverse":i?s.repeatType="loop":o&&(s.repeatType="mirror"),s.repeat=i||r||o||a.repeat),"spring"!==a.type&&(s.type="keyframes"),s}function to(t,e,n){var r;return Array.isArray(e.to)&&(null!==(r=t.duration)&&void 0!==r||(t.duration=.8)),function(t){Array.isArray(t.to)&&null===t.to[0]&&(t.to=Nt([],zt(t.to),!1),t.to[0]=t.from)}(e),function(t){t.when,t.delay,t.delayChildren,t.staggerChildren,t.staggerDirection,t.repeat,t.repeatType,t.repeatDelay,t.from;var e=It(t,["when","delay","delayChildren","staggerChildren","staggerDirection","repeat","repeatType","repeatDelay","from"]);return!!Object.keys(e).length}(t)||(t=Bt(Bt({},t),function(t,e){var n;return n=Fr(e)?zr:Nr[t]||Nr.default,Bt({to:e},n(e))}(n,e.to))),Bt(Bt({},e),Qr(t))}function eo(t){return 0===t||"string"===typeof t&&0===parseFloat(t)&&-1===t.indexOf(" ")}function no(t){return"number"===typeof t?0:Zr("",t)}function ro(t,e){return t[e]||t.default||t}function oo(t,e,n,r){return void 0===r&&(r={}),Kr&&(r={type:!1}),e.start((function(o){var i,a,s=function(t,e,n,r,o){var i,a=ro(r,t),s=null!==(i=a.from)&&void 0!==i?i:e.get(),u=Lr(t,n);"none"===s&&u&&"string"===typeof n?s=Zr(t,n):eo(s)&&"string"===typeof n?s=no(n):!Array.isArray(n)&&eo(n)&&"string"===typeof s&&(n=no(s));var l=Lr(t,s);return"You are trying to animate ".concat(t,' from "').concat(s,'" to "').concat(n,'". ').concat(s," is not an animatable value - to enable this animation set ").concat(s," to a value animatable to ").concat(n," via the `style` property."),l&&u&&!1!==a.type?function(){var r={from:s,to:n,velocity:e.getVelocity(),onComplete:o,onUpdate:function(t){return e.set(t)}};return"inertia"===a.type||"decay"===a.type?Or(Bt(Bt({},r),a)):Pr(Bt(Bt({},to(a,r,t)),{onUpdate:function(t){var e;r.onUpdate(t),null===(e=a.onUpdate)||void 0===e||e.call(a,t)},onComplete:function(){var t;r.onComplete(),null===(t=a.onComplete)||void 0===t||t.call(a)}}))}:function(){var t,r,i=Jr(n);return e.set(i),o(),null===(t=null===a||void 0===a?void 0:a.onUpdate)||void 0===t||t.call(a,i),null===(r=null===a||void 0===a?void 0:a.onComplete)||void 0===r||r.call(a),{stop:function(){}}}}(t,e,n,r,o),u=function(t,e){var n,r;return null!==(r=null!==(n=(ro(t,e)||{}).delay)&&void 0!==n?n:t.delay)&&void 0!==r?r:0}(r,t),l=function(){return a=s()};return u?i=setTimeout(l,Ar(u)):l(),function(){clearTimeout(i),null===a||void 0===a||a.stop()}}))}var io=["TopLeft","TopRight","BottomLeft","BottomRight"],ao=io.length;function so(t,e){var n;return null!==(n=t[e])&&void 0!==n?n:t.borderRadius}var uo=co(0,.5,$n),lo=co(.5,.95,Hn);function co(t,e,n){return function(r){return re?1:n(He(t,e,r))}}function fo(t,e){t.min=e.min,t.max=e.max}function po(t,e){fo(t.x,e.x),fo(t.y,e.y)}function vo(t){return void 0===t||1===t}function ho(t){var e=t.scale,n=t.scaleX,r=t.scaleY;return!vo(e)||!vo(n)||!vo(r)}function mo(t){return ho(t)||go(t.x)||go(t.y)||t.z||t.rotate||t.rotateX||t.rotateY}function go(t){return t&&"0%"!==t}function yo(t,e,n){return n+e*(t-n)}function bo(t,e,n,r,o){return void 0!==o&&(t=yo(t,o,r)),yo(t,n,r)+e}function xo(t,e,n,r,o){void 0===e&&(e=0),void 0===n&&(n=1),t.min=bo(t.min,e,n,r,o),t.max=bo(t.max,e,n,r,o)}function wo(t,e){var n=e.x,r=e.y;xo(t.x,n.translate,n.scale,n.originPoint),xo(t.y,r.translate,r.scale,r.originPoint)}function Eo(t,e){t.min=t.min+e,t.max=t.max+e}function Po(t,e,n){var r=zt(n,3),o=r[0],i=r[1],a=r[2],s=void 0!==e[a]?e[a]:.5,u=Se(t.min,t.max,s);xo(t,e[o],e[i],u,e.scale)}var Oo=["x","scaleX","originX"],Ao=["y","scaleY","originY"];function So(t,e){Po(t.x,e,Oo),Po(t.y,e,Ao)}const To=t=>t.hasOwnProperty("x")&&t.hasOwnProperty("y"),Co=t=>To(t)&&t.hasOwnProperty("z"),Vo=(t,e)=>Math.abs(t-e);function Ro(t,e){if(Vn(t)&&Vn(e))return Vo(t,e);if(To(t)&&To(e)){const n=Vo(t.x,e.x),r=Vo(t.y,e.y),o=Co(t)&&Co(e)?Vo(t.z,e.z):0;return Math.sqrt(Math.pow(n,2)+Math.pow(r,2)+Math.pow(o,2))}}function ko(t){return t.max-t.min}function Mo(t,e,n){return void 0===e&&(e=0),void 0===n&&(n=.01),Ro(t,e)=0;r--){var o=this.members[r];if(!1!==o.isPresent){e=o;break}}return!!e&&(this.promote(e),!0)},t.prototype.promote=function(t,e){var n,r=this.lead;t!==r&&(this.prevLead=r,this.lead=t,t.show(),r&&(r.instance&&r.scheduleRender(),t.scheduleRender(),t.resumeFrom=r,e&&(t.resumeFrom.preserveOpacity=!0),r.snapshot&&(t.snapshot=r.snapshot,t.snapshot.latestValues=r.animationValues||r.latestValues,t.snapshot.isShared=!0),(null===(n=t.root)||void 0===n?void 0:n.isUpdating)&&(t.isLayoutDirty=!0),!1===t.options.crossfade&&r.hide()))},t.prototype.exitAnimationComplete=function(){this.members.forEach((function(t){var e,n,r,o,i;null===(n=(e=t.options).onExitComplete)||void 0===n||n.call(e),null===(i=null===(r=t.resumingFrom)||void 0===r?void 0:(o=r.options).onExitComplete)||void 0===i||i.call(o)}))},t.prototype.scheduleRender=function(){this.members.forEach((function(t){t.instance&&t.scheduleRender(!1)}))},t.prototype.removeLeadSnapshot=function(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)},t}(),_o={};function Go(t,e,n){var r=t.x.translate/e.x,o=t.y.translate/e.y,i="translate3d(".concat(r,"px, ").concat(o,"px, 0) ");if(n){var a=n.rotate,s=n.rotateX,u=n.rotateY;a&&(i+="rotate(".concat(a,"deg) ")),s&&(i+="rotateX(".concat(s,"deg) ")),u&&(i+="rotateY(".concat(u,"deg) "))}return"translate3d(0px, 0px, 0) scale(1, 1)"===(i+="scale(".concat(t.x.scale,", ").concat(t.y.scale,")"))?"none":i}function $o(t){return[t("x"),t("y")]}var Zo=["","X","Y","Z"],Ko=["transformPerspective","x","y","z"];function Jo(t,e){return Ko.indexOf(t)-Ko.indexOf(e)}["translate","scale","rotate","skew"].forEach((function(t){return Zo.forEach((function(e){return Ko.push(t+e)}))}));var Qo=new Set(Ko);function ti(t){return Qo.has(t)}var ei=new Set(["originX","originY","originZ"]);function ni(t){return ei.has(t)}var ri=function(t,e){return t.depth-e.depth},oi=function(){function t(){this.children=[],this.isDirty=!1}return t.prototype.add=function(t){Ce(this.children,t),this.isDirty=!0},t.prototype.remove=function(t){Ve(this.children,t),this.isDirty=!0},t.prototype.forEach=function(t){this.isDirty&&this.children.sort(ri),this.isDirty=!1,this.children.forEach(t)},t}();function ii(t){var e,n=De(t)?t.get():t;return e=n,Boolean(e&&"object"===typeof e&&e.mix&&e.toValue)?n.toValue():n}var ai={hasAnimatedSinceResize:!0,hasEverUpdated:!1};function si(t){var e=t.attachResizeListener,n=t.defaultParent,r=t.measureScroll,o=t.resetTransform;return function(){function t(t,e,r){var o=this;void 0===e&&(e={}),void 0===r&&(r=null===n||void 0===n?void 0:n()),this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.potentialNodes=new Map,this.checkUpdateFailed=function(){o.isUpdating&&(o.isUpdating=!1,o.clearAllSnapshots())},this.updateProjection=function(){o.nodes.forEach(vi),o.nodes.forEach(hi)},this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.id=t,this.latestValues=e,this.root=r?r.root||r:this,this.path=r?Nt(Nt([],zt(r.path),!1),[r],!1):[],this.parent=r,this.depth=r?r.depth+1:0,t&&this.root.registerPotentialNode(t,this);for(var i=0;i=0;r--)if(Boolean(t.path[r].instance)){n=t.path[r];break}var o=(n&&n!==t.root?n.instance:document).querySelector('[data-projection-id="'.concat(e,'"]'));o&&t.mount(o,!0)}function Pi(t){t.min=Math.round(t.min),t.max=Math.round(t.max)}function Oi(t){Pi(t.x),Pi(t.y)}var Ai=1;var Si=(0,dt.createContext)({}),Ti=(0,dt.createContext)({});var Ci=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return Ft(e,t),e.prototype.getSnapshotBeforeUpdate=function(){return this.updateProps(),null},e.prototype.componentDidUpdate=function(){},e.prototype.updateProps=function(){var t=this.props,e=t.visualElement,n=t.props;e&&e.setProps(n)},e.prototype.render=function(){return this.props.children},e}(dt.Component);function Vi(t){var e=t.preloadedFeatures,n=t.createVisualElement,r=t.projectionNodeConstructor,o=t.useRender,i=t.useVisualState,a=t.Component;return e&&function(t){for(var e in t)null!==t[e]&&("projectionNodeConstructor"===e?Ht.projectionNodeConstructor=t[e]:Ht[e].Component=t[e])}(e),(0,dt.forwardRef)((function(t,e){var s=function(t){var e,n=t.layoutId,r=null===(e=(0,dt.useContext)(Si))||void 0===e?void 0:e.id;return r&&void 0!==n?r+"-"+n:n}(t);t=Bt(Bt({},t),{layoutId:s});var u=(0,dt.useContext)(_t),l=null,c=ae(t),f=ue((function(){if(ai.hasEverUpdated)return Ai++})),d=i(t,u.isStatic);return!u.isStatic&&Zt&&(c.visualElement=Jt(a,d,Bt(Bt({},u),t),n),function(t,e,n,r){var o,i=e.layoutId,a=e.layout,s=e.drag,u=e.dragConstraints,l=e.layoutScroll,c=(0,dt.useContext)(Ti);r&&n&&!(null===n||void 0===n?void 0:n.projection)&&(n.projection=new r(t,n.getLatestValues(),null===(o=n.parent)||void 0===o?void 0:o.projection),n.projection.setOptions({layoutId:i,layout:a,alwaysMeasureLayout:Boolean(s)||u&&Qt(u),visualElement:n,scheduleRender:function(){return n.scheduleRender()},animationType:"string"===typeof a?a:"both",initialPromotionConfig:c,layoutScroll:l}))}(f,t,c.visualElement,r||Ht.projectionNodeConstructor),l=function(t,e,n){var r=[];if((0,dt.useContext)(qt),!e)return null;for(var o=0;o-1||/[A-Z]/.test(t))}function Di(t,e){var n=e.layout,r=e.layoutId;return ti(t)||ni(t)||(n||void 0!==r)&&(!!_o[t]||"opacity"===t)}var ji={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"};function Li(t){return t.startsWith("--")}var Fi=function(t,e){return e&&"number"===typeof t?e.transform(t):t};function Bi(t,e,n,r){var o,i=t.style,a=t.vars,s=t.transform,u=t.transformKeys,l=t.transformOrigin;u.length=0;var c=!1,f=!1,d=!0;for(var p in e){var v=e[p];if(Li(p))a[p]=v;else{var h=_r[p],m=Fi(v,h);if(ti(p)){if(c=!0,s[p]=m,u.push(p),!d)continue;v!==(null!==(o=h.default)&&void 0!==o?o:0)&&(d=!1)}else ni(p)?(l[p]=m,f=!0):i[p]=m}}c?i.transform=function(t,e,n,r){var o=t.transform,i=t.transformKeys,a=e.enableHardwareAcceleration,s=void 0===a||a,u=e.allowTransformNone,l=void 0===u||u,c="";i.sort(Jo);for(var f=!1,d=i.length,p=0;pv&&g,E=Array.isArray(m)?m:[m],P=E.reduce(i,{});!1===y&&(P={});var O=h.prevResolvedValues,A=void 0===O?{}:O,S=Bt(Bt({},A),P),T=function(t){w=!0,d.delete(t),h.needsAnimating[t]=!0};for(var C in S){var V=P[C],R=A[C];p.hasOwnProperty(C)||(V!==R?Fr(V)&&Fr(R)?!$a(V,R)||x?T(C):h.protectedKeys[C]=!0:void 0!==V?T(C):d.add(C):void 0!==V&&d.has(C)?T(C):h.protectedKeys[C]=!0)}h.prevProp=m,h.prevResolvedValues=P,h.isActive&&(p=Bt(Bt({},p),P)),o&&t.blockInitialAnimation&&(w=!1),w&&!b&&f.push.apply(f,Nt([],zt(E.map((function(t){return{animation:t,options:Bt({type:r},a)}}))),!1))},m=0;m=3;if(e||n){var o=t.point,i=Oe().timestamp;r.history.push(Bt(Bt({},o),{timestamp:i}));var a=r.handlers,s=a.onStart,u=a.onMove;e||(s&&s(r.lastMoveEvent,t),r.startEvent=r.lastMoveEvent),u&&u(r.lastMoveEvent,t)}}},this.handlePointerMove=function(t,e){r.lastMoveEvent=t,r.lastMoveEventInfo=gs(e,r.transformPagePoint),ha(t)&&0===t.buttons?r.handlePointerUp(t,e):Ae.update(r.updatePoint,!0)},this.handlePointerUp=function(t,e){r.end();var n=r.handlers,o=n.onEnd,i=n.onSessionEnd,a=bs(gs(e,r.transformPagePoint),r.history);r.startEvent&&o&&o(t,a),i&&i(t,a)},!(ma(t)&&t.touches.length>1)){this.handlers=e,this.transformPagePoint=o;var i=gs(xa(t),this.transformPagePoint),a=i.point,s=Oe().timestamp;this.history=[Bt(Bt({},a),{timestamp:s})];var u=e.onSessionStart;u&&u(t,bs(i,this.history)),this.removeListeners=kn(Aa(window,"pointermove",this.handlePointerMove),Aa(window,"pointerup",this.handlePointerUp),Aa(window,"pointercancel",this.handlePointerUp))}}return t.prototype.updateHandlers=function(t){this.handlers=t},t.prototype.end=function(){this.removeListeners&&this.removeListeners(),be.update(this.updatePoint)},t}();function gs(t,e){return e?{point:e(t.point)}:t}function ys(t,e){return{x:t.x-e.x,y:t.y-e.y}}function bs(t,e){var n=t.point;return{point:n,delta:ys(n,ws(e)),offset:ys(n,xs(e)),velocity:Es(e,.1)}}function xs(t){return t[0]}function ws(t){return t[t.length-1]}function Es(t,e){if(t.length<2)return{x:0,y:0};for(var n=t.length-1,r=null,o=ws(t);n>=0&&(r=t[n],!(o.timestamp-r.timestamp>Ar(e)));)n--;if(!r)return{x:0,y:0};var i=(o.timestamp-r.timestamp)/1e3;if(0===i)return{x:0,y:0};var a={x:(o.x-r.x)/i,y:(o.y-r.y)/i};return a.x===1/0&&(a.x=0),a.y===1/0&&(a.y=0),a}function Ps(t,e,n){return{min:void 0!==e?t.min+e:void 0,max:void 0!==n?t.max+n-(t.max-t.min):void 0}}function Os(t,e){var n,r=e.min-t.min,o=e.max-t.max;return e.max-e.mine?n="y":Math.abs(t.x)>e&&(n="x");return n}(u),void(null!==n.currentDirection&&(null===a||void 0===a||a(n.currentDirection)));n.updateAxis("x",e.point,u),n.updateAxis("y",e.point,u),n.visualElement.syncRender(),null===s||void 0===s||s(t,e)}},onSessionEnd:function(t,e){return n.stop(t,e)}},{transformPagePoint:this.visualElement.getTransformPagePoint()})}},t.prototype.stop=function(t,e){var n=this.isDragging;if(this.cancel(),n){var r=e.velocity;this.startAnimation(r);var o=this.getProps().onDragEnd;null===o||void 0===o||o(t,e)}},t.prototype.cancel=function(){var t,e;this.isDragging=!1,this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!1),null===(t=this.panSession)||void 0===t||t.end(),this.panSession=void 0,!this.getProps().dragPropagation&&this.openGlobalLock&&(this.openGlobalLock(),this.openGlobalLock=null),null===(e=this.visualElement.animationState)||void 0===e||e.setActive(ca.Drag,!1)},t.prototype.updateAxis=function(t,e,n){var r=this.getProps().drag;if(n&&Ms(t,r,this.currentDirection)){var o=this.getAxisMotionValue(t),i=this.originPoint[t]+n[t];this.constraints&&this.constraints[t]&&(i=function(t,e,n){var r=e.min,o=e.max;return void 0!==r&&to&&(t=n?Se(o,t,n.max):Math.min(t,o)),t}(i,this.constraints[t],this.elastic[t])),o.set(i)}},t.prototype.resolveConstraints=function(){var t=this,e=this.getProps(),n=e.dragConstraints,r=e.dragElastic,o=(this.visualElement.projection||{}).layout,i=this.constraints;n&&Qt(n)?this.constraints||(this.constraints=this.resolveRefConstraints()):this.constraints=!(!n||!o)&&function(t,e){var n=e.top,r=e.left,o=e.bottom,i=e.right;return{x:Ps(t.x,r,i),y:Ps(t.y,n,o)}}(o.actual,n),this.elastic=function(t){return void 0===t&&(t=As),!1===t?t=0:!0===t&&(t=As),{x:Ss(t,"left","right"),y:Ss(t,"top","bottom")}}(r),i!==this.constraints&&o&&this.constraints&&!this.hasMutatedConstraints&&$o((function(e){t.getAxisMotionValue(e)&&(t.constraints[e]=function(t,e){var n={};return void 0!==e.min&&(n.min=e.min-t.min),void 0!==e.max&&(n.max=e.max-t.min),n}(o.actual[e],t.constraints[e]))}))},t.prototype.resolveRefConstraints=function(){var t=this.getProps(),e=t.dragConstraints,n=t.onMeasureDragConstraints;if(!e||!Qt(e))return!1;var r=e.current,o=this.visualElement.projection;if(!o||!o.layout)return!1;var i=function(t,e,n){var r=Vs(t,n),o=e.scroll;return o&&(Eo(r.x,o.x),Eo(r.y,o.y)),r}(r,o.root,this.visualElement.getTransformPagePoint()),a=function(t,e){return{x:Os(t.x,e.x),y:Os(t.y,e.y)}}(o.layout.actual,i);if(n){var s=n(function(t){var e=t.x,n=t.y;return{top:n.min,right:e.max,bottom:n.max,left:e.min}}(a));this.hasMutatedConstraints=!!s,s&&(a=Cs(s))}return a},t.prototype.startAnimation=function(t){var e=this,n=this.getProps(),r=n.drag,o=n.dragMomentum,i=n.dragElastic,a=n.dragTransition,s=n.dragSnapToOrigin,u=n.onDragTransitionEnd,l=this.constraints||{},c=$o((function(n){var u;if(Ms(n,r,e.currentDirection)){var c=null!==(u=null===l||void 0===l?void 0:l[n])&&void 0!==u?u:{};s&&(c={min:0,max:0});var f=i?200:1e6,d=i?40:1e7,p=Bt(Bt({type:"inertia",velocity:o?t[n]:0,bounceStiffness:f,bounceDamping:d,timeConstant:750,restDelta:1,restSpeed:10},a),c);return e.startAxisValueAnimation(n,p)}}));return Promise.all(c).then(u)},t.prototype.startAxisValueAnimation=function(t,e){return oo(t,this.getAxisMotionValue(t),0,e)},t.prototype.stopAnimation=function(){var t=this;$o((function(e){return t.getAxisMotionValue(e).stop()}))},t.prototype.getAxisMotionValue=function(t){var e,n,r="_drag"+t.toUpperCase(),o=this.visualElement.getProps()[r];return o||this.visualElement.getValue(t,null!==(n=null===(e=this.visualElement.getProps().initial)||void 0===e?void 0:e[t])&&void 0!==n?n:0)},t.prototype.snapToCursor=function(t){var e=this;$o((function(n){if(Ms(n,e.getProps().drag,e.currentDirection)){var r=e.visualElement.projection,o=e.getAxisMotionValue(n);if(r&&r.layout){var i=r.layout.actual[n],a=i.min,s=i.max;o.set(t[n]-Se(a,s,.5))}}}))},t.prototype.scalePositionWithinConstraints=function(){var t,e=this,n=this.getProps(),r=n.drag,o=n.dragConstraints,i=this.visualElement.projection;if(Qt(o)&&i&&this.constraints){this.stopAnimation();var a={x:0,y:0};$o((function(t){var n=e.getAxisMotionValue(t);if(n){var r=n.get();a[t]=function(t,e){var n=.5,r=ko(t),o=ko(e);return o>r?n=He(e.min,e.max-r,t.min):r>o&&(n=He(t.min,t.max-o,e.min)),je(0,1,n)}({min:r,max:r},e.constraints[t])}}));var s=this.visualElement.getProps().transformTemplate;this.visualElement.getInstance().style.transform=s?s({},""):"none",null===(t=i.root)||void 0===t||t.updateScroll(),i.updateLayout(),this.resolveConstraints(),$o((function(t){if(Ms(t,r,null)){var n=e.getAxisMotionValue(t),o=e.constraints[t],i=o.min,s=o.max;n.set(Se(i,s,a[t]))}}))}},t.prototype.addListeners=function(){var t,e=this;Rs.set(this.visualElement,this);var n=Aa(this.visualElement.getInstance(),"pointerdown",(function(t){var n=e.getProps(),r=n.drag,o=n.dragListener;r&&(void 0===o||o)&&e.start(t)})),r=function(){Qt(e.getProps().dragConstraints)&&(e.constraints=e.resolveRefConstraints())},o=this.visualElement.projection,i=o.addEventListener("measure",r);o&&!o.layout&&(null===(t=o.root)||void 0===t||t.updateScroll(),o.updateLayout()),r();var a=pa(window,"resize",(function(){e.scalePositionWithinConstraints()}));return o.addEventListener("didUpdate",(function(t){var n=t.delta,r=t.hasLayoutChanged;e.isDragging&&r&&($o((function(t){var r=e.getAxisMotionValue(t);r&&(e.originPoint[t]+=n[t].translate,r.set(r.get()+n[t].translate))})),e.visualElement.syncRender())})),function(){a(),n(),i()}},t.prototype.getProps=function(){var t=this.visualElement.getProps(),e=t.drag,n=void 0!==e&&e,r=t.dragDirectionLock,o=void 0!==r&&r,i=t.dragPropagation,a=void 0!==i&&i,s=t.dragConstraints,u=void 0!==s&&s,l=t.dragElastic,c=void 0===l?As:l,f=t.dragMomentum,d=void 0===f||f;return Bt(Bt({},t),{drag:n,dragDirectionLock:o,dragPropagation:a,dragConstraints:u,dragElastic:c,dragMomentum:d})},t}();function Ms(t,e,n){return(!0===e||e===t)&&(null===n||n===t)}var Ds={pan:Ha((function(t){var e=t.onPan,n=t.onPanStart,r=t.onPanEnd,o=t.onPanSessionStart,i=t.visualElement,a=e||n||r||o,s=(0,dt.useRef)(null),u=(0,dt.useContext)(_t).transformPagePoint,l={onSessionStart:o,onStart:n,onMove:e,onEnd:function(t,e){s.current=null,r&&r(t,e)}};(0,dt.useEffect)((function(){null!==s.current&&s.current.updateHandlers(l)})),Sa(i,"pointerdown",a&&function(t){s.current=new ms(t,l,{transformPagePoint:u})}),ja((function(){return s.current&&s.current.end()}))})),drag:Ha((function(t){var e=t.dragControls,n=t.visualElement,r=ue((function(){return new ks(n)}));(0,dt.useEffect)((function(){return e&&e.subscribe(r)}),[r,e]),(0,dt.useEffect)((function(){return r.addListeners()}),[r])}))},js=["LayoutMeasure","BeforeLayoutMeasure","LayoutUpdate","ViewportBoxUpdate","Update","Render","AnimationComplete","LayoutAnimationComplete","AnimationStart","SetAxisTarget","Unmount"];var Ls=function(t){var e=t.treeType,n=void 0===e?"":e,r=t.build,o=t.getBaseTarget,i=t.makeTargetAnimatable,a=t.measureViewportBox,s=t.render,u=t.readValueFromInstance,l=t.removeValueFromRenderState,c=t.sortNodePosition,f=t.scrapeMotionValuesFromProps;return function(t,e){var d=t.parent,p=t.props,v=t.presenceId,h=t.blockInitialAnimation,m=t.visualState;void 0===e&&(e={});var g,y,b=!1,x=m.latestValues,w=m.renderState,E=function(){var t=js.map((function(){return new Re})),e={},n={clearAllListeners:function(){return t.forEach((function(t){return t.clear()}))},updatePropListeners:function(t){js.forEach((function(r){var o,i="on"+r,a=t[i];null===(o=e[r])||void 0===o||o.call(e),a&&(e[r]=n[i](a))}))}};return t.forEach((function(t,e){n["on"+js[e]]=function(e){return t.add(e)},n["notify"+js[e]]=function(){for(var e=[],n=0;n5)return o;var u=Cn.createTransformer(t),l="number"!==typeof s[0]?1:0,c=r.x.scale*n.x,f=r.y.scale*n.y;s[0+l]/=c,s[1+l]/=f;var d=Se(c,f,.5);"number"===typeof s[2+l]&&(s[2+l]/=d),"number"===typeof s[3+l]&&(s[3+l]/=d);var p=u(s);if(i){var v=0;p=p.replace(au,(function(){var t=a[v];return v++,t}))}return p}},uu=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return Ft(e,t),e.prototype.componentDidMount=function(){var t,e=this,n=this.props,r=n.visualElement,o=n.layoutGroup,i=n.switchLayoutGroup,a=n.layoutId,s=r.projection;t=lu,Object.assign(_o,t),s&&((null===o||void 0===o?void 0:o.group)&&o.group.add(s),(null===i||void 0===i?void 0:i.register)&&a&&i.register(s),s.root.didUpdate(),s.addEventListener("animationComplete",(function(){e.safeToRemove()})),s.setOptions(Bt(Bt({},s.options),{onExitComplete:function(){return e.safeToRemove()}}))),ai.hasEverUpdated=!0},e.prototype.getSnapshotBeforeUpdate=function(t){var e=this,n=this.props,r=n.layoutDependency,o=n.visualElement,i=n.drag,a=n.isPresent,s=o.projection;return s?(s.isPresent=a,i||t.layoutDependency!==r||void 0===r?s.willUpdate():this.safeToRemove(),t.isPresent!==a&&(a?s.promote():s.relegate()||Ae.postRender((function(){var t;(null===(t=s.getStack())||void 0===t?void 0:t.members.length)||e.safeToRemove()}))),null):null},e.prototype.componentDidUpdate=function(){var t=this.props.visualElement.projection;t&&(t.root.didUpdate(),!t.currentAnimation&&t.isLead()&&this.safeToRemove())},e.prototype.componentWillUnmount=function(){var t=this.props,e=t.visualElement,n=t.layoutGroup,r=t.switchLayoutGroup,o=e.projection;o&&(o.scheduleCheckAfterUnmount(),(null===n||void 0===n?void 0:n.group)&&n.group.remove(o),(null===r||void 0===r?void 0:r.deregister)&&r.deregister(o))},e.prototype.safeToRemove=function(){var t=this.props.safeToRemove;null===t||void 0===t||t()},e.prototype.render=function(){return null},e}(dt.Component);var lu={borderRadius:Bt(Bt({},iu),{applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]}),borderTopLeftRadius:iu,borderTopRightRadius:iu,borderBottomLeftRadius:iu,borderBottomRightRadius:iu,boxShadow:su},cu={measureLayout:function(t){var e=zt(Ya(),2),n=e[0],r=e[1],o=(0,dt.useContext)(Si);return dt.createElement(uu,Bt({},t,{layoutGroup:o,switchLayoutGroup:(0,dt.useContext)(Ti),isPresent:n,safeToRemove:r}))}},fu=si({attachResizeListener:function(t,e){return t.addEventListener("resize",e,{passive:!0}),function(){return t.removeEventListener("resize",e)}},measureScroll:function(){return{x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}}}),du={current:void 0},pu=si({measureScroll:function(t){return{x:t.scrollLeft,y:t.scrollTop}},defaultParent:function(){if(!du.current){var t=new fu(0,{});t.mount(window),t.setOptions({layoutScroll:!0}),du.current=t}return du.current},resetTransform:function(t,e){t.style.transform=null!==e&&void 0!==e?e:"none"}}),vu=Bt(Bt(Bt(Bt({},hs),qa),Ds),cu),hu=Ri((function(t,e){return function(t,e,n,r,o){var i=e.forwardMotionProps,a=void 0!==i&&i,s=Mi(t)?fa:da;return Bt(Bt({},s),{preloadedFeatures:n,useRender:Ji(a),createVisualElement:r,projectionNodeConstructor:o,Component:t})}(t,e,vu,ru,pu)}));var mu=0;function gu(){var t=mu;return mu++,t}var yu=function(t){var e=t.children,n=t.initial,r=t.isPresent,o=t.onExitComplete,i=t.custom,a=t.presenceAffectsLayout,s=ue(bu),u=ue(gu),l=(0,dt.useMemo)((function(){return{id:u,initial:n,isPresent:r,custom:i,onExitComplete:function(t){var e,n;s.set(t,!0);try{for(var r=Ut(s.values()),i=r.next();!i.done;i=r.next()){if(!i.value)return}}catch(a){e={error:a}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(e)throw e.error}}null===o||void 0===o||o()},register:function(t){return s.set(t,!1),function(){return s.delete(t)}}}}),a?void 0:[r]);return(0,dt.useMemo)((function(){s.forEach((function(t,e){return s.set(e,!1)}))}),[r]),dt.useEffect((function(){!r&&!s.size&&(null===o||void 0===o||o())}),[r]),dt.createElement($t.Provider,{value:l},e)};function bu(){return new Map}function xu(t){return t.key||""}var wu=function(t){var e=t.children,n=t.custom,r=t.initial,o=void 0===r||r,i=t.onExitComplete,a=t.exitBeforeEnter,s=t.presenceAffectsLayout,u=void 0===s||s,l=zt(function(){var t=(0,dt.useRef)(!1),e=zt((0,dt.useState)(0),2),n=e[0],r=e[1];ja((function(){return t.current=!0}));var o=(0,dt.useCallback)((function(){!t.current&&r(n+1)}),[n]);return[(0,dt.useCallback)((function(){return Ae.postRender(o)}),[o]),n]}(),1)[0],c=(0,dt.useContext)(Si).forceRender;c&&(l=c);var f=(0,dt.useRef)(!0),d=(0,dt.useRef)(!0);(0,dt.useEffect)((function(){return function(){d.current=!1}}),[]);var p=function(t){var e=[];return dt.Children.forEach(t,(function(t){(0,dt.isValidElement)(t)&&e.push(t)})),e}(e),v=(0,dt.useRef)(p),h=(0,dt.useRef)(new Map).current,m=(0,dt.useRef)(new Set).current;if(function(t,e){t.forEach((function(t){var n=xu(t);e.set(n,t)}))}(p,h),f.current)return f.current=!1,dt.createElement(dt.Fragment,null,p.map((function(t){return dt.createElement(yu,{key:xu(t),isPresent:!0,initial:!!o&&void 0,presenceAffectsLayout:u},t)})));for(var g=Nt([],zt(p),!1),y=v.current.map(xu),b=p.map(xu),x=y.length,w=0;w=0||(o[n]=t[n]);return o}var Au={exit:{scale:.85,opacity:0,transition:{opacity:{duration:.15,easings:"easeInOut"},scale:{duration:.2,easings:"easeInOut"}}},enter:{scale:1,opacity:1,transition:{opacity:{easings:"easeOut",duration:.2},scale:{duration:.2,ease:[.175,.885,.4,1.1]}}}},Su=["openDelay","closeDelay","closeOnClick","closeOnMouseDown","onOpen","onClose","placement","id","isOpen","defaultIsOpen","arrowSize","arrowShadowColor","arrowPadding","modifiers","isDisabled","gutter","offset","direction"];var Tu=["children","label","shouldWrapChildren","aria-label","hasArrow","bg","portalProps"],Cu=(0,Mt.m$)(hu.div),Vu=(0,Mt.Gp)((function(t,e){var n=(0,Mt.mq)("Tooltip",t),o=(0,Mt.Lr)(t),i=(0,Mt.Fg)(),a=o.children,s=o.label,u=o.shouldWrapChildren,l=o["aria-label"],c=o.hasArrow,f=o.bg,d=o.portalProps,p=Ou(o,Tu);f&&(n.bg=f,n[ht.arrowBg.var]=(0,Dt.K1)(i,"colors",f));var v,h=function(t){void 0===t&&(t={});var e=t,n=e.openDelay,o=void 0===n?0:n,i=e.closeDelay,a=void 0===i?0:i,s=e.closeOnClick,u=void 0===s||s,l=e.closeOnMouseDown,c=e.onOpen,f=e.onClose,d=e.placement,p=e.id,v=e.isOpen,h=e.defaultIsOpen,m=e.arrowSize,g=void 0===m?10:m,y=e.arrowShadowColor,b=e.arrowPadding,x=e.modifiers,w=e.isDisabled,E=e.gutter,P=e.offset,O=e.direction,A=Ou(e,Su),S=(0,Eu.qY)({isOpen:v,defaultIsOpen:h,onOpen:c,onClose:f}),T=S.isOpen,C=S.onOpen,V=S.onClose,R=Vt({enabled:T,placement:d,arrowPadding:b,modifiers:x,gutter:E,offset:P,direction:O}),k=R.referenceRef,M=R.getPopperProps,D=R.getArrowInnerProps,j=R.getArrowProps,L=(0,Eu.Me)(p,"tooltip"),F=dt.useRef(null),B=dt.useRef(),I=dt.useRef(),U=dt.useCallback((function(){w||(B.current=window.setTimeout(C,o))}),[w,C,o]),z=dt.useCallback((function(){B.current&&clearTimeout(B.current),I.current=window.setTimeout(V,a)}),[a,V]),N=dt.useCallback((function(){u&&z()}),[u,z]),W=dt.useCallback((function(){l&&z()}),[l,z]),H=dt.useCallback((function(t){T&&"Escape"===t.key&&z()}),[T,z]);(0,Eu.OR)("keydown",H),dt.useEffect((function(){return function(){clearTimeout(B.current),clearTimeout(I.current)}}),[]),(0,Eu.OR)("mouseleave",z,(function(){return F.current}));var q=dt.useCallback((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),Pu({},t,{ref:(0,r.lq)(F,e,k),onMouseEnter:(0,Dt.v0)(t.onMouseEnter,U),onClick:(0,Dt.v0)(t.onClick,N),onMouseDown:(0,Dt.v0)(t.onMouseDown,W),onFocus:(0,Dt.v0)(t.onFocus,U),onBlur:(0,Dt.v0)(t.onBlur,z),"aria-describedby":T?L:void 0})}),[U,z,W,T,L,N,k]),Y=dt.useCallback((function(t,e){var n;return void 0===t&&(t={}),void 0===e&&(e=null),M(Pu({},t,{style:Pu({},t.style,(n={},n[ht.arrowSize.var]=g?(0,Dt.px)(g):void 0,n[ht.arrowShadowColor.var]=y,n))}),e)}),[M,g,y]),X=dt.useCallback((function(t,e){return void 0===t&&(t={}),void 0===e&&(e=null),Pu({ref:e},A,t,{id:L,role:"tooltip",style:Pu({},t.style,{position:"relative",transformOrigin:ht.transformOrigin.varRef})})}),[A,L]);return{isOpen:T,show:U,hide:z,getTriggerProps:q,getTooltipProps:X,getTooltipPositionerProps:Y,getArrowProps:j,getArrowInnerProps:D}}(Pu({},p,{direction:i.direction}));if((0,Dt.HD)(a)||u)v=dt.createElement(Mt.m$.span,Pu({tabIndex:0},h.getTriggerProps()),a);else{var m=dt.Children.only(a);v=dt.cloneElement(m,h.getTriggerProps(m.props,m.ref))}var g=!!l,y=h.getTooltipProps({},e),b=g?(0,Dt.CE)(y,["role","id"]):y,x=(0,Dt.ei)(y,["role","id"]);return s?dt.createElement(dt.Fragment,null,v,dt.createElement(wu,null,h.isOpen&&dt.createElement(kt.h_,d,dt.createElement(Mt.m$.div,Pu({},h.getTooltipPositionerProps(),{__css:{zIndex:n.zIndex,pointerEvents:"none"}}),dt.createElement(Cu,Pu({variants:Au},b,{initial:"exit",animate:"enter",exit:"exit",__css:n}),s,g&&dt.createElement(jt.TX,x,l),c&&dt.createElement(Mt.m$.div,{"data-popper-arrow":!0,className:"chakra-tooltip__arrow-wrapper"},dt.createElement(Mt.m$.div,{"data-popper-arrow-inner":!0,className:"chakra-tooltip__arrow",__css:{bg:n.bg}}))))))):dt.createElement(dt.Fragment,null,a)}));Dt.Ts&&(Vu.displayName="Tooltip")}}]); \ No newline at end of file diff --git a/_next/static/chunks/main-7a5ae73f0e3e91d3.js b/_next/static/chunks/main-7a5ae73f0e3e91d3.js deleted file mode 100644 index 94689fb3e..000000000 --- a/_next/static/chunks/main-7a5ae73f0e3e91d3.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{400:function(){"trimStart"in String.prototype||(String.prototype.trimStart=String.prototype.trimLeft),"trimEnd"in String.prototype||(String.prototype.trimEnd=String.prototype.trimRight),"description"in Symbol.prototype||Object.defineProperty(Symbol.prototype,"description",{configurable:!0,get:function(){var e=/\((.*)\)/.exec(this.toString());return e?e[1]:void 0}}),Array.prototype.flat||(Array.prototype.flat=function(e,t){return t=this.concat.apply([],this),e>1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then((function(r){return t.resolve(e()).then((function(){return r}))}),(function(r){return t.resolve(e()).then((function(){throw r}))}))})},6086:function(e){"use strict";var t=Object.assign.bind(Object);e.exports=t,e.exports.default=e.exports},6007:function(e,t){"use strict";function r(e,t){return null!=t&&"undefined"!==typeof Symbol&&t[Symbol.hasInstance]?t[Symbol.hasInstance](e):e instanceof t}Object.defineProperty(t,"__esModule",{value:!0}),t.isEqualNode=a,t.default=function(){var e=null;return{mountedInstances:new Set,updateHead:function(t){var r=e=Promise.resolve().then((function(){if(r===e){e=null;var n={};t.forEach((function(e){if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'.concat(e.props["data-href"],'"]')))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}var t=n[e.type]||[];t.push(e),n[e.type]=t}));var i=n.title?n.title[0]:null,u="";if(i){var c=i.props.children;u="string"===typeof c?c:Array.isArray(c)?c.join(""):""}u!==document.title&&(document.title=u),["meta","base","link","style","script"].forEach((function(e){!function(e,t){var r=document.getElementsByTagName("head")[0],n=r.querySelector("meta[name=next-head-count]");0;for(var i=Number(n.content),u=[],c=0,s=n.previousElementSibling;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var f=new Map,p=new Set,h=["onLoad","dangerouslySetInnerHTML","children","onError","strategy"],d=function(e){var t=e.src,r=e.id,o=e.onLoad,a=void 0===o?function(){}:o,u=e.dangerouslySetInnerHTML,c=e.children,s=void 0===c?"":c,l=e.strategy,d=void 0===l?"afterInteractive":l,v=e.onError,y=r||t;if(!y||!p.has(y)){if(f.has(t))return p.add(y),void f.get(t).then(a,v);var m=document.createElement("script"),g=new Promise((function(e,t){m.addEventListener("load",(function(t){e(),a&&a.call(this,t)})),m.addEventListener("error",(function(e){t(e)}))})).catch((function(e){v&&v(e)}));t&&f.set(t,g),p.add(y),u?m.innerHTML=u.__html||"":s?m.textContent="string"===typeof s?s:Array.isArray(s)?s.join(""):"":t&&(m.src=t);var _=!0,b=!1,w=void 0;try{for(var S,P=Object.entries(e)[Symbol.iterator]();!(_=(S=P.next()).done);_=!0){var x=n(S.value,2),E=x[0],O=x[1];if(void 0!==O&&!h.includes(E)){var R=i.DOMAttributeNames[E]||E.toLowerCase();m.setAttribute(R,O)}}}catch(k){b=!0,w=k}finally{try{_||null==P.return||P.return()}finally{if(b)throw w}}m.setAttribute("data-nscript",d),document.body.appendChild(m)}};function v(e){var t=e.strategy,r=void 0===t?"afterInteractive":t;"afterInteractive"===r?d(e):"lazyOnload"===r&&window.addEventListener("load",(function(){u.requestIdleCallback((function(){return d(e)}))}))}},7813:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.trackWebVitalMetric=function(e){a.push(e),o.forEach((function(t){return t(e)}))},t.useExperimentalWebVitalsReport=function(e){var t=n.useRef(0);n.useEffect((function(){for(var r=function(r){e(r),t.current=a.length},n=t.current;n0){i=!0;var u=o.key.slice(o.key.indexOf("$")+1);e.has(u)?a=!1:e.add(u)}switch(o.type){case"title":case"base":t.has(o.type)?a=!1:t.add(o.type);break;case"meta":for(var c=0,s=p.length;c>>0,1)},emit:function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a-1||r>-1)&&(e=e.substring(0,t>-1?t:r)),e}function C(e){return""===(e=j(e))||e.startsWith("/")}function A(e){return function(e,t){if(!e.startsWith("/")||!t)return e;var r=j(e);return f.normalizePathTrailingSlash("".concat(t).concat(r))+e.substr(r.length)}(e,"")}function T(e){return(e=e.slice("".length)).startsWith("/")||(e="/".concat(e)),e}function L(e){if(e.startsWith("/")||e.startsWith("#")||e.startsWith("?"))return!0;try{var t=m.getLocationOrigin(),r=new URL(e,t);return r.origin===t&&C(r.pathname)}catch(n){return!1}}function M(e,t,r){var n="",o=P.getRouteRegex(e),a=o.groups,i=(t!==e?S.getRouteMatcher(o)(t):"")||r;n=e;var u=Object.keys(a);return u.every((function(e){var t=i[e]||"",r=a[e],o=r.repeat,u=r.optional,c="[".concat(o?"...":"").concat(e,"]");return u&&(c="".concat(t?"":"/","[").concat(c,"]")),o&&!Array.isArray(t)&&(t=[t]),(u||e in i)&&(n=n.replace(c,o?t.map((function(e){return encodeURIComponent(e)})).join("/"):encodeURIComponent(t))||"/")}))||(n=""),{params:u,result:n}}function I(e,t){var r={};return Object.keys(e).forEach((function(n){t.includes(n)||(r[n]=e[n])})),r}function N(e,t,r){var n,o="string"===typeof t?t:m.formatWithValidation(t),a=o.match(/^[a-zA-Z]{1,}:\/\//),i=a?o.substr(a[0].length):o;if((i.split("?")[0]||"").match(/(\/\/|\\)/)){console.error("Invalid href passed to next/router: ".concat(o,", repeated forward-slashes (//) or backslashes \\ are not valid in the href"));var u=m.normalizeRepeatedSlashes(i);o=(a?a[0]:"")+u}if(!L(o))return r?[o]:o;try{n=new URL(o.startsWith("#")?e.asPath:e.pathname,"http://n")}catch(y){n=new URL("/","http://n")}try{var c=new URL(o,n);c.pathname=f.normalizePathTrailingSlash(c.pathname);var s="";if(g.isDynamicRoute(c.pathname)&&c.searchParams&&r){var l=b.searchParamsToUrlQuery(c.searchParams),p=M(c.pathname,c.pathname,l),h=p.result,d=p.params;h&&(s=m.formatWithValidation({pathname:h,hash:c.hash,query:I(l,d)}))}var v=c.origin===n.origin?c.href.slice(c.origin.length):c.href;return r?[v,s||v]:v}catch(_){return r?[o]:o}}function F(e){var t=m.getLocationOrigin();return e.startsWith(t)?e.substring(t.length):e}function D(e,t,r){var n=l(N(e,t,!0),2),o=n[0],a=n[1],i=m.getLocationOrigin(),u=o.startsWith(i),c=a&&a.startsWith(i);o=F(o),a=a?F(a):a;var s=u?o:A(o),f=r?F(N(e,r)):a||o;return{url:s,as:c?f:A(f)}}function B(e,t){var r=f.removePathTrailingSlash(d.denormalizePagePath(e));return"/404"===r||"/_error"===r?e:(t.includes(r)||t.some((function(t){if(g.isDynamicRoute(t)&&P.getRouteRegex(t).re.test(r))return e=t,!0})),f.removePathTrailingSlash(e))}var q=Symbol("SSG_DATA_NOT_FOUND");function z(e,t,r){return fetch(e,{credentials:"same-origin"}).then((function(n){if(!n.ok){if(t>1&&n.status>=500)return z(e,t-1,r);if(404===n.status)return n.json().then((function(e){if(e.notFound)return{notFound:q};throw new Error("Failed to load static props")}));throw new Error("Failed to load static props")}return r.text?n.text():n.json()}))}function H(e,t,r,n,o){var a=new URL(e,window.location.href).href;return void 0!==n[a]?n[a]:n[a]=z(e,t?3:1,{text:r}).catch((function(e){throw t||p.markAssetError(e),e})).then((function(e){return o||delete n[a],e})).catch((function(e){throw delete n[a],e}))}var U=function(){function e(t,r,n,o){var a,i=o.initialProps,u=o.pageLoader,c=o.App,s=o.wrapApp,l=o.Component,p=o.err,h=o.subscription,d=o.isFallback,v=o.locale,y=(o.locales,o.defaultLocale,o.domainLocales,o.isPreview),b=this;(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.sdc={},this.sdr={},this.sde={},this._idx=0,this.onPopState=function(e){var t=e.state;if(t){if(t.__N){var r=t.url,n=t.as,o=t.options,a=t.idx;b._idx=a;var i=_.parseRelativeUrl(r).pathname;b.isSsr&&n===b.asPath&&i===b.pathname||b._bps&&!b._bps(t)||b.change("replaceState",r,n,Object.assign({},o,{shallow:o.shallow&&b._shallow,locale:o.locale||b.defaultLocale}),undefined)}}else{var u=b.pathname,c=b.query;b.changeState("replaceState",m.formatWithValidation({pathname:A(u),query:c}),m.getURL())}},this.route=f.removePathTrailingSlash(t),this.components={},"/_error"!==t)&&(this.components[this.route]={Component:l,initial:!0,props:i,err:p,__N_SSG:i&&i.__N_SSG,__N_SSP:i&&i.__N_SSP,__N_RSC:!!(null===(a=l)||void 0===a?void 0:a.__next_rsc__)});this.components["/_app"]={Component:c,styleSheets:[]},this.events=e.events,this.pageLoader=u,this.pathname=t,this.query=r;var w=g.isDynamicRoute(t)&&self.__NEXT_DATA__.autoExport;if(this.asPath=w?t:n,this.basePath="",this.sub=h,this.clc=null,this._wrapApp=s,this.isSsr=!0,this.isFallback=d,this.isReady=!!(self.__NEXT_DATA__.gssp||self.__NEXT_DATA__.gip||self.__NEXT_DATA__.appGip&&!self.__NEXT_DATA__.gsp||!w&&!self.location.search),this.isPreview=!!y,this.isLocaleDomain=!1,"//"!==n.substr(0,2)){var S={locale:v};S._shouldResolveHref=n!==t,this.changeState("replaceState",m.formatWithValidation({pathname:A(t),query:r}),m.getURL(),S)}window.addEventListener("popstate",this.onPopState)}var t,r,n;return t=e,(r=[{key:"reload",value:function(){window.location.reload()}},{key:"back",value:function(){window.history.back()}},{key:"push",value:function(e,t,r){var n,o=void 0===r?{}:r;return e=(n=D(this,e,t)).url,t=n.as,this.change("pushState",e,t,o)}},{key:"replace",value:function(e,t,r){var n,o=void 0===r?{}:r;return e=(n=D(this,e,t)).url,t=n.as,this.change("replaceState",e,t,o)}},{key:"change",value:function(t,r,n,a,u){return i(o.default.mark((function i(){var c,l,d,v,y,b,w,x,E,O,N,F,z,H,U,W,G,V,$,X,K,Q,Y,J,Z,ee,te,re,ne,oe,ae,ie,ue,ce,se,le,fe,pe;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(L(r)){o.next=3;break}return window.location.href=r,o.abrupt("return",!1);case 3:c=a._h||a._shouldResolveHref||j(r)===j(n),a._h&&(this.isReady=!0),l=this.locale,o.next=18;break;case 18:if(a._h||(this.isSsr=!1),m.ST&&performance.mark("routeChange"),d=a.shallow,v={shallow:void 0!==d&&d},this._inFlightRoute&&this.abortComponentLoad(this._inFlightRoute,v),n=A(R(C(n)?T(n):n,a.locale,this.defaultLocale)),y=k(C(n)?T(n):n,this.locale),this._inFlightRoute=n,b=l!==this.locale,a._h||!this.onlyAHashChange(y)||b){o.next=35;break}return this.asPath=y,e.events.emit("hashChangeStart",n,v),this.changeState(t,r,n,a),this.scrollToHash(y),this.notify(this.components[this.route],null),e.events.emit("hashChangeComplete",n,v),o.abrupt("return",!0);case 35:return w=_.parseRelativeUrl(r),x=w.pathname,E=w.query,o.prev=38,o.next=42,Promise.all([this.pageLoader.getPageList(),p.getClientBuildManifest(),this.pageLoader.getMiddlewareList()]);case 42:N=o.sent,O=N[0],N[1].__rewrites,o.next=52;break;case 48:return o.prev=48,o.t0=o.catch(38),window.location.href=n,o.abrupt("return",!1);case 52:if(this.urlIsNew(y)||b||(t="replaceState"),F=n,x=x?f.removePathTrailingSlash(T(x)):x,c&&"/_error"!==x&&(a._shouldResolveHref=!0,w.pathname=B(x,O),w.pathname!==x&&(x=w.pathname,w.pathname=A(x),r=m.formatWithValidation(w))),L(n)){o.next=61;break}o.next=59;break;case 59:return window.location.href=n,o.abrupt("return",!1);case 61:return F=k(T(F),this.locale),o.next=64,this._preflightRequest({as:n,cache:!0,pages:O,pathname:x,query:E});case 64:if("rewrite"!==(z=o.sent).type){o.next=69;break}E=s({},E,z.parsedAs.query),F=z.asPath,x=z.resolvedHref,w.pathname=z.resolvedHref,r=m.formatWithValidation(w),o.next=81;break;case 69:if("redirect"!==z.type||!z.newAs){o.next=73;break}return o.abrupt("return",this.change(t,z.newUrl,z.newAs,a));case 73:if("redirect"!==z.type||!z.destination){o.next=78;break}return window.location.href=z.destination,o.abrupt("return",new Promise((function(){})));case 78:if("refresh"!==z.type){o.next=81;break}return window.location.href=n,o.abrupt("return",new Promise((function(){})));case 81:if(H=f.removePathTrailingSlash(x),!g.isDynamicRoute(H)){o.next=97;break}if(U=_.parseRelativeUrl(F),W=U.pathname,G=P.getRouteRegex(H),V=S.getRouteMatcher(G)(W),X=($=H===W)?M(H,W,E):{},V&&(!$||X.result)){o.next=96;break}if(!((K=Object.keys(G.groups).filter((function(e){return!E[e]}))).length>0)){o.next=94;break}throw new Error(($?"The provided `href` (".concat(r,") value is missing query values (").concat(K.join(", "),") to be interpolated properly. "):"The provided `as` value (".concat(W,") is incompatible with the `href` value (").concat(H,"). "))+"Read more: https://nextjs.org/docs/messages/".concat($?"href-interpolation-failed":"incompatible-href-as"));case 94:o.next=97;break;case 96:$?n=m.formatWithValidation(Object.assign({},U,{pathname:X.result,query:I(E,X.params)})):Object.assign(E,V);case 97:return e.events.emit("routeChangeStart",n,v),o.prev=98,o.next=102,this.getRouteInfo(H,x,E,n,F,v);case 102:if(J=o.sent,Z=J.error,ee=J.props,te=J.__N_SSG,re=J.__N_SSP,!te&&!re||!ee){o.next=129;break}if(!ee.pageProps||!ee.pageProps.__N_REDIRECT){o.next=114;break}if(!(ne=ee.pageProps.__N_REDIRECT).startsWith("/")||!1===ee.pageProps.__N_REDIRECT_BASE_PATH){o.next=112;break}return(oe=_.parseRelativeUrl(ne)).pathname=B(oe.pathname,O),ae=D(this,ne,ne),ie=ae.url,ue=ae.as,o.abrupt("return",this.change(t,ie,ue,a));case 112:return window.location.href=ne,o.abrupt("return",new Promise((function(){})));case 114:if(this.isPreview=!!ee.__N_PREVIEW,ee.notFound!==q){o.next=129;break}return o.prev=117,o.next=120,this.fetchComponent("/404");case 120:ce="/404",o.next=126;break;case 123:o.prev=123,o.t1=o.catch(117),ce="/_error";case 126:return o.next=128,this.getRouteInfo(ce,ce,E,n,F,{shallow:!1});case 128:J=o.sent;case 129:return e.events.emit("beforeHistoryChange",n,v),this.changeState(t,r,n,a),a._h&&"/_error"===x&&500===(null===(Q=self.__NEXT_DATA__.props)||void 0===Q||null===(Y=Q.pageProps)||void 0===Y?void 0:Y.statusCode)&&(null===ee||void 0===ee?void 0:ee.pageProps)&&(ee.pageProps.statusCode=500),se=a.shallow&&this.route===H,fe=null!==(le=a.scroll)&&void 0!==le?le:!se,pe=fe?{x:0,y:0}:null,o.next=138,this.set(H,x,E,y,J,null!==u&&void 0!==u?u:pe).catch((function(e){if(!e.cancelled)throw e;Z=Z||e}));case 138:if(!Z){o.next=141;break}throw e.events.emit("routeChangeError",Z,y,v),Z;case 141:return e.events.emit("routeChangeComplete",n,v),o.abrupt("return",!0);case 146:if(o.prev=146,o.t2=o.catch(98),!h.default(o.t2)||!o.t2.cancelled){o.next=150;break}return o.abrupt("return",!1);case 150:throw o.t2;case 151:case"end":return o.stop()}}),i,this,[[38,48],[98,146],[117,123]])})).bind(this))()}},{key:"changeState",value:function(e,t,r,n){var o=void 0===n?{}:n;"pushState"===e&&m.getURL()===r||(this._shallow=o.shallow,window.history[e]({url:t,as:r,options:o,__N:!0,idx:this._idx="pushState"!==e?this._idx:this._idx+1},"",r))}},{key:"handleRouteInfoError",value:function(t,r,n,a,u,c){return i(o.default.mark((function i(){var s,l,f,d;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(!t.cancelled){o.next=2;break}throw t;case 2:if(!p.isAssetError(t)&&!c){o.next=6;break}throw e.events.emit("routeChangeError",t,a,u),window.location.href=a,O();case 6:if(o.prev=6,"undefined"!==typeof s&&"undefined"!==typeof l){o.next=18;break}return o.next=14,this.fetchComponent("/_error");case 14:f=o.sent,s=f.page,l=f.styleSheets;case 18:if((d={props:void 0,Component:s,styleSheets:l,err:t,error:t}).props){o.next=30;break}return o.prev=20,o.next=23,this.getInitialProps(s,{err:t,pathname:r,query:n});case 23:d.props=o.sent,o.next=30;break;case 26:o.prev=26,o.t0=o.catch(20),console.error("Error in error page `getInitialProps`: ",o.t0),d.props={};case 30:return o.abrupt("return",d);case 33:return o.prev=33,o.t1=o.catch(6),o.abrupt("return",this.handleRouteInfoError(h.default(o.t1)?o.t1:new Error(o.t1+""),r,n,a,u,!0));case 36:case"end":return o.stop()}}),i,this,[[6,33],[20,26]])})).bind(this))()}},{key:"getRouteInfo",value:function(e,t,r,n,a,u){return i(o.default.mark((function i(){var c,s,l,f,p,d,v,y,g,_,b,w,S,P;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(o.prev=0,c=this,s=this.components[e],!u.shallow||!s||this.route!==e){o.next=5;break}return o.abrupt("return",s);case 5:if(l=void 0,s&&!("initial"in s)&&(l=s),o.t0=l,o.t0){o.next=12;break}return o.next=11,this.fetchComponent(e).then((function(e){return{Component:e.page,styleSheets:e.styleSheets,__N_SSG:e.mod.__N_SSG,__N_SSP:e.mod.__N_SSP,__N_RSC:!!e.page.__next_rsc__}}));case 11:o.t0=o.sent;case 12:f=o.t0,p=f.Component,d=f.__N_SSG,v=f.__N_SSP,y=f.__N_RSC,o.next=18;break;case 18:return(d||v||y)&&(g=this.pageLoader.getDataHref({href:m.formatWithValidation({pathname:t,query:r}),asPath:a,ssg:d,rsc:y,locale:this.locale})),o.next=22,this._getData((function(){return d||v?H(g,c.isSsr,!1,d?c.sdc:c.sdr,!!d&&!c.isPreview):c.getInitialProps(p,{pathname:t,query:r,asPath:n,locale:c.locale,locales:c.locales,defaultLocale:c.defaultLocale})}));case 22:if(_=o.sent,!y){o.next=31;break}return b=this,o.next=27,this._getData((function(){return b._getFlightData(g)}));case 27:w=o.sent,S=w.fresh,P=w.data,_.pageProps=Object.assign(_.pageProps,{__flight_serialized__:P,__flight_fresh__:S});case 31:return f.props=_,this.components[e]=f,o.abrupt("return",f);case 36:return o.prev=36,o.t1=o.catch(0),o.abrupt("return",this.handleRouteInfoError(h.default(o.t1)?o.t1:new Error(o.t1+""),t,r,n,u));case 39:case"end":return o.stop()}}),i,this,[[0,36]])})).bind(this))()}},{key:"set",value:function(e,t,r,n,o,a){return this.isFallback=!1,this.route=e,this.pathname=t,this.query=r,this.asPath=n,this.notify(o,a)}},{key:"beforePopState",value:function(e){this._bps=e}},{key:"onlyAHashChange",value:function(e){if(!this.asPath)return!1;var t=l(this.asPath.split("#"),2),r=t[0],n=t[1],o=l(e.split("#"),2),a=o[0],i=o[1];return!(!i||r!==a||n!==i)||r===a&&n!==i}},{key:"scrollToHash",value:function(e){var t=l(e.split("#"),2)[1];if(""!==t&&"top"!==t){var r=document.getElementById(t);if(r)r.scrollIntoView();else{var n=document.getElementsByName(t)[0];n&&n.scrollIntoView()}}else window.scrollTo(0,0)}},{key:"urlIsNew",value:function(e){return this.asPath!==e}},{key:"prefetch",value:function(e,t,r){var n=void 0===t?e:t,a=void 0===r?{}:r;return i(o.default.mark((function t(){var r,i,u,c,l,p,h,d,v,y,g;return o.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=this,i=_.parseRelativeUrl(e),u=i.pathname,c=i.query,t.next=6,this.pageLoader.getPageList();case 6:l=t.sent,p=n,t.next=21;break;case 13:d=t.sent,h=d.__rewrites,v=w.default(A(R(n,this.locale)),l,h,i.query,(function(e){return B(e,l)}),this.locales),p=k(T(v.asPath),this.locale),v.matchedPage&&v.resolvedHref&&(u=v.resolvedHref,i.pathname=u,e=m.formatWithValidation(i)),t.next=22;break;case 21:i.pathname=B(i.pathname,l),i.pathname!==u&&(u=i.pathname,i.pathname=u,e=m.formatWithValidation(i));case 22:t.next=24;break;case 24:return t.next=26,this._preflightRequest({as:A(n),cache:!0,pages:l,pathname:u,query:c});case 26:return"rewrite"===(y=t.sent).type&&(i.pathname=y.resolvedHref,u=y.resolvedHref,c=s({},c,y.parsedAs.query),p=y.asPath,e=m.formatWithValidation(i)),g=f.removePathTrailingSlash(u),t.next=31,Promise.all([this.pageLoader._isSsg(g).then((function(t){return!!t&&H(r.pageLoader.getDataHref({href:e,asPath:p,ssg:!0,locale:"undefined"!==typeof a.locale?a.locale:r.locale}),!1,!1,r.sdc,!0)})),this.pageLoader[a.priority?"loadPage":"prefetch"](g)]);case 31:case"end":return t.stop()}}),t,this)})).bind(this))()}},{key:"fetchComponent",value:function(e){return i(o.default.mark((function t(){var r,n,a,i,u;return o.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=this,n=!1,a=this.clc=function(){n=!0},i=function(){if(n){var t=new Error('Abort fetching component for route: "'.concat(e,'"'));throw t.cancelled=!0,t}a===r.clc&&(r.clc=null)},t.prev=4,t.next=7,this.pageLoader.loadPage(e);case 7:return u=t.sent,i(),t.abrupt("return",u);case 12:throw t.prev=12,t.t0=t.catch(4),i(),t.t0;case 16:case"end":return t.stop()}}),t,this,[[4,12]])})).bind(this))()}},{key:"_getData",value:function(e){var t=this,r=!1,n=function(){r=!0};return this.clc=n,e().then((function(e){if(n===t.clc&&(t.clc=null),r){var o=new Error("Loading initial props cancelled");throw o.cancelled=!0,o}return e}))}},{key:"_getFlightData",value:function(e){var t=this,r=new URL(e,window.location.href).href;return!this.isPreview&&this.sdc[r]?Promise.resolve({fresh:!1,data:this.sdc[r]}):H(e,!0,!0,this.sdc,!1).then((function(e){return t.sdc[r]=e,{fresh:!0,data:e}}))}},{key:"_preflightRequest",value:function(e){return i(o.default.mark((function t(){var r,n,a,i,u,c,s,p,h,d,y;return o.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=k(C(e.as)?T(e.as):e.as,this.locale),t.next=4,this.pageLoader.getMiddlewareList();case 4:if(t.sent.some((function(e){var t=l(e,2),r=t[0],o=t[1];return S.getRouteMatcher(x.getMiddlewareRegex(r,!o))(n)}))){t.next=8;break}return t.abrupt("return",{type:"next"});case 8:return t.next=10,this._getPreflightData({preflightHref:e.as,shouldCache:e.cache});case 10:if(a=t.sent,!(null===(r=a.rewrite)||void 0===r?void 0:r.startsWith("/"))){t.next=18;break}return i=_.parseRelativeUrl(v.normalizeLocalePath(C(a.rewrite)?T(a.rewrite):a.rewrite,this.locales).pathname),u=f.removePathTrailingSlash(i.pathname),e.pages.includes(u)?(c=!0,s=u):(s=B(u,e.pages))!==i.pathname&&e.pages.includes(s)&&(c=!0),t.abrupt("return",{type:"rewrite",asPath:i.pathname,parsedAs:i,matchedPage:c,resolvedHref:s});case 18:if(!a.redirect){t.next=24;break}if(!a.redirect.startsWith("/")){t.next=23;break}return p=f.removePathTrailingSlash(v.normalizeLocalePath(C(a.redirect)?T(a.redirect):a.redirect,this.locales).pathname),h=D(this,p,p),d=h.url,y=h.as,t.abrupt("return",{type:"redirect",newUrl:d,newAs:y});case 23:return t.abrupt("return",{type:"redirect",destination:a.redirect});case 24:if(!a.refresh||a.ssr){t.next=26;break}return t.abrupt("return",{type:"refresh"});case 26:return t.abrupt("return",{type:"next"});case 27:case"end":return t.stop()}}),t,this)})).bind(this))()}},{key:"_getPreflightData",value:function(e){var t=this,r=this,n=e.preflightHref,o=e.shouldCache,a=void 0!==o&&o,i=new URL(n,window.location.href).href;return!this.isPreview&&a&&this.sde[i]?Promise.resolve(this.sde[i]):fetch(n,{method:"HEAD",credentials:"same-origin",headers:{"x-middleware-preflight":"1"}}).then((function(e){if(!e.ok)throw new Error("Failed to preflight request");return{redirect:e.headers.get("Location"),refresh:e.headers.has("x-middleware-refresh"),rewrite:e.headers.get("x-middleware-rewrite"),ssr:!!e.headers.get("x-middleware-ssr")}})).then((function(e){return a&&(t.sde[i]=e),e})).catch((function(e){throw delete r.sde[i],e}))}},{key:"getInitialProps",value:function(e,t){var r=this.components["/_app"].Component,n=this._wrapApp(r);return t.AppTree=n,m.loadGetInitialProps(r,{AppTree:n,Component:e,router:this,ctx:t})}},{key:"abortComponentLoad",value:function(t,r){this.clc&&(e.events.emit("routeChangeError",O(),t,r),this.clc(),this.clc=null)}},{key:"notify",value:function(e,t){return this.sub(e,this.components["/_app"].Component,t)}}])&&u(t.prototype,r),n&&u(t,n),e}();U.events=y.default(),t.default=U},4611:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatUrl=function(e){var t=e.auth,r=e.hostname,a=e.protocol||"",i=e.pathname||"",u=e.hash||"",c=e.query||"",s=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?s=t+e.host:r&&(s=t+(~r.indexOf(":")?"[".concat(r,"]"):r),e.port&&(s+=":"+e.port));c&&"object"===typeof c&&(c=String(n.urlQueryToSearchParams(c)));var l=e.search||c&&"?".concat(c)||"";a&&":"!==a.substr(-1)&&(a+=":");e.slashes||(!a||o.test(a))&&!1!==s?(s="//"+(s||""),i&&"/"!==i[0]&&(i="/"+i)):s||(s="");u&&"#"!==u[0]&&(u="#"+u);l&&"?"!==l[0]&&(l="?"+l);return i=i.replace(/[?#]/g,encodeURIComponent),l=l.replace("#","%23"),"".concat(a).concat(s).concat(i).concat(l).concat(u)};var n=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){var n=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,r):{};n.get||n.set?Object.defineProperty(t,r,n):t[r]=e[r]}return t.default=e,t}(r(466));var o=/https?|ftp|gopher|file/},3891:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var r=void 0===t?"":t;return("/"===e?"/index":/^\/index(\/|$)/.test(e)?"/index".concat(e):"".concat(e))+r}},9820:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getMiddlewareRegex=function(e,t){var r=void 0===t||t,o=n.getParametrizedRoute(e),a=r?"(?!_next).*":"",i=r?"(?:(/.*)?)":"";if("routeKeys"in o)return"/"===o.parameterizedRoute?{groups:{},namedRegex:"^/".concat(a,"$"),re:new RegExp("^/".concat(a,"$")),routeKeys:{}}:{groups:o.groups,namedRegex:"^".concat(o.namedParameterizedRoute).concat(i,"$"),re:new RegExp("^".concat(o.parameterizedRoute).concat(i,"$")),routeKeys:o.routeKeys};if("/"===o.parameterizedRoute)return{groups:{},re:new RegExp("^/".concat(a,"$"))};return{groups:{},re:new RegExp("^".concat(o.parameterizedRoute).concat(i,"$"))}};var n=r(4095)},8689:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isDynamicRoute=function(e){return r.test(e)};var r=/\/\[[^/]+?\](?=\/|$)/},6305:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parseRelativeUrl=function(e,t){var r=new URL(n.getLocationOrigin()),a=t?new URL(t,r):r,i=new URL(e,a),u=i.pathname,c=i.searchParams,s=i.search,l=i.hash,f=i.href;if(i.origin!==r.origin)throw new Error("invariant: invalid relative URL, router received ".concat(e));return{pathname:u,query:o.searchParamsToUrlQuery(c),search:s,hash:l,href:f.slice(r.origin.length)}};var n=r(3794),o=r(466)},466:function(e,t){"use strict";function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(c){o=!0,a=c}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function n(e){return"string"===typeof e||"number"===typeof e&&!isNaN(e)||"boolean"===typeof e?String(e):""}Object.defineProperty(t,"__esModule",{value:!0}),t.searchParamsToUrlQuery=function(e){var t={};return e.forEach((function(e,r){"undefined"===typeof t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]})),t},t.urlQueryToSearchParams=function(e){var t=new URLSearchParams;return Object.entries(e).forEach((function(e){var o=r(e,2),a=o[0],i=o[1];Array.isArray(i)?i.forEach((function(e){return t.append(a,n(e))})):t.set(a,n(i))})),t},t.assign=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n=0&&(o||r)&&(t.delta=t.value-(n||0),(t.delta||void 0===n)&&(n=t.value,e(t)))}},l=-1,f=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){u((function(e){var t=e.timeStamp;l=t}),!0)},h=function(){return l<0&&(l=f(),p(),c((function(){setTimeout((function(){l=f(),p()}),0)}))),{get firstHiddenTime(){return l}}},d=function(e,t){var r,n=h(),o=a("FCP"),u=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var r=function(){_(e,t),o()},n=function(){o()},o=function(){removeEventListener("pointerup",r,m),removeEventListener("pointercancel",n,m)};addEventListener("pointerup",r,m),addEventListener("pointercancel",n,m)}(t,e):_(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,w,m)}))},P=new Set;e.getCLS=function(e,t){v||(d((function(e){y=e.value})),v=!0);var r,n=function(t){y>-1&&e(t)},o=a("CLS",0),l=0,f=[],p=function(e){if(!e.hadRecentInput){var t=f[0],n=f[f.length-1];l&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(l+=e.value,f.push(e)):(l=e.value,f=[e]),l>o.value&&(o.value=l,o.entries=f,r())}},h=i("layout-shift",p);h&&(r=s(n,o,t),u((function(){h.takeRecords().map(p),r(!0)})),c((function(){l=0,y=-1,o=a("CLS",0),r=s(n,o,t)})))},e.getFCP=d,e.getFID=function(e,n){var l,f=h(),p=a("FID"),d=function(e){e.startTime=0;--a){var i=this.tryEntries[a],u=i.completion;if("root"===i.tryLoc)return o("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),s=n.call(i,"finallyLoc");if(c&&s){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),O(r),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;O(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:k(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),d}},e}(e.exports);try{regeneratorRuntime=t}catch(r){Function("r","regeneratorRuntime = r")(t)}},4155:function(e){var t,r,n=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function i(e){if(t===setTimeout)return setTimeout(e,0);if((t===o||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(r){try{return t.call(null,e,0)}catch(r){return t.call(this,e,0)}}}!function(){try{t="function"===typeof setTimeout?setTimeout:o}catch(e){t=o}try{r="function"===typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var u,c=[],s=!1,l=-1;function f(){s&&u&&(s=!1,u.length?c=u.concat(c):l=-1,c.length&&p())}function p(){if(!s){var e=i(f);s=!0;for(var t=c.length;t;){for(u=c,c=[];++l1)for(var r=1;r>>0}},5919:function(e,t,r){"use strict";t.__esModule=!0,t.useStyleRegistry=t.createStyleRegistry=t.StyleRegistry=void 0;var n=r(8122);t.StyleRegistry=n.StyleRegistry,t.createStyleRegistry=n.createStyleRegistry,t.useStyleRegistry=n.useStyleRegistry},9035:function(e,t,r){"use strict";t.__esModule=!0,t.computeId=function(e,t){if(!t)return"jsx-"+e;var r=String(t),n=e+r;a[n]||(a[n]="jsx-"+(0,o.default)(e+"-"+r));return a[n]},t.computeSelector=function(e,t){"undefined"===typeof window&&(t=t.replace(/\/style/gi,"\\/style"));var r=e+t;a[r]||(a[r]=t.replace(/__jsx-style-dynamic-selector/g,e));return a[r]};var n,o=(n=r(9887))&&n.__esModule?n:{default:n};var a={}},4287:function(e,t,r){"use strict";var n=r(4155);function o(e,t){for(var r=0;r1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then((function(r){return t.resolve(e()).then((function(){return r}))}),(function(r){return t.resolve(e()).then((function(){throw r}))}))})},6086:function(e){"use strict";var t=Object.assign.bind(Object);e.exports=t,e.exports.default=e.exports},6007:function(e,t){"use strict";function r(e,t){return null!=t&&"undefined"!==typeof Symbol&&t[Symbol.hasInstance]?t[Symbol.hasInstance](e):e instanceof t}Object.defineProperty(t,"__esModule",{value:!0}),t.isEqualNode=a,t.default=function(){var e=null;return{mountedInstances:new Set,updateHead:function(t){var r=e=Promise.resolve().then((function(){if(r===e){e=null;var n={};t.forEach((function(e){if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'.concat(e.props["data-href"],'"]')))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}var t=n[e.type]||[];t.push(e),n[e.type]=t}));var i=n.title?n.title[0]:null,u="";if(i){var c=i.props.children;u="string"===typeof c?c:Array.isArray(c)?c.join(""):""}u!==document.title&&(document.title=u),["meta","base","link","style","script"].forEach((function(e){!function(e,t){var r=document.getElementsByTagName("head")[0],n=r.querySelector("meta[name=next-head-count]");0;for(var i=Number(n.content),u=[],c=0,s=n.previousElementSibling;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var f=new Map,p=new Set,h=["onLoad","dangerouslySetInnerHTML","children","onError","strategy"],d=function(e){var t=e.src,r=e.id,o=e.onLoad,a=void 0===o?function(){}:o,u=e.dangerouslySetInnerHTML,c=e.children,s=void 0===c?"":c,l=e.strategy,d=void 0===l?"afterInteractive":l,v=e.onError,y=r||t;if(!y||!p.has(y)){if(f.has(t))return p.add(y),void f.get(t).then(a,v);var m=document.createElement("script"),g=new Promise((function(e,t){m.addEventListener("load",(function(t){e(),a&&a.call(this,t)})),m.addEventListener("error",(function(e){t(e)}))})).catch((function(e){v&&v(e)}));t&&f.set(t,g),p.add(y),u?m.innerHTML=u.__html||"":s?m.textContent="string"===typeof s?s:Array.isArray(s)?s.join(""):"":t&&(m.src=t);var _=!0,b=!1,w=void 0;try{for(var S,P=Object.entries(e)[Symbol.iterator]();!(_=(S=P.next()).done);_=!0){var x=n(S.value,2),E=x[0],O=x[1];if(void 0!==O&&!h.includes(E)){var R=i.DOMAttributeNames[E]||E.toLowerCase();m.setAttribute(R,O)}}}catch(k){b=!0,w=k}finally{try{_||null==P.return||P.return()}finally{if(b)throw w}}m.setAttribute("data-nscript",d),document.body.appendChild(m)}};function v(e){var t=e.strategy,r=void 0===t?"afterInteractive":t;"afterInteractive"===r?d(e):"lazyOnload"===r&&window.addEventListener("load",(function(){u.requestIdleCallback((function(){return d(e)}))}))}},7813:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.trackWebVitalMetric=function(e){a.push(e),o.forEach((function(t){return t(e)}))},t.useExperimentalWebVitalsReport=function(e){var t=n.useRef(0);n.useEffect((function(){for(var r=function(r){e(r),t.current=a.length},n=t.current;n0){i=!0;var u=o.key.slice(o.key.indexOf("$")+1);e.has(u)?a=!1:e.add(u)}switch(o.type){case"title":case"base":t.has(o.type)?a=!1:t.add(o.type);break;case"meta":for(var c=0,s=p.length;c>>0,1)},emit:function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a-1||r>-1)&&(e=e.substring(0,t>-1?t:r)),e}function C(e){return""===(e=j(e))||e.startsWith("/")}function A(e){return function(e,t){if(!e.startsWith("/")||!t)return e;var r=j(e);return f.normalizePathTrailingSlash("".concat(t).concat(r))+e.substr(r.length)}(e,"")}function T(e){return(e=e.slice("".length)).startsWith("/")||(e="/".concat(e)),e}function L(e){if(e.startsWith("/")||e.startsWith("#")||e.startsWith("?"))return!0;try{var t=m.getLocationOrigin(),r=new URL(e,t);return r.origin===t&&C(r.pathname)}catch(n){return!1}}function M(e,t,r){var n="",o=P.getRouteRegex(e),a=o.groups,i=(t!==e?S.getRouteMatcher(o)(t):"")||r;n=e;var u=Object.keys(a);return u.every((function(e){var t=i[e]||"",r=a[e],o=r.repeat,u=r.optional,c="[".concat(o?"...":"").concat(e,"]");return u&&(c="".concat(t?"":"/","[").concat(c,"]")),o&&!Array.isArray(t)&&(t=[t]),(u||e in i)&&(n=n.replace(c,o?t.map((function(e){return encodeURIComponent(e)})).join("/"):encodeURIComponent(t))||"/")}))||(n=""),{params:u,result:n}}function I(e,t){var r={};return Object.keys(e).forEach((function(n){t.includes(n)||(r[n]=e[n])})),r}function N(e,t,r){var n,o="string"===typeof t?t:m.formatWithValidation(t),a=o.match(/^[a-zA-Z]{1,}:\/\//),i=a?o.substr(a[0].length):o;if((i.split("?")[0]||"").match(/(\/\/|\\)/)){console.error("Invalid href passed to next/router: ".concat(o,", repeated forward-slashes (//) or backslashes \\ are not valid in the href"));var u=m.normalizeRepeatedSlashes(i);o=(a?a[0]:"")+u}if(!L(o))return r?[o]:o;try{n=new URL(o.startsWith("#")?e.asPath:e.pathname,"http://n")}catch(y){n=new URL("/","http://n")}try{var c=new URL(o,n);c.pathname=f.normalizePathTrailingSlash(c.pathname);var s="";if(g.isDynamicRoute(c.pathname)&&c.searchParams&&r){var l=b.searchParamsToUrlQuery(c.searchParams),p=M(c.pathname,c.pathname,l),h=p.result,d=p.params;h&&(s=m.formatWithValidation({pathname:h,hash:c.hash,query:I(l,d)}))}var v=c.origin===n.origin?c.href.slice(c.origin.length):c.href;return r?[v,s||v]:v}catch(_){return r?[o]:o}}function F(e){var t=m.getLocationOrigin();return e.startsWith(t)?e.substring(t.length):e}function D(e,t,r){var n=l(N(e,t,!0),2),o=n[0],a=n[1],i=m.getLocationOrigin(),u=o.startsWith(i),c=a&&a.startsWith(i);o=F(o),a=a?F(a):a;var s=u?o:A(o),f=r?F(N(e,r)):a||o;return{url:s,as:c?f:A(f)}}function B(e,t){var r=f.removePathTrailingSlash(d.denormalizePagePath(e));return"/404"===r||"/_error"===r?e:(t.includes(r)||t.some((function(t){if(g.isDynamicRoute(t)&&P.getRouteRegex(t).re.test(r))return e=t,!0})),f.removePathTrailingSlash(e))}var q=Symbol("SSG_DATA_NOT_FOUND");function z(e,t,r){return fetch(e,{credentials:"same-origin"}).then((function(n){if(!n.ok){if(t>1&&n.status>=500)return z(e,t-1,r);if(404===n.status)return n.json().then((function(e){if(e.notFound)return{notFound:q};throw new Error("Failed to load static props")}));throw new Error("Failed to load static props")}return r.text?n.text():n.json()}))}function H(e,t,r,n,o){var a=new URL(e,window.location.href).href;return void 0!==n[a]?n[a]:n[a]=z(e,t?3:1,{text:r}).catch((function(e){throw t||p.markAssetError(e),e})).then((function(e){return o||delete n[a],e})).catch((function(e){throw delete n[a],e}))}var U=function(){function e(t,r,n,o){var a,i=o.initialProps,u=o.pageLoader,c=o.App,s=o.wrapApp,l=o.Component,p=o.err,h=o.subscription,d=o.isFallback,v=o.locale,y=(o.locales,o.defaultLocale,o.domainLocales,o.isPreview),b=this;(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.sdc={},this.sdr={},this.sde={},this._idx=0,this.onPopState=function(e){var t=e.state;if(t){if(t.__N){var r=t.url,n=t.as,o=t.options,a=t.idx;b._idx=a;var i=_.parseRelativeUrl(r).pathname;b.isSsr&&n===b.asPath&&i===b.pathname||b._bps&&!b._bps(t)||b.change("replaceState",r,n,Object.assign({},o,{shallow:o.shallow&&b._shallow,locale:o.locale||b.defaultLocale}),undefined)}}else{var u=b.pathname,c=b.query;b.changeState("replaceState",m.formatWithValidation({pathname:A(u),query:c}),m.getURL())}},this.route=f.removePathTrailingSlash(t),this.components={},"/_error"!==t)&&(this.components[this.route]={Component:l,initial:!0,props:i,err:p,__N_SSG:i&&i.__N_SSG,__N_SSP:i&&i.__N_SSP,__N_RSC:!!(null===(a=l)||void 0===a?void 0:a.__next_rsc__)});this.components["/_app"]={Component:c,styleSheets:[]},this.events=e.events,this.pageLoader=u,this.pathname=t,this.query=r;var w=g.isDynamicRoute(t)&&self.__NEXT_DATA__.autoExport;if(this.asPath=w?t:n,this.basePath="",this.sub=h,this.clc=null,this._wrapApp=s,this.isSsr=!0,this.isFallback=d,this.isReady=!!(self.__NEXT_DATA__.gssp||self.__NEXT_DATA__.gip||self.__NEXT_DATA__.appGip&&!self.__NEXT_DATA__.gsp||!w&&!self.location.search),this.isPreview=!!y,this.isLocaleDomain=!1,"//"!==n.substr(0,2)){var S={locale:v};S._shouldResolveHref=n!==t,this.changeState("replaceState",m.formatWithValidation({pathname:A(t),query:r}),m.getURL(),S)}window.addEventListener("popstate",this.onPopState)}var t,r,n;return t=e,(r=[{key:"reload",value:function(){window.location.reload()}},{key:"back",value:function(){window.history.back()}},{key:"push",value:function(e,t,r){var n,o=void 0===r?{}:r;return e=(n=D(this,e,t)).url,t=n.as,this.change("pushState",e,t,o)}},{key:"replace",value:function(e,t,r){var n,o=void 0===r?{}:r;return e=(n=D(this,e,t)).url,t=n.as,this.change("replaceState",e,t,o)}},{key:"change",value:function(t,r,n,a,u){return i(o.default.mark((function i(){var c,d,v,y,b,w,x,E,O,N,F,z,H,U,W,G,V,$,X,K,Q,Y,J,Z,ee,te,re,ne,oe,ae,ie,ue,ce,se,le,fe,pe,he;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(L(r)){o.next=3;break}return window.location.href=r,o.abrupt("return",!1);case 3:c=a._h||a._shouldResolveHref||j(r)===j(n),a._h&&(this.isReady=!0),d=this.locale,o.next=18;break;case 18:if(a._h||(this.isSsr=!1),m.ST&&performance.mark("routeChange"),v=a.shallow,y={shallow:void 0!==v&&v},this._inFlightRoute&&this.abortComponentLoad(this._inFlightRoute,y),n=A(R(C(n)?T(n):n,a.locale,this.defaultLocale)),b=k(C(n)?T(n):n,this.locale),this._inFlightRoute=n,w=d!==this.locale,a._h||!this.onlyAHashChange(b)||w){o.next=35;break}return this.asPath=b,e.events.emit("hashChangeStart",n,y),this.changeState(t,r,n,a),this.scrollToHash(b),this.notify(this.components[this.route],null),e.events.emit("hashChangeComplete",n,y),o.abrupt("return",!0);case 35:return x=_.parseRelativeUrl(r),E=x.pathname,O=x.query,o.prev=38,o.t0=l,o.next=43,Promise.all([this.pageLoader.getPageList(),p.getClientBuildManifest(),this.pageLoader.getMiddlewareList()]);case 43:o.t1=o.sent,F=(0,o.t0)(o.t1,2),N=F[0],F[1].__rewrites,o.next=54;break;case 50:return o.prev=50,o.t2=o.catch(38),window.location.href=n,o.abrupt("return",!1);case 54:if(this.urlIsNew(b)||w||(t="replaceState"),z=n,E=E?f.removePathTrailingSlash(T(E)):E,c&&"/_error"!==E&&(a._shouldResolveHref=!0,x.pathname=B(E,N),x.pathname!==E&&(E=x.pathname,x.pathname=A(E),r=m.formatWithValidation(x))),L(n)){o.next=63;break}o.next=61;break;case 61:return window.location.href=n,o.abrupt("return",!1);case 63:if(z=k(T(z),this.locale),1===a._h){o.next=84;break}return o.next=67,this._preflightRequest({as:n,cache:!0,pages:N,pathname:E,query:O});case 67:if("rewrite"!==(H=o.sent).type){o.next=72;break}O=s({},O,H.parsedAs.query),z=H.asPath,E=H.resolvedHref,x.pathname=H.resolvedHref,r=m.formatWithValidation(x),o.next=84;break;case 72:if("redirect"!==H.type||!H.newAs){o.next=76;break}return o.abrupt("return",this.change(t,H.newUrl,H.newAs,a));case 76:if("redirect"!==H.type||!H.destination){o.next=81;break}return window.location.href=H.destination,o.abrupt("return",new Promise((function(){})));case 81:if("refresh"!==H.type){o.next=84;break}return window.location.href=n,o.abrupt("return",new Promise((function(){})));case 84:if(U=f.removePathTrailingSlash(E),!g.isDynamicRoute(U)){o.next=100;break}if(W=_.parseRelativeUrl(z),G=W.pathname,V=P.getRouteRegex(U),$=S.getRouteMatcher(V)(G),K=(X=U===G)?M(U,G,O):{},$&&(!X||K.result)){o.next=99;break}if(!((Q=Object.keys(V.groups).filter((function(e){return!O[e]}))).length>0)){o.next=97;break}throw new Error((X?"The provided `href` (".concat(r,") value is missing query values (").concat(Q.join(", "),") to be interpolated properly. "):"The provided `as` value (".concat(G,") is incompatible with the `href` value (").concat(U,"). "))+"Read more: https://nextjs.org/docs/messages/".concat(X?"href-interpolation-failed":"incompatible-href-as"));case 97:o.next=100;break;case 99:X?n=m.formatWithValidation(Object.assign({},W,{pathname:K.result,query:I(O,K.params)})):Object.assign(O,$);case 100:return e.events.emit("routeChangeStart",n,y),o.prev=101,o.next=105,this.getRouteInfo(U,E,O,n,z,y);case 105:if(Z=o.sent,ee=Z.error,te=Z.props,re=Z.__N_SSG,ne=Z.__N_SSP,!re&&!ne||!te){o.next=132;break}if(!te.pageProps||!te.pageProps.__N_REDIRECT){o.next=117;break}if(!(oe=te.pageProps.__N_REDIRECT).startsWith("/")||!1===te.pageProps.__N_REDIRECT_BASE_PATH){o.next=115;break}return(ae=_.parseRelativeUrl(oe)).pathname=B(ae.pathname,N),ie=D(this,oe,oe),ue=ie.url,ce=ie.as,o.abrupt("return",this.change(t,ue,ce,a));case 115:return window.location.href=oe,o.abrupt("return",new Promise((function(){})));case 117:if(this.isPreview=!!te.__N_PREVIEW,te.notFound!==q){o.next=132;break}return o.prev=120,o.next=123,this.fetchComponent("/404");case 123:se="/404",o.next=129;break;case 126:o.prev=126,o.t3=o.catch(120),se="/_error";case 129:return o.next=131,this.getRouteInfo(se,se,O,n,z,{shallow:!1});case 131:Z=o.sent;case 132:return e.events.emit("beforeHistoryChange",n,y),this.changeState(t,r,n,a),a._h&&"/_error"===E&&500===(null===(Y=self.__NEXT_DATA__.props)||void 0===Y||null===(J=Y.pageProps)||void 0===J?void 0:J.statusCode)&&(null===te||void 0===te?void 0:te.pageProps)&&(te.pageProps.statusCode=500),le=a.shallow&&this.route===U,pe=null!==(fe=a.scroll)&&void 0!==fe?fe:!le,he=pe?{x:0,y:0}:null,o.next=141,this.set(U,E,O,b,Z,null!==u&&void 0!==u?u:he).catch((function(e){if(!e.cancelled)throw e;ee=ee||e}));case 141:if(!ee){o.next=144;break}throw e.events.emit("routeChangeError",ee,b,y),ee;case 144:return e.events.emit("routeChangeComplete",n,y),o.abrupt("return",!0);case 149:if(o.prev=149,o.t4=o.catch(101),!h.default(o.t4)||!o.t4.cancelled){o.next=153;break}return o.abrupt("return",!1);case 153:throw o.t4;case 154:case"end":return o.stop()}}),i,this,[[38,50],[101,149],[120,126]])})).bind(this))()}},{key:"changeState",value:function(e,t,r,n){var o=void 0===n?{}:n;"pushState"===e&&m.getURL()===r||(this._shallow=o.shallow,window.history[e]({url:t,as:r,options:o,__N:!0,idx:this._idx="pushState"!==e?this._idx:this._idx+1},"",r))}},{key:"handleRouteInfoError",value:function(t,r,n,a,u,c){return i(o.default.mark((function i(){var s,l,f,d;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(!t.cancelled){o.next=2;break}throw t;case 2:if(!p.isAssetError(t)&&!c){o.next=6;break}throw e.events.emit("routeChangeError",t,a,u),window.location.href=a,O();case 6:if(o.prev=6,"undefined"!==typeof s&&"undefined"!==typeof l){o.next=18;break}return o.next=14,this.fetchComponent("/_error");case 14:f=o.sent,s=f.page,l=f.styleSheets;case 18:if((d={props:void 0,Component:s,styleSheets:l,err:t,error:t}).props){o.next=30;break}return o.prev=20,o.next=23,this.getInitialProps(s,{err:t,pathname:r,query:n});case 23:d.props=o.sent,o.next=30;break;case 26:o.prev=26,o.t0=o.catch(20),console.error("Error in error page `getInitialProps`: ",o.t0),d.props={};case 30:return o.abrupt("return",d);case 33:return o.prev=33,o.t1=o.catch(6),o.abrupt("return",this.handleRouteInfoError(h.default(o.t1)?o.t1:new Error(o.t1+""),r,n,a,u,!0));case 36:case"end":return o.stop()}}),i,this,[[6,33],[20,26]])})).bind(this))()}},{key:"getRouteInfo",value:function(e,t,r,n,a,u){var c=this;return i(o.default.mark((function i(){var s,l,f,p,d,v,y,g,_,b,w,S;return o.default.wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(o.prev=0,s=this.components[e],!u.shallow||!s||this.route!==e){o.next=4;break}return o.abrupt("return",s);case 4:if(l=void 0,s&&!("initial"in s)&&(l=s),o.t0=l,o.t0){o.next=11;break}return o.next=10,this.fetchComponent(e).then((function(e){return{Component:e.page,styleSheets:e.styleSheets,__N_SSG:e.mod.__N_SSG,__N_SSP:e.mod.__N_SSP,__N_RSC:!!e.page.__next_rsc__}}));case 10:o.t0=o.sent;case 11:f=o.t0,p=f.Component,d=f.__N_SSG,v=f.__N_SSP,y=f.__N_RSC,o.next=17;break;case 17:return(d||v||y)&&(g=this.pageLoader.getDataHref({href:m.formatWithValidation({pathname:t,query:r}),asPath:a,ssg:d,rsc:y,locale:this.locale})),o.next=21,this._getData((function(){return d||v?H(g,c.isSsr,!1,d?c.sdc:c.sdr,!!d&&!c.isPreview):c.getInitialProps(p,{pathname:t,query:r,asPath:n,locale:c.locale,locales:c.locales,defaultLocale:c.defaultLocale})}));case 21:if(_=o.sent,!y){o.next=29;break}return o.next=25,this._getData((function(){return c._getFlightData(g)}));case 25:b=o.sent,w=b.fresh,S=b.data,_.pageProps=Object.assign(_.pageProps,{__flight_serialized__:S,__flight_fresh__:w});case 29:return f.props=_,this.components[e]=f,o.abrupt("return",f);case 34:return o.prev=34,o.t1=o.catch(0),o.abrupt("return",this.handleRouteInfoError(h.default(o.t1)?o.t1:new Error(o.t1+""),t,r,n,u));case 37:case"end":return o.stop()}}),i,this,[[0,34]])})).bind(this))()}},{key:"set",value:function(e,t,r,n,o,a){return this.isFallback=!1,this.route=e,this.pathname=t,this.query=r,this.asPath=n,this.notify(o,a)}},{key:"beforePopState",value:function(e){this._bps=e}},{key:"onlyAHashChange",value:function(e){if(!this.asPath)return!1;var t=l(this.asPath.split("#"),2),r=t[0],n=t[1],o=l(e.split("#"),2),a=o[0],i=o[1];return!(!i||r!==a||n!==i)||r===a&&n!==i}},{key:"scrollToHash",value:function(e){var t=l(e.split("#"),2)[1];if(""!==t&&"top"!==t){var r=document.getElementById(t);if(r)r.scrollIntoView();else{var n=document.getElementsByName(t)[0];n&&n.scrollIntoView()}}else window.scrollTo(0,0)}},{key:"urlIsNew",value:function(e){return this.asPath!==e}},{key:"prefetch",value:function(e,t,r){var n=void 0===t?e:t,a=void 0===r?{}:r,u=this;return i(o.default.mark((function t(){var r,i,c,l,p,h,d,v,y,g;return o.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=_.parseRelativeUrl(e),i=r.pathname,c=r.query,t.next=5,this.pageLoader.getPageList();case 5:l=t.sent,p=n,t.next=20;break;case 12:d=t.sent,h=d.__rewrites,v=w.default(A(R(n,this.locale)),l,h,r.query,(function(e){return B(e,l)}),this.locales),p=k(T(v.asPath),this.locale),v.matchedPage&&v.resolvedHref&&(i=v.resolvedHref,r.pathname=i,e=m.formatWithValidation(r)),t.next=21;break;case 20:r.pathname=B(r.pathname,l),r.pathname!==i&&(i=r.pathname,r.pathname=i,e=m.formatWithValidation(r));case 21:t.next=23;break;case 23:return t.next=25,this._preflightRequest({as:A(n),cache:!0,pages:l,pathname:i,query:c});case 25:return"rewrite"===(y=t.sent).type&&(r.pathname=y.resolvedHref,i=y.resolvedHref,c=s({},c,y.parsedAs.query),p=y.asPath,e=m.formatWithValidation(r)),g=f.removePathTrailingSlash(i),t.next=30,Promise.all([this.pageLoader._isSsg(g).then((function(t){return!!t&&H(u.pageLoader.getDataHref({href:e,asPath:p,ssg:!0,locale:"undefined"!==typeof a.locale?a.locale:u.locale}),!1,!1,u.sdc,!0)})),this.pageLoader[a.priority?"loadPage":"prefetch"](g)]);case 30:case"end":return t.stop()}}),t,this)})).bind(this))()}},{key:"fetchComponent",value:function(e){var t=this;return i(o.default.mark((function r(){var n,a,i,u;return o.default.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return n=!1,a=this.clc=function(){n=!0},i=function(){if(n){var r=new Error('Abort fetching component for route: "'.concat(e,'"'));throw r.cancelled=!0,r}a===t.clc&&(t.clc=null)},r.prev=3,r.next=6,this.pageLoader.loadPage(e);case 6:return u=r.sent,i(),r.abrupt("return",u);case 11:throw r.prev=11,r.t0=r.catch(3),i(),r.t0;case 15:case"end":return r.stop()}}),r,this,[[3,11]])})).bind(this))()}},{key:"_getData",value:function(e){var t=this,r=!1,n=function(){r=!0};return this.clc=n,e().then((function(e){if(n===t.clc&&(t.clc=null),r){var o=new Error("Loading initial props cancelled");throw o.cancelled=!0,o}return e}))}},{key:"_getFlightData",value:function(e){var t=this,r=new URL(e,window.location.href).href;return!this.isPreview&&this.sdc[r]?Promise.resolve({fresh:!1,data:this.sdc[r]}):H(e,!0,!0,this.sdc,!1).then((function(e){return t.sdc[r]=e,{fresh:!0,data:e}}))}},{key:"_preflightRequest",value:function(e){return i(o.default.mark((function t(){var r,n,a,i,u,c,s,p,h,d,y;return o.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=k(C(e.as)?T(e.as):e.as,this.locale),t.next=4,this.pageLoader.getMiddlewareList();case 4:if(t.sent.some((function(e){var t=l(e,2),r=t[0],o=t[1];return S.getRouteMatcher(x.getMiddlewareRegex(r,!o))(n)}))){t.next=8;break}return t.abrupt("return",{type:"next"});case 8:return t.next=10,this._getPreflightData({preflightHref:e.as,shouldCache:e.cache});case 10:if(a=t.sent,!(null===(r=a.rewrite)||void 0===r?void 0:r.startsWith("/"))){t.next=18;break}return i=_.parseRelativeUrl(v.normalizeLocalePath(C(a.rewrite)?T(a.rewrite):a.rewrite,this.locales).pathname),u=f.removePathTrailingSlash(i.pathname),e.pages.includes(u)?(c=!0,s=u):(s=B(u,e.pages))!==i.pathname&&e.pages.includes(s)&&(c=!0),t.abrupt("return",{type:"rewrite",asPath:i.pathname,parsedAs:i,matchedPage:c,resolvedHref:s});case 18:if(!a.redirect){t.next=24;break}if(!a.redirect.startsWith("/")){t.next=23;break}return p=f.removePathTrailingSlash(v.normalizeLocalePath(C(a.redirect)?T(a.redirect):a.redirect,this.locales).pathname),h=D(this,p,p),d=h.url,y=h.as,t.abrupt("return",{type:"redirect",newUrl:d,newAs:y});case 23:return t.abrupt("return",{type:"redirect",destination:a.redirect});case 24:if(!a.refresh||a.ssr){t.next=26;break}return t.abrupt("return",{type:"refresh"});case 26:return t.abrupt("return",{type:"next"});case 27:case"end":return t.stop()}}),t,this)})).bind(this))()}},{key:"_getPreflightData",value:function(e){var t=this,r=e.preflightHref,n=e.shouldCache,o=void 0!==n&&n,a=new URL(r,window.location.href).href;return!this.isPreview&&o&&this.sde[a]?Promise.resolve(this.sde[a]):fetch(r,{method:"HEAD",credentials:"same-origin",headers:{"x-middleware-preflight":"1"}}).then((function(e){if(!e.ok)throw new Error("Failed to preflight request");return{redirect:e.headers.get("Location"),refresh:e.headers.has("x-middleware-refresh"),rewrite:e.headers.get("x-middleware-rewrite"),ssr:!!e.headers.get("x-middleware-ssr")}})).then((function(e){return o&&(t.sde[a]=e),e})).catch((function(e){throw delete t.sde[a],e}))}},{key:"getInitialProps",value:function(e,t){var r=this.components["/_app"].Component,n=this._wrapApp(r);return t.AppTree=n,m.loadGetInitialProps(r,{AppTree:n,Component:e,router:this,ctx:t})}},{key:"abortComponentLoad",value:function(t,r){this.clc&&(e.events.emit("routeChangeError",O(),t,r),this.clc(),this.clc=null)}},{key:"notify",value:function(e,t){return this.sub(e,this.components["/_app"].Component,t)}}])&&u(t.prototype,r),n&&u(t,n),e}();U.events=y.default(),t.default=U},4611:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatUrl=function(e){var t=e.auth,r=e.hostname,a=e.protocol||"",i=e.pathname||"",u=e.hash||"",c=e.query||"",s=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?s=t+e.host:r&&(s=t+(~r.indexOf(":")?"[".concat(r,"]"):r),e.port&&(s+=":"+e.port));c&&"object"===typeof c&&(c=String(n.urlQueryToSearchParams(c)));var l=e.search||c&&"?".concat(c)||"";a&&":"!==a.substr(-1)&&(a+=":");e.slashes||(!a||o.test(a))&&!1!==s?(s="//"+(s||""),i&&"/"!==i[0]&&(i="/"+i)):s||(s="");u&&"#"!==u[0]&&(u="#"+u);l&&"?"!==l[0]&&(l="?"+l);return i=i.replace(/[?#]/g,encodeURIComponent),l=l.replace("#","%23"),"".concat(a).concat(s).concat(i).concat(l).concat(u)};var n=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){var n=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,r):{};n.get||n.set?Object.defineProperty(t,r,n):t[r]=e[r]}return t.default=e,t}(r(466));var o=/https?|ftp|gopher|file/},3891:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var r=void 0===t?"":t;return("/"===e?"/index":/^\/index(\/|$)/.test(e)?"/index".concat(e):"".concat(e))+r}},9820:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getMiddlewareRegex=function(e,t){var r=void 0===t||t,o=n.getParametrizedRoute(e),a=r?"(?!_next).*":"",i=r?"(?:(/.*)?)":"";if("routeKeys"in o)return"/"===o.parameterizedRoute?{groups:{},namedRegex:"^/".concat(a,"$"),re:new RegExp("^/".concat(a,"$")),routeKeys:{}}:{groups:o.groups,namedRegex:"^".concat(o.namedParameterizedRoute).concat(i,"$"),re:new RegExp("^".concat(o.parameterizedRoute).concat(i,"$")),routeKeys:o.routeKeys};if("/"===o.parameterizedRoute)return{groups:{},re:new RegExp("^/".concat(a,"$"))};return{groups:{},re:new RegExp("^".concat(o.parameterizedRoute).concat(i,"$"))}};var n=r(4095)},8689:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isDynamicRoute=function(e){return r.test(e)};var r=/\/\[[^/]+?\](?=\/|$)/},6305:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parseRelativeUrl=function(e,t){var r=new URL(n.getLocationOrigin()),a=t?new URL(t,r):r,i=new URL(e,a),u=i.pathname,c=i.searchParams,s=i.search,l=i.hash,f=i.href;if(i.origin!==r.origin)throw new Error("invariant: invalid relative URL, router received ".concat(e));return{pathname:u,query:o.searchParamsToUrlQuery(c),search:s,hash:l,href:f.slice(r.origin.length)}};var n=r(3794),o=r(466)},466:function(e,t){"use strict";function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(c){o=!0,a=c}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function n(e){return"string"===typeof e||"number"===typeof e&&!isNaN(e)||"boolean"===typeof e?String(e):""}Object.defineProperty(t,"__esModule",{value:!0}),t.searchParamsToUrlQuery=function(e){var t={};return e.forEach((function(e,r){"undefined"===typeof t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]})),t},t.urlQueryToSearchParams=function(e){var t=new URLSearchParams;return Object.entries(e).forEach((function(e){var o=r(e,2),a=o[0],i=o[1];Array.isArray(i)?i.forEach((function(e){return t.append(a,n(e))})):t.set(a,n(i))})),t},t.assign=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n=0&&(o||r)&&(t.delta=t.value-(n||0),(t.delta||void 0===n)&&(n=t.value,e(t)))}},l=-1,f=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){u((function(e){var t=e.timeStamp;l=t}),!0)},h=function(){return l<0&&(l=f(),p(),c((function(){setTimeout((function(){l=f(),p()}),0)}))),{get firstHiddenTime(){return l}}},d=function(e,t){var r,n=h(),o=a("FCP"),u=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var r=function(){_(e,t),o()},n=function(){o()},o=function(){removeEventListener("pointerup",r,m),removeEventListener("pointercancel",n,m)};addEventListener("pointerup",r,m),addEventListener("pointercancel",n,m)}(t,e):_(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,w,m)}))},P=new Set;e.getCLS=function(e,t){v||(d((function(e){y=e.value})),v=!0);var r,n=function(t){y>-1&&e(t)},o=a("CLS",0),l=0,f=[],p=function(e){if(!e.hadRecentInput){var t=f[0],n=f[f.length-1];l&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(l+=e.value,f.push(e)):(l=e.value,f=[e]),l>o.value&&(o.value=l,o.entries=f,r())}},h=i("layout-shift",p);h&&(r=s(n,o,t),u((function(){h.takeRecords().map(p),r(!0)})),c((function(){l=0,y=-1,o=a("CLS",0),r=s(n,o,t)})))},e.getFCP=d,e.getFID=function(e,n){var l,f=h(),p=a("FID"),d=function(e){e.startTime=0;--a){var i=this.tryEntries[a],u=i.completion;if("root"===i.tryLoc)return o("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),s=n.call(i,"finallyLoc");if(c&&s){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),O(r),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;O(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:k(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),d}},e}(e.exports);try{regeneratorRuntime=t}catch(r){Function("r","regeneratorRuntime = r")(t)}},4155:function(e){var t,r,n=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function i(e){if(t===setTimeout)return setTimeout(e,0);if((t===o||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(r){try{return t.call(null,e,0)}catch(r){return t.call(this,e,0)}}}!function(){try{t="function"===typeof setTimeout?setTimeout:o}catch(e){t=o}try{r="function"===typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var u,c=[],s=!1,l=-1;function f(){s&&u&&(s=!1,u.length?c=u.concat(c):l=-1,c.length&&p())}function p(){if(!s){var e=i(f);s=!0;for(var t=c.length;t;){for(u=c,c=[];++l1)for(var r=1;r>>0}},5919:function(e,t,r){"use strict";t.__esModule=!0,t.useStyleRegistry=t.createStyleRegistry=t.StyleRegistry=void 0;var n=r(8122);t.StyleRegistry=n.StyleRegistry,t.createStyleRegistry=n.createStyleRegistry,t.useStyleRegistry=n.useStyleRegistry},9035:function(e,t,r){"use strict";t.__esModule=!0,t.computeId=function(e,t){if(!t)return"jsx-"+e;var r=String(t),n=e+r;a[n]||(a[n]="jsx-"+(0,o.default)(e+"-"+r));return a[n]},t.computeSelector=function(e,t){"undefined"===typeof window&&(t=t.replace(/\/style/gi,"\\/style"));var r=e+t;a[r]||(a[r]=t.replace(/__jsx-style-dynamic-selector/g,e));return a[r]};var n,o=(n=r(9887))&&n.__esModule?n:{default:n};var a={}},4287:function(e,t,r){"use strict";var n=r(4155);function o(e,t){for(var r=0;r=0||(t[a]=e[a]);return t}var l=["spacing"],u=["isCurrentPage","as","className","href"],p=["isCurrentPage","separator","isLastChild","spacing","children","className"],d=["children","spacing","separator","className"],m=(0,n.Gp)((function(e,r){var a=e.spacing,t=o(e,l),i=c({mx:a},(0,n.yK)().separator);return s.createElement(n.m$.span,c({ref:r,role:"presentation"},t,{__css:i}))}));t.Ts&&(m.displayName="BreadcrumbSeparator");var h=(0,n.Gp)((function(e,r){var a=e.isCurrentPage,i=e.as,l=e.className,p=e.href,d=o(e,u),m=(0,n.yK)(),h=c({ref:r,as:i,className:(0,t.cx)("chakra-breadcrumb__link",l)},d);return a?s.createElement(n.m$.span,c({"aria-current":"page",__css:m.link},h)):s.createElement(n.m$.a,c({__css:m.link,href:p},h))}));t.Ts&&(h.displayName="BreadcrumbLink");var f=(0,n.Gp)((function(e,r){var a=e.isCurrentPage,l=e.separator,u=e.isLastChild,d=e.spacing,f=e.children,g=e.className,x=o(e,p),v=(0,i.WR)(f).map((function(e){return e.type===h?s.cloneElement(e,{isCurrentPage:a}):e.type===m?s.cloneElement(e,{spacing:d,children:e.props.children||l}):e})),_=c({display:"inline-flex",alignItems:"center"},(0,n.yK)().item),b=(0,t.cx)("chakra-breadcrumb__list-item",g);return s.createElement(n.m$.li,c({ref:r,className:b},x,{__css:_}),v,!u&&s.createElement(m,{spacing:d},l))}));t.Ts&&(f.displayName="BreadcrumbItem");var g=(0,n.Gp)((function(e,r){var a=(0,n.jC)("Breadcrumb",e),l=(0,n.Lr)(e),u=l.children,p=l.spacing,m=void 0===p?"0.5rem":p,h=l.separator,f=void 0===h?"/":h,g=l.className,x=o(l,d),v=(0,i.WR)(u),_=v.length,b=v.map((function(e,r){return s.cloneElement(e,{separator:f,spacing:m,isLastChild:_===r+1})})),j=(0,t.cx)("chakra-breadcrumb",g);return s.createElement(n.m$.nav,c({ref:r,"aria-label":"breadcrumb",className:j,__css:a.container},x),s.createElement(n.Fo,{value:a},s.createElement(n.m$.ol,{className:"chakra-breadcrumb__list"},b)))}));t.Ts&&(g.displayName="Breadcrumb")},5553:function(e,r,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/[group]",function(){return a(2903)}])},2903:function(e,r,a){"use strict";a.r(r),a.d(r,{__N_SSG:function(){return v},default:function(){return _}});var n=a(5893),t=a(8527),i=a(1739),s=a(2438),c=a(1832),o=a(600),l=a(6673),u=a(2348),p=a(202),d=(a(7294),a(9876)),m=a(8641),h=a(5193);function f(e){var r=e.href;return(0,n.jsxs)(t.xu,{my:"30px",children:[(0,n.jsx)(t.iz,{mb:"15px",orientation:"horizontal"}),(0,n.jsx)(t.xv,{lineHeight:"23px",fontWeight:500,fontSize:"14px",color:"gray.500",mb:"10px",children:"This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic."}),(0,n.jsx)(h.zx,{size:"sm",py:"20px",as:t.rU,href:r,target:"_blank",isFullWidth:!0,colorScheme:"gray",_hover:{textDecoration:"none",bg:"gray.200"},children:"Edit this Page"})]})}function g(e){var r=e.roadmap,i=e.group;if(!r.contentPathsFilePath)return null;var s=r.contentPathsFilePath.replace(/^\//,""),c=(a(9280)("./".concat(s))[i]||"").replace(/^\//,""),o=a(9280)("./".concat(c)).default;return(0,n.jsx)(t.xu,{children:(0,n.jsxs)(u.Z,{children:[(0,n.jsx)(o,{}),(0,n.jsx)(f,{href:"".concat(m.url.repoData,"/").concat(c)})]})})}function x(e){var r=e.roadmap,a=e.group.split(":");return(0,n.jsxs)(i.aG,{fontWeight:"medium",fontSize:"sm",separator:(0,n.jsx)(d.XC,{color:"gray.500"}),children:[(0,n.jsx)(i.gN,{children:(0,n.jsx)(i.At,{color:"blue.500",href:"/".concat(r.id),children:r.featuredTitle})}),a.map((function(e,t){return(0,n.jsx)(i.gN,{isCurrentPage:t===a.length-1,children:(0,n.jsx)(i.At,{textTransform:"capitalize",color:"blue.500",href:"/".concat(r.id,"/").concat(a.slice(0,t+1).join(":")),children:e.split("-").join(" ")})},e)}))]})}var v=!0;function _(e){var r,a,i=e.roadmap,u=e.group,d=e.isOutlet;return void 0!==d&&d?(0,n.jsx)(g,{roadmap:i,group:u}):(0,n.jsxs)(t.xu,{bg:"white",minH:"100vh",children:[(0,n.jsx)(s.e,{}),(0,n.jsx)(p.Z,{title:(null===i||void 0===i||null===(r=i.seo)||void 0===r?void 0:r.title)||i.title,description:(null===i||void 0===i||null===(a=i.seo)||void 0===a?void 0:a.description)||i.description,keywords:(null===i||void 0===i?void 0:i.seo.keywords)||[]}),(0,n.jsxs)(t.W2,{my:"60px",maxW:"container.md",position:"relative",children:[(0,n.jsx)(x,{roadmap:i,group:u}),(0,n.jsx)(g,{roadmap:i,group:u})]}),(0,n.jsx)(c.z,{}),(0,n.jsx)(o.q,{}),(0,n.jsx)(l.$,{})]})}}},function(e){e.O(0,[760,22,515,122,70,636,280,774,888,179],(function(){return r=5553,e(e.s=r);var r}));var r=e.O();_N_E=r}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[911],{1739:function(e,r,a){"use strict";a.d(r,{aG:function(){return g},gN:function(){return f},At:function(){return h}});var n=a(2846),t=a(5031),i=a(6450),s=a(7294);function c(){return(c=Object.assign||function(e){for(var r=1;r=0||(t[a]=e[a]);return t}var l=["spacing"],u=["isCurrentPage","as","className","href"],p=["isCurrentPage","separator","isLastChild","spacing","children","className"],d=["children","spacing","separator","className"],m=(0,n.Gp)((function(e,r){var a=e.spacing,t=o(e,l),i=c({mx:a},(0,n.yK)().separator);return s.createElement(n.m$.span,c({ref:r,role:"presentation"},t,{__css:i}))}));t.Ts&&(m.displayName="BreadcrumbSeparator");var h=(0,n.Gp)((function(e,r){var a=e.isCurrentPage,i=e.as,l=e.className,p=e.href,d=o(e,u),m=(0,n.yK)(),h=c({ref:r,as:i,className:(0,t.cx)("chakra-breadcrumb__link",l)},d);return a?s.createElement(n.m$.span,c({"aria-current":"page",__css:m.link},h)):s.createElement(n.m$.a,c({__css:m.link,href:p},h))}));t.Ts&&(h.displayName="BreadcrumbLink");var f=(0,n.Gp)((function(e,r){var a=e.isCurrentPage,l=e.separator,u=e.isLastChild,d=e.spacing,f=e.children,g=e.className,x=o(e,p),v=(0,i.WR)(f).map((function(e){return e.type===h?s.cloneElement(e,{isCurrentPage:a}):e.type===m?s.cloneElement(e,{spacing:d,children:e.props.children||l}):e})),_=c({display:"inline-flex",alignItems:"center"},(0,n.yK)().item),b=(0,t.cx)("chakra-breadcrumb__list-item",g);return s.createElement(n.m$.li,c({ref:r,className:b},x,{__css:_}),v,!u&&s.createElement(m,{spacing:d},l))}));t.Ts&&(f.displayName="BreadcrumbItem");var g=(0,n.Gp)((function(e,r){var a=(0,n.jC)("Breadcrumb",e),l=(0,n.Lr)(e),u=l.children,p=l.spacing,m=void 0===p?"0.5rem":p,h=l.separator,f=void 0===h?"/":h,g=l.className,x=o(l,d),v=(0,i.WR)(u),_=v.length,b=v.map((function(e,r){return s.cloneElement(e,{separator:f,spacing:m,isLastChild:_===r+1})})),j=(0,t.cx)("chakra-breadcrumb",g);return s.createElement(n.m$.nav,c({ref:r,"aria-label":"breadcrumb",className:j,__css:a.container},x),s.createElement(n.Fo,{value:a},s.createElement(n.m$.ol,{className:"chakra-breadcrumb__list"},b)))}));t.Ts&&(g.displayName="Breadcrumb")},5553:function(e,r,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/[group]",function(){return a(2903)}])},2903:function(e,r,a){"use strict";a.r(r),a.d(r,{__N_SSG:function(){return v},default:function(){return _}});var n=a(5893),t=a(5115),i=a(1739),s=a(2438),c=a(1832),o=a(600),l=a(6673),u=a(2348),p=a(202),d=(a(7294),a(1277)),m=a(8641),h=a(5193);function f(e){var r=e.href;return(0,n.jsxs)(t.xu,{my:"30px",children:[(0,n.jsx)(t.iz,{mb:"15px",orientation:"horizontal"}),(0,n.jsx)(t.xv,{lineHeight:"23px",fontWeight:500,fontSize:"14px",color:"gray.500",mb:"10px",children:"This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic."}),(0,n.jsx)(h.zx,{size:"sm",py:"20px",as:t.rU,href:r,target:"_blank",isFullWidth:!0,colorScheme:"gray",_hover:{textDecoration:"none",bg:"gray.200"},children:"Edit this Page"})]})}function g(e){var r=e.roadmap,i=e.group;if(!r.contentPathsFilePath)return null;var s=r.contentPathsFilePath.replace(/^\//,""),c=(a(9280)("./".concat(s))[i]||"").replace(/^\//,""),o=a(9280)("./".concat(c)).default;return(0,n.jsx)(t.xu,{children:(0,n.jsxs)(u.Z,{children:[(0,n.jsx)(o,{}),(0,n.jsx)(f,{href:"".concat(m.url.repoData,"/").concat(c)})]})})}function x(e){var r=e.roadmap,a=e.group.split(":");return(0,n.jsxs)(i.aG,{fontWeight:"medium",fontSize:"sm",separator:(0,n.jsx)(d.XC,{color:"gray.500"}),children:[(0,n.jsx)(i.gN,{children:(0,n.jsx)(i.At,{color:"blue.500",href:"/".concat(r.id),children:r.featuredTitle})}),a.map((function(e,t){return(0,n.jsx)(i.gN,{isCurrentPage:t===a.length-1,children:(0,n.jsx)(i.At,{textTransform:"capitalize",color:"blue.500",href:"/".concat(r.id,"/").concat(a.slice(0,t+1).join(":")),children:e.split("-").join(" ")})},e)}))]})}var v=!0;function _(e){var r,a,i=e.roadmap,u=e.group,d=e.isOutlet;return void 0!==d&&d?(0,n.jsx)(g,{roadmap:i,group:u}):(0,n.jsxs)(t.xu,{bg:"white",minH:"100vh",children:[(0,n.jsx)(s.e,{}),(0,n.jsx)(p.Z,{title:(null===i||void 0===i||null===(r=i.seo)||void 0===r?void 0:r.title)||i.title,description:(null===i||void 0===i||null===(a=i.seo)||void 0===a?void 0:a.description)||i.description,keywords:(null===i||void 0===i?void 0:i.seo.keywords)||[]}),(0,n.jsxs)(t.W2,{my:"60px",maxW:"container.md",position:"relative",children:[(0,n.jsx)(x,{roadmap:i,group:u}),(0,n.jsx)(g,{roadmap:i,group:u})]}),(0,n.jsx)(c.z,{}),(0,n.jsx)(o.q,{}),(0,n.jsx)(l.$,{})]})}}},function(e){e.O(0,[680,22,515,564,568,547,280,774,888,179],(function(){return r=5553,e(e.s=r);var r}));var r=e.O();_N_E=r}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/[roadmap]/interactive-3adf429122290808.js b/_next/static/chunks/pages/[roadmap]/interactive-11b738bbf0b3c890.js similarity index 60% rename from _next/static/chunks/pages/[roadmap]/interactive-3adf429122290808.js rename to _next/static/chunks/pages/[roadmap]/interactive-11b738bbf0b3c890.js index 94409688d..b2274d1f1 100644 --- a/_next/static/chunks/pages/[roadmap]/interactive-3adf429122290808.js +++ b/_next/static/chunks/pages/[roadmap]/interactive-11b738bbf0b3c890.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[526],{7718:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/interactive",function(){return u(1714)}])}},function(n){n.O(0,[760,22,26,515,122,70,636,280,714,774,888,179],(function(){return _=7718,n(n.s=_);var _}));var _=n.O();_N_E=_}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[526],{7718:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/interactive",function(){return u(1714)}])}},function(n){n.O(0,[680,22,26,515,564,568,547,280,714,774,888,179],(function(){return _=7718,n(n.s=_);var _}));var _=n.O();_N_E=_}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/[roadmap]/resources-71a5ac3184d35de3.js b/_next/static/chunks/pages/[roadmap]/resources-f952cce1d67b2932.js similarity index 89% rename from _next/static/chunks/pages/[roadmap]/resources-71a5ac3184d35de3.js rename to _next/static/chunks/pages/[roadmap]/resources-f952cce1d67b2932.js index e4267e99d..e02c28cae 100644 --- a/_next/static/chunks/pages/[roadmap]/resources-71a5ac3184d35de3.js +++ b/_next/static/chunks/pages/[roadmap]/resources-f952cce1d67b2932.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[450],{4450:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/resources",function(){return r(3415)}])},4866:function(e,n,r){"use strict";r.d(n,{v:function(){return l}});var o=r(5893),i=r(8527),t=r(8641),s=r(5657);r(7294);function l(){return(0,o.jsxs)(i.xv,{_hover:{textDecoration:"none",color:"blue.700","& .new-badge":{bg:"blue.700"}},as:i.rU,href:t.url.youtube,d:"block",target:"_blank",color:"red.700",fontSize:"sm",mb:"10px",fontWeight:500,onClick:function(){return(0,s.B)({category:"Subscription",action:"Clicked the YouTube banner",label:"YouTube Alert on Roadmap"})},children:[(0,o.jsx)(i.Ct,{transition:"all 300ms",className:"new-badge",mr:"7px",colorScheme:"red",variant:"solid",children:"New"}),(0,o.jsx)(i.xv,{textDecoration:"underline",as:"span",d:["none","inline"],children:"Roadmap topics to be covered on our YouTube Channel"}),(0,o.jsx)(i.xv,{textDecoration:"underline",as:"span",d:["inline","none"],children:"Topic videos being made on YouTube"}),(0,o.jsx)(i.xv,{as:"span",ml:"5px",children:"\xbb"})]})}},1177:function(e,n,r){"use strict";r.d(n,{h:function(){return x}});var o=r(5893),i=r(4866),t=r(8527),s=r(5193),l=r(9876);r(7294);function x(e){var n=e.roadmap;return(0,o.jsx)(t.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:(0,o.jsxs)(t.W2,{maxW:"container.md",position:"relative",children:[(0,o.jsx)(i.v,{}),(0,o.jsx)(t.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:n.title}),(0,o.jsx)(t.xv,{fontSize:["13px","14px","15px"],children:n.description}),(0,o.jsx)(t.kC,{justifyContent:"space-between",alignItems:"center",mt:"20px",children:(0,o.jsxs)(t.Kq,{isInline:!0,children:[(0,o.jsxs)(s.zx,{d:["flex","flex"],as:t.rU,href:"/roadmaps",size:"xs",py:"14px",px:"10px",colorScheme:"teal",variant:"solid",_hover:{textDecoration:"none"},children:["\u2190",(0,o.jsx)(t.xv,{as:"span",d:["none","inline"],ml:"5px",children:"All Roadmaps"})]}),n.pdfUrl&&(0,o.jsx)(s.zx,{as:t.rU,href:n.pdfUrl,target:"_blank",size:"xs",py:"14px",px:"10px",leftIcon:(0,o.jsx)(l._8,{}),colorScheme:"yellow",variant:"solid",_hover:{textDecoration:"none"},children:"Download"}),(0,o.jsx)(s.zx,{as:t.rU,href:"/signup",size:"xs",py:"14px",px:"10px",variant:"solid",colorScheme:"yellow",leftIcon:(0,o.jsx)(l.Km,{}),_hover:{textDecoration:"none"},children:"Subscribe"})]})}),"frontend"===n.id&&(0,o.jsxs)(t.xv,{mt:"30px",mb:["-37px","-32px","-47px"],fontWeight:500,fontSize:"14px",bg:"white",borderWidth:1,p:"5px 7px",rounded:"3px",children:[(0,o.jsx)(t.Ct,{pos:"relative",top:"-1px",mr:"6px",colorScheme:"yellow",children:"New"}),"Resources are here, try clicking any nodes."]})]})})}},3415:function(e,n,r){"use strict";r.r(n),r.d(n,{__N_SSG:function(){return u},default:function(){return h}});var o=r(5893),i=r(8527),t=r(2438),s=r(1832),l=r(600),x=r(6673),a=r(2348),c=r(202),d=r(1177);function p(e){var n=e.roadmap;if(!n.resourcesPath)return null;var t=n.resourcesPath.replace(/^\//,""),s=r(9280)("./".concat(t)).default;return(0,o.jsx)(i.W2,{maxW:"container.md",position:"relative",children:(0,o.jsx)(a.Z,{children:(0,o.jsx)(s,{})})})}var u=!0;function h(e){var n,r,a=e.roadmap;return(0,o.jsxs)(i.xu,{bg:"white",minH:"100vh",children:[(0,o.jsx)(t.e,{}),(0,o.jsx)(c.Z,{title:(null===a||void 0===a||null===(n=a.seo)||void 0===n?void 0:n.title)||a.title,description:(null===a||void 0===a||null===(r=a.seo)||void 0===r?void 0:r.description)||a.description,keywords:(null===a||void 0===a?void 0:a.seo.keywords)||[]}),(0,o.jsxs)(i.xu,{mb:"60px",children:[(0,o.jsx)(d.h,{roadmap:a}),(0,o.jsx)(p,{roadmap:a})]}),(0,o.jsx)(s.z,{}),(0,o.jsx)(l.q,{}),(0,o.jsx)(x.$,{})]})}}},function(e){e.O(0,[760,22,515,122,70,636,280,774,888,179],(function(){return n=4450,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[450],{4450:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[roadmap]/resources",function(){return r(3415)}])},4866:function(e,n,r){"use strict";r.d(n,{v:function(){return l}});var o=r(5893),i=r(5115),t=r(8641),s=r(5657);r(7294);function l(){return(0,o.jsxs)(i.xv,{_hover:{textDecoration:"none",color:"blue.700","& .new-badge":{bg:"blue.700"}},as:i.rU,href:t.url.youtube,d:"block",target:"_blank",color:"red.700",fontSize:"sm",mb:"10px",fontWeight:500,onClick:function(){return(0,s.B)({category:"Subscription",action:"Clicked the YouTube banner",label:"YouTube Alert on Roadmap"})},children:[(0,o.jsx)(i.Ct,{transition:"all 300ms",className:"new-badge",mr:"7px",colorScheme:"red",variant:"solid",children:"New"}),(0,o.jsx)(i.xv,{textDecoration:"underline",as:"span",d:["none","inline"],children:"Roadmap topics to be covered on our YouTube Channel"}),(0,o.jsx)(i.xv,{textDecoration:"underline",as:"span",d:["inline","none"],children:"Topic videos being made on YouTube"}),(0,o.jsx)(i.xv,{as:"span",ml:"5px",children:"\xbb"})]})}},1177:function(e,n,r){"use strict";r.d(n,{h:function(){return x}});var o=r(5893),i=r(4866),t=r(5115),s=r(5193),l=r(1277);r(7294);function x(e){var n=e.roadmap;return(0,o.jsx)(t.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:(0,o.jsxs)(t.W2,{maxW:"container.md",position:"relative",children:[(0,o.jsx)(i.v,{}),(0,o.jsx)(t.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:n.title}),(0,o.jsx)(t.xv,{fontSize:["13px","14px","15px"],children:n.description}),(0,o.jsx)(t.kC,{justifyContent:"space-between",alignItems:"center",mt:"20px",children:(0,o.jsxs)(t.Kq,{isInline:!0,children:[(0,o.jsxs)(s.zx,{d:["flex","flex"],as:t.rU,href:"/roadmaps",size:"xs",py:"14px",px:"10px",colorScheme:"teal",variant:"solid",_hover:{textDecoration:"none"},children:["\u2190",(0,o.jsx)(t.xv,{as:"span",d:["none","inline"],ml:"5px",children:"All Roadmaps"})]}),n.pdfUrl&&(0,o.jsx)(s.zx,{as:t.rU,href:n.pdfUrl,target:"_blank",size:"xs",py:"14px",px:"10px",leftIcon:(0,o.jsx)(l._8,{}),colorScheme:"yellow",variant:"solid",_hover:{textDecoration:"none"},children:"Download"}),(0,o.jsx)(s.zx,{as:t.rU,href:"/signup",size:"xs",py:"14px",px:"10px",variant:"solid",colorScheme:"yellow",leftIcon:(0,o.jsx)(l.Km,{}),_hover:{textDecoration:"none"},children:"Subscribe"})]})}),"frontend"===n.id&&(0,o.jsxs)(t.xv,{mt:"30px",mb:["-37px","-32px","-47px"],fontWeight:500,fontSize:"14px",bg:"white",borderWidth:1,p:"5px 7px",rounded:"3px",children:[(0,o.jsx)(t.Ct,{pos:"relative",top:"-1px",mr:"6px",colorScheme:"yellow",children:"New"}),"Resources are here, try clicking any nodes."]})]})})}},3415:function(e,n,r){"use strict";r.r(n),r.d(n,{__N_SSG:function(){return u},default:function(){return h}});var o=r(5893),i=r(5115),t=r(2438),s=r(1832),l=r(600),x=r(6673),a=r(2348),c=r(202),d=r(1177);function p(e){var n=e.roadmap;if(!n.resourcesPath)return null;var t=n.resourcesPath.replace(/^\//,""),s=r(9280)("./".concat(t)).default;return(0,o.jsx)(i.W2,{maxW:"container.md",position:"relative",children:(0,o.jsx)(a.Z,{children:(0,o.jsx)(s,{})})})}var u=!0;function h(e){var n,r,a=e.roadmap;return(0,o.jsxs)(i.xu,{bg:"white",minH:"100vh",children:[(0,o.jsx)(t.e,{}),(0,o.jsx)(c.Z,{title:(null===a||void 0===a||null===(n=a.seo)||void 0===n?void 0:n.title)||a.title,description:(null===a||void 0===a||null===(r=a.seo)||void 0===r?void 0:r.description)||a.description,keywords:(null===a||void 0===a?void 0:a.seo.keywords)||[]}),(0,o.jsxs)(i.xu,{mb:"60px",children:[(0,o.jsx)(d.h,{roadmap:a}),(0,o.jsx)(p,{roadmap:a})]}),(0,o.jsx)(s.z,{}),(0,o.jsx)(l.q,{}),(0,o.jsx)(x.$,{})]})}}},function(e){e.O(0,[680,22,515,564,568,547,280,774,888,179],(function(){return n=4450,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-36a157cd469acb64.js b/_next/static/chunks/pages/_app-36a157cd469acb64.js new file mode 100644 index 000000000..4301aab37 --- /dev/null +++ b/_next/static/chunks/pages/_app-36a157cd469acb64.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{949:function(e,r,t){"use strict";t.d(r,{SG:function(){return y},If:function(){return v}});var n=t(5393),o=t(5031),a=t(7294);var i="chakra-ui-light",s="chakra-ui-dark",l={classList:{add:o.ZT,remove:o.ZT}};function c(e,r){var t=function(e){return o.jU?e.body:l}(r);t.classList.add(e?s:i),t.classList.remove(e?i:s)}var u="(prefers-color-scheme: dark)";function d(e){var r;return(null!=(r=function(e){var r=null==window.matchMedia?void 0:window.matchMedia(e);if(r)return!!r.media===r.matches}(u))?r:"dark"===e)?"dark":"light"}var f=function(){return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode")},p=function(e){o.jU&&document.documentElement.style.setProperty("--chakra-ui-color-mode",e)},h=function(){return"undefined"!==typeof Storage},m="chakra-ui-color-mode",g={get:function(e){if(!h())return e;try{var r=localStorage.getItem(m);return null!=r?r:e}catch(t){return o.Ts&&console.log(t),e}},set:function(e){if(h())try{localStorage.setItem(m,e)}catch(r){o.Ts&&console.log(r)}},type:"localStorage"},b=a.createContext({});o.Ts&&(b.displayName="ColorModeContext");var v=function(){var e=a.useContext(b);if(void 0===e)throw new Error("useColorMode must be used within a ColorModeProvider");return e};function y(e){var r=e.value,t=e.children,i=e.options,s=i.useSystemColorMode,l=i.initialColorMode,h=e.colorModeManager,m=void 0===h?g:h,v="dark"===l?"dark":"light",y=a.useState("cookie"===m.type?m.get(v):v),x=y[0],w=y[1],k=(0,n.O)().document;a.useEffect((function(){if(o.jU&&"localStorage"===m.type){var e=d(v);if(s)return w(e);var r=f(),t=m.get();return w(r?r:t||("system"===l?e:v))}}),[m,s,v,l]),a.useEffect((function(){var e="dark"===x;c(e,k),p(e?"dark":"light")}),[x,k]);var S=a.useCallback((function(e,r){if(void 0===r&&(r=!1),r){if(m.get()&&!s)return}else m.set(e);w(e)}),[m,s]),_=a.useCallback((function(){S("light"===x?"dark":"light")}),[x,S]);a.useEffect((function(){var e,r=s||"system"===l;return r&&(e=function(e){if(!("matchMedia"in window))return o.ZT;var r=window.matchMedia(u),t=function(){e(r.matches?"dark":"light",!0)};return r.addEventListener("change",t),function(){r.removeEventListener("change",t)}}(S)),function(){e&&r&&e()}}),[S,s,l]);var C=a.useMemo((function(){return{colorMode:null!=r?r:x,toggleColorMode:r?o.ZT:_,setColorMode:r?o.ZT:S}}),[x,S,_,r]);return a.createElement(b.Provider,{value:C},t)}o.Ts&&(y.displayName="ColorModeProvider");o.Ts;o.Ts},7375:function(e,r,t){"use strict";t.d(r,{vc:function(){return d},kt:function(){return a},qY:function(){return p},OR:function(){return h},NW:function(){return g},Me:function(){return f},qq:function(){return v},Gw:function(){return i}});var n=t(7294),o=t(5031);t(640);function a(e){void 0===e&&(e=!1);var r=(0,n.useState)(e),t=r[0],o=r[1];return[t,{on:(0,n.useCallback)((function(){o(!0)}),[]),off:(0,n.useCallback)((function(){o(!1)}),[]),toggle:(0,n.useCallback)((function(){o((function(e){return!e}))}),[])}]}var i=o.jU?n.useLayoutEffect:n.useEffect;function s(e,r){void 0===r&&(r=[]);var t=n.useRef(e);return i((function(){t.current=e})),n.useCallback((function(){for(var e=arguments.length,r=new Array(e),n=0;n=0||(o[t]=e[t]);return o}(e,l),v={ref:r,focusable:p,className:(0,a.cx)("chakra-icon",m),__css:s({w:"1em",h:"1em",display:"inline-block",lineHeight:"1em",flexShrink:0,color:d},g)},y=null!=o?o:c.viewBox;if(t&&"string"!==typeof t)return i.createElement(n.m$.svg,s({as:t},v,b));var x=null!=h?h:c.path;return i.createElement(n.m$.svg,s({verticalAlign:"middle",viewBox:y},v,b),x)}));a.Ts&&(u.displayName="Icon");var d=t(6450);function f(){return(f=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}var h=["ratio","children","className"],m=(0,n.Gp)((function(e,r){var t=e.ratio,o=void 0===t?4/3:t,s=e.children,l=e.className,c=p(e,h),u=i.Children.only(s),d=(0,a.cx)("chakra-aspect-ratio",l);return i.createElement(n.m$.div,f({ref:r,position:"relative",className:d,_before:{height:0,content:'""',display:"block",paddingBottom:(0,a.XQ)(o,(function(e){return 1/e*100+"%"}))},__css:{"& > *:not(style)":{overflow:"hidden",position:"absolute",top:"0",right:"0",bottom:"0",left:"0",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},"& > img, & > video":{objectFit:"cover"}}},c),u)}));a.Ts&&(m.displayName="AspectRatio");var g=["className"],b=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Badge",e),o=(0,n.Lr)(e);o.className;var s=p(o,g);return i.createElement(n.m$.span,f({ref:r,className:(0,a.cx)("chakra-badge",e.className)},s,{__css:f({display:"inline-block",whiteSpace:"nowrap",verticalAlign:"middle"},t)}))}));a.Ts&&(b.displayName="Badge");var v=["size","centerContent"],y=["size"],x=(0,n.m$)("div");a.Ts&&(x.displayName="Box");var w=(0,n.Gp)((function(e,r){var t=e.size,n=e.centerContent,o=void 0===n||n,a=p(e,v),s=o?{display:"flex",alignItems:"center",justifyContent:"center"}:{};return i.createElement(x,f({ref:r,boxSize:t,__css:f({},s,{flexShrink:0,flexGrow:0})},a))}));a.Ts&&(w.displayName="Square");var k=(0,n.Gp)((function(e,r){var t=e.size,n=p(e,y);return i.createElement(w,f({size:t,ref:r,borderRadius:"9999px"},n))}));a.Ts&&(k.displayName="Circle");var S=(0,n.m$)("div",{baseStyle:{display:"flex",alignItems:"center",justifyContent:"center"}});a.Ts&&(S.displayName="Center");var _=["className"],C=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Code",e),o=(0,n.Lr)(e);o.className;var s=p(o,_);return i.createElement(n.m$.code,f({ref:r,className:(0,a.cx)("chakra-code",e.className)},s,{__css:f({display:"inline-block"},t)}))}));a.Ts&&(C.displayName="Code");var E=["className","centerContent"],A=(0,n.Gp)((function(e,r){var t=(0,n.Lr)(e),o=t.className,s=t.centerContent,l=p(t,E),c=(0,n.mq)("Container",e);return i.createElement(n.m$.div,f({ref:r,className:(0,a.cx)("chakra-container",o)},l,{__css:f({},c,s&&{display:"flex",flexDirection:"column",alignItems:"center"})}))}));a.Ts&&(A.displayName="Container");var R=["borderLeftWidth","borderBottomWidth","borderTopWidth","borderRightWidth","borderWidth","borderStyle","borderColor"],z=["className","orientation","__css"],T=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Divider",e),o=t.borderLeftWidth,s=t.borderBottomWidth,l=t.borderTopWidth,c=t.borderRightWidth,u=t.borderWidth,d=t.borderStyle,h=t.borderColor,m=p(t,R),g=(0,n.Lr)(e),b=g.className,v=g.orientation,y=void 0===v?"horizontal":v,x=g.__css,w=p(g,z),k={vertical:{borderLeftWidth:o||c||u||"1px",height:"100%"},horizontal:{borderBottomWidth:s||l||u||"1px",width:"100%"}};return i.createElement(n.m$.hr,f({ref:r,"aria-orientation":y},w,{__css:f({},m,{border:"0",borderColor:h,borderStyle:d},k[y],x),className:(0,a.cx)("chakra-divider",b)}))}));a.Ts&&(T.displayName="Divider");var B=["direction","align","justify","wrap","basis","grow","shrink"],j=(0,n.Gp)((function(e,r){var t=e.direction,o=e.align,a=e.justify,s=e.wrap,l=e.basis,c=e.grow,u=e.shrink,d=p(e,B),h={display:"flex",flexDirection:t,alignItems:o,justifyContent:a,flexWrap:s,flexBasis:l,flexGrow:c,flexShrink:u};return i.createElement(n.m$.div,f({ref:r,__css:h},d))}));a.Ts&&(j.displayName="Flex");var F=["area","templateAreas","gap","rowGap","columnGap","column","row","autoFlow","autoRows","templateRows","autoColumns","templateColumns"],O=(0,n.Gp)((function(e,r){var t=e.area,o=e.templateAreas,a=e.gap,s=e.rowGap,l=e.columnGap,c=e.column,u=e.row,d=e.autoFlow,h=e.autoRows,m=e.templateRows,g=e.autoColumns,b=e.templateColumns,v=p(e,F),y={display:"grid",gridArea:t,gridTemplateAreas:o,gridGap:a,gridRowGap:s,gridColumnGap:l,gridAutoColumns:g,gridColumn:c,gridRow:u,gridAutoFlow:d,gridAutoRows:h,gridTemplateRows:m,gridTemplateColumns:b};return i.createElement(n.m$.div,f({ref:r,__css:y},v))}));a.Ts&&(O.displayName="Grid");var P=["className"],M=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Heading",e),o=(0,n.Lr)(e);o.className;var s=p(o,P);return i.createElement(n.m$.h2,f({ref:r,className:(0,a.cx)("chakra-heading",e.className)},s,{__css:t}))}));a.Ts&&(M.displayName="Heading");var I=["className"],W=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Kbd",e),o=(0,n.Lr)(e),s=o.className,l=p(o,I);return i.createElement(n.m$.kbd,f({ref:r,className:(0,a.cx)("chakra-kbd",s)},l,{__css:f({fontFamily:"mono"},t)}))}));a.Ts&&(W.displayName="Kbd");var D=["className","isExternal"],N=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Link",e),o=(0,n.Lr)(e),s=o.className,l=o.isExternal,c=p(o,D);return i.createElement(n.m$.a,f({target:l?"_blank":void 0,rel:l?"noopener noreferrer":void 0,ref:r,className:(0,a.cx)("chakra-link",s)},c,{__css:t}))}));a.Ts&&(N.displayName="Link");var L=["children","styleType","stylePosition","spacing"],H=["as"],$=["as"],G=(0,n.Gp)((function(e,r){var t,o=(0,n.jC)("List",e),a=(0,n.Lr)(e),s=a.children,l=a.styleType,c=void 0===l?"none":l,u=a.stylePosition,h=a.spacing,m=p(a,L),g=(0,d.WR)(s),b=h?((t={})["& > *:not(style) ~ *:not(style)"]={mt:h},t):{};return i.createElement(n.Fo,{value:o},i.createElement(n.m$.ul,f({ref:r,listStyleType:c,listStylePosition:u,role:"list",__css:f({},o.container,b)},m),g))}));a.Ts&&(G.displayName="List");var q=(0,n.Gp)((function(e,r){e.as;var t=p(e,H);return i.createElement(G,f({ref:r,as:"ol",styleType:"decimal",marginStart:"1em"},t))}));a.Ts&&(q.displayName="OrderedList");var U=(0,n.Gp)((function(e,r){e.as;var t=p(e,$);return i.createElement(G,f({ref:r,as:"ul",styleType:"initial",marginStart:"1em"},t))}));a.Ts&&(U.displayName="UnorderedList");var V=(0,n.Gp)((function(e,r){var t=(0,n.yK)();return i.createElement(n.m$.li,f({ref:r},e,{__css:t.item}))}));a.Ts&&(V.displayName="ListItem");var X=(0,n.Gp)((function(e,r){var t=(0,n.yK)();return i.createElement(u,f({ref:r,role:"presentation"},e,{__css:t.icon}))}));a.Ts&&(X.displayName="ListIcon");var Y=["columns","spacingX","spacingY","spacing","minChildWidth"],K=(0,n.Gp)((function(e,r){var t,n,o=e.columns,s=e.spacingX,l=e.spacingY,c=e.spacing,u=e.minChildWidth,d=p(e,Y),h=u?(n=u,(0,a.XQ)(n,(function(e){return(0,a.Ft)(e)?null:"repeat(auto-fit, minmax("+(r=e,((0,a.hj)(r)?r+"px":r)+", 1fr))");var r}))):(t=o,(0,a.XQ)(t,(function(e){return(0,a.Ft)(e)?null:"repeat("+e+", minmax(0, 1fr))"})));return i.createElement(O,f({ref:r,gap:c,columnGap:s,rowGap:l,templateColumns:h},d))}));a.Ts&&(K.displayName="SimpleGrid");var Z=(0,n.m$)("div",{baseStyle:{flex:1,justifySelf:"stretch",alignSelf:"stretch"}});a.Ts&&(Z.displayName="Spacer");var Q="& > *:not(style) ~ *:not(style)";var J=["isInline","direction","align","justify","spacing","wrap","children","divider","className","shouldWrapChildren"],ee=function(e){return i.createElement(n.m$.div,f({className:"chakra-stack__divider"},e,{__css:f({},e.__css,{borderWidth:0,alignSelf:"stretch",borderColor:"inherit",width:"auto",height:"auto"})}))},re=function(e){return i.createElement(n.m$.div,f({className:"chakra-stack__item"},e,{__css:f({display:"inline-block",flex:"0 0 auto",minWidth:0},e.__css)}))},te=(0,n.Gp)((function(e,r){var t,o=e.isInline,s=e.direction,l=e.align,c=e.justify,u=e.spacing,h=void 0===u?"0.5rem":u,m=e.wrap,g=e.children,b=e.divider,v=e.className,y=e.shouldWrapChildren,x=p(e,J),w=o?"row":null!=s?s:"column",k=i.useMemo((function(){return function(e){var r,t=e.spacing,n=e.direction,o={column:{marginTop:t,marginEnd:0,marginBottom:0,marginStart:0},row:{marginTop:0,marginEnd:0,marginBottom:0,marginStart:t},"column-reverse":{marginTop:0,marginEnd:0,marginBottom:t,marginStart:0},"row-reverse":{marginTop:0,marginEnd:t,marginBottom:0,marginStart:0}};return(r={flexDirection:n})[Q]=(0,a.XQ)(n,(function(e){return o[e]})),r}({direction:w,spacing:h})}),[w,h]),S=i.useMemo((function(){return function(e){var r=e.spacing,t=e.direction,n={column:{my:r,mx:0,borderLeftWidth:0,borderBottomWidth:"1px"},"column-reverse":{my:r,mx:0,borderLeftWidth:0,borderBottomWidth:"1px"},row:{mx:r,my:0,borderLeftWidth:"1px",borderBottomWidth:0},"row-reverse":{mx:r,my:0,borderLeftWidth:"1px",borderBottomWidth:0}};return{"&":(0,a.XQ)(t,(function(e){return n[e]}))}}({spacing:h,direction:w})}),[h,w]),_=!!b,C=!y&&!_,E=(0,d.WR)(g),A=C?E:E.map((function(e,r){var t="undefined"!==typeof e.key?e.key:r,n=r+1===E.length,o=y?i.createElement(re,{key:t},e):e;if(!_)return o;var a=n?null:i.cloneElement(b,{__css:S});return i.createElement(i.Fragment,{key:t},o,a)})),R=(0,a.cx)("chakra-stack",v);return i.createElement(n.m$.div,f({ref:r,display:"flex",alignItems:l,justifyContent:c,flexDirection:k.flexDirection,flexWrap:m,className:R,__css:_?{}:(t={},t[Q]=k[Q],t)},x),A)}));a.Ts&&(te.displayName="Stack");var ne=(0,n.Gp)((function(e,r){return i.createElement(te,f({align:"center"},e,{direction:"row",ref:r}))}));a.Ts&&(ne.displayName="HStack");var oe=(0,n.Gp)((function(e,r){return i.createElement(te,f({align:"center"},e,{direction:"column",ref:r}))}));a.Ts&&(oe.displayName="VStack");var ae=["className","align","decoration","casing"],ie=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Text",e),o=(0,n.Lr)(e);o.className,o.align,o.decoration,o.casing;var s=p(o,ae),l=(0,a.YU)({textAlign:e.align,textDecoration:e.decoration,textTransform:e.casing});return i.createElement(n.m$.p,f({ref:r,className:(0,a.cx)("chakra-text",e.className)},l,s,{__css:t}))}));a.Ts&&(ie.displayName="Text");var se=["spacing","children","justify","direction","align","className","shouldWrapChildren"],le=["className"],ce=(0,n.Gp)((function(e,r){var t=e.spacing,s=void 0===t?"0.5rem":t,l=e.children,c=e.justify,u=e.direction,d=e.align,h=e.className,m=e.shouldWrapChildren,g=p(e,se),b=i.useMemo((function(){return{"--chakra-wrap-spacing":function(e){return(0,a.XQ)(s,(function(r){return(0,o.fr)("space",r)(e)}))},"--wrap-spacing":"calc(var(--chakra-wrap-spacing) / 2)",display:"flex",flexWrap:"wrap",justifyContent:c,alignItems:d,flexDirection:u,listStyleType:"none",padding:"0",margin:"calc(var(--wrap-spacing) * -1)","& > *:not(style)":{margin:"var(--wrap-spacing)"}}}),[s,c,d,u]),v=m?i.Children.map(l,(function(e,r){return i.createElement(ue,{key:r},e)})):l;return i.createElement(n.m$.div,f({ref:r,className:(0,a.cx)("chakra-wrap",h)},g),i.createElement(n.m$.ul,{className:"chakra-wrap__list",__css:b},v))}));a.Ts&&(ce.displayName="Wrap");var ue=(0,n.Gp)((function(e,r){var t=e.className,o=p(e,le);return i.createElement(n.m$.li,f({ref:r,__css:{display:"flex",alignItems:"flex-start"},className:(0,a.cx)("chakra-wrap__listitem",t)},o))}));a.Ts&&(ue.displayName="WrapItem")},6871:function(e,r,t){"use strict";t.d(r,{h_:function(){return w},hE:function(){return d}});var n=t(5031),o=t(6450),a=t(7294),i=t(7375),s=t(3935),l=(0,o.kr)({strict:!1,name:"PortalManagerContext"}),c=l[0],u=l[1];function d(e){var r=e.children,t=e.zIndex;return a.createElement(c,{value:{zIndex:t}},r)}function f(){return(f=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,p);return r?a.createElement(x,f({containerRef:r},t)):a.createElement(y,t)}w.defaultProps={appendToParentPortal:!0},w.className=b,w.selector=".chakra-portal",n.Ts&&(w.displayName="Portal")},5393:function(e,r,t){"use strict";t.d(r,{u:function(){return d},O:function(){return u}});var n=t(5031),o=t(7294),a={body:{classList:{add:function(){},remove:function(){}}},addEventListener:function(){},removeEventListener:function(){},activeElement:{blur:function(){},nodeName:""},querySelector:function(){return null},querySelectorAll:function(){return[]},getElementById:function(){return null},createEvent:function(){return{initEvent:function(){}}},createElement:function(){return{children:[],childNodes:[],style:{},setAttribute:function(){},getElementsByTagName:function(){return[]}}}},i=function(){},s={window:{document:a,navigator:{userAgent:""},CustomEvent:function(){return this},addEventListener:i,removeEventListener:i,getComputedStyle:function(){return{getPropertyValue:function(){return""}}},matchMedia:function(){return{matches:!1,addListener:i,removeListener:i}},requestAnimationFrame:function(e){return"undefined"===typeof setTimeout?(e(),null):setTimeout(e,0)},cancelAnimationFrame:function(e){"undefined"!==typeof setTimeout&&clearTimeout(e)},setTimeout:function(){return 0},clearTimeout:i,setInterval:function(){return 0},clearInterval:i},document:a},l=n.jU?{window:window,document:document}:s,c=(0,o.createContext)(l);function u(){return(0,o.useContext)(c)}function d(e){var r=e.children,t=e.environment,n=(0,o.useState)(null),a=n[0],i=n[1],s=(0,o.useMemo)((function(){var e,r=null==a?void 0:a.ownerDocument,n=null==a?void 0:a.ownerDocument.defaultView;return null!=(e=null!=t?t:r?{document:r,window:n}:void 0)?e:l}),[a,t]),u=!a&&!t;return o.createElement(c.Provider,{value:s},r,u&&o.createElement("span",{ref:function(e){e&&i(e)}}))}n.Ts&&(c.displayName="EnvironmentContext"),n.Ts&&(d.displayName="EnvironmentProvider")},6450:function(e,r,t){"use strict";t.d(r,{kr:function(){return s},WR:function(){return l},lq:function(){return i}});var n=t(5031),o=t(7294);function a(e,r){if(null!=e)if((0,n.mf)(e))e(r);else try{e.current=r}catch(t){throw new Error("Cannot assign value '"+r+"' to ref '"+e+"'")}}function i(){for(var e=arguments.length,r=new Array(e),t=0;t1)&&(e=1),e}function h(e){return e<=1?100*Number(e)+"%":e}function m(e){return 1===e.length?"0"+e:String(e)}function g(e,r,t){e=d(e,255),r=d(r,255),t=d(t,255);var n=Math.max(e,r,t),o=Math.min(e,r,t),a=0,i=0,s=(n+o)/2;if(n===o)i=0,a=0;else{var l=n-o;switch(i=s>.5?l/(2-n-o):l/(n+o),n){case e:a=(r-t)/l+(r1&&(t-=1),t<1/6?e+6*t*(r-e):t<.5?r:t<2/3?e+(r-e)*(2/3-t)*6:e}function v(e,r,t){e=d(e,255),r=d(r,255),t=d(t,255);var n=Math.max(e,r,t),o=Math.min(e,r,t),a=0,i=n,s=n-o,l=0===n?0:s/n;if(n===o)a=0;else{switch(n){case e:a=(r-t)/s+(r>16,g:(65280&e)>>8,b:255&e}}(r)),this.originalInput=r;var o=_(r);this.originalInput=r,this.r=o.r,this.g=o.g,this.b=o.b,this.a=o.a,this.roundA=Math.round(100*this.a)/100,this.format=null!==(n=t.format)&&void 0!==n?n:o.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=o.ok}return e.prototype.isDark=function(){return this.getBrightness()<128},e.prototype.isLight=function(){return!this.isDark()},e.prototype.getBrightness=function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},e.prototype.getLuminance=function(){var e=this.toRgb(),r=e.r/255,t=e.g/255,n=e.b/255;return.2126*(r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4))+.0722*(n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4))},e.prototype.getAlpha=function(){return this.a},e.prototype.setAlpha=function(e){return this.a=p(e),this.roundA=Math.round(100*this.a)/100,this},e.prototype.toHsv=function(){var e=v(this.r,this.g,this.b);return{h:360*e.h,s:e.s,v:e.v,a:this.a}},e.prototype.toHsvString=function(){var e=v(this.r,this.g,this.b),r=Math.round(360*e.h),t=Math.round(100*e.s),n=Math.round(100*e.v);return 1===this.a?"hsv("+r+", "+t+"%, "+n+"%)":"hsva("+r+", "+t+"%, "+n+"%, "+this.roundA+")"},e.prototype.toHsl=function(){var e=g(this.r,this.g,this.b);return{h:360*e.h,s:e.s,l:e.l,a:this.a}},e.prototype.toHslString=function(){var e=g(this.r,this.g,this.b),r=Math.round(360*e.h),t=Math.round(100*e.s),n=Math.round(100*e.l);return 1===this.a?"hsl("+r+", "+t+"%, "+n+"%)":"hsla("+r+", "+t+"%, "+n+"%, "+this.roundA+")"},e.prototype.toHex=function(e){return void 0===e&&(e=!1),y(this.r,this.g,this.b,e)},e.prototype.toHexString=function(e){return void 0===e&&(e=!1),"#"+this.toHex(e)},e.prototype.toHex8=function(e){return void 0===e&&(e=!1),function(e,r,t,n,o){var a=[m(Math.round(e).toString(16)),m(Math.round(r).toString(16)),m(Math.round(t).toString(16)),m(x(n))];return o&&a[0].startsWith(a[0].charAt(1))&&a[1].startsWith(a[1].charAt(1))&&a[2].startsWith(a[2].charAt(1))&&a[3].startsWith(a[3].charAt(1))?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}(this.r,this.g,this.b,this.a,e)},e.prototype.toHex8String=function(e){return void 0===e&&(e=!1),"#"+this.toHex8(e)},e.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},e.prototype.toRgbString=function(){var e=Math.round(this.r),r=Math.round(this.g),t=Math.round(this.b);return 1===this.a?"rgb("+e+", "+r+", "+t+")":"rgba("+e+", "+r+", "+t+", "+this.roundA+")"},e.prototype.toPercentageRgb=function(){var e=function(e){return Math.round(100*d(e,255))+"%"};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},e.prototype.toPercentageRgbString=function(){var e=function(e){return Math.round(100*d(e,255))};return 1===this.a?"rgb("+e(this.r)+"%, "+e(this.g)+"%, "+e(this.b)+"%)":"rgba("+e(this.r)+"%, "+e(this.g)+"%, "+e(this.b)+"%, "+this.roundA+")"},e.prototype.toName=function(){if(0===this.a)return"transparent";if(this.a<1)return!1;for(var e="#"+y(this.r,this.g,this.b,!1),r=0,t=Object.entries(S);r=0;return r||!n||!e.startsWith("hex")&&"name"!==e?("rgb"===e&&(t=this.toRgbString()),"prgb"===e&&(t=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(t=this.toHexString()),"hex3"===e&&(t=this.toHexString(!0)),"hex4"===e&&(t=this.toHex8String(!0)),"hex8"===e&&(t=this.toHex8String()),"name"===e&&(t=this.toName()),"hsl"===e&&(t=this.toHslString()),"hsv"===e&&(t=this.toHsvString()),t||this.toHexString()):"name"===e&&0===this.a?this.toName():this.toRgbString()},e.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},e.prototype.clone=function(){return new e(this.toString())},e.prototype.lighten=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.l+=r/100,t.l=f(t.l),new e(t)},e.prototype.brighten=function(r){void 0===r&&(r=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(-r/100*255))),t.g=Math.max(0,Math.min(255,t.g-Math.round(-r/100*255))),t.b=Math.max(0,Math.min(255,t.b-Math.round(-r/100*255))),new e(t)},e.prototype.darken=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.l-=r/100,t.l=f(t.l),new e(t)},e.prototype.tint=function(e){return void 0===e&&(e=10),this.mix("white",e)},e.prototype.shade=function(e){return void 0===e&&(e=10),this.mix("black",e)},e.prototype.desaturate=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.s-=r/100,t.s=f(t.s),new e(t)},e.prototype.saturate=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.s+=r/100,t.s=f(t.s),new e(t)},e.prototype.greyscale=function(){return this.desaturate(100)},e.prototype.spin=function(r){var t=this.toHsl(),n=(t.h+r)%360;return t.h=n<0?360+n:n,new e(t)},e.prototype.mix=function(r,t){void 0===t&&(t=50);var n=this.toRgb(),o=new e(r).toRgb(),a=t/100;return new e({r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a})},e.prototype.analogous=function(r,t){void 0===r&&(r=6),void 0===t&&(t=30);var n=this.toHsl(),o=360/t,a=[this];for(n.h=(n.h-(o*r>>1)+720)%360;--r;)n.h=(n.h+o)%360,a.push(new e(n));return a},e.prototype.complement=function(){var r=this.toHsl();return r.h=(r.h+180)%360,new e(r)},e.prototype.monochromatic=function(r){void 0===r&&(r=6);for(var t=this.toHsv(),n=t.h,o=t.s,a=t.v,i=[],s=1/r;r--;)i.push(new e({h:n,s:o,v:a})),a=(a+s)%1;return i},e.prototype.splitcomplement=function(){var r=this.toHsl(),t=r.h;return[this,new e({h:(t+72)%360,s:r.s,l:r.l}),new e({h:(t+216)%360,s:r.s,l:r.l})]},e.prototype.onBackground=function(r){var t=this.toRgb(),n=new e(r).toRgb();return new e({r:n.r+(t.r-n.r)*t.a,g:n.g+(t.g-n.g)*t.a,b:n.b+(t.b-n.b)*t.a})},e.prototype.triad=function(){return this.polyad(3)},e.prototype.tetrad=function(){return this.polyad(4)},e.prototype.polyad=function(r){for(var t=this.toHsl(),n=t.h,o=[this],a=360/r,i=1;it.length;)e.count=null,e.seed&&(e.seed+=1),t.push(B(e));return e.count=r,t}var n=function(e,r){var t=F(function(e){var r=parseInt(e,10);if(!Number.isNaN(r)&&r<360&&r>0)return[r,r];if("string"===typeof e){var t=P.find((function(r){return r.name===e}));if(t){var n=O(t);if(n.hueRange)return n.hueRange}var o=new T(e);if(o.isValid){var a=o.toHsv().h;return[a,a]}}return[0,360]}(e),r);t<0&&(t=360+t);return t}(e.hue,e.seed),o=function(e,r){if("monochrome"===r.hue)return 0;if("random"===r.luminosity)return F([0,100],r.seed);var t=j(e).saturationRange,n=t[0],o=t[1];switch(r.luminosity){case"bright":n=55;break;case"dark":n=o-10;break;case"light":o=55}return F([n,o],r.seed)}(n,e),a={h:n,s:o,v:function(e,r,t){var n=function(e,r){for(var t=j(e).lowerBounds,n=0;n=o&&r<=i){var l=(s-a)/(i-o);return l*r+(a-l*o)}}return 0}(e,r),o=100;switch(t.luminosity){case"dark":o=n+20;break;case"light":n=(o+n)/2;break;case"random":n=0,o=100}return F([n,o],t.seed)}(n,o,e)};return void 0!==e.alpha&&(a.a=e.alpha),new T(a)}function j(e){e>=334&&e<=360&&(e-=360);for(var r=0,t=P;r=n.hueRange[0]&&e<=n.hueRange[1])return n}throw Error("Color not found")}function F(e,r){if(void 0===r)return Math.floor(e[0]+Math.random()*(e[1]+1-e[0]));var t=e[1]||1,n=e[0]||0,o=(r=(9301*r+49297)%233280)/233280;return Math.floor(n+o*(t-n))}function O(e){var r=e.lowerBounds[0][0],t=e.lowerBounds[e.lowerBounds.length-1][0],n=e.lowerBounds[e.lowerBounds.length-1][1],o=e.lowerBounds[0][1];return{name:e.name,hueRange:e.hueRange,lowerBounds:e.lowerBounds,saturationRange:[r,t],brightnessRange:[n,o]}}var P=[{name:"monochrome",hueRange:null,lowerBounds:[[0,0],[100,0]]},{name:"red",hueRange:[-26,18],lowerBounds:[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]},{name:"orange",hueRange:[19,46],lowerBounds:[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]},{name:"yellow",hueRange:[47,62],lowerBounds:[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]},{name:"green",hueRange:[63,178],lowerBounds:[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]},{name:"blue",hueRange:[179,257],lowerBounds:[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]},{name:"purple",hueRange:[258,282],lowerBounds:[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]},{name:"pink",hueRange:[283,334],lowerBounds:[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]]}],M=t(5031),I=function(e,r,t){var n=(0,M.Wf)(e,"colors."+r,r);return new T(n).isValid?n:t},W=function(e){return function(r){var t=I(r,e);return new T(t).isDark()?"dark":"light"}},D=function(e,r){return function(t){var n=I(t,e);return new T(n).setAlpha(r).toRgbString()}};function N(e,r){return void 0===e&&(e="1rem"),void 0===r&&(r="rgba(255, 255, 255, 0.15)"),{backgroundImage:"linear-gradient(\n 45deg,\n "+r+" 25%,\n transparent 25%,\n transparent 50%,\n "+r+" 50%,\n "+r+" 75%,\n transparent 75%,\n transparent\n )",backgroundSize:e+" "+e}}function L(e){var r,t=B().toHexString();return!e||(0,M.Qr)(e)?t:e.string&&e.colors?function(e,r){var t=0;if(0===e.length)return r[0];for(var n=0;n>8*o&255).toString(16)).substr(-2)}return n}(e.string):e.colors&&!e.string?(r=e.colors)[Math.floor(Math.random()*r.length)]:t}function H(e,r){return function(t){return"dark"===t.colorMode?r:e}}function $(e){var r=e.orientation,t=e.vertical,n=e.horizontal;return r?"vertical"===r?t:n:{}}function G(){return(G=Object.assign||function(e){for(var r=1;r1?r-1:0),n=1;n option, > optgroup":{bg:H("white","gray.700")(e)}})},Pt={width:"1.5rem",height:"100%",insetEnd:"0.5rem",position:"relative",color:"currentColor",fontSize:"1.25rem",_disabled:{opacity:.5}},Mt={paddingInlineEnd:"2rem"},It=je()({},jr.sizes,{lg:{field:Mt},md:{field:Mt},sm:{field:Mt},xs:{field:Mt,icon:{insetEnd:"0.25rem"}}}),Wt={parts:_e.keys,baseStyle:function(e){return{field:Ot(e),icon:Pt}},sizes:It,variants:jr.variants,defaultProps:jr.defaultProps},Dt=function(e,r){return(0,n.F4)({from:{borderColor:e,background:e},to:{borderColor:r,background:r}})},Nt={baseStyle:function(e){var r=H("gray.100","gray.800")(e),t=H("gray.400","gray.600")(e),n=e.startColor,o=void 0===n?r:n,a=e.endColor,i=void 0===a?t:a,s=e.speed,l=e.theme,c=I(l,o),u=I(l,i);return{opacity:.7,borderRadius:"2px",borderColor:c,background:u,animation:s+"s linear infinite alternate "+Dt(c,u)}}},Lt={baseStyle:function(e){return{borderRadius:"md",fontWeight:"semibold",_focus:{boxShadow:"outline",padding:"1rem",position:"fixed",top:"1.5rem",insetStart:"1.5rem",bg:H("white","gray.700")(e)}}}};var Ht,$t,Gt,qt,Ut,Vt,Xt,Yt,Kt,Zt,Qt,Jt,en,rn=function(e){return Fe({display:"inline-block",position:"relative",cursor:"pointer",_disabled:{opacity:.6,cursor:"default",pointerEvents:"none"}},$({orientation:e.orientation,vertical:{h:"100%"},horizontal:{w:"100%"}}))},tn=function(e){return{overflow:"hidden",borderRadius:"sm",bg:H("gray.200","whiteAlpha.200")(e),_disabled:{bg:H("gray.300","whiteAlpha.300")(e)}}},nn=function(e){return Fe({display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",outline:0,zIndex:1,borderRadius:"full",bg:"white",boxShadow:"base",border:"1px solid",borderColor:"transparent",transitionProperty:"transform",transitionDuration:"normal",_focus:{boxShadow:"outline"},_disabled:{bg:"gray.300"}},function(e){return $({orientation:e.orientation,vertical:{left:"50%",transform:"translateX(-50%)",_active:{transform:"translateX(-50%) scale(1.15)"}},horizontal:{top:"50%",transform:"translateY(-50%)",_active:{transform:"translateY(-50%) scale(1.15)"}}})}(e))},on=function(e){var r=e.colorScheme;return{width:"inherit",height:"inherit",bg:H(r+".500",r+".200")(e)}},an={lg:function(e){return{thumb:{w:"16px",h:"16px"},track:$({orientation:e.orientation,horizontal:{h:"4px"},vertical:{w:"4px"}})}},md:function(e){return{thumb:{w:"14px",h:"14px"},track:$({orientation:e.orientation,horizontal:{h:"4px"},vertical:{w:"4px"}})}},sm:function(e){return{thumb:{w:"10px",h:"10px"},track:$({orientation:e.orientation,horizontal:{h:"2px"},vertical:{w:"2px"}})}}},sn={parts:Ce.keys,sizes:an,baseStyle:function(e){return{container:rn(e),track:tn(e),thumb:nn(e),filledTrack:on(e)}},defaultProps:{size:"md",colorScheme:"blue"}},ln=ae("spinner-size"),cn={baseStyle:{width:[ln.reference],height:[ln.reference]},sizes:{xs:(Ht={},Ht[ln.variable]="0.75rem",Ht),sm:($t={},$t[ln.variable]="1rem",$t),md:(Gt={},Gt[ln.variable]="1.5rem",Gt),lg:(qt={},qt[ln.variable]="2rem",qt),xl:(Ut={},Ut[ln.variable]="3rem",Ut)},defaultProps:{size:"md"}},un={container:{},label:{fontWeight:"medium"},helpText:{opacity:.8,marginBottom:2},number:{verticalAlign:"baseline",fontWeight:"semibold"},icon:{marginEnd:1,w:"14px",h:"14px",verticalAlign:"middle"}},dn={parts:Ee.keys,baseStyle:un,sizes:{md:{label:{fontSize:"sm"},helpText:{fontSize:"sm"},number:{fontSize:"2xl"}}},defaultProps:{size:"md"}},fn=ae("switch-track-width"),pn=ae("switch-track-height"),hn=ae("switch-track-diff"),mn=re.subtract(fn,pn),gn=ae("switch-thumb-x"),bn=function(e){var r=e.colorScheme;return{borderRadius:"full",p:"2px",width:[fn.reference],height:[pn.reference],transitionProperty:"common",transitionDuration:"fast",bg:H("gray.300","whiteAlpha.400")(e),_focus:{boxShadow:"outline"},_disabled:{opacity:.4,cursor:"not-allowed"},_checked:{bg:H(r+".500",r+".200")(e)}}},vn={bg:"white",transitionProperty:"transform",transitionDuration:"normal",borderRadius:"inherit",width:[pn.reference],height:[pn.reference],_checked:{transform:"translateX("+gn.reference+")"}},yn={sm:{container:(Vt={},Vt[fn.variable]="1.375rem",Vt[pn.variable]="0.75rem",Vt)},md:{container:(Xt={},Xt[fn.variable]="1.875rem",Xt[pn.variable]="1rem",Xt)},lg:{container:(Yt={},Yt[fn.variable]="2.875rem",Yt[pn.variable]="1.5rem",Yt)}},xn={parts:Ae.keys,baseStyle:function(e){var r,t;return{container:(t={},t[hn.variable]=mn,t[gn.variable]=hn.reference,t._rtl=(r={},r[gn.variable]=re(hn).negate().toString(),r),t),track:bn(e),thumb:vn}},sizes:yn,defaultProps:{size:"md",colorScheme:"blue"}},wn={"&[data-is-numeric=true]":{textAlign:"end"}},kn={simple:function(e){var r=e.colorScheme;return{th:Fe({color:H("gray.600","gray.400")(e),borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),td:Fe({borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),caption:{color:H("gray.600","gray.100")(e)},tfoot:{tr:{"&:last-of-type":{th:{borderBottomWidth:0}}}}}},striped:function(e){var r=e.colorScheme;return{th:Fe({color:H("gray.600","gray.400")(e),borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),td:Fe({borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),caption:{color:H("gray.600","gray.100")(e)},tbody:{tr:{"&:nth-of-type(odd)":{"th, td":{borderBottomWidth:"1px",borderColor:H(r+".100",r+".700")(e)},td:{background:H(r+".100",r+".700")(e)}}}},tfoot:{tr:{"&:last-of-type":{th:{borderBottomWidth:0}}}}}},unstyled:{}},Sn={parts:Re.keys,baseStyle:{table:{fontVariantNumeric:"lining-nums tabular-nums",borderCollapse:"collapse",width:"full"},th:{fontFamily:"heading",fontWeight:"bold",textTransform:"uppercase",letterSpacing:"wider",textAlign:"start"},td:{textAlign:"start"},caption:{mt:4,fontFamily:"heading",textAlign:"center",fontWeight:"medium"}},variants:kn,sizes:{sm:{th:{px:"4",py:"1",lineHeight:"4",fontSize:"xs"},td:{px:"4",py:"2",fontSize:"sm",lineHeight:"4"},caption:{px:"4",py:"2",fontSize:"xs"}},md:{th:{px:"6",py:"3",lineHeight:"4",fontSize:"xs"},td:{px:"6",py:"4",lineHeight:"5"},caption:{px:"6",py:"2",fontSize:"sm"}},lg:{th:{px:"8",py:"4",lineHeight:"5",fontSize:"sm"},td:{px:"8",py:"5",lineHeight:"6"},caption:{px:"6",py:"2",fontSize:"md"}}},defaultProps:{variant:"simple",size:"md",colorScheme:"gray"}},_n=function(e){return{display:"vertical"===e.orientation?"flex":"block"}},Cn=function(e){return{flex:e.isFitted?1:void 0,transitionProperty:"common",transitionDuration:"normal",_focus:{zIndex:1,boxShadow:"outline"}}},En=function(e){var r=e.align,t=void 0===r?"start":r,n=e.orientation;return{justifyContent:{end:"flex-end",center:"center",start:"flex-start"}[t],flexDirection:"vertical"===n?"column":"row"}},An={p:4},Rn={line:function(e){var r,t,n=e.colorScheme,o=e.orientation,a="vertical"===o?"borderStart":"borderBottom",i="vertical"===o?"marginStart":"marginBottom";return{tablist:(r={},r[a]="2px solid",r.borderColor="inherit",r),tab:(t={},t[a]="2px solid",t.borderColor="transparent",t[i]="-2px",t._selected={color:H(n+".600",n+".300")(e),borderColor:"currentColor"},t._active={bg:H("gray.200","whiteAlpha.300")(e)},t._disabled={opacity:.4,cursor:"not-allowed"},t)}},enclosed:function(e){var r=e.colorScheme;return{tab:{borderTopRadius:"md",border:"1px solid",borderColor:"transparent",mb:"-1px",_selected:{color:H(r+".600",r+".300")(e),borderColor:"inherit",borderBottomColor:H("white","gray.800")(e)}},tablist:{mb:"-1px",borderBottom:"1px solid",borderColor:"inherit"}}},"enclosed-colored":function(e){var r=e.colorScheme;return{tab:{border:"1px solid",borderColor:"inherit",bg:H("gray.50","whiteAlpha.50")(e),mb:"-1px",_notLast:{marginEnd:"-1px"},_selected:{bg:H("#fff","gray.800")(e),color:H(r+".600",r+".300")(e),borderColor:"inherit",borderTopColor:"currentColor",borderBottomColor:"transparent"}},tablist:{mb:"-1px",borderBottom:"1px solid",borderColor:"inherit"}}},"soft-rounded":function(e){var r=e.colorScheme,t=e.theme;return{tab:{borderRadius:"full",fontWeight:"semibold",color:"gray.600",_selected:{color:I(t,r+".700"),bg:I(t,r+".100")}}}},"solid-rounded":function(e){var r=e.colorScheme;return{tab:{borderRadius:"full",fontWeight:"semibold",color:H("gray.600","inherit")(e),_selected:{color:H("#fff","gray.800")(e),bg:H(r+".600",r+".300")(e)}}}},unstyled:{}},zn={parts:ze.keys,baseStyle:function(e){return{root:_n(e),tab:Cn(e),tablist:En(e),tabpanel:An}},sizes:{sm:{tab:{py:1,px:4,fontSize:"sm"}},md:{tab:{fontSize:"md",py:2,px:4}},lg:{tab:{fontSize:"lg",py:3,px:4}}},variants:Rn,defaultProps:{size:"md",variant:"line",colorScheme:"blue"}},Tn={container:{fontWeight:"medium",lineHeight:1.2,outline:0,_focus:{boxShadow:"outline"}},label:{lineHeight:1.2,overflow:"visible"},closeButton:{fontSize:"18px",w:"1.25rem",h:"1.25rem",transitionProperty:"common",transitionDuration:"normal",borderRadius:"full",marginStart:"0.375rem",marginEnd:"-1",opacity:.5,_disabled:{opacity:.4},_focus:{boxShadow:"outline",bg:"rgba(0, 0, 0, 0.14)"},_hover:{opacity:.8},_active:{opacity:1}}},Bn={subtle:function(e){return{container:Ke.variants.subtle(e)}},solid:function(e){return{container:Ke.variants.solid(e)}},outline:function(e){return{container:Ke.variants.outline(e)}}},jn={parts:Te.keys,variants:Bn,baseStyle:Tn,sizes:{sm:{container:{minH:"1.25rem",minW:"1.25rem",fontSize:"xs",px:2,borderRadius:"md"},closeButton:{marginEnd:"-2px",marginStart:"0.35rem"}},md:{container:{minH:"1.5rem",minW:"1.5rem",fontSize:"sm",borderRadius:"md",px:2}},lg:{container:{minH:8,minW:8,fontSize:"md",borderRadius:"md",px:3}}},defaultProps:{size:"md",variant:"subtle",colorScheme:"gray"}},Fn=Fe({},jr.baseStyle.field,{paddingY:"8px",minHeight:"80px",lineHeight:"short",verticalAlign:"top"}),On={outline:function(e){var r;return null!=(r=jr.variants.outline(e).field)?r:{}},flushed:function(e){var r;return null!=(r=jr.variants.flushed(e).field)?r:{}},filled:function(e){var r;return null!=(r=jr.variants.filled(e).field)?r:{}},unstyled:null!=(Kt=jr.variants.unstyled.field)?Kt:{}},Pn={baseStyle:Fn,sizes:{xs:null!=(Zt=jr.sizes.xs.field)?Zt:{},sm:null!=(Qt=jr.sizes.sm.field)?Qt:{},md:null!=(Jt=jr.sizes.md.field)?Jt:{},lg:null!=(en=jr.sizes.lg.field)?en:{}},variants:On,defaultProps:{size:"md",variant:"outline"}},Mn=ae("tooltip-bg"),In=ae("popper-arrow-bg"),Wn={baseStyle:function(e){var r,t=H("gray.700","gray.300")(e);return(r={})[Mn.variable]="colors."+t,r.px="8px",r.py="2px",r.bg=[Mn.reference],r[In.variable]=[Mn.reference],r.color=H("whiteAlpha.900","gray.900")(e),r.borderRadius="sm",r.fontWeight="medium",r.fontSize="sm",r.boxShadow="md",r.maxW="320px",r.zIndex="tooltip",r}},Dn=function(e){return{color:H("red.500","red.300")(e),mt:2,fontSize:"sm"}},Nn=function(e){return{marginEnd:"0.5em",color:H("red.500","red.300")(e)}},Ln={parts:me.keys,baseStyle:function(e){return{text:Dn(e),icon:Nn(e)}}},Hn={Accordion:Pe,Alert:We,Avatar:Ye,Badge:Ke,Breadcrumb:Qe,Button:rr,Checkbox:ar,CloseButton:sr,Code:lr,Container:cr,Divider:ur,Drawer:xr,Editable:kr,Form:Cr,FormLabel:Er,Heading:Ar,Input:jr,Kbd:Fr,Link:Or,List:Mr,Menu:$r,Modal:tt,NumberInput:gt,PinInput:bt,Popover:At,Progress:Bt,Radio:Ft,Select:Wt,Skeleton:Nt,SkipLink:Lt,Slider:sn,Spinner:cn,Stat:dn,Switch:xn,Table:Sn,Tabs:zn,Tag:jn,Textarea:Pn,Tooltip:Wn,FormError:Ln},$n={none:0,"1px":"1px solid","2px":"2px solid","4px":"4px solid","8px":"8px solid"},Gn=Fe({breakpoints:function(e){return(0,M.ZK)({condition:!0,message:["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon","simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")}),G({base:"0em"},e)}({sm:"30em",md:"48em",lg:"62em",xl:"80em","2xl":"96em"}),zIndices:{hide:-1,auto:"auto",base:0,docked:10,dropdown:1e3,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800},radii:{none:"0",sm:"0.125rem",base:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"},blur:{none:0,sm:"4px",base:"8px",md:"12px",lg:"16px",xl:"24px","2xl":"40px","3xl":"64px"},colors:{transparent:"transparent",current:"currentColor",black:"#000000",white:"#FFFFFF",whiteAlpha:{50:"rgba(255, 255, 255, 0.04)",100:"rgba(255, 255, 255, 0.06)",200:"rgba(255, 255, 255, 0.08)",300:"rgba(255, 255, 255, 0.16)",400:"rgba(255, 255, 255, 0.24)",500:"rgba(255, 255, 255, 0.36)",600:"rgba(255, 255, 255, 0.48)",700:"rgba(255, 255, 255, 0.64)",800:"rgba(255, 255, 255, 0.80)",900:"rgba(255, 255, 255, 0.92)"},blackAlpha:{50:"rgba(0, 0, 0, 0.04)",100:"rgba(0, 0, 0, 0.06)",200:"rgba(0, 0, 0, 0.08)",300:"rgba(0, 0, 0, 0.16)",400:"rgba(0, 0, 0, 0.24)",500:"rgba(0, 0, 0, 0.36)",600:"rgba(0, 0, 0, 0.48)",700:"rgba(0, 0, 0, 0.64)",800:"rgba(0, 0, 0, 0.80)",900:"rgba(0, 0, 0, 0.92)"},gray:{50:"#F7FAFC",100:"#EDF2F7",200:"#E2E8F0",300:"#CBD5E0",400:"#A0AEC0",500:"#718096",600:"#4A5568",700:"#2D3748",800:"#1A202C",900:"#171923"},red:{50:"#FFF5F5",100:"#FED7D7",200:"#FEB2B2",300:"#FC8181",400:"#F56565",500:"#E53E3E",600:"#C53030",700:"#9B2C2C",800:"#822727",900:"#63171B"},orange:{50:"#FFFAF0",100:"#FEEBC8",200:"#FBD38D",300:"#F6AD55",400:"#ED8936",500:"#DD6B20",600:"#C05621",700:"#9C4221",800:"#7B341E",900:"#652B19"},yellow:{50:"#FFFFF0",100:"#FEFCBF",200:"#FAF089",300:"#F6E05E",400:"#ECC94B",500:"#D69E2E",600:"#B7791F",700:"#975A16",800:"#744210",900:"#5F370E"},green:{50:"#F0FFF4",100:"#C6F6D5",200:"#9AE6B4",300:"#68D391",400:"#48BB78",500:"#38A169",600:"#2F855A",700:"#276749",800:"#22543D",900:"#1C4532"},teal:{50:"#E6FFFA",100:"#B2F5EA",200:"#81E6D9",300:"#4FD1C5",400:"#38B2AC",500:"#319795",600:"#2C7A7B",700:"#285E61",800:"#234E52",900:"#1D4044"},blue:{50:"#ebf8ff",100:"#bee3f8",200:"#90cdf4",300:"#63b3ed",400:"#4299e1",500:"#3182ce",600:"#2b6cb0",700:"#2c5282",800:"#2a4365",900:"#1A365D"},cyan:{50:"#EDFDFD",100:"#C4F1F9",200:"#9DECF9",300:"#76E4F7",400:"#0BC5EA",500:"#00B5D8",600:"#00A3C4",700:"#0987A0",800:"#086F83",900:"#065666"},purple:{50:"#FAF5FF",100:"#E9D8FD",200:"#D6BCFA",300:"#B794F4",400:"#9F7AEA",500:"#805AD5",600:"#6B46C1",700:"#553C9A",800:"#44337A",900:"#322659"},pink:{50:"#FFF5F7",100:"#FED7E2",200:"#FBB6CE",300:"#F687B3",400:"#ED64A6",500:"#D53F8C",600:"#B83280",700:"#97266D",800:"#702459",900:"#521B41"},linkedin:{50:"#E8F4F9",100:"#CFEDFB",200:"#9BDAF3",300:"#68C7EC",400:"#34B3E4",500:"#00A0DC",600:"#008CC9",700:"#0077B5",800:"#005E93",900:"#004471"},facebook:{50:"#E8F4F9",100:"#D9DEE9",200:"#B7C2DA",300:"#6482C0",400:"#4267B2",500:"#385898",600:"#314E89",700:"#29487D",800:"#223B67",900:"#1E355B"},messenger:{50:"#D0E6FF",100:"#B9DAFF",200:"#A2CDFF",300:"#7AB8FF",400:"#2E90FF",500:"#0078FF",600:"#0063D1",700:"#0052AC",800:"#003C7E",900:"#002C5C"},whatsapp:{50:"#dffeec",100:"#b9f5d0",200:"#90edb3",300:"#65e495",400:"#3cdd78",500:"#22c35e",600:"#179848",700:"#0c6c33",800:"#01421c",900:"#001803"},twitter:{50:"#E5F4FD",100:"#C8E9FB",200:"#A8DCFA",300:"#83CDF7",400:"#57BBF5",500:"#1DA1F2",600:"#1A94DA",700:"#1681BF",800:"#136B9E",900:"#0D4D71"},telegram:{50:"#E3F2F9",100:"#C5E4F3",200:"#A2D4EC",300:"#7AC1E4",400:"#47A9DA",500:"#0088CC",600:"#007AB8",700:"#006BA1",800:"#005885",900:"#003F5E"}}},nt,{sizes:Ne,shadows:{xs:"0 0 0 1px rgba(0, 0, 0, 0.05)",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",base:"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","2xl":"0 25px 50px -12px rgba(0, 0, 0, 0.25)",outline:"0 0 0 3px rgba(66, 153, 225, 0.6)",inner:"inset 0 2px 4px 0 rgba(0,0,0,0.06)",none:"none","dark-lg":"rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"},space:De,borders:$n,transition:{property:{common:"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",colors:"background-color, border-color, color, fill, stroke",dimensions:"width, height",position:"left, right, top, bottom",background:"background-color, background-image, background-position"},easing:{"ease-in":"cubic-bezier(0.4, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.2, 1)","ease-in-out":"cubic-bezier(0.4, 0, 0.2, 1)"},duration:{"ultra-fast":"50ms",faster:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"400ms","ultra-slow":"500ms"}}}),qn=["borders","breakpoints","colors","components","config","direction","fonts","fontSizes","fontWeights","letterSpacings","lineHeights","radii","shadows","sizes","space","styles","transition","zIndices"];function Un(e){return!!(0,M.Kn)(e)&&qn.every((function(r){return Object.prototype.hasOwnProperty.call(e,r)}))}var Vn=Fe({direction:"ltr"},Gn,{components:Hn,styles:{global:function(e){return{body:{fontFamily:"body",color:H("gray.800","whiteAlpha.900")(e),bg:H("white","gray.800")(e),transitionProperty:"background-color",transitionDuration:"normal",lineHeight:"base"},"*::placeholder":{color:H("gray.400","whiteAlpha.400")(e)},"*, *::before, &::after":{borderColor:H("gray.200","whiteAlpha.300")(e),wordWrap:"break-word"}}}},config:{useSystemColorMode:!1,initialColorMode:"light",cssVarPrefix:"chakra"}}),Xn=function(e){var r=e.children,t=e.colorModeManager,n=e.portalZIndex,d=e.resetCSS,f=void 0===d||d,p=e.theme,h=void 0===p?{}:p,m=e.environment,g=e.cssVarsRoot,b=o.createElement(c.u,{environment:m},r);return o.createElement(u.vc,null,o.createElement(s.f6,{theme:h,cssVarsRoot:g},o.createElement(l.SG,{colorModeManager:t,options:h.config},f&&o.createElement(a,null),o.createElement(s.ZL,null),n?o.createElement(i.hE,{zIndex:n},b):b)))};function Yn(){for(var e=arguments.length,r=new Array(e),t=0;t1?n=n.slice(0,n.length-1):o=Vn,M.zG.apply(void 0,n.map((function(e){return function(r){return(0,M.mf)(e)?e(r):Kn(r,e)}})))(o)}function Kn(){for(var e=arguments.length,r=new Array(e),t=0;t :not(style) ~ :not(style)",v=((u={})[b]={marginInlineStart:"calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",marginInlineEnd:"calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"},u),y=((d={})[b]={marginTop:"calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",marginBottom:"calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"},d);function x(e,r){return(x=Object.setPrototypeOf||function(e,r){return e.__proto__=r,e})(e,r)}function w(e,r){if("function"!==typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),r&&x(e,r)}function k(){k=function(e,r){return new t(e,void 0,r)};var e=RegExp.prototype,r=new WeakMap;function t(e,n,o){var a=new RegExp(e,n);return r.set(a,o||r.get(e)),x(a,t.prototype)}function n(e,t){var n=r.get(t);return Object.keys(n).reduce((function(r,t){return r[t]=e[n[t]],r}),Object.create(null))}return w(t,RegExp),t.prototype.exec=function(r){var t=e.exec.call(this,r);return t&&(t.groups=n(t,this)),t},t.prototype[Symbol.replace]=function(t,o){if("string"===typeof o){var a=r.get(this);return e[Symbol.replace].call(this,t,o.replace(/\$<([^>]+)>/g,(function(e,r){return"$"+a[r]})))}if("function"===typeof o){var i=this;return e[Symbol.replace].call(this,t,(function(){var e=arguments;return"object"!==typeof e[e.length-1]&&(e=[].slice.call(e)).push(n(e,i)),o.apply(this,e)}))}return e[Symbol.replace].call(this,t,o)},k.apply(this,arguments)}var S={"to-t":"to top","to-tr":"to top right","to-r":"to right","to-br":"to bottom right","to-b":"to bottom","to-bl":"to bottom left","to-l":"to left","to-tl":"to top left"},_=new Set(Object.values(S)),C=new Set(["none","-moz-initial","inherit","initial","revert","unset"]),E=function(e){return e.trim()};var A=function(e){return(0,n.HD)(e)&&e.includes("(")&&e.includes(")")},R=function(e){return function(r){return e+"("+r+")"}},z={filter:function(e){return"auto"!==e?e:h},backdropFilter:function(e){return"auto"!==e?e:m},ring:function(e){return function(e){return{"--chakra-ring-offset-shadow":"var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)","--chakra-ring-shadow":"var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)","--chakra-ring-width":e,boxShadow:["var(--chakra-ring-offset-shadow)","var(--chakra-ring-shadow)","var(--chakra-shadow, 0 0 #0000)"].join(", ")}}(z.px(e))},bgClip:function(e){return"text"===e?{color:"transparent",backgroundClip:"text"}:{backgroundClip:e}},transform:function(e){return"auto"===e?["translateX(var(--chakra-translate-x, 0))","translateY(var(--chakra-translate-y, 0))"].concat(p).join(" "):"auto-gpu"===e?["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)"].concat(p).join(" "):e},px:function(e){return null==e?e:function(e){var r=parseFloat(e.toString()),t=e.toString().replace(String(r),"");return{unitless:!t,value:r,unit:t}}(e).unitless||(0,n.hj)(e)?e+"px":e},fraction:function(e){return!(0,n.hj)(e)||e>1?e:100*e+"%"},float:function(e,r){return"rtl"===r.direction?{left:"right",right:"left"}[e]:e},degree:function(e){if((0,n.FS)(e)||null==e)return e;var r=(0,n.HD)(e)&&!e.endsWith("deg");return(0,n.hj)(e)||r?e+"deg":e},gradient:function(e,r){return function(e,r){var t,n;if(null==e||C.has(e))return e;var o=null!=(t=null==(n=k(/(^[\x2DA-Za-z]+)\(((.*))\)/g,{type:1,values:2}).exec(e))?void 0:n.groups)?t:{},a=o.type,i=o.values;if(!a||!i)return e;var s=a.includes("-gradient")?a:a+"-gradient",l=i.split(",").map(E).filter(Boolean),c=l[0],u=l.slice(1);if(0===(null==u?void 0:u.length))return e;var d=c in S?S[c]:c;return u.unshift(d),s+"("+u.map((function(e){if(_.has(e))return e;var t=e.indexOf(" "),n=-1!==t?[e.substr(0,t),e.substr(t+1)]:[e],o=n[0],a=n[1],i=A(a)?a:a&&a.split(" "),s="colors."+o,l=s in r.__cssMap?r.__cssMap[s].varRef:o;return i?[l].concat(Array.isArray(i)?i:[i]).join(" "):l})).join(", ")+")"}(e,null!=r?r:{})},blur:R("blur"),opacity:R("opacity"),brightness:R("brightness"),contrast:R("contrast"),dropShadow:R("drop-shadow"),grayscale:R("grayscale"),hueRotate:R("hue-rotate"),invert:R("invert"),saturate:R("saturate"),sepia:R("sepia"),bgImage:function(e){return null==e||A(e)||C.has(e)?e:"url("+e+")"},outline:function(e){var r="0"===String(e)||"none"===String(e);return null!==e&&r?{outline:"2px solid transparent",outlineOffset:"2px"}:{outline:e}},flexDirection:function(e){var r,t=null!=(r=g[e])?r:{},n=t.space,o=t.divide,a={flexDirection:e};return n&&(a[n]=1),o&&(a[o]=1),a}},T={borderWidths:c("borderWidths"),borderStyles:c("borderStyles"),colors:c("colors"),borders:c("borders"),radii:c("radii",z.px),space:c("space",z.px),spaceT:c("space",z.px),degreeT:function(e){return{property:e,transform:z.degree}},prop:function(e,r,t){return i({property:e,scale:r},r&&{transform:l({scale:r,transform:t})})},propT:function(e,r){return{property:e,transform:r}},sizes:c("sizes",z.px),sizesT:c("sizes",z.fraction),shadows:c("shadows"),logical:function(e){var r=e.property,t=e.scale,n=e.transform;return{scale:t,property:f(r),transform:t?l({scale:t,compose:n}):n}},blur:c("blur",z.blur)},B={background:T.colors("background"),backgroundColor:T.colors("backgroundColor"),backgroundImage:T.propT("backgroundImage",z.bgImage),backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0,backgroundAttachment:!0,backgroundClip:{transform:z.bgClip},bgSize:T.prop("backgroundSize"),bgPosition:T.prop("backgroundPosition"),bg:T.colors("background"),bgColor:T.colors("backgroundColor"),bgPos:T.prop("backgroundPosition"),bgRepeat:T.prop("backgroundRepeat"),bgAttachment:T.prop("backgroundAttachment"),bgGradient:T.propT("backgroundImage",z.gradient),bgClip:{transform:z.bgClip}};Object.assign(B,{bgImage:B.backgroundImage,bgImg:B.backgroundImage});var j={border:T.borders("border"),borderWidth:T.borderWidths("borderWidth"),borderStyle:T.borderStyles("borderStyle"),borderColor:T.colors("borderColor"),borderRadius:T.radii("borderRadius"),borderTop:T.borders("borderTop"),borderBlockStart:T.borders("borderBlockStart"),borderTopLeftRadius:T.radii("borderTopLeftRadius"),borderStartStartRadius:T.logical({scale:"radii",property:{ltr:"borderTopLeftRadius",rtl:"borderTopRightRadius"}}),borderEndStartRadius:T.logical({scale:"radii",property:{ltr:"borderBottomLeftRadius",rtl:"borderBottomRightRadius"}}),borderTopRightRadius:T.radii("borderTopRightRadius"),borderStartEndRadius:T.logical({scale:"radii",property:{ltr:"borderTopRightRadius",rtl:"borderTopLeftRadius"}}),borderEndEndRadius:T.logical({scale:"radii",property:{ltr:"borderBottomRightRadius",rtl:"borderBottomLeftRadius"}}),borderRight:T.borders("borderRight"),borderInlineEnd:T.borders("borderInlineEnd"),borderBottom:T.borders("borderBottom"),borderBlockEnd:T.borders("borderBlockEnd"),borderBottomLeftRadius:T.radii("borderBottomLeftRadius"),borderBottomRightRadius:T.radii("borderBottomRightRadius"),borderLeft:T.borders("borderLeft"),borderInlineStart:{property:"borderInlineStart",scale:"borders"},borderInlineStartRadius:T.logical({scale:"radii",property:{ltr:["borderTopLeftRadius","borderBottomLeftRadius"],rtl:["borderTopRightRadius","borderBottomRightRadius"]}}),borderInlineEndRadius:T.logical({scale:"radii",property:{ltr:["borderTopRightRadius","borderBottomRightRadius"],rtl:["borderTopLeftRadius","borderBottomLeftRadius"]}}),borderX:T.borders(["borderLeft","borderRight"]),borderInline:T.borders("borderInline"),borderY:T.borders(["borderTop","borderBottom"]),borderBlock:T.borders("borderBlock"),borderTopWidth:T.borderWidths("borderTopWidth"),borderBlockStartWidth:T.borderWidths("borderBlockStartWidth"),borderTopColor:T.colors("borderTopColor"),borderBlockStartColor:T.colors("borderBlockStartColor"),borderTopStyle:T.borderStyles("borderTopStyle"),borderBlockStartStyle:T.borderStyles("borderBlockStartStyle"),borderBottomWidth:T.borderWidths("borderBottomWidth"),borderBlockEndWidth:T.borderWidths("borderBlockEndWidth"),borderBottomColor:T.colors("borderBottomColor"),borderBlockEndColor:T.colors("borderBlockEndColor"),borderBottomStyle:T.borderStyles("borderBottomStyle"),borderBlockEndStyle:T.borderStyles("borderBlockEndStyle"),borderLeftWidth:T.borderWidths("borderLeftWidth"),borderInlineStartWidth:T.borderWidths("borderInlineStartWidth"),borderLeftColor:T.colors("borderLeftColor"),borderInlineStartColor:T.colors("borderInlineStartColor"),borderLeftStyle:T.borderStyles("borderLeftStyle"),borderInlineStartStyle:T.borderStyles("borderInlineStartStyle"),borderRightWidth:T.borderWidths("borderRightWidth"),borderInlineEndWidth:T.borderWidths("borderInlineEndWidth"),borderRightColor:T.colors("borderRightColor"),borderInlineEndColor:T.colors("borderInlineEndColor"),borderRightStyle:T.borderStyles("borderRightStyle"),borderInlineEndStyle:T.borderStyles("borderInlineEndStyle"),borderTopRadius:T.radii(["borderTopLeftRadius","borderTopRightRadius"]),borderBottomRadius:T.radii(["borderBottomLeftRadius","borderBottomRightRadius"]),borderLeftRadius:T.radii(["borderTopLeftRadius","borderBottomLeftRadius"]),borderRightRadius:T.radii(["borderTopRightRadius","borderBottomRightRadius"])};Object.assign(j,{rounded:j.borderRadius,roundedTop:j.borderTopRadius,roundedTopLeft:j.borderTopLeftRadius,roundedTopRight:j.borderTopRightRadius,roundedTopStart:j.borderStartStartRadius,roundedTopEnd:j.borderStartEndRadius,roundedBottom:j.borderBottomRadius,roundedBottomLeft:j.borderBottomLeftRadius,roundedBottomRight:j.borderBottomRightRadius,roundedBottomStart:j.borderEndStartRadius,roundedBottomEnd:j.borderEndEndRadius,roundedLeft:j.borderLeftRadius,roundedRight:j.borderRightRadius,roundedStart:j.borderInlineStartRadius,roundedEnd:j.borderInlineEndRadius,borderStart:j.borderInlineStart,borderEnd:j.borderInlineEnd,borderTopStartRadius:j.borderStartStartRadius,borderTopEndRadius:j.borderStartEndRadius,borderBottomStartRadius:j.borderEndStartRadius,borderBottomEndRadius:j.borderEndEndRadius,borderStartRadius:j.borderInlineStartRadius,borderEndRadius:j.borderInlineEndRadius,borderStartWidth:j.borderInlineStartWidth,borderEndWidth:j.borderInlineEndWidth,borderStartColor:j.borderInlineStartColor,borderEndColor:j.borderInlineEndColor,borderStartStyle:j.borderInlineStartStyle,borderEndStyle:j.borderInlineEndStyle});var F={color:T.colors("color"),textColor:T.colors("color"),fill:T.colors("fill"),stroke:T.colors("stroke")},O={boxShadow:T.shadows("boxShadow"),mixBlendMode:!0,blendMode:T.prop("mixBlendMode"),backgroundBlendMode:!0,bgBlendMode:T.prop("backgroundBlendMode"),opacity:!0};Object.assign(O,{shadow:O.boxShadow});var P={filter:{transform:z.filter},blur:T.blur("--chakra-blur"),brightness:T.propT("--chakra-brightness",z.brightness),contrast:T.propT("--chakra-contrast",z.contrast),hueRotate:T.degreeT("--chakra-hue-rotate"),invert:T.propT("--chakra-invert",z.invert),saturate:T.propT("--chakra-saturate",z.saturate),dropShadow:T.propT("--chakra-drop-shadow",z.dropShadow),backdropFilter:{transform:z.backdropFilter},backdropBlur:T.blur("--chakra-backdrop-blur"),backdropBrightness:T.propT("--chakra-backdrop-brightness",z.brightness),backdropContrast:T.propT("--chakra-backdrop-contrast",z.contrast),backdropHueRotate:T.degreeT("--chakra-backdrop-hue-rotate"),backdropInvert:T.propT("--chakra-backdrop-invert",z.invert),backdropSaturate:T.propT("--chakra-backdrop-saturate",z.saturate)},M={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:{transform:z.flexDirection},experimental_spaceX:{static:v,transform:l({scale:"space",transform:function(e){return null!==e?{"--chakra-space-x":e}:null}})},experimental_spaceY:{static:y,transform:l({scale:"space",transform:function(e){return null!=e?{"--chakra-space-y":e}:null}})},flex:!0,flexFlow:!0,flexGrow:!0,flexShrink:!0,flexBasis:T.sizes("flexBasis"),justifySelf:!0,alignSelf:!0,order:!0,placeItems:!0,placeContent:!0,placeSelf:!0,gap:T.space("gap"),rowGap:T.space("rowGap"),columnGap:T.space("columnGap")};Object.assign(M,{flexDir:M.flexDirection});var I={gridGap:T.space("gridGap"),gridColumnGap:T.space("gridColumnGap"),gridRowGap:T.space("gridRowGap"),gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,gridAutoRows:!0,gridTemplate:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},W={appearance:!0,cursor:!0,resize:!0,userSelect:!0,pointerEvents:!0,outline:{transform:z.outline},outlineOffset:!0,outlineColor:T.colors("outlineColor")},D={width:T.sizesT("width"),inlineSize:T.sizesT("inlineSize"),height:T.sizes("height"),blockSize:T.sizes("blockSize"),boxSize:T.sizes(["width","height"]),minWidth:T.sizes("minWidth"),minInlineSize:T.sizes("minInlineSize"),minHeight:T.sizes("minHeight"),minBlockSize:T.sizes("minBlockSize"),maxWidth:T.sizes("maxWidth"),maxInlineSize:T.sizes("maxInlineSize"),maxHeight:T.sizes("maxHeight"),maxBlockSize:T.sizes("maxBlockSize"),d:T.prop("display"),overflow:!0,overflowX:!0,overflowY:!0,overscrollBehavior:!0,overscrollBehaviorX:!0,overscrollBehaviorY:!0,display:!0,verticalAlign:!0,boxSizing:!0,boxDecorationBreak:!0,float:T.propT("float",z.float),objectFit:!0,objectPosition:!0,visibility:!0,isolation:!0};Object.assign(D,{w:D.width,h:D.height,minW:D.minWidth,maxW:D.maxWidth,minH:D.minHeight,maxH:D.maxHeight,overscroll:D.overscrollBehavior,overscrollX:D.overscrollBehaviorX,overscrollY:D.overscrollBehaviorY});var N={listStyleType:!0,listStylePosition:!0,listStylePos:T.prop("listStylePosition"),listStyleImage:!0,listStyleImg:T.prop("listStyleImage")},L={border:"0px",clip:"rect(0, 0, 0, 0)",width:"1px",height:"1px",margin:"-1px",padding:"0px",overflow:"hidden",whiteSpace:"nowrap",position:"absolute"},H={position:"static",width:"auto",height:"auto",clip:"auto",padding:"0",margin:"0",overflow:"visible",whiteSpace:"normal"},$=function(e,r,t){var o={},a=(0,n.Wf)(e,r,{});for(var i in a){i in t&&null!=t[i]||(o[i]=a[i])}return o},G={srOnly:{transform:function(e){return!0===e?L:"focusable"===e?H:{}}},layerStyle:{processResult:!0,transform:function(e,r,t){return $(r,"layerStyles."+e,t)}},textStyle:{processResult:!0,transform:function(e,r,t){return $(r,"textStyles."+e,t)}},apply:{processResult:!0,transform:function(e,r,t){return $(r,e,t)}}},q={position:!0,pos:T.prop("position"),zIndex:T.prop("zIndex","zIndices"),inset:T.spaceT("inset"),insetX:T.spaceT(["left","right"]),insetInline:T.spaceT("insetInline"),insetY:T.spaceT(["top","bottom"]),insetBlock:T.spaceT("insetBlock"),top:T.spaceT("top"),insetBlockStart:T.spaceT("insetBlockStart"),bottom:T.spaceT("bottom"),insetBlockEnd:T.spaceT("insetBlockEnd"),left:T.spaceT("left"),insetInlineStart:T.logical({scale:"space",property:{ltr:"left",rtl:"right"}}),right:T.spaceT("right"),insetInlineEnd:T.logical({scale:"space",property:{ltr:"right",rtl:"left"}})};Object.assign(q,{insetStart:q.insetInlineStart,insetEnd:q.insetInlineEnd});var U={ring:{transform:z.ring},ringColor:T.colors("--chakra-ring-color"),ringOffset:T.prop("--chakra-ring-offset-width"),ringOffsetColor:T.colors("--chakra-ring-offset-color"),ringInset:T.prop("--chakra-ring-inset")},V={margin:T.spaceT("margin"),marginTop:T.spaceT("marginTop"),marginBlockStart:T.spaceT("marginBlockStart"),marginRight:T.spaceT("marginRight"),marginInlineEnd:T.spaceT("marginInlineEnd"),marginBottom:T.spaceT("marginBottom"),marginBlockEnd:T.spaceT("marginBlockEnd"),marginLeft:T.spaceT("marginLeft"),marginInlineStart:T.spaceT("marginInlineStart"),marginX:T.spaceT(["marginInlineStart","marginInlineEnd"]),marginInline:T.spaceT("marginInline"),marginY:T.spaceT(["marginTop","marginBottom"]),marginBlock:T.spaceT("marginBlock"),padding:T.space("padding"),paddingTop:T.space("paddingTop"),paddingBlockStart:T.space("paddingBlockStart"),paddingRight:T.space("paddingRight"),paddingBottom:T.space("paddingBottom"),paddingBlockEnd:T.space("paddingBlockEnd"),paddingLeft:T.space("paddingLeft"),paddingInlineStart:T.space("paddingInlineStart"),paddingInlineEnd:T.space("paddingInlineEnd"),paddingX:T.space(["paddingInlineStart","paddingInlineEnd"]),paddingInline:T.space("paddingInline"),paddingY:T.space(["paddingTop","paddingBottom"]),paddingBlock:T.space("paddingBlock")};Object.assign(V,{m:V.margin,mt:V.marginTop,mr:V.marginRight,me:V.marginInlineEnd,marginEnd:V.marginInlineEnd,mb:V.marginBottom,ml:V.marginLeft,ms:V.marginInlineStart,marginStart:V.marginInlineStart,mx:V.marginX,my:V.marginY,p:V.padding,pt:V.paddingTop,py:V.paddingY,px:V.paddingX,pb:V.paddingBottom,pl:V.paddingLeft,ps:V.paddingInlineStart,paddingStart:V.paddingInlineStart,pr:V.paddingRight,pe:V.paddingInlineEnd,paddingEnd:V.paddingInlineEnd});var X={textDecorationColor:T.colors("textDecorationColor"),textDecoration:!0,textDecor:{property:"textDecoration"},textDecorationLine:!0,textDecorationStyle:!0,textDecorationThickness:!0,textUnderlineOffset:!0,textShadow:T.shadows("textShadow")},Y={clipPath:!0,transform:T.propT("transform",z.transform),transformOrigin:!0,translateX:T.spaceT("--chakra-translate-x"),translateY:T.spaceT("--chakra-translate-y"),skewX:T.degreeT("--chakra-skew-x"),skewY:T.degreeT("--chakra-skew-y"),scaleX:T.prop("--chakra-scale-x"),scaleY:T.prop("--chakra-scale-y"),scale:T.prop(["--chakra-scale-x","--chakra-scale-y"]),rotate:T.degreeT("--chakra-rotate")},K={transition:!0,transitionDelay:!0,animation:!0,willChange:!0,transitionDuration:T.prop("transitionDuration","transition.duration"),transitionProperty:T.prop("transitionProperty","transition.property"),transitionTimingFunction:T.prop("transitionTimingFunction","transition.easing")},Z={fontFamily:T.prop("fontFamily","fonts"),fontSize:T.prop("fontSize","fontSizes",z.px),fontWeight:T.prop("fontWeight","fontWeights"),lineHeight:T.prop("lineHeight","lineHeights"),letterSpacing:T.prop("letterSpacing","letterSpacings"),textAlign:!0,fontStyle:!0,wordBreak:!0,overflowWrap:!0,textOverflow:!0,textTransform:!0,whiteSpace:!0,noOfLines:{static:{overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"var(--chakra-line-clamp)"},property:"--chakra-line-clamp"},isTruncated:{transform:function(e){if(!0===e)return{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}}};function Q(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var ee=function(e){return e+":focus &, "+e+"[data-focus] &"},re=function(e){return e+":focus-visible &"},te=function(e){return e+":active &, "+e+"[data-active] &"},ne=function(e){return e+":disabled &, "+e+"[data-disabled] &"},oe=function(e){return e+":invalid &, "+e+"[data-invalid] &"},ae=function(e){return e+":checked &, "+e+"[data-checked] &"},ie=function(e){return se(e,"[role=group]","[data-group]",".group")},se=function(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n1?r-1:0),n=1;n=0||(o[t]=e[t]);return o}(e,je)}function Me(e){var r,t=Pe(e),o=function(e,r){var t={cssMap:{},cssVars:{}};return(0,n.Vg)(e,(function(e,n){var o,a=n[0],i=(null!=(o=Be[a])?o:Be.defaultHandler)(n,e,r),s=i.cssVars,l=i.cssMap;Object.assign(t.cssVars,s),Object.assign(t.cssMap,l)})),t}(Oe(t),{cssVarPrefix:null==(r=t.config)?void 0:r.cssVarPrefix}),a=o.cssMap,s=o.cssVars;return Object.assign(t,{__cssVars:i({},{"--chakra-ring-inset":"var(--chakra-empty,/*!*/ /*!*/)","--chakra-ring-offset-width":"0px","--chakra-ring-offset-color":"#fff","--chakra-ring-color":"rgba(66, 153, 225, 0.6)","--chakra-ring-offset-shadow":"0 0 #0000","--chakra-ring-shadow":"0 0 #0000","--chakra-space-x-reverse":"0","--chakra-space-y-reverse":"0"},s),__cssMap:a,__breakpoints:(0,n.yn)(t.breakpoints)}),t}},2846:function(e,r,t){"use strict";t.d(r,{ZL:function(){return F},Fo:function(){return B},f6:function(){return R},m$:function(){return H},Gp:function(){return $},Lr:function(){return O},jC:function(){return U},mq:function(){return q},yK:function(){return j},Fg:function(){return z}});var n=t(949),o=t(4244),a=t(917),i=t(9394),s=t(5031),l=t(8554),c=t.n(l),u=t(7294),d=t(9590),f=t.n(d),p=t(6450),h=t(7462),m=t(7866),g=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,b=(0,m.Z)((function(e){return g.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),v=t(444),y=t(4478),x=b,w=function(e){return"theme"!==e},k=function(e){return"string"===typeof e&&e.charCodeAt(0)>96?x:w},S=function(e,r,t){var n;if(r){var o=r.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(r){return e.__emotion_forwardProp(r)&&o(r)}:o}return"function"!==typeof n&&t&&(n=e.__emotion_forwardProp),n},_=function(){return null},C=function e(r,t){var n,o,a=r.__emotion_real===r,s=a&&r.__emotion_base||r;void 0!==t&&(n=t.label,o=t.target);var l=S(r,t,a),c=l||k(s),d=!c("as");return function(){var f=arguments,p=a&&void 0!==r.__emotion_styles?r.__emotion_styles.slice(0):[];if(void 0!==n&&p.push("label:"+n+";"),null==f[0]||void 0===f[0].raw)p.push.apply(p,f);else{0,p.push(f[0][0]);for(var m=f.length,g=1;g` or ``");return e}var T=(0,p.kr)({name:"StylesContext",errorMessage:"useStyles: `styles` is undefined. Seems you forgot to wrap the components in `` "}),B=T[0],j=T[1],F=function(){var e=(0,n.If)().colorMode;return u.createElement(a.xB,{styles:function(r){var t=(0,s.Wf)(r,"styles.global"),n=(0,s.Pu)(t,{theme:r,colorMode:e});if(n){var a=(0,o.iv)(n)(r);return a}}})};function O(e){return(0,s.CE)(e,["styleConfig","size","variant","colorScheme"])}function P(){return A({},(0,n.If)(),{theme:z()})}function M(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n=0||(o[t]=e[t]);return o}var I=new Set([].concat(o.cC,["textStyle","layerStyle","apply","isTruncated","noOfLines","focusBorderColor","errorBorderColor","as","__css","css","sx"])),W=new Set(["htmlWidth","htmlHeight","htmlSize"]),D=function(e){return W.has(e)||!I.has(e)},N=["theme","css","__css","sx"],L=["baseStyle"];var H=function(e,r){var t=null!=r?r:{},n=t.baseStyle,a=M(t,L);a.shouldForwardProp||(a.shouldForwardProp=D);var i=function(e){var r=e.baseStyle;return function(e){e.theme;var t=e.css,n=e.__css,a=e.sx,i=M(e,N),l=(0,s.lw)(i,(function(e,r){return(0,o.ZR)(r)})),c=(0,s.Pu)(r,e),u=Object.assign({},n,c,(0,s.YU)(l),a),d=(0,o.iv)(u)(e.theme);return t?[d,t]:d}}({baseStyle:n});return E(e,a)(i)};function $(e){return u.forwardRef(e)}["a","b","article","aside","blockquote","button","caption","cite","circle","code","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","img","input","kbd","label","li","main","mark","nav","ol","p","path","pre","q","rect","s","svg","section","select","strong","small","span","sub","sup","table","tbody","td","textarea","tfoot","th","thead","tr","ul"].forEach((function(e){H[e]=H(e)}));var G=["styleConfig"];function q(e,r,t){var n;void 0===r&&(r={}),void 0===t&&(t={});var o=r,a=o.styleConfig,i=M(o,G),l=P(),d=l.theme,p=l.colorMode,h=(0,s.Wf)(d,"components."+e),m=a||h,g=c()({theme:d,colorMode:p},null!=(n=null==m?void 0:m.defaultProps)?n:{},(0,s.YU)((0,s.CE)(i,["children"]))),b=(0,u.useRef)({});if(m){var v,y,x,w,k,S,_=(0,s.Pu)(null!=(v=m.baseStyle)?v:{},g),C=(0,s.Pu)(null!=(y=null==(x=m.variants)?void 0:x[g.variant])?y:{},g),E=(0,s.Pu)(null!=(w=null==(k=m.sizes)?void 0:k[g.size])?w:{},g),A=c()({},_,E,C);null!=(S=t)&&S.isMultiPart&&m.parts&&m.parts.forEach((function(e){var r;A[e]=null!=(r=A[e])?r:{}})),f()(b.current,A)||(b.current=A)}return b.current}function U(e,r){return q(e,r,{isMultiPart:!0})}},5031:function(e,r,t){"use strict";t.d(r,{Ts:function(){return h},yn:function(){return R},Qm:function(){return B},v0:function(){return O},cx:function(){return j},PB:function(){return T},YU:function(){return y},sq:function(){return w},K1:function(){return k},jU:function(){return z},FS:function(){return p},Qr:function(){return u},mf:function(){return l},Ft:function(){return d},hj:function(){return i},Kn:function(){return c},HD:function(){return f},XQ:function(){return D},Wf:function(){return b},ZT:function(){return M},lw:function(){return v},Yd:function(){return x},CE:function(){return m},ei:function(){return g},zG:function(){return W},px:function(){return S},Pu:function(){return F},Vg:function(){return N},ZK:function(){return I}});t(8554);var n=1/60*1e3,o="undefined"!==typeof performance?function(){return performance.now()}:function(){return Date.now()};function a(e){var r=null==e?0:e.length;return r?e[r-1]:void 0}function i(e){return"number"===typeof e}function s(e){return Array.isArray(e)}function l(e){return"function"===typeof e}function c(e){var r=typeof e;return null!=e&&("object"===r||"function"===r)&&!s(e)}function u(e){return c(e)&&0===Object.keys(e).length}function d(e){return null==e}function f(e){return"[object String]"===Object.prototype.toString.call(e)}function p(e){return/^var\(--.+\)$/.test(e)}var h=!1;function m(e,r){var t={};return Object.keys(e).forEach((function(n){r.includes(n)||(t[n]=e[n])})),t}function g(e,r){var t={};return r.forEach((function(r){r in e&&(t[r]=e[r])})),t}var b=function(e){var r=new WeakMap;return function(t,n,o,a){if("undefined"===typeof t)return e(t,n,o);r.has(t)||r.set(t,new Map);var i=r.get(t);if(i.has(n))return i.get(n);var s=e(t,n,o,a);return i.set(n,s),s}}((function(e,r,t,n){var o="string"===typeof r?r.split("."):[r];for(n=0;nparseInt(r[1],10)?1:-1},C=function(e){return w(Object.entries(e).sort(_))};function E(e){var r=C(e);return Object.assign(Object.values(r),r)}function A(e,r){var t=[];return e&&t.push("@media screen and (min-width: "+S(e)+")"),t.length>0&&r&&t.push("and"),r&&t.push("@media screen and (max-width: "+S(r)+")"),t.join(" ")}function R(e){var r;if(!e)return null;e.base=null!=(r=e.base)?r:"0px";var t=E(e),n=Object.entries(e).sort(_).map((function(e,r,t){var n,o=e[0],a=e[1],s=(null!=(n=t[r+1])?n:[])[1];return{breakpoint:o,minW:a,maxW:s=parseFloat(s)>0?function(e){var r;if(!e)return e;var t=(e=null!=(r=S(e))?r:e).endsWith("px")?-1:-.0635;return i(e)?""+(e+t):e.replace(/([0-9]+\.?[0-9]*)/,(function(e){return""+(parseFloat(e)+t)}))}(s):void 0,maxWQuery:A(null,s),minWQuery:A(a),minMaxQuery:A(a,s)}})),o=function(e){var r=Object.keys(C(e));return new Set(r)}(e),s=Array.from(o.values());return{keys:o,normalized:t,isResponsive:function(e){var r=Object.keys(e);return r.length>0&&r.every((function(e){return o.has(e)}))},asObject:C(e),asArray:E(e),details:n,media:[null].concat(t.map((function(e){return A(e)})).slice(1)),toArrayValue:function(e){if(!c(e))throw new Error("toArrayValue: value must be an object");for(var r=s.map((function(r){var t;return null!=(t=e[r])?t:null}));null===a(r);)r.pop();return r},toObjectValue:function(e){if(!Array.isArray(e))throw new Error("toObjectValue: value must be an array");return e.reduce((function(e,r,t){var n=s[t];return null!=n&&null!=r&&(e[n]=r),e}),{})}}}var z=!("undefined"===typeof window||!window.document||!window.document.createElement),T=function(e){return e?"":void 0},B=function(e){return!!e||void 0},j=function(){for(var e=arguments.length,r=new Array(e),t=0;t1?r-1:0),n=1;n0?c(y,--b):0,m--,10===v&&(m=1,h--),v}function S(){return v=b2||A(v)>3?"":" "}function j(e,r){for(;--r&&S()&&!(v<48||v>102||v>57&&v<65||v>70&&v<97););return E(e,C()+(r<6&&32==_()&&32==S()))}function F(e){for(;S();)switch(v){case e:return b;case 34:case 39:return F(34===e||39===e?e:v);case 40:41===e&&F(e);break;case 92:S()}return b}function O(e,r){for(;S()&&e+v!==57&&(e+v!==84||47!==_()););return"/*"+E(r,b-1)+"*"+a(47===e?e:S())}function P(e){for(;!A(_());)S();return E(e,b)}var M="-ms-",I="-moz-",W="-webkit-",D="comm",N="rule",L="decl";function H(e,r){for(var t="",n=f(e),o=0;o6)switch(c(e,r+1)){case 109:if(45!==c(e,r+4))break;case 102:return s(e,/(.+:)(.+)-([^]+)/,"$1-webkit-$2-$3$1"+I+(108==c(e,r+3)?"$3":"$2-$3"))+e;case 115:return~l(e,"stretch")?G(s(e,"stretch","fill-available"),r)+e:e}break;case 4949:if(115!==c(e,r+1))break;case 6444:switch(c(e,d(e)-3-(~l(e,"!important")&&10))){case 107:return s(e,":",":"+W)+e;case 101:return s(e,/(.+:)([^;!]+)(;|!.+)?/,"$1"+W+(45===c(e,14)?"inline-":"")+"box$3$1"+W+"$2$3$1"+M+"$2box$3")+e}break;case 5936:switch(c(e,r+11)){case 114:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"lr")+e}return W+e+M+e+e}return e}function q(e){return z(U("",null,null,null,[""],e=R(e),0,[0],e))}function U(e,r,t,n,o,i,l,c,u){for(var f=0,h=0,m=l,g=0,b=0,v=0,y=1,x=1,w=1,E=0,A="",R=o,z=i,F=n,M=A;x;)switch(v=E,E=S()){case 34:case 39:case 91:case 40:M+=T(E);break;case 9:case 10:case 13:case 32:M+=B(v);break;case 92:M+=j(C()-1,7);continue;case 47:switch(_()){case 42:case 47:p(X(O(S(),C()),r,t),u);break;default:M+="/"}break;case 123*y:c[f++]=d(M)*w;case 125*y:case 59:case 0:switch(E){case 0:case 125:x=0;case 59+h:b>0&&d(M)-m&&p(b>32?Y(M+";",n,t,m-1):Y(s(M," ","")+";",n,t,m-2),u);break;case 59:M+=";";default:if(p(F=V(M,r,t,f,h,o,c,A,R=[],z=[],m),i),123===E)if(0===h)U(M,r,F,F,R,i,m,c,z);else switch(g){case 100:case 109:case 115:U(e,F,F,n&&p(V(e,F,F,0,0,o,c,A,o,R=[],m),z),o,z,m,c,n?R:z);break;default:U(M,F,F,F,[""],z,m,c,z)}}f=h=b=0,y=w=1,A=M="",m=l;break;case 58:m=1+d(M),b=v;default:if(y<1)if(123==E)--y;else if(125==E&&0==y++&&125==k())continue;switch(M+=a(E),E*y){case 38:w=h>0?1:(M+="\f",-1);break;case 44:c[f++]=(d(M)-1)*w,w=1;break;case 64:45===_()&&(M+=T(S())),g=_(),h=d(A=M+=P(C())),E++;break;case 45:45===v&&2==d(M)&&(y=0)}}return i}function V(e,r,t,n,a,l,c,d,p,h,m){for(var g=a-1,b=0===a?l:[""],v=f(b),y=0,w=0,k=0;y0?b[S]+" "+_:s(_,/&\f/g,b[S])))&&(p[k++]=C);return x(e,r,t,0===a?N:d,p,h,m)}function X(e,r,t){return x(e,r,t,D,a(v),u(e,2,-2),0)}function Y(e,r,t,n){return x(e,r,t,L,u(e,0,n),u(e,n+1,-1),n)}var K=function(e,r,t){for(var n=0,o=0;n=o,o=_(),38===n&&12===o&&(r[t]=1),!A(o);)S();return E(e,b)},Z=function(e,r){return z(function(e,r){var t=-1,n=44;do{switch(A(n)){case 0:38===n&&12===_()&&(r[t]=1),e[t]+=K(b-1,r,t);break;case 2:e[t]+=T(n);break;case 4:if(44===n){e[++t]=58===_()?"&\f":"",r[t]=e[t].length;break}default:e[t]+=a(n)}}while(n=S());return e}(R(e),r))},Q=new WeakMap,J=function(e){if("rule"===e.type&&e.parent&&e.length){for(var r=e.value,t=e.parent,n=e.column===t.column&&e.line===t.line;"rule"!==t.type;)if(!(t=t.parent))return;if((1!==e.props.length||58===r.charCodeAt(0)||Q.get(t))&&!n){Q.set(e,!0);for(var o=[],a=Z(r,o),i=t.props,s=0,l=0;s=4;++n,o-=4)r=1540483477*(65535&(r=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(r>>>16)<<16),t=1540483477*(65535&(r^=r>>>24))+(59797*(r>>>16)<<16)^1540483477*(65535&t)+(59797*(t>>>16)<<16);switch(o){case 3:t^=(255&e.charCodeAt(n+2))<<16;case 2:t^=(255&e.charCodeAt(n+1))<<8;case 1:t=1540483477*(65535&(t^=255&e.charCodeAt(n)))+(59797*(t>>>16)<<16)}return(((t=1540483477*(65535&(t^=t>>>13))+(59797*(t>>>16)<<16))^t>>>15)>>>0).toString(36)},o=t(351),a=t(7866),i=/[A-Z]|^ms/g,s=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=function(e){return 45===e.charCodeAt(1)},c=function(e){return null!=e&&"boolean"!==typeof e},u=(0,a.Z)((function(e){return l(e)?e:e.replace(i,"-$&").toLowerCase()})),d=function(e,r){switch(e){case"animation":case"animationName":if("string"===typeof r)return r.replace(s,(function(e,r,t){return p={name:r,styles:t,next:p},r}))}return 1===o.Z[e]||l(e)||"number"!==typeof r||0===r?r:r+"px"};function f(e,r,t){if(null==t)return"";if(void 0!==t.__emotion_styles)return t;switch(typeof t){case"boolean":return"";case"object":if(1===t.anim)return p={name:t.name,styles:t.styles,next:p},t.name;if(void 0!==t.styles){var n=t.next;if(void 0!==n)for(;void 0!==n;)p={name:n.name,styles:n.styles,next:p},n=n.next;return t.styles+";"}return function(e,r,t){var n="";if(Array.isArray(t))for(var o=0;o-1},K.prototype.set=function(e,r){var t=this.__data__,n=te(t,e);return n<0?(++this.size,t.push([e,r])):t[n][1]=r,this},Z.prototype.clear=function(){this.size=0,this.__data__={hash:new Y,map:new(U||K),string:new Y}},Z.prototype.delete=function(e){var r=fe(this,e).delete(e);return this.size-=r?1:0,r},Z.prototype.get=function(e){return fe(this,e).get(e)},Z.prototype.has=function(e){return fe(this,e).has(e)},Z.prototype.set=function(e,r){var t=fe(this,e),n=t.size;return t.set(e,r),this.size+=t.size==n?0:1,this},Q.prototype.clear=function(){this.__data__=new K,this.size=0},Q.prototype.delete=function(e){var r=this.__data__,t=r.delete(e);return this.size=r.size,t},Q.prototype.get=function(e){return this.__data__.get(e)},Q.prototype.has=function(e){return this.__data__.has(e)},Q.prototype.set=function(e,r){var t=this.__data__;if(t instanceof K){var n=t.__data__;if(!U||n.length<199)return n.push([e,r]),this.size=++t.size,this;t=this.__data__=new Z(n)}return t.set(e,r),this.size=t.size,this};var oe,ae=function(e,r,t){for(var n=-1,o=Object(e),a=t(e),i=a.length;i--;){var s=a[oe?i:++n];if(!1===r(o[s],s,o))break}return e};function ie(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":L&&L in Object(e)?function(e){var r=R.call(e,L),t=e[L];try{e[L]=void 0;var n=!0}catch(a){}var o=T.call(e);n&&(r?e[L]=t:delete e[L]);return o}(e):function(e){return T.call(e)}(e)}function se(e){return Ee(e)&&ie(e)==a}function le(e){return!(!Ce(e)||function(e){return!!z&&z in e}(e))&&(Se(e)?j:l).test(function(e){if(null!=e){try{return A.call(e)}catch(r){}try{return e+""}catch(r){}}return""}(e))}function ce(e){if(!Ce(e))return function(e){var r=[];if(null!=e)for(var t in Object(e))r.push(t);return r}(e);var r=me(e),t=[];for(var n in e)("constructor"!=n||!r&&R.call(e,n))&&t.push(n);return t}function ue(e,r,t,n,o){e!==r&&ae(r,(function(a,i){if(o||(o=new Q),Ce(a))!function(e,r,t,n,o,a,i){var l=ge(e,t),c=ge(r,t),u=i.get(c);if(u)return void ee(e,t,u);var d=a?a(l,c,t+"",e,r,i):void 0,f=void 0===d;if(f){var p=xe(c),h=!p&&ke(c),m=!p&&!h&&Ae(c);d=c,p||h||m?xe(l)?d=l:Ee(g=l)&&we(g)?d=function(e,r){var t=-1,n=e.length;r||(r=Array(n));for(;++t-1&&e%1==0&&e0){if(++r>=800)return arguments[0]}else r=0;return e.apply(void 0,arguments)}}(H?function(e,r){return H(e,"toString",{configurable:!0,enumerable:!1,value:(t=r,function(){return t}),writable:!0});var t}:Be);function ve(e,r){return e===r||e!==e&&r!==r}var ye=se(function(){return arguments}())?se:function(e){return Ee(e)&&R.call(e,"callee")&&!D.call(e,"callee")},xe=Array.isArray;function we(e){return null!=e&&_e(e.length)&&!Se(e)}var ke=$||function(){return!1};function Se(e){if(!Ce(e))return!1;var r=ie(e);return r==i||"[object GeneratorFunction]"==r||"[object AsyncFunction]"==r||"[object Proxy]"==r}function _e(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=o}function Ce(e){var r=typeof e;return null!=e&&("object"==r||"function"==r)}function Ee(e){return null!=e&&"object"==typeof e}var Ae=y?function(e){return function(r){return e(r)}}(y):function(e){return Ee(e)&&_e(e.length)&&!!u[ie(e)]};function Re(e){return we(e)?J(e,!0):ce(e)}var ze,Te=(ze=function(e,r,t,n){ue(e,r,t,n)},de((function(e,r){var t=-1,n=r.length,o=n>1?r[n-1]:void 0,a=n>2?r[2]:void 0;for(o=ze.length>3&&"function"==typeof o?(n--,o):void 0,a&&function(e,r,t){if(!Ce(t))return!1;var n=typeof r;return!!("number"==n?we(t)&&he(r,t.length):"string"==n&&r in t)&&ve(t[r],e)}(r[0],r[1],a)&&(o=n<3?void 0:o,n=1),e=Object(e);++t [fill="rgb(65,53,214)"] { fill: #232381; stroke: #232381; }\n &:hover > [fill="rgb(255,255,0)"] { fill: #d6d700; }\n &:hover > [fill="rgb(255,229,153)"] { fill: #f3c950; }\n &:hover > [fill="rgb(153,153,153)"] { fill: #646464; }\n &:hover > [fill="rgb(255,255,255)"] { fill: #d7d7d7; }\n }\n \n svg .done {\n & rect { fill: #cbcbcb !important; }\n & text { text-decoration: line-through; }\n }\n'],r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}})));return b=function(){return t},t}var v=(0,s.iv)(b());var y=function(e){var r=e.Component,t=e.pageProps;return(0,a.useEffect)((function(){(0,c.$)(window.location.pathname)}),[]),(0,o.jsxs)(i.xjn,{theme:l.y,children:[(0,o.jsx)(s.xB,{styles:v}),(0,o.jsx)(h,{}),(0,o.jsx)(r,g({},t))]})}},8909:function(e,r,t){"use strict";t.d(r,{y:function(){return n}});var n=(0,t(3606).B1C)({colors:{brand:{bg:"#06020d",hero:"#06020d",footer:"#0d041e"}}})},1002:function(){},6005:function(){},9590:function(e){var r="undefined"!==typeof Element,t="function"===typeof Map,n="function"===typeof Set,o="function"===typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!==l--;)if(!a(e[l],i[l]))return!1;return!0}if(t&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.value[0])))return!1;return!0}if(n&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!==l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!==l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(r&&e instanceof Element)return!1;for(l=s;0!==l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!==e&&i!==i}e.exports=function(e,r){try{return a(e,r)}catch(t){if((t.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw t}}},1742:function(e){e.exports=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var r=document.activeElement,t=[],n=0;n=0||(o[t]=e[t]);return o}(e,s),v={ref:r,focusable:p,className:(0,o.cx)("chakra-icon",m),__css:i({w:"1em",h:"1em",display:"inline-block",lineHeight:"1em",flexShrink:0,color:d},g)},y=null!=c?c:l.viewBox;if(t&&"string"!==typeof t)return a.createElement(n.m$.svg,i({as:t},v,b));var x=null!=h?h:l.path;return a.createElement(n.m$.svg,i({verticalAlign:"middle",viewBox:y},v,b),x)}));o.Ts&&(c.displayName="Icon");var u=c;function d(e){var r=e.viewBox,t=void 0===r?"0 0 24 24":r,s=e.d,l=e.path,u=e.displayName,d=e.defaultProps,f=void 0===d?{}:d,p=(0,n.Gp)((function(e,r){return a.createElement(c,i({ref:r,viewBox:t},f,e),null!=l?l:a.createElement("path",{fill:"currentColor",d:s}))}));return o.Ts&&(p.displayName=u),p}},8527:function(e,r,t){"use strict";t.d(r,{Ct:function(){return h},xu:function(){return b},EK:function(){return k},W2:function(){return _},iz:function(){return A},kC:function(){return z},X6:function(){return O},rU:function(){return I},aV:function(){return L},DE:function(){return q},HC:function(){return G},MI:function(){return V},Kq:function(){return J},cX:function(){return K},xv:function(){return ne},QI:function(){return $},gC:function(){return re}});var n=t(2846),o=t(4244),a=t(5031),i=t(7294),s=t(894),l=t(6450);function c(){return(c=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}var d=["ratio","children","className"],f=(0,n.Gp)((function(e,r){var t=e.ratio,o=void 0===t?4/3:t,s=e.children,l=e.className,f=u(e,d),p=i.Children.only(s),h=(0,a.cx)("chakra-aspect-ratio",l);return i.createElement(n.m$.div,c({ref:r,position:"relative",className:h,_before:{height:0,content:'""',display:"block",paddingBottom:(0,a.XQ)(o,(function(e){return 1/e*100+"%"}))},__css:{"& > *:not(style)":{overflow:"hidden",position:"absolute",top:"0",right:"0",bottom:"0",left:"0",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},"& > img, & > video":{objectFit:"cover"}}},f),p)}));a.Ts&&(f.displayName="AspectRatio");var p=["className"],h=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Badge",e),o=(0,n.Lr)(e);o.className;var s=u(o,p);return i.createElement(n.m$.span,c({ref:r,className:(0,a.cx)("chakra-badge",e.className)},s,{__css:c({display:"inline-block",whiteSpace:"nowrap",verticalAlign:"middle"},t)}))}));a.Ts&&(h.displayName="Badge");var m=["size","centerContent"],g=["size"],b=(0,n.m$)("div");a.Ts&&(b.displayName="Box");var v=(0,n.Gp)((function(e,r){var t=e.size,n=e.centerContent,o=void 0===n||n,a=u(e,m),s=o?{display:"flex",alignItems:"center",justifyContent:"center"}:{};return i.createElement(b,c({ref:r,boxSize:t,__css:c({},s,{flexShrink:0,flexGrow:0})},a))}));a.Ts&&(v.displayName="Square");var y=(0,n.Gp)((function(e,r){var t=e.size,n=u(e,g);return i.createElement(v,c({size:t,ref:r,borderRadius:"9999px"},n))}));a.Ts&&(y.displayName="Circle");var x=(0,n.m$)("div",{baseStyle:{display:"flex",alignItems:"center",justifyContent:"center"}});a.Ts&&(x.displayName="Center");var w=["className"],k=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Code",e),o=(0,n.Lr)(e);o.className;var s=u(o,w);return i.createElement(n.m$.code,c({ref:r,className:(0,a.cx)("chakra-code",e.className)},s,{__css:c({display:"inline-block"},t)}))}));a.Ts&&(k.displayName="Code");var S=["className","centerContent"],_=(0,n.Gp)((function(e,r){var t=(0,n.Lr)(e),o=t.className,s=t.centerContent,l=u(t,S),d=(0,n.mq)("Container",e);return i.createElement(n.m$.div,c({ref:r,className:(0,a.cx)("chakra-container",o)},l,{__css:c({},d,s&&{display:"flex",flexDirection:"column",alignItems:"center"})}))}));a.Ts&&(_.displayName="Container");var C=["borderLeftWidth","borderBottomWidth","borderTopWidth","borderRightWidth","borderWidth","borderStyle","borderColor"],E=["className","orientation","__css"],A=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Divider",e),o=t.borderLeftWidth,s=t.borderBottomWidth,l=t.borderTopWidth,d=t.borderRightWidth,f=t.borderWidth,p=t.borderStyle,h=t.borderColor,m=u(t,C),g=(0,n.Lr)(e),b=g.className,v=g.orientation,y=void 0===v?"horizontal":v,x=g.__css,w=u(g,E),k={vertical:{borderLeftWidth:o||d||f||"1px",height:"100%"},horizontal:{borderBottomWidth:s||l||f||"1px",width:"100%"}};return i.createElement(n.m$.hr,c({ref:r,"aria-orientation":y},w,{__css:c({},m,{border:"0",borderColor:h,borderStyle:p},k[y],x),className:(0,a.cx)("chakra-divider",b)}))}));a.Ts&&(A.displayName="Divider");var R=["direction","align","justify","wrap","basis","grow","shrink"],z=(0,n.Gp)((function(e,r){var t=e.direction,o=e.align,a=e.justify,s=e.wrap,l=e.basis,d=e.grow,f=e.shrink,p=u(e,R),h={display:"flex",flexDirection:t,alignItems:o,justifyContent:a,flexWrap:s,flexBasis:l,flexGrow:d,flexShrink:f};return i.createElement(n.m$.div,c({ref:r,__css:h},p))}));a.Ts&&(z.displayName="Flex");var T=["area","templateAreas","gap","rowGap","columnGap","column","row","autoFlow","autoRows","templateRows","autoColumns","templateColumns"],B=(0,n.Gp)((function(e,r){var t=e.area,o=e.templateAreas,a=e.gap,s=e.rowGap,l=e.columnGap,d=e.column,f=e.row,p=e.autoFlow,h=e.autoRows,m=e.templateRows,g=e.autoColumns,b=e.templateColumns,v=u(e,T),y={display:"grid",gridArea:t,gridTemplateAreas:o,gridGap:a,gridRowGap:s,gridColumnGap:l,gridAutoColumns:g,gridColumn:d,gridRow:f,gridAutoFlow:p,gridAutoRows:h,gridTemplateRows:m,gridTemplateColumns:b};return i.createElement(n.m$.div,c({ref:r,__css:y},v))}));a.Ts&&(B.displayName="Grid");var j=["className"],O=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Heading",e),o=(0,n.Lr)(e);o.className;var s=u(o,j);return i.createElement(n.m$.h2,c({ref:r,className:(0,a.cx)("chakra-heading",e.className)},s,{__css:t}))}));a.Ts&&(O.displayName="Heading");var P=["className"],F=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Kbd",e),o=(0,n.Lr)(e),s=o.className,l=u(o,P);return i.createElement(n.m$.kbd,c({ref:r,className:(0,a.cx)("chakra-kbd",s)},l,{__css:c({fontFamily:"mono"},t)}))}));a.Ts&&(F.displayName="Kbd");var M=["className","isExternal"],I=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Link",e),o=(0,n.Lr)(e),s=o.className,l=o.isExternal,d=u(o,M);return i.createElement(n.m$.a,c({target:l?"_blank":void 0,rel:l?"noopener noreferrer":void 0,ref:r,className:(0,a.cx)("chakra-link",s)},d,{__css:t}))}));a.Ts&&(I.displayName="Link");var W=["children","styleType","stylePosition","spacing"],N=["as"],D=["as"],L=(0,n.Gp)((function(e,r){var t,o=(0,n.jC)("List",e),a=(0,n.Lr)(e),s=a.children,d=a.styleType,f=void 0===d?"none":d,p=a.stylePosition,h=a.spacing,m=u(a,W),g=(0,l.WR)(s),b=h?((t={})["& > *:not(style) ~ *:not(style)"]={mt:h},t):{};return i.createElement(n.Fo,{value:o},i.createElement(n.m$.ul,c({ref:r,listStyleType:f,listStylePosition:p,role:"list",__css:c({},o.container,b)},m),g))}));a.Ts&&(L.displayName="List");var H=(0,n.Gp)((function(e,r){e.as;var t=u(e,N);return i.createElement(L,c({ref:r,as:"ol",styleType:"decimal",marginStart:"1em"},t))}));a.Ts&&(H.displayName="OrderedList");var $=(0,n.Gp)((function(e,r){e.as;var t=u(e,D);return i.createElement(L,c({ref:r,as:"ul",styleType:"initial",marginStart:"1em"},t))}));a.Ts&&($.displayName="UnorderedList");var G=(0,n.Gp)((function(e,r){var t=(0,n.yK)();return i.createElement(n.m$.li,c({ref:r},e,{__css:t.item}))}));a.Ts&&(G.displayName="ListItem");var q=(0,n.Gp)((function(e,r){var t=(0,n.yK)();return i.createElement(s.JO,c({ref:r,role:"presentation"},e,{__css:t.icon}))}));a.Ts&&(q.displayName="ListIcon");var U=["columns","spacingX","spacingY","spacing","minChildWidth"],V=(0,n.Gp)((function(e,r){var t,n,o=e.columns,s=e.spacingX,l=e.spacingY,d=e.spacing,f=e.minChildWidth,p=u(e,U),h=f?(n=f,(0,a.XQ)(n,(function(e){return(0,a.Ft)(e)?null:"repeat(auto-fit, minmax("+(r=e,((0,a.hj)(r)?r+"px":r)+", 1fr))");var r}))):(t=o,(0,a.XQ)(t,(function(e){return(0,a.Ft)(e)?null:"repeat("+e+", minmax(0, 1fr))"})));return i.createElement(B,c({ref:r,gap:d,columnGap:s,rowGap:l,templateColumns:h},p))}));a.Ts&&(V.displayName="SimpleGrid");var X=(0,n.m$)("div",{baseStyle:{flex:1,justifySelf:"stretch",alignSelf:"stretch"}});a.Ts&&(X.displayName="Spacer");var Y="& > *:not(style) ~ *:not(style)";var Z=["isInline","direction","align","justify","spacing","wrap","children","divider","className","shouldWrapChildren"],K=function(e){return i.createElement(n.m$.div,c({className:"chakra-stack__divider"},e,{__css:c({},e.__css,{borderWidth:0,alignSelf:"stretch",borderColor:"inherit",width:"auto",height:"auto"})}))},Q=function(e){return i.createElement(n.m$.div,c({className:"chakra-stack__item"},e,{__css:c({display:"inline-block",flex:"0 0 auto",minWidth:0},e.__css)}))},J=(0,n.Gp)((function(e,r){var t,o=e.isInline,s=e.direction,d=e.align,f=e.justify,p=e.spacing,h=void 0===p?"0.5rem":p,m=e.wrap,g=e.children,b=e.divider,v=e.className,y=e.shouldWrapChildren,x=u(e,Z),w=o?"row":null!=s?s:"column",k=i.useMemo((function(){return function(e){var r,t=e.spacing,n=e.direction,o={column:{marginTop:t,marginEnd:0,marginBottom:0,marginStart:0},row:{marginTop:0,marginEnd:0,marginBottom:0,marginStart:t},"column-reverse":{marginTop:0,marginEnd:0,marginBottom:t,marginStart:0},"row-reverse":{marginTop:0,marginEnd:t,marginBottom:0,marginStart:0}};return(r={flexDirection:n})[Y]=(0,a.XQ)(n,(function(e){return o[e]})),r}({direction:w,spacing:h})}),[w,h]),S=i.useMemo((function(){return function(e){var r=e.spacing,t=e.direction,n={column:{my:r,mx:0,borderLeftWidth:0,borderBottomWidth:"1px"},"column-reverse":{my:r,mx:0,borderLeftWidth:0,borderBottomWidth:"1px"},row:{mx:r,my:0,borderLeftWidth:"1px",borderBottomWidth:0},"row-reverse":{mx:r,my:0,borderLeftWidth:"1px",borderBottomWidth:0}};return{"&":(0,a.XQ)(t,(function(e){return n[e]}))}}({spacing:h,direction:w})}),[h,w]),_=!!b,C=!y&&!_,E=(0,l.WR)(g),A=C?E:E.map((function(e,r){var t="undefined"!==typeof e.key?e.key:r,n=r+1===E.length,o=y?i.createElement(Q,{key:t},e):e;if(!_)return o;var a=n?null:i.cloneElement(b,{__css:S});return i.createElement(i.Fragment,{key:t},o,a)})),R=(0,a.cx)("chakra-stack",v);return i.createElement(n.m$.div,c({ref:r,display:"flex",alignItems:d,justifyContent:f,flexDirection:k.flexDirection,flexWrap:m,className:R,__css:_?{}:(t={},t[Y]=k[Y],t)},x),A)}));a.Ts&&(J.displayName="Stack");var ee=(0,n.Gp)((function(e,r){return i.createElement(J,c({align:"center"},e,{direction:"row",ref:r}))}));a.Ts&&(ee.displayName="HStack");var re=(0,n.Gp)((function(e,r){return i.createElement(J,c({align:"center"},e,{direction:"column",ref:r}))}));a.Ts&&(re.displayName="VStack");var te=["className","align","decoration","casing"],ne=(0,n.Gp)((function(e,r){var t=(0,n.mq)("Text",e),o=(0,n.Lr)(e);o.className,o.align,o.decoration,o.casing;var s=u(o,te),l=(0,a.YU)({textAlign:e.align,textDecoration:e.decoration,textTransform:e.casing});return i.createElement(n.m$.p,c({ref:r,className:(0,a.cx)("chakra-text",e.className)},l,s,{__css:t}))}));a.Ts&&(ne.displayName="Text");var oe=["spacing","children","justify","direction","align","className","shouldWrapChildren"],ae=["className"],ie=(0,n.Gp)((function(e,r){var t=e.spacing,s=void 0===t?"0.5rem":t,l=e.children,d=e.justify,f=e.direction,p=e.align,h=e.className,m=e.shouldWrapChildren,g=u(e,oe),b=i.useMemo((function(){return{"--chakra-wrap-spacing":function(e){return(0,a.XQ)(s,(function(r){return(0,o.fr)("space",r)(e)}))},"--wrap-spacing":"calc(var(--chakra-wrap-spacing) / 2)",display:"flex",flexWrap:"wrap",justifyContent:d,alignItems:p,flexDirection:f,listStyleType:"none",padding:"0",margin:"calc(var(--wrap-spacing) * -1)","& > *:not(style)":{margin:"var(--wrap-spacing)"}}}),[s,d,p,f]),v=m?i.Children.map(l,(function(e,r){return i.createElement(se,{key:r},e)})):l;return i.createElement(n.m$.div,c({ref:r,className:(0,a.cx)("chakra-wrap",h)},g),i.createElement(n.m$.ul,{className:"chakra-wrap__list",__css:b},v))}));a.Ts&&(ie.displayName="Wrap");var se=(0,n.Gp)((function(e,r){var t=e.className,o=u(e,ae);return i.createElement(n.m$.li,c({ref:r,__css:{display:"flex",alignItems:"flex-start"},className:(0,a.cx)("chakra-wrap__listitem",t)},o))}));a.Ts&&(se.displayName="WrapItem")},6871:function(e,r,t){"use strict";t.d(r,{h_:function(){return w},hE:function(){return d}});var n=t(5031),o=t(6450),a=t(7294),i=t(7375),s=t(3935),l=(0,o.kr)({strict:!1,name:"PortalManagerContext"}),c=l[0],u=l[1];function d(e){var r=e.children,t=e.zIndex;return a.createElement(c,{value:{zIndex:t}},r)}function f(){return(f=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,p);return r?a.createElement(x,f({containerRef:r},t)):a.createElement(y,t)}w.defaultProps={appendToParentPortal:!0},w.className=b,w.selector=".chakra-portal",n.Ts&&(w.displayName="Portal")},5393:function(e,r,t){"use strict";t.d(r,{u:function(){return d},O:function(){return u}});var n=t(5031),o=t(7294),a={body:{classList:{add:function(){},remove:function(){}}},addEventListener:function(){},removeEventListener:function(){},activeElement:{blur:function(){},nodeName:""},querySelector:function(){return null},querySelectorAll:function(){return[]},getElementById:function(){return null},createEvent:function(){return{initEvent:function(){}}},createElement:function(){return{children:[],childNodes:[],style:{},setAttribute:function(){},getElementsByTagName:function(){return[]}}}},i=function(){},s={window:{document:a,navigator:{userAgent:""},CustomEvent:function(){return this},addEventListener:i,removeEventListener:i,getComputedStyle:function(){return{getPropertyValue:function(){return""}}},matchMedia:function(){return{matches:!1,addListener:i,removeListener:i}},requestAnimationFrame:function(e){return"undefined"===typeof setTimeout?(e(),null):setTimeout(e,0)},cancelAnimationFrame:function(e){"undefined"!==typeof setTimeout&&clearTimeout(e)},setTimeout:function(){return 0},clearTimeout:i,setInterval:function(){return 0},clearInterval:i},document:a},l=n.jU?{window:window,document:document}:s,c=(0,o.createContext)(l);function u(){return(0,o.useContext)(c)}function d(e){var r=e.children,t=e.environment,n=(0,o.useState)(null),a=n[0],i=n[1],s=(0,o.useMemo)((function(){var e,r=null==a?void 0:a.ownerDocument,n=null==a?void 0:a.ownerDocument.defaultView;return null!=(e=null!=t?t:r?{document:r,window:n}:void 0)?e:l}),[a,t]),u=!a&&!t;return o.createElement(c.Provider,{value:s},r,u&&o.createElement("span",{ref:function(e){e&&i(e)}}))}n.Ts&&(c.displayName="EnvironmentContext"),n.Ts&&(d.displayName="EnvironmentProvider")},6450:function(e,r,t){"use strict";t.d(r,{kr:function(){return s},WR:function(){return l},lq:function(){return i}});var n=t(5031),o=t(7294);function a(e,r){if(null!=e)if((0,n.mf)(e))e(r);else try{e.current=r}catch(t){throw new Error("Cannot assign value '"+r+"' to ref '"+e+"'")}}function i(){for(var e=arguments.length,r=new Array(e),t=0;t1)&&(e=1),e}function h(e){return e<=1?100*Number(e)+"%":e}function m(e){return 1===e.length?"0"+e:String(e)}function g(e,r,t){e=d(e,255),r=d(r,255),t=d(t,255);var n=Math.max(e,r,t),o=Math.min(e,r,t),a=0,i=0,s=(n+o)/2;if(n===o)i=0,a=0;else{var l=n-o;switch(i=s>.5?l/(2-n-o):l/(n+o),n){case e:a=(r-t)/l+(r1&&(t-=1),t<1/6?e+6*t*(r-e):t<.5?r:t<2/3?e+(r-e)*(2/3-t)*6:e}function v(e,r,t){e=d(e,255),r=d(r,255),t=d(t,255);var n=Math.max(e,r,t),o=Math.min(e,r,t),a=0,i=n,s=n-o,l=0===n?0:s/n;if(n===o)a=0;else{switch(n){case e:a=(r-t)/s+(r>16,g:(65280&e)>>8,b:255&e}}(r)),this.originalInput=r;var o=_(r);this.originalInput=r,this.r=o.r,this.g=o.g,this.b=o.b,this.a=o.a,this.roundA=Math.round(100*this.a)/100,this.format=null!==(n=t.format)&&void 0!==n?n:o.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=o.ok}return e.prototype.isDark=function(){return this.getBrightness()<128},e.prototype.isLight=function(){return!this.isDark()},e.prototype.getBrightness=function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},e.prototype.getLuminance=function(){var e=this.toRgb(),r=e.r/255,t=e.g/255,n=e.b/255;return.2126*(r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4))+.0722*(n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4))},e.prototype.getAlpha=function(){return this.a},e.prototype.setAlpha=function(e){return this.a=p(e),this.roundA=Math.round(100*this.a)/100,this},e.prototype.toHsv=function(){var e=v(this.r,this.g,this.b);return{h:360*e.h,s:e.s,v:e.v,a:this.a}},e.prototype.toHsvString=function(){var e=v(this.r,this.g,this.b),r=Math.round(360*e.h),t=Math.round(100*e.s),n=Math.round(100*e.v);return 1===this.a?"hsv("+r+", "+t+"%, "+n+"%)":"hsva("+r+", "+t+"%, "+n+"%, "+this.roundA+")"},e.prototype.toHsl=function(){var e=g(this.r,this.g,this.b);return{h:360*e.h,s:e.s,l:e.l,a:this.a}},e.prototype.toHslString=function(){var e=g(this.r,this.g,this.b),r=Math.round(360*e.h),t=Math.round(100*e.s),n=Math.round(100*e.l);return 1===this.a?"hsl("+r+", "+t+"%, "+n+"%)":"hsla("+r+", "+t+"%, "+n+"%, "+this.roundA+")"},e.prototype.toHex=function(e){return void 0===e&&(e=!1),y(this.r,this.g,this.b,e)},e.prototype.toHexString=function(e){return void 0===e&&(e=!1),"#"+this.toHex(e)},e.prototype.toHex8=function(e){return void 0===e&&(e=!1),function(e,r,t,n,o){var a=[m(Math.round(e).toString(16)),m(Math.round(r).toString(16)),m(Math.round(t).toString(16)),m(x(n))];return o&&a[0].startsWith(a[0].charAt(1))&&a[1].startsWith(a[1].charAt(1))&&a[2].startsWith(a[2].charAt(1))&&a[3].startsWith(a[3].charAt(1))?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}(this.r,this.g,this.b,this.a,e)},e.prototype.toHex8String=function(e){return void 0===e&&(e=!1),"#"+this.toHex8(e)},e.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},e.prototype.toRgbString=function(){var e=Math.round(this.r),r=Math.round(this.g),t=Math.round(this.b);return 1===this.a?"rgb("+e+", "+r+", "+t+")":"rgba("+e+", "+r+", "+t+", "+this.roundA+")"},e.prototype.toPercentageRgb=function(){var e=function(e){return Math.round(100*d(e,255))+"%"};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},e.prototype.toPercentageRgbString=function(){var e=function(e){return Math.round(100*d(e,255))};return 1===this.a?"rgb("+e(this.r)+"%, "+e(this.g)+"%, "+e(this.b)+"%)":"rgba("+e(this.r)+"%, "+e(this.g)+"%, "+e(this.b)+"%, "+this.roundA+")"},e.prototype.toName=function(){if(0===this.a)return"transparent";if(this.a<1)return!1;for(var e="#"+y(this.r,this.g,this.b,!1),r=0,t=Object.entries(S);r=0;return r||!n||!e.startsWith("hex")&&"name"!==e?("rgb"===e&&(t=this.toRgbString()),"prgb"===e&&(t=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(t=this.toHexString()),"hex3"===e&&(t=this.toHexString(!0)),"hex4"===e&&(t=this.toHex8String(!0)),"hex8"===e&&(t=this.toHex8String()),"name"===e&&(t=this.toName()),"hsl"===e&&(t=this.toHslString()),"hsv"===e&&(t=this.toHsvString()),t||this.toHexString()):"name"===e&&0===this.a?this.toName():this.toRgbString()},e.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},e.prototype.clone=function(){return new e(this.toString())},e.prototype.lighten=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.l+=r/100,t.l=f(t.l),new e(t)},e.prototype.brighten=function(r){void 0===r&&(r=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(-r/100*255))),t.g=Math.max(0,Math.min(255,t.g-Math.round(-r/100*255))),t.b=Math.max(0,Math.min(255,t.b-Math.round(-r/100*255))),new e(t)},e.prototype.darken=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.l-=r/100,t.l=f(t.l),new e(t)},e.prototype.tint=function(e){return void 0===e&&(e=10),this.mix("white",e)},e.prototype.shade=function(e){return void 0===e&&(e=10),this.mix("black",e)},e.prototype.desaturate=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.s-=r/100,t.s=f(t.s),new e(t)},e.prototype.saturate=function(r){void 0===r&&(r=10);var t=this.toHsl();return t.s+=r/100,t.s=f(t.s),new e(t)},e.prototype.greyscale=function(){return this.desaturate(100)},e.prototype.spin=function(r){var t=this.toHsl(),n=(t.h+r)%360;return t.h=n<0?360+n:n,new e(t)},e.prototype.mix=function(r,t){void 0===t&&(t=50);var n=this.toRgb(),o=new e(r).toRgb(),a=t/100;return new e({r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a})},e.prototype.analogous=function(r,t){void 0===r&&(r=6),void 0===t&&(t=30);var n=this.toHsl(),o=360/t,a=[this];for(n.h=(n.h-(o*r>>1)+720)%360;--r;)n.h=(n.h+o)%360,a.push(new e(n));return a},e.prototype.complement=function(){var r=this.toHsl();return r.h=(r.h+180)%360,new e(r)},e.prototype.monochromatic=function(r){void 0===r&&(r=6);for(var t=this.toHsv(),n=t.h,o=t.s,a=t.v,i=[],s=1/r;r--;)i.push(new e({h:n,s:o,v:a})),a=(a+s)%1;return i},e.prototype.splitcomplement=function(){var r=this.toHsl(),t=r.h;return[this,new e({h:(t+72)%360,s:r.s,l:r.l}),new e({h:(t+216)%360,s:r.s,l:r.l})]},e.prototype.onBackground=function(r){var t=this.toRgb(),n=new e(r).toRgb();return new e({r:n.r+(t.r-n.r)*t.a,g:n.g+(t.g-n.g)*t.a,b:n.b+(t.b-n.b)*t.a})},e.prototype.triad=function(){return this.polyad(3)},e.prototype.tetrad=function(){return this.polyad(4)},e.prototype.polyad=function(r){for(var t=this.toHsl(),n=t.h,o=[this],a=360/r,i=1;it.length;)e.count=null,e.seed&&(e.seed+=1),t.push(B(e));return e.count=r,t}var n=function(e,r){var t=O(function(e){var r=parseInt(e,10);if(!Number.isNaN(r)&&r<360&&r>0)return[r,r];if("string"===typeof e){var t=F.find((function(r){return r.name===e}));if(t){var n=P(t);if(n.hueRange)return n.hueRange}var o=new T(e);if(o.isValid){var a=o.toHsv().h;return[a,a]}}return[0,360]}(e),r);t<0&&(t=360+t);return t}(e.hue,e.seed),o=function(e,r){if("monochrome"===r.hue)return 0;if("random"===r.luminosity)return O([0,100],r.seed);var t=j(e).saturationRange,n=t[0],o=t[1];switch(r.luminosity){case"bright":n=55;break;case"dark":n=o-10;break;case"light":o=55}return O([n,o],r.seed)}(n,e),a={h:n,s:o,v:function(e,r,t){var n=function(e,r){for(var t=j(e).lowerBounds,n=0;n=o&&r<=i){var l=(s-a)/(i-o);return l*r+(a-l*o)}}return 0}(e,r),o=100;switch(t.luminosity){case"dark":o=n+20;break;case"light":n=(o+n)/2;break;case"random":n=0,o=100}return O([n,o],t.seed)}(n,o,e)};return void 0!==e.alpha&&(a.a=e.alpha),new T(a)}function j(e){e>=334&&e<=360&&(e-=360);for(var r=0,t=F;r=n.hueRange[0]&&e<=n.hueRange[1])return n}throw Error("Color not found")}function O(e,r){if(void 0===r)return Math.floor(e[0]+Math.random()*(e[1]+1-e[0]));var t=e[1]||1,n=e[0]||0,o=(r=(9301*r+49297)%233280)/233280;return Math.floor(n+o*(t-n))}function P(e){var r=e.lowerBounds[0][0],t=e.lowerBounds[e.lowerBounds.length-1][0],n=e.lowerBounds[e.lowerBounds.length-1][1],o=e.lowerBounds[0][1];return{name:e.name,hueRange:e.hueRange,lowerBounds:e.lowerBounds,saturationRange:[r,t],brightnessRange:[n,o]}}var F=[{name:"monochrome",hueRange:null,lowerBounds:[[0,0],[100,0]]},{name:"red",hueRange:[-26,18],lowerBounds:[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]},{name:"orange",hueRange:[19,46],lowerBounds:[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]},{name:"yellow",hueRange:[47,62],lowerBounds:[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]},{name:"green",hueRange:[63,178],lowerBounds:[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]},{name:"blue",hueRange:[179,257],lowerBounds:[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]},{name:"purple",hueRange:[258,282],lowerBounds:[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]},{name:"pink",hueRange:[283,334],lowerBounds:[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]]}],M=t(5031),I=function(e,r,t){var n=(0,M.Wf)(e,"colors."+r,r);return new T(n).isValid?n:t},W=function(e){return function(r){var t=I(r,e);return new T(t).isDark()?"dark":"light"}},N=function(e,r){return function(t){var n=I(t,e);return new T(n).setAlpha(r).toRgbString()}};function D(e,r){return void 0===e&&(e="1rem"),void 0===r&&(r="rgba(255, 255, 255, 0.15)"),{backgroundImage:"linear-gradient(\n 45deg,\n "+r+" 25%,\n transparent 25%,\n transparent 50%,\n "+r+" 50%,\n "+r+" 75%,\n transparent 75%,\n transparent\n )",backgroundSize:e+" "+e}}function L(e){var r,t=B().toHexString();return!e||(0,M.Qr)(e)?t:e.string&&e.colors?function(e,r){var t=0;if(0===e.length)return r[0];for(var n=0;n>8*o&255).toString(16)).substr(-2)}return n}(e.string):e.colors&&!e.string?(r=e.colors)[Math.floor(Math.random()*r.length)]:t}function H(e,r){return function(t){return"dark"===t.colorMode?r:e}}function $(e){var r=e.orientation,t=e.vertical,n=e.horizontal;return r?"vertical"===r?t:n:{}}function G(){return(G=Object.assign||function(e){for(var r=1;r1?r-1:0),n=1;n option, > optgroup":{bg:H("white","gray.700")(e)}})},Ft={width:"1.5rem",height:"100%",insetEnd:"0.5rem",position:"relative",color:"currentColor",fontSize:"1.25rem",_disabled:{opacity:.5}},Mt={paddingInlineEnd:"2rem"},It=je()({},jr.sizes,{lg:{field:Mt},md:{field:Mt},sm:{field:Mt},xs:{field:Mt,icon:{insetEnd:"0.25rem"}}}),Wt={parts:_e.keys,baseStyle:function(e){return{field:Pt(e),icon:Ft}},sizes:It,variants:jr.variants,defaultProps:jr.defaultProps},Nt=function(e,r){return(0,n.F4)({from:{borderColor:e,background:e},to:{borderColor:r,background:r}})},Dt={baseStyle:function(e){var r=H("gray.100","gray.800")(e),t=H("gray.400","gray.600")(e),n=e.startColor,o=void 0===n?r:n,a=e.endColor,i=void 0===a?t:a,s=e.speed,l=e.theme,c=I(l,o),u=I(l,i);return{opacity:.7,borderRadius:"2px",borderColor:c,background:u,animation:s+"s linear infinite alternate "+Nt(c,u)}}},Lt={baseStyle:function(e){return{borderRadius:"md",fontWeight:"semibold",_focus:{boxShadow:"outline",padding:"1rem",position:"fixed",top:"1.5rem",insetStart:"1.5rem",bg:H("white","gray.700")(e)}}}};var Ht,$t,Gt,qt,Ut,Vt,Xt,Yt,Zt,Kt,Qt,Jt,en,rn=function(e){return Oe({display:"inline-block",position:"relative",cursor:"pointer",_disabled:{opacity:.6,cursor:"default",pointerEvents:"none"}},$({orientation:e.orientation,vertical:{h:"100%"},horizontal:{w:"100%"}}))},tn=function(e){return{overflow:"hidden",borderRadius:"sm",bg:H("gray.200","whiteAlpha.200")(e),_disabled:{bg:H("gray.300","whiteAlpha.300")(e)}}},nn=function(e){return Oe({display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",outline:0,zIndex:1,borderRadius:"full",bg:"white",boxShadow:"base",border:"1px solid",borderColor:"transparent",transitionProperty:"transform",transitionDuration:"normal",_focus:{boxShadow:"outline"},_disabled:{bg:"gray.300"}},function(e){return $({orientation:e.orientation,vertical:{left:"50%",transform:"translateX(-50%)",_active:{transform:"translateX(-50%) scale(1.15)"}},horizontal:{top:"50%",transform:"translateY(-50%)",_active:{transform:"translateY(-50%) scale(1.15)"}}})}(e))},on=function(e){var r=e.colorScheme;return{width:"inherit",height:"inherit",bg:H(r+".500",r+".200")(e)}},an={lg:function(e){return{thumb:{w:"16px",h:"16px"},track:$({orientation:e.orientation,horizontal:{h:"4px"},vertical:{w:"4px"}})}},md:function(e){return{thumb:{w:"14px",h:"14px"},track:$({orientation:e.orientation,horizontal:{h:"4px"},vertical:{w:"4px"}})}},sm:function(e){return{thumb:{w:"10px",h:"10px"},track:$({orientation:e.orientation,horizontal:{h:"2px"},vertical:{w:"2px"}})}}},sn={parts:Ce.keys,sizes:an,baseStyle:function(e){return{container:rn(e),track:tn(e),thumb:nn(e),filledTrack:on(e)}},defaultProps:{size:"md",colorScheme:"blue"}},ln=ae("spinner-size"),cn={baseStyle:{width:[ln.reference],height:[ln.reference]},sizes:{xs:(Ht={},Ht[ln.variable]="0.75rem",Ht),sm:($t={},$t[ln.variable]="1rem",$t),md:(Gt={},Gt[ln.variable]="1.5rem",Gt),lg:(qt={},qt[ln.variable]="2rem",qt),xl:(Ut={},Ut[ln.variable]="3rem",Ut)},defaultProps:{size:"md"}},un={container:{},label:{fontWeight:"medium"},helpText:{opacity:.8,marginBottom:2},number:{verticalAlign:"baseline",fontWeight:"semibold"},icon:{marginEnd:1,w:"14px",h:"14px",verticalAlign:"middle"}},dn={parts:Ee.keys,baseStyle:un,sizes:{md:{label:{fontSize:"sm"},helpText:{fontSize:"sm"},number:{fontSize:"2xl"}}},defaultProps:{size:"md"}},fn=ae("switch-track-width"),pn=ae("switch-track-height"),hn=ae("switch-track-diff"),mn=re.subtract(fn,pn),gn=ae("switch-thumb-x"),bn=function(e){var r=e.colorScheme;return{borderRadius:"full",p:"2px",width:[fn.reference],height:[pn.reference],transitionProperty:"common",transitionDuration:"fast",bg:H("gray.300","whiteAlpha.400")(e),_focus:{boxShadow:"outline"},_disabled:{opacity:.4,cursor:"not-allowed"},_checked:{bg:H(r+".500",r+".200")(e)}}},vn={bg:"white",transitionProperty:"transform",transitionDuration:"normal",borderRadius:"inherit",width:[pn.reference],height:[pn.reference],_checked:{transform:"translateX("+gn.reference+")"}},yn={sm:{container:(Vt={},Vt[fn.variable]="1.375rem",Vt[pn.variable]="0.75rem",Vt)},md:{container:(Xt={},Xt[fn.variable]="1.875rem",Xt[pn.variable]="1rem",Xt)},lg:{container:(Yt={},Yt[fn.variable]="2.875rem",Yt[pn.variable]="1.5rem",Yt)}},xn={parts:Ae.keys,baseStyle:function(e){var r,t;return{container:(t={},t[hn.variable]=mn,t[gn.variable]=hn.reference,t._rtl=(r={},r[gn.variable]=re(hn).negate().toString(),r),t),track:bn(e),thumb:vn}},sizes:yn,defaultProps:{size:"md",colorScheme:"blue"}},wn={"&[data-is-numeric=true]":{textAlign:"end"}},kn={simple:function(e){var r=e.colorScheme;return{th:Oe({color:H("gray.600","gray.400")(e),borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),td:Oe({borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),caption:{color:H("gray.600","gray.100")(e)},tfoot:{tr:{"&:last-of-type":{th:{borderBottomWidth:0}}}}}},striped:function(e){var r=e.colorScheme;return{th:Oe({color:H("gray.600","gray.400")(e),borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),td:Oe({borderBottom:"1px",borderColor:H(r+".100",r+".700")(e)},wn),caption:{color:H("gray.600","gray.100")(e)},tbody:{tr:{"&:nth-of-type(odd)":{"th, td":{borderBottomWidth:"1px",borderColor:H(r+".100",r+".700")(e)},td:{background:H(r+".100",r+".700")(e)}}}},tfoot:{tr:{"&:last-of-type":{th:{borderBottomWidth:0}}}}}},unstyled:{}},Sn={parts:Re.keys,baseStyle:{table:{fontVariantNumeric:"lining-nums tabular-nums",borderCollapse:"collapse",width:"full"},th:{fontFamily:"heading",fontWeight:"bold",textTransform:"uppercase",letterSpacing:"wider",textAlign:"start"},td:{textAlign:"start"},caption:{mt:4,fontFamily:"heading",textAlign:"center",fontWeight:"medium"}},variants:kn,sizes:{sm:{th:{px:"4",py:"1",lineHeight:"4",fontSize:"xs"},td:{px:"4",py:"2",fontSize:"sm",lineHeight:"4"},caption:{px:"4",py:"2",fontSize:"xs"}},md:{th:{px:"6",py:"3",lineHeight:"4",fontSize:"xs"},td:{px:"6",py:"4",lineHeight:"5"},caption:{px:"6",py:"2",fontSize:"sm"}},lg:{th:{px:"8",py:"4",lineHeight:"5",fontSize:"sm"},td:{px:"8",py:"5",lineHeight:"6"},caption:{px:"6",py:"2",fontSize:"md"}}},defaultProps:{variant:"simple",size:"md",colorScheme:"gray"}},_n=function(e){return{display:"vertical"===e.orientation?"flex":"block"}},Cn=function(e){return{flex:e.isFitted?1:void 0,transitionProperty:"common",transitionDuration:"normal",_focus:{zIndex:1,boxShadow:"outline"}}},En=function(e){var r=e.align,t=void 0===r?"start":r,n=e.orientation;return{justifyContent:{end:"flex-end",center:"center",start:"flex-start"}[t],flexDirection:"vertical"===n?"column":"row"}},An={p:4},Rn={line:function(e){var r,t,n=e.colorScheme,o=e.orientation,a="vertical"===o?"borderStart":"borderBottom",i="vertical"===o?"marginStart":"marginBottom";return{tablist:(r={},r[a]="2px solid",r.borderColor="inherit",r),tab:(t={},t[a]="2px solid",t.borderColor="transparent",t[i]="-2px",t._selected={color:H(n+".600",n+".300")(e),borderColor:"currentColor"},t._active={bg:H("gray.200","whiteAlpha.300")(e)},t._disabled={opacity:.4,cursor:"not-allowed"},t)}},enclosed:function(e){var r=e.colorScheme;return{tab:{borderTopRadius:"md",border:"1px solid",borderColor:"transparent",mb:"-1px",_selected:{color:H(r+".600",r+".300")(e),borderColor:"inherit",borderBottomColor:H("white","gray.800")(e)}},tablist:{mb:"-1px",borderBottom:"1px solid",borderColor:"inherit"}}},"enclosed-colored":function(e){var r=e.colorScheme;return{tab:{border:"1px solid",borderColor:"inherit",bg:H("gray.50","whiteAlpha.50")(e),mb:"-1px",_notLast:{marginEnd:"-1px"},_selected:{bg:H("#fff","gray.800")(e),color:H(r+".600",r+".300")(e),borderColor:"inherit",borderTopColor:"currentColor",borderBottomColor:"transparent"}},tablist:{mb:"-1px",borderBottom:"1px solid",borderColor:"inherit"}}},"soft-rounded":function(e){var r=e.colorScheme,t=e.theme;return{tab:{borderRadius:"full",fontWeight:"semibold",color:"gray.600",_selected:{color:I(t,r+".700"),bg:I(t,r+".100")}}}},"solid-rounded":function(e){var r=e.colorScheme;return{tab:{borderRadius:"full",fontWeight:"semibold",color:H("gray.600","inherit")(e),_selected:{color:H("#fff","gray.800")(e),bg:H(r+".600",r+".300")(e)}}}},unstyled:{}},zn={parts:ze.keys,baseStyle:function(e){return{root:_n(e),tab:Cn(e),tablist:En(e),tabpanel:An}},sizes:{sm:{tab:{py:1,px:4,fontSize:"sm"}},md:{tab:{fontSize:"md",py:2,px:4}},lg:{tab:{fontSize:"lg",py:3,px:4}}},variants:Rn,defaultProps:{size:"md",variant:"line",colorScheme:"blue"}},Tn={container:{fontWeight:"medium",lineHeight:1.2,outline:0,_focus:{boxShadow:"outline"}},label:{lineHeight:1.2,overflow:"visible"},closeButton:{fontSize:"18px",w:"1.25rem",h:"1.25rem",transitionProperty:"common",transitionDuration:"normal",borderRadius:"full",marginStart:"0.375rem",marginEnd:"-1",opacity:.5,_disabled:{opacity:.4},_focus:{boxShadow:"outline",bg:"rgba(0, 0, 0, 0.14)"},_hover:{opacity:.8},_active:{opacity:1}}},Bn={subtle:function(e){return{container:Ze.variants.subtle(e)}},solid:function(e){return{container:Ze.variants.solid(e)}},outline:function(e){return{container:Ze.variants.outline(e)}}},jn={parts:Te.keys,variants:Bn,baseStyle:Tn,sizes:{sm:{container:{minH:"1.25rem",minW:"1.25rem",fontSize:"xs",px:2,borderRadius:"md"},closeButton:{marginEnd:"-2px",marginStart:"0.35rem"}},md:{container:{minH:"1.5rem",minW:"1.5rem",fontSize:"sm",borderRadius:"md",px:2}},lg:{container:{minH:8,minW:8,fontSize:"md",borderRadius:"md",px:3}}},defaultProps:{size:"md",variant:"subtle",colorScheme:"gray"}},On=Oe({},jr.baseStyle.field,{paddingY:"8px",minHeight:"80px",lineHeight:"short",verticalAlign:"top"}),Pn={outline:function(e){var r;return null!=(r=jr.variants.outline(e).field)?r:{}},flushed:function(e){var r;return null!=(r=jr.variants.flushed(e).field)?r:{}},filled:function(e){var r;return null!=(r=jr.variants.filled(e).field)?r:{}},unstyled:null!=(Zt=jr.variants.unstyled.field)?Zt:{}},Fn={baseStyle:On,sizes:{xs:null!=(Kt=jr.sizes.xs.field)?Kt:{},sm:null!=(Qt=jr.sizes.sm.field)?Qt:{},md:null!=(Jt=jr.sizes.md.field)?Jt:{},lg:null!=(en=jr.sizes.lg.field)?en:{}},variants:Pn,defaultProps:{size:"md",variant:"outline"}},Mn=ae("tooltip-bg"),In=ae("popper-arrow-bg"),Wn={baseStyle:function(e){var r,t=H("gray.700","gray.300")(e);return(r={})[Mn.variable]="colors."+t,r.px="8px",r.py="2px",r.bg=[Mn.reference],r[In.variable]=[Mn.reference],r.color=H("whiteAlpha.900","gray.900")(e),r.borderRadius="sm",r.fontWeight="medium",r.fontSize="sm",r.boxShadow="md",r.maxW="320px",r.zIndex="tooltip",r}},Nn=function(e){return{color:H("red.500","red.300")(e),mt:2,fontSize:"sm"}},Dn=function(e){return{marginEnd:"0.5em",color:H("red.500","red.300")(e)}},Ln={parts:me.keys,baseStyle:function(e){return{text:Nn(e),icon:Dn(e)}}},Hn={Accordion:Fe,Alert:We,Avatar:Ye,Badge:Ze,Breadcrumb:Qe,Button:rr,Checkbox:ar,CloseButton:sr,Code:lr,Container:cr,Divider:ur,Drawer:xr,Editable:kr,Form:Cr,FormLabel:Er,Heading:Ar,Input:jr,Kbd:Or,Link:Pr,List:Mr,Menu:$r,Modal:tt,NumberInput:gt,PinInput:bt,Popover:At,Progress:Bt,Radio:Ot,Select:Wt,Skeleton:Dt,SkipLink:Lt,Slider:sn,Spinner:cn,Stat:dn,Switch:xn,Table:Sn,Tabs:zn,Tag:jn,Textarea:Fn,Tooltip:Wn,FormError:Ln},$n={none:0,"1px":"1px solid","2px":"2px solid","4px":"4px solid","8px":"8px solid"},Gn=Oe({breakpoints:function(e){return(0,M.ZK)({condition:!0,message:["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon","simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")}),G({base:"0em"},e)}({sm:"30em",md:"48em",lg:"62em",xl:"80em","2xl":"96em"}),zIndices:{hide:-1,auto:"auto",base:0,docked:10,dropdown:1e3,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800},radii:{none:"0",sm:"0.125rem",base:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"},blur:{none:0,sm:"4px",base:"8px",md:"12px",lg:"16px",xl:"24px","2xl":"40px","3xl":"64px"},colors:{transparent:"transparent",current:"currentColor",black:"#000000",white:"#FFFFFF",whiteAlpha:{50:"rgba(255, 255, 255, 0.04)",100:"rgba(255, 255, 255, 0.06)",200:"rgba(255, 255, 255, 0.08)",300:"rgba(255, 255, 255, 0.16)",400:"rgba(255, 255, 255, 0.24)",500:"rgba(255, 255, 255, 0.36)",600:"rgba(255, 255, 255, 0.48)",700:"rgba(255, 255, 255, 0.64)",800:"rgba(255, 255, 255, 0.80)",900:"rgba(255, 255, 255, 0.92)"},blackAlpha:{50:"rgba(0, 0, 0, 0.04)",100:"rgba(0, 0, 0, 0.06)",200:"rgba(0, 0, 0, 0.08)",300:"rgba(0, 0, 0, 0.16)",400:"rgba(0, 0, 0, 0.24)",500:"rgba(0, 0, 0, 0.36)",600:"rgba(0, 0, 0, 0.48)",700:"rgba(0, 0, 0, 0.64)",800:"rgba(0, 0, 0, 0.80)",900:"rgba(0, 0, 0, 0.92)"},gray:{50:"#F7FAFC",100:"#EDF2F7",200:"#E2E8F0",300:"#CBD5E0",400:"#A0AEC0",500:"#718096",600:"#4A5568",700:"#2D3748",800:"#1A202C",900:"#171923"},red:{50:"#FFF5F5",100:"#FED7D7",200:"#FEB2B2",300:"#FC8181",400:"#F56565",500:"#E53E3E",600:"#C53030",700:"#9B2C2C",800:"#822727",900:"#63171B"},orange:{50:"#FFFAF0",100:"#FEEBC8",200:"#FBD38D",300:"#F6AD55",400:"#ED8936",500:"#DD6B20",600:"#C05621",700:"#9C4221",800:"#7B341E",900:"#652B19"},yellow:{50:"#FFFFF0",100:"#FEFCBF",200:"#FAF089",300:"#F6E05E",400:"#ECC94B",500:"#D69E2E",600:"#B7791F",700:"#975A16",800:"#744210",900:"#5F370E"},green:{50:"#F0FFF4",100:"#C6F6D5",200:"#9AE6B4",300:"#68D391",400:"#48BB78",500:"#38A169",600:"#2F855A",700:"#276749",800:"#22543D",900:"#1C4532"},teal:{50:"#E6FFFA",100:"#B2F5EA",200:"#81E6D9",300:"#4FD1C5",400:"#38B2AC",500:"#319795",600:"#2C7A7B",700:"#285E61",800:"#234E52",900:"#1D4044"},blue:{50:"#ebf8ff",100:"#bee3f8",200:"#90cdf4",300:"#63b3ed",400:"#4299e1",500:"#3182ce",600:"#2b6cb0",700:"#2c5282",800:"#2a4365",900:"#1A365D"},cyan:{50:"#EDFDFD",100:"#C4F1F9",200:"#9DECF9",300:"#76E4F7",400:"#0BC5EA",500:"#00B5D8",600:"#00A3C4",700:"#0987A0",800:"#086F83",900:"#065666"},purple:{50:"#FAF5FF",100:"#E9D8FD",200:"#D6BCFA",300:"#B794F4",400:"#9F7AEA",500:"#805AD5",600:"#6B46C1",700:"#553C9A",800:"#44337A",900:"#322659"},pink:{50:"#FFF5F7",100:"#FED7E2",200:"#FBB6CE",300:"#F687B3",400:"#ED64A6",500:"#D53F8C",600:"#B83280",700:"#97266D",800:"#702459",900:"#521B41"},linkedin:{50:"#E8F4F9",100:"#CFEDFB",200:"#9BDAF3",300:"#68C7EC",400:"#34B3E4",500:"#00A0DC",600:"#008CC9",700:"#0077B5",800:"#005E93",900:"#004471"},facebook:{50:"#E8F4F9",100:"#D9DEE9",200:"#B7C2DA",300:"#6482C0",400:"#4267B2",500:"#385898",600:"#314E89",700:"#29487D",800:"#223B67",900:"#1E355B"},messenger:{50:"#D0E6FF",100:"#B9DAFF",200:"#A2CDFF",300:"#7AB8FF",400:"#2E90FF",500:"#0078FF",600:"#0063D1",700:"#0052AC",800:"#003C7E",900:"#002C5C"},whatsapp:{50:"#dffeec",100:"#b9f5d0",200:"#90edb3",300:"#65e495",400:"#3cdd78",500:"#22c35e",600:"#179848",700:"#0c6c33",800:"#01421c",900:"#001803"},twitter:{50:"#E5F4FD",100:"#C8E9FB",200:"#A8DCFA",300:"#83CDF7",400:"#57BBF5",500:"#1DA1F2",600:"#1A94DA",700:"#1681BF",800:"#136B9E",900:"#0D4D71"},telegram:{50:"#E3F2F9",100:"#C5E4F3",200:"#A2D4EC",300:"#7AC1E4",400:"#47A9DA",500:"#0088CC",600:"#007AB8",700:"#006BA1",800:"#005885",900:"#003F5E"}}},nt,{sizes:De,shadows:{xs:"0 0 0 1px rgba(0, 0, 0, 0.05)",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",base:"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","2xl":"0 25px 50px -12px rgba(0, 0, 0, 0.25)",outline:"0 0 0 3px rgba(66, 153, 225, 0.6)",inner:"inset 0 2px 4px 0 rgba(0,0,0,0.06)",none:"none","dark-lg":"rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"},space:Ne,borders:$n,transition:{property:{common:"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",colors:"background-color, border-color, color, fill, stroke",dimensions:"width, height",position:"left, right, top, bottom",background:"background-color, background-image, background-position"},easing:{"ease-in":"cubic-bezier(0.4, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.2, 1)","ease-in-out":"cubic-bezier(0.4, 0, 0.2, 1)"},duration:{"ultra-fast":"50ms",faster:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"400ms","ultra-slow":"500ms"}}}),qn=["borders","breakpoints","colors","components","config","direction","fonts","fontSizes","fontWeights","letterSpacings","lineHeights","radii","shadows","sizes","space","styles","transition","zIndices"];function Un(e){return!!(0,M.Kn)(e)&&qn.every((function(r){return Object.prototype.hasOwnProperty.call(e,r)}))}var Vn=Oe({direction:"ltr"},Gn,{components:Hn,styles:{global:function(e){return{body:{fontFamily:"body",color:H("gray.800","whiteAlpha.900")(e),bg:H("white","gray.800")(e),transitionProperty:"background-color",transitionDuration:"normal",lineHeight:"base"},"*::placeholder":{color:H("gray.400","whiteAlpha.400")(e)},"*, *::before, &::after":{borderColor:H("gray.200","whiteAlpha.300")(e),wordWrap:"break-word"}}}},config:{useSystemColorMode:!1,initialColorMode:"light",cssVarPrefix:"chakra"}}),Xn=function(e){var r=e.children,t=e.colorModeManager,n=e.portalZIndex,d=e.resetCSS,f=void 0===d||d,p=e.theme,h=void 0===p?{}:p,m=e.environment,g=e.cssVarsRoot,b=o.createElement(c.u,{environment:m},r);return o.createElement(u.vc,null,o.createElement(s.f6,{theme:h,cssVarsRoot:g},o.createElement(l.SG,{colorModeManager:t,options:h.config},f&&o.createElement(a,null),o.createElement(s.ZL,null),n?o.createElement(i.hE,{zIndex:n},b):b)))};function Yn(){for(var e=arguments.length,r=new Array(e),t=0;t1?n=n.slice(0,n.length-1):o=Vn,M.zG.apply(void 0,n.map((function(e){return function(r){return(0,M.mf)(e)?e(r):Zn(r,e)}})))(o)}function Zn(){for(var e=arguments.length,r=new Array(e),t=0;t :not(style) ~ :not(style)",v=((u={})[b]={marginInlineStart:"calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",marginInlineEnd:"calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"},u),y=((d={})[b]={marginTop:"calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",marginBottom:"calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"},d);function x(e,r){return(x=Object.setPrototypeOf||function(e,r){return e.__proto__=r,e})(e,r)}function w(e,r){if("function"!==typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),r&&x(e,r)}function k(){k=function(e,r){return new t(e,void 0,r)};var e=RegExp.prototype,r=new WeakMap;function t(e,n,o){var a=new RegExp(e,n);return r.set(a,o||r.get(e)),x(a,t.prototype)}function n(e,t){var n=r.get(t);return Object.keys(n).reduce((function(r,t){return r[t]=e[n[t]],r}),Object.create(null))}return w(t,RegExp),t.prototype.exec=function(r){var t=e.exec.call(this,r);return t&&(t.groups=n(t,this)),t},t.prototype[Symbol.replace]=function(t,o){if("string"===typeof o){var a=r.get(this);return e[Symbol.replace].call(this,t,o.replace(/\$<([^>]+)>/g,(function(e,r){return"$"+a[r]})))}if("function"===typeof o){var i=this;return e[Symbol.replace].call(this,t,(function(){var e=arguments;return"object"!==typeof e[e.length-1]&&(e=[].slice.call(e)).push(n(e,i)),o.apply(this,e)}))}return e[Symbol.replace].call(this,t,o)},k.apply(this,arguments)}var S={"to-t":"to top","to-tr":"to top right","to-r":"to right","to-br":"to bottom right","to-b":"to bottom","to-bl":"to bottom left","to-l":"to left","to-tl":"to top left"},_=new Set(Object.values(S)),C=new Set(["none","-moz-initial","inherit","initial","revert","unset"]),E=function(e){return e.trim()};var A=function(e){return(0,n.HD)(e)&&e.includes("(")&&e.includes(")")},R=function(e){return function(r){return e+"("+r+")"}},z={filter:function(e){return"auto"!==e?e:h},backdropFilter:function(e){return"auto"!==e?e:m},ring:function(e){return function(e){return{"--chakra-ring-offset-shadow":"var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)","--chakra-ring-shadow":"var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)","--chakra-ring-width":e,boxShadow:["var(--chakra-ring-offset-shadow)","var(--chakra-ring-shadow)","var(--chakra-shadow, 0 0 #0000)"].join(", ")}}(z.px(e))},bgClip:function(e){return"text"===e?{color:"transparent",backgroundClip:"text"}:{backgroundClip:e}},transform:function(e){return"auto"===e?["translateX(var(--chakra-translate-x, 0))","translateY(var(--chakra-translate-y, 0))"].concat(p).join(" "):"auto-gpu"===e?["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)"].concat(p).join(" "):e},px:function(e){return null==e?e:function(e){var r=parseFloat(e.toString()),t=e.toString().replace(String(r),"");return{unitless:!t,value:r,unit:t}}(e).unitless||(0,n.hj)(e)?e+"px":e},fraction:function(e){return!(0,n.hj)(e)||e>1?e:100*e+"%"},float:function(e,r){return"rtl"===r.direction?{left:"right",right:"left"}[e]:e},degree:function(e){if((0,n.FS)(e)||null==e)return e;var r=(0,n.HD)(e)&&!e.endsWith("deg");return(0,n.hj)(e)||r?e+"deg":e},gradient:function(e,r){return function(e,r){var t,n;if(null==e||C.has(e))return e;var o=null!=(t=null==(n=k(/(^[\x2DA-Za-z]+)\(((.*))\)/g,{type:1,values:2}).exec(e))?void 0:n.groups)?t:{},a=o.type,i=o.values;if(!a||!i)return e;var s=a.includes("-gradient")?a:a+"-gradient",l=i.split(",").map(E).filter(Boolean),c=l[0],u=l.slice(1);if(0===(null==u?void 0:u.length))return e;var d=c in S?S[c]:c;return u.unshift(d),s+"("+u.map((function(e){if(_.has(e))return e;var t=e.indexOf(" "),n=-1!==t?[e.substr(0,t),e.substr(t+1)]:[e],o=n[0],a=n[1],i=A(a)?a:a&&a.split(" "),s="colors."+o,l=s in r.__cssMap?r.__cssMap[s].varRef:o;return i?[l,i].join(" "):l})).join(", ")+")"}(e,null!=r?r:{})},blur:R("blur"),opacity:R("opacity"),brightness:R("brightness"),contrast:R("contrast"),dropShadow:R("drop-shadow"),grayscale:R("grayscale"),hueRotate:R("hue-rotate"),invert:R("invert"),saturate:R("saturate"),sepia:R("sepia"),bgImage:function(e){return null==e||A(e)||C.has(e)?e:"url("+e+")"},outline:function(e){var r="0"===String(e)||"none"===String(e);return null!==e&&r?{outline:"2px solid transparent",outlineOffset:"2px"}:{outline:e}},flexDirection:function(e){var r,t=null!=(r=g[e])?r:{},n=t.space,o=t.divide,a={flexDirection:e};return n&&(a[n]=1),o&&(a[o]=1),a}},T={borderWidths:c("borderWidths"),borderStyles:c("borderStyles"),colors:c("colors"),borders:c("borders"),radii:c("radii",z.px),space:c("space",z.px),spaceT:c("space",z.px),degreeT:function(e){return{property:e,transform:z.degree}},prop:function(e,r,t){return i({property:e,scale:r},r&&{transform:l({scale:r,transform:t})})},propT:function(e,r){return{property:e,transform:r}},sizes:c("sizes",z.px),sizesT:c("sizes",z.fraction),shadows:c("shadows"),logical:function(e){var r=e.property,t=e.scale,n=e.transform;return{scale:t,property:f(r),transform:t?l({scale:t,compose:n}):n}},blur:c("blur",z.blur)},B={background:T.colors("background"),backgroundColor:T.colors("backgroundColor"),backgroundImage:T.propT("backgroundImage",z.bgImage),backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0,backgroundAttachment:!0,backgroundClip:{transform:z.bgClip},bgSize:T.prop("backgroundSize"),bgPosition:T.prop("backgroundPosition"),bg:T.colors("background"),bgColor:T.colors("backgroundColor"),bgPos:T.prop("backgroundPosition"),bgRepeat:T.prop("backgroundRepeat"),bgAttachment:T.prop("backgroundAttachment"),bgGradient:T.propT("backgroundImage",z.gradient),bgClip:{transform:z.bgClip}};Object.assign(B,{bgImage:B.backgroundImage,bgImg:B.backgroundImage});var j={border:T.borders("border"),borderWidth:T.borderWidths("borderWidth"),borderStyle:T.borderStyles("borderStyle"),borderColor:T.colors("borderColor"),borderRadius:T.radii("borderRadius"),borderTop:T.borders("borderTop"),borderBlockStart:T.borders("borderBlockStart"),borderTopLeftRadius:T.radii("borderTopLeftRadius"),borderStartStartRadius:T.logical({scale:"radii",property:{ltr:"borderTopLeftRadius",rtl:"borderTopRightRadius"}}),borderEndStartRadius:T.logical({scale:"radii",property:{ltr:"borderBottomLeftRadius",rtl:"borderBottomRightRadius"}}),borderTopRightRadius:T.radii("borderTopRightRadius"),borderStartEndRadius:T.logical({scale:"radii",property:{ltr:"borderTopRightRadius",rtl:"borderTopLeftRadius"}}),borderEndEndRadius:T.logical({scale:"radii",property:{ltr:"borderBottomRightRadius",rtl:"borderBottomLeftRadius"}}),borderRight:T.borders("borderRight"),borderInlineEnd:T.borders("borderInlineEnd"),borderBottom:T.borders("borderBottom"),borderBlockEnd:T.borders("borderBlockEnd"),borderBottomLeftRadius:T.radii("borderBottomLeftRadius"),borderBottomRightRadius:T.radii("borderBottomRightRadius"),borderLeft:T.borders("borderLeft"),borderInlineStart:{property:"borderInlineStart",scale:"borders"},borderInlineStartRadius:T.logical({scale:"radii",property:{ltr:["borderTopLeftRadius","borderBottomLeftRadius"],rtl:["borderTopRightRadius","borderBottomRightRadius"]}}),borderInlineEndRadius:T.logical({scale:"radii",property:{ltr:["borderTopRightRadius","borderBottomRightRadius"],rtl:["borderTopLeftRadius","borderBottomLeftRadius"]}}),borderX:T.borders(["borderLeft","borderRight"]),borderInline:T.borders("borderInline"),borderY:T.borders(["borderTop","borderBottom"]),borderBlock:T.borders("borderBlock"),borderTopWidth:T.borderWidths("borderTopWidth"),borderBlockStartWidth:T.borderWidths("borderBlockStartWidth"),borderTopColor:T.colors("borderTopColor"),borderBlockStartColor:T.colors("borderBlockStartColor"),borderTopStyle:T.borderStyles("borderTopStyle"),borderBlockStartStyle:T.borderStyles("borderBlockStartStyle"),borderBottomWidth:T.borderWidths("borderBottomWidth"),borderBlockEndWidth:T.borderWidths("borderBlockEndWidth"),borderBottomColor:T.colors("borderBottomColor"),borderBlockEndColor:T.colors("borderBlockEndColor"),borderBottomStyle:T.borderStyles("borderBottomStyle"),borderBlockEndStyle:T.borderStyles("borderBlockEndStyle"),borderLeftWidth:T.borderWidths("borderLeftWidth"),borderInlineStartWidth:T.borderWidths("borderInlineStartWidth"),borderLeftColor:T.colors("borderLeftColor"),borderInlineStartColor:T.colors("borderInlineStartColor"),borderLeftStyle:T.borderStyles("borderLeftStyle"),borderInlineStartStyle:T.borderStyles("borderInlineStartStyle"),borderRightWidth:T.borderWidths("borderRightWidth"),borderInlineEndWidth:T.borderWidths("borderInlineEndWidth"),borderRightColor:T.colors("borderRightColor"),borderInlineEndColor:T.colors("borderInlineEndColor"),borderRightStyle:T.borderStyles("borderRightStyle"),borderInlineEndStyle:T.borderStyles("borderInlineEndStyle"),borderTopRadius:T.radii(["borderTopLeftRadius","borderTopRightRadius"]),borderBottomRadius:T.radii(["borderBottomLeftRadius","borderBottomRightRadius"]),borderLeftRadius:T.radii(["borderTopLeftRadius","borderBottomLeftRadius"]),borderRightRadius:T.radii(["borderTopRightRadius","borderBottomRightRadius"])};Object.assign(j,{rounded:j.borderRadius,roundedTop:j.borderTopRadius,roundedTopLeft:j.borderTopLeftRadius,roundedTopRight:j.borderTopRightRadius,roundedTopStart:j.borderStartStartRadius,roundedTopEnd:j.borderStartEndRadius,roundedBottom:j.borderBottomRadius,roundedBottomLeft:j.borderBottomLeftRadius,roundedBottomRight:j.borderBottomRightRadius,roundedBottomStart:j.borderEndStartRadius,roundedBottomEnd:j.borderEndEndRadius,roundedLeft:j.borderLeftRadius,roundedRight:j.borderRightRadius,roundedStart:j.borderInlineStartRadius,roundedEnd:j.borderInlineEndRadius,borderStart:j.borderInlineStart,borderEnd:j.borderInlineEnd,borderTopStartRadius:j.borderStartStartRadius,borderTopEndRadius:j.borderStartEndRadius,borderBottomStartRadius:j.borderEndStartRadius,borderBottomEndRadius:j.borderEndEndRadius,borderStartRadius:j.borderInlineStartRadius,borderEndRadius:j.borderInlineEndRadius,borderStartWidth:j.borderInlineStartWidth,borderEndWidth:j.borderInlineEndWidth,borderStartColor:j.borderInlineStartColor,borderEndColor:j.borderInlineEndColor,borderStartStyle:j.borderInlineStartStyle,borderEndStyle:j.borderInlineEndStyle});var O={color:T.colors("color"),textColor:T.colors("color"),fill:T.colors("fill"),stroke:T.colors("stroke")},P={boxShadow:T.shadows("boxShadow"),mixBlendMode:!0,blendMode:T.prop("mixBlendMode"),backgroundBlendMode:!0,bgBlendMode:T.prop("backgroundBlendMode"),opacity:!0};Object.assign(P,{shadow:P.boxShadow});var F={filter:{transform:z.filter},blur:T.blur("--chakra-blur"),brightness:T.propT("--chakra-brightness",z.brightness),contrast:T.propT("--chakra-contrast",z.contrast),hueRotate:T.degreeT("--chakra-hue-rotate"),invert:T.propT("--chakra-invert",z.invert),saturate:T.propT("--chakra-saturate",z.saturate),dropShadow:T.propT("--chakra-drop-shadow",z.dropShadow),backdropFilter:{transform:z.backdropFilter},backdropBlur:T.blur("--chakra-backdrop-blur"),backdropBrightness:T.propT("--chakra-backdrop-brightness",z.brightness),backdropContrast:T.propT("--chakra-backdrop-contrast",z.contrast),backdropHueRotate:T.degreeT("--chakra-backdrop-hue-rotate"),backdropInvert:T.propT("--chakra-backdrop-invert",z.invert),backdropSaturate:T.propT("--chakra-backdrop-saturate",z.saturate)},M={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:{transform:z.flexDirection},experimental_spaceX:{static:v,transform:l({scale:"space",transform:function(e){return null!==e?{"--chakra-space-x":e}:null}})},experimental_spaceY:{static:y,transform:l({scale:"space",transform:function(e){return null!=e?{"--chakra-space-y":e}:null}})},flex:!0,flexFlow:!0,flexGrow:!0,flexShrink:!0,flexBasis:T.sizes("flexBasis"),justifySelf:!0,alignSelf:!0,order:!0,placeItems:!0,placeContent:!0,placeSelf:!0};Object.assign(M,{flexDir:M.flexDirection});var I={gridGap:T.space("gridGap"),gridColumnGap:T.space("gridColumnGap"),gridRowGap:T.space("gridRowGap"),gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,gridAutoRows:!0,gridTemplate:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},W={appearance:!0,cursor:!0,resize:!0,userSelect:!0,pointerEvents:!0,outline:{transform:z.outline},outlineOffset:!0,outlineColor:T.colors("outlineColor")},N={width:T.sizesT("width"),inlineSize:T.sizesT("inlineSize"),height:T.sizes("height"),blockSize:T.sizes("blockSize"),boxSize:T.sizes(["width","height"]),minWidth:T.sizes("minWidth"),minInlineSize:T.sizes("minInlineSize"),minHeight:T.sizes("minHeight"),minBlockSize:T.sizes("minBlockSize"),maxWidth:T.sizes("maxWidth"),maxInlineSize:T.sizes("maxInlineSize"),maxHeight:T.sizes("maxHeight"),maxBlockSize:T.sizes("maxBlockSize"),d:T.prop("display"),overflow:!0,overflowX:!0,overflowY:!0,overscrollBehavior:!0,overscrollBehaviorX:!0,overscrollBehaviorY:!0,display:!0,verticalAlign:!0,boxSizing:!0,boxDecorationBreak:!0,float:T.propT("float",z.float),objectFit:!0,objectPosition:!0,visibility:!0,isolation:!0};Object.assign(N,{w:N.width,h:N.height,minW:N.minWidth,maxW:N.maxWidth,minH:N.minHeight,maxH:N.maxHeight,overscroll:N.overscrollBehavior,overscrollX:N.overscrollBehaviorX,overscrollY:N.overscrollBehaviorY});var D={listStyleType:!0,listStylePosition:!0,listStylePos:T.prop("listStylePosition"),listStyleImage:!0,listStyleImg:T.prop("listStyleImage")},L={border:"0px",clip:"rect(0, 0, 0, 0)",width:"1px",height:"1px",margin:"-1px",padding:"0px",overflow:"hidden",whiteSpace:"nowrap",position:"absolute"},H={position:"static",width:"auto",height:"auto",clip:"auto",padding:"0",margin:"0",overflow:"visible",whiteSpace:"normal"},$=function(e,r,t){var o={},a=(0,n.Wf)(e,r,{});for(var i in a){i in t&&null!=t[i]||(o[i]=a[i])}return o},G={srOnly:{transform:function(e){return!0===e?L:"focusable"===e?H:{}}},layerStyle:{processResult:!0,transform:function(e,r,t){return $(r,"layerStyles."+e,t)}},textStyle:{processResult:!0,transform:function(e,r,t){return $(r,"textStyles."+e,t)}},apply:{processResult:!0,transform:function(e,r,t){return $(r,e,t)}}},q={position:!0,pos:T.prop("position"),zIndex:T.prop("zIndex","zIndices"),inset:T.spaceT(["top","right","bottom","left"]),insetX:T.spaceT(["left","right"]),insetInline:T.spaceT("insetInline"),insetY:T.spaceT(["top","bottom"]),insetBlock:T.spaceT("insetBlock"),top:T.spaceT("top"),insetBlockStart:T.spaceT("insetBlockStart"),bottom:T.spaceT("bottom"),insetBlockEnd:T.spaceT("insetBlockEnd"),left:T.spaceT("left"),insetInlineStart:T.logical({scale:"space",property:{ltr:"left",rtl:"right"}}),right:T.spaceT("right"),insetInlineEnd:T.logical({scale:"space",property:{ltr:"right",rtl:"left"}})};Object.assign(q,{insetStart:q.insetInlineStart,insetEnd:q.insetInlineEnd});var U={ring:{transform:z.ring},ringColor:T.colors("--chakra-ring-color"),ringOffset:T.prop("--chakra-ring-offset-width"),ringOffsetColor:T.colors("--chakra-ring-offset-color"),ringInset:T.prop("--chakra-ring-inset")},V={margin:T.spaceT("margin"),marginTop:T.spaceT("marginTop"),marginBlockStart:T.spaceT("marginBlockStart"),marginRight:T.spaceT("marginRight"),marginInlineEnd:T.spaceT("marginInlineEnd"),marginBottom:T.spaceT("marginBottom"),marginBlockEnd:T.spaceT("marginBlockEnd"),marginLeft:T.spaceT("marginLeft"),marginInlineStart:T.spaceT("marginInlineStart"),marginX:T.spaceT(["marginInlineStart","marginInlineEnd"]),marginInline:T.spaceT("marginInline"),marginY:T.spaceT(["marginTop","marginBottom"]),marginBlock:T.spaceT("marginBlock"),padding:T.space("padding"),paddingTop:T.space("paddingTop"),paddingBlockStart:T.space("paddingBlockStart"),paddingRight:T.space("paddingRight"),paddingBottom:T.space("paddingBottom"),paddingBlockEnd:T.space("paddingBlockEnd"),paddingLeft:T.space("paddingLeft"),paddingInlineStart:T.space("paddingInlineStart"),paddingInlineEnd:T.space("paddingInlineEnd"),paddingX:T.space(["paddingInlineStart","paddingInlineEnd"]),paddingInline:T.space("paddingInline"),paddingY:T.space(["paddingTop","paddingBottom"]),paddingBlock:T.space("paddingBlock")};Object.assign(V,{m:V.margin,mt:V.marginTop,mr:V.marginRight,me:V.marginInlineEnd,marginEnd:V.marginInlineEnd,mb:V.marginBottom,ml:V.marginLeft,ms:V.marginInlineStart,marginStart:V.marginInlineStart,mx:V.marginX,my:V.marginY,p:V.padding,pt:V.paddingTop,py:V.paddingY,px:V.paddingX,pb:V.paddingBottom,pl:V.paddingLeft,ps:V.paddingInlineStart,paddingStart:V.paddingInlineStart,pr:V.paddingRight,pe:V.paddingInlineEnd,paddingEnd:V.paddingInlineEnd});var X={textDecorationColor:T.colors("textDecorationColor"),textDecoration:!0,textDecor:{property:"textDecoration"},textDecorationLine:!0,textDecorationStyle:!0,textDecorationThickness:!0,textUnderlineOffset:!0,textShadow:T.shadows("textShadow")},Y={clipPath:!0,transform:T.propT("transform",z.transform),transformOrigin:!0,translateX:T.spaceT("--chakra-translate-x"),translateY:T.spaceT("--chakra-translate-y"),skewX:T.degreeT("--chakra-skew-x"),skewY:T.degreeT("--chakra-skew-y"),scaleX:T.prop("--chakra-scale-x"),scaleY:T.prop("--chakra-scale-y"),scale:T.prop(["--chakra-scale-x","--chakra-scale-y"]),rotate:T.degreeT("--chakra-rotate")},Z={transition:!0,transitionDelay:!0,animation:!0,willChange:!0,transitionDuration:T.prop("transitionDuration","transition.duration"),transitionProperty:T.prop("transitionProperty","transition.property"),transitionTimingFunction:T.prop("transitionTimingFunction","transition.easing")},K={fontFamily:T.prop("fontFamily","fonts"),fontSize:T.prop("fontSize","fontSizes",z.px),fontWeight:T.prop("fontWeight","fontWeights"),lineHeight:T.prop("lineHeight","lineHeights"),letterSpacing:T.prop("letterSpacing","letterSpacings"),textAlign:!0,fontStyle:!0,wordBreak:!0,overflowWrap:!0,textOverflow:!0,textTransform:!0,whiteSpace:!0,noOfLines:{static:{overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"var(--chakra-line-clamp)"},property:"--chakra-line-clamp"},isTruncated:{transform:function(e){if(!0===e)return{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}}};function Q(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var ee=function(e){return e+":focus &, "+e+"[data-focus] &"},re=function(e){return e+":focus-visible &"},te=function(e){return e+":active &, "+e+"[data-active] &"},ne=function(e){return e+":disabled &, "+e+"[data-disabled] &"},oe=function(e){return e+":invalid &, "+e+"[data-invalid] &"},ae=function(e){return e+":checked &, "+e+"[data-checked] &"},ie=function(e){return se(e,"[role=group]","[data-group]",".group")},se=function(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n1?r-1:0),n=1;n=0||(o[t]=e[t]);return o}(e,je)}function Me(e){var r,t=Fe(e),o=function(e,r){var t={cssMap:{},cssVars:{}};return(0,n.Vg)(e,(function(e,n){var o,a=n[0],i=(null!=(o=Be[a])?o:Be.defaultHandler)(n,e,r),s=i.cssVars,l=i.cssMap;Object.assign(t.cssVars,s),Object.assign(t.cssMap,l)})),t}(Pe(t),{cssVarPrefix:null==(r=t.config)?void 0:r.cssVarPrefix}),a=o.cssMap,s=o.cssVars;return Object.assign(t,{__cssVars:i({},{"--chakra-ring-inset":"var(--chakra-empty,/*!*/ /*!*/)","--chakra-ring-offset-width":"0px","--chakra-ring-offset-color":"#fff","--chakra-ring-color":"rgba(66, 153, 225, 0.6)","--chakra-ring-offset-shadow":"0 0 #0000","--chakra-ring-shadow":"0 0 #0000","--chakra-space-x-reverse":"0","--chakra-space-y-reverse":"0"},s),__cssMap:a,__breakpoints:(0,n.yn)(t.breakpoints)}),t}},2846:function(e,r,t){"use strict";t.d(r,{ZL:function(){return O},Fo:function(){return B},f6:function(){return R},m$:function(){return H},Gp:function(){return $},Lr:function(){return P},jC:function(){return U},mq:function(){return q},yK:function(){return j},Fg:function(){return z}});var n=t(949),o=t(4244),a=t(917),i=t(9394),s=t(5031),l=t(8554),c=t.n(l),u=t(7294),d=t(9590),f=t.n(d),p=t(6450),h=t(7462),m=t(7866),g=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,b=(0,m.Z)((function(e){return g.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),v=t(444),y=t(4478),x=b,w=function(e){return"theme"!==e},k=function(e){return"string"===typeof e&&e.charCodeAt(0)>96?x:w},S=function(e,r,t){var n;if(r){var o=r.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(r){return e.__emotion_forwardProp(r)&&o(r)}:o}return"function"!==typeof n&&t&&(n=e.__emotion_forwardProp),n},_=function(){return null},C=function e(r,t){var n,o,a=r.__emotion_real===r,s=a&&r.__emotion_base||r;void 0!==t&&(n=t.label,o=t.target);var l=S(r,t,a),c=l||k(s),d=!c("as");return function(){var f=arguments,p=a&&void 0!==r.__emotion_styles?r.__emotion_styles.slice(0):[];if(void 0!==n&&p.push("label:"+n+";"),null==f[0]||void 0===f[0].raw)p.push.apply(p,f);else{0,p.push(f[0][0]);for(var m=f.length,g=1;g` or ``");return e}var T=(0,p.kr)({name:"StylesContext",errorMessage:"useStyles: `styles` is undefined. Seems you forgot to wrap the components in `` "}),B=T[0],j=T[1],O=function(){var e=(0,n.If)().colorMode;return u.createElement(a.xB,{styles:function(r){var t=(0,s.Wf)(r,"styles.global"),n=(0,s.Pu)(t,{theme:r,colorMode:e});if(n){var a=(0,o.iv)(n)(r);return a}}})};function P(e){return(0,s.CE)(e,["styleConfig","size","variant","colorScheme"])}function F(){return A({},(0,n.If)(),{theme:z()})}function M(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n=0||(o[t]=e[t]);return o}var I=new Set([].concat(o.cC,["textStyle","layerStyle","apply","isTruncated","noOfLines","focusBorderColor","errorBorderColor","as","__css","css","sx"])),W=new Set(["htmlWidth","htmlHeight","htmlSize"]),N=function(e){return W.has(e)||!I.has(e)},D=["theme","css","__css","sx"],L=["baseStyle"];var H=function(e,r){var t=null!=r?r:{},n=t.baseStyle,a=M(t,L);a.shouldForwardProp||(a.shouldForwardProp=N);var i=function(e){var r=e.baseStyle;return function(e){e.theme;var t=e.css,n=e.__css,a=e.sx,i=M(e,D),l=(0,s.lw)(i,(function(e,r){return(0,o.ZR)(r)})),c=(0,s.Pu)(r,e),u=Object.assign({},n,c,(0,s.YU)(l),a),d=(0,o.iv)(u)(e.theme);return t?[d,t]:d}}({baseStyle:n});return E(e,a)(i)};function $(e){return u.forwardRef(e)}["a","b","article","aside","blockquote","button","caption","cite","circle","code","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","img","input","kbd","label","li","main","mark","nav","ol","p","path","pre","q","rect","s","svg","section","select","strong","small","span","sub","sup","table","tbody","td","textarea","tfoot","th","thead","tr","ul"].forEach((function(e){H[e]=H(e)}));var G=["styleConfig"];function q(e,r,t){var n;void 0===r&&(r={}),void 0===t&&(t={});var o=r,a=o.styleConfig,i=M(o,G),l=F(),d=l.theme,p=l.colorMode,h=(0,s.Wf)(d,"components."+e),m=a||h,g=c()({theme:d,colorMode:p},null!=(n=null==m?void 0:m.defaultProps)?n:{},(0,s.YU)((0,s.CE)(i,["children"]))),b=(0,u.useRef)({});if(m){var v,y,x,w,k,S,_=(0,s.Pu)(null!=(v=m.baseStyle)?v:{},g),C=(0,s.Pu)(null!=(y=null==(x=m.variants)?void 0:x[g.variant])?y:{},g),E=(0,s.Pu)(null!=(w=null==(k=m.sizes)?void 0:k[g.size])?w:{},g),A=c()({},_,E,C);null!=(S=t)&&S.isMultiPart&&m.parts&&m.parts.forEach((function(e){var r;A[e]=null!=(r=A[e])?r:{}})),f()(b.current,A)||(b.current=A)}return b.current}function U(e,r){return q(e,r,{isMultiPart:!0})}},5031:function(e,r,t){"use strict";t.d(r,{Ts:function(){return h},yn:function(){return R},Qm:function(){return B},v0:function(){return P},cx:function(){return j},PB:function(){return T},YU:function(){return y},sq:function(){return w},K1:function(){return k},jU:function(){return z},FS:function(){return p},Qr:function(){return u},mf:function(){return l},Ft:function(){return d},hj:function(){return i},Kn:function(){return c},HD:function(){return f},XQ:function(){return N},Wf:function(){return b},ZT:function(){return M},lw:function(){return v},Yd:function(){return x},CE:function(){return m},ei:function(){return g},zG:function(){return W},px:function(){return S},Pu:function(){return O},Vg:function(){return D},ZK:function(){return I}});t(8554);var n=1/60*1e3,o="undefined"!==typeof performance?function(){return performance.now()}:function(){return Date.now()};function a(e){var r=null==e?0:e.length;return r?e[r-1]:void 0}function i(e){return"number"===typeof e}function s(e){return Array.isArray(e)}function l(e){return"function"===typeof e}function c(e){var r=typeof e;return null!=e&&("object"===r||"function"===r)&&!s(e)}function u(e){return c(e)&&0===Object.keys(e).length}function d(e){return null==e}function f(e){return"[object String]"===Object.prototype.toString.call(e)}function p(e){return/^var\(--.+\)$/.test(e)}var h=!1;function m(e,r){var t={};return Object.keys(e).forEach((function(n){r.includes(n)||(t[n]=e[n])})),t}function g(e,r){var t={};return r.forEach((function(r){r in e&&(t[r]=e[r])})),t}var b=function(e){var r=new WeakMap;return function(t,n,o,a){if("undefined"===typeof t)return e(t,n,o);r.has(t)||r.set(t,new Map);var i=r.get(t);if(i.has(n))return i.get(n);var s=e(t,n,o,a);return i.set(n,s),s}}((function(e,r,t,n){var o="string"===typeof r?r.split("."):[r];for(n=0;nparseInt(r[1],10)?1:-1},C=function(e){return w(Object.entries(e).sort(_))};function E(e){var r=C(e);return Object.assign(Object.values(r),r)}function A(e,r){var t=[];return e&&t.push("@media screen and (min-width: "+S(e)+")"),t.length>0&&r&&t.push("and"),r&&t.push("@media screen and (max-width: "+S(r)+")"),t.join(" ")}function R(e){var r;if(!e)return null;e.base=null!=(r=e.base)?r:"0px";var t=E(e),n=Object.entries(e).sort(_).map((function(e,r,t){var n,o=e[0],a=e[1],s=(null!=(n=t[r+1])?n:[])[1];return{breakpoint:o,minW:a,maxW:s=parseFloat(s)>0?function(e){var r;if(!e)return e;var t=(e=null!=(r=S(e))?r:e).endsWith("px")?-1:-.0635;return i(e)?""+(e+t):e.replace(/([0-9]+\.?[0-9]*)/,(function(e){return""+(parseFloat(e)+t)}))}(s):void 0,maxWQuery:A(null,s),minWQuery:A(a),minMaxQuery:A(a,s)}})),o=function(e){var r=Object.keys(C(e));return new Set(r)}(e),s=Array.from(o.values());return{keys:o,normalized:t,isResponsive:function(e){var r=Object.keys(e);return r.length>0&&r.every((function(e){return o.has(e)}))},asObject:C(e),asArray:E(e),details:n,media:[null].concat(t.map((function(e){return A(e)})).slice(1)),toArrayValue:function(e){if(!c(e))throw new Error("toArrayValue: value must be an object");for(var r=s.map((function(r){var t;return null!=(t=e[r])?t:null}));null===a(r);)r.pop();return r},toObjectValue:function(e){if(!Array.isArray(e))throw new Error("toObjectValue: value must be an array");return e.reduce((function(e,r,t){var n=s[t];return null!=n&&null!=r&&(e[n]=r),e}),{})}}}var z=!("undefined"===typeof window||!window.document||!window.document.createElement),T=function(e){return e?"":void 0},B=function(e){return!!e||void 0},j=function(){for(var e=arguments.length,r=new Array(e),t=0;t1?r-1:0),n=1;n0?c(y,--b):0,m--,10===v&&(m=1,h--),v}function S(){return v=b2||A(v)>3?"":" "}function j(e,r){for(;--r&&S()&&!(v<48||v>102||v>57&&v<65||v>70&&v<97););return E(e,C()+(r<6&&32==_()&&32==S()))}function O(e){for(;S();)switch(v){case e:return b;case 34:case 39:return O(34===e||39===e?e:v);case 40:41===e&&O(e);break;case 92:S()}return b}function P(e,r){for(;S()&&e+v!==57&&(e+v!==84||47!==_()););return"/*"+E(r,b-1)+"*"+a(47===e?e:S())}function F(e){for(;!A(_());)S();return E(e,b)}var M="-ms-",I="-moz-",W="-webkit-",N="comm",D="rule",L="decl";function H(e,r){for(var t="",n=f(e),o=0;o6)switch(c(e,r+1)){case 109:if(45!==c(e,r+4))break;case 102:return s(e,/(.+:)(.+)-([^]+)/,"$1-webkit-$2-$3$1"+I+(108==c(e,r+3)?"$3":"$2-$3"))+e;case 115:return~l(e,"stretch")?G(s(e,"stretch","fill-available"),r)+e:e}break;case 4949:if(115!==c(e,r+1))break;case 6444:switch(c(e,d(e)-3-(~l(e,"!important")&&10))){case 107:return s(e,":",":"+W)+e;case 101:return s(e,/(.+:)([^;!]+)(;|!.+)?/,"$1"+W+(45===c(e,14)?"inline-":"")+"box$3$1"+W+"$2$3$1"+M+"$2box$3")+e}break;case 5936:switch(c(e,r+11)){case 114:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return W+e+M+s(e,/[svh]\w+-[tblr]{2}/,"lr")+e}return W+e+M+e+e}return e}function q(e){return z(U("",null,null,null,[""],e=R(e),0,[0],e))}function U(e,r,t,n,o,i,l,c,u){for(var f=0,h=0,m=l,g=0,b=0,v=0,y=1,x=1,w=1,E=0,A="",R=o,z=i,O=n,M=A;x;)switch(v=E,E=S()){case 34:case 39:case 91:case 40:M+=T(E);break;case 9:case 10:case 13:case 32:M+=B(v);break;case 92:M+=j(C()-1,7);continue;case 47:switch(_()){case 42:case 47:p(X(P(S(),C()),r,t),u);break;default:M+="/"}break;case 123*y:c[f++]=d(M)*w;case 125*y:case 59:case 0:switch(E){case 0:case 125:x=0;case 59+h:b>0&&d(M)-m&&p(b>32?Y(M+";",n,t,m-1):Y(s(M," ","")+";",n,t,m-2),u);break;case 59:M+=";";default:if(p(O=V(M,r,t,f,h,o,c,A,R=[],z=[],m),i),123===E)if(0===h)U(M,r,O,O,R,i,m,c,z);else switch(g){case 100:case 109:case 115:U(e,O,O,n&&p(V(e,O,O,0,0,o,c,A,o,R=[],m),z),o,z,m,c,n?R:z);break;default:U(M,O,O,O,[""],z,m,c,z)}}f=h=b=0,y=w=1,A=M="",m=l;break;case 58:m=1+d(M),b=v;default:if(y<1)if(123==E)--y;else if(125==E&&0==y++&&125==k())continue;switch(M+=a(E),E*y){case 38:w=h>0?1:(M+="\f",-1);break;case 44:c[f++]=(d(M)-1)*w,w=1;break;case 64:45===_()&&(M+=T(S())),g=_(),h=d(A=M+=F(C())),E++;break;case 45:45===v&&2==d(M)&&(y=0)}}return i}function V(e,r,t,n,a,l,c,d,p,h,m){for(var g=a-1,b=0===a?l:[""],v=f(b),y=0,w=0,k=0;y0?b[S]+" "+_:s(_,/&\f/g,b[S])))&&(p[k++]=C);return x(e,r,t,0===a?D:d,p,h,m)}function X(e,r,t){return x(e,r,t,N,a(v),u(e,2,-2),0)}function Y(e,r,t,n){return x(e,r,t,L,u(e,0,n),u(e,n+1,-1),n)}var Z=function(e,r,t){for(var n=0,o=0;n=o,o=_(),38===n&&12===o&&(r[t]=1),!A(o);)S();return E(e,b)},K=function(e,r){return z(function(e,r){var t=-1,n=44;do{switch(A(n)){case 0:38===n&&12===_()&&(r[t]=1),e[t]+=Z(b-1,r,t);break;case 2:e[t]+=T(n);break;case 4:if(44===n){e[++t]=58===_()?"&\f":"",r[t]=e[t].length;break}default:e[t]+=a(n)}}while(n=S());return e}(R(e),r))},Q=new WeakMap,J=function(e){if("rule"===e.type&&e.parent&&e.length){for(var r=e.value,t=e.parent,n=e.column===t.column&&e.line===t.line;"rule"!==t.type;)if(!(t=t.parent))return;if((1!==e.props.length||58===r.charCodeAt(0)||Q.get(t))&&!n){Q.set(e,!0);for(var o=[],a=K(r,o),i=t.props,s=0,l=0;s=4;++n,o-=4)r=1540483477*(65535&(r=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(r>>>16)<<16),t=1540483477*(65535&(r^=r>>>24))+(59797*(r>>>16)<<16)^1540483477*(65535&t)+(59797*(t>>>16)<<16);switch(o){case 3:t^=(255&e.charCodeAt(n+2))<<16;case 2:t^=(255&e.charCodeAt(n+1))<<8;case 1:t=1540483477*(65535&(t^=255&e.charCodeAt(n)))+(59797*(t>>>16)<<16)}return(((t=1540483477*(65535&(t^=t>>>13))+(59797*(t>>>16)<<16))^t>>>15)>>>0).toString(36)},o=t(351),a=t(7866),i=/[A-Z]|^ms/g,s=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=function(e){return 45===e.charCodeAt(1)},c=function(e){return null!=e&&"boolean"!==typeof e},u=(0,a.Z)((function(e){return l(e)?e:e.replace(i,"-$&").toLowerCase()})),d=function(e,r){switch(e){case"animation":case"animationName":if("string"===typeof r)return r.replace(s,(function(e,r,t){return p={name:r,styles:t,next:p},r}))}return 1===o.Z[e]||l(e)||"number"!==typeof r||0===r?r:r+"px"};function f(e,r,t){if(null==t)return"";if(void 0!==t.__emotion_styles)return t;switch(typeof t){case"boolean":return"";case"object":if(1===t.anim)return p={name:t.name,styles:t.styles,next:p},t.name;if(void 0!==t.styles){var n=t.next;if(void 0!==n)for(;void 0!==n;)p={name:n.name,styles:n.styles,next:p},n=n.next;return t.styles+";"}return function(e,r,t){var n="";if(Array.isArray(t))for(var o=0;o-1},Z.prototype.set=function(e,r){var t=this.__data__,n=te(t,e);return n<0?(++this.size,t.push([e,r])):t[n][1]=r,this},K.prototype.clear=function(){this.size=0,this.__data__={hash:new Y,map:new(U||Z),string:new Y}},K.prototype.delete=function(e){var r=fe(this,e).delete(e);return this.size-=r?1:0,r},K.prototype.get=function(e){return fe(this,e).get(e)},K.prototype.has=function(e){return fe(this,e).has(e)},K.prototype.set=function(e,r){var t=fe(this,e),n=t.size;return t.set(e,r),this.size+=t.size==n?0:1,this},Q.prototype.clear=function(){this.__data__=new Z,this.size=0},Q.prototype.delete=function(e){var r=this.__data__,t=r.delete(e);return this.size=r.size,t},Q.prototype.get=function(e){return this.__data__.get(e)},Q.prototype.has=function(e){return this.__data__.has(e)},Q.prototype.set=function(e,r){var t=this.__data__;if(t instanceof Z){var n=t.__data__;if(!U||n.length<199)return n.push([e,r]),this.size=++t.size,this;t=this.__data__=new K(n)}return t.set(e,r),this.size=t.size,this};var oe,ae=function(e,r,t){for(var n=-1,o=Object(e),a=t(e),i=a.length;i--;){var s=a[oe?i:++n];if(!1===r(o[s],s,o))break}return e};function ie(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":L&&L in Object(e)?function(e){var r=R.call(e,L),t=e[L];try{e[L]=void 0;var n=!0}catch(a){}var o=T.call(e);n&&(r?e[L]=t:delete e[L]);return o}(e):function(e){return T.call(e)}(e)}function se(e){return Ee(e)&&ie(e)==a}function le(e){return!(!Ce(e)||function(e){return!!z&&z in e}(e))&&(Se(e)?j:l).test(function(e){if(null!=e){try{return A.call(e)}catch(r){}try{return e+""}catch(r){}}return""}(e))}function ce(e){if(!Ce(e))return function(e){var r=[];if(null!=e)for(var t in Object(e))r.push(t);return r}(e);var r=me(e),t=[];for(var n in e)("constructor"!=n||!r&&R.call(e,n))&&t.push(n);return t}function ue(e,r,t,n,o){e!==r&&ae(r,(function(a,i){if(o||(o=new Q),Ce(a))!function(e,r,t,n,o,a,i){var l=ge(e,t),c=ge(r,t),u=i.get(c);if(u)return void ee(e,t,u);var d=a?a(l,c,t+"",e,r,i):void 0,f=void 0===d;if(f){var p=xe(c),h=!p&&ke(c),m=!p&&!h&&Ae(c);d=c,p||h||m?xe(l)?d=l:Ee(g=l)&&we(g)?d=function(e,r){var t=-1,n=e.length;r||(r=Array(n));for(;++t-1&&e%1==0&&e0){if(++r>=800)return arguments[0]}else r=0;return e.apply(void 0,arguments)}}(H?function(e,r){return H(e,"toString",{configurable:!0,enumerable:!1,value:(t=r,function(){return t}),writable:!0});var t}:Be);function ve(e,r){return e===r||e!==e&&r!==r}var ye=se(function(){return arguments}())?se:function(e){return Ee(e)&&R.call(e,"callee")&&!N.call(e,"callee")},xe=Array.isArray;function we(e){return null!=e&&_e(e.length)&&!Se(e)}var ke=$||function(){return!1};function Se(e){if(!Ce(e))return!1;var r=ie(e);return r==i||"[object GeneratorFunction]"==r||"[object AsyncFunction]"==r||"[object Proxy]"==r}function _e(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=o}function Ce(e){var r=typeof e;return null!=e&&("object"==r||"function"==r)}function Ee(e){return null!=e&&"object"==typeof e}var Ae=y?function(e){return function(r){return e(r)}}(y):function(e){return Ee(e)&&_e(e.length)&&!!u[ie(e)]};function Re(e){return we(e)?J(e,!0):ce(e)}var ze,Te=(ze=function(e,r,t,n){ue(e,r,t,n)},de((function(e,r){var t=-1,n=r.length,o=n>1?r[n-1]:void 0,a=n>2?r[2]:void 0;for(o=ze.length>3&&"function"==typeof o?(n--,o):void 0,a&&function(e,r,t){if(!Ce(t))return!1;var n=typeof r;return!!("number"==n?we(t)&&he(r,t.length):"string"==n&&r in t)&&ve(t[r],e)}(r[0],r[1],a)&&(o=n<3?void 0:o,n=1),e=Object(e);++t [fill="rgb(65,53,214)"] { fill: #232381; stroke: #232381; }\n &:hover > [fill="rgb(255,255,0)"] { fill: #d6d700; }\n &:hover > [fill="rgb(255,229,153)"] { fill: #f3c950; }\n &:hover > [fill="rgb(153,153,153)"] { fill: #646464; }\n &:hover > [fill="rgb(255,255,255)"] { fill: #d7d7d7; }\n }\n \n svg .done {\n & rect { fill: #cbcbcb !important; }\n & text { text-decoration: line-through; }\n }\n'],r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}})));return b=function(){return t},t}var v=(0,s.iv)(b());var y=function(e){var r=e.Component,t=e.pageProps;return(0,a.useEffect)((function(){(0,c.$)(window.location.pathname)}),[]),(0,o.jsxs)(i.xjn,{theme:l.y,children:[(0,o.jsx)(s.xB,{styles:v}),(0,o.jsx)(h,{}),(0,o.jsx)(r,g({},t))]})}},8909:function(e,r,t){"use strict";t.d(r,{y:function(){return n}});var n=(0,t(3606).B1C)({colors:{brand:{bg:"#06020d",hero:"#06020d",footer:"#0d041e"}}})},3147:function(){},8330:function(){},9590:function(e){var r="undefined"!==typeof Element,t="function"===typeof Map,n="function"===typeof Set,o="function"===typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!==l--;)if(!a(e[l],i[l]))return!1;return!0}if(t&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.value[0])))return!1;return!0}if(n&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!==l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!==l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(r&&e instanceof Element)return!1;for(l=s;0!==l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!==e&&i!==i}e.exports=function(e,r){try{return a(e,r)}catch(t){if((t.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw t}}},1742:function(e){e.exports=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var r=document.activeElement,t=[],n=0;n iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return N=function(){return n},n}var I=s.ZP.div(N());function Z(){var e,t,n=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return Z=function(){return n},n}var _=s.ZP.img(Z());function S(){var e,t,n=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return S=function(){return n},n}var W=s.ZP.a(S()),A=function(e){var t=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,r.jsx)(W,{href:e.href,target:t?"_blank":"_self",children:e.children})};function E(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function T(){var e=E(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return T=function(){return e},e}function C(){var e=E(["\n margin-bottom: 7px;\n"]);return C=function(){return e},e}var B=s.ZP.ul(T()),D=s.ZP.li(C()),U=n(5193),X=n(9876);function q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var F=function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function i(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",null,"What is roadmap.sh?"),(0,r.kt)("p",null,"Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding\ndevelopers. It started as a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"set of charts to guide the developers"),"\nwho are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get\nmore contributors involved."),(0,r.kt)("h2",null,"What are the plans for roadmap.sh?"),(0,r.kt)("p",null,"The website started off as\na ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"simple repository containing a few charts")," for developers and\nbased on my personal opinions but it could have been much more than that so I decided to expand it to a website where\npeople can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc."),(0,r.kt)("p",null,"We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into\na goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the\nlearnings, get feedbacks on their projects etc."),(0,r.kt)("h2",null,"How did you build roadmap.sh?"),(0,r.kt)("p",null,"The basic version of the website has been built with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/zeit/next.js/"}),"Next.js"),", is opensource and can\nbe found on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"github"),". It was hastily done to get it out in front of the\npeople and get people to start contributing, so it might be rough on the edges, but that is where we need your help."),(0,r.kt)("h2",null,"How does it make money?"),(0,r.kt)("p",null,"It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with\nany intentions of monetization but as a good will, to help the people get out of the frustration that I was once in."),(0,r.kt)("p",null,"Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to\nmake enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll\ncontinue growing the site however I can. My focus at the moment is not making money from it and just add content that\ncreates value for the people."),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Sponsor the efforts by ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/sponsors/kamranahmedse"}),"paying as little as 5$ per month")," or with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://paypal.me/kamranahmedse"}),"one time payment via paypal"),". Alternatively, reach out to me at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),".")),(0,r.kt)("h2",null,"Can I contribute?"),(0,r.kt)("p",null,"You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The\nsource code of the website can be ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"found on Github"),". Your contributions can\nbe:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Adding a new roadmap"),(0,r.kt)("li",{parentName:"ul"},"Updating existing roadmap"),(0,r.kt)("li",{parentName:"ul"},"Suggesting changes to the existing roadmaps"),(0,r.kt)("li",{parentName:"ul"},"Writing a Guide"),(0,r.kt)("li",{parentName:"ul"},"Updating an existing guide"),(0,r.kt)("li",{parentName:"ul"},"Fixing grammar mistakes, typos on the website or the content"),(0,r.kt)("li",{parentName:"ul"},"Updating the UI of the website"),(0,r.kt)("li",{parentName:"ul"},"Refactoring the codebase"),(0,r.kt)("li",{parentName:"ul"},"Becoming a sponsor")),(0,r.kt)("p",null,"Just make sure\nto ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing"}),"follow the contribution guidelines")," when you\ndecide to contribute."),(0,r.kt)("h2",null,"Can I redistribute the content?"),(0,r.kt)("p",null,"No, the license of the content on this website does not allow you to redistribute any of the content on this website\nanywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not\nallowed."),(0,r.kt)("h2",null,"What is the best way to contact you?"),(0,r.kt)("p",null,"Tweet or send me a message ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse")," or email me\nat ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),". I get lots of messages so apologies in advance if you don't hear back\nfrom me soon but I do reply to everyone."))}i.isMDXComponent=!0}},function(e){e.O(0,[760,22,515,774,888,179],(function(){return t=4613,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[521],{4613:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/about",function(){return n(4228)}])},2348:function(e,t,n){"use strict";n.d(t,{Z:function(){return M}});var r=n(5893),o=(n(7294),n(4137)),a=n(3606),i=n(5115),s=n(8797);function p(){var e,t,n=(e=["\n line-height: 27px;\n font-size: 16px;\n color: black;\n margin-bottom: 18px;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}var l=s.ZP.p(p());function c(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function u(){var e=c(["\n position: absolute;\n top: 0;\n left: -25px;\n width: 25px;\n display: none;\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n"]);return u=function(){return e},e}function h(){var e=c(["\n position: relative;\n font-size: 32px;\n line-height: 40px;\n font-weight: 700;\n margin: 20px 0 10px !important;\n\n &:hover "," {\n display: flex;\n }\n"]);return h=function(){return e},e}function m(){var e=c(["\n font-size: 30px;\n"]);return m=function(){return e},e}function d(){var e=c(["\n margin: 22px 0 8px;\n font-size: 28px;\n"]);return d=function(){return e},e}function f(){var e=c(["\n margin: 18px 0 8px;\n font-size: 24px;\n"]);return f=function(){return e},e}function b(){var e=c(["\n margin: 14px 0 8px;\n font-size: 18px;\n"]);return b=function(){return e},e}function g(){var e=c(["\n margin: 12px 0 8px;\n font-size: 18px;\n"]);return g=function(){return e},e}var x=s.ZP.a(u()),v=s.ZP.h1(h(),x),k={h1:v,h2:(0,s.ZP)(v).attrs({as:"h2"})(m()),h3:(0,s.ZP)(v).attrs({as:"h3"})(d()),h4:(0,s.ZP)(v).attrs({as:"h4"})(f()),h5:(0,s.ZP)(v).attrs({as:"h5"})(b()),h6:(0,s.ZP)(v).attrs({as:"h6"})(g())};function j(){var e,t,n=(e=["\n margin: 25px -25px 25px -25px !important;\n padding: 20px 25px !important;\n border-radius: 10px;\n line-height: 1.5 !important;\n \n code {\n background: transparent;\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return j=function(){return n},n}var w=s.ZP.pre(j());function y(){var e,t,n=(e=["\n padding: 16px 20px;\n position: relative;\n background: #e8e8e8;\n border-radius: 5px;\n margin-bottom: 18px;\n\n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n }\n\n p + h4 {\n margin-top: 15px;\n }\n\n p {\n margin: 0;\n\n & + p {\n margin-top: 10px;\n }\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return y=function(){return n},n}var O=s.ZP.blockquote(y());function z(){var e,t,n=(e=["\n border-collapse: separate;\n width: 100%;\n border-spacing: 0;\n margin: 20px 0;\n\n th {\n color: #666;\n font-size: 12px;\n font-weight: 400;\n background: #FAFAFA;\n text-transform: uppercase;\n height: 40px;\n vertical-align: middle;\n padding: 5px 10px;\n }\n\n td {\n font-size: 14px;\n padding: 10px;\n border-bottom: 1px solid #EAEAEA;\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return z=function(){return n},n}var P=s.ZP.table(z());function N(){var e,t,n=(e=['\n position: relative;\n max-width: 100%;\n margin-bottom: 18px;\n\n &:before {\n height: 0;\n content: "";\n display: block;\n padding-bottom: 50%;\n }\n\n & > iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return N=function(){return n},n}var I=s.ZP.div(N());function Z(){var e,t,n=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return Z=function(){return n},n}var _=s.ZP.img(Z());function S(){var e,t,n=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return S=function(){return n},n}var W=s.ZP.a(S()),A=function(e){var t=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,r.jsx)(W,{href:e.href,target:t?"_blank":"_self",children:e.children})};function E(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function T(){var e=E(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return T=function(){return e},e}function C(){var e=E(["\n margin-bottom: 7px;\n"]);return C=function(){return e},e}var B=s.ZP.ul(T()),D=s.ZP.li(C()),U=n(5193),X=n(1277);function q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var F=function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a={};function i(e){var t=e.components,n=o(e,["components"]);return(0,r.kt)("wrapper",Object.assign({},a,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",null,"What is roadmap.sh?"),(0,r.kt)("p",null,"Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding\ndevelopers. It started as a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"set of charts to guide the developers"),"\nwho are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get\nmore contributors involved."),(0,r.kt)("h2",null,"What are the plans for roadmap.sh?"),(0,r.kt)("p",null,"The website started off as\na ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"simple repository containing a few charts")," for developers and\nbased on my personal opinions but it could have been much more than that so I decided to expand it to a website where\npeople can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc."),(0,r.kt)("p",null,"We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into\na goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the\nlearnings, get feedbacks on their projects etc."),(0,r.kt)("h2",null,"How did you build roadmap.sh?"),(0,r.kt)("p",null,"The basic version of the website has been built with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/zeit/next.js/"}),"Next.js"),", is opensource and can\nbe found on ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"github"),". It was hastily done to get it out in front of the\npeople and get people to start contributing, so it might be rough on the edges, but that is where we need your help."),(0,r.kt)("h2",null,"How does it make money?"),(0,r.kt)("p",null,"It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with\nany intentions of monetization but as a good will, to help the people get out of the frustration that I was once in."),(0,r.kt)("p",null,"Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to\nmake enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll\ncontinue growing the site however I can. My focus at the moment is not making money from it and just add content that\ncreates value for the people."),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"Sponsor the efforts by ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/sponsors/kamranahmedse"}),"paying as little as 5$ per month")," or with ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://paypal.me/kamranahmedse"}),"one time payment via paypal"),". Alternatively, reach out to me at ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),".")),(0,r.kt)("h2",null,"Can I contribute?"),(0,r.kt)("p",null,"You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The\nsource code of the website can be ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap"}),"found on Github"),". Your contributions can\nbe:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Adding a new roadmap"),(0,r.kt)("li",{parentName:"ul"},"Updating existing roadmap"),(0,r.kt)("li",{parentName:"ul"},"Suggesting changes to the existing roadmaps"),(0,r.kt)("li",{parentName:"ul"},"Writing a Guide"),(0,r.kt)("li",{parentName:"ul"},"Updating an existing guide"),(0,r.kt)("li",{parentName:"ul"},"Fixing grammar mistakes, typos on the website or the content"),(0,r.kt)("li",{parentName:"ul"},"Updating the UI of the website"),(0,r.kt)("li",{parentName:"ul"},"Refactoring the codebase"),(0,r.kt)("li",{parentName:"ul"},"Becoming a sponsor")),(0,r.kt)("p",null,"Just make sure\nto ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing"}),"follow the contribution guidelines")," when you\ndecide to contribute."),(0,r.kt)("h2",null,"Can I redistribute the content?"),(0,r.kt)("p",null,"No, the license of the content on this website does not allow you to redistribute any of the content on this website\nanywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not\nallowed."),(0,r.kt)("h2",null,"What is the best way to contact you?"),(0,r.kt)("p",null,"Tweet or send me a message ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"https://twitter.com/kamranahmedse"}),"@kamranahmedse")," or email me\nat ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),". I get lots of messages so apologies in advance if you don't hear back\nfrom me soon but I do reply to everyone."))}i.isMDXComponent=!0}},function(e){e.O(0,[680,22,515,774,888,179],(function(){return t=4613,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/guides-6ecff73f78900ef9.js b/_next/static/chunks/pages/guides-a446a06b367081ec.js similarity index 92% rename from _next/static/chunks/pages/guides-6ecff73f78900ef9.js rename to _next/static/chunks/pages/guides-a446a06b367081ec.js index 706d89c66..75d0b400d 100644 --- a/_next/static/chunks/pages/guides-6ecff73f78900ef9.js +++ b/_next/static/chunks/pages/guides-a446a06b367081ec.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[874],{1228:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides",function(){return i(6325)}])},7202:function(e,t,i){"use strict";i.d(t,{F:function(){return o}});var n=i(5893),r=(i(7294),i(8527));function o(e){var t=e.title,i=e.subtitle,o=e.badgeText,s=e.icon,c=e.hideSubtitleOnMobile,l=void 0!==c&&c,x=e.href,a=e.target;return(0,n.jsxs)(r.rU,{target:a||"_self",href:x,fontSize:["14px","14px","15px"],py:"9px",d:"flex",flexDirection:["column","row","row"],fontWeight:500,color:"gray.600",alignItems:["flex-start","center"],justifyContent:"space-between",sx:{"@media (hover: none)":{"&:hover":{"& .list-item-title":{transform:"none"}}}},_hover:{textDecoration:"none",color:"blue.400","& .list-item-title":{transform:"translateX(10px)"}},isTruncated:!0,maxWidth:"100%",children:[(0,n.jsxs)(r.kC,{alignItems:"center",className:"list-item-title",transition:"200ms",children:[s,(0,n.jsx)(r.xv,{maxWidth:"345px",isTruncated:!0,as:"span",children:t}),o&&(0,n.jsx)(r.Ct,{pos:"relative",top:"1px",variant:"subtle",colorScheme:"purple",ml:"10px",children:o})]}),(0,n.jsx)(r.xv,{d:[l?"none":"inline","inline"],mt:["3px",0],as:"span",fontSize:["11px","11px","12px"],color:"gray.500",children:i})]})}},1259:function(e,t,i){"use strict";i.d(t,{G:function(){return o}});var n=i(5893),r=(i(7294),i(8527));function o(e){var t=e.children;return(0,n.jsx)(r.gC,{rounded:"5px",divider:(0,n.jsx)(r.cX,{borderColor:"gray.200"}),spacing:0,align:"stretch",children:t})}},1524:function(e,t,i){"use strict";i.d(t,{m:function(){return o}});var n=i(5893),r=i(8527);i(7294);function o(e){var t=e.title,i=e.subtitle,o=e.children,s=e.beforeTitle,c=void 0===s?null:s;return(0,n.jsxs)(r.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:[(0,n.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[c,(0,n.jsx)(r.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:t}),(0,n.jsx)(r.xv,{fontSize:["13px","14px","15px"],children:i})]}),o&&(0,n.jsx)(r.W2,{maxW:"container.md",children:o})]})}},6325:function(e,t,i){"use strict";i.r(t),i.d(t,{__N_SSG:function(){return f},default:function(){return m}});var n=i(5893),r=i(8527),o=i(2438),s=i(1259),c=i(7202),l=i(1832),x=i(600),a=i(6673),d=["gray.700","purple.800"];function u(e){var t,i=e.title,o=e.subtitle,s=e.date,c=e.isNew,l=void 0!==c&&c,x=e.colorIndex,a=void 0===x?0:x,u=e.href;return(0,n.jsxs)(r.xu,{_hover:{textDecoration:"none",transform:"scale(1.02)"},as:r.rU,href:u,shadow:"xl",p:"20px",rounded:"10px",bg:null!==(t=d[a])&&void 0!==t?t:d[0],flex:1,children:[(0,n.jsxs)(r.xv,{mb:"10px",fontSize:"13px",color:"gray.400",children:[l&&(0,n.jsx)(r.Ct,{colorScheme:"yellow",mr:"10px",children:"New"}),s]}),(0,n.jsx)(r.X6,{color:"white",mb:"6px",fontSize:"20px",children:i}),(0,n.jsx)(r.xv,{color:"gray.300",fontSize:"14px",children:o})]})}var p=i(1524),h=i(202),f=!0;function m(e){var t=e.guides,i=void 0===t?[]:t,d=i.slice(0,2),f=i.slice(2);return(0,n.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,n.jsx)(o.e,{}),(0,n.jsx)(h.Z,{title:"Visual Guides",description:"Succinct graphical explanations to engineering topics."}),(0,n.jsxs)(r.xu,{mb:"60px",children:[(0,n.jsx)(p.m,{title:"Visual Guides",subtitle:"Succinct graphical explanations to engineering topics."}),(0,n.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[(0,n.jsx)(r.MI,{columns:[1,1,2],mb:"30px",spacing:["10px","10px","15px"],children:d.map((function(e,t){return(0,n.jsx)(u,{href:"/guides/".concat(e.id),title:e.title,subtitle:e.description,date:e.formattedUpdatedAt,isNew:!0,colorIndex:t},e.id)}))}),(0,n.jsx)(s.G,{children:f.map((function(e){return(0,n.jsx)(c.F,{href:"/guides/".concat(e.id),title:e.title,badgeText:e.isPro?"PRO":"",subtitle:e.formattedUpdatedAt},e.id)}))})]})]}),(0,n.jsx)(l.z,{}),(0,n.jsx)(x.q,{}),(0,n.jsx)(a.$,{})]})}}},function(e){e.O(0,[760,515,774,888,179],(function(){return t=1228,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[874],{1228:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides",function(){return i(6325)}])},7202:function(e,t,i){"use strict";i.d(t,{F:function(){return o}});var n=i(5893),r=(i(7294),i(5115));function o(e){var t=e.title,i=e.subtitle,o=e.badgeText,s=e.icon,c=e.hideSubtitleOnMobile,l=void 0!==c&&c,x=e.href,a=e.target;return(0,n.jsxs)(r.rU,{target:a||"_self",href:x,fontSize:["14px","14px","15px"],py:"9px",d:"flex",flexDirection:["column","row","row"],fontWeight:500,color:"gray.600",alignItems:["flex-start","center"],justifyContent:"space-between",sx:{"@media (hover: none)":{"&:hover":{"& .list-item-title":{transform:"none"}}}},_hover:{textDecoration:"none",color:"blue.400","& .list-item-title":{transform:"translateX(10px)"}},isTruncated:!0,maxWidth:"100%",children:[(0,n.jsxs)(r.kC,{alignItems:"center",className:"list-item-title",transition:"200ms",children:[s,(0,n.jsx)(r.xv,{maxWidth:"345px",isTruncated:!0,as:"span",children:t}),o&&(0,n.jsx)(r.Ct,{pos:"relative",top:"1px",variant:"subtle",colorScheme:"purple",ml:"10px",children:o})]}),(0,n.jsx)(r.xv,{d:[l?"none":"inline","inline"],mt:["3px",0],as:"span",fontSize:["11px","11px","12px"],color:"gray.500",children:i})]})}},1259:function(e,t,i){"use strict";i.d(t,{G:function(){return o}});var n=i(5893),r=(i(7294),i(5115));function o(e){var t=e.children;return(0,n.jsx)(r.gC,{rounded:"5px",divider:(0,n.jsx)(r.cX,{borderColor:"gray.200"}),spacing:0,align:"stretch",children:t})}},1524:function(e,t,i){"use strict";i.d(t,{m:function(){return o}});var n=i(5893),r=i(5115);i(7294);function o(e){var t=e.title,i=e.subtitle,o=e.children,s=e.beforeTitle,c=void 0===s?null:s;return(0,n.jsxs)(r.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:[(0,n.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[c,(0,n.jsx)(r.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:t}),(0,n.jsx)(r.xv,{fontSize:["13px","14px","15px"],children:i})]}),o&&(0,n.jsx)(r.W2,{maxW:"container.md",children:o})]})}},6325:function(e,t,i){"use strict";i.r(t),i.d(t,{__N_SSG:function(){return f},default:function(){return m}});var n=i(5893),r=i(5115),o=i(2438),s=i(1259),c=i(7202),l=i(1832),x=i(600),a=i(6673),d=["gray.700","purple.800"];function u(e){var t,i=e.title,o=e.subtitle,s=e.date,c=e.isNew,l=void 0!==c&&c,x=e.colorIndex,a=void 0===x?0:x,u=e.href;return(0,n.jsxs)(r.xu,{_hover:{textDecoration:"none",transform:"scale(1.02)"},as:r.rU,href:u,shadow:"xl",p:"20px",rounded:"10px",bg:null!==(t=d[a])&&void 0!==t?t:d[0],flex:1,children:[(0,n.jsxs)(r.xv,{mb:"10px",fontSize:"13px",color:"gray.400",children:[l&&(0,n.jsx)(r.Ct,{colorScheme:"yellow",mr:"10px",children:"New"}),s]}),(0,n.jsx)(r.X6,{color:"white",mb:"6px",fontSize:"20px",children:i}),(0,n.jsx)(r.xv,{color:"gray.300",fontSize:"14px",children:o})]})}var p=i(1524),h=i(202),f=!0;function m(e){var t=e.guides,i=void 0===t?[]:t,d=i.slice(0,2),f=i.slice(2);return(0,n.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,n.jsx)(o.e,{}),(0,n.jsx)(h.Z,{title:"Visual Guides",description:"Succinct graphical explanations to engineering topics."}),(0,n.jsxs)(r.xu,{mb:"60px",children:[(0,n.jsx)(p.m,{title:"Visual Guides",subtitle:"Succinct graphical explanations to engineering topics."}),(0,n.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[(0,n.jsx)(r.MI,{columns:[1,1,2],mb:"30px",spacing:["10px","10px","15px"],children:d.map((function(e,t){return(0,n.jsx)(u,{href:"/guides/".concat(e.id),title:e.title,subtitle:e.description,date:e.formattedUpdatedAt,isNew:!0,colorIndex:t},e.id)}))}),(0,n.jsx)(s.G,{children:f.map((function(e){return(0,n.jsx)(c.F,{href:"/guides/".concat(e.id),title:e.title,badgeText:e.isPro?"PRO":"",subtitle:e.formattedUpdatedAt},e.id)}))})]})]}),(0,n.jsx)(l.z,{}),(0,n.jsx)(x.q,{}),(0,n.jsx)(a.$,{})]})}}},function(e){e.O(0,[680,515,774,888,179],(function(){return t=1228,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/guides/[guide]-94626cb65075ff53.js b/_next/static/chunks/pages/guides/[guide]-97b3e15727bf199f.js similarity index 72% rename from _next/static/chunks/pages/guides/[guide]-94626cb65075ff53.js rename to _next/static/chunks/pages/guides/[guide]-97b3e15727bf199f.js index f9ca78dd0..8de967e6d 100644 --- a/_next/static/chunks/pages/guides/[guide]-94626cb65075ff53.js +++ b/_next/static/chunks/pages/guides/[guide]-97b3e15727bf199f.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[202],{6338:function(t,n,e){var i={"./asymptotic-notation.md":3406,"./avoid-render-blocking-javascript-with-async-defer.md":4109,"./basic-authentication.md":4048,"./big-o-notation.md":4340,"./character-encodings.md":2963,"./ci-cd.md":1123,"./design-patterns-for-humans.md":5298,"./dhcp-in-one-picture.md":8303,"./dns-in-one-picture.md":6210,"./history-of-javascript.md":5263,"./http-caching.md":299,"./journey-to-http2.md":2518,"./jwt-authentication.md":3275,"./levels-of-seniority.md":7824,"./oauth.md":7118,"./project-history.md":319,"./proxy-servers.md":5282,"./random-numbers.md":9177,"./scaling-databases.md":3895,"./session-authentication.md":4403,"./ssl-tls-https-ssh.md":5740,"./sso.md":2303,"./token-authentication.md":5726,"./torrent-client.md":9263,"./unfamiliar-codebase.md":8686,"./upcoming.md":4876,"./what-are-web-vitals.md":9405,"./what-is-internet.md":9069,"./what-is-sli-slo-sla.md":8681,"./why-build-it-and-they-will-come-wont-work-anymore.md":2935};function r(t){var n=o(t);return e(n)}function o(t){if(!e.o(i,t)){var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}return i[t]}r.keys=function(){return Object.keys(i)},r.resolve=o,t.exports=r,r.id=6338},7779:function(t,n,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/[guide]",function(){return e(8218)}])},3905:function(t,n,e){"use strict";e.d(n,{D:function(){return d}});var i=e(5893),r=e(8527),o=e(4651);e(7294);function d(t){var n=t.title,e=t.subtitle,d=t.author,s=void 0===d?null:d,a=t.formattedDate,l=t.subLink,c=void 0===l?null:l;return(0,i.jsx)(r.xu,{pt:["35px","35px","70px"],pb:["35px","35px","55px"],borderBottomWidth:1,mb:"30px",children:(0,i.jsxs)(r.W2,{maxW:"container.md",position:"relative",textAlign:["left","left","center"],children:[(0,i.jsxs)(r.kC,{alignItems:"center",justifyContent:["flex-start","flex-start","center"],fontSize:["12px","12px","14px"],children:[(null===s||void 0===s?void 0:s.name)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(r.rU,{d:["none","flex","flex"],target:"_blank",href:"https://twitter.com/".concat(s.twitter),alignItems:"center",fontWeight:600,color:"gray.500",children:[(0,i.jsx)(o.Ee,{alt:"",rounded:"full",mr:"7px",w:"22px",src:s.picture}),s.name]}),(0,i.jsx)(r.xv,{d:["none","inline","inline"],mx:"7px",color:"gray.500",as:"span",children:"\xb7"})]}),(0,i.jsx)(r.xv,{color:"gray.500",as:"span",children:a}),(null===c||void 0===c?void 0:c.text)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.xv,{d:["none","none","inline"],mx:"7px",color:"gray.500",as:"span",children:"\xb7"}),(0,i.jsx)(r.rU,{d:["none","none","inline"],color:"blue.500",fontWeight:500,href:c.url,target:"_blank",children:c.text})]})]}),(0,i.jsx)(r.X6,{as:"h1",color:"black",fontSize:["30px","30px","45px"],lineHeight:["40px","40px","53px"],fontWeight:700,my:["5px","5px","10px"],children:n}),(0,i.jsx)(r.xv,{fontSize:["14px","14px","16px"],color:"gray.700",children:e})]})})}},8218:function(t,n,e){"use strict";e.r(n),e.d(n,{__N_SSG:function(){return m},default:function(){return p}});var i=e(5893),r=e(8527),o=e(2438),d=e(1832),s=e(600),a=e(6673),l=e(3905),c=e(2348),u=e(8641),x=e(202),m=!0;function p(t){var n,m,p,h=t.guide,f=e(6338)("./".concat(h.id,".md")).default;return(0,i.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,i.jsx)(o.e,{}),(0,i.jsx)(x.Z,{title:h.title,description:h.description}),(0,i.jsxs)(r.xu,{mb:"60px",children:[(0,i.jsx)(l.D,{title:h.title,subtitle:h.description,formattedDate:h.formattedUpdatedAt,author:{twitter:null===h||void 0===h||null===(n=h.author)||void 0===n?void 0:n.twitter,picture:null===h||void 0===h||null===(m=h.author)||void 0===m?void 0:m.picture,name:null===h||void 0===h||null===(p=h.author)||void 0===p?void 0:p.name},subLink:{text:"Improve this Guide",url:"".concat(u.url.repo,"/tree/master/content/guides/").concat(h.id,".md")}}),(0,i.jsx)(r.W2,{maxW:"container.md",position:"relative",children:(0,i.jsx)(c.Z,{children:(0,i.jsx)(f,{})})})]}),(0,i.jsx)(d.z,{}),(0,i.jsx)(s.q,{}),(0,i.jsx)(a.$,{})]})}}},function(t){t.O(0,[760,22,515,122,774,888,179],(function(){return n=7779,t(t.s=n);var n}));var n=t.O();_N_E=n}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[202],{6338:function(t,n,e){var i={"./asymptotic-notation.md":3070,"./avoid-render-blocking-javascript-with-async-defer.md":8829,"./basic-authentication.md":5151,"./big-o-notation.md":5198,"./character-encodings.md":3180,"./ci-cd.md":7354,"./design-patterns-for-humans.md":3406,"./dhcp-in-one-picture.md":3784,"./dns-in-one-picture.md":9937,"./history-of-javascript.md":8003,"./http-caching.md":9128,"./journey-to-http2.md":3045,"./jwt-authentication.md":5772,"./levels-of-seniority.md":3878,"./oauth.md":801,"./project-history.md":6681,"./proxy-servers.md":7035,"./random-numbers.md":513,"./scaling-databases.md":7507,"./session-authentication.md":8676,"./ssl-tls-https-ssh.md":6053,"./sso.md":9809,"./token-authentication.md":5607,"./torrent-client.md":4972,"./unfamiliar-codebase.md":5941,"./upcoming.md":5104,"./what-are-web-vitals.md":3442,"./what-is-internet.md":1470,"./what-is-sli-slo-sla.md":1307,"./why-build-it-and-they-will-come-wont-work-anymore.md":9554};function r(t){var n=o(t);return e(n)}function o(t){if(!e.o(i,t)){var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}return i[t]}r.keys=function(){return Object.keys(i)},r.resolve=o,t.exports=r,r.id=6338},7779:function(t,n,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/[guide]",function(){return e(8218)}])},3905:function(t,n,e){"use strict";e.d(n,{D:function(){return d}});var i=e(5893),r=e(5115),o=e(4651);e(7294);function d(t){var n=t.title,e=t.subtitle,d=t.author,s=void 0===d?null:d,a=t.formattedDate,l=t.subLink,c=void 0===l?null:l;return(0,i.jsx)(r.xu,{pt:["35px","35px","70px"],pb:["35px","35px","55px"],borderBottomWidth:1,mb:"30px",children:(0,i.jsxs)(r.W2,{maxW:"container.md",position:"relative",textAlign:["left","left","center"],children:[(0,i.jsxs)(r.kC,{alignItems:"center",justifyContent:["flex-start","flex-start","center"],fontSize:["12px","12px","14px"],children:[(null===s||void 0===s?void 0:s.name)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(r.rU,{d:["none","flex","flex"],target:"_blank",href:"https://twitter.com/".concat(s.twitter),alignItems:"center",fontWeight:600,color:"gray.500",children:[(0,i.jsx)(o.Ee,{alt:"",rounded:"full",mr:"7px",w:"22px",src:s.picture}),s.name]}),(0,i.jsx)(r.xv,{d:["none","inline","inline"],mx:"7px",color:"gray.500",as:"span",children:"\xb7"})]}),(0,i.jsx)(r.xv,{color:"gray.500",as:"span",children:a}),(null===c||void 0===c?void 0:c.text)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.xv,{d:["none","none","inline"],mx:"7px",color:"gray.500",as:"span",children:"\xb7"}),(0,i.jsx)(r.rU,{d:["none","none","inline"],color:"blue.500",fontWeight:500,href:c.url,target:"_blank",children:c.text})]})]}),(0,i.jsx)(r.X6,{as:"h1",color:"black",fontSize:["30px","30px","45px"],lineHeight:["40px","40px","53px"],fontWeight:700,my:["5px","5px","10px"],children:n}),(0,i.jsx)(r.xv,{fontSize:["14px","14px","16px"],color:"gray.700",children:e})]})})}},8218:function(t,n,e){"use strict";e.r(n),e.d(n,{__N_SSG:function(){return m},default:function(){return p}});var i=e(5893),r=e(5115),o=e(2438),d=e(1832),s=e(600),a=e(6673),l=e(3905),c=e(2348),u=e(8641),x=e(202),m=!0;function p(t){var n,m,p,h=t.guide,f=e(6338)("./".concat(h.id,".md")).default;return(0,i.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,i.jsx)(o.e,{}),(0,i.jsx)(x.Z,{title:h.title,description:h.description}),(0,i.jsxs)(r.xu,{mb:"60px",children:[(0,i.jsx)(l.D,{title:h.title,subtitle:h.description,formattedDate:h.formattedUpdatedAt,author:{twitter:null===h||void 0===h||null===(n=h.author)||void 0===n?void 0:n.twitter,picture:null===h||void 0===h||null===(m=h.author)||void 0===m?void 0:m.picture,name:null===h||void 0===h||null===(p=h.author)||void 0===p?void 0:p.name},subLink:{text:"Improve this Guide",url:"".concat(u.url.repo,"/tree/master/content/guides/").concat(h.id,".md")}}),(0,i.jsx)(r.W2,{maxW:"container.md",position:"relative",children:(0,i.jsx)(c.Z,{children:(0,i.jsx)(f,{})})})]}),(0,i.jsx)(d.z,{}),(0,i.jsx)(s.q,{}),(0,i.jsx)(a.$,{})]})}}},function(t){t.O(0,[680,22,515,564,774,888,179],(function(){return n=7779,t(t.s=n);var n}));var n=t.O();_N_E=n}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/index-800a94366f0483ff.js b/_next/static/chunks/pages/index-800a94366f0483ff.js deleted file mode 100644 index 76a22a970..000000000 --- a/_next/static/chunks/pages/index-800a94366f0483ff.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{5301:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(4423)}])},7202:function(e,t,n){"use strict";n.d(t,{F:function(){return o}});var r=n(5893),i=(n(7294),n(8527));function o(e){var t=e.title,n=e.subtitle,o=e.badgeText,s=e.icon,l=e.hideSubtitleOnMobile,a=void 0!==l&&l,x=e.href,c=e.target;return(0,r.jsxs)(i.rU,{target:c||"_self",href:x,fontSize:["14px","14px","15px"],py:"9px",d:"flex",flexDirection:["column","row","row"],fontWeight:500,color:"gray.600",alignItems:["flex-start","center"],justifyContent:"space-between",sx:{"@media (hover: none)":{"&:hover":{"& .list-item-title":{transform:"none"}}}},_hover:{textDecoration:"none",color:"blue.400","& .list-item-title":{transform:"translateX(10px)"}},isTruncated:!0,maxWidth:"100%",children:[(0,r.jsxs)(i.kC,{alignItems:"center",className:"list-item-title",transition:"200ms",children:[s,(0,r.jsx)(i.xv,{maxWidth:"345px",isTruncated:!0,as:"span",children:t}),o&&(0,r.jsx)(i.Ct,{pos:"relative",top:"1px",variant:"subtle",colorScheme:"purple",ml:"10px",children:o})]}),(0,r.jsx)(i.xv,{d:[a?"none":"inline","inline"],mt:["3px",0],as:"span",fontSize:["11px","11px","12px"],color:"gray.500",children:n})]})}},1259:function(e,t,n){"use strict";n.d(t,{G:function(){return o}});var r=n(5893),i=(n(7294),n(8527));function o(e){var t=e.children;return(0,r.jsx)(i.gC,{rounded:"5px",divider:(0,r.jsx)(i.cX,{borderColor:"gray.200"}),spacing:0,align:"stretch",children:t})}},4423:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return y},default:function(){return _}});var r=n(5893),i=n(8527),o=n(2438),s=n(6673),l=n(600),a=n(1832);function x(e){var t=e.text,n=e.href;return(0,r.jsxs)(i.xu,{position:"relative",textAlign:"center",bottom:"20px",children:[(0,r.jsx)(i.xu,{opacity:1,pointerEvents:"none",position:"absolute",bottom:0,height:"200px",width:"100%",background:"linear-gradient(180deg, rgb(255 255 255 / 40%), white)"}),(0,r.jsxs)(i.rU,{rounded:"20px",display:"inline",bg:"green.600",color:"white",p:"7px 20px",href:n,fontWeight:800,fontSize:"11px",textTransform:"uppercase",my:"25px",position:"relative",_hover:{textDecoration:"none","& .forward-arrow":{transform:"translateX(3px)"}},children:[t,(0,r.jsx)(i.xv,{d:"inline-block",as:"span",transition:"200ms",ml:"4px",className:"forward-arrow",children:"\u2192"})]})]})}var c=n(7202);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){return(0,r.jsx)("svg",function(e){for(var t=1;t iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return I=function(){return o},o}var z=s.ZP.div(I());function W(){var e,t,o=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return W=function(){return o},o}var A=s.ZP.img(W());function T(){var e,t,o=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return T=function(){return o},o}var Z=s.ZP.a(T()),q=function(e){var t=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,n.jsx)(Z,{href:e.href,target:t?"_blank":"_self",children:e.children})};function N(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function _(){var e=N(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return _=function(){return e},e}function C(){var e=N(["\n margin-bottom: 7px;\n"]);return C=function(){return e},e}var E=s.ZP.ul(_()),B=s.ZP.li(C()),F=o(5193),U=o(9876);function Y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}var X=function(e){for(var t=1;t=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var a={};function i(e){var t=e.components,o=r(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},a,o,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",null,"Privacy Policy"),(0,n.kt)("p",null,"By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh\u2019s Services is at all times subject to the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/terms"}),"Terms of Use"),", which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use."),(0,n.kt)("h2",null,"What does this Privacy Policy cover?"),(0,n.kt)("p",null,'This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don\u2019t own or control, or people that we don\u2019t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.'),(0,n.kt)("p",null,"As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"Will roadmap.sh ever change this Privacy Policy?"),(0,n.kt)("p",null,"We\u2019re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you\u2019ve opted not to receive legal notice emails from us (or you haven\u2019t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected."),(0,n.kt)("h2",null,"What Information does roadmap.sh Collect?"),(0,n.kt)("p",null,"Information You Provide to Us:"),(0,n.kt)("p",null,"We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (\u201cThird Party Account Information\u201d) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features."),(0,n.kt)("p",null,"We may communicate with you if you\u2019ve provided us the means to do so. For example, if you\u2019ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"Information Collected Automatically"),(0,n.kt)("p",null,"Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, \u201ccookie\u201d information, the type of browser and/or device you\u2019re using to access our Services, and the page or feature you requested. \u201cCookies\u201d are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device\u2019s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren\u2019t responsible for their privacy policies and practices."),(0,n.kt)("p",null,"When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible."),(0,n.kt)("h2",null,"Will roadmap.sh Share Any of the Personal Information it Receives?"),(0,n.kt)("p",null,"We may share your Personal Information with third parties as described in this section:"),(0,n.kt)("p",null,"Information that\u2019s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual."),(0,n.kt)("p",null,"Advertisers: We may allow advertisers and/or merchant partners (\u201cAdvertisers\u201d) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach."),(0,n.kt)("p",null,"We may deliver a file to you through the Services (known as a \u201cweb beacon\u201d) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network\u2019s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser."),(0,n.kt)("p",null,"Affiliated Businesses: In certain situations, businesses or third party websites we\u2019re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business\u2019 or websites\u2019 policies."),(0,n.kt)("p",null,"Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us."),(0,n.kt)("p",null,"User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of \u201cfriends\u201d from that site or service may be automatically imported to the Services, and such \u201cfriends,\u201d if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service."),(0,n.kt)("p",null,"Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party."),(0,n.kt)("p",null,"Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others."),(0,n.kt)("h2",null,"Is Personal Information about me secure?"),(0,n.kt)("p",null,"Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time."),(0,n.kt)("h2",null,"What Personal Information can I access?"),(0,n.kt)("p",null,"Through your account settings, you may access, and, in some cases, edit or delete the following information you\u2019ve provided to us:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"first and last name"),(0,n.kt)("li",{parentName:"ul"},"location of residence"),(0,n.kt)("li",{parentName:"ul"},"age or birthday"),(0,n.kt)("li",{parentName:"ul"},"username")),(0,n.kt)("p",null,"The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("p",null,"Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"What choices do I have?"),(0,n.kt)("p",null,"You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features."),(0,n.kt)("p",null,"You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com")," and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally."),(0,n.kt)("h2",null,"What if I have questions about this policy?"),(0,n.kt)("p",null,"If you have any questions or concerns regarding our privacy policies, please send us a detailed message to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),", and we will try to resolve your concerns."))}i.isMDXComponent=!0}},function(e){e.O(0,[760,22,515,774,888,179],(function(){return t=8120,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[915],{8120:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/privacy",function(){return o(925)}])},2348:function(e,t,o){"use strict";o.d(t,{Z:function(){return M}});var n=o(5893),r=(o(7294),o(4137)),a=o(3606),i=o(5115),s=o(8797);function c(){var e,t,o=(e=["\n line-height: 27px;\n font-size: 16px;\n color: black;\n margin-bottom: 18px;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return c=function(){return o},o}var u=s.ZP.p(c());function l(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function d(){var e=l(["\n position: absolute;\n top: 0;\n left: -25px;\n width: 25px;\n display: none;\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n"]);return d=function(){return e},e}function h(){var e=l(["\n position: relative;\n font-size: 32px;\n line-height: 40px;\n font-weight: 700;\n margin: 20px 0 10px !important;\n\n &:hover "," {\n display: flex;\n }\n"]);return h=function(){return e},e}function m(){var e=l(["\n font-size: 30px;\n"]);return m=function(){return e},e}function f(){var e=l(["\n margin: 22px 0 8px;\n font-size: 28px;\n"]);return f=function(){return e},e}function p(){var e=l(["\n margin: 18px 0 8px;\n font-size: 24px;\n"]);return p=function(){return e},e}function y(){var e=l(["\n margin: 14px 0 8px;\n font-size: 18px;\n"]);return y=function(){return e},e}function v(){var e=l(["\n margin: 12px 0 8px;\n font-size: 18px;\n"]);return v=function(){return e},e}var g=s.ZP.a(d()),b=s.ZP.h1(h(),g),w={h1:b,h2:(0,s.ZP)(b).attrs({as:"h2"})(m()),h3:(0,s.ZP)(b).attrs({as:"h3"})(f()),h4:(0,s.ZP)(b).attrs({as:"h4"})(p()),h5:(0,s.ZP)(b).attrs({as:"h5"})(y()),h6:(0,s.ZP)(b).attrs({as:"h6"})(v())};function x(){var e,t,o=(e=["\n margin: 25px -25px 25px -25px !important;\n padding: 20px 25px !important;\n border-radius: 10px;\n line-height: 1.5 !important;\n \n code {\n background: transparent;\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return x=function(){return o},o}var k=s.ZP.pre(x());function P(){var e,t,o=(e=["\n padding: 16px 20px;\n position: relative;\n background: #e8e8e8;\n border-radius: 5px;\n margin-bottom: 18px;\n\n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n }\n\n p + h4 {\n margin-top: 15px;\n }\n\n p {\n margin: 0;\n\n & + p {\n margin-top: 10px;\n }\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return P=function(){return o},o}var j=s.ZP.blockquote(P());function O(){var e,t,o=(e=["\n border-collapse: separate;\n width: 100%;\n border-spacing: 0;\n margin: 20px 0;\n\n th {\n color: #666;\n font-size: 12px;\n font-weight: 400;\n background: #FAFAFA;\n text-transform: uppercase;\n height: 40px;\n vertical-align: middle;\n padding: 5px 10px;\n }\n\n td {\n font-size: 14px;\n padding: 10px;\n border-bottom: 1px solid #EAEAEA;\n }\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return O=function(){return o},o}var S=s.ZP.table(O());function I(){var e,t,o=(e=['\n position: relative;\n max-width: 100%;\n margin-bottom: 18px;\n\n &:before {\n height: 0;\n content: "";\n display: block;\n padding-bottom: 50%;\n }\n\n & > iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return I=function(){return o},o}var z=s.ZP.div(I());function W(){var e,t,o=(e=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return W=function(){return o},o}var A=s.ZP.img(W());function T(){var e,t,o=(e=["\n font-weight: 600;\n text-decoration: underline;\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return T=function(){return o},o}var Z=s.ZP.a(T()),q=function(e){var t=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(e.href);return(0,n.jsx)(Z,{href:e.href,target:t?"_blank":"_self",children:e.children})};function N(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function _(){var e=N(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return _=function(){return e},e}function C(){var e=N(["\n margin-bottom: 7px;\n"]);return C=function(){return e},e}var E=s.ZP.ul(_()),B=s.ZP.li(C()),F=o(5193),U=o(1277);function Y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}var X=function(e){for(var t=1;t=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var a={};function i(e){var t=e.components,o=r(e,["components"]);return(0,n.kt)("wrapper",Object.assign({},a,o,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",null,"Privacy Policy"),(0,n.kt)("p",null,"By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh\u2019s Services is at all times subject to the ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"/terms"}),"Terms of Use"),", which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use."),(0,n.kt)("h2",null,"What does this Privacy Policy cover?"),(0,n.kt)("p",null,'This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don\u2019t own or control, or people that we don\u2019t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.'),(0,n.kt)("p",null,"As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"Will roadmap.sh ever change this Privacy Policy?"),(0,n.kt)("p",null,"We\u2019re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you\u2019ve opted not to receive legal notice emails from us (or you haven\u2019t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected."),(0,n.kt)("h2",null,"What Information does roadmap.sh Collect?"),(0,n.kt)("p",null,"Information You Provide to Us:"),(0,n.kt)("p",null,"We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (\u201cThird Party Account Information\u201d) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features."),(0,n.kt)("p",null,"We may communicate with you if you\u2019ve provided us the means to do so. For example, if you\u2019ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"Information Collected Automatically"),(0,n.kt)("p",null,"Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, \u201ccookie\u201d information, the type of browser and/or device you\u2019re using to access our Services, and the page or feature you requested. \u201cCookies\u201d are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device\u2019s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren\u2019t responsible for their privacy policies and practices."),(0,n.kt)("p",null,"When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible."),(0,n.kt)("h2",null,"Will roadmap.sh Share Any of the Personal Information it Receives?"),(0,n.kt)("p",null,"We may share your Personal Information with third parties as described in this section:"),(0,n.kt)("p",null,"Information that\u2019s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual."),(0,n.kt)("p",null,"Advertisers: We may allow advertisers and/or merchant partners (\u201cAdvertisers\u201d) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach."),(0,n.kt)("p",null,"We may deliver a file to you through the Services (known as a \u201cweb beacon\u201d) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network\u2019s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser."),(0,n.kt)("p",null,"Affiliated Businesses: In certain situations, businesses or third party websites we\u2019re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business\u2019 or websites\u2019 policies."),(0,n.kt)("p",null,"Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us."),(0,n.kt)("p",null,"User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of \u201cfriends\u201d from that site or service may be automatically imported to the Services, and such \u201cfriends,\u201d if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service."),(0,n.kt)("p",null,"Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party."),(0,n.kt)("p",null,"Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others."),(0,n.kt)("h2",null,"Is Personal Information about me secure?"),(0,n.kt)("p",null,"Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time."),(0,n.kt)("h2",null,"What Personal Information can I access?"),(0,n.kt)("p",null,"Through your account settings, you may access, and, in some cases, edit or delete the following information you\u2019ve provided to us:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"first and last name"),(0,n.kt)("li",{parentName:"ul"},"location of residence"),(0,n.kt)("li",{parentName:"ul"},"age or birthday"),(0,n.kt)("li",{parentName:"ul"},"username")),(0,n.kt)("p",null,"The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("p",null,"Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),"."),(0,n.kt)("h2",null,"What choices do I have?"),(0,n.kt)("p",null,"You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features."),(0,n.kt)("p",null,"You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com")," and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally."),(0,n.kt)("h2",null,"What if I have questions about this policy?"),(0,n.kt)("p",null,"If you have any questions or concerns regarding our privacy policies, please send us a detailed message to ",(0,n.kt)("a",Object.assign({parentName:"p"},{href:"mailto:kamranahmed.se@gmail.com"}),"kamranahmed.se@gmail.com"),", and we will try to resolve your concerns."))}i.isMDXComponent=!0}},function(e){e.O(0,[680,22,515,774,888,179],(function(){return t=8120,e(e.s=t);var t}));var t=e.O();_N_E=t}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/roadmaps-9740eedd6239df0c.js b/_next/static/chunks/pages/roadmaps-9740eedd6239df0c.js new file mode 100644 index 000000000..c29be665d --- /dev/null +++ b/_next/static/chunks/pages/roadmaps-9740eedd6239df0c.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[344],{9780:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/roadmaps",function(){return o(7525)}])},1524:function(e,n,o){"use strict";o.d(n,{m:function(){return i}});var t=o(5893),r=o(5115);o(7294);function i(e){var n=e.title,o=e.subtitle,i=e.children,l=e.beforeTitle,s=void 0===l?null:l;return(0,t.jsxs)(r.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:[(0,t.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[s,(0,t.jsx)(r.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:n}),(0,t.jsx)(r.xv,{fontSize:["13px","14px","15px"],children:o})]}),i&&(0,t.jsx)(r.W2,{maxW:"container.md",children:i})]})}},4866:function(e,n,o){"use strict";o.d(n,{v:function(){return s}});var t=o(5893),r=o(5115),i=o(8641),l=o(5657);o(7294);function s(){return(0,t.jsxs)(r.xv,{_hover:{textDecoration:"none",color:"blue.700","& .new-badge":{bg:"blue.700"}},as:r.rU,href:i.url.youtube,d:"block",target:"_blank",color:"red.700",fontSize:"sm",mb:"10px",fontWeight:500,onClick:function(){return(0,l.B)({category:"Subscription",action:"Clicked the YouTube banner",label:"YouTube Alert on Roadmap"})},children:[(0,t.jsx)(r.Ct,{transition:"all 300ms",className:"new-badge",mr:"7px",colorScheme:"red",variant:"solid",children:"New"}),(0,t.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["none","inline"],children:"Roadmap topics to be covered on our YouTube Channel"}),(0,t.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["inline","none"],children:"Topic videos being made on YouTube"}),(0,t.jsx)(r.xv,{as:"span",ml:"5px",children:"\xbb"})]})}},7525:function(e,n,o){"use strict";o.r(n),o.d(n,{__N_SSG:function(){return m},default:function(){return f}});var t=o(5893),r=o(5115),i=o(2438),l=o(1832),s=o(600),a=o(6673),p=o(1524),c=o(919),u=o(1277),x=["gray.900","purple.900","blue.900","red.900","green.900","teal.900","yellow.900","cyan.900","pink.900","gray.800","purple.800","blue.800","red.800","green.800","teal.800","yellow.800","cyan.800","pink.800","gray.700","purple.700","blue.700","red.700","green.700","teal.700","yellow.700","cyan.700","pink.700","gray.600","purple.600","blue.600","red.600","green.600","teal.600","yellow.600","cyan.600","pink.600"];function d(e){var n,o=e.title,i=e.subtitle,l=e.isCommunity,s=void 0!==l&&l,a=e.isUpcoming,p=void 0!==a&&a,d=e.colorIndex,b=void 0===d?0:d,h=e.href,m=void 0===h?"/":h;return(0,t.jsxs)(r.xu,{_hover:{textDecoration:"none",transform:"scale(1.02)"},as:r.rU,href:m,shadow:"xl",p:"20px",rounded:"10px",bg:null!==(n=x[b])&&void 0!==n?n:x[0],flex:1,pos:"relative",children:[s&&(0,t.jsx)(c.u,{label:"Community contribution",hasArrow:!0,placement:"top",children:(0,t.jsx)(u.sz,{opacity:.5,color:"gray.100",position:"absolute",top:"10px",right:"10px"})}),(0,t.jsx)(r.X6,{color:"white",mb:"6px",fontSize:"20px",children:o}),(0,t.jsx)(r.xv,{color:"gray.300",fontSize:"14px",children:i}),p&&(0,t.jsxs)(r.kC,{alignItems:"center",justifyContent:"center",pos:"absolute",left:0,right:0,top:0,bottom:0,rounded:"10px",children:[(0,t.jsx)(r.xv,{color:"white",bg:"yellow.900",zIndex:1,fontWeight:600,p:"5px 10px",rounded:"10px",children:"Upcoming"}),(0,t.jsx)(r.xu,{bg:"black",pos:"absolute",top:0,left:0,right:0,bottom:0,rounded:"10px",opacity:.5})]})]})}var b=o(202),h=o(4866),m=!0;function f(e){var n=e.roadmaps;return(0,t.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,t.jsx)(i.e,{}),(0,t.jsx)(b.Z,{title:"Developer Roadmaps",description:"Step by step guides and paths to learn different tools or technologies"}),(0,t.jsxs)(r.xu,{mb:"60px",children:[(0,t.jsx)(p.m,{beforeTitle:(0,t.jsx)(h.v,{}),title:"Developer Roadmaps",subtitle:"Step by step guides and paths to learn different tools or technologies"}),(0,t.jsx)(r.W2,{maxW:"container.md",position:"relative",children:(0,t.jsx)(r.MI,{columns:[1,1,2,2],mb:"30px",spacing:["10px","10px","15px"],children:n.map((function(e,n){return(0,t.jsx)(d,{href:"/".concat(e.id),colorIndex:n,title:e.featuredTitle,subtitle:e.description,isCommunity:e.isCommunity,isUpcoming:e.isUpcoming},e.id)}))})})]}),(0,t.jsx)(l.z,{}),(0,t.jsx)(s.q,{}),(0,t.jsx)(a.$,{})]})}}},function(e){e.O(0,[680,919,515,774,888,179],(function(){return n=9780,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/roadmaps-f84c5d5ace2ac964.js b/_next/static/chunks/pages/roadmaps-f84c5d5ace2ac964.js deleted file mode 100644 index 5930cb7c2..000000000 --- a/_next/static/chunks/pages/roadmaps-f84c5d5ace2ac964.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[344],{9780:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/roadmaps",function(){return o(7525)}])},1524:function(e,n,o){"use strict";o.d(n,{m:function(){return i}});var t=o(5893),r=o(8527);o(7294);function i(e){var n=e.title,o=e.subtitle,i=e.children,l=e.beforeTitle,s=void 0===l?null:l;return(0,t.jsxs)(r.xu,{pt:["25px","20px","45px"],pb:["20px","15px","30px"],borderBottomWidth:1,mb:"30px",children:[(0,t.jsxs)(r.W2,{maxW:"container.md",position:"relative",children:[s,(0,t.jsx)(r.X6,{as:"h1",color:"black",fontSize:["28px","33px","40px"],fontWeight:700,mb:["2px","2px","5px"],children:n}),(0,t.jsx)(r.xv,{fontSize:["13px","14px","15px"],children:o})]}),i&&(0,t.jsx)(r.W2,{maxW:"container.md",children:i})]})}},4866:function(e,n,o){"use strict";o.d(n,{v:function(){return s}});var t=o(5893),r=o(8527),i=o(8641),l=o(5657);o(7294);function s(){return(0,t.jsxs)(r.xv,{_hover:{textDecoration:"none",color:"blue.700","& .new-badge":{bg:"blue.700"}},as:r.rU,href:i.url.youtube,d:"block",target:"_blank",color:"red.700",fontSize:"sm",mb:"10px",fontWeight:500,onClick:function(){return(0,l.B)({category:"Subscription",action:"Clicked the YouTube banner",label:"YouTube Alert on Roadmap"})},children:[(0,t.jsx)(r.Ct,{transition:"all 300ms",className:"new-badge",mr:"7px",colorScheme:"red",variant:"solid",children:"New"}),(0,t.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["none","inline"],children:"Roadmap topics to be covered on our YouTube Channel"}),(0,t.jsx)(r.xv,{textDecoration:"underline",as:"span",d:["inline","none"],children:"Topic videos being made on YouTube"}),(0,t.jsx)(r.xv,{as:"span",ml:"5px",children:"\xbb"})]})}},7525:function(e,n,o){"use strict";o.r(n),o.d(n,{__N_SSG:function(){return m},default:function(){return f}});var t=o(5893),r=o(8527),i=o(2438),l=o(1832),s=o(600),a=o(6673),p=o(1524),c=o(3153),u=o(9876),x=["gray.900","purple.900","blue.900","red.900","green.900","teal.900","yellow.900","cyan.900","pink.900","gray.800","purple.800","blue.800","red.800","green.800","teal.800","yellow.800","cyan.800","pink.800","gray.700","purple.700","blue.700","red.700","green.700","teal.700","yellow.700","cyan.700","pink.700","gray.600","purple.600","blue.600","red.600","green.600","teal.600","yellow.600","cyan.600","pink.600"];function d(e){var n,o=e.title,i=e.subtitle,l=e.isCommunity,s=void 0!==l&&l,a=e.isUpcoming,p=void 0!==a&&a,d=e.colorIndex,b=void 0===d?0:d,h=e.href,m=void 0===h?"/":h;return(0,t.jsxs)(r.xu,{_hover:{textDecoration:"none",transform:"scale(1.02)"},as:r.rU,href:m,shadow:"xl",p:"20px",rounded:"10px",bg:null!==(n=x[b])&&void 0!==n?n:x[0],flex:1,pos:"relative",children:[s&&(0,t.jsx)(c.u,{label:"Community contribution",hasArrow:!0,placement:"top",children:(0,t.jsx)(u.sz,{opacity:.5,color:"gray.100",position:"absolute",top:"10px",right:"10px"})}),(0,t.jsx)(r.X6,{color:"white",mb:"6px",fontSize:"20px",children:o}),(0,t.jsx)(r.xv,{color:"gray.300",fontSize:"14px",children:i}),p&&(0,t.jsxs)(r.kC,{alignItems:"center",justifyContent:"center",pos:"absolute",left:0,right:0,top:0,bottom:0,rounded:"10px",children:[(0,t.jsx)(r.xv,{color:"white",bg:"yellow.900",zIndex:1,fontWeight:600,p:"5px 10px",rounded:"10px",children:"Upcoming"}),(0,t.jsx)(r.xu,{bg:"black",pos:"absolute",top:0,left:0,right:0,bottom:0,rounded:"10px",opacity:.5})]})]})}var b=o(202),h=o(4866),m=!0;function f(e){var n=e.roadmaps;return(0,t.jsxs)(r.xu,{bg:"white",minH:"100vh",children:[(0,t.jsx)(i.e,{}),(0,t.jsx)(b.Z,{title:"Developer Roadmaps",description:"Step by step guides and paths to learn different tools or technologies"}),(0,t.jsxs)(r.xu,{mb:"60px",children:[(0,t.jsx)(p.m,{beforeTitle:(0,t.jsx)(h.v,{}),title:"Developer Roadmaps",subtitle:"Step by step guides and paths to learn different tools or technologies"}),(0,t.jsx)(r.W2,{maxW:"container.md",position:"relative",children:(0,t.jsx)(r.MI,{columns:[1,1,2,2],mb:"30px",spacing:["10px","10px","15px"],children:n.map((function(e,n){return(0,t.jsx)(d,{href:"/".concat(e.id),colorIndex:n,title:e.featuredTitle,subtitle:e.description,isCommunity:e.isCommunity,isUpcoming:e.isUpcoming},e.id)}))})})]}),(0,t.jsx)(l.z,{}),(0,t.jsx)(s.q,{}),(0,t.jsx)(a.$,{})]})}}},function(e){e.O(0,[760,153,515,774,888,179],(function(){return n=9780,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/signup-a95d2df986ed0a5e.js b/_next/static/chunks/pages/signup-adbf1143e131779e.js similarity index 91% rename from _next/static/chunks/pages/signup-a95d2df986ed0a5e.js rename to _next/static/chunks/pages/signup-adbf1143e131779e.js index 4fb45d10f..c778450a8 100644 --- a/_next/static/chunks/pages/signup-a95d2df986ed0a5e.js +++ b/_next/static/chunks/pages/signup-adbf1143e131779e.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[616],{6415:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/signup",function(){return t(4347)}])},4347:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return g}});var r=t(5893),o=(t(7294),t(8527)),i=t(9116),s=t(5193),x=t(2438),a=t(1832),d=t(600),l=t(6673),p=t(9876),c=t(8641),h=t(202);function u(){return(0,r.jsx)(o.xu,{p:"20px",rounded:"5px",borderWidth:2,children:(0,r.jsxs)(o.xu,{textAlign:"left",children:[(0,r.jsx)(o.X6,{mb:"10px",fontSize:"23px",fontWeight:700,children:"Monthly Updates"}),(0,r.jsx)(o.xv,{mb:"14px",fontSize:"14px",lineHeight:"20px",children:"Enter your email below to get notified about the new roadmaps, guides and updates"}),(0,r.jsxs)("form",{action:"https://www.getrevue.co/profile/roadmap/add_subscriber",method:"post",target:"_blank",children:[(0,r.jsx)(i.II,{size:"sm",fontSize:"15px",py:"18px",rounded:"4px",placeholder:"Your email",borderWidth:2,mb:"10px",name:"member[email]"}),(0,r.jsx)(s.zx,{type:"submit",bg:"gray.700",_hover:{bg:"black"},fontWeight:500,color:"white",w:"100%",children:"Subscribe"})]}),(0,r.jsxs)(o.xv,{color:"gray.500",fontSize:"12px",mt:"10px",children:[(0,r.jsx)(o.xv,{as:"span",children:"Once a month email"})," about the changes to roadmaps, new roadmaps, free guides and videos."]})]})})}function f(){return(0,r.jsxs)(o.xu,{p:"20px",rounded:"5px",borderWidth:2,bg:"yellow.100",borderColor:"yellow.200",children:[(0,r.jsx)(o.X6,{mb:"10px",fontSize:"23px",fontWeight:700,children:"Updates and Paid Content"}),(0,r.jsx)(o.xv,{mb:"20px",fontSize:"14px",lineHeight:"20px",children:"People sponsoring me on GitHub get access to the updates as well as paid content."}),(0,r.jsxs)(o.aV,{spacing:2,children:[(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Get notified about the updates"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Access to paid guides and Videos"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Support the Project"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Get a shoutout on ",(0,r.jsx)(o.rU,{fontWeight:600,textDecoration:"underline",href:c.url.twitter,target:"_blank",children:"Twitter"})]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Your name will be added to ",(0,r.jsx)(o.rU,{fontWeight:600,textDecoration:"underline",href:"/thanks",children:"Thanks"})]})]}),(0,r.jsx)(s.zx,{target:"_blank",mt:"20px",color:"white",bg:"green.500",_hover:{textDecoration:"none",bg:"green.700"},w:"100%",as:o.rU,href:c.url.sponsor,children:"Sponsor on GitHub"})]})}function g(){return(0,r.jsxs)(o.xu,{bg:"white",minH:"100vh",children:[(0,r.jsx)(x.e,{}),(0,r.jsx)(h.Z,{title:"Sign Up: Be a part of the community"}),(0,r.jsx)(o.xu,{mb:"60px",children:(0,r.jsx)(o.W2,{maxW:"container.md",position:"relative",children:(0,r.jsxs)(o.MI,{columns:[1,1,2],spacing:"15px",my:["30px","30px","80px"],children:[(0,r.jsx)(u,{}),(0,r.jsx)(f,{})]})})}),(0,r.jsx)(a.z,{}),(0,r.jsx)(d.q,{}),(0,r.jsx)(l.$,{})]})}}},function(e){e.O(0,[760,116,515,774,888,179],(function(){return n=6415,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[616],{6415:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/signup",function(){return t(4347)}])},4347:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return g}});var r=t(5893),o=(t(7294),t(5115)),i=t(4018),s=t(5193),x=t(2438),a=t(1832),d=t(600),l=t(6673),p=t(1277),c=t(8641),h=t(202);function u(){return(0,r.jsx)(o.xu,{p:"20px",rounded:"5px",borderWidth:2,children:(0,r.jsxs)(o.xu,{textAlign:"left",children:[(0,r.jsx)(o.X6,{mb:"10px",fontSize:"23px",fontWeight:700,children:"Monthly Updates"}),(0,r.jsx)(o.xv,{mb:"14px",fontSize:"14px",lineHeight:"20px",children:"Enter your email below to get notified about the new roadmaps, guides and updates"}),(0,r.jsxs)("form",{action:"https://www.getrevue.co/profile/roadmap/add_subscriber",method:"post",target:"_blank",children:[(0,r.jsx)(i.II,{size:"sm",fontSize:"15px",py:"18px",rounded:"4px",placeholder:"Your email",borderWidth:2,mb:"10px",name:"member[email]"}),(0,r.jsx)(s.zx,{type:"submit",bg:"gray.700",_hover:{bg:"black"},fontWeight:500,color:"white",w:"100%",children:"Subscribe"})]}),(0,r.jsxs)(o.xv,{color:"gray.500",fontSize:"12px",mt:"10px",children:[(0,r.jsx)(o.xv,{as:"span",children:"Once a month email"})," about the changes to roadmaps, new roadmaps, free guides and videos."]})]})})}function f(){return(0,r.jsxs)(o.xu,{p:"20px",rounded:"5px",borderWidth:2,bg:"yellow.100",borderColor:"yellow.200",children:[(0,r.jsx)(o.X6,{mb:"10px",fontSize:"23px",fontWeight:700,children:"Updates and Paid Content"}),(0,r.jsx)(o.xv,{mb:"20px",fontSize:"14px",lineHeight:"20px",children:"People sponsoring me on GitHub get access to the updates as well as paid content."}),(0,r.jsxs)(o.aV,{spacing:2,children:[(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Get notified about the updates"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Access to paid guides and Videos"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Support the Project"]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Get a shoutout on ",(0,r.jsx)(o.rU,{fontWeight:600,textDecoration:"underline",href:c.url.twitter,target:"_blank",children:"Twitter"})]}),(0,r.jsxs)(o.HC,{fontSize:"14px",children:[(0,r.jsx)(o.DE,{as:p.rE,color:"green.500"}),"Your name will be added to ",(0,r.jsx)(o.rU,{fontWeight:600,textDecoration:"underline",href:"/thanks",children:"Thanks"})]})]}),(0,r.jsx)(s.zx,{target:"_blank",mt:"20px",color:"white",bg:"green.500",_hover:{textDecoration:"none",bg:"green.700"},w:"100%",as:o.rU,href:c.url.sponsor,children:"Sponsor on GitHub"})]})}function g(){return(0,r.jsxs)(o.xu,{bg:"white",minH:"100vh",children:[(0,r.jsx)(x.e,{}),(0,r.jsx)(h.Z,{title:"Sign Up: Be a part of the community"}),(0,r.jsx)(o.xu,{mb:"60px",children:(0,r.jsx)(o.W2,{maxW:"container.md",position:"relative",children:(0,r.jsxs)(o.MI,{columns:[1,1,2],spacing:"15px",my:["30px","30px","80px"],children:[(0,r.jsx)(u,{}),(0,r.jsx)(f,{})]})})}),(0,r.jsx)(a.z,{}),(0,r.jsx)(d.q,{}),(0,r.jsx)(l.$,{})]})}}},function(e){e.O(0,[680,18,515,774,888,179],(function(){return n=6415,e(e.s=n);var n}));var n=e.O();_N_E=n}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/terms-3b75c1125e886467.js b/_next/static/chunks/pages/terms-58af618792d0ef9b.js similarity index 95% rename from _next/static/chunks/pages/terms-3b75c1125e886467.js rename to _next/static/chunks/pages/terms-58af618792d0ef9b.js index d789e53e2..1fb6f3ae3 100644 --- a/_next/static/chunks/pages/terms-3b75c1125e886467.js +++ b/_next/static/chunks/pages/terms-58af618792d0ef9b.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[890],{4305:function(n,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/terms",function(){return r(386)}])},2348:function(n,e,r){"use strict";r.d(e,{Z:function(){return K}});var t=r(5893),i=(r(7294),r(4137)),o=r(3606),c=r(8527),a=r(8797);function u(){var n,e,r=(n=["\n line-height: 27px;\n font-size: 16px;\n color: black;\n margin-bottom: 18px;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return u=function(){return r},r}var p=a.ZP.p(u());function f(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function l(){var n=f(["\n position: absolute;\n top: 0;\n left: -25px;\n width: 25px;\n display: none;\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n"]);return l=function(){return n},n}function s(){var n=f(["\n position: relative;\n font-size: 32px;\n line-height: 40px;\n font-weight: 700;\n margin: 20px 0 10px !important;\n\n &:hover "," {\n display: flex;\n }\n"]);return s=function(){return n},n}function x(){var n=f(["\n font-size: 30px;\n"]);return x=function(){return n},n}function d(){var n=f(["\n margin: 22px 0 8px;\n font-size: 28px;\n"]);return d=function(){return n},n}function h(){var n=f(["\n margin: 18px 0 8px;\n font-size: 24px;\n"]);return h=function(){return n},n}function b(){var n=f(["\n margin: 14px 0 8px;\n font-size: 18px;\n"]);return b=function(){return n},n}function m(){var n=f(["\n margin: 12px 0 8px;\n font-size: 18px;\n"]);return m=function(){return n},n}var g=a.ZP.a(l()),j=a.ZP.h1(s(),g),v={h1:j,h2:(0,a.ZP)(j).attrs({as:"h2"})(x()),h3:(0,a.ZP)(j).attrs({as:"h3"})(d()),h4:(0,a.ZP)(j).attrs({as:"h4"})(h()),h5:(0,a.ZP)(j).attrs({as:"h5"})(b()),h6:(0,a.ZP)(j).attrs({as:"h6"})(m())};function O(){var n,e,r=(n=["\n margin: 25px -25px 25px -25px !important;\n padding: 20px 25px !important;\n border-radius: 10px;\n line-height: 1.5 !important;\n \n code {\n background: transparent;\n }\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return O=function(){return r},r}var z=a.ZP.pre(O());function w(){var n,e,r=(n=["\n padding: 16px 20px;\n position: relative;\n background: #e8e8e8;\n border-radius: 5px;\n margin-bottom: 18px;\n\n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n }\n\n p + h4 {\n margin-top: 15px;\n }\n\n p {\n margin: 0;\n\n & + p {\n margin-top: 10px;\n }\n }\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return w=function(){return r},r}var P=a.ZP.blockquote(w());function y(){var n,e,r=(n=["\n border-collapse: separate;\n width: 100%;\n border-spacing: 0;\n margin: 20px 0;\n\n th {\n color: #666;\n font-size: 12px;\n font-weight: 400;\n background: #FAFAFA;\n text-transform: uppercase;\n height: 40px;\n vertical-align: middle;\n padding: 5px 10px;\n }\n\n td {\n font-size: 14px;\n padding: 10px;\n border-bottom: 1px solid #EAEAEA;\n }\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return y=function(){return r},r}var Z=a.ZP.table(y());function k(){var n,e,r=(n=['\n position: relative;\n max-width: 100%;\n margin-bottom: 18px;\n\n &:before {\n height: 0;\n content: "";\n display: block;\n padding-bottom: 50%;\n }\n\n & > iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return k=function(){return r},r}var _=a.ZP.div(k());function S(){var n,e,r=(n=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return S=function(){return r},r}var E=a.ZP.img(S());function A(){var n,e,r=(n=["\n font-weight: 600;\n text-decoration: underline;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return A=function(){return r},r}var B=a.ZP.a(A()),T=function(n){var e=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(n.href);return(0,t.jsx)(B,{href:n.href,target:e?"_blank":"_self",children:n.children})};function N(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function W(){var n=N(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return W=function(){return n},n}function C(){var n=N(["\n margin-bottom: 7px;\n"]);return C=function(){return n},n}var F=a.ZP.ul(W()),X=a.ZP.li(C()),q=r(5193),D=r(9876);function $(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}var G=function(n){for(var e=1;e iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return k=function(){return r},r}var _=a.ZP.div(k());function S(){var n,e,r=(n=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return S=function(){return r},r}var E=a.ZP.img(S());function A(){var n,e,r=(n=["\n font-weight: 600;\n text-decoration: underline;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return A=function(){return r},r}var B=a.ZP.a(A()),T=function(n){var e=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(n.href);return(0,t.jsx)(B,{href:n.href,target:e?"_blank":"_self",children:n.children})};function N(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function W(){var n=N(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return W=function(){return n},n}function C(){var n=N(["\n margin-bottom: 7px;\n"]);return C=function(){return n},n}var F=a.ZP.ul(W()),X=a.ZP.li(C()),q=r(5193),D=r(1277);function $(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}var G=function(n){for(var e=1;e iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return _=function(){return t},t}var Z=c.ZP.div(_());function S(){var n,e,t=(n=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return S=function(){return t},t}var W=c.ZP.img(S());function E(){var n,e,t=(n=["\n font-weight: 600;\n text-decoration: underline;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return E=function(){return t},t}var D=c.ZP.a(E()),A=function(n){var e=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(n.href);return(0,r.jsx)(D,{href:n.href,target:e?"_blank":"_self",children:n.children})};function L(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function N(){var n=L(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return N=function(){return n},n}function T(){var n=L(["\n margin-bottom: 7px;\n"]);return T=function(){return n},n}var B=c.ZP.ul(N()),C=c.ZP.li(T()),F=t(5193),U=t(9876);function X(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}var q=function(n){for(var e=1;e iframe {\n overflow: hidden;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n'],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return _=function(){return t},t}var Z=c.ZP.div(_());function S(){var n,e,t=(n=["\n max-width: 100%;\n margin: 25px auto;\n display: block;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return S=function(){return t},t}var W=c.ZP.img(S());function E(){var n,e,t=(n=["\n font-weight: 600;\n text-decoration: underline;\n"],e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}})));return E=function(){return t},t}var D=c.ZP.a(E()),A=function(n){var e=/(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(n.href);return(0,r.jsx)(D,{href:n.href,target:e?"_blank":"_self",children:n.children})};function L(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function N(){var n=L(["\n margin-left: 40px;\n margin-bottom: 18px;\n \n ul {\n margin-top: 18px;\n }\n"]);return N=function(){return n},n}function T(){var n=L(["\n margin-bottom: 7px;\n"]);return T=function(){return n},n}var B=c.ZP.ul(N()),C=c.ZP.li(T()),F=t(5193),U=t(1277);function X(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}var q=function(n){for(var e=1;e
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran

Hello, I am Kamran Ahmed

I created roadmap.sh to help developers find their path if they are confused and help them grow in their career.

@kamranahmedse
kamranahmed.se@gmail.com

What is roadmap.sh?

Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding +

We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran

Hello, I am Kamran Ahmed

I created roadmap.sh to help developers find their path if they are confused and help them grow in their career.

@kamranahmedse
kamranahmed.se@gmail.com

What is roadmap.sh?

Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding developers. It started as a set of charts to guide the developers who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get more contributors involved.

What are the plans for roadmap.sh?

The website started off as @@ -45,4 +45,4 @@ decide to contribute.

Can I red anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not allowed.

What is the best way to contact you?

Tweet or send me a message @kamranahmedse or email me at kamranahmed.se@gmail.com. I get lots of messages so apologies in advance if you don't hear back -from me soon but I do reply to everyone.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +from me soon but I do reply to everyone.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/android.html b/android.html index a879e0559..1ff0b9c74 100644 --- a/android.html +++ b/android.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the roadmap if suitable.

There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where flutter, react-native, or NativeScript are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is react-native and I would recommend you to checkout the Frontend Developer Roadmap.

Complete Roadmap

Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.

Broken Down Version

Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.

Pick a Language

For the languages, you can develop android apps either by using Kotlin or Java.

Although, you can use both Kotlin and Java to develop native android apps, Google announced in 2019 to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice.

The Fundamentals

Install the Android Studio and learn the basics of Kotlin to get started.

We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.

Version Control Systems

Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but Git is the most common one these days.

Here are some of the resources to get you started. Feel free to google and find something else that you find easier.

Building an Application

Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them.

To learn more about the items listed in the image above, here are the links to the relevant docs

I would highly recommend watching this free course from google on Developing Android Apps with Kotlin. Also, here are some of the resources to learn more about the topics listed above.

Wrap Up

That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!

For any suggestions, improvements and feedback, feel free to submit an issue or reach out to me on twitter @kamranahmedse.




Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the roadmap if suitable.

There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where flutter, react-native, or NativeScript are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is react-native and I would recommend you to checkout the Frontend Developer Roadmap.

Complete Roadmap

Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.

Broken Down Version

Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.

Pick a Language

For the languages, you can develop android apps either by using Kotlin or Java.

Although, you can use both Kotlin and Java to develop native android apps, Google announced in 2019 to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice.

The Fundamentals

Install the Android Studio and learn the basics of Kotlin to get started.

We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.

Version Control Systems

Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but Git is the most common one these days.

Here are some of the resources to get you started. Feel free to google and find something else that you find easier.

Building an Application

Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them.

To learn more about the items listed in the image above, here are the links to the relevant docs

I would highly recommend watching this free course from google on Developing Android Apps with Kotlin. Also, here are some of the resources to learn more about the topics listed above.

Wrap Up

That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!

For any suggestions, improvements and feedback, feel free to submit an issue or reach out to me on twitter @kamranahmedse.




Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/android/android.html b/android/android.html index 67c0cca3e..cd6749da9 100644 --- a/android/android.html +++ b/android/android.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/android/interactive.html b/android/interactive.html index ac1f8b8fe..927fb34e5 100644 --- a/android/interactive.html +++ b/android/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/android/resources.html b/android/resources.html index c35480030..741b14504 100644 --- a/android/resources.html +++ b/android/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Android Developer

Step by step guide to becoming an Android developer in 2021

←All RoadmapsSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/angular.html b/angular.html index d9a95326e..0c13d98fd 100644 --- a/angular.html +++ b/angular.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

The intent of this guide is to give you an idea about the Angular ecosystem and to help guide your learning if you are confused. We have another roadmap on the Frontend Development that focuses on the frontend development if you are interested in that.

Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the picture if suitable.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

The intent of this guide is to give you an idea about the Angular ecosystem and to help guide your learning if you are confused. We have another roadmap on the Frontend Development that focuses on the frontend development if you are interested in that.

Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the picture if suitable.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/angular/angular.html b/angular/angular.html index bf6cd3c70..c26e89ce7 100644 --- a/angular/angular.html +++ b/angular/angular.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/angular/interactive.html b/angular/interactive.html index 6911f4fdf..d324c2546 100644 --- a/angular/interactive.html +++ b/angular/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/angular/resources.html b/angular/resources.html index c21ca5799..e9c04fde3 100644 --- a/angular/resources.html +++ b/angular/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Angular Developer

Everything that is there to learn about Angular and the ecosystem in 2021.

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/aws.html b/aws.html index 6f10aa056..489f92010 100644 --- a/aws.html +++ b/aws.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

Roadmap is not ready yet. Please check back later or subscribe to get notified.

While we prepare the roadmap, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

Roadmap is not ready yet. Please check back later or subscribe to get notified.

While we prepare the roadmap, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/aws/aws.html b/aws/aws.html index 1a9a76376..d374344de 100644 --- a/aws/aws.html +++ b/aws/aws.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/aws/interactive.html b/aws/interactive.html index a83b3da3a..fb4418ed9 100644 --- a/aws/interactive.html +++ b/aws/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/aws/resources.html b/aws/resources.html index 625c834a1..4e9076c1c 100644 --- a/aws/resources.html +++ b/aws/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

AWS

Everything that is there to learn about AWS and the ecosystem in 2021.

←All RoadmapsSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/backend.html b/backend.html index 5064d57f6..1e3c341a0 100644 --- a/backend.html +++ b/backend.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe
Backend Developer

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe
Backend Developer

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/backend/backend.html b/backend/backend.html index a4dc33149..deacf9895 100644 --- a/backend/backend.html +++ b/backend/backend.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/backend/interactive.html b/backend/interactive.html index 6f345066b..f890902d3 100644 --- a/backend/interactive.html +++ b/backend/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/backend/resources.html b/backend/resources.html index e6fe9b85e..e0ee5920b 100644 --- a/backend/resources.html +++ b/backend/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Backend Developer

Step by step guide to becoming a modern backend developer in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/devops.html b/devops.html index 130e194e6..bb9408d1d 100644 --- a/devops.html +++ b/devops.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe
DevOps Roadmap

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe
DevOps Roadmap

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/devops/devops.html b/devops/devops.html index 3dced6425..d142e719e 100644 --- a/devops/devops.html +++ b/devops/devops.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/devops/interactive.html b/devops/interactive.html index a62cccbd7..10f0cb912 100644 --- a/devops/interactive.html +++ b/devops/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/devops/resources.html b/devops/resources.html index 8aaf3476d..092d34a08 100644 --- a/devops/resources.html +++ b/devops/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

DevOps Roadmap

Step by step guide for DevOps, SRE or any other Operations Role in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend.html b/frontend.html index b62966672..cffa225e4 100644 --- a/frontend.html +++ b/frontend.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools.html b/frontend/build-tools.html index a56b30360..70b3b9116 100644 --- a/frontend/build-tools.html +++ b/frontend/build-tools.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Build tools

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Build tools

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:linters-formatters.html b/frontend/build-tools:linters-formatters.html index a43351bf3..399d2b390 100644 --- a/frontend/build-tools:linters-formatters.html +++ b/frontend/build-tools:linters-formatters.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Linters formatters

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Linters formatters

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:linters-formatters:eslint.html b/frontend/build-tools:linters-formatters:eslint.html index 8405dce8f..06b69ca6c 100644 --- a/frontend/build-tools:linters-formatters:eslint.html +++ b/frontend/build-tools:linters-formatters:eslint.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Eslint

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Eslint

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:linters-formatters:prettier.html b/frontend/build-tools:linters-formatters:prettier.html index e7db72577..bcb91ee7d 100644 --- a/frontend/build-tools:linters-formatters:prettier.html +++ b/frontend/build-tools:linters-formatters:prettier.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Prettier

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Prettier

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:linters-formatters:standardjs.html b/frontend/build-tools:linters-formatters:standardjs.html index a24c9ca3f..27b71a1b0 100644 --- a/frontend/build-tools:linters-formatters:standardjs.html +++ b/frontend/build-tools:linters-formatters:standardjs.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Standardjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Standardjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers.html b/frontend/build-tools:module-bundlers.html index 0c2d01db1..6123322d2 100644 --- a/frontend/build-tools:module-bundlers.html +++ b/frontend/build-tools:module-bundlers.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Module bundlers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Module bundlers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers:esbuild.html b/frontend/build-tools:module-bundlers:esbuild.html index d514be157..173e92e40 100644 --- a/frontend/build-tools:module-bundlers:esbuild.html +++ b/frontend/build-tools:module-bundlers:esbuild.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Esbuild

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Esbuild

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers:parcel.html b/frontend/build-tools:module-bundlers:parcel.html index 95a42f1a3..e3cc1831a 100644 --- a/frontend/build-tools:module-bundlers:parcel.html +++ b/frontend/build-tools:module-bundlers:parcel.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Parcel

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Parcel

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers:rollup.html b/frontend/build-tools:module-bundlers:rollup.html index 21b74d8b6..6d4293e0d 100644 --- a/frontend/build-tools:module-bundlers:rollup.html +++ b/frontend/build-tools:module-bundlers:rollup.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Rollup

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Rollup

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers:vite.html b/frontend/build-tools:module-bundlers:vite.html index 77e58115c..eec509ff0 100644 --- a/frontend/build-tools:module-bundlers:vite.html +++ b/frontend/build-tools:module-bundlers:vite.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vite

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vite

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:module-bundlers:webpack.html b/frontend/build-tools:module-bundlers:webpack.html index 2e930dc1f..d2fefda39 100644 --- a/frontend/build-tools:module-bundlers:webpack.html +++ b/frontend/build-tools:module-bundlers:webpack.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Webpack

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Webpack

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:task-runners.html b/frontend/build-tools:task-runners.html index 6c848bbc3..7098337fc 100644 --- a/frontend/build-tools:task-runners.html +++ b/frontend/build-tools:task-runners.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Task runners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Task runners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/build-tools:task-runners:npm-scripts.html b/frontend/build-tools:task-runners:npm-scripts.html index cc99a6d15..5f741a186 100644 --- a/frontend/build-tools:task-runners:npm-scripts.html +++ b/frontend/build-tools:task-runners:npm-scripts.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Npm scripts

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Npm scripts

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-architecture.html b/frontend/css-architecture.html index 757f09c64..cdae647a8 100644 --- a/frontend/css-architecture.html +++ b/frontend/css-architecture.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css architecture

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css architecture

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-architecture:bem.html b/frontend/css-architecture:bem.html index f7ee44ddf..59b7cc196 100644 --- a/frontend/css-architecture:bem.html +++ b/frontend/css-architecture:bem.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bem

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bem

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-architecture:oocss.html b/frontend/css-architecture:oocss.html index a7a849a7d..7cfe7d106 100644 --- a/frontend/css-architecture:oocss.html +++ b/frontend/css-architecture:oocss.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Oocss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Oocss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-architecture:smacss.html b/frontend/css-architecture:smacss.html index ff6d11775..58aa7082d 100644 --- a/frontend/css-architecture:smacss.html +++ b/frontend/css-architecture:smacss.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Smacss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Smacss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks.html b/frontend/css-frameworks.html index 75db410ca..fab89bb7a 100644 --- a/frontend/css-frameworks.html +++ b/frontend/css-frameworks.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css frameworks

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css frameworks

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:css-first.html b/frontend/css-frameworks:css-first.html index d449c4248..a84b945af 100644 --- a/frontend/css-frameworks:css-first.html +++ b/frontend/css-frameworks:css-first.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css first

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css first

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:css-first:bootstrap.html b/frontend/css-frameworks:css-first:bootstrap.html index eedf1fddc..175ac19d8 100644 --- a/frontend/css-frameworks:css-first:bootstrap.html +++ b/frontend/css-frameworks:css-first:bootstrap.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bootstrap

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bootstrap

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:css-first:bulma.html b/frontend/css-frameworks:css-first:bulma.html index 66d28119c..b71f65402 100644 --- a/frontend/css-frameworks:css-first:bulma.html +++ b/frontend/css-frameworks:css-first:bulma.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bulma

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bulma

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:js-first.html b/frontend/css-frameworks:js-first.html index 3d53985db..2f1fba8af 100644 --- a/frontend/css-frameworks:js-first.html +++ b/frontend/css-frameworks:js-first.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Js first

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Js first

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:js-first:chakra-ui.html b/frontend/css-frameworks:js-first:chakra-ui.html index f483bd058..0e5091f08 100644 --- a/frontend/css-frameworks:js-first:chakra-ui.html +++ b/frontend/css-frameworks:js-first:chakra-ui.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Chakra ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Chakra ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:js-first:material-ui.html b/frontend/css-frameworks:js-first:material-ui.html index aa6c72f06..7d6113a7b 100644 --- a/frontend/css-frameworks:js-first:material-ui.html +++ b/frontend/css-frameworks:js-first:material-ui.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Material ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Material ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:js-first:radix-ui.html b/frontend/css-frameworks:js-first:radix-ui.html index 6bd654371..19530be2a 100644 --- a/frontend/css-frameworks:js-first:radix-ui.html +++ b/frontend/css-frameworks:js-first:radix-ui.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Radix ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Radix ui

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-frameworks:js-first:tailwind-css.html b/frontend/css-frameworks:js-first:tailwind-css.html index b1e295dfe..81c213164 100644 --- a/frontend/css-frameworks:js-first:tailwind-css.html +++ b/frontend/css-frameworks:js-first:tailwind-css.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Tailwind CSS

CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Free Content

Framework WebsiteTailwind Website

YouTube ChannelOfficial Screencasts

WatchShould You Use Tailwind CSS?

ReadTailwind CSS: An Introduction

CourseTailwind CSS Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Tailwind CSS

CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Free Content

Framework WebsiteTailwind Website

YouTube ChannelOfficial Screencasts

WatchShould You Use Tailwind CSS?

ReadTailwind CSS: An Introduction

CourseTailwind CSS Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-preprocessors.html b/frontend/css-preprocessors.html index 577f595d0..7d86ac37f 100644 --- a/frontend/css-preprocessors.html +++ b/frontend/css-preprocessors.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css preprocessors

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css preprocessors

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-preprocessors:less.html b/frontend/css-preprocessors:less.html index a4d3fba96..3ffb936af 100644 --- a/frontend/css-preprocessors:less.html +++ b/frontend/css-preprocessors:less.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Less

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Less

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-preprocessors:postcss.html b/frontend/css-preprocessors:postcss.html index 0f3f79d39..5268d4904 100644 --- a/frontend/css-preprocessors:postcss.html +++ b/frontend/css-preprocessors:postcss.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Postcss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Postcss

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css-preprocessors:sass.html b/frontend/css-preprocessors:sass.html index ec7f5ac3c..202e4fb4c 100644 --- a/frontend/css-preprocessors:sass.html +++ b/frontend/css-preprocessors:sass.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Sass

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Sass

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css.html b/frontend/css.html index 92bcc9b8e..f9692f426 100644 --- a/frontend/css.html +++ b/frontend/css.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

CSS

CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Free Content

ReadW3Schools — Learn CSS

ReadfreeCodeCamp — Responsive Web Design

ReadLearn to Code HTML & CSS

CourseCSS Crash Course For Absolute Beginners

CourseHTML and CSS Tutorial

CourseCSS Masterclass - Tutorial & Course for Beginners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

CSS

CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Free Content

ReadW3Schools — Learn CSS

ReadfreeCodeCamp — Responsive Web Design

ReadLearn to Code HTML & CSS

CourseCSS Crash Course For Absolute Beginners

CourseHTML and CSS Tutorial

CourseCSS Masterclass - Tutorial & Course for Beginners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css:learn-the-basics.html b/frontend/css:learn-the-basics.html index 7f9b6104b..dde5dbbb6 100644 --- a/frontend/css:learn-the-basics.html +++ b/frontend/css:learn-the-basics.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

CSS Basics

CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Free Content

ReadW3Schools — Learn CSS

ReadfreeCodeCamp — Responsive Web Design

ReadLearn to Code HTML & CSS

CourseCSS Crash Course For Absolute Beginners

CourseHTML and CSS Tutorial

CourseCSS Masterclass - Tutorial & Course for Beginners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

CSS Basics

CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Free Content

ReadW3Schools — Learn CSS

ReadfreeCodeCamp — Responsive Web Design

ReadLearn to Code HTML & CSS

CourseCSS Crash Course For Absolute Beginners

CourseHTML and CSS Tutorial

CourseCSS Masterclass - Tutorial & Course for Beginners

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css:making-layouts.html b/frontend/css:making-layouts.html index 120732133..1d81e90cf 100644 --- a/frontend/css:making-layouts.html +++ b/frontend/css:making-layouts.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Making layouts

Free Content

ReadLearn and Practice Flexbox

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Making layouts

Free Content

ReadLearn and Practice Flexbox

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/css:responsive-design-and-media-queries.html b/frontend/css:responsive-design-and-media-queries.html index 11cd23420..933344015 100644 --- a/frontend/css:responsive-design-and-media-queries.html +++ b/frontend/css:responsive-design-and-media-queries.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Responsive Design

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Responsive Design

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/desktop-applications.html b/frontend/desktop-applications.html index 3c7e00523..1bcaca904 100644 --- a/frontend/desktop-applications.html +++ b/frontend/desktop-applications.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Desktop applications

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Desktop applications

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/desktop-applications:carlo.html b/frontend/desktop-applications:carlo.html index a9ee586d0..698c0111e 100644 --- a/frontend/desktop-applications:carlo.html +++ b/frontend/desktop-applications:carlo.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Carlo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Carlo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/desktop-applications:electron.html b/frontend/desktop-applications:electron.html index 30f074598..8eefd193f 100644 --- a/frontend/desktop-applications:electron.html +++ b/frontend/desktop-applications:electron.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Electron

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Electron

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/desktop-applications:proton-native.html b/frontend/desktop-applications:proton-native.html index ec59288dd..1f1e7338a 100644 --- a/frontend/desktop-applications:proton-native.html +++ b/frontend/desktop-applications:proton-native.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Proton native

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Proton native

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/graphql.html b/frontend/graphql.html index 75fd355dd..40a8ca908 100644 --- a/frontend/graphql.html +++ b/frontend/graphql.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Graphql

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Graphql

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/graphql:apollo.html b/frontend/graphql:apollo.html index a9ef6260c..aa28ff676 100644 --- a/frontend/graphql:apollo.html +++ b/frontend/graphql:apollo.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Apollo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Apollo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/graphql:relay-modern.html b/frontend/graphql:relay-modern.html index 31d35f638..d8a3a0e23 100644 --- a/frontend/graphql:relay-modern.html +++ b/frontend/graphql:relay-modern.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Relay modern

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Relay modern

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/home.html b/frontend/home.html index dfbb6176f..ec4ba690f 100644 --- a/frontend/home.html +++ b/frontend/home.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html.html b/frontend/html.html index 228689c45..0831d82cf 100644 --- a/frontend/html.html +++ b/frontend/html.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

HTML

HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.

Free Content

ReadW3Schools: Learn HTML

CourseHTML Full Course - Build a Website Tutorial

CourseHTML Tutorial for Beginners: HTML Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

HTML

HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.

Free Content

ReadW3Schools: Learn HTML

CourseHTML Full Course - Build a Website Tutorial

CourseHTML Tutorial for Beginners: HTML Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:accessibility.html b/frontend/html:accessibility.html index 037d7563d..caaec396b 100644 --- a/frontend/html:accessibility.html +++ b/frontend/html:accessibility.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Accessibility

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Accessibility

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:conventions-and-best-practices.html b/frontend/html:conventions-and-best-practices.html index 33ccbb9cb..9399ec20d 100644 --- a/frontend/html:conventions-and-best-practices.html +++ b/frontend/html:conventions-and-best-practices.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Conventions and best practices

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Conventions and best practices

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:forms-and-validations.html b/frontend/html:forms-and-validations.html index 81a7f7aad..6a423bfd3 100644 --- a/frontend/html:forms-and-validations.html +++ b/frontend/html:forms-and-validations.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Forms and validations

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Forms and validations

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:learn-the-basics.html b/frontend/html:learn-the-basics.html index 1d33ffa11..613c6f926 100644 --- a/frontend/html:learn-the-basics.html +++ b/frontend/html:learn-the-basics.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

HTML Basics

HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.

Free Content

ReadW3Schools: Learn HTML

CourseHTML Full Course - Build a Website Tutorial

CourseHTML Tutorial for Beginners: HTML Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

HTML Basics

HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.

Free Content

ReadW3Schools: Learn HTML

CourseHTML Full Course - Build a Website Tutorial

CourseHTML Tutorial for Beginners: HTML Crash Course

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:seo-basics.html b/frontend/html:seo-basics.html index be47c5361..73f55b8aa 100644 --- a/frontend/html:seo-basics.html +++ b/frontend/html:seo-basics.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Basics of SEO

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Basics of SEO

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/html:writing-semantic-html.html b/frontend/html:writing-semantic-html.html index 2b891151e..afb7a9d7b 100644 --- a/frontend/html:writing-semantic-html.html +++ b/frontend/html:writing-semantic-html.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Semantic HTML

Semantic element clearly describes its meaning to both the browser and the developer.

Free Content

ReadW3Schools: Semantic HTML

ReadHow To Write Semantic HTML

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Semantic HTML

Semantic element clearly describes its meaning to both the browser and the developer.

Free Content

ReadW3Schools: Semantic HTML

ReadHow To Write Semantic HTML

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/interactive.html b/frontend/interactive.html index d01646027..6dfbcac9d 100644 --- a/frontend/interactive.html +++ b/frontend/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet.html b/frontend/internet.html index dfcf78517..1e1358dc0 100644 --- a/frontend/internet.html +++ b/frontend/internet.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Internet

The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

Free Content

ReadThe Internet Explained

ReadHow Does the Internet Work?

WatchIntroduction to Internet

WatchHow does the Internet work?

WatchHow the Internet Works in 5 Minutes

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Internet

The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

Free Content

ReadThe Internet Explained

ReadHow Does the Internet Work?

WatchIntroduction to Internet

WatchHow does the Internet work?

WatchHow the Internet Works in 5 Minutes

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:browsers-and-how-they-work.html b/frontend/internet:browsers-and-how-they-work.html index 92157c7bf..dcaf977bf 100644 --- a/frontend/internet:browsers-and-how-they-work.html +++ b/frontend/internet:browsers-and-how-they-work.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Browsers

A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.

Free Content

ReadHow Browsers Work

ReadRole of Rendering Engine in Browsers

ReadPopulating the Page: How Browsers Work

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Browsers

A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.

Free Content

ReadHow Browsers Work

ReadRole of Rendering Engine in Browsers

ReadPopulating the Page: How Browsers Work

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:dns-and-how-it-works.html b/frontend/internet:dns-and-how-it-works.html index 68a934ba4..2272995a2 100644 --- a/frontend/internet:dns-and-how-it-works.html +++ b/frontend/internet:dns-and-how-it-works.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

DNS

The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.

Free Content

ReadWhat is DNS?

WatchDNS and How does it Work?

WatchDNS Records

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

DNS

The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.

Free Content

ReadWhat is DNS?

WatchDNS and How does it Work?

WatchDNS Records

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:how-does-the-internet-work.html b/frontend/internet:how-does-the-internet-work.html index 91b948686..f66c3210d 100644 --- a/frontend/internet:how-does-the-internet-work.html +++ b/frontend/internet:how-does-the-internet-work.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Internet

The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

Free Content

ReadThe Internet Explained

ReadHow Does the Internet Work?

WatchIntroduction to Internet

WatchHow does the Internet work?

WatchHow the Internet Works in 5 Minutes

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Internet

The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

Free Content

ReadThe Internet Explained

ReadHow Does the Internet Work?

WatchIntroduction to Internet

WatchHow does the Internet work?

WatchHow the Internet Works in 5 Minutes

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:what-is-domain-name.html b/frontend/internet:what-is-domain-name.html index 8ec67daf7..ac455059a 100644 --- a/frontend/internet:what-is-domain-name.html +++ b/frontend/internet:what-is-domain-name.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Domain Name

A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.

Free Content

ReadWhat is a Domain Name?

ReadWhat is a Domain Name? | Domain name vs. URL

WatchA Beginners Guide to How Domain Names Work

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Domain Name

A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.

Free Content

ReadWhat is a Domain Name?

ReadWhat is a Domain Name? | Domain name vs. URL

WatchA Beginners Guide to How Domain Names Work

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:what-is-hosting.html b/frontend/internet:what-is-hosting.html index fc27f2610..cff3d3a34 100644 --- a/frontend/internet:what-is-hosting.html +++ b/frontend/internet:what-is-hosting.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Hosting

Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.

Free Content

WatchWhat Is Web Hosting? Explained

WatchDifferent Types of Web Hosting Explained

WatchWhere to Host a Fullstack Project on a Budget

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Hosting

Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.

Free Content

WatchWhat Is Web Hosting? Explained

WatchDifferent Types of Web Hosting Explained

WatchWhere to Host a Fullstack Project on a Budget

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/internet:what-is-http.html b/frontend/internet:what-is-http.html index c56bdef05..14ae910e3 100644 --- a/frontend/internet:what-is-http.html +++ b/frontend/internet:what-is-http.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

What is HTTP?

HTTP is the TCP/IP based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.

Free Content

ReadWhat is HTTP?

ReadAn overview of HTTP

ReadJourney to HTTP/2

WatchHTTP Crash Course & Exploration

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

What is HTTP?

HTTP is the TCP/IP based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.

Free Content

ReadWhat is HTTP?

ReadAn overview of HTTP

ReadJourney to HTTP/2

WatchHTTP Crash Course & Exploration

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript.html b/frontend/javascript.html index bdac7cdc9..da21c3b87 100644 --- a/frontend/javascript.html +++ b/frontend/javascript.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Javascript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Javascript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript:concepts.html b/frontend/javascript:concepts.html index 1462e2240..375e9c953 100644 --- a/frontend/javascript:concepts.html +++ b/frontend/javascript:concepts.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Concepts

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Concepts

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript:es6-and-modular-javascript.html b/frontend/javascript:es6-and-modular-javascript.html index 7ff5e095a..69e9cc423 100644 --- a/frontend/javascript:es6-and-modular-javascript.html +++ b/frontend/javascript:es6-and-modular-javascript.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Es6 and modular javascript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Es6 and modular javascript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript:learn-dom-manipulation.html b/frontend/javascript:learn-dom-manipulation.html index e1ffdcea5..15a5978b2 100644 --- a/frontend/javascript:learn-dom-manipulation.html +++ b/frontend/javascript:learn-dom-manipulation.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Learn dom manipulation

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Learn dom manipulation

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript:learn-fetch-api-ajax-xhr.html b/frontend/javascript:learn-fetch-api-ajax-xhr.html index b9c23cf34..8c7ed712f 100644 --- a/frontend/javascript:learn-fetch-api-ajax-xhr.html +++ b/frontend/javascript:learn-fetch-api-ajax-xhr.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Learn fetch api ajax xhr

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Learn fetch api ajax xhr

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/javascript:syntax-and-basic-constructs.html b/frontend/javascript:syntax-and-basic-constructs.html index 073fa976a..f7a7651b2 100644 --- a/frontend/javascript:syntax-and-basic-constructs.html +++ b/frontend/javascript:syntax-and-basic-constructs.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Syntax and basic constructs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Syntax and basic constructs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/mobile-applications.html b/frontend/mobile-applications.html index ae0ab75e5..eefc72b08 100644 --- a/frontend/mobile-applications.html +++ b/frontend/mobile-applications.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Mobile applications

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Mobile applications

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/mobile-applications:flutter.html b/frontend/mobile-applications:flutter.html index fcbead618..8037d2e76 100644 --- a/frontend/mobile-applications:flutter.html +++ b/frontend/mobile-applications:flutter.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Flutter

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter consists of two important parts:

  • An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
  • A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs. -To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

Dart focuses on front-end development, and you can use it to create mobile and web applications.

If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.

Free Content

Official WebsiteFlutter Website

ReadFlutter Tutorial

CourseFlutter Tutorial for Beginners

ReadFlutter Tutorial

ReadLearn Dart Programming

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Flutter

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter consists of two important parts:

  • An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
  • A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs. +To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

Dart focuses on front-end development, and you can use it to create mobile and web applications.

If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.

Free Content

Official WebsiteFlutter Website

ReadFlutter Tutorial

CourseFlutter Tutorial for Beginners

ReadFlutter Tutorial

ReadLearn Dart Programming

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/mobile-applications:ionic.html b/frontend/mobile-applications:ionic.html index 0f7b37d88..e7b5062b4 100644 --- a/frontend/mobile-applications:ionic.html +++ b/frontend/mobile-applications:ionic.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Ionic

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Ionic

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/mobile-applications:nativescript.html b/frontend/mobile-applications:nativescript.html index ba40da5b7..898f823e5 100644 --- a/frontend/mobile-applications:nativescript.html +++ b/frontend/mobile-applications:nativescript.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nativescript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nativescript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/mobile-applications:react-native.html b/frontend/mobile-applications:react-native.html index 84725cf82..8a1c0b337 100644 --- a/frontend/mobile-applications:react-native.html +++ b/frontend/mobile-applications:react-native.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React native

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React native

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/modern-css.html b/frontend/modern-css.html index 220c83566..a4a500eae 100644 --- a/frontend/modern-css.html +++ b/frontend/modern-css.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Modern css

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Modern css

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/modern-css:css-modules.html b/frontend/modern-css:css-modules.html index ebd98f167..11be0e3bd 100644 --- a/frontend/modern-css:css-modules.html +++ b/frontend/modern-css:css-modules.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css modules

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Css modules

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/modern-css:emotion.html b/frontend/modern-css:emotion.html index 15b4ed485..c42b8420d 100644 --- a/frontend/modern-css:emotion.html +++ b/frontend/modern-css:emotion.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Emotion

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Emotion

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/modern-css:styled-components.html b/frontend/modern-css:styled-components.html index 1bd5521c8..5cdd64350 100644 --- a/frontend/modern-css:styled-components.html +++ b/frontend/modern-css:styled-components.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Styled components

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Styled components

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/modern-css:styled-jsx.html b/frontend/modern-css:styled-jsx.html index f5c1f7615..4f03d90a4 100644 --- a/frontend/modern-css:styled-jsx.html +++ b/frontend/modern-css:styled-jsx.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Styled jsx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Styled jsx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/package-managers.html b/frontend/package-managers.html index 34e0013ad..5e0160c74 100644 --- a/frontend/package-managers.html +++ b/frontend/package-managers.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Package managers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Package managers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/package-managers:npm.html b/frontend/package-managers:npm.html index f9ae83498..a4c9b1f5d 100644 --- a/frontend/package-managers:npm.html +++ b/frontend/package-managers:npm.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Npm

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Npm

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/package-managers:yarn.html b/frontend/package-managers:yarn.html index ee3cc0047..9719e52fe 100644 --- a/frontend/package-managers:yarn.html +++ b/frontend/package-managers:yarn.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Yarn

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Yarn

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework.html b/frontend/pick-a-framework.html index 3e344648e..fff1a492f 100644 --- a/frontend/pick-a-framework.html +++ b/frontend/pick-a-framework.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Pick a framework

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Pick a framework

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:angular.html b/frontend/pick-a-framework:angular.html index 9ce374d97..820d5a8c0 100644 --- a/frontend/pick-a-framework:angular.html +++ b/frontend/pick-a-framework:angular.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Angular

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Angular

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:angular:ngrx.html b/frontend/pick-a-framework:angular:ngrx.html index cb94298f8..576cd2d7e 100644 --- a/frontend/pick-a-framework:angular:ngrx.html +++ b/frontend/pick-a-framework:angular:ngrx.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Ngrx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Ngrx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:angular:rxjs.html b/frontend/pick-a-framework:angular:rxjs.html index acd6012e9..982b74f27 100644 --- a/frontend/pick-a-framework:angular:rxjs.html +++ b/frontend/pick-a-framework:angular:rxjs.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Rxjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Rxjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:react-js.html b/frontend/pick-a-framework:react-js.html index 16fd45a9a..43e17005c 100644 --- a/frontend/pick-a-framework:react-js.html +++ b/frontend/pick-a-framework:react-js.html @@ -3,9 +3,9 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React

React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

Free Content

Framework WebsiteReact Website

ReadOfficial Getting Started

CourseThe Beginner's Guide to React

CourseReact JS Course for Beginners

WatchUnderstanding React's UI Rendering Process

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React

React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

Free Content

Framework WebsiteReact Website

ReadOfficial Getting Started

CourseThe Beginner's Guide to React

CourseReact JS Course for Beginners

WatchUnderstanding React's UI Rendering Process

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:react-js:mobx.html b/frontend/pick-a-framework:react-js:mobx.html index fc8247512..4449a8957 100644 --- a/frontend/pick-a-framework:react-js:mobx.html +++ b/frontend/pick-a-framework:react-js:mobx.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Mobx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Mobx

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:react-js:recoil.html b/frontend/pick-a-framework:react-js:recoil.html index 0495a29a2..35c7bb364 100644 --- a/frontend/pick-a-framework:react-js:recoil.html +++ b/frontend/pick-a-framework:react-js:recoil.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Recoil

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Recoil

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:react-js:redux.html b/frontend/pick-a-framework:react-js:redux.html index a260494c6..3916f5332 100644 --- a/frontend/pick-a-framework:react-js:redux.html +++ b/frontend/pick-a-framework:react-js:redux.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Redux

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Redux

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:vue-js.html b/frontend/pick-a-framework:vue-js.html index 5e7764799..bb9d1bc07 100644 --- a/frontend/pick-a-framework:vue-js.html +++ b/frontend/pick-a-framework:vue-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vue js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vue js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/pick-a-framework:vue-js:vuex.html b/frontend/pick-a-framework:vue-js:vuex.html index 7c083387f..e23012478 100644 --- a/frontend/pick-a-framework:vue-js:vuex.html +++ b/frontend/pick-a-framework:vue-js:vuex.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vuex

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vuex

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/progressive-web-apps.html b/frontend/progressive-web-apps.html index c6b11505d..49ef37676 100644 --- a/frontend/progressive-web-apps.html +++ b/frontend/progressive-web-apps.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Progressive web apps

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Progressive web apps

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/progressive-web-apps:apis.html b/frontend/progressive-web-apps:apis.html index 219a8d629..f17863e03 100644 --- a/frontend/progressive-web-apps:apis.html +++ b/frontend/progressive-web-apps:apis.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Apis

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Apis

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/progressive-web-apps:performance.html b/frontend/progressive-web-apps:performance.html index 168001b17..4fd2412ae 100644 --- a/frontend/progressive-web-apps:performance.html +++ b/frontend/progressive-web-apps:performance.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Performance

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Performance

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/repo-hosting-services.html b/frontend/repo-hosting-services.html index d504b0fc0..5396853bf 100644 --- a/frontend/repo-hosting-services.html +++ b/frontend/repo-hosting-services.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Repo hosting services

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Repo hosting services

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/repo-hosting-services:bitbucket.html b/frontend/repo-hosting-services:bitbucket.html index 6ba01468a..1f549dff2 100644 --- a/frontend/repo-hosting-services:bitbucket.html +++ b/frontend/repo-hosting-services:bitbucket.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bitbucket

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Bitbucket

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/repo-hosting-services:github.html b/frontend/repo-hosting-services:github.html index eaa7cfe1f..24655e919 100644 --- a/frontend/repo-hosting-services:github.html +++ b/frontend/repo-hosting-services:github.html @@ -3,11 +3,11 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Github

GitHub is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

Free Content

ReadGitHub: Quickstart

WatchWhat is GitHub?

WatchGit vs. GitHub: What's the difference?

WatchGit and GitHub for Beginners

WatchGit and GitHub - CS50 Beyond 2019

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Github

GitHub is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

Free Content

ReadGitHub: Quickstart

WatchWhat is GitHub?

WatchGit vs. GitHub: What's the difference?

WatchGit and GitHub for Beginners

WatchGit and GitHub - CS50 Beyond 2019

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/repo-hosting-services:gitlab.html b/frontend/repo-hosting-services:gitlab.html index 74f1faf4a..093e130a4 100644 --- a/frontend/repo-hosting-services:gitlab.html +++ b/frontend/repo-hosting-services:gitlab.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gitlab

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gitlab

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/resources.html b/frontend/resources.html index 44cac6d22..e33f16484 100644 --- a/frontend/resources.html +++ b/frontend/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

This page is incomplete and is being worked upon. Please check back later or subscribe / follow me on twitter to get notified. Also, feel free to contribute by suggesting the resources in the issues.

Become a Frontend Developer

Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way.

Internet and how it works?

Get the basic understanding of internet, browsers, networks and other relevant knowledge.

Learn HTML

HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them.

Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.

Style your pages with CSS

With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.

Basics of JavaScript

JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.

Version Control Systems and Git

Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.

In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.

Now that you know what git is go ahead and create an account on GitHub and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.

Modern JavaScript

In this section you will learn how to use package managers and get started with the "modern JavaScript".







Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Frontend Developer

Step by step guide to becoming a modern frontend developer in 2021

←All RoadmapsDownloadSubscribe

NewResources are here, try clicking any nodes.

This page is incomplete and is being worked upon. Please check back later or subscribe / follow me on twitter to get notified. Also, feel free to contribute by suggesting the resources in the issues.

Become a Frontend Developer

Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way.

Internet and how it works?

Get the basic understanding of internet, browsers, networks and other relevant knowledge.

Learn HTML

HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them.

Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.

Style your pages with CSS

With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.

Basics of JavaScript

JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.

Version Control Systems and Git

Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.

In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.

Now that you know what git is go ahead and create an account on GitHub and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.

Modern JavaScript

In this section you will learn how to use package managers and get started with the "modern JavaScript".







Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering.html b/frontend/server-side-rendering.html index 3f767ff0c..aff47ff33 100644 --- a/frontend/server-side-rendering.html +++ b/frontend/server-side-rendering.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Server side rendering

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Server side rendering

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:angular.html b/frontend/server-side-rendering:angular.html index 9e8ee37fc..b16e1d653 100644 --- a/frontend/server-side-rendering:angular.html +++ b/frontend/server-side-rendering:angular.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Angular

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Angular

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:angular:universal.html b/frontend/server-side-rendering:angular:universal.html index 012657504..717a394df 100644 --- a/frontend/server-side-rendering:angular:universal.html +++ b/frontend/server-side-rendering:angular:universal.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Universal

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Universal

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:react-js.html b/frontend/server-side-rendering:react-js.html index e4ccd30f9..99a324b7c 100644 --- a/frontend/server-side-rendering:react-js.html +++ b/frontend/server-side-rendering:react-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:react-js:after-js.html b/frontend/server-side-rendering:react-js:after-js.html index 8403d0f39..0398dec8c 100644 --- a/frontend/server-side-rendering:react-js:after-js.html +++ b/frontend/server-side-rendering:react-js:after-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

After js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

After js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:react-js:next-js.html b/frontend/server-side-rendering:react-js:next-js.html index c35b64f55..773591233 100644 --- a/frontend/server-side-rendering:react-js:next-js.html +++ b/frontend/server-side-rendering:react-js:next-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Next js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Next js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:vue-js.html b/frontend/server-side-rendering:vue-js.html index a98943678..70cd58626 100644 --- a/frontend/server-side-rendering:vue-js.html +++ b/frontend/server-side-rendering:vue-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vue js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vue js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/server-side-rendering:vue-js:nuxt-js.html b/frontend/server-side-rendering:vue-js:nuxt-js.html index 3219241cf..0fbc02daa 100644 --- a/frontend/server-side-rendering:vue-js:nuxt-js.html +++ b/frontend/server-side-rendering:vue-js:nuxt-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nuxt js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nuxt js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators.html b/frontend/static-site-generators.html index c8fb3a85a..3dbe1c9ce 100644 --- a/frontend/static-site-generators.html +++ b/frontend/static-site-generators.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Static site generators

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Static site generators

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:eleventy.html b/frontend/static-site-generators:eleventy.html index a619d65fe..da72523fe 100644 --- a/frontend/static-site-generators:eleventy.html +++ b/frontend/static-site-generators:eleventy.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Eleventy

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Eleventy

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:gatsbyjs.html b/frontend/static-site-generators:gatsbyjs.html index cbe17fced..0f91753e0 100644 --- a/frontend/static-site-generators:gatsbyjs.html +++ b/frontend/static-site-generators:gatsbyjs.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gatsbyjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gatsbyjs

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:gridsome.html b/frontend/static-site-generators:gridsome.html index 0a9cf0be8..ceb58c25d 100644 --- a/frontend/static-site-generators:gridsome.html +++ b/frontend/static-site-generators:gridsome.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gridsome

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Gridsome

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:hugo.html b/frontend/static-site-generators:hugo.html index a2ff7d4dc..5e3f8a501 100644 --- a/frontend/static-site-generators:hugo.html +++ b/frontend/static-site-generators:hugo.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Hugo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Hugo

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:jekyll.html b/frontend/static-site-generators:jekyll.html index 21a864d68..a78dc8a4e 100644 --- a/frontend/static-site-generators:jekyll.html +++ b/frontend/static-site-generators:jekyll.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Jekyll

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Jekyll

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:next-js.html b/frontend/static-site-generators:next-js.html index eeb2e88de..87554d106 100644 --- a/frontend/static-site-generators:next-js.html +++ b/frontend/static-site-generators:next-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Next js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Next js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:nuxt-js.html b/frontend/static-site-generators:nuxt-js.html index 6e754d20c..cf35969a0 100644 --- a/frontend/static-site-generators:nuxt-js.html +++ b/frontend/static-site-generators:nuxt-js.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nuxt js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Nuxt js

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/static-site-generators:vuepress.html b/frontend/static-site-generators:vuepress.html index 27fff9d4e..be0760cf4 100644 --- a/frontend/static-site-generators:vuepress.html +++ b/frontend/static-site-generators:vuepress.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vuepress

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Vuepress

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps.html b/frontend/testing-your-apps.html index a1b6d747e..17c739e85 100644 --- a/frontend/testing-your-apps.html +++ b/frontend/testing-your-apps.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Testing your apps

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Testing your apps

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps:cypress.html b/frontend/testing-your-apps:cypress.html index 9daf23a6a..09ea8c674 100644 --- a/frontend/testing-your-apps:cypress.html +++ b/frontend/testing-your-apps:cypress.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Cypress

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Cypress

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps:enzyme.html b/frontend/testing-your-apps:enzyme.html index 7da7bad58..fe6eb3cb5 100644 --- a/frontend/testing-your-apps:enzyme.html +++ b/frontend/testing-your-apps:enzyme.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Enzyme

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Enzyme

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps:jest.html b/frontend/testing-your-apps:jest.html index e32cabdc8..4571c68d1 100644 --- a/frontend/testing-your-apps:jest.html +++ b/frontend/testing-your-apps:jest.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Jest

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Jest

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps:other-options.html b/frontend/testing-your-apps:other-options.html index eb4ea37e3..d97c0880a 100644 --- a/frontend/testing-your-apps:other-options.html +++ b/frontend/testing-your-apps:other-options.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Other options

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Other options

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/testing-your-apps:react-testing-library.html b/frontend/testing-your-apps:react-testing-library.html index 901164bcd..83cd92399 100644 --- a/frontend/testing-your-apps:react-testing-library.html +++ b/frontend/testing-your-apps:react-testing-library.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React testing library

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

React testing library

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/type-checkers.html b/frontend/type-checkers.html index 1fde48009..6f7b3c380 100644 --- a/frontend/type-checkers.html +++ b/frontend/type-checkers.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Type checkers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Type checkers

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/type-checkers:flow.html b/frontend/type-checkers:flow.html index 665b9f706..a63517eee 100644 --- a/frontend/type-checkers:flow.html +++ b/frontend/type-checkers:flow.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Flow

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Flow

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/type-checkers:typescript.html b/frontend/type-checkers:typescript.html index 1d661cf48..4e1b8ff98 100644 --- a/frontend/type-checkers:typescript.html +++ b/frontend/type-checkers:typescript.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Typescript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Typescript

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/version-control-systems.html b/frontend/version-control-systems.html index a2146267d..3070eda30 100644 --- a/frontend/version-control-systems.html +++ b/frontend/version-control-systems.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Version control systems

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Version control systems

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/version-control-systems:basic-usage-of-git.html b/frontend/version-control-systems:basic-usage-of-git.html index e9309c24e..77afdbf44 100644 --- a/frontend/version-control-systems:basic-usage-of-git.html +++ b/frontend/version-control-systems:basic-usage-of-git.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Basic usage of git

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Basic usage of git

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-assembly.html b/frontend/web-assembly.html index 113484e6a..5722993ea 100644 --- a/frontend/web-assembly.html +++ b/frontend/web-assembly.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web assembly

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web assembly

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-components.html b/frontend/web-components.html index 7af96e1e2..a0e97906c 100644 --- a/frontend/web-components.html +++ b/frontend/web-components.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web components

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web components

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-components:custom-elements.html b/frontend/web-components:custom-elements.html index ee264c2ff..3c967ba56 100644 --- a/frontend/web-components:custom-elements.html +++ b/frontend/web-components:custom-elements.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Custom elements

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Custom elements

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-components:html-templates.html b/frontend/web-components:html-templates.html index ac34a91f9..7b42eb6a3 100644 --- a/frontend/web-components:html-templates.html +++ b/frontend/web-components:html-templates.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Html templates

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Html templates

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-components:shadow-dom.html b/frontend/web-components:shadow-dom.html index 282543b41..91f000db1 100644 --- a/frontend/web-components:shadow-dom.html +++ b/frontend/web-components:shadow-dom.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Shadow dom

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Shadow dom

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-security-knowledge.html b/frontend/web-security-knowledge.html index 8d121622b..eadb6802e 100644 --- a/frontend/web-security-knowledge.html +++ b/frontend/web-security-knowledge.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web security knowledge

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Web security knowledge

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-security-knowledge:content-security-policy.html b/frontend/web-security-knowledge:content-security-policy.html index 570ead064..256754ea0 100644 --- a/frontend/web-security-knowledge:content-security-policy.html +++ b/frontend/web-security-knowledge:content-security-policy.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Content security policy

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Content security policy

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-security-knowledge:cors.html b/frontend/web-security-knowledge:cors.html index b24aa3431..342650ea3 100644 --- a/frontend/web-security-knowledge:cors.html +++ b/frontend/web-security-knowledge:cors.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Cors

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Cors

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-security-knowledge:https.html b/frontend/web-security-knowledge:https.html index 9899c0e44..839020843 100644 --- a/frontend/web-security-knowledge:https.html +++ b/frontend/web-security-knowledge:https.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Https

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Https

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/frontend/web-security-knowledge:owasp-security-risks.html b/frontend/web-security-knowledge:owasp-security-risks.html index 63c264002..60d41f7c1 100644 --- a/frontend/web-security-knowledge:owasp-security-risks.html +++ b/frontend/web-security-knowledge:owasp-security-risks.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Owasp security risks

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Owasp security risks

This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.

Edit this Page

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/golang.html b/golang.html index f0f73f35c..203a94e8d 100644 --- a/golang.html +++ b/golang.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

The intent of this guide is to give you an idea about the Go ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

The intent of this guide is to give you an idea about the Go ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/golang/golang.html b/golang/golang.html index 8ada6fa7f..7f1a612d8 100644 --- a/golang/golang.html +++ b/golang/golang.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/golang/interactive.html b/golang/interactive.html index 81c2e2be8..90cb21de6 100644 --- a/golang/interactive.html +++ b/golang/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/golang/resources.html b/golang/resources.html index 1fdf80bfb..6403597f4 100644 --- a/golang/resources.html +++ b/golang/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

Go Developer

Step by step guide to becoming a Go developer in 2021

←All RoadmapsDownloadSubscribe

We are still preparing the resources. Please check back later or subscribe to get notified.

While we prepare the list, follow this simple advice to learn anything

Just pick a project and start working on it, you will learn all that you need along the way.

→   All Roadmaps  •  Programming guides  •  Subscribe

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides.html b/guides.html index f1bc658d4..3e64ec5ff 100644 --- a/guides.html +++ b/guides.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Visual Guides

Succinct graphical explanations to engineering topics.

NewSeptember 10, 2021

Async and Defer Script Loading

Learn how to avoid render blocking JavaScript using async and defer scripts.

NewSeptember 5, 2021

What are Web Vitals?

Learn what are the core web vitals and how to measure them.

SLIs, SLOs and SLAs
August 31, 2021
What is CI and CD?
July 9, 2021
SSO — Single Sign On
July 1, 2021
OAuth — Open Authorization
June 28, 2021
JWT Authentication
June 20, 2021
Token Based Authentication
June 2, 2021
Session Based Authentication
May 26, 2021
Basic Authentication
May 19, 2021
Character Encodings
May 14, 2021
Unfamiliar Codebase
May 4, 2021
Build it and they will come?
May 4, 2021
DHCP in One Picture
April 28, 2021
SSL vs TLS vs SSH
April 22, 2021
Asymptotic Notation
April 3, 2021
Big-O Notation
March 15, 2021
Random Numbers: Are they?
March 14, 2021
How does the internet work?
March 1, 2021
Scaling Databases
February 18, 2021
Building a BitTorrent Client
January 17, 2021
Levels of Seniority
December 3, 2020
Design Patterns for Humans
October 9, 2019
DNS in One Picture
December 4, 2018
HTTP Caching
November 29, 2018
Brief History of JavaScript
October 28, 2017
Proxy Servers
October 24, 2017

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe

Visual Guides

Succinct graphical explanations to engineering topics.

NewSeptember 10, 2021

Async and Defer Script Loading

Learn how to avoid render blocking JavaScript using async and defer scripts.

NewSeptember 5, 2021

What are Web Vitals?

Learn what are the core web vitals and how to measure them.

SLIs, SLOs and SLAs
August 31, 2021
What is CI and CD?
July 9, 2021
SSO — Single Sign On
July 1, 2021
OAuth — Open Authorization
June 28, 2021
JWT Authentication
June 20, 2021
Token Based Authentication
June 2, 2021
Session Based Authentication
May 26, 2021
Basic Authentication
May 19, 2021
Character Encodings
May 14, 2021
Unfamiliar Codebase
May 4, 2021
Build it and they will come?
May 4, 2021
DHCP in One Picture
April 28, 2021
SSL vs TLS vs SSH
April 22, 2021
Asymptotic Notation
April 3, 2021
Big-O Notation
March 15, 2021
Random Numbers: Are they?
March 14, 2021
How does the internet work?
March 1, 2021
Scaling Databases
February 18, 2021
Building a BitTorrent Client
January 17, 2021
Levels of Seniority
December 3, 2020
Design Patterns for Humans
October 9, 2019
DNS in One Picture
December 4, 2018
HTTP Caching
November 29, 2018
Brief History of JavaScript
October 28, 2017
Proxy Servers
October 24, 2017

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/asymptotic-notation.html b/guides/asymptotic-notation.html index 350317b48..6b9c96a5f 100644 --- a/guides/asymptotic-notation.html +++ b/guides/asymptotic-notation.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·April 3, 2021·Improve this Guide

Asymptotic Notation

Learn the basics of measuring the time and space complexity of algorithms

Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the previous guide here.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·April 3, 2021·Improve this Guide

Asymptotic Notation

Learn the basics of measuring the time and space complexity of algorithms

Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the previous guide here.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/avoid-render-blocking-javascript-with-async-defer.html b/guides/avoid-render-blocking-javascript-with-async-defer.html index 1b38d3b57..b8feb7d29 100644 --- a/guides/avoid-render-blocking-javascript-with-async-defer.html +++ b/guides/avoid-render-blocking-javascript-with-async-defer.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·September 10, 2021·Improve this Guide

Async and Defer Script Loading

Learn how to avoid render blocking JavaScript using async and defer scripts.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·September 10, 2021·Improve this Guide

Async and Defer Script Loading

Learn how to avoid render blocking JavaScript using async and defer scripts.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/basic-authentication.html b/guides/basic-authentication.html index f794b7269..0a922d138 100644 --- a/guides/basic-authentication.html +++ b/guides/basic-authentication.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·May 19, 2021·Improve this Guide

Basic Authentication

Understand what is basic authentication and how it is implemented

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·May 19, 2021·Improve this Guide

Basic Authentication

Understand what is basic authentication and how it is implemented

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/big-o-notation.html b/guides/big-o-notation.html index fe9ea4b8d..6bcca838e 100644 --- a/guides/big-o-notation.html +++ b/guides/big-o-notation.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·March 15, 2021·Improve this Guide

Big-O Notation

Easy to understand explanation of Big-O notation without any fancy terms

Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·March 15, 2021·Improve this Guide

Big-O Notation

Easy to understand explanation of Big-O notation without any fancy terms

Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/character-encodings.html b/guides/character-encodings.html index 1808127dd..f8b58263a 100644 --- a/guides/character-encodings.html +++ b/guides/character-encodings.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·May 14, 2021·Improve this Guide

Character Encodings

Covers the basics of character encodings and explains ASCII vs Unicode

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·May 14, 2021·Improve this Guide

Character Encodings

Covers the basics of character encodings and explains ASCII vs Unicode

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/ci-cd.html b/guides/ci-cd.html index 5141d68cd..8bd034bc8 100644 --- a/guides/ci-cd.html +++ b/guides/ci-cd.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·July 9, 2021·Improve this Guide

What is CI and CD?

Learn the basics of CI/CD and how to implement that with GitHub Actions.

The image below details the differences between the continuous integration and continuous delivery. Also, here is the accompanying video on implementing that with GitHub actions.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·July 9, 2021·Improve this Guide

What is CI and CD?

Learn the basics of CI/CD and how to implement that with GitHub Actions.

The image below details the differences between the continuous integration and continuous delivery. Also, here is the accompanying video on implementing that with GitHub actions.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/design-patterns-for-humans.html b/guides/design-patterns-for-humans.html index 8c2eec620..eb3984365 100644 --- a/guides/design-patterns-for-humans.html +++ b/guides/design-patterns-for-humans.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·October 9, 2019·Improve this Guide

Design Patterns for Humans

A language agnostic, ultra-simplified explanation to design patterns

Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations.

Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems

Wikipedia describes them as

In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.

Be Careful

Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns.

  • Design patterns are not a silver bullet to all your problems.
  • Do not try to force them; bad things are supposed to happen, if done so.
  • Keep in mind that design patterns are solutions to problems, not solutions finding problems; so don't overthink.
  • If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code.

Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways.

Types of Design Patterns

This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of the book which introduced these design patterns. There are three types of design patterns:

Creational Design Patterns

In plain words

Creational patterns are focused towards how to instantiate an object or group of related objects.

Wikipedia says

In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation.

There are 6 types of Creational patterns

🏠 Simple Factory

Real world example

Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it.

In plain words

Simple factory simply generates an instance for client without exposing any instantiation logic to the client

Wikipedia says

In object-oriented programming (OOP), a factory is an object for creating other objects – formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new".

Programmatic Example

First of all we have a door interface and the implementation

interface Door
+
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·October 9, 2019·Improve this Guide
Design Patterns for Humans
A language agnostic, ultra-simplified explanation to design patterns
Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations.
Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems
Wikipedia describes them as
In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.
Be Careful
Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns.
  • Design patterns are not a silver bullet to all your problems.
  • Do not try to force them; bad things are supposed to happen, if done so. 
  • Keep in mind that design patterns are solutions to problems, not solutions finding problems; so don't overthink.
  • If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code.
Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways.
Types of Design Patterns
This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of the book which introduced these design patterns. There are three types of design patterns:
Creational Design Patterns
In plain words
Creational patterns are focused towards how to instantiate an object or group of related objects.
Wikipedia says
In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation.
There are 6 types of Creational patterns
🏠 Simple Factory
Real world example
Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it.
In plain words
Simple factory simply generates an instance for client without exposing any instantiation logic to the client
Wikipedia says
In object-oriented programming (OOP), a factory is an object for creating other objects – formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new".
Programmatic Example
First of all we have a door interface and the implementation
interface Door
 {
     public function getWidth(): float;
     public function getHeight(): float;
@@ -1552,4 +1552,4 @@ The state pattern can be interpreted as a strategy pattern which is able to swit
 // Linting the ios code
 // Assembling the ios build
 // Deploying ios build to server
-
Wrap Up Folks
And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it.
Open Source
The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.
A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.
Stay Informed
Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.
Subscribe to Updates
Free subscription for updates
Updates & Paid Content
Support the project by paying as little as 5$ per month
RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse
Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.
© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file
+

Wrap Up Folks

And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/dhcp-in-one-picture.html b/guides/dhcp-in-one-picture.html index 5c6f9256a..d148eb24d 100644 --- a/guides/dhcp-in-one-picture.html +++ b/guides/dhcp-in-one-picture.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·April 28, 2021·Improve this Guide

DHCP in One Picture

Here is what happens when a new device joins the network.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·April 28, 2021·Improve this Guide

DHCP in One Picture

Here is what happens when a new device joins the network.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/dns-in-one-picture.html b/guides/dns-in-one-picture.html index 22e1802e5..ebed1e93d 100644 --- a/guides/dns-in-one-picture.html +++ b/guides/dns-in-one-picture.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·December 4, 2018·Improve this Guide

DNS in One Picture

Quick illustrative guide on how a website is found on the internet.

DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works.

DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·December 4, 2018·Improve this Guide

DNS in One Picture

Quick illustrative guide on how a website is found on the internet.

DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works.

DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/history-of-javascript.html b/guides/history-of-javascript.html index e3713d313..55b1bdbb3 100644 --- a/guides/history-of-javascript.html +++ b/guides/history-of-javascript.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·October 28, 2017·Improve this Guide

Brief History of JavaScript

How JavaScript was introduced and evolved over the years

Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that Any application that can be written in JavaScript will eventually be written in JavaScript. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption.

JavaScript is announced

JavaScript was initially created by Brendan Eich of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named Mocha by the creator, which was later renamed to LiveScript. In 1996, about a year later after the release, NetScape decided to rename it to be JavaScript with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.

ES1, ES2 and ES3

In 1996, Netscape decided to submit it to ECMA International with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, ECMAScript was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999.

Decade of Silence and ES4

After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads — adding polyfills to battle compatibility issues between different browsers.

From silence to ES5

Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn’t much of a splash in the water — it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the “modern” standards.

Release of ES6 — ECMAScript 2015

After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs etc

Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don’t have to wait for the full specification to be drafted and approved — thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year.

Release of ES7 — ECMAScript 2016

In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features

  • Exponentiation operator **
  • Array.prototype.includes

Release of ES8 — ECMAScript 2017

The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8

  • Object.values() and Object.entries()
  • String padding i.e. String.prototype.padEnd() and String.prototype.padStart()
  • Object.getOwnPropertyDescriptors
  • Trailing commas in function parameter lists and calls
  • Async functions

What is ESNext then?

ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing ES2017 or ES8 is ESNext.

What does the future hold?

Since the release of ES6, TC39 has quite streamlined their process. TC39 operates through a Github organization now and there are several proposals for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and submit a proposal thus resulting in increasing the participation from the community. Every proposal goes through four stages of maturity before it makes it into the specification.

And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications ES6, ES7 and ES8.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file +
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·October 28, 2017·Improve this Guide

Brief History of JavaScript

How JavaScript was introduced and evolved over the years

Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that Any application that can be written in JavaScript will eventually be written in JavaScript. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption.

JavaScript is announced

JavaScript was initially created by Brendan Eich of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named Mocha by the creator, which was later renamed to LiveScript. In 1996, about a year later after the release, NetScape decided to rename it to be JavaScript with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.

ES1, ES2 and ES3

In 1996, Netscape decided to submit it to ECMA International with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, ECMAScript was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999.

Decade of Silence and ES4

After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads — adding polyfills to battle compatibility issues between different browsers.

From silence to ES5

Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn’t much of a splash in the water — it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the “modern” standards.

Release of ES6 — ECMAScript 2015

After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs etc

Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don’t have to wait for the full specification to be drafted and approved — thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year.

Release of ES7 — ECMAScript 2016

In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features

  • Exponentiation operator **
  • Array.prototype.includes

Release of ES8 — ECMAScript 2017

The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8

  • Object.values() and Object.entries()
  • String padding i.e. String.prototype.padEnd() and String.prototype.padStart()
  • Object.getOwnPropertyDescriptors
  • Trailing commas in function parameter lists and calls
  • Async functions

What is ESNext then?

ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing ES2017 or ES8 is ESNext.

What does the future hold?

Since the release of ES6, TC39 has quite streamlined their process. TC39 operates through a Github organization now and there are several proposals for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and submit a proposal thus resulting in increasing the participation from the community. Every proposal goes through four stages of maturity before it makes it into the specification.

And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications ES6, ES7 and ES8.

Open Source

The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse

Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file diff --git a/guides/http-caching.html b/guides/http-caching.html index 78a6cc213..f77ef937b 100644 --- a/guides/http-caching.html +++ b/guides/http-caching.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·November 29, 2018·Improve this Guide

HTTP Caching

Everything you need to know about web caching

As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc.

Introduction

What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again.

Web Cache

Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later.

Before we get into further details, let me give you an overview of the terms that will be used, further in the article

  • Client could be your browser or any application requesting the server for some resource
  • Origin Server, the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests.
  • Stale Content is the cached but expired content
  • Fresh Content is the content available in cache that hasn't expired yet
  • Cache Validation is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
  • Cache Invalidation is the process of removing any stale content available in the cache

Caching Locations

Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations

Browser Cache

You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it.

Web Cache

A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later.

Proxy Cache

Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example.

Proxy Cache

Reverse Proxy Cache

Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server.

Reverse Proxy Cache

Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches.

Caching Headers

So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.

Expires

Before HTTP/1.1 and introduction of Cache-Control, there was Expires header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header

Expires: Mon, 13 Mar 2017 12:22:00 GMT
+
We now have a YouTube Channel. Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed·November 29, 2018·Improve this Guide
HTTP Caching
Everything you need to know about web caching
As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. 
Introduction
What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. 
Web Cache
Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later.
Before we get into further details, let me give you an overview of the terms that will be used, further in the article
  • Client could be your browser or any application requesting the server for some resource
  • Origin Server, the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests.
  • Stale Content is the cached but expired content
  • Fresh Content is the content available in cache that hasn't expired yet
  • Cache Validation is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
  • Cache Invalidation is the process of removing any stale content available in the cache
Caching Locations
Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations
Browser Cache
You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it.
Web Cache
A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later.
Proxy Cache
Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example.
Proxy Cache
Reverse Proxy Cache
Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server.
Reverse Proxy Cache
Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches.
Caching Headers
So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
Expires
Before HTTP/1.1 and introduction of Cache-Control, there was Expires header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header
Expires: Mon, 13 Mar 2017 12:22:00 GMT
 
It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. 
Although, Expires header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. Cache-Control.  
Pragma
Another one from the old, pre HTTP/1.1 days, is Pragma. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see Pragma: no-cache being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather Cache-Control header should be used to control the caching.
Cache-Control
Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the Expires header.
Value for the Cache-Control header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. 
private
Setting the cache to private means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser)
Cache-Control: private
 
Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. 
public
If set to public, apart from being cached by the client, it can also be cached by the proxies; serving many other users
Cache-Control: public
 
no-store
no-store specifies that the content is not to be cached by any of the caches
Cache-Control: no-store
@@ -62,4 +62,4 @@ Header set Cache-Control "max-age=31536000, public"
     Header set Cache-Control "max-age=2628000, public"
 </filesMatch>
 
Or if you don't want to use the .htaccess file you can modify Apache's configuration file http.conf. Same goes for Nginx, you can add the caching information in the location or server block.  
Caching Recommendations
There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea
  • You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. style.ju2i90.css) so that the cache is automatically rejected whenever the files are updated.
-Also it should be noted that you should not cross the upper limit of one year as it might not be honored 
  • Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP.
  • Always add the validators (preferably ETags) in your response.
  • Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all.
  • Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale.  
  • Test and monitor the caching headers being served by your site. You can use the browser console or curl -I http://some-url.com for that purpose. 
And that about wraps it up. Stay tuned for more!
Open Source
The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.
A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.
Stay Informed
Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.
Subscribe to Updates
Free subscription for updates
Updates & Paid Content
Support the project by paying as little as 5$ per month
RoadmapsGuidesVideosAboutYouTube
RoadmapsGuidesVideosThanksAboutYouTube
roadmap.shby@kamranahmedse
Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.
© roadmap.sh·FAQs·Terms·Privacy

\ No newline at end of file
+Also it should be noted that you should not cross the upper limit of one year as it might not be honored 
  • Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP.
  • Always add the validators (preferably ETags) in your response.
  • Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all.
  • Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale.  
  • Test and monitor the caching headers being served by your site. You can use the browser console or curl -I http://some-url.com for that purpose. 
    • And that about wraps it up. Stay tuned for more!

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/jwt-authentication.html b/guides/jwt-authentication.html index 4ff7b121a..a3b132360 100644 --- a/guides/jwt-authentication.html +++ b/guides/jwt-authentication.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 20, 2021·Improve this Guide

    JWT Authentication

    Understand what is JWT authentication and how is it implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 20, 2021·Improve this Guide

    JWT Authentication

    Understand what is JWT authentication and how is it implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/levels-of-seniority.html b/guides/levels-of-seniority.html index 0d0b85b56..cc4e70384 100644 --- a/guides/levels-of-seniority.html +++ b/guides/levels-of-seniority.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·December 3, 2020·Improve this Guide

    Levels of Seniority

    How to Step Up as a Junior, Mid Level or a Senior Developer?

    I have been working on redoing the roadmaps – splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles.

    I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren't even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below.

    Different Seniority Titles

    Different organizations might have different seniority titles but they mainly fall into three categories:

    • Junior Developer
    • Mid Level Developer
    • Senior Developer

    Junior Developer

    Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away:

    • Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent.
    • They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members.
    • Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something.
    • They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain.
    • Over-engineering is a major problem, often leading to fragility and bugs.
    • When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem.
    • You might notice the "Somebody Else's Problem" behavior from them.
    • They don't know what or how much they don't know, thanks to the Dunning–Kruger effect.
    • They don't take initiatives and they might be afraid to work on an unfamiliar codebase.
    • They don't participate in team discussions.

    Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority:

    • All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn't have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me."
    • Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice.
    • Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, "modernized" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that.
    • Avoid what is known as "Somebody Else's Problem Field" behavior.
    • When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does.
    • Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.
    • It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively.
    • Don't let yourself be limited by the job title that you have. Keep working on your self-improvement.
    • Do your homework. Predict what’s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something.
    • Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt.
    • Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner.
    • Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people.
    • Don't just blindly follow the advice of "experts", take it with a grain of salt.
    • If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'.
    • Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues.
    • Avoid saying "it works on my machine" -- yes, I have heard that a lot.
    • Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge.

    Mid Level Developers

    The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level.

    Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don't know when to make tradeoffs and they still don't know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback.

    Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one.

    Senior Developers

    Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it — they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer:

    • With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture.
    • They don't have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic.
    • They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it.
    • They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done.
    • They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development.
    • They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions.
    • They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code.
    • They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them.
    • They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.
    • They know how to give feedback without hurting anyone.

    Conclusion

    All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don't gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience".

    The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one.

    With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned!

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·December 3, 2020·Improve this Guide

    Levels of Seniority

    How to Step Up as a Junior, Mid Level or a Senior Developer?

    I have been working on redoing the roadmaps – splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles.

    I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren't even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below.

    Different Seniority Titles

    Different organizations might have different seniority titles but they mainly fall into three categories:

    • Junior Developer
    • Mid Level Developer
    • Senior Developer

    Junior Developer

    Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away:

    • Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent.
    • They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members.
    • Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something.
    • They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain.
    • Over-engineering is a major problem, often leading to fragility and bugs.
    • When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem.
    • You might notice the "Somebody Else's Problem" behavior from them.
    • They don't know what or how much they don't know, thanks to the Dunning–Kruger effect.
    • They don't take initiatives and they might be afraid to work on an unfamiliar codebase.
    • They don't participate in team discussions.

    Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority:

    • All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn't have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me."
    • Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice.
    • Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, "modernized" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that.
    • Avoid what is known as "Somebody Else's Problem Field" behavior.
    • When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does.
    • Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.
    • It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively.
    • Don't let yourself be limited by the job title that you have. Keep working on your self-improvement.
    • Do your homework. Predict what’s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something.
    • Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt.
    • Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner.
    • Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people.
    • Don't just blindly follow the advice of "experts", take it with a grain of salt.
    • If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'.
    • Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues.
    • Avoid saying "it works on my machine" -- yes, I have heard that a lot.
    • Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge.

    Mid Level Developers

    The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level.

    Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don't know when to make tradeoffs and they still don't know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback.

    Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one.

    Senior Developers

    Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it — they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer:

    • With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture.
    • They don't have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic.
    • They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it.
    • They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done.
    • They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development.
    • They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions.
    • They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code.
    • They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them.
    • They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one.
    • They know how to give feedback without hurting anyone.

    Conclusion

    All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don't gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience".

    The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one.

    With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned!

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/oauth.html b/guides/oauth.html index 566d87951..f729f6452 100644 --- a/guides/oauth.html +++ b/guides/oauth.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 28, 2021·Improve this Guide

    OAuth — Open Authorization

    Learn and understand what is OAuth and how it works

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 28, 2021·Improve this Guide

    OAuth — Open Authorization

    Learn and understand what is OAuth and how it works

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/proxy-servers.html b/guides/proxy-servers.html index fb0663646..eb0fa2d76 100644 --- a/guides/proxy-servers.html +++ b/guides/proxy-servers.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Ebrahim Bharmal·October 24, 2017·Improve this Guide

    Proxy Servers

    How do proxy servers work and what are forward and reverse proxies?

    Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about proxies which play a vital role in mitigating these risks. We will cover the following topics in this guide:

    Proxy Server

    Every web request which is sent from the client to a web server goes through some type of proxy server. A proxy server acts as a gateway between client (you) and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server.

    Proxy Server Description

    NOTE: This is not an accurate description rather just an illustration.

    Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This saves big companies thousands of dollars by reducing load on their servers as their website is visited by millions of users every day.

    Forward Proxy Server

    A forward proxy is generally implemented on the client side and sits in front of multiple clients or client sources. Forward proxy servers are mainly used by companies to manage internet usage of their employees and restrict content. It is also used as a firewall to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to bypass geo-restriction and browse content which might be blocked in user's country. It enables users to browse anonymously, as the proxy server masks their details from the website's servers.

    Forward Proxy Description

    NOTE: This is not an accurate description rather just an illustration

    Reverse Proxy Server

    Reverse proxy servers are implemented on the server side instead of the client side. It sits in front of multiple webservers and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the back-end web servers and not the client. Reverse proxy servers are generally used to perform tasks such as authentication, content caching, and encryption/decryption on behalf of the web server. These tasks would hog CPU cycles on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as load balancers to distribute the incoming traffic efficiently among the web servers but it is not optimized for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers.

    Reverse Proxy Description

    NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).

    Summary

    A proxy server acts as a gateway between client (you) and the internet and separates end-users from the websites you browse. The position of the proxy server on the network determines whether it is a forward or a reverse proxy server. Forward proxy is implemented on the client side and sits in front of multiple clients or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the server side it sits in front of multiple webservers and manages the incoming requests by forwarding them to the web servers.

    If all this was too much to take in, I have a simple analogy for you.

    At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen.

    In this analogy:

    • You are the client
    • Your order is the web request
    • Waiter/Waitress is your forward proxy server
    • Kitchen head chef is the reverse proxy server
    • Other chefs working in the kitchen are the web servers

    With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Ebrahim Bharmal·October 24, 2017·Improve this Guide

    Proxy Servers

    How do proxy servers work and what are forward and reverse proxies?

    Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about proxies which play a vital role in mitigating these risks. We will cover the following topics in this guide:

    Proxy Server

    Every web request which is sent from the client to a web server goes through some type of proxy server. A proxy server acts as a gateway between client (you) and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server.

    Proxy Server Description

    NOTE: This is not an accurate description rather just an illustration.

    Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This saves big companies thousands of dollars by reducing load on their servers as their website is visited by millions of users every day.

    Forward Proxy Server

    A forward proxy is generally implemented on the client side and sits in front of multiple clients or client sources. Forward proxy servers are mainly used by companies to manage internet usage of their employees and restrict content. It is also used as a firewall to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to bypass geo-restriction and browse content which might be blocked in user's country. It enables users to browse anonymously, as the proxy server masks their details from the website's servers.

    Forward Proxy Description

    NOTE: This is not an accurate description rather just an illustration

    Reverse Proxy Server

    Reverse proxy servers are implemented on the server side instead of the client side. It sits in front of multiple webservers and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the back-end web servers and not the client. Reverse proxy servers are generally used to perform tasks such as authentication, content caching, and encryption/decryption on behalf of the web server. These tasks would hog CPU cycles on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as load balancers to distribute the incoming traffic efficiently among the web servers but it is not optimized for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers.

    Reverse Proxy Description

    NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).

    Summary

    A proxy server acts as a gateway between client (you) and the internet and separates end-users from the websites you browse. The position of the proxy server on the network determines whether it is a forward or a reverse proxy server. Forward proxy is implemented on the client side and sits in front of multiple clients or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the server side it sits in front of multiple webservers and manages the incoming requests by forwarding them to the web servers.

    If all this was too much to take in, I have a simple analogy for you.

    At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen.

    In this analogy:

    • You are the client
    • Your order is the web request
    • Waiter/Waitress is your forward proxy server
    • Kitchen head chef is the reverse proxy server
    • Other chefs working in the kitchen are the web servers

    With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/random-numbers.html b/guides/random-numbers.html index 8a31cffdc..722a648d9 100644 --- a/guides/random-numbers.html +++ b/guides/random-numbers.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·March 14, 2021·Improve this Guide

    Random Numbers: Are they?

    Learn how they are generated and why they may not be truly random.

    Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·March 14, 2021·Improve this Guide

    Random Numbers: Are they?

    Learn how they are generated and why they may not be truly random.

    Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/scaling-databases.html b/guides/scaling-databases.html index dda7763cc..0dba52dc8 100644 --- a/guides/scaling-databases.html +++ b/guides/scaling-databases.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·February 18, 2021·Improve this Guide

    Scaling Databases

    Learn the ups and downs of different database scaling strategies

    The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·February 18, 2021·Improve this Guide

    Scaling Databases

    Learn the ups and downs of different database scaling strategies

    The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/session-authentication.html b/guides/session-authentication.html index e89ea4d88..4a166d8db 100644 --- a/guides/session-authentication.html +++ b/guides/session-authentication.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 26, 2021·Improve this Guide

    Session Based Authentication

    Understand what is session based authentication and how it is implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 26, 2021·Improve this Guide

    Session Based Authentication

    Understand what is session based authentication and how it is implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/ssl-tls-https-ssh.html b/guides/ssl-tls-https-ssh.html index b54a05ba2..f0671eed1 100644 --- a/guides/ssl-tls-https-ssh.html +++ b/guides/ssl-tls-https-ssh.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·April 22, 2021·Improve this Guide

    SSL vs TLS vs SSH

    Quick tidbit on the differences between SSL, TLS, HTTPS and SSH

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·April 22, 2021·Improve this Guide

    SSL vs TLS vs SSH

    Quick tidbit on the differences between SSL, TLS, HTTPS and SSH

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/sso.html b/guides/sso.html index 842cd8008..95ca86e0d 100644 --- a/guides/sso.html +++ b/guides/sso.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 1, 2021·Improve this Guide

    SSO — Single Sign On

    Learn the basics of SAML and understand how does Single Sign On work.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 1, 2021·Improve this Guide

    SSO — Single Sign On

    Learn the basics of SAML and understand how does Single Sign On work.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/token-authentication.html b/guides/token-authentication.html index 247f8bc35..2450e11c0 100644 --- a/guides/token-authentication.html +++ b/guides/token-authentication.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 2, 2021·Improve this Guide

    Token Based Authentication

    Understand what is token based authentication and how it is implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·June 2, 2021·Improve this Guide

    Token Based Authentication

    Understand what is token based authentication and how it is implemented

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/torrent-client.html b/guides/torrent-client.html index df15a1eb3..b84b8098c 100644 --- a/guides/torrent-client.html +++ b/guides/torrent-client.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Jesse Li·January 17, 2021·Improve this Guide

    Building a BitTorrent Client

    Learn everything you need to know about BitTorrent by writing a client in Go

    BitTorrent is a protocol for downloading and distributing files across the Internet. In contrast with the traditional client/server relationship, in which downloaders connect to a central server (for example: watching a movie on Netflix, or loading the web page you're reading now), participants in the BitTorrent network, called peers, download pieces of files from each other—this is what makes it a peer-to-peer protocol. In this article we will investigate how this works, and build our own client that can find peers and exchange data between them.

    diagram showing the difference between client/server (all clients connecting to one server) and peer-to-peer (peers connecting to each other) relationships

    The protocol evolved organically over the past 20 years, and various people and organizations added extensions for features like encryption, private torrents, and new ways of finding peers. We'll be implementing the original spec from 2001 to keep this a weekend-sized project.

    I'll be using a Debian ISO file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content.

    Finding peers

    Here’s a problem: we want to download a file with BitTorrent, but it’s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends—maybe we’ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They’re just web servers running over HTTP, and you can find Debian’s at http://bttracker.debian.org:6969/

    illustration of a desktop computer and laptop sitting at a pub

    Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even peer discovery a distributed process. We won't be implementing them, but if you're interested, some terms you can research are DHT, PEX, and magnet links.

    Parsing a .torrent file

    A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:

    d8:announce41:http://bttracker.debian.org:6969/announce7:comment35:"Debian CD from cdimage.debian.org"13:creation datei1573903810e9:httpseedsl145:https://cdimage.debian.org/cdimage/release/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.iso145:https://cdimage.debian.org/cdimage/archive/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.isoe4:infod6:lengthi351272960e4:name31:debian-10.2.0-amd64-netinst.iso12:piece lengthi262144e6:pieces26800:�����PS�^�� (binary blob of the hashes of each piece)ee
+
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Jesse Li·January 17, 2021·Improve this Guide
    Building a BitTorrent Client
    Learn everything you need to know about BitTorrent by writing a client in Go
    BitTorrent is a protocol for downloading and distributing files across the Internet. In contrast with the traditional client/server relationship, in which downloaders connect to a central server (for example: watching a movie on Netflix, or loading the web page you're reading now), participants in the BitTorrent network, called peers, download pieces of files from each other—this is what makes it a peer-to-peer protocol. In this article we will investigate how this works, and build our own client that can find peers and exchange data between them.
    diagram showing the difference between client/server (all clients connecting to one server) and peer-to-peer (peers connecting to each other) relationships
    The protocol evolved organically over the past 20 years, and various people and organizations added extensions for features like encryption, private torrents, and new ways of finding peers. We'll be implementing the original spec from 2001 to keep this a weekend-sized project.
    I'll be using a Debian ISO file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content.
    Finding peers
    Here’s a problem: we want to download a file with BitTorrent, but it’s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends—maybe we’ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They’re just web servers running over HTTP, and you can find Debian’s at http://bttracker.debian.org:6969/
    illustration of a desktop computer and laptop sitting at a pub
    Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even peer discovery a distributed process. We won't be implementing them, but if you're interested, some terms you can research are DHT, PEX, and magnet links.
    Parsing a .torrent file
    A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this:
    d8:announce41:http://bttracker.debian.org:6969/announce7:comment35:"Debian CD from cdimage.debian.org"13:creation datei1573903810e9:httpseedsl145:https://cdimage.debian.org/cdimage/release/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.iso145:https://cdimage.debian.org/cdimage/archive/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.isoe4:infod6:lengthi351272960e4:name31:debian-10.2.0-amd64-netinst.iso12:piece lengthi262144e6:pieces26800:�����PS�^�� (binary blob of the hashes of each piece)ee
 
    That mess is encoded in a format called Bencode (pronounced bee-encode), and we'll need to decode it.
    Bencode can encode roughly the same types of structures as JSON—strings, integers, lists, and dictionaries. Bencoded data is not as human-readable/writable as JSON, but it can efficiently handle binary data and it's really simple to parse from a stream. Strings come with a length prefix, and look like 4:spam. Integers go between start and end markers, so 7 would encode to i7e. Lists and dictionaries work in a similar way: l4:spami7ee represents ['spam', 7], while d4:spami7ee means {spam: 7}.
    In a prettier format, our .torrent file looks like this:
    d
   8:announce
     41:http://bttracker.debian.org:6969/announce
@@ -388,4 +388,4 @@ donePieces := 0.Fatal(err)
     }
 }
-
    This isn't the full story
    For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my full implementation if you're interested.
    Open Source
    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.
    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.
    Stay Informed
    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.
    Subscribe to Updates
    Free subscription for updates
    Updates & Paid Content
    Support the project by paying as little as 5$ per month
    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse
    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.
    © roadmap.sh·FAQs·Terms·Privacy
    
\ No newline at end of file
+

    This isn't the full story

    For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my full implementation if you're interested.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/unfamiliar-codebase.html b/guides/unfamiliar-codebase.html index 3e338d808..b4ed0bf7c 100644 --- a/guides/unfamiliar-codebase.html +++ b/guides/unfamiliar-codebase.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 4, 2021·Improve this Guide

    Unfamiliar Codebase

    Tips on getting getting familiar with an unfamiliar codebase

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 4, 2021·Improve this Guide

    Unfamiliar Codebase

    Tips on getting getting familiar with an unfamiliar codebase

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/what-are-web-vitals.html b/guides/what-are-web-vitals.html index 3ce22cf0b..15019735c 100644 --- a/guides/what-are-web-vitals.html +++ b/guides/what-are-web-vitals.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 5, 2021·Improve this Guide

    What are Web Vitals?

    Learn what are the core web vitals and how to measure them.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 5, 2021·Improve this Guide

    What are Web Vitals?

    Learn what are the core web vitals and how to measure them.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/what-is-internet.html b/guides/what-is-internet.html index 917f85333..bd5cfdf13 100644 --- a/guides/what-is-internet.html +++ b/guides/what-is-internet.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Dmytro Bolkachov·March 1, 2021·Improve this Guide

    How does the internet work?

    Learn the basics of internet and everything involved with this short video series

    Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from code.org, you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:

    • What is the Internet?
    • How does the information move on the internet?
    • How do the networks talk to each other and the protocols involved?
    • What's the relationship between packets, routers, and reliability?
    • HTTP and the HTML – How are you viewing this webpage in your browser?
    • How is the information transfer on the internet made secure?
    • What is cybersecurity and what are some common internet crimes?

    What is the Internet?

    The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

    In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it.

    Wires, Cables, and Wi-Fi

    Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).

    In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each.

    IP Addresses and DNS

    Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers?

    In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work.

    Packets, Routing, and Reliability

    Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors.

    In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination.

    HTTP and HTML

    HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you.

    Encryption and Public Keys

    Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.

    Cybersecurity and Crime

    In this video, you will learn about the basics of cybersecurity and common cybercrimes

    And that wraps it up for this article. To learn more about the Internet, Kamran Ahmed has a nice little guide on DNS: How a website is found on the Internet. Also, go through the episodes of howdns.works and read this cartoon intro to DNS over HTTPS.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Dmytro Bolkachov·March 1, 2021·Improve this Guide

    How does the internet work?

    Learn the basics of internet and everything involved with this short video series

    Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from code.org, you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:

    • What is the Internet?
    • How does the information move on the internet?
    • How do the networks talk to each other and the protocols involved?
    • What's the relationship between packets, routers, and reliability?
    • HTTP and the HTML – How are you viewing this webpage in your browser?
    • How is the information transfer on the internet made secure?
    • What is cybersecurity and what are some common internet crimes?

    What is the Internet?

    The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.

    In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it.

    Wires, Cables, and Wi-Fi

    Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).

    In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each.

    IP Addresses and DNS

    Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers?

    In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work.

    Packets, Routing, and Reliability

    Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors.

    In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination.

    HTTP and HTML

    HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you.

    Encryption and Public Keys

    Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.

    Cybersecurity and Crime

    In this video, you will learn about the basics of cybersecurity and common cybercrimes

    And that wraps it up for this article. To learn more about the Internet, Kamran Ahmed has a nice little guide on DNS: How a website is found on the Internet. Also, go through the episodes of howdns.works and read this cartoon intro to DNS over HTTPS.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/what-is-sli-slo-sla.html b/guides/what-is-sli-slo-sla.html index 26dfeb039..457a5fcd2 100644 --- a/guides/what-is-sli-slo-sla.html +++ b/guides/what-is-sli-slo-sla.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 31, 2021·Improve this Guide

    SLIs, SLOs and SLAs

    Learn what are different indicators for performance identification of any service.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 31, 2021·Improve this Guide

    SLIs, SLOs and SLAs

    Learn what are different indicators for performance identification of any service.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/guides/why-build-it-and-they-will-come-wont-work-anymore.html b/guides/why-build-it-and-they-will-come-wont-work-anymore.html index d1c1164f7..2ac2fb78d 100644 --- a/guides/why-build-it-and-they-will-come-wont-work-anymore.html +++ b/guides/why-build-it-and-they-will-come-wont-work-anymore.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Peter Thaleikis·May 4, 2021·Improve this Guide

    Build it and they will come?

    Why “build it and they will come” alone won’t work anymore

    We all have heard the mantra "build it and they will come" many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups.

    Before the Wright brothers built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie Field of Dreams, this and similar historic events gave birth to the idea behind it.

    The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.

    Why doesn't "build it and they will come" work anymore?

    There are a few reasons working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it.

    Building got much easier

    As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as Laravel and Quasar Framework are available for anyone to build projects on - for free.

    In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.

    Too much going on: information overload

    We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.

    Smaller Problems

    Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.

    Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.

    How to market your project nowadays?

    The very first step to improving the odds of success is idea validation. While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time.

    Build your Audience first and the project after.

    Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or project blog.

    Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans.

    Tool by Tool

    Another approach is the "Tool by Tool" approach. I've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a logo generator and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.

    Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is Kamban with FlatGA. He built FlatGA as phase one of a bigger project currently in development.

    Join a Maker community

    While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as makerlog or WIP.chat can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time.

    Getting ready to Launch

    Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch.

    Marketing Is an On-going Fight

    Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free newsletter with small marketing opportunities. This way, you are regularly reminded and given bite-sized tasks to complete.

    Closing Words

    I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to my newsletter. I'll send out the occasional email about interesting new articles or side-projects.

    About the author

    Peter Thaleikis a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company Bring Your Own Ideas Ltd., he has been Lead Developer for multiple organisations.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Peter Thaleikis·May 4, 2021·Improve this Guide

    Build it and they will come?

    Why “build it and they will come” alone won’t work anymore

    We all have heard the mantra "build it and they will come" many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups.

    Before the Wright brothers built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie Field of Dreams, this and similar historic events gave birth to the idea behind it.

    The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.

    Why doesn't "build it and they will come" work anymore?

    There are a few reasons working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it.

    Building got much easier

    As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as Laravel and Quasar Framework are available for anyone to build projects on - for free.

    In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.

    Too much going on: information overload

    We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.

    Smaller Problems

    Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.

    Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.

    How to market your project nowadays?

    The very first step to improving the odds of success is idea validation. While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time.

    Build your Audience first and the project after.

    Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or project blog.

    Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans.

    Tool by Tool

    Another approach is the "Tool by Tool" approach. I've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a logo generator and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.

    Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is Kamban with FlatGA. He built FlatGA as phase one of a bigger project currently in development.

    Join a Maker community

    While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as makerlog or WIP.chat can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time.

    Getting ready to Launch

    Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch.

    Marketing Is an On-going Fight

    Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free newsletter with small marketing opportunities. This way, you are regularly reminded and given bite-sized tasks to complete.

    Closing Words

    I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to my newsletter. I'll send out the occasional email about interesting new articles or side-projects.

    About the author

    Peter Thaleikis a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company Bring Your Own Ideas Ltd., he has been Lead Developer for multiple organisations.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/index.html b/index.html index 293a4d3b6..72cd5a69a 100644 --- a/index.html +++ b/index.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Hey there! 👋

    roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

    We also have a YouTube channel which we hope you are going to love.

    Frontend

    Step by step guide to becoming a frontend developer in 2021

    Backend

    Step by step guide to becoming a backend developer in 2021

    DevOps

    Step by step guide for DevOps or operations role in 2021

    React

    Step by step guide to become a React Developer in 2021

    Angular

    Step by step guide to become a Angular Developer in 2021

    Android

    Step by step guide to becoming an Android Developer in 2021

    Python

    Step by step guide to becoming a Python Developer in 2021

    Go

    Step by step guide to becoming a Go developer in 2021

    Java

    Step by step guide to becoming a Java Developer in 2021

    DBA

    Step by step guide to become a PostgreSQL DBA in 2021

    AWS

    Step by step guide to learn AWS in 2021

    Upcoming

    QA

    Step by step guide to becoming a modern QA Engineer in 2021

    Upcoming

    Video Explanations

    What is Eventual Consistency?
    5 minutes
    SSH vs TLS vs SSL
    3 minutes
    Asynchronous JavaScript
    15 minutes
    Random Number Generators
    8 minutes
    Big O Notation
    8 minutes
    YAML in Depth
    8 minutes
    Floating Point Arithmetic
    4 minutes
    What is CAP Theorem?
    8 minutes
    ACID Explained
    5 minutes
    Transport Protocols: TCP vs UDP
    10 minutes
    View all Videos→

    Visual Guides

    Async and Defer Script Loading
    September 10, 2021
    What are Web Vitals?
    September 5, 2021
    SLIs, SLOs and SLAs
    August 31, 2021
    What is CI and CD?
    July 9, 2021
    SSO — Single Sign On
    July 1, 2021
    OAuth — Open Authorization
    June 28, 2021
    JWT Authentication
    June 20, 2021
    Token Based Authentication
    June 2, 2021
    Session Based Authentication
    May 26, 2021
    Basic Authentication
    May 19, 2021
    View all Guides→

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Hey there! 👋

    roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

    We also have a YouTube channel which we hope you are going to love.

    Frontend

    Step by step guide to becoming a frontend developer in 2021

    Backend

    Step by step guide to becoming a backend developer in 2021

    DevOps

    Step by step guide for DevOps or operations role in 2021

    React

    Step by step guide to become a React Developer in 2021

    Angular

    Step by step guide to become a Angular Developer in 2021

    Android

    Step by step guide to becoming an Android Developer in 2021

    Python

    Step by step guide to becoming a Python Developer in 2021

    Go

    Step by step guide to becoming a Go developer in 2021

    Java

    Step by step guide to becoming a Java Developer in 2021

    DBA

    Step by step guide to become a PostgreSQL DBA in 2021

    AWS

    Step by step guide to learn AWS in 2021

    Upcoming

    QA

    Step by step guide to becoming a modern QA Engineer in 2021

    Upcoming

    Video Explanations

    What is Eventual Consistency?
    5 minutes
    SSH vs TLS vs SSL
    3 minutes
    Asynchronous JavaScript
    15 minutes
    Random Number Generators
    8 minutes
    Big O Notation
    8 minutes
    YAML in Depth
    8 minutes
    Floating Point Arithmetic
    4 minutes
    What is CAP Theorem?
    8 minutes
    ACID Explained
    5 minutes
    Transport Protocols: TCP vs UDP
    10 minutes
    View all Videos→

    Visual Guides

    Async and Defer Script Loading
    September 10, 2021
    What are Web Vitals?
    September 5, 2021
    SLIs, SLOs and SLAs
    August 31, 2021
    What is CI and CD?
    July 9, 2021
    SSO — Single Sign On
    July 1, 2021
    OAuth — Open Authorization
    June 28, 2021
    JWT Authentication
    June 20, 2021
    Token Based Authentication
    June 2, 2021
    Session Based Authentication
    May 26, 2021
    Basic Authentication
    May 19, 2021
    View all Guides→

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/java.html b/java.html index ea566c1f1..32816787c 100644 --- a/java.html +++ b/java.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the Java ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the Java ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/java/interactive.html b/java/interactive.html index 02b44c239..3ea652da3 100644 --- a/java/interactive.html +++ b/java/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/java/java.html b/java/java.html index b179b2bd2..69127e669 100644 --- a/java/java.html +++ b/java/java.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/java/resources.html b/java/resources.html index a7e9fcd15..89d9627d4 100644 --- a/java/resources.html +++ b/java/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Java Developer

    Step by step guide to becoming a Java developer in 2021

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/postgresql-dba.html b/postgresql-dba.html index 4e9a5c382..0bcc7461b 100644 --- a/postgresql-dba.html +++ b/postgresql-dba.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    The intent of this guide is to give you an idea about the DBA landscape and to help guide your learning if you are confused. The roadmap is highly opinionated — neither, knowing everything listed in the roadmap, nor the order of items given in the roadmap is required to be followed in order to be a DBA.

    Learn basic RDBMS terms and concepts

    Get basic understanding of Postgres key terms and basic RDBMS concepts.

    • Object model: data types, columns, rows, tables, schemas, databases, queries.
    • Relational model: domains, attributes, tuples, relations, constraints, NULL.
    • Databases high-level concepts: ACID, MVCC, transactions, write-ahead log, query processing.
    • Links:
      • Postgres Glossary
      • SQL and Relational Theory - Christopher J. Date, 2009
      • Database Design and Relational Theory - Christopher J. Date, 2012

    Learn how to install and run PostgreSQL

    Get practical skills of how to set up and run Postgres to get a working environment for further learning.

    • Using package managers (APT, YUM, etc.)
    • Using docker.
    • Managing Postgres service using systemd (start, stop, restart, reload).
    • Managing Postgres service using pg_ctl, or OS-specific tools (like pg_ctlcluster).
    • Connect to Postgres using psql.
    • Deploy database service in cloud environment (AWS, GCE, Azure, Heroku, DigitalOcean, etc...).
    • Links:

    Learn SQL concepts

    Get practical skills of how to create and manipulate database objects and how to execute queries using psql client.

    • Understand basic data types.
    • DML queries: querying data, modifying data, filtering data, joining tables.
      • Advanced topics: transactions, CTE, subqueries, lateral join, grouping, set operations.
    • DDL queries: managing tables and schemas (create, alter, drop).
    • Import and export data using COPY.
    • Links:

    Learn how to configure Postgres

    Get understanding of the main aspects of how Postgres could be configured. Deep understanding of Postgres internals is not yet necessary here.

    • postgresql.conf:
      • Resources usage
      • Write-ahead Log
      • Checkpoints and Background Writer
      • Cost-based vacuum and auto-vacuum
      • Replication
      • Query planner
      • Reporting, logging and statistics
      • Adding extra extensions
      • ...keep exploring other configuration options
    • Links:

    Learn Postgres security concepts

    Get understanding about basic security concepts and common ways of how to deploy secure configurations.

    Develop infrastructure DBA skills

    Get practical skills of how to deploy, extend, maintain and support Postgres installations and 3rd-party Postgres ecosystem software.

    • Replication: streaming replication, logical replication
    • Backup/recovery tools:
      • Built-in: pg_dump, pg_dumpall, pg_restore, pg_basebackup
      • 3rd-party: barman, pgbackrest, pg_probackup, WAL-G
      • Backup validation procedures
    • Upgrading procedures
      • Minor and major upgrades using pg_upgrade
      • Upgrades using logical replication
    • Connection pooling:
      • Pgbouncer
      • Alternatives: Pgpool-II, Odyssey, Pgagroal
    • Infrastructure monitoring: Prometheus, Zabbix, other favourite monitoring solution
    • High availability and cluster management tools:
      • Patroni
      • Alternatives: Repmgr, Stolon, pg_auto_failover, PAF
    • Applications Load Balancing and Service Discovery: Haproxy, Keepalived, Consul, Etcd
    • Deploy Postgres on Kubernetes: Simple StatefulSet setup, HELM, operators
    • Resource usage and provisioning, capacity planning

    Learn how to automate routines

    Get practical skills, learn automation tools and automate existing routine tasks.

    • Automation using shell scripts or any other favourite language (Bash, Python, Perl, etc)
    • Configuration management: Ansible, Salt, Chef, Puppet

    Develop application DBA skills

    Learn theory and get practical skills of how applications should work with Postgres

    • Migrations:
      • practical patterns and antipatterns
      • tools: liquibase, sqitch, language-specific tools
    • Data import/export, bulk loading and processing
    • Queues:
      • practical patterns and anti-patterns
      • Skytools PGQ
    • Data partitioning and sharding patterns.
    • Database normalization and normal forms.
    • Books:
      • The Art of PostgreSQL - Dimitri Fontaine, 2020

    Learn Postgres advanced topics

    Here is important to continuously extend and develop existing knowledge about Postgres.

    Learn Postgres troubleshooting techniques

    Get basic understanding about troubleshooting tools and get practical skills of how to detect and resolve problems.

    • Operating system tools
      • top (htop, atop)
      • sysstat
      • iotop
    • Postgres system views
      • pg_stat_activity
      • pg_stat_statements
    • Postgres tools
      • pgcenter - personal recommendation
    • Query analyzing:
      • EXPLAIN
      • Depesz online EXPLAIN visualization tool
      • PEV online EXPLAIN visualization tool
      • Tensor online EXPLAIN visualization tool, RU language only
    • Log analyzing:
      • pgBadger
      • Ad-hoc analyzing using grep, awk, sed, etc.
    • External tracing/profiling tools: gdb, strace, perf-tools, ebpf, core dumps
    • Troubleshooting methods: USE, RED, Golden signals
    • Links:

    Learn SQL optimization technics

    Get understanding and practical skills of how to optimize SQL queries.

    • Indexes, and their use cases: B-tree, Hash, GiST, SP-GiST, GIN, BRIN
    • SQL queries patterns and anti-patterns
    • SQL schema design patterns and anti-patterns
    • Links:
    • Books:
      • SQL Antipatterns: Avoiding the Pitfalls of Database Programming - Bill Karwin, 2010

    Develop architect skills

    Get deeper understanding of Postgres use cases and where Postgres is suitable and where is not.

    • Postgres forks and extensions: Greenplum, Timescaledb, Citus, Postgres-XL, etc.
    • RDBMS in general, benefits and limitations
    • Differences between Postgres and other RDBMS and NoSQL databases

    Develop Postgres hacker skills

    Get involved to Postgres community and contribute to Postgres; be a useful member of Postgres, and the open source community; use personal experience to help other people.

    • Daily reading and answering in mailing lists
      • pgsql-general
      • pgsql-admin
      • pgsql-performance
      • pgsql-hackers
      • pgsql-bugs
    • Reviewing patches
    • Writing patches, attending in Commitfests



    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    The intent of this guide is to give you an idea about the DBA landscape and to help guide your learning if you are confused. The roadmap is highly opinionated — neither, knowing everything listed in the roadmap, nor the order of items given in the roadmap is required to be followed in order to be a DBA.

    Learn basic RDBMS terms and concepts

    Get basic understanding of Postgres key terms and basic RDBMS concepts.

    • Object model: data types, columns, rows, tables, schemas, databases, queries.
    • Relational model: domains, attributes, tuples, relations, constraints, NULL.
    • Databases high-level concepts: ACID, MVCC, transactions, write-ahead log, query processing.
    • Links:
      • Postgres Glossary
      • SQL and Relational Theory - Christopher J. Date, 2009
      • Database Design and Relational Theory - Christopher J. Date, 2012

    Learn how to install and run PostgreSQL

    Get practical skills of how to set up and run Postgres to get a working environment for further learning.

    • Using package managers (APT, YUM, etc.)
    • Using docker.
    • Managing Postgres service using systemd (start, stop, restart, reload).
    • Managing Postgres service using pg_ctl, or OS-specific tools (like pg_ctlcluster).
    • Connect to Postgres using psql.
    • Deploy database service in cloud environment (AWS, GCE, Azure, Heroku, DigitalOcean, etc...).
    • Links:

    Learn SQL concepts

    Get practical skills of how to create and manipulate database objects and how to execute queries using psql client.

    • Understand basic data types.
    • DML queries: querying data, modifying data, filtering data, joining tables.
      • Advanced topics: transactions, CTE, subqueries, lateral join, grouping, set operations.
    • DDL queries: managing tables and schemas (create, alter, drop).
    • Import and export data using COPY.
    • Links:

    Learn how to configure Postgres

    Get understanding of the main aspects of how Postgres could be configured. Deep understanding of Postgres internals is not yet necessary here.

    • postgresql.conf:
      • Resources usage
      • Write-ahead Log
      • Checkpoints and Background Writer
      • Cost-based vacuum and auto-vacuum
      • Replication
      • Query planner
      • Reporting, logging and statistics
      • Adding extra extensions
      • ...keep exploring other configuration options
    • Links:

    Learn Postgres security concepts

    Get understanding about basic security concepts and common ways of how to deploy secure configurations.

    Develop infrastructure DBA skills

    Get practical skills of how to deploy, extend, maintain and support Postgres installations and 3rd-party Postgres ecosystem software.

    • Replication: streaming replication, logical replication
    • Backup/recovery tools:
      • Built-in: pg_dump, pg_dumpall, pg_restore, pg_basebackup
      • 3rd-party: barman, pgbackrest, pg_probackup, WAL-G
      • Backup validation procedures
    • Upgrading procedures
      • Minor and major upgrades using pg_upgrade
      • Upgrades using logical replication
    • Connection pooling:
      • Pgbouncer
      • Alternatives: Pgpool-II, Odyssey, Pgagroal
    • Infrastructure monitoring: Prometheus, Zabbix, other favourite monitoring solution
    • High availability and cluster management tools:
      • Patroni
      • Alternatives: Repmgr, Stolon, pg_auto_failover, PAF
    • Applications Load Balancing and Service Discovery: Haproxy, Keepalived, Consul, Etcd
    • Deploy Postgres on Kubernetes: Simple StatefulSet setup, HELM, operators
    • Resource usage and provisioning, capacity planning

    Learn how to automate routines

    Get practical skills, learn automation tools and automate existing routine tasks.

    • Automation using shell scripts or any other favourite language (Bash, Python, Perl, etc)
    • Configuration management: Ansible, Salt, Chef, Puppet

    Develop application DBA skills

    Learn theory and get practical skills of how applications should work with Postgres

    • Migrations:
      • practical patterns and antipatterns
      • tools: liquibase, sqitch, language-specific tools
    • Data import/export, bulk loading and processing
    • Queues:
      • practical patterns and anti-patterns
      • Skytools PGQ
    • Data partitioning and sharding patterns.
    • Database normalization and normal forms.
    • Books:
      • The Art of PostgreSQL - Dimitri Fontaine, 2020

    Learn Postgres advanced topics

    Here is important to continuously extend and develop existing knowledge about Postgres.

    Learn Postgres troubleshooting techniques

    Get basic understanding about troubleshooting tools and get practical skills of how to detect and resolve problems.

    • Operating system tools
      • top (htop, atop)
      • sysstat
      • iotop
    • Postgres system views
      • pg_stat_activity
      • pg_stat_statements
    • Postgres tools
      • pgcenter - personal recommendation
    • Query analyzing:
      • EXPLAIN
      • Depesz online EXPLAIN visualization tool
      • PEV online EXPLAIN visualization tool
      • Tensor online EXPLAIN visualization tool, RU language only
    • Log analyzing:
      • pgBadger
      • Ad-hoc analyzing using grep, awk, sed, etc.
    • External tracing/profiling tools: gdb, strace, perf-tools, ebpf, core dumps
    • Troubleshooting methods: USE, RED, Golden signals
    • Links:

    Learn SQL optimization technics

    Get understanding and practical skills of how to optimize SQL queries.

    • Indexes, and their use cases: B-tree, Hash, GiST, SP-GiST, GIN, BRIN
    • SQL queries patterns and anti-patterns
    • SQL schema design patterns and anti-patterns
    • Links:
    • Books:
      • SQL Antipatterns: Avoiding the Pitfalls of Database Programming - Bill Karwin, 2010

    Develop architect skills

    Get deeper understanding of Postgres use cases and where Postgres is suitable and where is not.

    • Postgres forks and extensions: Greenplum, Timescaledb, Citus, Postgres-XL, etc.
    • RDBMS in general, benefits and limitations
    • Differences between Postgres and other RDBMS and NoSQL databases

    Develop Postgres hacker skills

    Get involved to Postgres community and contribute to Postgres; be a useful member of Postgres, and the open source community; use personal experience to help other people.

    • Daily reading and answering in mailing lists
      • pgsql-general
      • pgsql-admin
      • pgsql-performance
      • pgsql-hackers
      • pgsql-bugs
    • Reviewing patches
    • Writing patches, attending in Commitfests



    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/postgresql-dba/interactive.html b/postgresql-dba/interactive.html index 4dde19b57..d22c97b7e 100644 --- a/postgresql-dba/interactive.html +++ b/postgresql-dba/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/postgresql-dba/postgresql-dba.html b/postgresql-dba/postgresql-dba.html index 7a08d042e..2ac65db7d 100644 --- a/postgresql-dba/postgresql-dba.html +++ b/postgresql-dba/postgresql-dba.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/postgresql-dba/resources.html b/postgresql-dba/resources.html index 780db0b11..5fb8eab6b 100644 --- a/postgresql-dba/resources.html +++ b/postgresql-dba/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    PostgreSQL DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    ←All RoadmapsSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/privacy.html b/privacy.html index 5529c32b4..db09915d6 100644 --- a/privacy.html +++ b/privacy.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Privacy Policy

    By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh’s Services is at all times subject to the Terms of Use, which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use.

    What does this Privacy Policy cover?

    This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don’t own or control, or people that we don’t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.

    As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at kamranahmed.se@gmail.com.

    Will roadmap.sh ever change this Privacy Policy?

    We’re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you’ve opted not to receive legal notice emails from us (or you haven’t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected.

    What Information does roadmap.sh Collect?

    Information You Provide to Us:

    We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (“Third Party Account Information”) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features.

    We may communicate with you if you’ve provided us the means to do so. For example, if you’ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at kamranahmed.se@gmail.com.

    Information Collected Automatically

    Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, “cookie” information, the type of browser and/or device you’re using to access our Services, and the page or feature you requested. “Cookies” are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device’s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren’t responsible for their privacy policies and practices.

    When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible.

    Will roadmap.sh Share Any of the Personal Information it Receives?

    We may share your Personal Information with third parties as described in this section:

    Information that’s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual.

    Advertisers: We may allow advertisers and/or merchant partners (“Advertisers”) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach.

    We may deliver a file to you through the Services (known as a “web beacon”) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network’s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser.

    Affiliated Businesses: In certain situations, businesses or third party websites we’re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business’ or websites’ policies.

    Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us.

    User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of “friends” from that site or service may be automatically imported to the Services, and such “friends,” if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service.

    Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party.

    Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others.

    Is Personal Information about me secure?

    Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time.

    What Personal Information can I access?

    Through your account settings, you may access, and, in some cases, edit or delete the following information you’ve provided to us:

    • first and last name
    • location of residence
    • age or birthday
    • username

    The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at kamranahmed.se@gmail.com.

    Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: kamranahmed.se@gmail.com.

    What choices do I have?

    You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features.

    You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at kamranahmed.se@gmail.com and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally.

    What if I have questions about this policy?

    If you have any questions or concerns regarding our privacy policies, please send us a detailed message to kamranahmed.se@gmail.com, and we will try to resolve your concerns.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Privacy Policy

    By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh’s Services is at all times subject to the Terms of Use, which incorporates this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Use.

    What does this Privacy Policy cover?

    This Privacy Policy covers our treatment of personally identifiable information ("Personal Information") that we gather when you are accessing or using our Services, but not to the practices of companies we don’t own or control, or people that we don’t manage. We gather various types of Personal Information from our users, as explained in more detail below, and we use this Personal Information internally in connection with our Services, including to personalize, provide, and improve our services, to allow you to set up a user account and profile, to contact you and allow other users to contact you, to fulfill your requests for certain products and services, and to analyze how you use the Services. In certain cases, we may also share some Personal Information with third parties, but only as described below.

    As noted in the Terms of Use, we do not knowingly collect or solicit personal information from anyone under the age of 13. If you are under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn that we have collected personal information from a child under age 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at kamranahmed.se@gmail.com.

    Will roadmap.sh ever change this Privacy Policy?

    We’re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time as well, but we will alert you to changes by updating the services on the website, placing a notice on the Services, by sending you an email, and/or by some other means. Please note that if you’ve opted not to receive legal notice emails from us (or you haven’t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect now is subject to the Privacy Policy in effect at the time such information is used or collected.

    What Information does roadmap.sh Collect?

    Information You Provide to Us:

    We receive and store any information you knowingly provide to us. For example, through the registration process and/or through your account settings, we may collect Personal Information such as your name, title, email address, phone number, and third-party account credentials (for example, your log-in credentials for Twitter or other third party sites. If you provide your third-party account credentials to us or otherwise sign in to the Services through a third party site or service, you understand some content and/or information in those accounts (“Third Party Account Information”) may be transmitted into your account with us if you authorize such transmissions], and that Third Party Account Information transmitted to our Services is covered by this Privacy Policy. Certain information may be required to register with us or to take advantage of some of our features.

    We may communicate with you if you’ve provided us the means to do so. For example, if you’ve given us your email address, we may send you promotional email offers on behalf of other businesses, or email you about your use of the Services. Also, we may receive a confirmation when you open an email from us. This confirmation helps us make our communications with you more interesting and improve our services. If you do not want to receive communications from us, please email us at kamranahmed.se@gmail.com.

    Information Collected Automatically

    Whenever you interact with our Services, we automatically receive and record information on our server logs from your browser or device, which may include your IP address, geolocation data, device identification, “cookie” information, the type of browser and/or device you’re using to access our Services, and the page or feature you requested. “Cookies” are identifiers we transfer to your browser or device that allow us to recognize your browser or device and tell us how and when pages and features in our Services are visited and by how many people. You may be able to change the preferences on your browser or device to prevent or limit your device’s acceptance of cookies, but this may prevent you from taking advantage of some of our features. Our advertising partners may also transmit cookies to your browser or device, when you click on ads that appear on the Services. Also if you click on a link to a third party website or service, such third party may also transmit cookies to you. Again, this Privacy Policy does not cover the use of cookies by any third parties, and we aren’t responsible for their privacy policies and practices.

    When we collect the usage information described above, we only use this data in aggregate form, and not in a manner that would identify you personally. For example, this aggregate data can tell us how often users use a particular feature of the Services, and we can use that knowledge to make the Services interesting to as many users as possible.

    Will roadmap.sh Share Any of the Personal Information it Receives?

    We may share your Personal Information with third parties as described in this section:

    Information that’s no longer personally identifiable. We may anonymize your Personal Information so that you are not individually identified, and provide that information to our partners. We may also provide aggregate usage information to our partners, who may use such information to understand how often and in what ways people use our Services, so that they, too, can provide you with an optimal online experience. However, we never disclose aggregate information to a partner in a manner that would identify you personally, as an individual.

    Advertisers: We may allow advertisers and/or merchant partners (“Advertisers”) to choose the demographic information of users who will see their advertisements and/or promotional offers and you agree that we may provide any of the information we have collected from you in non-personally identifiable form to an Advertiser, in order for that Advertiser to select the appropriate audience for those advertisements and/or offers. For example, we might use the fact you are located in San Francisco to show you ads or offers for San Francisco businesses, but we will not tell such businesses who you are. Note that if an advertiser asks us to show an ad to a certain audience or audience segment and you respond to that ad, the advertiser may conclude that you fit the description of the audience they were trying to reach.

    We may deliver a file to you through the Services (known as a “web beacon”) from an ad network. Web beacons allow ad networks to provide anonymized, aggregated auditing, research and reporting for us and for advertisers. Web beacons also enable ad networks to serve targeted advertisements to you when you visit other websites. Because your web browser must request these advertisements and web beacons from the ad network’s servers, these companies can view, edit, or set their own cookies, just as if you had requested a web page from their site. You may be able to opt-out of web beacon tracking by adjusting the settings on your browser.

    Affiliated Businesses: In certain situations, businesses or third party websites we’re affiliated with may sell or provide products or services to you through or in connection with the Services (either alone or jointly with us). You can recognize when an affiliated business is associated with such a transaction or service, and we will share your Personal Information with that affiliated business only to the extent that it is related to such transaction or service. One such service may include the ability for you to automatically transmit Third Party Account Information to your Services profile or to automatically transmit information in your Services profile to your third party account; for example, you may sign into your roadmap.sh account using your Twitter account. We have no control over the policies and practices of third party websites or businesses as to privacy or anything else, so if you choose to take part in any transaction or service relating to an affiliated website or business, please review all such business’ or websites’ policies.

    Our Agents: We employ other companies and people to perform tasks on our behalf and need to share your information with them to provide products or services to you. Unless we tell you differently, our agents do not have any right to use the Personal Information we share with them beyond what is necessary to assist us.

    User Profiles and Submissions: Certain user profile information, including your name, location, and any video or image content that such user has uploaded to the Services, may be displayed to other users to facilitate user interaction within the Services or address your request for our services. Please remember that any content you upload to your public user profile, along with any Personal Information or content that you voluntarily disclose online in a manner other users can view (on discussion boards, in messages and chat areas, etc.) becomes publicly available, and can be collected and used by anyone. Your user name may also be displayed to other users if and when you send messages or comments or upload images or videos through the Services and other users can contact you through messages and comments. Additionally, if you sign into the Services through a third party social networking site or service, your list of “friends” from that site or service may be automatically imported to the Services, and such “friends,” if they are also registered users of the Services, may be able to access certain non-public information you have entered in your Services user profile. Again, we do not control the policies and practices of any other third party site or service.

    Business Transfers: We may choose to buy or sell assets. In these types of transactions, customer information is typically one of the business assets that would be transferred. Also, if we (or our assets) are acquired, or if we go out of business, enter bankruptcy, or go through some other change of control, Personal Information could be one of the assets transferred to or acquired by a third party.

    Protection of roadmap.sh and Others: We reserve the right to access, read, preserve, and disclose any information that we reasonably believe is necessary to comply with law or court order; enforce or apply our terms of use and other agreements; or protect the rights, property, or safety of roadmap.sh, our employees, our users, or others.

    Is Personal Information about me secure?

    Your account is protected by a password for your privacy and security. If you access your account via a third party site or service, you may have additional or different sign-on protections via that third party site or service. You must prevent unauthorized access to your account and Personal Information by selecting and protecting your password and/or other sign-on mechanism appropriately and limiting access to your computer or device and browser by signing off after you have finished accessing your account. We endeavor to protect the privacy of your account and other Personal Information we hold in our records, but unfortunately, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors, may compromise the security of user information at any time.

    What Personal Information can I access?

    Through your account settings, you may access, and, in some cases, edit or delete the following information you’ve provided to us:

    • first and last name
    • location of residence
    • age or birthday
    • username

    The information you can view, update, and delete may change as the Services change. If you have any questions about viewing or updating information we have on file about you, please contact us at kamranahmed.se@gmail.com.

    Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to ask us for a notice identifying the categories of Personal Information which we share with our affiliates and/or third parties for marketing purposes, and providing contact information for such affiliates and/or third parties. If you are a California resident and would like a copy of this notice, please submit a written request to: kamranahmed.se@gmail.com.

    What choices do I have?

    You can always opt not to disclose information to us, but keep in mind some information may be needed to register with us or to take advantage of some of our features.

    You may be able to add, update, or delete information as explained above. When you update information, however, we may maintain a copy of the unrevised information in our records. You may request deletion of your account by contacting us at kamranahmed.se@gmail.com and we will disassociate our email address and Twitter account from any content or other information provided to us. Some information may remain in our records after your deletion of such information from your account. We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally.

    What if I have questions about this policy?

    If you have any questions or concerns regarding our privacy policies, please send us a detailed message to kamranahmed.se@gmail.com, and we will try to resolve your concerns.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/python.html b/python.html index eaf17170e..4ec0f30b1 100644 --- a/python.html +++ b/python.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the Python ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the Python ecosystem and to help guide your learning if you are confused. We have another roadmap on the Backend Development that focuses on the backend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/python/interactive.html b/python/interactive.html index e6bf03100..6050a3155 100644 --- a/python/interactive.html +++ b/python/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/python/python.html b/python/python.html index 43c79727b..904bf523e 100644 --- a/python/python.html +++ b/python/python.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/python/resources.html b/python/resources.html index 00b8963ab..9feb3041b 100644 --- a/python/resources.html +++ b/python/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Python Developer

    Step by step guide to becoming a Python developer in 2021

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/qa.html b/qa.html index 04a225625..023ce60d4 100644 --- a/qa.html +++ b/qa.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    Roadmap is not ready yet. Please check back later or subscribe to get notified.

    While we prepare the roadmap, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    Roadmap is not ready yet. Please check back later or subscribe to get notified.

    While we prepare the roadmap, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/qa/interactive.html b/qa/interactive.html index 4e737b34d..4b73e80a8 100644 --- a/qa/interactive.html +++ b/qa/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/qa/qa.html b/qa/qa.html index 823082250..8f91e6bc3 100644 --- a/qa/qa.html +++ b/qa/qa.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/qa/resources.html b/qa/resources.html index 6f9aae651..ae40d0571 100644 --- a/qa/resources.html +++ b/qa/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    QA Engineer

    Steps to follow in order to become a modern QA Engineer in 2021

    ←All RoadmapsSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/react.html b/react.html index 4077eb726..eaf017262 100644 --- a/react.html +++ b/react.html @@ -3,10 +3,10 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another roadmap on the Frontend Development that focuses on the frontend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the picture if suitable.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another roadmap on the Frontend Development that focuses on the frontend development if you are interested in that.

    Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.

    Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, we would love to hear your opinions and incorporate them in the picture if suitable.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/react/interactive.html b/react/interactive.html index ad306fd4c..fc3853768 100644 --- a/react/interactive.html +++ b/react/interactive.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/react/react.html b/react/react.html index 6aec8d50b..a470e76e4 100644 --- a/react/react.html +++ b/react/react.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/react/resources.html b/react/resources.html index b8f303165..79ba5d3ef 100644 --- a/react/resources.html +++ b/react/resources.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    React Developer

    Everything that is there to learn about React and the ecosystem in 2021.

    ←All RoadmapsDownloadSubscribe

    We are still preparing the resources. Please check back later or subscribe to get notified.

    While we prepare the list, follow this simple advice to learn anything

    Just pick a project and start working on it, you will learn all that you need along the way.

    →   All Roadmaps  •  Programming guides  •  Subscribe

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/roadmaps.html b/roadmaps.html index bcb0a7b85..3e44b2321 100644 --- a/roadmaps.html +++ b/roadmaps.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Developer Roadmaps

    Step by step guides and paths to learn different tools or technologies

    Frontend

    Step by step guide to becoming a modern frontend developer in 2021

    Backend

    Step by step guide to becoming a modern backend developer in 2021

    DevOps

    Step by step guide for DevOps, SRE or any other Operations Role in 2021

    React

    Everything that is there to learn about React and the ecosystem in 2021.

    Angular

    Everything that is there to learn about Angular and the ecosystem in 2021.

    Android

    Step by step guide to becoming an Android developer in 2021

    Python

    Step by step guide to becoming a Python developer in 2021

    Go

    Step by step guide to becoming a Go developer in 2021

    Java

    Step by step guide to becoming a Java developer in 2021

    DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    AWS

    Everything that is there to learn about AWS and the ecosystem in 2021.

    Upcoming

    QA

    Steps to follow in order to become a modern QA Engineer in 2021

    Upcoming

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    NewRoadmap topics to be covered on our YouTube ChannelTopic videos being made on YouTube»

    Developer Roadmaps

    Step by step guides and paths to learn different tools or technologies

    Frontend

    Step by step guide to becoming a modern frontend developer in 2021

    Backend

    Step by step guide to becoming a modern backend developer in 2021

    DevOps

    Step by step guide for DevOps, SRE or any other Operations Role in 2021

    React

    Everything that is there to learn about React and the ecosystem in 2021.

    Angular

    Everything that is there to learn about Angular and the ecosystem in 2021.

    Android

    Step by step guide to becoming an Android developer in 2021

    Python

    Step by step guide to becoming a Python developer in 2021

    Go

    Step by step guide to becoming a Go developer in 2021

    Java

    Step by step guide to becoming a Java developer in 2021

    DBA

    Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021

    AWS

    Everything that is there to learn about AWS and the ecosystem in 2021.

    Upcoming

    QA

    Steps to follow in order to become a modern QA Engineer in 2021

    Upcoming

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/signup.html b/signup.html index 8b7586bb6..0061c8bfe 100644 --- a/signup.html +++ b/signup.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Monthly Updates

    Enter your email below to get notified about the new roadmaps, guides and updates

    Once a month email about the changes to roadmaps, new roadmaps, free guides and videos.

    Updates and Paid Content

    People sponsoring me on GitHub get access to the updates as well as paid content.

    • Get notified about the updates
    • Access to paid guides and Videos
    • Support the Project
    • Get a shoutout on Twitter
    • Your name will be added to Thanks
    Sponsor on GitHub

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Monthly Updates

    Enter your email below to get notified about the new roadmaps, guides and updates

    Once a month email about the changes to roadmaps, new roadmaps, free guides and videos.

    Updates and Paid Content

    People sponsoring me on GitHub get access to the updates as well as paid content.

    • Get notified about the updates
    • Access to paid guides and Videos
    • Support the Project
    • Get a shoutout on Twitter
    • Your name will be added to Thanks
    Sponsor on GitHub

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 3e6942bfc..9607c36d8 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -3,73 +3,73 @@ https://roadmap.sh/frontend monthly - 2021-12-09T23:21:50.431Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/backend monthly - 2021-12-09T23:21:50.431Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/devops monthly - 2021-12-09T23:21:50.431Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/react monthly - 2021-12-09T23:21:50.431Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/angular monthly - 2021-12-09T23:21:50.431Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/android monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/python monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/golang monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/java monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/postgresql-dba monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/aws monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 https://roadmap.sh/qa monthly - 2021-12-09T23:21:50.435Z + 2021-12-09T23:22:19.425Z 1.0 @@ -243,43 +243,43 @@ https://roadmap.sh/about monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 0.8 https://roadmap.sh/guides monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 1.0 https://roadmap.sh/ monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 1.0 https://roadmap.sh/roadmaps monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 1.0 https://roadmap.sh/signup monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 0.9 https://roadmap.sh/thanks monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 0.5 https://roadmap.sh/watch monthly - 2021-12-09T23:21:50.439Z + 2021-12-09T23:22:19.433Z 1.0 \ No newline at end of file diff --git a/terms.html b/terms.html index 3462ed594..1977dc74c 100644 --- a/terms.html +++ b/terms.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Terms of Service

    PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER.

    Welcome to roadmap.sh. Please read on to learn the rules and restrictions that govern your use of our website(s), products, services and applications (the “Services”). If you have any questions, comments, or concerns regarding these terms or the Services, please contact us at kamranahmed.se@gmail.com.

    These Terms of Use (the “Terms”) are a binding contract between you and roadmap.sh (“roadmap.sh,” “we”, and “us”). You must agree to and accept all of the Terms, or you don’t have the right to use the Services. Your using the Services in any way means that you agree to all of these Terms, and these Terms will remain in effect while you use the Services. These Terms include the provisions in this document, as well as those in the Privacy Policy and Copyright Dispute Policy.

    Will these Terms ever change?

    We are constantly trying to improve our Services, so these Terms may need to change along with the Services. We reserve the right to change the Terms at any time, but if we do, we will bring it to your attention by updating the terms on the roadmap.sh website, by sending you an email, and/or by some other means.

    If you don’t agree with the new Terms, you are free to reject them, however it means you will no longer be able to use the Services. If you use the Services in any way after a change to the Terms is effective, that means you agree to all of the changes.

    Except for changes by us as described here, no other amendment or modification of these Terms will be effective unless in writing and signed by both you and us.

    Do these terms cover privacy?

    You can view the current roadmap.sh Privacy Policy here.

    The Children’s Online Privacy Protection Act (“COPPA”) requires that online service providers obtain parental consent before they knowingly collect personally identifiable information online from children who are under 13. We do not knowingly collect or solicit personally identifiable information from children under 13. If you are a child under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn we have collected personal information from a child under 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at kamranahmed.se@gmail.com.

    What are the basics of using roadmap.sh?

    You may be required to sign up for an account, and select a password and username. You agree to provide us with accurate, complete, and up-to-date registration information about yourself. You may not select as your username a name that you don’t have the right to use, or another person’s name with the intent to impersonate that person. You may not transfer your account to anyone else without our prior written permission.

    You represent and warrant that you are an individual of legal age to form a binding contract, or if not, you’ve received your parent’s or guardian’s permission to use the Services and gotten your parent or guardian to agree to these Terms on your behalf.

    You will only use the Services for your own internal, personal, non-commercial use, and not on behalf of or for the benefit of any third party, and only in a manner that complies with all laws that apply to you. If your use of the Services is prohibited by applicable laws, then you aren’t authorized to use the Services. We can’t and won’t be responsible for your using the Services in a way that breaks the law.

    You will not share your account or password with anyone, and you must protect the security of your account and your password. You’re responsible for any activity associated with your account.

    Your use of the Services is subject to the following additional restrictions:

    You represent, warrant, and agree that you will not contribute any Content or User Submission (each of those terms is defined below) or otherwise use the Services or interact with the Services in a manner that:

    (a) Infringes or violates the intellectual property rights or any other rights of anyone else (including roadmap.sh); (b) Violates any law or regulation, including any applicable export control laws; (c) Is harmful, fraudulent, deceptive, threatening, harassing, defamatory, obscene, or otherwise objectionable; (d) Jeopardizes the security of your roadmap.sh account or anyone else’s (such as allowing someone else to log in to the Services as you); (e) Attempts, in any manner, to obtain the password, account, or other security information from any other user; (f) Violates the security of any computer network, or cracks any passwords or security encryption codes; (g) Runs Maillist, Listserv, any form of auto-responder or “spam” on the Services, or any processes that run or are activated while you are not logged into the Services, or that otherwise interfere with the proper working of the Services (including by placing an unreasonable load on the Services’ infrastructure); (h) “Crawls,” “scrapes,” or “spiders” any page, data, or portion of or relating to the Services or Content (through use of manual or automated means); (i) Copies or stores any significant portion of the Content; (j) Decompiles, reverse engineers, or otherwise attempts to obtain the source code or underlying ideas or information of or relating to the Services.

    A violation of any of the foregoing is grounds for termination of your right to use or access the Services.

    What are my rights in roadmap.sh?

    The materials displayed or performed or available on or through the Services, including, but not limited to, text, graphics, data, articles, photos, images, illustrations, User Submissions, and so forth (all of the foregoing, the “Content”) are protected by copyright and/or other intellectual property laws. You promise to abide by all copyright notices, trademark rules, information, and restrictions contained in any Content you access through the Services, and you won’t use, copy, reproduce, modify, translate, publish, broadcast, transmit, distribute, perform, upload, display, license, sell or otherwise exploit for any purpose any Content not owned by you, (i) without the prior consent of the owner of that Content or (ii) in a way that violates someone else’s (including roadmap.sh’s) rights.

    You understand that roadmap.sh owns the Services. You won’t modify, publish, transmit, participate in the transfer or sale of, reproduce (except as expressly provided in this Section), create derivative works based on, or otherwise exploit any of the Services.

    The Services may allow you to copy or download certain Content; please remember that just because this functionality exists, doesn’t mean that all the restrictions above don’t apply – they do!

    Do I have to grant any licenses to roadmap.sh or to other users?

    Anything you post, upload, share, store, or otherwise provide through the Services is your “User Submission.” Some User Submissions are viewable by other users. In order to display your User Submissions on the Services, and to allow other users to enjoy them (where applicable), you grant us certain rights in those User Submissions. Please note that all of the following licenses are subject to our Privacy Policy to the extent they relate to User Submissions that are also your personally-identifiable information.

    For all User Submissions, you hereby grant roadmap.sh a license to translate, modify (for technical purposes, for example making sure your content is viewable on an iPhone as well as a computer) and reproduce and otherwise act with respect to such User Submissions, in each case to enable us to operate the Services, as described in more detail below. This is a license only – your ownership in User Submissions is not affected.

    If you store a User Submission in your own personal roadmap.sh account, in a manner that is not viewable by any other user except you (a “Personal User Submission”), you grant roadmap.sh the license above, as well as a license to display, perform, and distribute your Personal User Submission for the sole purpose of making that Personal User Submission accessible to you and providing the Services necessary to do so.

    If you share a User Submission only in a manner that only certain specified users can view (for example, a private message to one or more other users) (a “Limited Audience User Submission”), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Limited Audience User Submission for the sole purpose of making that Limited Audience User Submission accessible to such other specified users, and providing the Services necessary to do so. Also, you grant such other specified users a license to access that Limited Audience User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services.

    If you share a User Submission publicly on the Services and/or in a manner that more than just you or certain specified users can view, or if you provide us (in a direct email or otherwise) with any feedback, suggestions, improvements, enhancements, and/or feature requests relating to the Services] (each of the foregoing, a “Public User Submission”), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Public User Submission for the purpose of making that Public User Submission accessible to all roadmap.sh users and providing the Services necessary to do so, as well as all other rights necessary to use and exercise all rights in that Public User Submission in connection with the Services and/or otherwise in connection with roadmap.sh’s business for any purpose, provided that roadmap.sh will try to notify you if it uses your Public User Submission for any reason other than displaying it on the Services. Also, you grant all other users of the Services a license to access that Public User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services.

    You agree that the licenses you grant are royalty-free, perpetual, sublicenseable, irrevocable, and worldwide, provided that when you delete your roadmap.sh account, we will stop displaying your User Submissions (other than Public User Submissions, which may remain fully available)] to other users (if applicable), but you understand and agree that it may not be possible to completely delete that content from roadmap.sh’s records, and that your User Submissions may remain viewable elsewhere to the extent that they were copied or stored by other users.

    Finally, you understand and agree that roadmap.sh, in performing the required technical steps to provide the Services to our users (including you), may need to make changes to your User Submissions to conform and adapt those User Submissions to the technical requirements of connection networks, devices, services, or media, and the foregoing licenses include the rights to do so.

    What if I see something on the Services that infringes my copyright?

    You may have heard of the Digital Millennium Copyright Act (the “DMCA”), as it relates to online service providers, like roadmap.sh, being asked to remove material that allegedly violates someone’s copyright. We respect others’ intellectual property rights, and we reserve the right to delete or disable Content alleged to be infringing, and to terminate the accounts of repeat alleged infringers.

    Who is responsible for what I see and do on the Services?

    Any information or content publicly posted or privately transmitted through the Services is the sole responsibility of the person from whom such content originated, and you access all such information and content at your own risk, and we aren’t liable for any errors or omissions in that information or content or for any damages or loss you might suffer in connection with it. We cannot control and have no duty to take any action regarding how you may interpret and use the Content or what actions you may take as a result of having been exposed to the Content, and you hereby release us from all liability for you having acquired or not acquired Content through the Services. We can’t guarantee the identity of any users with whom you interact in using the Services and are not responsible for which users gain access to the Services.

    You are responsible for all Content you contribute, in any manner, to the Services, and you represent and warrant you have all rights necessary to do so, in the manner in which you contribute it. You will keep all your registration information accurate and current. You are responsible for all your activity in connection with the Services.

    The Services may contain links or connections to third party websites or services that are not owned or controlled by roadmap.sh. When you access third party websites or use third party services, you accept that there are risks in doing so, and that roadmap.sh is not responsible for such risks. We encourage you to be aware when you leave the Services and to read the terms and conditions and privacy policy of each third party website or service that you visit or utilize.

    roadmap.sh has no control over, and assumes no responsibility for, the content, accuracy, privacy policies, or practices of or opinions expressed in any third party websites or by any third party that you interact with through the Services. In addition, roadmap.sh will not and cannot monitor, verify, censor or edit the content of any third party site or service. By using the Services, you release and hold us harmless from any and all liability arising from your use of any third party website or service.

    Your interactions with organizations and/or individuals found on or through the Services, including payment and delivery of goods or services, and any other terms, conditions, warranties or representations associated with such dealings, are solely between you and such organizations and/or individuals. You should make whatever investigation you feel necessary or appropriate before proceeding with any online or offline transaction with any of these third parties. You agree that roadmap.sh shall not be responsible or liable for any loss or damage of any sort incurred as the result of any such dealings.

    If there is a dispute between participants on this site, or between users and any third party, you agree that roadmap.sh is under no obligation to become involved. In the event that you have a dispute with one or more other users, you release roadmap.sh, its officers, employees, agents, and successors from claims, demands, and damages of every kind or nature, known or unknown, suspected or unsuspected, disclosed or undisclosed, arising out of or in any way related to such disputes and/or our Services. If you are a California resident, you shall and hereby do waive California Civil Code Section 1542, which says: "A general release does not extend to claims which the creditor does not know or suspect to exist in his or her favor at the time of executing the release, which, if known by him or her must have materially affected his or her settlement with the debtor."

    Will roadmap.sh ever change the Services?

    We’re always trying to improve the Services, so they may change over time. We may suspend or discontinue any part of the Services, or we may introduce new features or impose limits on certain features or restrict access to parts or all of the Services. We’ll try to give you notice when we make a material change to the Services that would adversely affect you, but this isn’t always practical. Similarly, we reserve the right to remove any Content from the Services at any time, for any reason (including, but not limited to, if someone alleges you contributed that Content in violation of these Terms), in our sole discretion, and without notice.

    Does roadmap.sh cost anything?

    The roadmap.sh Services are currently free, but we reserve the right to charge for certain or all Services in the future. We will notify you before any Services you are then using begin carrying a fee, and if you wish to continue using such Services, you must pay all applicable fees for such Services.

    What if I want to stop using roadmap.sh?

    You’re free to do that at any time, by contacting us at kamranahmed.se@gmail.com; please refer to our Privacy Policy, as well as the licenses above, to understand how we treat information you provide to us after you have stopped using our Services. roadmap.sh is also free to terminate (or suspend access to) your use of the Services or your account, for any reason in our discretion, including your breach of these Terms. roadmap.sh has the sole right to decide whether you are in violation of any of the restrictions set forth in these Terms.

    Account termination may result in destruction of any Content associated with your account, so keep that in mind before you decide to terminate your account. We will try to provide advance notice to you prior to our terminating your account so that you are able to retrieve any important User Submissions you may have stored in your account (to the extent allowed by law and these Terms), but we may not do so if we determine it would be impractical, illegal, not in the interest of someone’s safety or security, or otherwise harmful to the rights or property of roadmap.sh.

    Provisions that, by their nature, should survive termination of these Terms shall survive termination. By way of example, all of the following will survive termination: any obligation you have to pay us or indemnify us, any limitations on our liability, any terms regarding ownership or intellectual property rights, and terms regarding disputes between us.

    What if I use roadmap.sh via an app available on the Apple App Store?

    These Terms apply to your use of all the Services, including the iOS applications available via the Apple, Inc. (“Apple”) App Store (the “Application”), but the following additional terms also apply to the Application:

    (a) Both you and roadmap.sh acknowledge that the Terms are concluded between you and roadmap.sh only, and not with Apple, and that Apple is not responsible for the Application or the Content; (b) The Application is licensed to you on a limited, non-exclusive, non-transferrable, non-sublicensable basis, solely to be used in connection with the Services for your private, personal, non-commercial use, subject to all the terms and conditions of these Terms as they are applicable to the Services; (c) You will only use the Application in connection with an Apple device that you own or control; (d) You acknowledge and agree that Apple has no obligation whatsoever to furnish any maintenance and support services with respect to the Application; (e) In the event of any failure of the Application to conform to any applicable warranty, including those implied by law, you may notify Apple of such failure; upon notification, Apple’s sole warranty obligation to you will be to refund to you the purchase price, if any, of the Application; (f) You acknowledge and agree that roadmap.sh, and not Apple, is responsible for addressing any claims you or any third party may have in relation to the Application; (g) You acknowledge and agree that, in the event of any third party claim that the Application or your possession and use of the Application infringes that third party’s intellectual property rights, roadmap.sh, and not Apple, will be responsible for the investigation, defense, settlement and discharge of any such infringement claim; (h) You represent and warrant that you are not located in a country subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a “terrorist supporting” country, and that you are not listed on any U.S. Government list of prohibited or restricted parties; (i) Both you and roadmap.sh acknowledge and agree that, in your use of the Application, you will comply with any applicable third party terms of agreement which may affect or be affected by such use; and (j) Both you and roadmap.sh acknowledge and agree that Apple and Apple’s subsidiaries are third party beneficiaries of these Terms, and that upon your acceptance of these Terms, Apple will have the right (and will be deemed to have accepted the right) to enforce these Terms against you as the third party beneficiary hereof.

    What are roadmap.sh's Terms of Sale?

    If you purchase any goods or services or license any software through the site whether or not in connection with an Offer or Discount, in addition to agreeing to these Terms of Use, you are agreeing to the Terms of Sale, available here.

    What else do I need to know?

    Warranty Disclaimer. Neither roadmap.sh nor its licensors or suppliers makes any representations or warranties concerning any content contained in or accessed through the Services, and we will not be responsible or liable for the accuracy, copyright compliance, legality, or decency of material contained in or accessed through the Services. We (and our licensors and suppliers) make no representations or warranties regarding suggestions or recommendations of services or products offered or purchased through the Services. Products and services purchased or offered (whether or not following such recommendations and suggestions) through the Services are provided “AS IS” and without any warranty of any kind from roadmap.sh or others (unless, with respect to such others only, provided expressly and unambiguously in writing by a designated third party for a specific product). THE SERVICES AND CONTENT ARE PROVIDED BY ROADMAP.SH (AND ITS LICENSORS AND SUPPLIERS) ON AN “AS-IS” BASIS, WITHOUT WARRANTIES OR ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR THAT USE OF THE SERVICES WILL BE UNINTERRUPTED OR ERROR-FREE. SOME STATES DO NOT ALLOW LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY LASTS, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU.

    Limitation of Liability. TO THE FULLEST EXTENT ALLOWED BY APPLICABLE LAW, UNDER NO CIRCUMSTANCES AND UNDER NO LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, TORT, CONTRACT, STRICT LIABILITY, OR OTHERWISE) SHALL ROADMAP.SH (OR ITS LICENSORS OR SUPPLIERS) BE LIABLE TO YOU OR TO ANY OTHER PERSON FOR (A) ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND, INCLUDING DAMAGES FOR LOST PROFITS, LOSS OF GOODWILL, WORK STOPPAGE, ACCURACY OF RESULTS, OR COMPUTER FAILURE OR MALFUNCTION, OR (B) ANY AMOUNT, IN THE AGGREGATE, IN EXCESS OF THE GREATER OF (I) $100 OR (II) THE AMOUNTS PAID BY YOU TO ROADMAP.SH IN CONNECTION WITH THE SERVICES IN THE TWELVE (12) MONTH PERIOD PRECEDING THIS APPLICABLE CLAIM, OR (III) ANY MATTER BEYOND OUR REASONABLE CONTROL. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES, SO THE ABOVE LIMITATION AND EXCLUSIONS MAY NOT APPLY TO YOU.

    Indemnity. To the fullest extent allowed by applicable law, You agree to indemnify and hold roadmap.sh, its affiliates, officers, agents, employees, and partners harmless from and against any and all claims, liabilities, damages (actual and consequential), losses and expenses (including attorneys’ fees) arising from or in any way related to any third party claims relating to (a) your use of the Services (including any actions taken by a third party using your account), and (b) your violation of these Terms. In the event of such a claim, suit, or action (“Claim”), we will attempt to provide notice of the Claim to the contact information we have for your account (provided that failure to deliver such notice shall not eliminate or reduce your indemnification obligations hereunder).

    Assignment. You may not assign, delegate or transfer these Terms or your rights or obligations hereunder, or your Services account, in any way (by operation of law or otherwise) without roadmap.sh’s prior written consent. We may transfer, assign, or delegate these Terms and our rights and obligations without consent.

    Choice of Law; Arbitration. These Terms are governed by and will be construed under the laws of the State of California, without regard to the conflicts of laws provisions thereof. Any dispute arising from or relating to the subject matter of these Terms shall be finally settled in San Francisco County, California, in English, in accordance with the Streamlined Arbitration Rules and Procedures of Judicial Arbitration and Mediation Services, Inc. ("JAMS") then in effect, by one commercial arbitrator with substantial experience in resolving intellectual property and commercial contract disputes, who shall be selected from the appropriate list of JAMS arbitrators in accordance with such Rules. Judgment upon the award rendered by such arbitrator may be entered in any court of competent jurisdiction. Notwithstanding the foregoing obligation to arbitrate disputes, each party shall have the right to pursue injunctive or other equitable relief at any time, from any court of competent jurisdiction. For all purposes of this Agreement, the parties consent to exclusive jurisdiction and venue in the state or federal courts located in, respectively, San Francisco County, California, or the Northern District of California. Any arbitration under this Agreement will take place on an individual basis: class arbitrations and class actions are not permitted. YOU UNDERSTAND AND AGREE THAT BY ENTERING INTO THIS AGREEMENT, YOU AND ROADMAP.SH ARE EACH WAIVING THE RIGHT TO TRIAL BY JURY OR TO PARTICIPATE IN A CLASS ACTION.

    Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit. The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Terms of Service

    PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER.

    Welcome to roadmap.sh. Please read on to learn the rules and restrictions that govern your use of our website(s), products, services and applications (the “Services”). If you have any questions, comments, or concerns regarding these terms or the Services, please contact us at kamranahmed.se@gmail.com.

    These Terms of Use (the “Terms”) are a binding contract between you and roadmap.sh (“roadmap.sh,” “we”, and “us”). You must agree to and accept all of the Terms, or you don’t have the right to use the Services. Your using the Services in any way means that you agree to all of these Terms, and these Terms will remain in effect while you use the Services. These Terms include the provisions in this document, as well as those in the Privacy Policy and Copyright Dispute Policy.

    Will these Terms ever change?

    We are constantly trying to improve our Services, so these Terms may need to change along with the Services. We reserve the right to change the Terms at any time, but if we do, we will bring it to your attention by updating the terms on the roadmap.sh website, by sending you an email, and/or by some other means.

    If you don’t agree with the new Terms, you are free to reject them, however it means you will no longer be able to use the Services. If you use the Services in any way after a change to the Terms is effective, that means you agree to all of the changes.

    Except for changes by us as described here, no other amendment or modification of these Terms will be effective unless in writing and signed by both you and us.

    Do these terms cover privacy?

    You can view the current roadmap.sh Privacy Policy here.

    The Children’s Online Privacy Protection Act (“COPPA”) requires that online service providers obtain parental consent before they knowingly collect personally identifiable information online from children who are under 13. We do not knowingly collect or solicit personally identifiable information from children under 13. If you are a child under 13, please do not attempt to register for the Services or send any personal information about yourself to us. If we learn we have collected personal information from a child under 13, we will delete that information as quickly as possible. If you believe that a child under 13 may have provided us personal information, please contact us at kamranahmed.se@gmail.com.

    What are the basics of using roadmap.sh?

    You may be required to sign up for an account, and select a password and username. You agree to provide us with accurate, complete, and up-to-date registration information about yourself. You may not select as your username a name that you don’t have the right to use, or another person’s name with the intent to impersonate that person. You may not transfer your account to anyone else without our prior written permission.

    You represent and warrant that you are an individual of legal age to form a binding contract, or if not, you’ve received your parent’s or guardian’s permission to use the Services and gotten your parent or guardian to agree to these Terms on your behalf.

    You will only use the Services for your own internal, personal, non-commercial use, and not on behalf of or for the benefit of any third party, and only in a manner that complies with all laws that apply to you. If your use of the Services is prohibited by applicable laws, then you aren’t authorized to use the Services. We can’t and won’t be responsible for your using the Services in a way that breaks the law.

    You will not share your account or password with anyone, and you must protect the security of your account and your password. You’re responsible for any activity associated with your account.

    Your use of the Services is subject to the following additional restrictions:

    You represent, warrant, and agree that you will not contribute any Content or User Submission (each of those terms is defined below) or otherwise use the Services or interact with the Services in a manner that:

    (a) Infringes or violates the intellectual property rights or any other rights of anyone else (including roadmap.sh); (b) Violates any law or regulation, including any applicable export control laws; (c) Is harmful, fraudulent, deceptive, threatening, harassing, defamatory, obscene, or otherwise objectionable; (d) Jeopardizes the security of your roadmap.sh account or anyone else’s (such as allowing someone else to log in to the Services as you); (e) Attempts, in any manner, to obtain the password, account, or other security information from any other user; (f) Violates the security of any computer network, or cracks any passwords or security encryption codes; (g) Runs Maillist, Listserv, any form of auto-responder or “spam” on the Services, or any processes that run or are activated while you are not logged into the Services, or that otherwise interfere with the proper working of the Services (including by placing an unreasonable load on the Services’ infrastructure); (h) “Crawls,” “scrapes,” or “spiders” any page, data, or portion of or relating to the Services or Content (through use of manual or automated means); (i) Copies or stores any significant portion of the Content; (j) Decompiles, reverse engineers, or otherwise attempts to obtain the source code or underlying ideas or information of or relating to the Services.

    A violation of any of the foregoing is grounds for termination of your right to use or access the Services.

    What are my rights in roadmap.sh?

    The materials displayed or performed or available on or through the Services, including, but not limited to, text, graphics, data, articles, photos, images, illustrations, User Submissions, and so forth (all of the foregoing, the “Content”) are protected by copyright and/or other intellectual property laws. You promise to abide by all copyright notices, trademark rules, information, and restrictions contained in any Content you access through the Services, and you won’t use, copy, reproduce, modify, translate, publish, broadcast, transmit, distribute, perform, upload, display, license, sell or otherwise exploit for any purpose any Content not owned by you, (i) without the prior consent of the owner of that Content or (ii) in a way that violates someone else’s (including roadmap.sh’s) rights.

    You understand that roadmap.sh owns the Services. You won’t modify, publish, transmit, participate in the transfer or sale of, reproduce (except as expressly provided in this Section), create derivative works based on, or otherwise exploit any of the Services.

    The Services may allow you to copy or download certain Content; please remember that just because this functionality exists, doesn’t mean that all the restrictions above don’t apply – they do!

    Do I have to grant any licenses to roadmap.sh or to other users?

    Anything you post, upload, share, store, or otherwise provide through the Services is your “User Submission.” Some User Submissions are viewable by other users. In order to display your User Submissions on the Services, and to allow other users to enjoy them (where applicable), you grant us certain rights in those User Submissions. Please note that all of the following licenses are subject to our Privacy Policy to the extent they relate to User Submissions that are also your personally-identifiable information.

    For all User Submissions, you hereby grant roadmap.sh a license to translate, modify (for technical purposes, for example making sure your content is viewable on an iPhone as well as a computer) and reproduce and otherwise act with respect to such User Submissions, in each case to enable us to operate the Services, as described in more detail below. This is a license only – your ownership in User Submissions is not affected.

    If you store a User Submission in your own personal roadmap.sh account, in a manner that is not viewable by any other user except you (a “Personal User Submission”), you grant roadmap.sh the license above, as well as a license to display, perform, and distribute your Personal User Submission for the sole purpose of making that Personal User Submission accessible to you and providing the Services necessary to do so.

    If you share a User Submission only in a manner that only certain specified users can view (for example, a private message to one or more other users) (a “Limited Audience User Submission”), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Limited Audience User Submission for the sole purpose of making that Limited Audience User Submission accessible to such other specified users, and providing the Services necessary to do so. Also, you grant such other specified users a license to access that Limited Audience User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services.

    If you share a User Submission publicly on the Services and/or in a manner that more than just you or certain specified users can view, or if you provide us (in a direct email or otherwise) with any feedback, suggestions, improvements, enhancements, and/or feature requests relating to the Services] (each of the foregoing, a “Public User Submission”), then you grant roadmap.sh the licenses above, as well as a license to display, perform, and distribute your Public User Submission for the purpose of making that Public User Submission accessible to all roadmap.sh users and providing the Services necessary to do so, as well as all other rights necessary to use and exercise all rights in that Public User Submission in connection with the Services and/or otherwise in connection with roadmap.sh’s business for any purpose, provided that roadmap.sh will try to notify you if it uses your Public User Submission for any reason other than displaying it on the Services. Also, you grant all other users of the Services a license to access that Public User Submission, and to use and exercise all rights in it, as permitted by the functionality of the Services.

    You agree that the licenses you grant are royalty-free, perpetual, sublicenseable, irrevocable, and worldwide, provided that when you delete your roadmap.sh account, we will stop displaying your User Submissions (other than Public User Submissions, which may remain fully available)] to other users (if applicable), but you understand and agree that it may not be possible to completely delete that content from roadmap.sh’s records, and that your User Submissions may remain viewable elsewhere to the extent that they were copied or stored by other users.

    Finally, you understand and agree that roadmap.sh, in performing the required technical steps to provide the Services to our users (including you), may need to make changes to your User Submissions to conform and adapt those User Submissions to the technical requirements of connection networks, devices, services, or media, and the foregoing licenses include the rights to do so.

    What if I see something on the Services that infringes my copyright?

    You may have heard of the Digital Millennium Copyright Act (the “DMCA”), as it relates to online service providers, like roadmap.sh, being asked to remove material that allegedly violates someone’s copyright. We respect others’ intellectual property rights, and we reserve the right to delete or disable Content alleged to be infringing, and to terminate the accounts of repeat alleged infringers.

    Who is responsible for what I see and do on the Services?

    Any information or content publicly posted or privately transmitted through the Services is the sole responsibility of the person from whom such content originated, and you access all such information and content at your own risk, and we aren’t liable for any errors or omissions in that information or content or for any damages or loss you might suffer in connection with it. We cannot control and have no duty to take any action regarding how you may interpret and use the Content or what actions you may take as a result of having been exposed to the Content, and you hereby release us from all liability for you having acquired or not acquired Content through the Services. We can’t guarantee the identity of any users with whom you interact in using the Services and are not responsible for which users gain access to the Services.

    You are responsible for all Content you contribute, in any manner, to the Services, and you represent and warrant you have all rights necessary to do so, in the manner in which you contribute it. You will keep all your registration information accurate and current. You are responsible for all your activity in connection with the Services.

    The Services may contain links or connections to third party websites or services that are not owned or controlled by roadmap.sh. When you access third party websites or use third party services, you accept that there are risks in doing so, and that roadmap.sh is not responsible for such risks. We encourage you to be aware when you leave the Services and to read the terms and conditions and privacy policy of each third party website or service that you visit or utilize.

    roadmap.sh has no control over, and assumes no responsibility for, the content, accuracy, privacy policies, or practices of or opinions expressed in any third party websites or by any third party that you interact with through the Services. In addition, roadmap.sh will not and cannot monitor, verify, censor or edit the content of any third party site or service. By using the Services, you release and hold us harmless from any and all liability arising from your use of any third party website or service.

    Your interactions with organizations and/or individuals found on or through the Services, including payment and delivery of goods or services, and any other terms, conditions, warranties or representations associated with such dealings, are solely between you and such organizations and/or individuals. You should make whatever investigation you feel necessary or appropriate before proceeding with any online or offline transaction with any of these third parties. You agree that roadmap.sh shall not be responsible or liable for any loss or damage of any sort incurred as the result of any such dealings.

    If there is a dispute between participants on this site, or between users and any third party, you agree that roadmap.sh is under no obligation to become involved. In the event that you have a dispute with one or more other users, you release roadmap.sh, its officers, employees, agents, and successors from claims, demands, and damages of every kind or nature, known or unknown, suspected or unsuspected, disclosed or undisclosed, arising out of or in any way related to such disputes and/or our Services. If you are a California resident, you shall and hereby do waive California Civil Code Section 1542, which says: "A general release does not extend to claims which the creditor does not know or suspect to exist in his or her favor at the time of executing the release, which, if known by him or her must have materially affected his or her settlement with the debtor."

    Will roadmap.sh ever change the Services?

    We’re always trying to improve the Services, so they may change over time. We may suspend or discontinue any part of the Services, or we may introduce new features or impose limits on certain features or restrict access to parts or all of the Services. We’ll try to give you notice when we make a material change to the Services that would adversely affect you, but this isn’t always practical. Similarly, we reserve the right to remove any Content from the Services at any time, for any reason (including, but not limited to, if someone alleges you contributed that Content in violation of these Terms), in our sole discretion, and without notice.

    Does roadmap.sh cost anything?

    The roadmap.sh Services are currently free, but we reserve the right to charge for certain or all Services in the future. We will notify you before any Services you are then using begin carrying a fee, and if you wish to continue using such Services, you must pay all applicable fees for such Services.

    What if I want to stop using roadmap.sh?

    You’re free to do that at any time, by contacting us at kamranahmed.se@gmail.com; please refer to our Privacy Policy, as well as the licenses above, to understand how we treat information you provide to us after you have stopped using our Services. roadmap.sh is also free to terminate (or suspend access to) your use of the Services or your account, for any reason in our discretion, including your breach of these Terms. roadmap.sh has the sole right to decide whether you are in violation of any of the restrictions set forth in these Terms.

    Account termination may result in destruction of any Content associated with your account, so keep that in mind before you decide to terminate your account. We will try to provide advance notice to you prior to our terminating your account so that you are able to retrieve any important User Submissions you may have stored in your account (to the extent allowed by law and these Terms), but we may not do so if we determine it would be impractical, illegal, not in the interest of someone’s safety or security, or otherwise harmful to the rights or property of roadmap.sh.

    Provisions that, by their nature, should survive termination of these Terms shall survive termination. By way of example, all of the following will survive termination: any obligation you have to pay us or indemnify us, any limitations on our liability, any terms regarding ownership or intellectual property rights, and terms regarding disputes between us.

    What if I use roadmap.sh via an app available on the Apple App Store?

    These Terms apply to your use of all the Services, including the iOS applications available via the Apple, Inc. (“Apple”) App Store (the “Application”), but the following additional terms also apply to the Application:

    (a) Both you and roadmap.sh acknowledge that the Terms are concluded between you and roadmap.sh only, and not with Apple, and that Apple is not responsible for the Application or the Content; (b) The Application is licensed to you on a limited, non-exclusive, non-transferrable, non-sublicensable basis, solely to be used in connection with the Services for your private, personal, non-commercial use, subject to all the terms and conditions of these Terms as they are applicable to the Services; (c) You will only use the Application in connection with an Apple device that you own or control; (d) You acknowledge and agree that Apple has no obligation whatsoever to furnish any maintenance and support services with respect to the Application; (e) In the event of any failure of the Application to conform to any applicable warranty, including those implied by law, you may notify Apple of such failure; upon notification, Apple’s sole warranty obligation to you will be to refund to you the purchase price, if any, of the Application; (f) You acknowledge and agree that roadmap.sh, and not Apple, is responsible for addressing any claims you or any third party may have in relation to the Application; (g) You acknowledge and agree that, in the event of any third party claim that the Application or your possession and use of the Application infringes that third party’s intellectual property rights, roadmap.sh, and not Apple, will be responsible for the investigation, defense, settlement and discharge of any such infringement claim; (h) You represent and warrant that you are not located in a country subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a “terrorist supporting” country, and that you are not listed on any U.S. Government list of prohibited or restricted parties; (i) Both you and roadmap.sh acknowledge and agree that, in your use of the Application, you will comply with any applicable third party terms of agreement which may affect or be affected by such use; and (j) Both you and roadmap.sh acknowledge and agree that Apple and Apple’s subsidiaries are third party beneficiaries of these Terms, and that upon your acceptance of these Terms, Apple will have the right (and will be deemed to have accepted the right) to enforce these Terms against you as the third party beneficiary hereof.

    What are roadmap.sh's Terms of Sale?

    If you purchase any goods or services or license any software through the site whether or not in connection with an Offer or Discount, in addition to agreeing to these Terms of Use, you are agreeing to the Terms of Sale, available here.

    What else do I need to know?

    Warranty Disclaimer. Neither roadmap.sh nor its licensors or suppliers makes any representations or warranties concerning any content contained in or accessed through the Services, and we will not be responsible or liable for the accuracy, copyright compliance, legality, or decency of material contained in or accessed through the Services. We (and our licensors and suppliers) make no representations or warranties regarding suggestions or recommendations of services or products offered or purchased through the Services. Products and services purchased or offered (whether or not following such recommendations and suggestions) through the Services are provided “AS IS” and without any warranty of any kind from roadmap.sh or others (unless, with respect to such others only, provided expressly and unambiguously in writing by a designated third party for a specific product). THE SERVICES AND CONTENT ARE PROVIDED BY ROADMAP.SH (AND ITS LICENSORS AND SUPPLIERS) ON AN “AS-IS” BASIS, WITHOUT WARRANTIES OR ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR THAT USE OF THE SERVICES WILL BE UNINTERRUPTED OR ERROR-FREE. SOME STATES DO NOT ALLOW LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY LASTS, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU.

    Limitation of Liability. TO THE FULLEST EXTENT ALLOWED BY APPLICABLE LAW, UNDER NO CIRCUMSTANCES AND UNDER NO LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, TORT, CONTRACT, STRICT LIABILITY, OR OTHERWISE) SHALL ROADMAP.SH (OR ITS LICENSORS OR SUPPLIERS) BE LIABLE TO YOU OR TO ANY OTHER PERSON FOR (A) ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND, INCLUDING DAMAGES FOR LOST PROFITS, LOSS OF GOODWILL, WORK STOPPAGE, ACCURACY OF RESULTS, OR COMPUTER FAILURE OR MALFUNCTION, OR (B) ANY AMOUNT, IN THE AGGREGATE, IN EXCESS OF THE GREATER OF (I) $100 OR (II) THE AMOUNTS PAID BY YOU TO ROADMAP.SH IN CONNECTION WITH THE SERVICES IN THE TWELVE (12) MONTH PERIOD PRECEDING THIS APPLICABLE CLAIM, OR (III) ANY MATTER BEYOND OUR REASONABLE CONTROL. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES, SO THE ABOVE LIMITATION AND EXCLUSIONS MAY NOT APPLY TO YOU.

    Indemnity. To the fullest extent allowed by applicable law, You agree to indemnify and hold roadmap.sh, its affiliates, officers, agents, employees, and partners harmless from and against any and all claims, liabilities, damages (actual and consequential), losses and expenses (including attorneys’ fees) arising from or in any way related to any third party claims relating to (a) your use of the Services (including any actions taken by a third party using your account), and (b) your violation of these Terms. In the event of such a claim, suit, or action (“Claim”), we will attempt to provide notice of the Claim to the contact information we have for your account (provided that failure to deliver such notice shall not eliminate or reduce your indemnification obligations hereunder).

    Assignment. You may not assign, delegate or transfer these Terms or your rights or obligations hereunder, or your Services account, in any way (by operation of law or otherwise) without roadmap.sh’s prior written consent. We may transfer, assign, or delegate these Terms and our rights and obligations without consent.

    Choice of Law; Arbitration. These Terms are governed by and will be construed under the laws of the State of California, without regard to the conflicts of laws provisions thereof. Any dispute arising from or relating to the subject matter of these Terms shall be finally settled in San Francisco County, California, in English, in accordance with the Streamlined Arbitration Rules and Procedures of Judicial Arbitration and Mediation Services, Inc. ("JAMS") then in effect, by one commercial arbitrator with substantial experience in resolving intellectual property and commercial contract disputes, who shall be selected from the appropriate list of JAMS arbitrators in accordance with such Rules. Judgment upon the award rendered by such arbitrator may be entered in any court of competent jurisdiction. Notwithstanding the foregoing obligation to arbitrate disputes, each party shall have the right to pursue injunctive or other equitable relief at any time, from any court of competent jurisdiction. For all purposes of this Agreement, the parties consent to exclusive jurisdiction and venue in the state or federal courts located in, respectively, San Francisco County, California, or the Northern District of California. Any arbitration under this Agreement will take place on an individual basis: class arbitrations and class actions are not permitted. YOU UNDERSTAND AND AGREE THAT BY ENTERING INTO THIS AGREEMENT, YOU AND ROADMAP.SH ARE EACH WAIVING THE RIGHT TO TRIAL BY JURY OR TO PARTICIPATE IN A CLASS ACTION.

    Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit. The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/thanks.html b/thanks.html index 2704a7370..fe4e7f656 100644 --- a/thanks.html +++ b/thanks.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Thanks!

    The project has been made possible by the all the wonderful humans and companies supporting the project on GitHub Sponsors and we are truly grateful for that.

    Companies

    park.io

    Monthly Sponsors

    • Josue V
    • Novecento88
    • Myroslav
    • Gerald-Markus Zabos
    • Ahmed Bebars
    • Hassan Abudu
    • Stuart Bowles
    • Joseph Jacks
    • Mustafa Magdi

    Past or One Time Sponsors

    Support the Project

    Sponsor me on GitHub to help ensure the continuity of the project.

    Sponsor me on GitHub

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Thanks!

    The project has been made possible by the all the wonderful humans and companies supporting the project on GitHub Sponsors and we are truly grateful for that.

    Companies

    park.io

    Monthly Sponsors

    • Josue V
    • Novecento88
    • Myroslav
    • Gerald-Markus Zabos
    • Ahmed Bebars
    • Hassan Abudu
    • Stuart Bowles
    • Joseph Jacks
    • Mustafa Magdi

    Past or One Time Sponsors

    Support the Project

    Sponsor me on GitHub to help ensure the continuity of the project.

    Sponsor me on GitHub

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch.html b/watch.html index 3ff71ac3c..d2f9b0512 100644 --- a/watch.html +++ b/watch.html @@ -3,4 +3,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Watch

    Graphical video demonstrations on development topics

    NewNovember 30, 2021

    What is Eventual Consistency?

    Learn about the different consistency models in distributed systems

    NewNovember 25, 2021

    SSH vs TLS vs SSL

    Learn the difference between SSH, TLS and SSL

    November 14, 2021

    Asynchronous JavaScript

    Learn how to write asynchronous JavaScript using Async/Await

    November 3, 2021

    Random Number Generators

    How do random number generators work?

    October 25, 2021

    Big O Notation

    Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.

    October 18, 2021

    YAML in Depth

    Everything you need to know about YAML

    October 10, 2021

    Floating Point Arithmetic

    Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.

    October 5, 2021

    What is CAP Theorem?

    An illustrated explanation to CAP theorem with examples and proof.

    September 26, 2021

    ACID Explained

    Learn what it means for a database to be ACID compliant with examples.

    November 21, 2020

    Transport Protocols: TCP vs UDP

    Learn about the Transport Layer of the TCP/IP model and different transport protocols.

    November 6, 2020

    TCP/IP Model Explained

    Learn what is TCP/IP Model and the different layers involved.

    October 24, 2020

    OSI Model Explained

    Learn what is OSI Model and the different layers involved.

    October 16, 2020

    Freeze and Seal in JavaScript

    Learn what is OSI Model and the different layers involved.

    October 4, 2020

    All about HTTP Caching

    Learn what is HTTP caching, places for caching and different caching headers.

    September 26, 2020

    Content Delivery Networks

    Learn what the CDNs are and the difference between push CDN vs pull CDN.

    September 18, 2020

    Load Balancers 101

    Learn the basics of load balancers, types and different algorithms.

    August 31, 2020

    DNS Records

    Learn what the DNS is and how a website is found on the internet.

    August 17, 2020

    DNS and how does it work?

    Learn what the DNS is and how a website is found on the internet.

    August 8, 2020

    System Design 101

    Learn about all the bits and pieces of system design.

    August 2, 2020

    JavaScript Fetch API

    Learn how to use JavaScript's Fetch API to interact with remote API.

    July 26, 2020

    Scaling the Unscalable

    Learn the basics of System Design and understand how to build a scalable application.

    July 20, 2020

    All about Promises in JavaScript

    Learn how to write asynchronous code in JavaScript using promises.

    July 20, 2020

    DOM, Shadow DOM, Virtual DOM

    Learn what is DOM, Shadow DOM and Virtual DOM and how they work.

    July 13, 2020

    Automate with GitHub Actions

    Learn how to implement CI/CD with GitHub Actions

    July 9, 2020

    Practical Introduction to React

    Learn how to create a React Application with practical example.

    July 4, 2020

    What is Dependency Injection?

    Learn what is dependency injection and how to write better code with the help of it.

    July 3, 2020

    How to use CSS Variables?

    Learn how to write scalable CSS using CSS Variables.

    May 9, 2020

    Arrays and Objects in JavaScript

    Learn how to manipulate arrays and objects in JavaScript.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe

    Watch

    Graphical video demonstrations on development topics

    NewNovember 30, 2021

    What is Eventual Consistency?

    Learn about the different consistency models in distributed systems

    NewNovember 25, 2021

    SSH vs TLS vs SSL

    Learn the difference between SSH, TLS and SSL

    November 14, 2021

    Asynchronous JavaScript

    Learn how to write asynchronous JavaScript using Async/Await

    November 3, 2021

    Random Number Generators

    How do random number generators work?

    October 25, 2021

    Big O Notation

    Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.

    October 18, 2021

    YAML in Depth

    Everything you need to know about YAML

    October 10, 2021

    Floating Point Arithmetic

    Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.

    October 5, 2021

    What is CAP Theorem?

    An illustrated explanation to CAP theorem with examples and proof.

    September 26, 2021

    ACID Explained

    Learn what it means for a database to be ACID compliant with examples.

    November 21, 2020

    Transport Protocols: TCP vs UDP

    Learn about the Transport Layer of the TCP/IP model and different transport protocols.

    November 6, 2020

    TCP/IP Model Explained

    Learn what is TCP/IP Model and the different layers involved.

    October 24, 2020

    OSI Model Explained

    Learn what is OSI Model and the different layers involved.

    October 16, 2020

    Freeze and Seal in JavaScript

    Learn what is OSI Model and the different layers involved.

    October 4, 2020

    All about HTTP Caching

    Learn what is HTTP caching, places for caching and different caching headers.

    September 26, 2020

    Content Delivery Networks

    Learn what the CDNs are and the difference between push CDN vs pull CDN.

    September 18, 2020

    Load Balancers 101

    Learn the basics of load balancers, types and different algorithms.

    August 31, 2020

    DNS Records

    Learn what the DNS is and how a website is found on the internet.

    August 17, 2020

    DNS and how does it work?

    Learn what the DNS is and how a website is found on the internet.

    August 8, 2020

    System Design 101

    Learn about all the bits and pieces of system design.

    August 2, 2020

    JavaScript Fetch API

    Learn how to use JavaScript's Fetch API to interact with remote API.

    July 26, 2020

    Scaling the Unscalable

    Learn the basics of System Design and understand how to build a scalable application.

    July 20, 2020

    All about Promises in JavaScript

    Learn how to write asynchronous code in JavaScript using promises.

    July 20, 2020

    DOM, Shadow DOM, Virtual DOM

    Learn what is DOM, Shadow DOM and Virtual DOM and how they work.

    July 13, 2020

    Automate with GitHub Actions

    Learn how to implement CI/CD with GitHub Actions

    July 9, 2020

    Practical Introduction to React

    Learn how to create a React Application with practical example.

    July 4, 2020

    What is Dependency Injection?

    Learn what is dependency injection and how to write better code with the help of it.

    July 3, 2020

    How to use CSS Variables?

    Learn how to write scalable CSS using CSS Variables.

    May 9, 2020

    Arrays and Objects in JavaScript

    Learn how to manipulate arrays and objects in JavaScript.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/acid-explained.html b/watch/acid-explained.html index e5ce4f545..e9f365791 100644 --- a/watch/acid-explained.html +++ b/watch/acid-explained.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 26, 2021·Watch on YouTube

    ACID Explained

    Learn what it means for a database to be ACID compliant with examples.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 26, 2021·Watch on YouTube

    ACID Explained

    Learn what it means for a database to be ACID compliant with examples.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/all-about-http-caching.html b/watch/all-about-http-caching.html index 5a6cd34bc..1bb1b9e99 100644 --- a/watch/all-about-http-caching.html +++ b/watch/all-about-http-caching.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 4, 2020·Watch on YouTube

    All about HTTP Caching

    Learn what is HTTP caching, places for caching and different caching headers.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 4, 2020·Watch on YouTube

    All about HTTP Caching

    Learn what is HTTP caching, places for caching and different caching headers.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/arrays-and-objects-in-javascript.html b/watch/arrays-and-objects-in-javascript.html index fb17ec77c..1e060d1e1 100644 --- a/watch/arrays-and-objects-in-javascript.html +++ b/watch/arrays-and-objects-in-javascript.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 9, 2020·Watch on YouTube

    Arrays and Objects in JavaScript

    Learn how to manipulate arrays and objects in JavaScript.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·May 9, 2020·Watch on YouTube

    Arrays and Objects in JavaScript

    Learn how to manipulate arrays and objects in JavaScript.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/async-javascript.html b/watch/async-javascript.html index 1c3c99b40..120730809 100644 --- a/watch/async-javascript.html +++ b/watch/async-javascript.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 14, 2021·Watch on YouTube

    Asynchronous JavaScript

    Learn how to write asynchronous JavaScript using Async/Await

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 14, 2021·Watch on YouTube

    Asynchronous JavaScript

    Learn how to write asynchronous JavaScript using Async/Await

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/big-o-notation.html b/watch/big-o-notation.html index 58c03ba22..2ff326f2f 100644 --- a/watch/big-o-notation.html +++ b/watch/big-o-notation.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 25, 2021·Watch on YouTube

    Big O Notation

    Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 25, 2021·Watch on YouTube

    Big O Notation

    Learn what the Big-O notation is and how to calculate the time complexity of an algorithm.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/content-delivery-networks.html b/watch/content-delivery-networks.html index 8cec86512..ead4ff3d7 100644 --- a/watch/content-delivery-networks.html +++ b/watch/content-delivery-networks.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 26, 2020·Watch on YouTube

    Content Delivery Networks

    Learn what the CDNs are and the difference between push CDN vs pull CDN.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 26, 2020·Watch on YouTube

    Content Delivery Networks

    Learn what the CDNs are and the difference between push CDN vs pull CDN.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/dns-explained.html b/watch/dns-explained.html index 93a4b8cbe..294e958d3 100644 --- a/watch/dns-explained.html +++ b/watch/dns-explained.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 17, 2020·Watch on YouTube

    DNS and how does it work?

    Learn what the DNS is and how a website is found on the internet.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 17, 2020·Watch on YouTube

    DNS and how does it work?

    Learn what the DNS is and how a website is found on the internet.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/dns-records.html b/watch/dns-records.html index 99cede81f..5a079c605 100644 --- a/watch/dns-records.html +++ b/watch/dns-records.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 31, 2020·Watch on YouTube

    DNS Records

    Learn what the DNS is and how a website is found on the internet.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 31, 2020·Watch on YouTube

    DNS Records

    Learn what the DNS is and how a website is found on the internet.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/floating-point-arithmetic.html b/watch/floating-point-arithmetic.html index da1ca900b..ad753b71f 100644 --- a/watch/floating-point-arithmetic.html +++ b/watch/floating-point-arithmetic.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 10, 2021·Watch on YouTube

    Floating Point Arithmetic

    Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 10, 2021·Watch on YouTube

    Floating Point Arithmetic

    Learn how ow the arithmetic operations work on floating-point numbers and why the results might be different from what you may expect.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/freeze-and-seal-objects-in-javascript.html b/watch/freeze-and-seal-objects-in-javascript.html index f0c5aef27..fae148a74 100644 --- a/watch/freeze-and-seal-objects-in-javascript.html +++ b/watch/freeze-and-seal-objects-in-javascript.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 16, 2020·Watch on YouTube

    Freeze and Seal in JavaScript

    Learn what is OSI Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 16, 2020·Watch on YouTube

    Freeze and Seal in JavaScript

    Learn what is OSI Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/how-to-use-css-variables.html b/watch/how-to-use-css-variables.html index 182f91a3e..d90f9e7ad 100644 --- a/watch/how-to-use-css-variables.html +++ b/watch/how-to-use-css-variables.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 3, 2020·Watch on YouTube

    How to use CSS Variables?

    Learn how to write scalable CSS using CSS Variables.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 3, 2020·Watch on YouTube

    How to use CSS Variables?

    Learn how to write scalable CSS using CSS Variables.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/how-to-use-github-actions.html b/watch/how-to-use-github-actions.html index 8af3ef61a..542a3b969 100644 --- a/watch/how-to-use-github-actions.html +++ b/watch/how-to-use-github-actions.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 13, 2020·Watch on YouTube

    Automate with GitHub Actions

    Learn how to implement CI/CD with GitHub Actions

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 13, 2020·Watch on YouTube

    Automate with GitHub Actions

    Learn how to implement CI/CD with GitHub Actions

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/javascript-fetch-api.html b/watch/javascript-fetch-api.html index 61ab4abd6..1150fe2f5 100644 --- a/watch/javascript-fetch-api.html +++ b/watch/javascript-fetch-api.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 2, 2020·Watch on YouTube

    JavaScript Fetch API

    Learn how to use JavaScript's Fetch API to interact with remote API.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 2, 2020·Watch on YouTube

    JavaScript Fetch API

    Learn how to use JavaScript's Fetch API to interact with remote API.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/load-balancers-101.html b/watch/load-balancers-101.html index 79df441ba..a4eacd2fe 100644 --- a/watch/load-balancers-101.html +++ b/watch/load-balancers-101.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 18, 2020·Watch on YouTube

    Load Balancers 101

    Learn the basics of load balancers, types and different algorithms.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·September 18, 2020·Watch on YouTube

    Load Balancers 101

    Learn the basics of load balancers, types and different algorithms.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/osi-model.html b/watch/osi-model.html index b91845fff..b02e3b72b 100644 --- a/watch/osi-model.html +++ b/watch/osi-model.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 24, 2020·Watch on YouTube

    OSI Model Explained

    Learn what is OSI Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 24, 2020·Watch on YouTube

    OSI Model Explained

    Learn what is OSI Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/practical-intro-to-react.html b/watch/practical-intro-to-react.html index 1e40e331b..071464437 100644 --- a/watch/practical-intro-to-react.html +++ b/watch/practical-intro-to-react.html @@ -3,7 +3,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 9, 2020·Watch on YouTube

    Practical Introduction to React

    Learn how to create a React Application with practical example.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub's API and shows you in the form of listing.

    If you want to get an idea of what we are going to be building have a look at GitHunt. Also the complete source code can be found at @kamranahmedse/githunt

    Intro and Basic Setup

    The video below gives you the basic introduction about the project and explains what we are going to build.

    Building the Interface

    In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application.

    Building the View Switcher

    In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the "Grid View" and the "List View" and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.

    Fetching Remote Data

    Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 9, 2020·Watch on YouTube

    Practical Introduction to React

    Learn how to create a React Application with practical example.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub's API and shows you in the form of listing.

    If you want to get an idea of what we are going to be building have a look at GitHunt. Also the complete source code can be found at @kamranahmedse/githunt

    Intro and Basic Setup

    The video below gives you the basic introduction about the project and explains what we are going to build.

    Building the Interface

    In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application.

    Building the View Switcher

    In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the "Grid View" and the "List View" and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.

    Fetching Remote Data

    Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/promises-in-javascript.html b/watch/promises-in-javascript.html index faf592304..dc9387543 100644 --- a/watch/promises-in-javascript.html +++ b/watch/promises-in-javascript.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 20, 2020·Watch on YouTube

    All about Promises in JavaScript

    Learn how to write asynchronous code in JavaScript using promises.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 20, 2020·Watch on YouTube

    All about Promises in JavaScript

    Learn how to write asynchronous code in JavaScript using promises.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/random-number-generators.html b/watch/random-number-generators.html index 60b2bc86d..f71ac265e 100644 --- a/watch/random-number-generators.html +++ b/watch/random-number-generators.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 3, 2021·Watch on YouTube

    Random Number Generators

    How do random number generators work?

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 3, 2021·Watch on YouTube

    Random Number Generators

    How do random number generators work?

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/scaling-the-unscalable.html b/watch/scaling-the-unscalable.html index c112d3be9..015fab8bf 100644 --- a/watch/scaling-the-unscalable.html +++ b/watch/scaling-the-unscalable.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 26, 2020·Watch on YouTube

    Scaling the Unscalable

    Learn the basics of System Design and understand how to build a scalable application.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 26, 2020·Watch on YouTube

    Scaling the Unscalable

    Learn the basics of System Design and understand how to build a scalable application.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/ssh-ssl-tls.html b/watch/ssh-ssl-tls.html index 05a97332c..4c040fc7a 100644 --- a/watch/ssh-ssl-tls.html +++ b/watch/ssh-ssl-tls.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 25, 2021·Watch on YouTube

    SSH vs TLS vs SSL

    Learn the difference between SSH, TLS and SSL

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 25, 2021·Watch on YouTube

    SSH vs TLS vs SSL

    Learn the difference between SSH, TLS and SSL

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/system-design-101.html b/watch/system-design-101.html index 8656ee629..01508370c 100644 --- a/watch/system-design-101.html +++ b/watch/system-design-101.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 8, 2020·Watch on YouTube

    System Design 101

    Learn about all the bits and pieces of system design.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·August 8, 2020·Watch on YouTube

    System Design 101

    Learn about all the bits and pieces of system design.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/tcp-ip-model.html b/watch/tcp-ip-model.html index 35cae4c9c..c0b9a559c 100644 --- a/watch/tcp-ip-model.html +++ b/watch/tcp-ip-model.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 6, 2020·Watch on YouTube

    TCP/IP Model Explained

    Learn what is TCP/IP Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 6, 2020·Watch on YouTube

    TCP/IP Model Explained

    Learn what is TCP/IP Model and the different layers involved.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/transport-protocols-tcp-vs-udp.html b/watch/transport-protocols-tcp-vs-udp.html index 6e3fd8efb..77eec9362 100644 --- a/watch/transport-protocols-tcp-vs-udp.html +++ b/watch/transport-protocols-tcp-vs-udp.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 21, 2020·Watch on YouTube

    Transport Protocols: TCP vs UDP

    Learn about the Transport Layer of the TCP/IP model and different transport protocols.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 21, 2020·Watch on YouTube

    Transport Protocols: TCP vs UDP

    Learn about the Transport Layer of the TCP/IP model and different transport protocols.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/what-is-cap-theorem.html b/watch/what-is-cap-theorem.html index 6d306e007..57f11ce5b 100644 --- a/watch/what-is-cap-theorem.html +++ b/watch/what-is-cap-theorem.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 5, 2021·Watch on YouTube

    What is CAP Theorem?

    An illustrated explanation to CAP theorem with examples and proof.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 5, 2021·Watch on YouTube

    What is CAP Theorem?

    An illustrated explanation to CAP theorem with examples and proof.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/what-is-dependency-injection.html b/watch/what-is-dependency-injection.html index 6f891f4d3..847a47ceb 100644 --- a/watch/what-is-dependency-injection.html +++ b/watch/what-is-dependency-injection.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 4, 2020·Watch on YouTube

    What is Dependency Injection?

    Learn what is dependency injection and how to write better code with the help of it.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 4, 2020·Watch on YouTube

    What is Dependency Injection?

    Learn what is dependency injection and how to write better code with the help of it.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/what-is-dom-shadow-dom-virtual-dom.html b/watch/what-is-dom-shadow-dom-virtual-dom.html index 2ee0df1fa..80457131b 100644 --- a/watch/what-is-dom-shadow-dom-virtual-dom.html +++ b/watch/what-is-dom-shadow-dom-virtual-dom.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 20, 2020·Watch on YouTube

    DOM, Shadow DOM, Virtual DOM

    Learn what is DOM, Shadow DOM and Virtual DOM and how they work.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·July 20, 2020·Watch on YouTube

    DOM, Shadow DOM, Virtual DOM

    Learn what is DOM, Shadow DOM and Virtual DOM and how they work.

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/what-is-eventual-consistency.html b/watch/what-is-eventual-consistency.html index fe96cdad9..5c8566e75 100644 --- a/watch/what-is-eventual-consistency.html +++ b/watch/what-is-eventual-consistency.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 30, 2021·Watch on YouTube

    What is Eventual Consistency?

    Learn about the different consistency models in distributed systems

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·November 30, 2021·Watch on YouTube

    What is Eventual Consistency?

    Learn about the different consistency models in distributed systems

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file diff --git a/watch/yaml-in-depth.html b/watch/yaml-in-depth.html index 1f2221bef..86a0125c1 100644 --- a/watch/yaml-in-depth.html +++ b/watch/yaml-in-depth.html @@ -3,8 +3,8 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-139582634-1'); -
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 18, 2021·Watch on YouTube

    YAML in Depth

    Everything you need to know about YAML

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file +
    We now have a YouTube Channel. Subscribe for the video content.
    roadmap.sh
    Roadmaps
    Guides
    Videos
    Thanks
    Subscribe
    Kamran Ahmed·October 18, 2021·Watch on YouTube

    YAML in Depth

    Everything you need to know about YAML

    We are working on a better watch page — for now this video is best viewed on YouTube.

    Open Source

    The project is OpenSource, 6th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

    A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

    Stay Informed

    Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

    Subscribe to Updates

    Free subscription for updates

    Updates & Paid Content

    Support the project by paying as little as 5$ per month

    RoadmapsGuidesVideosAboutYouTube
    RoadmapsGuidesVideosThanksAboutYouTube
    roadmap.shby@kamranahmedse

    Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.

    © roadmap.sh·FAQs·Terms·Privacy

    \ No newline at end of file