feat: show chat history always

* Add floating chat

* Refactor roadmap ai chat to hook

* Chat inside floating chat

* Fix bulk update not working

* Add floating chat widget

* Add chat header buttons

* Show a default set of questions

* Populate chat questions at bottom

* Handle chat submission

* Add personalize popup

* Fix body scroll locking issue

* Add scroll to bottom functionality

* Fix focus issue on persona form

* Fix responsiveness of the floating chat

* Final implementation

* Height fixes

* Fix floating ui

* Upgrade flow in floating chat

* Upgrade responsive UI

* Authetnicated checks

* Responsive bottom bar

.astro/settings.json

@@ -0,0 +1,8 @@
+{
+	"devToolbar": {
+		"enabled": false
+	},
+	"_variables": {
+		"lastUpdateCheck": 1749494681580
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.cursor/rules/gh-cli.mdc

@@ -0,0 +1,389 @@
+---
+description: GitHub pull requests
+globs: 
+alwaysApply: false
+---
+# gh cli
+
+Work seamlessly with GitHub from the command line.
+
+USAGE
+  gh <command> <subcommand> [flags]
+
+CORE COMMANDS
+  auth:          Authenticate gh and git with GitHub
+  browse:        Open repositories, issues, pull requests, and more in the browser
+  codespace:     Connect to and manage codespaces
+  gist:          Manage gists
+  issue:         Manage issues
+  org:           Manage organizations
+  pr:            Manage pull requests
+  project:       Work with GitHub Projects.
+  release:       Manage releases
+  repo:          Manage repositories
+
+GITHUB ACTIONS COMMANDS
+  cache:         Manage GitHub Actions caches
+  run:           View details about workflow runs
+  workflow:      View details about GitHub Actions workflows
+
+ALIAS COMMANDS
+  co:            Alias for "pr checkout"
+
+ADDITIONAL COMMANDS
+  alias:         Create command shortcuts
+  api:           Make an authenticated GitHub API request
+  attestation:   Work with artifact attestations
+  completion:    Generate shell completion scripts
+  config:        Manage configuration for gh
+  extension:     Manage gh extensions
+  gpg-key:       Manage GPG keys
+  label:         Manage labels
+  preview:       Execute previews for gh features
+  ruleset:       View info about repo rulesets
+  search:        Search for repositories, issues, and pull requests
+  secret:        Manage GitHub secrets
+  ssh-key:       Manage SSH keys
+  status:        Print information about relevant issues, pull requests, and notifications across repositories
+  variable:      Manage GitHub Actions variables
+
+HELP TOPICS
+  accessibility: Learn about GitHub CLI's accessibility experiences
+  actions:       Learn about working with GitHub Actions
+  environment:   Environment variables that can be used with gh
+  exit-codes:    Exit codes used by gh
+  formatting:    Formatting options for JSON data exported from gh
+  mintty:        Information about using gh with MinTTY
+  reference:     A comprehensive reference of all gh commands
+
+FLAGS
+  --help      Show help for command
+  --version   Show gh version
+
+EXAMPLES
+  $ gh issue create
+  $ gh repo clone cli/cli
+  $ gh pr checkout 321
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr
+
+Work with GitHub pull requests.
+
+USAGE
+  gh pr <command> [flags]
+
+GENERAL COMMANDS
+  create:        Create a pull request
+  list:          List pull requests in a repository
+  status:        Show status of relevant pull requests
+
+TARGETED COMMANDS
+  checkout:      Check out a pull request in git
+  checks:        Show CI status for a single pull request
+  close:         Close a pull request
+  comment:       Add a comment to a pull request
+  diff:          View changes in a pull request
+  edit:          Edit a pull request
+  lock:          Lock pull request conversation
+  merge:         Merge a pull request
+  ready:         Mark a pull request as ready for review
+  reopen:        Reopen a pull request
+  review:        Add a review to a pull request
+  unlock:        Unlock pull request conversation
+  update-branch: Update a pull request branch
+  view:          View a pull request
+
+FLAGS
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+INHERITED FLAGS
+  --help   Show help for command
+
+ARGUMENTS
+  A pull request can be supplied as argument in any of the following formats:
+  - by number, e.g. "123";
+  - by URL, e.g. "https://github.com/OWNER/REPO/pull/123"; or
+  - by the name of its head branch, e.g. "patch-1" or "OWNER:patch-1".
+
+EXAMPLES
+  $ gh pr checkout 353
+  $ gh pr create --fill
+  $ gh pr view --web
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr list
+
+List pull requests in a GitHub repository. By default, this only lists open PRs.
+
+The search query syntax is documented here:
+<https://docs.github.com/en/search-github/searching-on-github/searching-issues-and-pull-requests>
+
+For more information about output formatting flags, see `gh help formatting`.
+
+USAGE
+  gh pr list [flags]
+
+ALIASES
+  gh pr ls
+
+FLAGS
+      --app string        Filter by GitHub App author
+  -a, --assignee string   Filter by assignee
+  -A, --author string     Filter by author
+  -B, --base string       Filter by base branch
+  -d, --draft             Filter by draft state
+  -H, --head string       Filter by head branch ("<owner>:<branch>" syntax not supported)
+  -q, --jq expression     Filter JSON output using a jq expression
+      --json fields       Output JSON with the specified fields
+  -l, --label strings     Filter by label
+  -L, --limit int         Maximum number of items to fetch (default 30)
+  -S, --search query      Search pull requests with query
+  -s, --state string      Filter by state: {open|closed|merged|all} (default "open")
+  -t, --template string   Format JSON output using a Go template; see "gh help formatting"
+  -w, --web               List pull requests in the web browser
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+JSON FIELDS
+  additions, assignees, author, autoMergeRequest, baseRefName, baseRefOid, body,
+  changedFiles, closed, closedAt, closingIssuesReferences, comments, commits,
+  createdAt, deletions, files, fullDatabaseId, headRefName, headRefOid,
+  headRepository, headRepositoryOwner, id, isCrossRepository, isDraft, labels,
+  latestReviews, maintainerCanModify, mergeCommit, mergeStateStatus, mergeable,
+  mergedAt, mergedBy, milestone, number, potentialMergeCommit, projectCards,
+  projectItems, reactionGroups, reviewDecision, reviewRequests, reviews, state,
+  statusCheckRollup, title, updatedAt, url
+
+EXAMPLES
+  # List PRs authored by you
+  $ gh pr list --author "@me"
+  
+  # List PRs with a specific head branch name
+  $ gh pr list --head "typo"
+  
+  # List only PRs with all of the given labels
+  $ gh pr list --label bug --label "priority 1"
+  
+  # Filter PRs using search syntax
+  $ gh pr list --search "status:success review:required"
+  
+  # Find a PR that introduced a given commit
+  $ gh pr list --search "<SHA>" --state merged
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr diff
+
+View changes in a pull request.
+
+Without an argument, the pull request that belongs to the current branch
+is selected.
+
+With `--web` flag, open the pull request diff in a web browser instead.
+
+
+USAGE
+  gh pr diff [<number> | <url> | <branch>] [flags]
+
+FLAGS
+      --color string   Use color in diff output: {always|never|auto} (default "auto")
+      --name-only      Display only names of changed files
+      --patch          Display diff in patch format
+  -w, --web            Open the pull request diff in the browser
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr merge
+
+Merge a pull request on GitHub.
+
+Without an argument, the pull request that belongs to the current branch
+is selected.
+
+When targeting a branch that requires a merge queue, no merge strategy is required.
+If required checks have not yet passed, auto-merge will be enabled.
+If required checks have passed, the pull request will be added to the merge queue.
+To bypass a merge queue and merge directly, pass the `--admin` flag.
+
+
+USAGE
+  gh pr merge [<number> | <url> | <branch>] [flags]
+
+FLAGS
+      --admin                   Use administrator privileges to merge a pull request that does not meet requirements
+  -A, --author-email text       Email text for merge commit author
+      --auto                    Automatically merge only after necessary requirements are met
+  -b, --body text               Body text for the merge commit
+  -F, --body-file file          Read body text from file (use "-" to read from standard input)
+  -d, --delete-branch           Delete the local and remote branch after merge
+      --disable-auto            Disable auto-merge for this pull request
+      --match-head-commit SHA   Commit SHA that the pull request head must match to allow merge
+  -m, --merge                   Merge the commits with the base branch
+  -r, --rebase                  Rebase the commits onto the base branch
+  -s, --squash                  Squash the commits into one commit and merge it into the base branch
+  -t, --subject text            Subject text for the merge commit
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr review 
+
+Add a review to a pull request.
+
+Without an argument, the pull request that belongs to the current branch is reviewed.
+
+
+USAGE
+  gh pr review [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -a, --approve           Approve pull request
+  -b, --body string       Specify the body of a review
+  -F, --body-file file    Read body text from file (use "-" to read from standard input)
+  -c, --comment           Comment on a pull request
+  -r, --request-changes   Request changes on a pull request
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  # Approve the pull request of the current branch
+  $ gh pr review --approve
+  
+  # Leave a review comment for the current branch
+  $ gh pr review --comment -b "interesting"
+  
+  # Add a review for a specific pull request
+  $ gh pr review 123
+  
+  # Request changes on a specific pull request
+  $ gh pr review 123 -r -b "needs more ASCII art"
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr checkout
+
+Check out a pull request in git
+
+USAGE
+  gh pr checkout [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -b, --branch string        Local branch name to use (default [the name of the head branch])
+      --detach               Checkout PR with a detached HEAD
+  -f, --force                Reset the existing local branch to the latest state of the pull request
+      --recurse-submodules   Update all submodules after checkout
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  # Interactively select a PR from the 10 most recent to check out
+  $ gh pr checkout
+  
+  # Checkout a specific PR
+  $ gh pr checkout 32
+  $ gh pr checkout https://github.com/OWNER/REPO/pull/32
+  $ gh pr checkout feature
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+  ## gh pr close
+
+  Close a pull request
+
+USAGE
+  gh pr close {<number> | <url> | <branch>} [flags]
+
+FLAGS
+  -c, --comment string   Leave a closing comment
+  -d, --delete-branch    Delete the local and remote branch after close
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr comment
+
+Add a comment to a GitHub pull request.
+
+Without the body text supplied through flags, the command will interactively
+prompt for the comment text.
+
+
+USAGE
+  gh pr comment [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -b, --body text        The comment body text
+  -F, --body-file file   Read body text from file (use "-" to read from standard input)
+      --create-if-none   Create a new comment if no comments are found. Can be used only with --edit-last
+      --delete-last      Delete the last comment of the current user
+      --edit-last        Edit the last comment of the current user
+  -e, --editor           Skip prompts and open the text editor to write the body in
+  -w, --web              Open the web browser to write the comment
+      --yes              Skip the delete confirmation prompt when --delete-last is provided
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  $ gh pr comment 13 --body "Hi from GitHub CLI"
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+
+

.env.example

@@ -0,0 +1,10 @@
+PUBLIC_API_URL=https://api.roadmap.sh
+PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
+PUBLIC_EDITOR_APP_URL=https://draw.roadmap.sh
+PUBLIC_COURSE_APP_URL=http://localhost:5173
+
+PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_ID=
+PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_ID=
+
+PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=10
+PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=100

.eslintrc

@@ -1,18 +0,0 @@
-{
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "prettier"
-  ],
-  "rules": {
-    "@next/next/no-img-element": [
-      "off"
-    ],
-    "react/display-name": [
-      "off"
-    ],
-    "react/jsx-no-target-blank": [
-      "off"
-    ]
-  }
-}

.github/ISSUE_TEMPLATE.md

@@ -1,36 +0,0 @@
-<!--
-Please do not remove anything written below.
- 
-Fill the details and open the issue. Any issue that 
-doesn't have all of these filled in will be closed, 
-if yours is closed reopen with everything filled in.  
--->
-
-#### What roadmap is this issue about?
-
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-
-#### What is this issue about?
-
-- [ ] Functionality of the website
-- [ ] Discussion for a pull request I would want to open.
-- [ ] Addition of a new item
-- [ ] Removal of some existing item
-- [ ] Changing in arrangement
-- [ ] General suggestion
-- [ ] Sharing an Idea
-- [ ] Something else
-
-#### Please acknowledge the below listed
-
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this issue.
-
-
-#### Enter the details about the issue here
-
-<!-- Please enter the issue details here -->

.github/ISSUE_TEMPLATE/01-suggest-changes.yml

@@ -0,0 +1,25 @@
+name: "✍️ ​ ​Missing or Deprecated Roadmap Topics"
+description: Help us improve the roadmaps by suggesting changes
+labels: [topic-change]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to help us improve the roadmaps with your suggestions.
+  - type: input
+    id: url
+    attributes:
+      label: Roadmap URL
+      description: Please provide the URL of the roadmap you are suggesting changes to.
+      placeholder: https://roadmap.sh
+    validations:
+      required: true
+  - type: textarea
+    id: roadmap-suggestions
+    attributes:
+      label: Suggestions
+      description: What changes would you like to suggest?
+      placeholder: Enter your suggestions here.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/02-bug-report.yml

@@ -0,0 +1,42 @@
+name: "🐛 ​ ​Bug Report"
+description: Report an issue or possible bug
+labels: [bug]
+assignees: []
+body:
+  - type: input
+    id: url
+    attributes:
+      label: What is the URL where the issue is happening
+      placeholder: https://roadmap.sh
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+        - Other
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Output from browser console (if any)
+      description: Please copy and paste any relevant log output.
+  - type: checkboxes
+    id: will-pr
+    attributes:
+      label: Participation
+      options:
+        - label:  I am willing to submit a pull request for this issue.
+          required: false

.github/ISSUE_TEMPLATE/03-feature-suggestion.yml

@@ -0,0 +1,12 @@
+name: "✨ ​ ​Feature Suggestion"
+description: Is there a feature you'd like to see on Roadmap.sh? Let us know!
+labels: [feature request]
+assignees: []
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature Description
+      description: Please provide a detailed description of the feature you are suggesting and how it would help you/others.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/04-roadmap-contribution.yml

@@ -0,0 +1,25 @@
+name: "🙏 ​ ​Submit a Roadmap"
+description: Help us launch a new roadmap with your expertise.
+labels: [roadmap contribution]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to submit a roadmap! Please fill out the information below and we'll get back to you as soon as we can.
+  - type: input
+    id: roadmap-title
+    attributes:
+      label: What is the title of the roadmap you are submitting?
+      placeholder: e.g. Roadmap to learn Data Science
+    validations:
+      required: true
+  - type: textarea
+    id: roadmap-description
+    attributes:
+      label: Roadmap Link
+      description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.
+      placeholder: |
+          https://roadmap.sh/xyz
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/05-project-contribution.yml

@@ -0,0 +1,35 @@
+name: "🙏 ​ ​Submit a Project Idea"
+description: Help us add project ideas to roadmaps.
+labels: [project contribution]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to submit a project idea! Please fill out the information below and we'll get back to you as soon as we can.
+  - type: input
+    id: roadmap-title
+    attributes:
+      label: What Roadmap is this project for?
+      placeholder: e.g. Backend Roadmap
+    validations:
+      required: true
+  - type: dropdown
+    id: project-difficulty
+    attributes:
+      label: Project Difficulty
+      options:
+        - Beginner
+        - Intermediate
+        - Advanced
+    validations:
+      required: true
+  - type: textarea
+    id: roadmap-description
+    attributes:
+      label: Add Project Details
+      description: Please write a detailed description of the project in 3rd person e.g. "You are required to build a..."
+      placeholder: |
+          e.g. You are required to build a RESTful API...
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/05-something-else.yml

@@ -0,0 +1,12 @@
+name: "🤷‍♂️ ​ ​Something else"
+description: If none of the above templates fit your needs, please use this template to submit your issue.
+labels: []
+assignees: []
+body:
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Detailed Description
+      description: Please provide a detailed description of the issue.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: ✋ ​ ​Roadmap Request
+    url: https://roadmap.sh/discord
+    about: Please do not open issues with roadmap requests, hop onto the discord server for that.
+  - name: 📝 ​ ​Typo or Grammatical Mistake
+    url: https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data
+    about: Please submit a pull request instead of reporting it as an issue.
+  - name: 💬 ​ ​Chat on Discord
+    url: https://roadmap.sh/discord
+    about: Join the community on our Discord server.
+  - name: 🤝 ​ ​Guidance
+    url: https://roadmap.sh/discord
+    about: Join the community in our Discord server.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +0,0 @@
-#### What roadmap does this PR target?
-
-- [ ] Code Change
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-- [ ] Guides
-
-#### Please acknowledge the items listed below
-
-- [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request.
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this PR.
-
-#### Enter the details about the contribution
-
-<!-- Enter the details here -->

.github/workflows/aws-costs.yml

@@ -0,0 +1,21 @@
+name: Sends Daily AWS Costs to Slack
+on:
+  # Allow manual Run
+  workflow_dispatch:
+  # Run at 7:00 UTC every day
+  schedule:
+    - cron: "0 7 * * *"
+jobs:
+  aws_costs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Costs
+        env:
+          AWS_KEY: ${{ secrets.COST_AWS_ACCESS_KEY }}
+          AWS_SECRET: ${{ secrets.COST_AWS_SECRET_KEY }}
+          AWS_REGION: ${{ secrets.COST_AWS_REGION }}
+          SLACK_CHANNEL: ${{ secrets.SLACK_COST_CHANNEL }}
+          SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
+        run: |
+          npm install -g aws-cost-cli
+          aws-cost -k $AWS_KEY -s $AWS_SECRET -r $AWS_REGION -S $SLACK_TOKEN -C $SLACK_CHANNEL

.github/workflows/close-feedback-pr.yml

@@ -0,0 +1,50 @@
+name: Close PRs with Feedback
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  close-pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close PR if it has label "feedback left" and no changes in 7 days
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { data: pullRequests } = await github.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              base: 'master',
+            });
+
+            for (const pullRequest of pullRequests) {
+              const { data: labels } = await github.issues.listLabelsOnIssue({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pullRequest.number,
+              });
+
+              const feedbackLabel = labels.find((label) => label.name === 'feedback left');
+              if (feedbackLabel) {
+                const lastUpdated = new Date(pullRequest.updated_at);
+                const sevenDaysAgo = new Date();
+                sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+
+                if (lastUpdated < sevenDaysAgo) {
+                  await github.issues.createComment({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    issue_number: pullRequest.number,
+                    body: 'Closing this PR because there has been no activity for the past 7 days. Feel free to reopen if you have any feedback.',
+                  });
+                  await github.pulls.update({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    pull_number: pullRequest.number,
+                    state: 'closed',
+                  });
+                }
+              }
+            }

.github/workflows/cloudfront-api-cache.yml

@@ -0,0 +1,16 @@
+name: Clears API Cloudfront Cache
+on:
+  workflow_dispatch:
+jobs:
+  cloudfront_api_cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clear Cloudfront Caching
+        run: |
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
+            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront-api", "is_verbose": false } }'

.github/workflows/cloudfront-fe-cache.yml

@@ -0,0 +1,16 @@
+name: Clears Frontend Cloudfront Cache
+on:
+  workflow_dispatch:
+jobs:
+  cloudfront_fe_cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clear Cloudfront Caching
+        run: |
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
+            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront,cloudfront-course", "is_verbose": false } }'

.github/workflows/deploy.yml

@@ -1,31 +0,0 @@
-name: Deployment to GitHub Pages
-on:
-  push:
-    branches: [ master ]
-env:
-  ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
-  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  CI: true
-  NEXT_TELEMETRY_DISABLED: 1
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 12
-    - name: Setup Environment
-      run: |
-        npm install -g yarn
-        yarn install
-    - name: Generate meta and builld
-      run: |
-        yarn meta
-        yarn build
-    - name: Deploy to GitHub Pages
-      run: |
-        git config user.email "kamranahmed.se@gmail.com"
-        git config user.name "Kamran Ahmed"
-        git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-        npm run deploy

.github/workflows/deployment.yml

@@ -0,0 +1,75 @@
+name: Deploy to EC2
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v4.0.0
+        with:
+          version: 9
+
+      # -------------------
+      # Setup configuration
+      # -------------------
+      - name: Prepare configuration files
+        run: |
+          git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/infra-config.git configuration --depth 1
+      - name: Copy configuration files
+        run: |
+          cp configuration/dist/github/developer-roadmap.env .env
+
+      # -----------------
+      # Prepare the Build
+      # -----------------
+      - name: Install Dependencies
+        run: |
+          pnpm install
+
+      - name: Generate Production Build
+        run: |
+          git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+          npm run generate-renderer
+          npm run compress:images
+          npm run build
+
+      # --------------------
+      # Deploy to EC2
+      # --------------------
+      - uses: webfactory/ssh-agent@v0.7.0
+        with:
+          ssh-private-key: ${{ secrets.EC2_PRIVATE_KEY }}
+      - name: Deploy Application to EC2
+        run: |
+          rsync -apvz --delete --no-times --exclude "configuration" -e "ssh -o StrictHostKeyChecking=no" -p ./ ${{ secrets.EC2_USERNAME }}@${{ secrets.EC2_HOST }}:/var/www/roadmap.sh/
+      - name: Restart PM2
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          key: ${{ secrets.EC2_PRIVATE_KEY }}
+          script: |
+            cd /var/www/roadmap.sh
+            sudo pm2 restart web-roadmap
+
+      # ----------------------
+      # Clear cloudfront cache
+      # ----------------------
+      - name: Clear Cloudfront Caching
+        run: |
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
+            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront", "is_verbose": false } }'

.github/workflows/label-issue.yml

@@ -0,0 +1,40 @@
+name: Label Issue
+
+on:
+  issues:
+    types: [ opened, edited ]
+  
+jobs:
+  label-topic-change-issue:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add Labels To Issue
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const issue = context.payload.issue;
+            const roadmapUrl = issue.body.match(/https?:\/\/roadmap.sh\/[^ ]+/);
+
+            // if the issue is labeled as a topic-change, add the roadmap slug as a label
+            if (issue.labels.some(label => label.name === 'topic-change')) {
+              if (roadmapUrl) {
+                const roadmapSlug = new URL(roadmapUrl[0]).pathname.replace(/\//, '');
+                github.rest.issues.addLabels({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issue.number,
+                  labels: [roadmapSlug]
+                });
+              }
+            
+              // Close the issue if it has no roadmap URL
+              if (!roadmapUrl) {
+                github.rest.issues.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issue.number,
+                  state: 'closed'
+                });
+              }
+            }

.github/workflows/refresh-roadmap-content-json.yml

@@ -0,0 +1,52 @@
+name: Refresh Roadmap Content JSON
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  refresh-content:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm@v9
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Setup Node.js Version 20 (LTS)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install Dependencies and Generate Content JSON
+        run: |
+          pnpm install
+          npm run generate:roadmap-content-json
+      
+      - name: Create PR
+        uses: peter-evans/create-pull-request@v7
+        with:
+          delete-branch: false
+          branch: "chore/update-content-json"
+          base: "master"
+          labels: |
+            dependencies
+            automated pr
+          reviewers: kamranahmedse
+          commit-message: "chore: update roadmap content json"
+          title: "Updated Roadmap Content JSON - Automated"
+          body: |
+            ## Updated Roadmap Content JSON
+            
+            > [!IMPORTANT]
+            > This PR Updates the Roadmap Content JSON files stored in the `public` directory.
+            >
+            > Commit: ${{ github.sha }}
+            > Workflow Path: ${{ github.workflow_ref }}
+
+            **Please Review the Changes and Merge the PR if everything is fine.**

.github/workflows/upgrade-dependencies.yml

@@ -0,0 +1,51 @@
+name: Upgrade Dependencies
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * 0'
+
+jobs:
+  upgrade-deps:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js Version 20 (LTS)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm@v9
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Install & Upgrade Dependencies
+        run: |
+          pnpm install
+          npm run upgrade
+          pnpm install --lockfile-only
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          delete-branch: false
+          branch: "update-deps"
+          base: "master"
+          labels: |
+            dependencies
+            automated pr
+          reviewers: kamranahmedse
+          commit-message: "chore: update dependencies to latest"
+          title: "Upgrade Dependencies To Latest - Automated"
+          body: |
+            ## Updated all Dependencies to Latest Versions.
+
+            > [!IMPORTANT]
+            > This PR Upgrades the Dependencies to the their latest versions.
+            >
+            > Commit: ${{ github.sha }}
+            > Workflow Path: ${{ github.workflow_ref }}
+
+            **Please Review the Changes and Merge the PR if everything is fine.**

.gitignore

@@ -1,36 +1,33 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-out
+.idea
+.temp
+.astro
+
+# build output
+dist/
+.output/
 
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+node_modules/
 
-# testing
-/coverage
+scripts/developer-roadmap
 
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.idea
-.DS_Store
-*.pem
-
-# debug
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
 
-# vercel
-.vercel
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/
+tests-examples
+*.csveditor/
+
+packages/editor

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+strict-peer-dependencies=false

.prettierignore

@@ -0,0 +1,7 @@
+app-dist
+dist
+.idea
+.github
+public
+node_modules
+pnpm-lock.yaml

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2
-}

.prettierrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+        singleQuote: true,
+        jsxSingleQuote: true,
+      },
+    },
+  ],
+  plugins: [
+    require.resolve('prettier-plugin-astro'),
+    'prettier-plugin-tailwindcss',
+  ],
+};

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,39 +0,0 @@
-<p align="center">
-  <img src="public/brand.png" height="128">
-  <h2 align="center">roadmap.sh</h2>
-  <p align="center">Community driven roadmaps, articles and resources for developers<p>
-  <p align="center">
-    <a href="https://roadmap.sh/guides">
-    	<img src="https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/-Roadmaps-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="./contributing/guide.md">
-    	<img src="https://img.shields.io/badge/%E2%9D%A4-Contribute-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-  </p>
-</p>
-
-[roadmap.sh](https://roadmap.sh) is the community effort to create knowledge that is approachable for the developers.
-
-The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone https://github.com/kamranahmedse/roadmap.sh
-yarn install
-yarn dev
-```
-
-## Contributions
-
-* Add new Roadmap
-* Suggest changes to existing roadmap
-* Write an article
-* Improve the site's codebase
-* Write tests
-

astro.config.mjs

@@ -0,0 +1,76 @@
+// https://astro.build/config
+import sitemap from '@astrojs/sitemap';
+import node from '@astrojs/node';
+import { defineConfig } from 'astro/config';
+import rehypeExternalLinks from 'rehype-external-links';
+import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
+import tailwindcss from '@tailwindcss/vite';
+
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://roadmap.sh/',
+  redirects: {
+    '/devops/devops-engineer': {
+      status: 301,
+      destination: '/devops',
+    },
+    '/ai-tutor': {
+      status: 301,
+      destination: '/ai',
+    },
+  },
+  vite: {
+    server: {
+      allowedHosts: ['roadmap.sh', 'port3k.kamranahmed.info'],
+    },
+  },
+  markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+    },
+    rehypePlugins: [
+      [
+        rehypeExternalLinks,
+        {
+          target: '_blank',
+          rel: function (element) {
+            const href = element.properties.href;
+            const whiteListedStarts = [
+              '/',
+              '#',
+              'mailto:',
+              'https://github.com/kamranahmedse',
+              'https://thenewstack.io',
+              'https://kamranahmed.info',
+              'https://roadmap.sh',
+            ];
+            if (whiteListedStarts.some((start) => href.startsWith(start))) {
+              return [];
+            }
+            return 'noopener noreferrer nofollow';
+          },
+        },
+      ],
+    ],
+  },
+  output: 'server',
+  adapter: node({
+    mode: 'standalone',
+  }),
+  trailingSlash: 'never',
+  integrations: [
+    sitemap({
+      filter: shouldIndexPage,
+      serialize: serializeSitemap,
+    }),
+    react(),
+  ],
+  vite: {
+    plugins: [tailwindcss()],
+    ssr: {
+      noExternal: [/^@roadmapsh\/editor.*$/],
+    },
+  },
+});

code_of_conduct.md

@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <kamranahmed.se@gmail.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

components/content-page-header.tsx

@@ -1,60 +0,0 @@
-import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
-import React from 'react';
-
-type ContentPageHeaderProps = {
-  formattedDate: string;
-  title: string;
-  subtitle: string;
-  author?: {
-    name: string;
-    twitter: string;
-    picture: string;
-  },
-  subLink?: {
-    text: string;
-    url: string;
-  }
-};
-
-export function ContentPageHeader(props: ContentPageHeaderProps) {
-  const { title, subtitle, author = null, formattedDate, subLink = null } = props;
-
-  return (
-    <Box pt={['35px', '35px', '70px']} pb={['35px', '35px', '55px']} borderBottomWidth={1} mb='30px'>
-      <Container maxW='container.md' position='relative' textAlign={['left', 'left', 'center']}>
-        <Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']}
-              fontSize={['12px', '12px', '14px']}>
-
-          {author?.name && (
-            <>
-              <Link
-                d={['none', 'flex', 'flex']}
-                target='_blank'
-                href={`https://twitter.com/${author.twitter}`}
-                alignItems='center'
-                fontWeight={600}
-                color='gray.500'
-              >
-                <Image alt={''} rounded={'full'} mr='7px' w='22px' src={author.picture} />
-                {author.name}
-              </Link>
-              <Text d={['none', 'inline', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
-            </>
-          )}
-
-          <Text color='gray.500' as='span'>{formattedDate}</Text>
-          {subLink?.text && (
-            <>
-              <Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
-              <Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500}
-                    href={subLink.url} target={'_blank'}>{subLink.text}</Link>
-            </>
-          )}
-        </Flex>
-        <Heading as='h1' color='black' fontSize={['30px', '30px', '45px']} lineHeight={['40px', '40px', '53px']}
-                 fontWeight={700} my={['5px', '5px', '10px']}>{title}</Heading>
-        <Text fontSize={['14px', '14px', '16px']} color='gray.700'>{subtitle}</Text>
-      </Container>
-    </Box>
-  );
-}

components/custom-ad.tsx

@@ -1,37 +0,0 @@
-export const CustomAd = () => {
-  return (
-    <div id='carbonads'>
-      <span>
-        <span className='carbon-wrap'>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-img'
-            target='_blank'
-          >
-            <img
-              src='/fm-img.png'
-              alt='FM Logo'
-              height='100'
-              width='130'
-              style={{ maxWidth: '130px', border: 'none' }}
-            />
-          </a>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-text'
-            target='_blank'
-          >
-            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
-          </a>
-        </span>
-        <a
-          href='https://github.com/sponsors/kamranahmedse'
-          className='carbon-poweredby'
-          target='_blank'
-        >
-          Sponsored by
-        </a>
-      </span>
-    </div>
-  );
-};

components/dimmed-more.tsx

@@ -1,46 +0,0 @@
-import { Box, Link, Text } from '@chakra-ui/react';
-
-type DimmedMoreProps = {
-  text: string;
-  href: string;
-};
-
-export function DimmedMore(props: DimmedMoreProps) {
-  const { text, href } = props;
-
-  return (
-    <Box position='relative' textAlign='center' bottom='20px'>
-      <Box
-        opacity={1}
-        pointerEvents='none'
-        position='absolute'
-        bottom={0}
-        height='200px'
-        width='100%'
-        background='linear-gradient(180deg, transparent, white)'
-      />
-
-      <Link
-        rounded='20px'
-        display='inline'
-        bg='green.600'
-        color='white'
-        p='7px 20px'
-        href={href}
-        fontWeight={800}
-        fontSize='11px'
-        textTransform='uppercase'
-        my='25px'
-        position='relative'
-        _hover={{
-          textDecoration: 'none',
-          '& .forward-arrow': {
-            transform: 'translateX(3px)'
-          }
-        }}>
-        {text}
-        <Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
-      </Link>
-    </Box>
-  );
-}

components/footer.tsx

@@ -1,79 +0,0 @@
-import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
-import siteConfig from '../content/site.json';
-import { CustomAd } from './custom-ad';
-
-function NavigationLinks() {
-  return (
-    <>
-      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
-        <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
-        <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
-        <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
-        <Link _hover={{ color: 'white' }} href='/about'>About</Link>
-        <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
-      </Stack>
-
-      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/roadmaps'>Roadmaps</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/guides'>Guides</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/watch'>Videos</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/thanks'>Thanks</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/about'>About</Link>
-        <Link py='7px' _hover={{ color: 'white' }} target='_blank'
-              href={siteConfig.url.youtube}>YouTube</Link>
-      </Stack>
-    </>
-  );
-}
-
-export function Footer() {
-  return (
-    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
-      <Container maxW='container.md'>
-        <NavigationLinks />
-
-        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
-          <Flex spacing={0} alignItems='center' color='gray.400'>
-            <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
-                  href='/'>
-              <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
-              roadmap.sh
-            </Link>
-            <Text as='span' mx='7px'>by</Text>
-            <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
-                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
-                  target='_blank'>@kamranahmedse</Link>
-          </Flex>
-
-          <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
-            journeys to help you choose your path and grow in your career.</Text>
-
-          <Text fontSize='14px' color='gray.500'>
-            <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
-            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>FAQs</Link>&middot;
-            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Terms</Link>&middot;
-            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Privacy</Link>
-          </Text>
-        </Box>
-      </Container>
-
-      <CustomAd />
-      {process.env.GA_SECRET && false && (
-        <script
-          async
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh'
-          id='_carbonads_js'
-        />
-      )}
-    </Box>
-  );
-}

components/global-header.tsx

@@ -1,111 +0,0 @@
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { useState } from 'react';
-import siteConfig from '../content/site.json';
-
-type MenuLinkProps = {
-  text: string;
-  link: string;
-};
-
-function MenuLink(props: MenuLinkProps) {
-  const { text, link } = props;
-
-  return <Link
-    borderBottomWidth={0}
-    borderBottomColor='gray.500'
-    _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
-    fontWeight={500}
-    href={link}
-  >
-    {text}
-  </Link>;
-}
-
-function DesktopMenuLinks() {
-  return (
-    <Stack d={['none', 'flex', 'flex']} shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50'
-           fontSize='15px'>
-      <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
-      <MenuLink text={'Guides'} link={'/guides'} />
-      <MenuLink text={'Videos'} link={'/watch'} />
-
-      <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
-            _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
-            fontWeight={500} href={'/signup'}>Subscribe</Link>
-    </Stack>
-  );
-}
-
-function MobileMenuLinks() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <IconButton
-        rounded='5px'
-        padding={0}
-        aria-label={'Menu'}
-        d={['block', 'none', 'none']}
-        icon={<HamburgerIcon color='white' w='25px' height='25px' />}
-        color='white'
-        cursor='pointer'
-        h='auto'
-        bg='transparent'
-        _hover={{ bg: 'transparent' }}
-        _active={{ bg: 'transparent' }}
-        _focus={{ bg: 'transparent' }}
-        onClick={() => setIsOpen(true)}
-      />
-
-      {isOpen && (
-        <Stack color='gray.100'
-               fontSize={['22px', '22px', '22px', '32px']}
-               alignItems='center'
-               justifyContent='center'
-               pos='fixed'
-               left={0}
-               right={0}
-               bottom={0}
-               top={0}
-               bg='gray.900'
-               spacing='12px'
-               zIndex={1}
-        >
-          <Link href='/roadmaps'>Roadmaps</Link>
-          <Link href='/guides'>Guides</Link>
-          <Link href='/watch'>Videos</Link>
-          <Link target='_blank' href={siteConfig.url.youtube}>YouTube</Link>
-          <Link href='/signup'>Subscribe</Link>
-          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
-        </Stack>
-      )}
-    </>
-  );
-}
-
-export function GlobalHeader() {
-  return (
-    <Box bg='gray.900' p='20px 0'>
-      <Container maxW='container.md'>
-        <Flex justifyContent='space-between' alignItems='center'>
-          <Box>
-            <Link w='100%'
-                  d='flex'
-                  href='/'
-                  alignItems='center'
-                  color='white'
-                  fontWeight={600}
-                  _hover={{ textDecoration: 'none' }}
-                  fontSize='18px'>
-              <Image alt='' h='30px' w='30px' src='/logo.svg' mr='10px' />
-              <Text d={['block', 'none', 'block']} as='span'>roadmap.sh</Text>
-            </Link>
-          </Box>
-          <DesktopMenuLinks />
-          <MobileMenuLinks />
-        </Flex>
-      </Container>
-    </Box>
-  );
-}

components/guide/guide-grid-item.tsx

@@ -1,31 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type GuideGridItemProps = {
-  title: string;
-  href: string;
-  subtitle: string;
-  date: string;
-  isNew?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  'gray.700',
-  'purple.800'
-];
-
-export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {date}
-      </Text>
-      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Box>
-  );
-}

components/helmet.tsx

@@ -1,73 +0,0 @@
-import NextHead from 'next/head';
-import siteConfig from '../content/site.json';
-
-type HelmetProps = {
-  title?: string;
-  keywords?: string[];
-  canonical?: string;
-  description?: string;
-};
-
-const Helmet = (props: HelmetProps) => (
-  <NextHead>
-    <meta charSet='UTF-8' />
-
-    <title>{props.title || siteConfig.title}</title>
-    <meta name='description' content={props.description || siteConfig.description} />
-
-    <meta name='author' content={siteConfig.author} />
-    <meta name='keywords' content={props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',')} />
-
-    <meta name='viewport'
-          content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0' />
-    {props.canonical && <link rel='canonical' href={props.canonical} />}
-    <meta httpEquiv='Content-Language' content='en' />
-
-    <meta property='og:title' content={props.title || siteConfig.title} />
-    <meta property='og:description' content={props.description || siteConfig.description} />
-    <meta property='og:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta property='og:url' content={siteConfig.url.web} />
-    <meta property='og:type' content='website' />
-    <meta property='article:publisher' content={`https://facebook.com/${siteConfig.facebook}`} />
-    <meta property='og:site_name' content={siteConfig.name} />
-    <meta property='article:author' content={siteConfig.author} />
-
-    <meta name='twitter:card' content='summary' />
-    <meta name='twitter:site' content={`@${siteConfig.twitter}`} />
-    <meta name='twitter:title' content={props.title || siteConfig.title} />
-    <meta name='twitter:description' content={props.description || siteConfig.description} />
-    <meta name='twitter:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta name='twitter:image:alt' content='roadmap.sh' />
-
-    <meta name='mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
-    <link rel='apple-touch-icon' sizes='180x180' href='/manifest/apple-touch-icon.png' />
-    <meta name='msapplication-TileColor' content='#101010' />
-    <meta name='theme-color' content='#848a9a' />
-
-    <link rel='manifest' href='/manifest/manifest.json' />
-    <link rel='icon' type='image/png' sizes='32x32' href='/manifest/icon32.png' />
-    <link rel='icon' type='image/png' sizes='16x16' href='/manifest/icon16.png' />
-    <link rel='shortcut icon' href='/manifest/favicon.ico' type='image/x-icon' />
-    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
-
-    { /* Global Site Tag (gtag.js) - Google Analytics */}
-    {process.env.GA_SECRET && (
-      <>
-        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`} />
-        <script dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${process.env.GA_SECRET}');
-          `
-        }} />
-      </>
-    )}
-
-  </NextHead>
-);
-
-export default Helmet;

components/icons/facebook.svg

@@ -1,3 +0,0 @@
-<svg width="29" height="29">
-    <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path>
-</svg>

components/icons/github.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-</svg>

components/icons/link.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
-    <path fill-rule="evenodd"
-          d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
-</svg>

components/icons/twitter.svg

@@ -1,3 +0,0 @@
-<svg width="29" height="29" fill="currentColor">
-    <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
-</svg>

components/icons/video-icon.tsx

@@ -1,21 +0,0 @@
-export function VideoIcon(props: any) {
-  return (
-    <svg
-      stroke='currentColor'
-      fill='currentColor'
-      strokeWidth='0'
-      viewBox='0 0 24 24'
-      height='1em'
-      width='1em'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-        <path
-          d='M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z'
-        />
-      </g>
-    </svg>
-  );
-}

components/links-list-item.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Badge, Flex, Link, Text } from '@chakra-ui/react';
-
-type LinksListItemProps = {
-  href: string;
-  title: string;
-  subtitle: string;
-  badgeText?: string;
-  icon?: React.ReactChild;
-  hideSubtitleOnMobile?: boolean;
-};
-
-export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
-
-  return (
-    <Link
-      href={href}
-      fontSize={['14px', '14px', '15px']}
-      py='9px'
-      d='flex'
-      flexDirection={['column', 'row', 'row']}
-      fontWeight={500}
-      color='gray.600'
-      alignItems={['flex-start', 'center']}
-      justifyContent={'space-between'}
-      _hover={{
-        textDecoration: 'none',
-        color: 'blue.400',
-        '& .list-item-title': {
-          transform: 'translateX(10px)'
-        }
-      }}
-      isTruncated
-      maxWidth='100%'
-    >
-      <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
-        {icon}
-        <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
-        {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
-      </Flex>
-      <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
-            fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
-    </Link>
-  );
-}

components/links-list.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { StackDivider, VStack } from '@chakra-ui/react';
-
-type LinksListProps = {
-  children: React.ReactNode
-};
-
-export function LinksList(props: LinksListProps) {
-  const { children } = props;
-
-  return (
-    <VStack
-      rounded='5px'
-      divider={<StackDivider borderColor='gray.200' />}
-      spacing={0}
-      align='stretch'
-    >
-      {children}
-    </VStack>
-  );
-}

components/md-renderer/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import { MDXProvider } from '@mdx-js/react';
-import { ChakraProvider } from '@chakra-ui/react';
-import MdxComponents from './mdx-components';
-import { roadmapTheme } from '../../styles/theme';
-
-type MdRendererType = {
-  children: React.ReactNode
-};
-
-export default function MdRenderer(props: MdRendererType) {
-  return (
-    <ChakraProvider theme={roadmapTheme} resetCSS>
-      <MDXProvider components={MdxComponents}>
-        {props.children}
-      </MDXProvider>
-    </ChakraProvider>
-  );
-};

components/md-renderer/mdx-components/a.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-type EnrichedLinkProps = {
-  href: string;
-  children: React.ReactNode
-}
-
-const Link = styled.a`
-  font-weight: 600;
-  text-decoration: underline;
-`;
-
-const EnrichedLink = (props: EnrichedLinkProps) => {
-  // Is external URL or is a media URL
-  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
-
-  return (
-    <Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
-      {props.children}
-    </Link>
-  );
-};
-
-export default EnrichedLink;
-

components/md-renderer/mdx-components/badge-link.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-type BadgeLinkType = {
-  target: string;
-  variant: string;
-  badgeText: string;
-  href: string;
-  children: React.ReactNode
-};
-
-export function BadgeLink(props: BadgeLinkType) {
-  const { target = '_blank', variant = 'success', badgeText, href, children } = props;
-
-  return (
-    <p className='mb-0'>
-      <a href={href} target={target}>
-        <span style={{ position: 'relative', top: '-2px' }}
-              className={`badge badge-${variant}`}>{badgeText}</span> {children}
-      </a>
-    </p>
-  );
-}

components/md-renderer/mdx-components/blockquote.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const BlockQuote = styled.blockquote`
-  padding: 16px 20px;
-  position: relative;
-  background: #e8e8e8;
-  border-radius: 5px;
-  margin-bottom: 18px;
-
-  h1, h2, h3, h4, h5, h6 {
-    margin-top: 0;
-  }
-
-  p + h4 {
-    margin-top: 15px;
-  }
-
-  p {
-    margin: 0;
-
-    & + p {
-      margin-top: 10px;
-    }
-  }
-`;
-
-export default BlockQuote;

components/md-renderer/mdx-components/code.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Code as ChakraCode } from '@chakra-ui/react';
-
-type CodeType = {
-  children: React.ReactNode;
-}
-
-export default function Code(props: CodeType) {
-  return <ChakraCode bg='blue.500'>{props.children}</ChakraCode>;
-}

components/md-renderer/mdx-components/heading.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import LinkIcon from 'components/icons/link.svg';
-
-const linkify = (Component: React.FunctionComponent<any>) => {
-  return function EnrichedHeading(props: { children: string }): React.ReactNode {
-    const text = props.children;
-    const id = text.toLowerCase && text
-      .toLowerCase()
-      .replace(/[^\x00-\x7F]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/[?!]/g, '');
-
-    return (
-      <Component id={id}>
-        <HeaderLink href={`#${id}`}>
-          <LinkIcon />
-        </HeaderLink>
-        {props.children}
-      </Component>
-    );
-  };
-};
-
-const HeaderLink = styled.a`
-  position: absolute;
-  top: 0;
-  left: -25px;
-  width: 25px;
-  display: none;
-  height: 100%;
-  align-items: center;
-  justify-content: flex-start;
-`;
-
-const H1 = styled.h1`
-  position: relative;
-  font-size: 42px;
-  line-height: 40px;
-  font-weight: 700;
-  margin: 32px 0 10px !important;
-
-  &:hover ${HeaderLink} {
-    display: flex;
-  }
-`;
-
-const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 32px;
-`;
-
-const H3 = styled(H1).attrs({ as: 'h3' })`
-  margin: 22px 0 8px;
-  font-size: 30px;
-`;
-
-const H4 = styled(H1).attrs({ as: 'h4' })`
-  margin: 18px 0 8px;
-  font-size: 24px;
-`;
-
-const H5 = styled(H1).attrs({ as: 'h5' })`
-  margin: 14px 0 8px;
-  font-size: 18px;
-`;
-
-const H6 = styled(H1).attrs({ as: 'h6' })`
-  margin: 12px 0 8px;
-  font-size: 18px;
-`;
-
-const Headings = {
-  h1: linkify(H1),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6)
-};
-
-export default Headings;

components/md-renderer/mdx-components/iframe.tsx

@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-
-type IFrameProps = {
-  title: string;
-  src: string;
-};
-
-const AspectRatioBox = styled.div`
-  position: relative;
-  max-width: 100%;
-  margin-bottom: 18px;
-
-  &:before {
-    height: 0;
-    content: "";
-    display: block;
-    padding-bottom: 50%;
-  }
-
-  & > iframe {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-export default function IFrame(props: IFrameProps) {
-  return (
-    <AspectRatioBox>
-      <iframe
-        frameBorder={0}
-        title={props.title}
-        src={props.src}
-        allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
-        allowFullScreen
-      />
-    </AspectRatioBox>
-  );
-}

components/md-renderer/mdx-components/img.tsx

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const Img = styled.img`
-  max-width: 100%;
-  margin: 25px auto;
-  display: block;
-`;

components/md-renderer/mdx-components/index.tsx

@@ -1,30 +0,0 @@
-import { Code } from '@chakra-ui/react';
-import { P } from './p';
-import Headings from './heading';
-import { Pre } from './pre';
-import BlockQuote from './blockquote';
-import { Table } from './table';
-import IFrame from './iframe';
-import { Img } from './img';
-import EnrichedLink from './a';
-import { BadgeLink } from './badge-link';
-import { Li, Ul } from './ul';
-import PremiumBlock from './premium-block';
-
-const MdxComponents = {
-  p: P,
-  ...Headings,
-  pre: Pre,
-  blockquote: BlockQuote,
-  a: EnrichedLink,
-  table: Table,
-  iframe: IFrame,
-  img: Img,
-  code: Code,
-  BadgeLink: BadgeLink,
-  PremiumBlock: PremiumBlock,
-  ul: Ul,
-  li: Li
-};
-
-export default MdxComponents;

components/md-renderer/mdx-components/p.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Text } from '@chakra-ui/react';
-import styled from 'styled-components';
-
-type EnrichedTextType = {
-  children: React.ReactNode;
-}
-
-export const P = styled.p`
-  line-height: 27px;
-  font-size: 16px;
-  color: black;
-  margin-bottom: 18px;
-`;

components/md-renderer/mdx-components/pre.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const Pre = styled.pre`
-  margin: 25px -25px 25px -25px !important;
-  padding: 20px 25px !important;
-  border-radius: 10px;
-  line-height: 1.5 !important;
-  
-  code {
-    background: transparent;
-  }
-`;

components/md-renderer/mdx-components/premium-block.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Box, Button, Heading, Text } from '@chakra-ui/react';
-import { LockIcon } from '@chakra-ui/icons';
-
-type PremiumBlockProps = {
-  title: string;
-  description: string;
-};
-
-export default function PremiumBlock(props: PremiumBlockProps) {
-  return (
-    <Box p='40px' textAlign='center' rounded='5px' mb='18px' bg='gray.50' borderWidth={1}>
-      <LockIcon color='gray.300' height='45px' w='45px' mb='18px' />
-      <Heading as='h3' fontSize='30px' mb='10px'>{props.title}</Heading>
-      <Text mb='18px'>{props.description}</Text>
-      <Button colorScheme='green'>Become a Member</Button>
-    </Box>
-  );
-}

components/md-renderer/mdx-components/table.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-export const Table = styled.table`
-  border-collapse: separate;
-  width: 100%;
-  border-spacing: 0;
-  margin: 20px 0;
-
-  th {
-    color: #666;
-    font-size: 12px;
-    font-weight: 400;
-    background: #FAFAFA;
-    text-transform: uppercase;
-    height: 40px;
-    vertical-align: middle;
-    padding: 5px 10px;
-  }
-
-  td {
-    font-size: 14px;
-    padding: 10px;
-    border-bottom: 1px solid #EAEAEA;
-  }
-`;

components/md-renderer/mdx-components/ul.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { UnorderedList } from '@chakra-ui/react';
-import styled from 'styled-components';
-
-export const Ul = styled.ul`
-  margin-left: 40px;
-  margin-bottom: 18px;
-`;
-
-export const Li = styled.li`
-  margin-bottom: 7px;
-`;

components/opensource-banner.tsx

@@ -1,46 +0,0 @@
-import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
-
-export function OpensourceBanner() {
-  return (
-    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
-      <Container maxW='container.md'>
-        <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
-        <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
-          <Link
-            _hover={{ textDecoration: 'none' }}
-            href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
-            target='_blank'
-            borderBottomWidth={1}
-            fontWeight={600}
-          >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
-          developers every month.</Text>
-        <iframe
-          src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
-          frameBorder='0'
-          scrolling='0'
-          width='170'
-          height='30'
-          style={{ margin: 'auto', marginBottom: '30px' }}
-          title='GitHub'
-        />
-
-        <Text lineHeight={['25px', '25px', '26px']} fontSize={['15px', '15px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
-          community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
-          produce more open-source and free educational material consumed by hundreds of thousands of developers every
-          month.</Text>
-
-        <Box>
-          <iframe
-            src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
-            frameBorder='0'
-            scrolling='0'
-            width='260'
-            height='30'
-            title='GitHub'
-            style={{ margin: 'auto' }}
-          />
-        </Box>
-      </Container>
-    </Box>
-  );
-}

components/page-header.tsx

@@ -1,35 +0,0 @@
-import { Box, Container, Heading, Text } from '@chakra-ui/react';
-import React from 'react';
-
-type PageHeaderProps = {
-  title: string;
-  subtitle: string;
-  children?: React.ReactNode;
-};
-
-export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children } = props;
-
-  return (
-    <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
-      <Container maxW='container.md' position='relative'>
-        <Heading
-          as='h1'
-          color='black'
-          fontSize={['33px', '33px', '40px']}
-          fontWeight={700}
-          mb={['2px', '2px', '5px']}
-        >
-          {title}
-        </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
-      </Container>
-
-      {children && (
-        <Container maxW='container.md'>
-          {children}
-        </Container>
-      )}
-    </Box>
-  );
-}

components/roadmap/home-roadmap-item.tsx

@@ -1,47 +0,0 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
-
-type RoadmapGridItemProps = {
-  title: string;
-  subtitle: string;
-  isCommunity?: boolean;
-  colorIndex?: number;
-  url: string;
-};
-
-const bgColorList = [
-  'blue.900',
-  'red.800',
-  'green.800',
-  'teal.800',
-  'gray.800',
-  'red.900'
-];
-
-export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
-
-  return (
-    <Box
-      as={Link}
-      href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
-      flex={1}
-      shadow='2xl'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
-      color='white'
-      p='15px'
-      rounded='10px'
-      pos='relative'
-    >
-      {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
-        </Tooltip>
-      )}
-
-      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
-    </Box>
-  );
-}

components/roadmap/roadmap-grid-item.tsx

@@ -1,89 +0,0 @@
-import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
-
-type RoadmapGridItemProps = {
-  title: string;
-  subtitle: string;
-  href: string;
-  isCommunity?: boolean;
-  isUpcoming?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  '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'
-];
-
-export function RoadmapGridItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity = false, isUpcoming = false, colorIndex = 0, href = '/' } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1} pos='relative'>
-
-      {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} color='gray.100' position='absolute' top='10px' right='10px' />
-        </Tooltip>
-      )}
-
-      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-
-      {isUpcoming && (
-        <Flex
-          alignItems='center'
-          justifyContent='center'
-          pos='absolute'
-          left={0}
-          right={0}
-          top={0}
-          bottom={0}
-          rounded='10px'
-        >
-          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
-                rounded='10px'>Upcoming</Text>
-          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
-        </Flex>
-      )}
-    </Box>
-  );
-}

components/updates-banner.tsx

@@ -1,40 +0,0 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
-import siteConfig from '../content/site.json';
-
-export function UpdatesBanner() {
-  return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
-         bg='gray.800'>
-      <Container maxW='container.md'>
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
-          Informed</Heading>
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
-          updates, new
-          guides, videos and roadmaps in your inbox.</Text>
-
-        <Flex flexDirection={['column', 'column', 'row']}>
-          <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
-                    variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
-              Subscribe to Updates
-            </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
-          </Box>
-          <Box>
-            <Button as={Link}
-                    href={siteConfig.url.sponsor}
-                    target='_blank'
-                    width={['full', 'auto']}
-                    fontSize={['14px', '14px', '16px']}
-                    _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
-                                                                                                             fontWeight={600}>5$
-              per month</Text></Text>
-          </Box>
-        </Flex>
-      </Container>
-    </Box>
-  );
-}

components/watch/video-grid-item.tsx

@@ -1,70 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type VideoGridItemProps = {
-  href: string;
-  title: string;
-  subtitle: string;
-  date: string;
-  isNew?: boolean;
-  isPro?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  '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'
-];
-
-export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
-        {date}
-      </Text>
-      <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Box>
-  );
-}

content/authors.json

@@ -1,43 +0,0 @@
-[
-  {
-    "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"
-  }
-]

content/guides.json

@@ -1,229 +0,0 @@
-[
-  {
-    "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": "2020-07-09T19:59:14.191Z",
-    "createdAt": "2020-07-09T19:59:14.191Z"
-  },
-  {
-    "id": "sso",
-    "title": "SSO — Single Sign On",
-    "description": "Learn the basics of SAML and understand how does Single Sign On work.",
-    "isPro": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-07-01T19:59:14.191Z",
-    "createdAt": "2020-07-01T19:59:14.191Z"
-  },
-  {
-    "id": "oauth",
-    "title": "OAuth — Open Authorization",
-    "description": "Learn and understand what is OAuth and how it works",
-    "isPro": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-28T19:59:14.191Z",
-    "createdAt": "2020-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": "2020-06-20T19:59:14.191Z",
-    "createdAt": "2020-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": "2020-06-02T20:59:14.191Z",
-    "createdAt": "2020-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": "2020-05-26T20:59:14.191Z",
-    "createdAt": "2020-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": "2020-05-19T20:59:14.191Z",
-    "createdAt": "2020-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": "2020-05-14T20:59:14.191Z",
-    "createdAt": "2020-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": "2020-05-04T20:59:14.191Z",
-    "createdAt": "2020-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 “build it and they will come” alone won’t work anymore",
-    "isPro": false,
-    "authorUsername": "spekulatius",
-    "updatedAt": "2020-05-04T12:59:14.191Z",
-    "createdAt": "2020-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": "2020-04-28T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-04-22T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-04-03T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-03-15T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-03-14T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-02-18T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-02-29T15:48:21.191Z",
-    "createdAt": "2020-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": "2020-01-17T15:48:21.191Z",
-    "createdAt": "2020-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": "2019-12-03T12:13:00.860Z",
-    "createdAt": "2019-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": "2020-07-24T12:40:18",
-    "updatedAt": "2020-07-24T12:40:18"
-  }
-]

content/guides/asymptotic-notation.md

@@ -1,16 +0,0 @@
-export const guideMeta = {
-    "title": "WebStorm — 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": true,
-    "author": "kamranahmedse",
-    "updatedAt": "2020-07-16T19:59:14.191Z",
-    "createdAt": "2020-07-16T19:59:14.191Z"
-};
-
-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](/guides/big-o-notation).
-
-[![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted.

content/guides/basic-authentication.md

@@ -1,3 +0,0 @@
-[![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted.

content/guides/big-o-notation.md

@@ -1,5 +0,0 @@
-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. 
-
-[![](/guides/big-o-notation.png)](/guides/big-o-notation.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted.

content/guides/character-encodings.md

@@ -1,3 +0,0 @@
-[![](/guides/character-encodings.png)](/guides/character-encodings.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted.

content/guides/ci-cd.md

@@ -1,5 +0,0 @@
-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](https://www.youtube.com/watch?v=nyKZTKQS_EQ).
-
-[![](/guides/ci-cd.png)](/guides/ci-cd.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted.

content/guides/dhcp-in-one-picture.md

@@ -1,3 +0,0 @@
-[![](/guides/dhcp.png)](/guides/dhcp.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted.

content/guides/dns-in-one-picture.md

@@ -1,5 +0,0 @@
-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.
-
-[![](https://i.imgur.com/z9rwm5A.png)](https://i.imgur.com/z9rwm5A.png)

content/guides/history-of-javascript.md

@@ -1,41 +0,0 @@
-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](https://twitter.com/BrendanEich) 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](https://en.wikipedia.org/wiki/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](http://es6-features.org/#Constants)
-
-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](https://github.com/tc39) has quite streamlined their process. TC39 operates through a Github organization now and there are [several proposals](https://github.com/tc39/proposals) for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and [submit a proposal](https://github.com/tc39/proposals) thus resulting in increasing the participation from the community. Every proposal goes through [four stages of maturity](https://tc39.github.io/process-document/) 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](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/).

content/guides/http-caching.md

@@ -1,251 +0,0 @@
-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](https://i.imgur.com/mJYVvTh.png)
-
-> 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
-
-![](https://i.imgur.com/9MjlzvW.png)
-
-### 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](#browser-cache)
-- [Proxy Cache](#proxy-cache)
-- [Reverse Proxy Cache](#reverse-proxy-cache)
-
-#### 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](https://i.imgur.com/mJYVvTh.png)
-
-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](https://i.imgur.com/3mj6e1O.png)
-
-#### 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](http://i.imgur.com/Eg4Cru3.png)
- 
-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](#expires)
-- [Pragma](#pragma)
-- [Cache-Control](#cache-control)
-  - [private](#private)
-  - [public](#public)
-  - [no-store](#no-store)
-  - [no-cache](#no-cache)
-  - [max-age: seconds](#max-age)
-  - [s-maxage: seconds](#s-maxage)
-  - [must-revalidate](#must-revalidate)
-  - [proxy-revalidate](#proxy-revalidate)
-  - [Mixing Values](#mixing-values)
-- [Validators](#validators)
-  - [ETag](#etag)
-  - [Last-Modified](#last-modified)
-
-#### 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
-
-```html
-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)
-
-```html
-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
-
-```html
-Cache-Control: public
-```
-
-##### no-store
-**`no-store`** specifies that the content is not to be cached by any of the caches
-
-```html
-Cache-Control: no-store
-```
-
-##### no-cache
-**`no-cache`** indicates that the cache can be maintained but the cached content is to be re-validated (using `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.
-
-```html
-Cache-Control: max-age=3600, no-cache, public
-```
-
-##### max-age: seconds
-**`max-age`** specifies the number of seconds for which the content will be cached. For example, if the `cache-control` looks like below:
-
-```html
-Cache-Control: max-age=3600, public
-```
-it would mean that the content is publicly cacheable and will be considered stale after 60 minutes
-
-##### s-maxage: seconds
-**`s-maxage`** here `s-` prefix stands for shared. This directive specifically targets the shared caches. Like `max-age` it also gets the number of seconds for which something is to be cached. If present, it will override `max-age` and `expires` headers for shared caching.
-
-```html
-Cache-Control: s-maxage=3600, public
-```
-
-##### must-revalidate
-**`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. `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. 
-
-```html
-Cache-Control: max-age=3600, public, must-revalidate
-```
-
-##### proxy-revalidate
-**`proxy-revalidate`** is similar to `must-revalidate` but it specifies the same for shared or proxy caches. In other words `proxy-revalidate` is to `must-revalidate` as `s-maxage` is to `max-age`. But why did they not call it `s-revalidate`?. I have no idea why, if you have any clue please leave a comment below. 
-
-##### Mixing Values
-You can combine these directives in different ways to achieve different caching behaviors, however `no-cache/no-store` and `public/private` are mutually exclusive. 
-
-If you specify both `no-store` and `no-cache`, `no-store` will be given precedence over `no-cache`.
-
-```html
-; If specified both
-Cache-Control: no-store, no-cache
-
-; Below will be considered
-Cache-Control: no-store
-```
-
-For `private/public`, for any unauthenticated requests cache is considered `public` and for any authenticated ones cache is considered `private`.
-
-### Validators 
-
-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.
-
-#### ETag
-
-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 `"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. 
-
-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
-
-```html
-ETag: "j82j8232ha7sdh0q2882" - Strong Etag
-ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)
-```
-
-A strong validating ETag means that two resources are **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.
-
-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 `If-None-Match` header.
-
-Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of `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 `if-none-match` header
-
-```html
-If-None-Match: "abc123xyz"
-```
-
-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 `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.
-
-#### Last-Modified
-
-Server might include the `Last-Modified` header indicating the date and time at which some content was last modified on.
- 
-```html
-Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT
-```
-
-When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called `If-Modified-Since` to server to get the updated `Last-Modified` date; if it matches the date that the client has, `Last-Modified` date for the content is updated to be considered fresh for another `n` seconds. If the received `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.
-
-```html
-If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT
-```
-
-You might be questioning now, what if the cached content has both the `Last-Modified` and `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 `ETag` matches the newly retrieved one and so does the `Last-Modified` date. If either the `ETag` does not match or the `Last-Modified` is greater than the one from the server, content has to be downloaded again. 
-
-### Where do I start?
-
-Now that we have got *everything* covered, let us put everything in perspective and see how you can use this information.
-
-#### Utilizing Server
-
-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. 
-
-**For example**, if you are using Apache and you have your static content placed at `/static`, you can put below `.htaccess` file in the directory to make all the content in it be cached for an year using below
-
-```html
-# Cache everything for an year
-Header set Cache-Control "max-age=31536000, public"
-```
-
-You can further use `filesMatch` directive to add conditionals and use different caching strategy for different kinds of files e.g.
-
-```html
-# Cache any images for one year
-<filesMatch ".(png|jpg|jpeg|gif)$">
-    Header set Cache-Control "max-age=31536000, public"
-</filesMatch>
-
-# Cache any CSS and JS files for a month
-<filesMatch ".(css|js)$">
-    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](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9) 
-  - 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!

content/guides/journey-to-http2.md

@@ -1,195 +0,0 @@
-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.
-
-### What is HTTP?
-
-First things first, 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. 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 `TCP/IP` to get request and response between the client and server. By default TCP port `80` is used but other ports can be used as well. HTTPS, however, uses port `443`.
-
-### HTTP/0.9 – The One Liner (1991) 
-
-The first documented version of HTTP was [`HTTP/0.9`](https://www.w3.org/Protocols/HTTP/AsImplemented.html) which was put forward in 1991. It was the simplest protocol ever; having a single method called `GET`. If a client had to access some webpage on the server, it would have made the simple request like below
-
-```html
-GET /index.html
-```
-And the response from server would have looked as follows
-
-```html
-(response body)
-(connection closed)
-```
-
-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 
-
-- No headers
-- `GET` was the only allowed method 
-- Response had to be HTML
-
-As you can see, the protocol really had nothing more than being a stepping stone for what was to come.
-
-### HTTP/1.0 - 1996
-
-In 1996, the next version of HTTP i.e. `HTTP/1.0` evolved that vastly improved over the original version. 
-
-Unlike `HTTP/0.9` which was only designed for HTML response, `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. `POST` and `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.
-
-Here is how a sample `HTTP/1.0` request and response might have looked like:
-
-```html
-GET / HTTP/1.0
-Host: kamranahmed.info
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5)
-Accept: */*
-```
-
-As you can see, alongside the request, client has also sent its personal information, required response type etc. While in `HTTP/0.9` client could never send such information because there were no headers.
-
-Example response to the request above may have looked like below
-
-```html
-HTTP/1.0 200 OK 
-Content-Type: text/plain
-Content-Length: 137582
-Expires: Thu, 05 Dec 1997 16:00:00 GMT
-Last-Modified: Wed, 5 August 1996 15:55:28 GMT
-Server: Apache 0.84
-
-(response body)
-(connection closed)
-```
-
-In the very beginning of the response there is `HTTP/1.0` (HTTP followed by the version number), then there is the status code `200` followed by the reason phrase (or description of the status code, if you will). 
-
-In this newer version, request and response headers were still kept as `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 `HTTP` became misnomer. `HMTP` or Hypermedia transfer protocol might have made more sense but, I guess, we are stuck with the name for life.
-
-One of the major drawbacks of `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 `10` images, `5` stylesheets and `5` javascript files, totalling to `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 `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 `TCP` connection imposes a significant performance penalty because of three-way handshake followed by slow-start.
-
-#### Three-way Handshake 
-
-Three-way handshake in its simplest form is that all the `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. 
-
-- `SYN` - Client picks up a random number, let's say `x`, and sends it to the server.
-- `SYN ACK` - Server acknowledges the request by sending an `ACK` packet back to the client which is made up of a random number, let's say `y` picked up by server and the number `x+1` where `x` is the number that was sent by the client
-- `ACK` - Client increments the number `y` received from the server and sends an `ACK` packet back with the number `y+1`
-
-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 `ACK` packet but the server will still have to wait for the `ACK` packet to be recieved in order to fulfill the request.
-
-![](http://i.imgur.com/uERG2G2.png)
-
-> Please note that there is a minor issue with the image, the last `ACK` packet sent by the client to end the handshake contains only `y+1` i.e. it should have been `ACK:y+1` instead of `ACK: x+1, y+1` 
-
-However, some implementations of `HTTP/1.0` tried to overcome this issue by introducing a new header called `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.
-
-Apart from being connectionless, `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.
-
-### HTTP/1.1 - 1999
-
-After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was released in 1999; which made alot of improvements over its predecessor. The major improvements over `HTTP/1.0` included
-
-- **New HTTP methods** were added, which introduced `PUT`, `PATCH`, `OPTIONS`, `DELETE`
-
-- **Hostname Identification** In `HTTP/1.0` `Host` header wasn't required but `HTTP/1.1` made it required.
-
-- **Persistent Connections** As discussed above, in `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. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection.
-
-- **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 `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response.
-
-  > It should be noted that in order to benefit from persistent connections or pipelining, `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). 
-
-  > 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 `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.
-
-- **Chunked Transfers** In case of dynamic content, when the server cannot really find out the `Content-Length` when the transmission starts, it may start sending the content in pieces (chunk by chunk) and add the `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 `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 `Transfer-Encoding: chunked`
-
-- Unlike `HTTP/1.0` which had Basic authentication only, `HTTP/1.1` included digest and proxy authentication
-- Caching
-- Byte Ranges
-- Character sets
-- Language negotiation
-- Client cookies
-- Enhanced compression support
-- New status codes
-- ..and more 
-
-I am not going to dwell about all the `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 [Key differences between `HTTP/1.0` and HTTP/1.1](http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers.
-
-`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 `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **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 `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humungous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
-
-### SPDY - 2009
-
-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 `SPDY`. 
-
-> `SPDY` is a trademark of Google and isn't an acronym.
-
-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 `SPDY`, decrease the latency to increase the network performance.
-
-> 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).
-
-The features of `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 `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY.
-
-`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. 
-
-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 `HTTP/2` and deprecating SPDY. 
-
-### HTTP/2 - 2015
-
-By now, you must be convinced that why we needed another revision of the HTTP protocol. `HTTP/2` was  designed for low latency transport of content. The key features or differences from the old version of `HTTP/1.1` include
-
-- Binary instead of Textual
-- Multiplexing - Multiple asynchronous HTTP requests over a single connection
-- Header compression using HPACK
-- Server Push - Multiple responses for single request
-- Request Prioritization
-- Security
-
-![](http://i.imgur.com/S85j8gg.png)
-
-
-#### 1. Binary Protocol
-
-`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 `HTTP/1.x` it is no longer readable by the human eye. The major building blocks of `HTTP/2` are Frames and Streams
-
-##### Frames and Streams
-
-HTTP messages are now composed of one or more frames. There is a `HEADERS` frame for the meta data and `DATA` frame for the payload and there exist several other types of frames (`HEADERS`, `DATA`, `RST_STREAM`, `SETTINGS`, `PRIORITY` etc) that you can check through [the `HTTP/2` specs](https://http2.github.io/http2-spec/#FrameTypes). 
-
-Every `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.
-
-Apart from the `HEADERS` and `DATA`, another frame type that I think worth mentioning here is `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 `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 `RST_STREAM` and stop receiving a specific stream while the connection will still be open and the other streams will still be in play.
-
-
-#### 2. Multiplexing
-
-Since `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 **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.
-
-
-#### 3. HPACK Header Compression
-
-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, `HTTP/2` introduced header compression.
-
-![](http://i.imgur.com/3IPWXvR.png)
-
-Unlike request and response, headers are not compressed in `gzip` or `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.
-
-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. `:method`, `:scheme`, `:host` and `:path`
-
-
-#### 4. Server Push
-
-Server push is another tremendous feature of `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.
-
-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 `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `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.
-
-#### 5. Request Prioritization
-
-A client can assign a priority to a stream by including the prioritization information in the `HEADERS` frame by which a stream is opened. At any other time, client can send a `PRIORITY` frame to change the priority of a stream.
-
-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.
-
-#### 6. Security
-
-There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirementsi.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc.
-
-`HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. 
-
-For anyone interested in further details here is the [link to specs](https://http2.github.io/http2-spec) and a link [demonstrating the performance benefits of `HTTP/2`](http://www.http2demo.io/). 
-
-And that about wraps it up. Until next time! stay tuned.

content/guides/jwt-authentication.md

@@ -1,3 +0,0 @@
-[![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1273375903511465990) where this image was posted.

content/guides/oauth.md

@@ -1,3 +0,0 @@
-[![](/guides/oauth.png)](/guides/oauth.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1276994010423361540) where this image was posted.

content/guides/project-history.md

@@ -1,5 +0,0 @@
-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.
-
-The image below describes how I do that in WebStorm.
-
-[![](/guides/project-history.png)](/guides/project-history.png)

content/guides/proxy-servers.md

@@ -1,47 +0,0 @@
-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](#proxy-server)
-- [Forward Proxy Server](#forward-proxy-server)
-- [Reverse Proxy Server](#reverse-proxy-server)
-- [Summary](#summary)
-
-## 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](/guides/proxy/proxy-example.png)    
-> 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](/guides/proxy/forward-proxy.png)    
-> 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](/guides/proxy/reverse-proxy.png)    
-> 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.

content/guides/random-numbers.md

@@ -1,5 +0,0 @@
-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. 
-
-[![](/guides/random-numbers.png)](/guides/random-numbers.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted.

content/guides/scaling-databases.md

@@ -1,5 +0,0 @@
-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.
-
-[![](/guides/scaling-databases.svg)](/guides/scaling-databases.svg)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted.

content/guides/session-authentication.md

@@ -1,3 +0,0 @@
-[![](/guides/session-authentication.png)](/guides/session-authentication.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1264113498520465410) where this image was posted.

content/guides/ssl-tls-https-ssh.md

@@ -1,3 +0,0 @@
-[![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1252717722724642822) where this image was posted.

content/guides/sso.md

@@ -1,3 +0,0 @@
-[![](/guides/sso.png)](/guides/sso.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1280266408434302979) where this image was posted.

content/guides/token-authentication.md

@@ -1,3 +0,0 @@
-[![](/guides/token-authentication.png)](/guides/token-authentication.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1266832006782103552) where this image was posted.

content/guides/torrent-client.md

@@ -1,564 +0,0 @@
-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](/guides/torrent-client/client-server-p2p.png)
-
-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](https://www.bittorrent.org/beps/bep_0003.html) from 2001 to keep this a weekend-sized project.
-
-I'll be using a [Debian ISO](https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist) 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](/guides/torrent-client/trackers.png)
-
-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:
-
-```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:<3A><1F><0F><><EFBFBD>PS<50>^<5E><> (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:
-
-```markdown
-d
-  8:announce
-    41:http://bttracker.debian.org:6969/announce
-  7:comment
-    35:"Debian CD from cdimage.debian.org"
-  13:creation date
-    i1573903810e
-  4:info
-    d
-      6:length
-        i351272960e
-      4:name
-        31:debian-10.2.0-amd64-netinst.iso
-      12:piece length
-        i262144e
-      6:pieces
-        26800:<3A><1F><0F><><EFBFBD>PS<50>^<5E><> (binary blob of the hashes of each piece)
-    e
-e
-```
-
-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 **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 *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!
-
-!["illustration of a file being cut with scissors into multiple pieces, starting with piece 0](/guides/torrent-client/pieces.png)
-
-This mechanism allows us to verify the integrity of each piece as we go. It makes BitTorrent resistant to accidental corruption or intentional **torrent poisoning**. Unless an attacker is capable of breaking SHA-1 with a preimage attack, we will get exactly the content we asked for.
-
-It would be really fun to write a bencode parser, but parsing isn't our focus today. But I found Fredrik Lundh's [50 line parser](https://effbot.org/zone/bencode.htm) to be especially illuminating. For this project, I used [github.com/jackpal/bencode-go](https://github.com/jackpal/bencode-go):
-
-```go
-import (
-    "github.com/jackpal/bencode-go"
-)
-
-type bencodeInfo struct {
-    Pieces      string `bencode:"pieces"`
-    PieceLength int    `bencode:"piece length"`
-    Length      int    `bencode:"length"`
-    Name        string `bencode:"name"`
-}
-
-type bencodeTorrent struct {
-    Announce string      `bencode:"announce"`
-    Info     bencodeInfo `bencode:"info"`
-}
-
-// Open parses a torrent file
-func Open(r io.Reader) (*bencodeTorrent, error) {
-    bto := bencodeTorrent{}
-    err := bencode.Unmarshal(r, &bto)
-    if err != nil {
-        return nil, err
-    }
-    return &bto, nil
-}
-```
-
-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 `TorrentFile` and wrote a few helper functions to convert between the two.
-
-Notably, I split `pieces` (previously a string) into a slice of hashes (each `[20]byte`) so that I can easily access individual hashes later. I also computed the SHA-1 hash of the entire bencoded `info` dict (the one which contained the name, size, and piece hashes). We know this as the **infohash** and it uniquely identifies files when we talk to trackers and peers. More on this later.
-
-![a name tag saying 'Hello my name is 86d4c80024a469be4c50bc5a102cf71780310074'](/guides/torrent-client/info-hash.png)
-
-```go
-type TorrentFile struct {
-    Announce    string
-    InfoHash    [20]byte
-    PieceHashes [][20]byte
-    PieceLength int
-    Length      int
-    Name        string
-}
-
-func (bto *bencodeTorrent) toTorrentFile() (*TorrentFile, error) {
-    // ...
-}
-```
-
-### Retrieving peers from the tracker
-Now that we have information about the file and its tracker, let's talk to the tracker to **announce** our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the `announce` URL supplied in the .torrent file, with a few query parameters:
-
-```go
-func (t *TorrentFile) buildTrackerURL(peerID [20]byte, port uint16) (string, error) {
-    base, err := url.Parse(t.Announce)
-    if err != nil {
-        return "", err
-    }
-    params := url.Values{
-        "info_hash":  []string{string(t.InfoHash[:])},
-        "peer_id":    []string{string(peerID[:])},
-        "port":       []string{strconv.Itoa(int(Port))},
-        "uploaded":   []string{"0"},
-        "downloaded": []string{"0"},
-        "compact":    []string{"1"},
-        "left":       []string{strconv.Itoa(t.Length)},
-    }
-    base.RawQuery = params.Encode()
-    return base.String(), nil
-}
-```
-
-The important ones:
-
-* **info_hash**: Identifies the *file* we're trying to download. It's the infohash we calculated earlier from the bencoded `info` dict. The tracker will use this to figure out which peers to show us.
-* **peer_id**: A 20 byte name to identify *ourselves* to trackers and peers. We'll just generate 20 random bytes for this. Real BitTorrent clients have IDs like `-TR2940-k8hj0wgej6ch` which identify the client software and version—in this case, TR2940 stands for Transmission client 2.94.
-
-![a file with a name tag saying 'info_hash' and a person with a name tag 'peer_id'](/guides/torrent-client/info-hash-peer-id.png)
-
-### Parsing the tracker response
-We get back a bencoded response:
-
-```markdown
-d
-  8:interval
-    i900e
-  5:peers
-    252:(another long binary blob)
-e
-```
-
-`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).
-
-`Peers` is another long binary blob containing the IP addresses of each peer. It's made out of **groups of six bytes**. The first four bytes in each group represent the peer's IP address—each byte represents a number in the IP. The last two bytes represent the port, as a big-endian `uint16`. **Big-endian**, or **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 `0x1A`, `0xE1` make `0x1AE1`, or 6881 in decimal.
-
-![diagram showing how 192, 0, 2, 123, 0x1A, 0xE1 can be interpreted as 192.0.1.123:6881](/guides/torrent-client/address.png)
-
-```go
-// Peer encodes connection information for a peer
-type Peer struct {
-    IP   net.IP
-    Port uint16
-}
-
-// Unmarshal parses peer IP addresses and ports from a buffer
-func Unmarshal(peersBin []byte) ([]Peer, error) {
-    const peerSize = 6 // 4 for IP, 2 for port
-    numPeers := len(peersBin) / peerSize
-    if len(peersBin)%peerSize != 0 {
-        err := fmt.Errorf("Received malformed peers")
-        return nil, err
-    }
-    peers := make([]Peer, numPeers)
-    for i := 0; i < numPeers; i++ {
-        offset := i * peerSize
-        peers[i].IP = net.IP(peersBin[offset : offset+4])
-        peers[i].Port = binary.BigEndian.Uint16(peersBin[offset+4 : offset+6])
-    }
-    return peers, nil
-}
-```
-
-## Downloading from peers
-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:
-
-1. Start a TCP connection with the peer. This is like starting a phone call.
-2. Complete a two-way BitTorrent **handshake**. *"Hello?" "Hello."*
-3. Exchange **messages** to download **pieces**. *"I'd like piece #231 please."*
-
-## Start a TCP connection
-```go
-conn, err := net.DialTimeout("tcp", peer.String(), 3*time.Second)
-if err != nil {
-    return nil, err
-}
-```
-
-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.
-
-### Complete the handshake
-We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer
-
-* can communicate using the BitTorrent protocol
-* is able to understand and respond to our messages
-* has the file that we want, or at least knows what we're talking about
-
-![Two computers communicating. One asks 'do you speak BitTorrent and have this file?' and the other replies 'I speak BitTorrent and have that file'](/guides/torrent-client/handshake.png)
-
-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:
-
-1. The length of the protocol identifier, which is always 19 (0x13 in hex)
-2. The protocol identifier, called the **pstr** which is always `BitTorrent protocol`
-3. Eight **reserved bytes**, all set to 0. We'd flip some of them to 1 to indicate that we support certain [extensions](http://www.bittorrent.org/beps/bep_0010.html). But we don't, so we'll keep them at 0.
-4. The **infohash** that we calculated earlier to identify which file we want
-5. The **Peer ID** that we made up to identify ourselves
-
-Put together, a handshake string might look like this:
-
-```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
-```
-
-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. *"Hello?" "这是谁？ 你想要什么？" "Okay, wow, wrong number."*
-
-In our code, let's make a struct to represent a handshake, and write a few methods for serializing and reading them:
-
-```go
-// A Handshake is a special message that a peer uses to identify itself
-type Handshake struct {
-    Pstr     string
-    InfoHash [20]byte
-    PeerID   [20]byte
-}
-
-// Serialize serializes the handshake to a buffer
-func (h *Handshake) Serialize() []byte {
-    buf := make([]byte, len(h.Pstr)+49)
-    buf[0] = byte(len(h.Pstr))
-    curr := 1
-    curr += copy(buf[curr:], h.Pstr)
-    curr += copy(buf[curr:], make([]byte, 8)) // 8 reserved bytes
-    curr += copy(buf[curr:], h.InfoHash[:])
-    curr += copy(buf[curr:], h.PeerID[:])
-    return buf
-}
-
-// Read parses a handshake from a stream
-func Read(r io.Reader) (*Handshake, error) {
-    // Do Serialize(), but backwards
-    // ...
-}
-```
-
-### Send and receive messages
-Once we've completed the initial handshake, we can send and receive **messages**. Well, not quite—if 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 **choked** by the other peer. They'll send us an **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.
-
-Once we've been unchoked, we can then begin sending **requests** for pieces, and they can send us messages back containing pieces.
-
-!["A cartoon in which person 1 says 'hello I would like piece number—' and person 2 grabs him by the neck and says '00 00 00 01 00 (choke)'](/guides/torrent-client/choke.png)
-
-#### Interpreting messages
-A message has a length, an **ID** and a **payload**. On the wire, it looks like:
-
-![A message with 4 byte for the length, 1 byte for ID, and an optional payload](/guides/torrent-client/message.png)
-
-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 **ID**, tells us which type of message we're receiving—for example, a `2` byte means "interested." Finally, the optional **payload** fills out the remaining length of the message.
-
-```go
-type messageID uint8
-
-const (
-    MsgChoke         messageID = 0
-    MsgUnchoke       messageID = 1
-    MsgInterested    messageID = 2
-    MsgNotInterested messageID = 3
-    MsgHave          messageID = 4
-    MsgBitfield      messageID = 5
-    MsgRequest       messageID = 6
-    MsgPiece         messageID = 7
-    MsgCancel        messageID = 8
-)
-
-// Message stores ID and payload of a message
-type Message struct {
-    ID      messageID
-    Payload []byte
-}
-
-// Serialize serializes a message into a buffer of the form
-// <length prefix><message ID><payload>
-// Interprets `nil` as a keep-alive message
-func (m *Message) Serialize() []byte {
-    if m == nil {
-        return make([]byte, 4)
-    }
-    length := uint32(len(m.Payload) + 1) // +1 for id
-    buf := make([]byte, 4+length)
-    binary.BigEndian.PutUint32(buf[0:4], length)
-    buf[4] = byte(m.ID)
-    copy(buf[5:], m.Payload)
-    return buf
-}
-```
-
-To read a message from a stream, we just follow the format of a message. We read four bytes and interpret them as a `uint32` to get the **length** of the message. Then, we read that number of bytes to get the **ID** (the first byte) and the **payload** (the remaining bytes).
-
-```go
-// Read parses a message from a stream. Returns `nil` on keep-alive message
-func Read(r io.Reader) (*Message, error) {
-    lengthBuf := make([]byte, 4)
-    _, err := io.ReadFull(r, lengthBuf)
-    if err != nil {
-        return nil, err
-    }
-    length := binary.BigEndian.Uint32(lengthBuf)
-
-    // keep-alive message
-    if length == 0 {
-        return nil, nil
-    }
-
-    messageBuf := make([]byte, length)
-    _, err = io.ReadFull(r, messageBuf)
-    if err != nil {
-        return nil, err
-    }
-
-    m := Message{
-        ID:      messageID(messageBuf[0]),
-        Payload: messageBuf[1:],
-    }
-
-    return &m, nil
-}
-```
-
-#### Bitfields
-One of the most interesting types of message is the **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 *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`, and flip bits to `1` to mark their positions as "stamped."
-
-![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](/guides/torrent-client/bitfield.png)
-
-By working with *bits* instead of *bytes*, this data structure is super compact. We can stuff information about eight pieces in the space of a single byte—the size of a `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:
-
-```go
-// A Bitfield represents the pieces that a peer has
-type Bitfield []byte
-
-// HasPiece tells if a bitfield has a particular index set
-func (bf Bitfield) HasPiece(index int) bool {
-    byteIndex := index / 8
-    offset := index % 8
-    return bf[byteIndex]>>(7-offset)&1 != 0
-}
-
-// SetPiece sets a bit in the bitfield
-func (bf Bitfield) SetPiece(index int) {
-    byteIndex := index / 8
-    offset := index % 8
-    bf[byteIndex] |= 1 << (7 - offset)
-}
-```
-
-### Putting it all together
-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 **concurrency** involved in talking to multiple peers at once, and managing the **state** of our peers as we interact with them. These are both classically Hard problems.
-
-#### Managing concurrency: channels as queues
-In Go, we [share memory by communicating](https://blog.golang.org/share-memory-by-communicating), and we can think of a Go channel as a cheap thread-safe queue.
-
-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.
-
-```go
-// Init queues for workers to retrieve work and send results
-workQueue := make(chan *pieceWork, len(t.PieceHashes))
-results := make(chan *pieceResult)
-for index, hash := range t.PieceHashes {
-    length := t.calculatePieceSize(index)
-    workQueue <- &pieceWork{index, hash, length}
-}
-
-// Start workers
-for _, peer := range t.Peers {
-    go t.startDownloadWorker(peer, workQueue, results)
-}
-
-// Collect results into a buffer until full
-buf := make([]byte, t.Length)
-donePieces := 0
-for donePieces < len(t.PieceHashes) {
-    res := <-results
-    begin, end := t.calculateBoundsForPiece(res.index)
-    copy(buf[begin:end], res.buf)
-    donePieces++
-}
-close(workQueue)
-```
-
-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 `workQueue`, attempting to download it, and sending downloaded pieces back through the `results` channel.
-
-![a flow chart of the download strategy](/guides/torrent-client/download.png)
-
-```go
-func (t *Torrent) startDownloadWorker(peer peers.Peer, workQueue chan *pieceWork, results chan *pieceResult) {
-    c, err := client.New(peer, t.PeerID, t.InfoHash)
-    if err != nil {
-        log.Printf("Could not handshake with %s. Disconnecting\n", peer.IP)
-        return
-    }
-    defer c.Conn.Close()
-    log.Printf("Completed handshake with %s\n", peer.IP)
-
-    c.SendUnchoke()
-    c.SendInterested()
-
-    for pw := range workQueue {
-        if !c.Bitfield.HasPiece(pw.index) {
-            workQueue <- pw // Put piece back on the queue
-            continue
-        }
-
-        // Download the piece
-        buf, err := attemptDownloadPiece(c, pw)
-        if err != nil {
-            log.Println("Exiting", err)
-            workQueue <- pw // Put piece back on the queue
-            return
-        }
-
-        err = checkIntegrity(pw, buf)
-        if err != nil {
-            log.Printf("Piece #%d failed integrity check\n", pw.index)
-            workQueue <- pw // Put piece back on the queue
-            continue
-        }
-
-        c.SendHave(pw.index)
-        results <- &pieceResult{pw.index, buf}
-    }
-}
-```
-
-#### Managing state
-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.
-
-```go
-type pieceProgress struct {
-    index      int
-    client     *client.Client
-    buf        []byte
-    downloaded int
-    requested  int
-    backlog    int
-}
-
-func (state *pieceProgress) readMessage() error {
-    msg, err := state.client.Read() // this call blocks
-    switch msg.ID {
-    case message.MsgUnchoke:
-        state.client.Choked = false
-    case message.MsgChoke:
-        state.client.Choked = true
-    case message.MsgHave:
-        index, err := message.ParseHave(msg)
-        state.client.Bitfield.SetPiece(index)
-    case message.MsgPiece:
-        n, err := message.ParsePiece(state.index, state.buf, msg)
-        state.downloaded += n
-        state.backlog--
-    }
-    return nil
-}
-```
-
-#### Time to make requests!
-Files, pieces, and piece hashes aren't the full story—we can go further by breaking down pieces into **blocks**. A block is a part of a piece, and we can fully define a block by the **index** of the piece it's part of, its byte **offset** within the piece, and its **length**. When we make requests for data from peers, we are actually requesting *blocks*. A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests.
-
-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.
-
-#### Pipelining
-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 **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.
-
-![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.](/guides/torrent-client/pipelining.png)
-
-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 [adaptive](https://luminarys.com/posts/writing-a-bittorrent-client.html) 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.
-
-```go
-// MaxBlockSize is the largest number of bytes a request can ask for
-const MaxBlockSize = 16384
-
-// MaxBacklog is the number of unfulfilled requests a client can have in its pipeline
-const MaxBacklog = 5
-
-func attemptDownloadPiece(c *client.Client, pw *pieceWork) ([]byte, error) {
-    state := pieceProgress{
-        index:  pw.index,
-        client: c,
-        buf:    make([]byte, pw.length),
-    }
-
-    // Setting a deadline helps get unresponsive peers unstuck.
-    // 30 seconds is more than enough time to download a 262 KB piece
-    c.Conn.SetDeadline(time.Now().Add(30 * time.Second))
-    defer c.Conn.SetDeadline(time.Time{}) // Disable the deadline
-
-    for state.downloaded < pw.length {
-        // If unchoked, send requests until we have enough unfulfilled requests
-        if !state.client.Choked {
-            for state.backlog < MaxBacklog && state.requested < pw.length {
-                blockSize := MaxBlockSize
-                // Last block might be shorter than the typical block
-                if pw.length-state.requested < blockSize {
-                    blockSize = pw.length - state.requested
-                }
-
-                err := c.SendRequest(pw.index, state.requested, blockSize)
-                if err != nil {
-                    return nil, err
-                }
-                state.backlog++
-                state.requested += blockSize
-            }
-        }
-
-        err := state.readMessage()
-        if err != nil {
-            return nil, err
-        }
-    }
-
-    return state.buf, nil
-}
-```
-
-#### main.go
-This is a short one. We're almost there.
-
-```go
-package main
-
-import (
-    "log"
-    "os"
-
-    "github.com/veggiedefender/torrent-client/torrentfile"
-)
-
-func main() {
-    inPath := os.Args[1]
-    outPath := os.Args[2]
-
-    tf, err := torrentfile.Open(inPath)
-    if err != nil {
-        log.Fatal(err)
-    }
-
-    err = tf.DownloadToFile(outPath)
-    if err != nil {
-        log.Fatal(err)
-    }
-}
-```
-
-<script id="asciicast-xqRSB0Jec8RN91Zt89rbb9PcL" src="https://asciinema.org/a/xqRSB0Jec8RN91Zt89rbb9PcL.js" async></script>
-
-## 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](https://github.com/veggiedefender/torrent-client) if you're interested.

content/guides/unfamiliar-codebase.md

@@ -1,3 +0,0 @@
-[![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1256340163573231616) where this image was posted.

content/guides/upcoming.md

@@ -1,11 +0,0 @@
-> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup).
-
-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](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) 
-
-
-
- 

content/guides/what-is-internet.md

@@ -1,62 +0,0 @@
-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](https://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.  
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/Dxcc6ycZ73M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-
-## 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. 
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZhEf7e4kopM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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. 
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/5o8CwafCxnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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.  
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/AYdF7b3nMto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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.
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/kBXQZMmiA4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## 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.
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## Cybersecurity and Crime
-
-In this video, you will learn about the basics of cybersecurity and common cybercrimes
-
-<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></iframe>
-
-And that wraps it up for this article. To learn more about the Internet, [Kamran Ahmed](https://twitter.com/kamranahmedse) has a nice little guide on [DNS: How a website is found on the Internet](/guides/dns-in-one-picture). Also, go through the episodes of [howdns.works](https://howdns.works/) and read this [cartoon intro to DNS over HTTPS](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/).

content/guides/why-build-it-and-they-will-come-wont-work-anymore.md

@@ -1,69 +0,0 @@
-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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) 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](https://peterthaleikis.com/business-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](https://startupnamecheck.com/blog/how-to-start-a-small-business-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](https://hatchful.shopify.com/) 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](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). 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](https://getmakerlog.com/) or [WIP.chat](https://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](https://wheretopost.email). 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](https://peterthaleikis.com/newsletter). I'll send out the occasional email about interesting new articles or side-projects.
-
-
-About the author
-----------------
-
-[Peter Thaleikis](https://peterthaleikis.com/) 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.](https://bringyourownideas.com/), he has been Lead Developer for multiple organisations.

content/pages/about.md

@@ -1,67 +0,0 @@
-## 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](https://github.com/kamranahmedse/developer-roadmap)
-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
-a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and
-based on my personal opinions but it could have been much more than that so I decided to expand it to a website where
-people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc.
-
-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
-a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the
-learnings, get feedbacks on their projects etc.
-
-## How did you build roadmap.sh?
-
-The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
-be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
-
-## How does it make money?
-
-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
-any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in.
-
-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
-make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll
-continue growing the site however I can. My focus at the moment is not making money from it and just add content that
-creates value for the people.
-
-> Sponsor the efforts by [paying as little as 5$ per month](https://github.com/sponsors/kamranahmedse) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com).
-
-## Can I contribute?
-
-You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
-source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
-be:
-
-* Adding a new roadmap
-* Updating existing roadmap
-* Suggesting changes to the existing roadmaps
-* Writing a Guide
-* Updating an existing guide
-* Fixing grammar mistakes, typos on the website or the content
-* Updating the UI of the website
-* Refactoring the codebase
-* Becoming a sponsor
-
-Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
-decide to contribute.
-
-## Can I redistribute the content?
-
-No, the license of the content on this website does not allow you to redistribute any of the content on this website
-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](https://twitter.com/kamranahmedse) or email me
-at [kamranahmed.se@gmail.com](mailto: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.

content/pages/terms.md

@@ -1,125 +0,0 @@
-# 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](/privacy).
-
-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.
-
-
-

content/roadmaps.json

@@ -1,284 +0,0 @@
-[
-  {
-    "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 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,
-    "imagePath": "/roadmaps/frontend.png",
-    "resourcesPath": "/roadmaps/1-frontend/resources.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
-    "id": "frontend",
-    "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 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,
-    "imagePath": "/roadmaps/backend.png",
-    "resourcesPath": "/roadmaps/2-backend/resources.md",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
-    "id": "backend",
-    "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,
-    "imagePath": "/roadmaps/devops.png",
-    "resourcesPath": "/roadmaps/3-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",
-    "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,
-    "contentPath": "/roadmaps/4-react/landscape.md",
-    "resourcesPath": "/roadmaps/4-react/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
-    "id": "react",
-    "isUpcoming": false
-  },
-  {
-    "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",
-    "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
-    "author": {
-      "name": "Alexey Lesovsky",
-      "url": "https://github.com/lesovsky"
-    },
-    "isCommunity": true,
-    "isTextHeavy": true,
-    "featured": true,
-    "detailed": false,
-    "versions": [],
-    "id": "postgresql-dba",
-    "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": true,
-    "featured": true,
-    "contentPath": "/roadmaps/6-android/landscape.md",
-    "resourcesPath": "/roadmaps/6-android/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "id": "android",
-    "isUpcoming": false
-  },
-  {
-    "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,
-    "contentPath": "/roadmaps/7-qa/landscape.md",
-    "resourcesPath": "/roadmaps/7-qa/resources.md",
-    "author": {
-      "name": "Anas Fitiani",
-      "url": "https://github.com/anas-qa"
-    },
-    "id": "qa"
-  }
-]

content/roadmaps/1-frontend/meta.json

@@ -1,41 +0,0 @@
-{
-  "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 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,
-  "imagePath": "/roadmaps/frontend.png",
-  "resourcesPath": "./resources.md",
-  "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap"
-}

content/roadmaps/1-frontend/resources.md

@@ -1,76 +0,0 @@
-<div className='alert alert-primary' style={{ marginBottom: '-10px'}}>
-  This page is incomplete and is being worked upon. Please check back later or <a href='/signup'>subscribe</a> / <a href='https://twitter.com/kamranahmedse'>follow me on twitter</a> to get notified. Also, feel free to contribute by suggesting the resources in <a href='https://github.com/kamranahmedse/developer-roadmap'>the issues</a>.
-</div>
-
-# 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. 
-
-* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
-* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
-
-## 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.
- 
-
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> 
-* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
-
-## 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.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
-
-## 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.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
-
-## 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.  
-
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) 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".
-
-* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />