Remove outdated resource

* Update design-principles@p96fNXv0Z4rEEXJR9hAYX.md

add design principles description

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1739229597159
+		"lastUpdateCheck": 1753810743067
 	}
 }

.cursor/rules/content-migration.mdc

@@ -0,0 +1,155 @@
+---
+description: When user requests migrating old roadmap content to new folder from content-old to content folder
+globs: 
+alwaysApply: false
+---
+# Content Migration Rule
+
+## Rule Name: content-migration
+
+## Description
+This rule provides a complete process for migrating roadmap content from old structure to new structure using migration mapping files.
+
+## When to Use
+Use this rule when you need to:
+- Migrate content from content-old directories to content directories
+- Use a migration-mapping.json file to map topic paths to content IDs
+- Populate empty content files with existing content from legacy structure
+
+## Process
+
+### 1. Prerequisites Check
+- Verify the roadmap directory has a `migration-mapping.json` file
+- Confirm `content-old/` directory exists with source content
+- Confirm `content/` directory exists with target files
+
+### 2. Migration Script Creation
+Create a Node.js script with the following functionality:
+
+```javascript
+const fs = require('fs');
+const path = require('path');
+
+// Load the migration mapping
+const migrationMapping = JSON.parse(fs.readFileSync('migration-mapping.json', 'utf8'));
+
+// Function to find old content file based on topic path
+function findOldContentFile(topicPath) {
+  const parts = topicPath.split(':');
+  
+  if (parts.length === 1) {
+    // Top level file like "introduction"
+    return path.join('content-old', parts[0], 'index.md');
+  } else if (parts.length === 2) {
+    // Like "introduction:what-is-rust"
+    const [folder, filename] = parts;
+    return path.join('content-old', folder, `${filename}.md`);
+  } else if (parts.length === 3) {
+    // Like "language-basics:syntax:variables"
+    const [folder, subfolder, filename] = parts;
+    return path.join('content-old', folder, subfolder, `${filename}.md`);
+  }
+  
+  return null;
+}
+
+// Function to find new content file based on content ID
+function findNewContentFile(contentId) {
+  const contentDir = 'content';
+  const files = fs.readdirSync(contentDir);
+  
+  // Find file that ends with the content ID
+  const matchingFile = files.find(file => file.includes(`@${contentId}.md`));
+  
+  if (matchingFile) {
+    return path.join(contentDir, matchingFile);
+  }
+  
+  return null;
+}
+
+// Process each mapping
+console.log('Starting content migration...\n');
+
+let migratedCount = 0;
+let skippedCount = 0;
+
+for (const [topicPath, contentId] of Object.entries(migrationMapping)) {
+  const oldFilePath = findOldContentFile(topicPath);
+  const newFilePath = findNewContentFile(contentId);
+  
+  if (!oldFilePath) {
+    console.log(`❌ Could not determine old file path for: ${topicPath}`);
+    skippedCount++;
+    continue;
+  }
+  
+  if (!newFilePath) {
+    console.log(`❌ Could not find new file for content ID: ${contentId} (topic: ${topicPath})`);
+    skippedCount++;
+    continue;
+  }
+  
+  if (!fs.existsSync(oldFilePath)) {
+    console.log(`❌ Old file does not exist: ${oldFilePath} (topic: ${topicPath})`);
+    skippedCount++;
+    continue;
+  }
+  
+  try {
+    // Read old content
+    const oldContent = fs.readFileSync(oldFilePath, 'utf8');
+    
+    // Write to new file
+    fs.writeFileSync(newFilePath, oldContent);
+    
+    console.log(`✅ Migrated: ${topicPath} -> ${path.basename(newFilePath)}`);
+    migratedCount++;
+  } catch (error) {
+    console.log(`❌ Error migrating ${topicPath}: ${error.message}`);
+    skippedCount++;
+  }
+}
+
+console.log(`\n📊 Migration complete:`);
+console.log(`   Migrated: ${migratedCount} files`);
+console.log(`   Skipped: ${skippedCount} files`);
+console.log(`   Total: ${Object.keys(migrationMapping).length} mappings`);
+```
+
+### 3. Execution Steps
+1. Navigate to the roadmap directory (e.g., `src/data/roadmaps/[roadmap-name]`)
+2. Create the migration script as `migrate_content.cjs`
+3. Run: `node migrate_content.cjs`
+4. Review the migration results
+5. Clean up the temporary script file
+
+### 4. Validation
+After migration:
+- Verify a few migrated files have proper content (not just titles)
+- Check that the content structure matches the old content
+- Ensure proper markdown formatting is preserved
+
+## File Structure Expected
+```
+roadmap-directory/
+├── migration-mapping.json
+├── content/
+│   ├── file1@contentId1.md
+│   ├── file2@contentId2.md
+│   └── ...
+└── content-old/
+    ├── section1/
+    │   ├── index.md
+    │   ├── topic1.md
+    │   └── subsection1/
+    │       └── subtopic1.md
+    └── section2/
+        └── ...
+```
+
+## Notes
+- The migration mapping uses colons (`:`) to separate nested paths
+- Content files in the new structure use the pattern `filename@contentId.md`
+- The script handles 1-3 levels of nesting in the old structure
+- Always create the script with `.cjs` extension to avoid ES module issues

.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

@@ -1,4 +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_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

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

@@ -2,7 +2,7 @@ name: Clears API Cloudfront Cache
 on:
   workflow_dispatch:
 jobs:
-  aws_costs:
+  cloudfront_api_cache:
     runs-on: ubuntu-latest
     steps:
       - name: Clear Cloudfront Caching

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

@@ -2,7 +2,7 @@ name: Clears Frontend Cloudfront Cache
 on:
   workflow_dispatch:
 jobs:
-  aws_costs:
+  cloudfront_fe_cache:
     runs-on: ubuntu-latest
     steps:
       - name: Clear Cloudfront Caching

.github/workflows/greetings.yml

@@ -1,23 +0,0 @@
-name: ❤️ Greetings
-
-on:
-  issues:
-    types: [opened]
-  pull_request_target:
-    branches: [master]
-    types: [opened]
-
-jobs:
-  greet:
-    name: Greet New Contributors
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/first-interaction@v1
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          pr-message: |
-            Thank you for your first ever contribution to [roadmap.sh](https://roadmap.sh)! 🎉
-            
-            Please make sure to follow the [contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md) when contributing to this project. Any PRs that don't follow the guidelines will be closed.
-
-            Thanks for choosing to contribute, and for helping make this project better! 🌟

.gitignore

@@ -28,9 +28,6 @@ pnpm-debug.log*
 /playwright-report/
 /playwright/.cache/
 tests-examples
-*.csv
+*.csveditor/
 
-/editor/*
-!/editor/readonly-editor.tsx
-!/editor/renderer/renderer.ts
-!/editor/renderer/index.tsx
+packages/editor

.vscode/settings.json

@@ -2,5 +2,13 @@
   "prettier.documentSelectors": ["**/*.astro"],
   "[astro]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["\\b\\w+[cC]lassName\\s*=\\s*[\"']([^\"']*)[\"']"],
+    ["\\b\\w+[cC]lassName\\s*=\\s*`([^`]*)`"],
+    ["[\\w]+[cC]lassName[\"']?\\s*:\\s*[\"']([^\"']*)[\"']"],
+    ["[\\w]+[cC]lassName[\"']?\\s*:\\s*`([^`]*)`"],
+    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

astro.config.mjs

@@ -1,16 +1,31 @@
 // https://astro.build/config
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
 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',
@@ -40,21 +55,22 @@ export default defineConfig({
       ],
     ],
   },
-  output: 'hybrid',
+  output: 'server',
   adapter: node({
     mode: 'standalone',
   }),
   trailingSlash: 'never',
   integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
     sitemap({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
     }),
     react(),
   ],
+  vite: {
+    plugins: [tailwindcss()],
+    ssr: {
+      noExternal: [/^@roadmapsh\/editor.*$/],
+    },
+  },
 });

contributing.md

@@ -79,6 +79,7 @@ Visit the following resources to learn more:
 - `@course@`
 - `@podcast@`
 - `@video@`
+- `@book@`
 
 It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap. The order of the links based on type is same as above.
 
@@ -125,6 +126,22 @@ It's important to add a valid type, this will help us categorize the content and
 - PR's that don't follow our style guide, have no description, and a default title.
 - Links to your own blog articles.
 
+## Local Development
+
+For local development, you can use the following commands:
+
+```bash
+git clone git@github.com:kamranahmedse/developer-roadmap.git --depth 1
+cd developer-roadmap
+pnpm add @roadmapsh/editor@npm:@roadmapsh/dummy-editor -w
+pnpm install
+```
+Run the development server with:
+
+```bash
+pnpm dev
+```
+
 ***
 
 Have a look at the [License](./license) file.

editor/readonly-editor.tsx

@@ -1,14 +0,0 @@
-export function ReadonlyEditor(props: any) {
-  return (
-    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
-      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
-      <p className="mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-}

editor/renderer/index.tsx

@@ -1,14 +0,0 @@
-export function Renderer(props: any) {
-  return (
-    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
-      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
-      <p className="mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-}

editor/renderer/renderer.ts

@@ -1,5 +0,0 @@
-export function renderFlowJSON(data: any, options?: any) {
-  console.warn("renderFlowJSON is not implemented");
-  console.warn("run the following command to generate the renderer:");
-  console.warn("> npm run generate-renderer");
-}

package.json

@@ -20,87 +20,108 @@
     "editor-roadmap-content": "tsx scripts/editor-roadmap-content.ts",
     "roadmap-content": "node scripts/roadmap-content.cjs",
     "generate-renderer": "sh scripts/generate-renderer.sh",
+    "generate-renderer-dummy": "sh scripts/generate-renderer-dummy.sh",
     "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
     "best-practice-content": "node scripts/best-practice-content.cjs",
     "generate:og": "node ./scripts/generate-og-images.mjs",
     "warm:urls": "sh ./scripts/warm-urls.sh https://roadmap.sh/sitemap-0.xml",
     "compress:images": "tsx ./scripts/compress-images.ts",
     "generate:roadmap-content-json": "tsx ./scripts/editor-roadmap-content-json.ts",
+    "migrate:editor-roadmaps": "tsx ./scripts/migrate-editor-roadmap.ts",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.3.4",
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/sitemap": "^3.2.0",
-    "@astrojs/tailwind": "^5.1.2",
-    "@fingerprintjs/fingerprintjs": "^4.5.0",
+    "@astrojs/node": "^9.2.1",
+    "@astrojs/react": "^4.2.7",
+    "@astrojs/sitemap": "^3.4.0",
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
     "@microsoft/clarity": "^1.0.0",
-    "@nanostores/react": "^0.8.0",
+    "@nanostores/react": "^1.0.0",
     "@napi-rs/image": "^1.9.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
     "@resvg/resvg-js": "^2.6.2",
-    "@tanstack/react-query": "^5.59.16",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "astro": "^4.16.1",
+    "@roadmapsh/editor": "workspace:*",
+    "@tailwindcss/vite": "^4.1.7",
+    "@tanstack/react-query": "^5.76.1",
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/extension-document": "^2.12.0",
+    "@tiptap/extension-paragraph": "^2.12.0",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-text": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/react": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "astro": "^5.7.13",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dom-to-image": "^2.6.0",
     "dracula-prism": "^2.1.16",
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
-    "image-size": "^1.1.1",
-    "jose": "^5.9.4",
+    "image-size": "^2.0.2",
+    "jose": "^6.0.11",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.452.0",
-    "luxon": "^3.5.0",
-    "nanoid": "^5.0.7",
-    "nanostores": "^0.11.3",
-    "node-html-parser": "^6.1.13",
-    "npm-check-updates": "^17.1.3",
-    "playwright": "^1.48.0",
-    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-calendar-heatmap": "^1.9.0",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
-    "react-tooltip": "^5.28.0",
-    "reactflow": "^11.11.4",
+    "lucide-react": "^0.511.0",
+    "luxon": "^3.6.1",
+    "markdown-it-async": "^2.2.0",
+    "nanoid": "^5.1.5",
+    "nanostores": "^1.0.1",
+    "node-html-parser": "^7.0.1",
+    "npm-check-updates": "^18.0.1",
+    "playwright": "^1.52.0",
+    "prismjs": "^1.30.0",
+    "radix-ui": "^1.4.2",
+    "react": "^19.1.0",
+    "react-calendar-heatmap": "^1.10.0",
+    "react-confetti": "^6.4.0",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-resizable-panels": "^3.0.2",
+    "react-textarea-autosize": "^8.5.9",
+    "react-tooltip": "^5.28.1",
     "rehype-external-links": "^3.0.0",
     "remark-parse": "^11.0.0",
-    "roadmap-renderer": "^1.0.6",
-    "sanitize-html": "^2.13.1",
-    "satori": "^0.11.2",
+    "roadmap-renderer": "^1.0.7",
+    "sanitize-html": "^2.17.0",
+    "satori": "^0.13.1",
     "satori-html": "^0.3.2",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.1",
+    "shiki": "^3.4.2",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.5.3",
-    "tailwindcss": "^3.4.13",
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss": "^4.1.7",
+    "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
-    "zustand": "^4.5.5"
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
-    "@ai-sdk/google": "^1.1.19",
-    "@playwright/test": "^1.48.0",
-    "@tailwindcss/typography": "^0.5.15",
+    "@ai-sdk/google": "^1.2.18",
+    "@playwright/test": "^1.52.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
-    "@types/luxon": "^3.4.2",
-    "@types/prismjs": "^1.26.4",
-    "@types/react-calendar-heatmap": "^1.6.7",
+    "@types/luxon": "^3.6.2",
+    "@types/markdown-it": "^14.1.2",
+    "@types/prismjs": "^1.26.5",
+    "@types/react-calendar-heatmap": "^1.9.0",
     "@types/react-slick": "^0.23.13",
-    "@types/sanitize-html": "^2.13.0",
+    "@types/sanitize-html": "^2.16.0",
     "@types/turndown": "^5.0.5",
-    "ai": "^4.1.51",
-    "csv-parser": "^3.0.0",
-    "gh-pages": "^6.2.0",
+    "ai": "^4.3.16",
+    "csv-parser": "^3.2.0",
+    "gh-pages": "^6.3.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "openai": "^4.67.3",
-    "prettier": "^3.3.3",
+    "openai": "^4.100.0",
+    "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tsx": "^4.19.1"
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwind-scrollbar": "^4.0.2",
+    "tsx": "^4.19.4"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - packages/*

public/roadmap-content/ai-data-scientist.json

@@ -2,22 +2,11 @@
   "aStaDENn5PhEa-cFvNzXa": {
     "title": "Mathematics",
     "description": "Mathematics is the foundation of AI and Data Science. It is essential to have a good understanding of mathematics to excel in these fields.",
-    "links": [
-      {
-        "title": "Mathematics for Machine Learning",
-        "url": "https://imp.i384100.net/baqMYv",
-        "type": "article"
-      },
-      {
-        "title": "Algebra and Differential Calculus",
-        "url": "https://imp.i384100.net/LX5M7M",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "4WZL_fzJ3cZdWLLDoWN8D": {
     "title": "Statistics",
-    "description": "Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.\n\nLearn more from the resources given on the roadmap.",
+    "description": "Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.",
     "links": []
   },
   "gWMvD83hVXeTmCuHGIiOL": {
@@ -49,6 +38,11 @@
         "title": "Algebra and Differential Calculus for Data Science",
         "url": "https://imp.i384100.net/LX5M7M",
         "type": "article"
+      },
+      {
+        "title": "Calculus Youtube Course",
+        "url": "https://www.youtube.com/playlist?list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr",
+        "type": "video"
       }
     ]
   },
@@ -106,7 +100,7 @@
       },
       {
         "title": "Step by Step Process for Planning an A/B Test",
-        "url": "https://towardsdatascience.com/step-by-step-for-planning-an-a-b-test-ef3c93143c0b",
+        "url": "https://medium.com/data-science/step-by-step-for-planning-an-a-b-test-ef3c93143c0b",
         "type": "article"
       },
       {
@@ -318,32 +312,16 @@
         "type": "article"
       },
       {
-        "title": "Exploratory Data Analysis with Seaborn",
-        "url": "https://imp.i384100.net/ZQmMgR",
+        "title": "Python for Data Visualization: Matplotlib & Seaborn",
+        "url": "https://imp.i384100.net/55xvzn",
         "type": "article"
       }
     ]
   },
   "kBdt_t2SvVsY3blfubWIz": {
     "title": "Machine Learning",
-    "description": "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to \"learn\" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.\n\nLearn more from the following resources:",
-    "links": [
-      {
-        "title": "Advantages and Disadvantages of AI",
-        "url": "https://medium.com/@laners.org/advantages-and-disadvantages-of-artificial-intelligence-cd6e42819b20",
-        "type": "article"
-      },
-      {
-        "title": "Reinforcement Learning 101",
-        "url": "https://medium.com/towards-data-science/reinforcement-learning-101-e24b50e1d292",
-        "type": "article"
-      },
-      {
-        "title": "Understanding AUC-ROC Curve",
-        "url": "https://medium.com/towards-data-science/understanding-auc-roc-curve-68b2303cc9c5",
-        "type": "article"
-      }
-    ]
+    "description": "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to \"learn\" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.",
+    "links": []
   },
   "FdBih8tlGPPy97YWq463y": {
     "title": "Classic ML (Sup., Unsup.), Advanced ML (Ensembles, NNs)",

public/roadmap-content/ai-engineer.json

@@ -12,6 +12,11 @@
         "title": "AI vs Machine Learning",
         "url": "https://www.youtube.com/watch?v=4RixMPF4xis",
         "type": "video"
+      },
+      {
+        "title": "AI vs Machine Learning vs Deep Learning vs GenAI",
+        "url": "https://youtu.be/qYNweeDHiyU?si=eRJXjtk8Q-RKQ8Ms",
+        "type": "video"
       }
     ]
   },
@@ -30,7 +35,7 @@
         "type": "article"
       },
       {
-        "title": "AI engineers: What they do and how to become one",
+        "title": "AI Engineers: What they do and how to become one",
         "url": "https://www.techtarget.com/whatis/feature/How-to-become-an-artificial-intelligence-engineer",
         "type": "article"
       }
@@ -162,17 +167,17 @@
     "description": "Retrieval-Augmented Generation (RAG) is an AI approach that combines information retrieval with language generation to create more accurate, contextually relevant outputs. It works by first retrieving relevant data from a knowledge base or external source, then using a language model to generate a response based on that information. This method enhances the accuracy of generative models by grounding their outputs in real-world data, making RAG ideal for tasks like question answering, summarization, and chatbots that require reliable, up-to-date information.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is Retrieval Augmented Generation (RAG)?",
+        "title": "What is Retrieval Augmented Generation (RAG)? - Datacamp",
         "url": "https://www.datacamp.com/blog/what-is-retrieval-augmented-generation-rag",
         "type": "article"
       },
       {
-        "title": "What is Retrieval-Augmented Generation? Google",
+        "title": "What is Retrieval-Augmented Generation? - Google",
         "url": "https://cloud.google.com/use-cases/retrieval-augmented-generation",
         "type": "article"
       },
       {
-        "title": "What is Retrieval-Augmented Generation? IBM",
+        "title": "What is Retrieval-Augmented Generation? - IBM",
         "url": "https://www.youtube.com/watch?v=T-D1OfcDW1M",
         "type": "video"
       }
@@ -183,7 +188,7 @@
     "description": "Prompt engineering is the process of crafting effective inputs (prompts) to guide AI models, like GPT, to generate desired outputs. It involves strategically designing prompts to optimize the model’s performance by providing clear instructions, context, and examples. Effective prompt engineering can improve the quality, relevance, and accuracy of responses, making it essential for applications like chatbots, content generation, and automated support. By refining prompts, developers can better control the model’s behavior, reduce ambiguity, and achieve more consistent results, enhancing the overall effectiveness of AI-driven systems.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Visit DedicatedPrompt Engineering Roadmap",
+        "title": "Visit Dedicated Prompt Engineering Roadmap",
         "url": "https://roadmap.sh/prompt-engineering",
         "type": "article"
       },
@@ -204,7 +209,7 @@
         "type": "article"
       },
       {
-        "title": "Ai agents and their types",
+        "title": "AI Agents and Their Types",
         "url": "https://play.ht/blog/ai-agents-use-cases/",
         "type": "article"
       },
@@ -328,7 +333,7 @@
     "links": [
       {
         "title": "Managing Context",
-        "url": "https://platform.openai.com/docs/guides/text-generation/managing-context-for-text-generation",
+        "url": "https://platform.openai.com/docs/guides/conversation-state?api-mode=responses#managing-context-for-text-generation",
         "type": "article"
       },
       {
@@ -359,7 +364,7 @@
     "description": "Anthropic's Claude is an AI language model designed to facilitate safe and scalable AI systems. Named after Claude Shannon, the father of information theory, Claude focuses on responsible AI use, emphasizing safety, alignment with human intentions, and minimizing harmful outputs. Built as a competitor to models like OpenAI's GPT, Claude is designed to handle natural language tasks such as generating text, answering questions, and supporting conversations, with a strong focus on aligning AI behavior with user goals while maintaining transparency and avoiding harmful biases.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Claude Website",
+        "title": "Claude",
         "url": "https://claude.ai",
         "type": "article"
       },
@@ -439,7 +444,7 @@
     "description": "Mistral AI is a company focused on developing open-weight, large language models (LLMs) to provide high-performance AI solutions. Mistral aims to create models that are both efficient and versatile, making them suitable for a wide range of natural language processing tasks, including text generation, translation, and summarization. By releasing open-weight models, Mistral promotes transparency and accessibility, allowing developers to customize and deploy AI solutions more flexibly compared to proprietary models.\n\nLearn more from the resources:",
     "links": [
       {
-        "title": "Minstral AI Website",
+        "title": "Mistral AI",
         "url": "https://mistral.ai/",
         "type": "article"
       },
@@ -455,7 +460,7 @@
     "description": "Cohere is an AI platform that specializes in natural language processing (NLP) by providing large language models designed to help developers build and deploy text-based applications. Cohere’s models are used for tasks such as text classification, language generation, semantic search, and sentiment analysis. Unlike some other providers, Cohere emphasizes simplicity and scalability, offering an easy-to-use API that allows developers to fine-tune models on custom data for specific use cases. Additionally, Cohere provides robust multilingual support and focuses on ensuring that its NLP solutions are both accessible and enterprise-ready, catering to a wide range of industries.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Cohere Website",
+        "title": "Cohere",
         "url": "https://cohere.com/",
         "type": "article"
       },
@@ -482,7 +487,7 @@
     "description": "The OpenAI API provides access to powerful AI models like GPT, Codex, DALL-E, and Whisper, enabling developers to integrate capabilities such as text generation, code assistance, image creation, and speech recognition into their applications via a simple, scalable interface.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Open AI API",
+        "title": "OpenAI API",
         "url": "https://openai.com/api/",
         "type": "article"
       }
@@ -514,7 +519,7 @@
         "type": "article"
       },
       {
-        "title": "How to write AI prompts",
+        "title": "How to Write AI prompts",
         "url": "https://www.descript.com/blog/article/how-to-write-ai-prompts",
         "type": "article"
       },
@@ -626,7 +631,7 @@
         "type": "article"
       },
       {
-        "title": "What is a prompt injection attack?",
+        "title": "What is a Prompt Injection Attack?",
         "url": "https://www.wiz.io/academy/prompt-injection-attack",
         "type": "article"
       }
@@ -706,7 +711,7 @@
     "description": "Sending end-user IDs in your requests can be a useful tool to help OpenAI monitor and detect abuse. This allows OpenAI to provide your team with more actionable feedback in the event that we detect any policy violations in your application.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Sending end-user IDs - OpenAi",
+        "title": "Sending End-user IDs - OpenAI",
         "url": "https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids",
         "type": "article"
       }
@@ -792,7 +797,7 @@
     "description": "Open-source large language models (LLMs) are models whose source code and architecture are publicly available for use, modification, and distribution. They are built using machine learning algorithms that process and generate human-like text, and being open-source, they promote transparency, innovation, and community collaboration in their development and application.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "The best large language models (LLMs) in 2024",
+        "title": "The Best Large Language Models (LLMs) in 2024",
         "url": "https://zapier.com/blog/best-llm/",
         "type": "article"
       },
@@ -813,7 +818,7 @@
         "type": "course"
       },
       {
-        "title": "Hugging Face Website",
+        "title": "Hugging Face",
         "url": "https://huggingface.co",
         "type": "article"
       },
@@ -898,7 +903,7 @@
     "description": "Ollama is a platform that offers large language models (LLMs) designed to run locally on personal devices, enabling AI functionality without relying on cloud services. It focuses on privacy, performance, and ease of use by allowing users to deploy models directly on laptops, desktops, or edge devices, providing fast, offline AI capabilities. With tools like the Ollama SDK, developers can integrate these models into their applications for tasks such as text generation, summarization, and more, benefiting from reduced latency, greater data control, and seamless local processing.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Ollama Website",
+        "title": "Ollama",
         "url": "https://ollama.com/",
         "type": "article"
       },
@@ -906,6 +911,11 @@
         "title": "Ollama: Easily run LLMs locally",
         "url": "https://klu.ai/glossary/ollama",
         "type": "article"
+      },
+      {
+        "title": "What is Ollama? Running Local LLMs Made Simple",
+        "url": "https://www.youtube.com/watch?v=5RIOQuHOihY",
+        "type": "video"
       }
     ]
   },
@@ -983,12 +993,12 @@
     "description": "In the context of embeddings, recommendation systems use vector representations to capture similarities between items, such as products or content. By converting items and user preferences into embeddings, these systems can measure how closely related different items are based on vector proximity, allowing them to recommend similar products or content based on a user's past interactions. This approach improves recommendation accuracy and efficiency by enabling meaningful, scalable comparisons of complex data.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What role does AI play in recommendation systems and engines?",
+        "title": "What Role does AI Play in Recommendation Systems and Engines?",
         "url": "https://www.algolia.com/blog/ai/what-role-does-ai-play-in-recommendation-systems-and-engines/",
         "type": "article"
       },
       {
-        "title": "What is a recommendation engine?",
+        "title": "What is a Recommendation Engine?",
         "url": "https://www.ibm.com/think/topics/recommendation-engine",
         "type": "article"
       }
@@ -1009,6 +1019,11 @@
     "title": "Data Classification",
     "description": "Once data is embedded, a classification algorithm, such as a neural network or a logistic regression model, can be trained on these embeddings to classify the data into different categories. The advantage of using embeddings is that they capture underlying relationships and similarities between data points, even if the raw data is complex or high-dimensional, improving classification accuracy in tasks like text classification, image categorization, and recommendation systems.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "What Is Data Classification?",
+        "url": "https://www.paloaltonetworks.com/cyberpedia/data-classification",
+        "type": "article"
+      },
       {
         "title": "Text Embeddings, Classification, and Semantic Search (w/ Python Code)",
         "url": "https://www.youtube.com/watch?v=sNa_uiqSlJo",
@@ -1050,10 +1065,10 @@
   },
   "4GArjDYipit4SLqKZAWDf": {
     "title": "Pricing Considerations",
-    "description": "The pricing for the OpenAI Embedding API is based on the number of tokens processed and the specific embedding model used. Costs are determined by the total tokens needed to generate embeddings, so longer texts will result in higher charges. To manage costs, developers can optimize by shortening inputs or batching requests. Additionally, selecting the right embedding model for your performance and budget requirements, along with monitoring token usage, can help control expenses.",
+    "description": "The pricing for the OpenAI Embedding API is based on the number of tokens processed and the specific embedding model used. Costs are determined by the total tokens needed to generate embeddings, so longer texts will result in higher charges. To manage costs, developers can optimize by shortening inputs or batching requests. Additionally, selecting the right embedding model for your performance and budget requirements, along with monitoring token usage, can help control expenses.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "OpenAI API Pricing",
+        "title": "OpenAI Pricing",
         "url": "https://openai.com/api/pricing/",
         "type": "article"
       }
@@ -1061,8 +1076,19 @@
   },
   "apVYIV4EyejPft25oAvdI": {
     "title": "Open-Source Embeddings",
-    "description": "Open-source embeddings are pre-trained vector representations of data, usually text, that are freely available for use and modification. These embeddings capture semantic meanings, making them useful for tasks like semantic search, text classification, and clustering. Examples include Word2Vec, GloVe, and FastText, which represent words as vectors based on their context in large corpora, and more advanced models like Sentence-BERT and CLIP that provide embeddings for sentences and images. Open-source embeddings allow developers to leverage pre-trained models without starting from scratch, enabling faster development and experimentation in natural language processing and other AI applications.",
-    "links": []
+    "description": "Open-source embeddings are pre-trained vector representations of data, usually text, that are freely available for use and modification. These embeddings capture semantic meanings, making them useful for tasks like semantic search, text classification, and clustering. Examples include Word2Vec, GloVe, and FastText, which represent words as vectors based on their context in large corpora, and more advanced models like Sentence-BERT and CLIP that provide embeddings for sentences and images. Open-source embeddings allow developers to leverage pre-trained models without starting from scratch, enabling faster development and experimentation in natural language processing and other AI applications.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Embeddings",
+        "url": "https://platform.openai.com/docs/guides/embeddings",
+        "type": "article"
+      },
+      {
+        "title": "A Guide to Open-Source Embedding Models",
+        "url": "https://www.bentoml.com/blog/a-guide-to-open-source-embedding-models",
+        "type": "article"
+      }
+    ]
   },
   "ZV_V6sqOnRodgaw4mzokC": {
     "title": "Sentence Transformers",
@@ -1249,7 +1275,7 @@
     "links": [
       {
         "title": "Supabase Vector",
-        "url": "https://supabase.com/vector",
+        "url": "https://supabase.com/docs/guides/ai",
         "type": "article"
       },
       {
@@ -1288,8 +1314,14 @@
   },
   "ZcbRPtgaptqKqWBgRrEBU": {
     "title": "Performing Similarity Search",
-    "description": "In a similarity search, the process begins by converting the user’s query (such as a piece of text or an image) into an embedding—a vector representation that captures the query’s semantic meaning. This embedding is generated using a pre-trained model, such as BERT for text or a neural network for images. Once the query is converted into a vector, it is compared to the embeddings stored in the vector database.",
-    "links": []
+    "description": "In a similarity search, the process begins by converting the user’s query (such as a piece of text or an image) into an embedding—a vector representation that captures the query’s semantic meaning. This embedding is generated using a pre-trained model, such as BERT for text or a neural network for images. Once the query is converted into a vector, it is compared to the embeddings stored in the vector database.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is Similarity Search & How Does it work?",
+        "url": "https://www.truefoundry.com/blog/similarity-search",
+        "type": "article"
+      }
+    ]
   },
   "lVhWhZGR558O-ljHobxIi": {
     "title": "RAG & Implementation",
@@ -1396,7 +1428,7 @@
         "type": "article"
       },
       {
-        "title": "Retrieval Augmented Generation (RAG) with vector databases: Expanding AI Capabilities",
+        "title": "Retrieval Augmented Generation (RAG) with Vector Databases: Expanding AI Capabilities",
         "url": "https://objectbox.io/retrieval-augmented-generation-rag-with-vector-databases-expanding-ai-capabilities/",
         "type": "article"
       }
@@ -1508,7 +1540,7 @@
     "description": "Replicate is a platform that allows developers to run machine learning models in the cloud without needing to manage infrastructure. It provides a simple API for deploying and scaling models, making it easy to integrate AI capabilities like image generation, text processing, and more into applications. Users can select from a library of pre-trained models or deploy their own, with the platform handling tasks like scaling, monitoring, and versioning.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Replicate Website",
+        "title": "Replicate",
         "url": "https://replicate.com/",
         "type": "article"
       },
@@ -1529,7 +1561,7 @@
         "type": "article"
       },
       {
-        "title": "Ai agents and their types",
+        "title": "AI agents and their types",
         "url": "https://play.ht/blog/ai-agents-use-cases/",
         "type": "article"
       },
@@ -1662,8 +1694,8 @@
     "description": "Multimodal AI enhances image understanding by integrating visual data with other types of information, such as text or audio. By combining these inputs, AI models can interpret images more comprehensively, recognizing objects, scenes, and actions, while also understanding context and related concepts. For example, an AI system could analyze an image and generate descriptive captions, or provide explanations based on both visual content and accompanying text.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Low or high fidelity image understanding - OpenAI",
-        "url": "https://platform.openai.com/docs/guides/vision/low-or-high-fidelity-image-understanding",
+        "title": "Low or High Fidelity Image Understanding - OpenAI",
+        "url": "https://platform.openai.com/docs/guides/images",
         "type": "article"
       }
     ]
@@ -1673,7 +1705,7 @@
     "description": "Image generation is a process in artificial intelligence where models create new images based on input prompts or existing data. It involves using generative models like GANs (Generative Adversarial Networks), VAEs (Variational Autoencoders), or more recently, transformer-based models like DALL-E and Stable Diffusion.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "DALL-E Website",
+        "title": "DALL-E",
         "url": "https://openai.com/index/dall-e-2/",
         "type": "article"
       },
@@ -1827,7 +1859,7 @@
     "description": "LangChain is a framework designed to build applications that integrate multiple AI models, especially those focusing on language understanding, generation, and multimodal capabilities. For multimodal apps, LangChain facilitates seamless interaction between text, image, and even audio models, enabling developers to create complex workflows that can process and analyze different types of data.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "LangChain Website",
+        "title": "LangChain",
         "url": "https://www.langchain.com/",
         "type": "article"
       },
@@ -1865,7 +1897,7 @@
       },
       {
         "title": "Aider - AI Pair Programming in Terminal",
-        "url": "https://github.com/Aider-AI/aider",
+        "url": "https://aider.chat/",
         "type": "article"
       },
       {

public/roadmap-content/android.json

@@ -29,11 +29,6 @@
         "url": "https://kotlinlang.org/docs/home.html",
         "type": "article"
       },
-      {
-        "title": "Learn Kotlin - w3schools",
-        "url": "https://www.w3schools.com/kotlin/",
-        "type": "article"
-      },
       {
         "title": "Learn Kotlin Programming for Beginners - Free Code Camp",
         "url": "https://youtu.be/EExSSotojVI?si=4VPW8ZHa2UMX0HH1",
@@ -107,11 +102,6 @@
         "title": "Kotlin Docs",
         "url": "https://kotlinlang.org/docs/getting-started.html",
         "type": "article"
-      },
-      {
-        "title": "Kotlin Tutorial for Beginners",
-        "url": "https://www.w3schools.com/kotlin/index.php",
-        "type": "article"
       }
     ]
   },
@@ -156,11 +146,6 @@
         "url": "https://docs.gradle.org/current/userguide/getting_started_eng.html",
         "type": "article"
       },
-      {
-        "title": "Get going with Gradle - PDF",
-        "url": "https://assets.gradlehero.com/get-going-with-gradle/get-going-with-gradle-book.pdf",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Gradle",
         "url": "https://app.daily.dev/tags/gradle?ref=roadmapsh",
@@ -496,16 +481,10 @@
       }
     ]
   },
-  "xIvplWfe-uDr9iHjPT1Mx": {
+  "recycleview@xIvplWfe-uDr9iHjPT1Mx.md": {
     "title": "RecycleView",
-    "description": "RecyclerView is the most commonly used and powerful list management tool in Android development. Witch makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.\n\nAs the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. RecyclerView improves performance and your app's responsiveness, and it reduces power consumption.\n\nLearn more from the following resources:",
-    "links": [
-      {
-        "title": "Create Dynamic Lists with RecyclerView",
-        "url": "https://developer.android.com/develop/ui/views/layout/recyclerview",
-        "type": "article"
-      }
-    ]
+    "description": "",
+    "links": []
   },
   "znvZp24L-PcQwkSObtixs": {
     "title": "TextView",

public/roadmap-content/api-design.json

@@ -86,11 +86,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods",
         "type": "article"
       },
-      {
-        "title": "HTTP Request Methods - W3Schools",
-        "url": "https://www.w3schools.com/tags/ref_httpmethods.asp",
-        "type": "article"
-      },
       {
         "title": "What are HTTP Methods? - Postman",
         "url": "https://blog.postman.com/what-are-http-methods/",
@@ -176,8 +171,8 @@
         "type": "article"
       },
       {
-        "title": "Cookies - Mozilla",
-        "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies",
+        "title": "Using HTTP cookies - Mozilla",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies",
         "type": "article"
       }
     ]

public/roadmap-content/aspnet-core.json

@@ -31,17 +31,7 @@
     "links": [
       {
         "title": "C# official website?",
-        "url": "https://learn.microsoft.com/en-us/dotnet/csharp//",
-        "type": "article"
-      },
-      {
-        "title": "The Beginners Guide to C#",
-        "url": "https://www.w3schools.com/CS/index.php",
-        "type": "article"
-      },
-      {
-        "title": "C# Tutorial",
-        "url": "https://www.w3schools.com/cs/index.php",
+        "url": "https://learn.microsoft.com/en-us/dotnet/csharp/",
         "type": "article"
       },
       {
@@ -117,11 +107,6 @@
         "url": "https://dotnettutorials.net/course/csharp-dot-net-tutorials/",
         "type": "article"
       },
-      {
-        "title": "C# tutorials - W3Schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C#",
         "url": "https://app.daily.dev/tags/csharp?ref=roadmapsh",
@@ -231,11 +216,6 @@
     "title": "Data Structures and Algorithms",
     "description": "As the name indicates, a **Data Structure** is a way of organizing the data in the **memory** so it can be used efficiently. Some common data structures are array, linked list, stack, hashtable, queue, tree, heap, and graph.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Data Structures and Algorithms",
-        "url": "https://www.javatpoint.com/data-structure-tutorial",
-        "type": "article"
-      },
       {
         "title": "C# resources",
         "url": "https://dev.to/adavidoaiei/fundamental-data-structures-and-algorithms-in-c-4ocf",
@@ -303,11 +283,6 @@
     "title": "SQL Basics",
     "description": "SQL stands for Structured Query Language. SQL lets you access and manipulate databases SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the International Organization for Standardization (ISO) in 1987.\n\nAlthough SQL is an ANSI/ISO standard, there are different versions of the SQL language.\n\nHowever, to be compliant with the ANSI standard, they all support at least the major commands (such as SELECT, UPDATE, DELETE, INSERT, WHERE) in a similar manner.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Introduction to SQL",
-        "url": "https://www.w3schools.com/sql/sql_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about SQL",
         "url": "https://app.daily.dev/tags/sql?ref=roadmapsh",
@@ -345,11 +320,6 @@
     "title": "Stored Procedures",
     "description": "A stored procedure is a pre-compiled collection of SQL statements that can be executed on a database server. Stored procedures are typically used to perform specific tasks, such as retrieving data from a database, inserting or updating data, or performing complex calculations. They are stored on the database server and can be called or executed from a client application or other stored procedures. Stored procedures can improve database performance by reducing the amount of SQL code needed to be executed and allowing developers to reuse common pieces of code. They can also provide security by allowing database administrators to control which users have access to specific stored procedures.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Stored Procedure Tutorial",
-        "url": "https://www.w3schools.com/sql/sql_stored_procedures.asp",
-        "type": "article"
-      },
       {
         "title": "Stored Procedure in SQL: Benefits And How to Create It",
         "url": "https://www.simplilearn.com/tutorials/sql-tutorial/stored-procedure-in-sql",
@@ -366,11 +336,6 @@
     "title": "Constraints",
     "description": "Database constraints are rules that are used to limit the data that can be stored in a database table. These constraints can be used to ensure the integrity and accuracy of the data in the table, and they can be used to enforce business rules or other requirements. For example, a constraint might be used to ensure that a column only contains positive numbers, or to ensure that a column always has a unique value. Constraints can be specified at the time a table is created, or they can be added to an existing table. Some common types of constraints include primary keys, foreign keys, and NOT NULL constraints.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "SQL Constraints",
-        "url": "https://www.w3schools.com/sql/sql_constraints.asp",
-        "type": "article"
-      },
       {
         "title": "Constraints of SQL",
         "url": "https://www.educative.io/courses/database-design-fundamentals/m7JnY9Xm6Qp",
@@ -483,7 +448,7 @@
     ]
   },
   "qpVxwuyA2oE06MZLtEdP1": {
-    "title": "Razon Pages",
+    "title": "Razor Pages",
     "description": "Razor Pages is a feature of the [ASP.NET](http://ASP.NET) Core framework that allows developers to build web applications using a combination of Razor markup (a markup syntax for defining dynamic HTML) and C# code. Razor Pages is built on top of the [ASP.NET](http://ASP.NET) Core MVC (Model-View-Controller) framework, and provides a simpler, more intuitive way to build web pages and handle user input.\n\nRazor Pages are useful for building simple, self-contained web pages that do not require a complex navigation or layout structure, and are often used for building small to medium-size web applications.\n\nFor more information, visit the following links:",
     "links": [
       {
@@ -573,13 +538,45 @@
   },
   "R7Qk5hsEIl9dspQXdaJAJ": {
     "title": "StyleCop Rules",
-    "description": "",
-    "links": []
+    "description": "StyleCop is a tool used for developers to standardize their code and ensure they all follow the same syntax principles. With StyleCop, one standard can be defined in a `stylecop.json` file and shared across your team so that each member has the same guidelines when formatting your code. Beyond a single project, StyleCop can also be added as an extension, so all of the projects on your IDE follow the same formatting rules, this is especially useful if your organization follows the same rule standards for all projects.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "StyleCop GitHub official page",
+        "url": "https://github.com/StyleCop/StyleCop",
+        "type": "opensource"
+      },
+      {
+        "title": "StyeleCop Analyzers, a more modern version of StyleCop",
+        "url": "https://github.com/DotNetAnalyzers/StyleCopAnalyzers",
+        "type": "opensource"
+      },
+      {
+        "title": "StyleCop: A Detailed Guide to Starting and Using It",
+        "url": "https://blog.submain.com/stylecop-detailed-guide/",
+        "type": "article"
+      },
+      {
+        "title": "The StyleCop setup and Advantages",
+        "url": "https://www.youtube.com/watch?v=dmpOKmz3lPw",
+        "type": "video"
+      }
+    ]
   },
   "ipABerBcM9zCte9pYaIse": {
     "title": "Minimal APIs",
-    "description": "",
-    "links": []
+    "description": "Minimal APIs is a lightweight approach to building HTTP APIs in .NET with minimal ceremony. It is designed for simplicity and performance, making it ideal for microservices, serverless applications, and small web services. Minimal APIs provide a streamlined way to define routes, handle requests, and return responses without requiring controllers or extensive configuration. They leverage top-level statements, reducing boilerplate code while maintaining flexibility and scalability.\n\nMinimal APIs support dependency injection, middleware, model binding, and validation. They also integrate seamlessly with OpenAPI (Swagger) for API documentation. Their simplicity makes them an excellent choice for building fast and efficient web applications with .NET.\n\nTo learn more, visit the following resources:",
+    "links": [
+      {
+        "title": "Minimal APIs in .NET 8: A Simplified Approach to Build Services",
+        "url": "https://medium.com/codenx/minimal-apis-in-net-8-a-simplified-approach-to-build-services-eb50df56819f",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to ASP.NET Core Minimal APIs",
+        "url": "https://blog.jetbrains.com/dotnet/2023/04/25/introduction-to-asp-net-core-minimal-apis/",
+        "type": "article"
+      }
+    ]
   },
   "POQPoN98eqOH2873ZI6Hm": {
     "title": "Object Relational Mapping",
@@ -1104,11 +1101,6 @@
         "url": "https://learn.microsoft.com/en-us/aspnet/web-pages/overview/data/5-working-with-data",
         "type": "article"
       },
-      {
-        "title": "ASP.NET Web Pages - Databases",
-        "url": "https://www.w3schools.com/asp/webpages_database.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Backend Development",
         "url": "https://app.daily.dev/tags/backend?ref=roadmapsh",
@@ -1303,11 +1295,6 @@
         "url": "https://docs.microsoft.com/en-us/sql/sql-server/tutorials-for-sql-server-2016?view=sql-server-ver15",
         "type": "article"
       },
-      {
-        "title": "Getting started with SQL",
-        "url": "https://www.w3schools.com/sql/default.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about SQL",
         "url": "https://app.daily.dev/tags/sql?ref=roadmapsh",
@@ -1610,8 +1597,19 @@
   },
   "w5RnrhsP4p-AdSOLYVAY9": {
     "title": "Gridlify",
-    "description": "",
-    "links": []
+    "description": "Gridify offers a powerful string-based dynamic LINQ query language that is both simple and easy to use. Gridify is a dynamic LINQ library that simplifies the process of converting strings to LINQ queries. Gridify makes it effortless to apply filtering, sorting, and pagination using text-based data. It also has a Javascript/Typescript client to integrate the Gridify with the frontend tables.\n\nFor more information, visit the following links:",
+    "links": [
+      {
+        "title": "Gridify Library",
+        "url": "https://github.com/alirezanet/Gridify",
+        "type": "opensource"
+      },
+      {
+        "title": "Working with Dynamic Filters Using Gridify in .NET",
+        "url": "https://levelup.gitconnected.com/working-with-dynamic-filters-using-gridify-in-net-6bba618dd9f8",
+        "type": "article"
+      }
+    ]
   },
   "YojZ5fpzw-5WgoqqkO6wl": {
     "title": "Odata",
@@ -1825,8 +1823,14 @@
   },
   "oMMBzRrHkUymxAR4oqr75": {
     "title": "Manual Mapping",
-    "description": "",
-    "links": []
+    "description": "Manual object mapping in [ASP.NET](http://ASP.NET) Core means explicitly assigning values from one object to another without using third-party libraries like AutoMapper. This approach gives you full control over how properties are mapped and allows for custom transformations if needed.\n\nFor instance, if an **Employee** entity has properties such as Id, Name, Email, and Department, and we need to convert it into an **EmployeeDTO** without exposing sensitive data like Id, a manual mapping method can selectively map only the necessary fields. However, it comes with trade-offs, such as increased boilerplate code and the need for manual updates whenever the data model changes. In a real-world [ASP.NET](http://ASP.NET) Core application, manual mapping can be implemented using static helper methods or extension methods that take an entity as input and return a DTO, ensuring that the mapping logic remains centralized and reusable across different parts of the application.\n\nTo learn more, visit the following resources:",
+    "links": [
+      {
+        "title": "Manual vs Automapping in ASP.NET?",
+        "url": "https://medium.com/@anderson.buenogod/manual-vs-automated-mapping-in-c-which-approach-is-best-for-your-project-50de1fd73bfa",
+        "type": "article"
+      }
+    ]
   },
   "s57tKy1rajlJbKFDVXLqs": {
     "title": "Task Scheduling",
@@ -2203,8 +2207,14 @@
   },
   "K49M_7gSpfJuZaE6WaHxQ": {
     "title": "AutoFixture",
-    "description": "",
-    "links": []
+    "description": "AutoFixture is an open-source .NET library designed to minimize the 'Arrange' phase of your unit tests by creating object instances automatically with dummy data. It helps reduce boilerplate code and makes tests easier to maintain.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Quick start to AutoFixture",
+        "url": "https://autofixture.github.io/docs/quick-start/",
+        "type": "article"
+      }
+    ]
   },
   "QERTjawqCCCkHfR44Ca0s": {
     "title": "Bogus",
@@ -2312,7 +2322,7 @@
     ]
   },
   "gBuaVZfqJ0-g21sKohQtx": {
-    "title": "Azuer Service Bus",
+    "title": "Azure Service Bus",
     "description": "Azure Service Bus is a scalable and reliable messaging platform that can handle a high volume of messages, it's also easy to use, has a lot of features like subscription, Topics, Dead Letter, and easy to integrate with other Azure services, and it's a managed service which means Microsoft takes care of the infrastructure and scaling. However, it's worth noting that Azure Service Bus is a paid service and the cost will depend on the number of messages and the size of the data that you are sending and receiving.\n\nTo learn more, visit the following links:",
     "links": [
       {
@@ -2666,11 +2676,6 @@
     "title": "Razor",
     "description": "Razor is a markup syntax for embedding server-side code in web pages. It was introduced with [ASP.NET](http://ASP.NET) MVC 3 and later became a part of [ASP.NET](http://ASP.NET) Web Pages. It allows developers to write server-side code using C# or Visual Basic and embed it in HTML markup. Its syntax is designed to be compact and easy to read. It provides a rich set of features for building web applications, such as a component model for building reusable UI, a routing system for navigation, and support for dependency injection, it also allows you to use the same libraries, frameworks, and tools that you're already familiar with from building traditional [ASP.NET](http://ASP.NET) web applications.\n\nTo learn more, visit the following links:",
     "links": [
-      {
-        "title": "Complete Guide to ASP.NET Razor",
-        "url": "https://w3schools.com/asp/razor_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Introduction to ASP.NET Web Programming Using Razor",
         "url": "https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c",

public/roadmap-content/backend.json

@@ -133,11 +133,6 @@
         "url": "https://php.net/",
         "type": "article"
       },
-      {
-        "title": "Learn PHP - W3Schools",
-        "url": "https://www.w3schools.com/php/",
-        "type": "article"
-      },
       {
         "title": "PHP - The Right Way",
         "url": "https://phptherightway.com/",
@@ -236,11 +231,6 @@
         "url": "https://www.java.com/",
         "type": "article"
       },
-      {
-        "title": "W3 Schools Tutorials",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Java",
         "url": "https://app.daily.dev/tags/java?ref=roadmapsh",
@@ -303,11 +293,6 @@
         "url": "https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/",
         "type": "article"
       },
-      {
-        "title": "C# on W3 schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C#",
         "url": "https://app.daily.dev/tags/csharp?ref=roadmapsh",
@@ -389,6 +374,11 @@
         "title": "Git & GitHub Crash Course For Beginners",
         "url": "https://www.youtube.com/watch?v=SWYqp7iY_Tc",
         "type": "video"
+      },
+      {
+        "title": "Learn Git - Full Course",
+        "url": "https://www.youtube.com/watch?v=rH3zE7VlIMs",
+        "type": "video"
       }
     ]
   },
@@ -608,11 +598,6 @@
         "url": "https://www.mysql.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - MySQL Tutorial",
-        "url": "https://www.w3schools.com/mySQl/default.asp",
-        "type": "article"
-      },
       {
         "title": "MySQL for Developers",
         "url": "https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction",
@@ -1084,11 +1069,6 @@
     "title": "SOAP",
     "description": "Simple Object Access Protocol (SOAP) is a message protocol for exchanging information between systems and applications. When it comes to application programming interfaces (APIs), a SOAP API is developed in a more structured and formalized way. SOAP messages can be carried over a variety of lower-level protocols, including the web-related Hypertext Transfer Protocol (HTTP).\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "w3school SOAP explanation",
-        "url": "https://www.w3schools.com/xml/xml_soap.asp",
-        "type": "article"
-      },
       {
         "title": "REST vs SOAP",
         "url": "https://www.youtube.com/watch?v=_fq8Ye8kodA",
@@ -2179,11 +2159,6 @@
         "url": "https://docs.aws.amazon.com/wellarchitected/2022-03-31/framework/rel_mitigate_interaction_failure_throttle_requests.html",
         "type": "article"
       },
-      {
-        "title": "Throttling and Debouncing",
-        "url": "https://dev.to/aneeqakhan/throttling-and-debouncing-explained-1ocb",
-        "type": "article"
-      },
       {
         "title": "Throttling vs Debouncing",
         "url": "https://www.youtube.com/watch?v=tJhA0DrH5co",
@@ -2649,6 +2624,11 @@
         "url": "https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/",
         "type": "article"
       },
+      {
+        "title": "Every thing you need to know about HTTP",
+        "url": "https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/HTTP_Basics.html",
+        "type": "article"
+      },
       {
         "title": "HTTP/1 to HTTP/2 to HTTP/3",
         "url": "https://www.youtube.com/watch?v=a-sBfyiXysI",
@@ -2722,6 +2702,11 @@
     "title": "DNS and how it works?",
     "description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like `www.example.com`) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. It also supports email routing, service discovery, and other network protocols.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Everything You Need to Know About DNS",
+        "url": "https://cs.fyi/guide/everything-you-need-to-know-about-dns",
+        "type": "article"
+      },
       {
         "title": "What is DNS?",
         "url": "https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/",
@@ -2775,23 +2760,8 @@
     "description": "API authentication is the process of verifying the identity of clients attempting to access an API, ensuring that only authorized users or applications can interact with the API's resources. Common methods include API keys, OAuth 2.0, JSON Web Tokens (JWT), basic authentication, and OpenID Connect. These techniques vary in complexity and security level, from simple token-based approaches to more sophisticated protocols that handle both authentication and authorization. API authentication protects sensitive data, prevents unauthorized access, enables usage tracking, and can provide granular control over resource access. The choice of authentication method depends on factors such as security requirements, types of clients, ease of implementation, and scalability needs. Implementing robust API authentication is crucial for maintaining the integrity, security, and controlled usage of web services and applications in modern, interconnected software ecosystems.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "SSO - Single Sign On",
-        "url": "https://roadmap.sh/guides/sso",
-        "type": "article"
-      },
-      {
-        "title": "OAuth - Open Authorization",
-        "url": "https://roadmap.sh/guides/oauth",
-        "type": "article"
-      },
-      {
-        "title": "JWT Authentication",
-        "url": "https://roadmap.sh/guides/jwt-authentication",
-        "type": "article"
-      },
-      {
-        "title": "Token Based Authentication",
-        "url": "https://roadmap.sh/guides/token-authentication",
+        "title": "Basic Authentication",
+        "url": "https://roadmap.sh/guides/basic-authentication",
         "type": "article"
       },
       {
@@ -2800,8 +2770,23 @@
         "type": "article"
       },
       {
-        "title": "Basic Authentication",
-        "url": "https://roadmap.sh/guides/basic-authentication",
+        "title": "Token Based Authentication",
+        "url": "https://roadmap.sh/guides/token-authentication",
+        "type": "article"
+      },
+      {
+        "title": "JWT Authentication",
+        "url": "https://roadmap.sh/guides/jwt-authentication",
+        "type": "article"
+      },
+      {
+        "title": "OAuth - Open Authorization",
+        "url": "https://roadmap.sh/guides/oauth",
+        "type": "article"
+      },
+      {
+        "title": "SSO - Single Sign On",
+        "url": "https://roadmap.sh/guides/sso",
         "type": "article"
       },
       {

public/roadmap-content/blockchain.json

@@ -3,6 +3,11 @@
     "title": "Basic Blockchain Knowledge",
     "description": "A blockchain is a decentralized, distributed, and oftentimes public, digital ledger consisting of records called blocks that is used to record transactions across many computers so that any involved block cannot be altered retroactively, without the alteration of all subsequent blocks.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfirn Updraft | Blockchain Basics",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics",
+        "type": "course"
+      },
       {
         "title": "Introduction to Blockchain",
         "url": "https://chain.link/education-hub/blockchain",
@@ -63,6 +68,16 @@
         "title": "Explore top posts about Blockchain",
         "url": "https://app.daily.dev/tags/blockchain?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Blockchain Architecture Layers: Guide And Topology",
+        "url": "https://www.cyfrin.io/blog/blockchain-architecture-layers-what-is-it",
+        "type": "article"
+      },
+      {
+        "title": "Cyfirn Updraft | How Do Blockchains Work?",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics/basics/how-do-blockchains-work?lesson_format=video",
+        "type": "video"
       }
     ]
   },
@@ -132,6 +147,11 @@
     "title": "What is Blockchain",
     "description": "A blockchain is a decentralized, distributed, and oftentimes public, digital ledger consisting of records called blocks that is used to record transactions across many computers so that any involved block cannot be altered retroactively, without the alteration of all subsequent blocks.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfirn Updraft | Blockchain Basics",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics",
+        "type": "course"
+      },
       {
         "title": "Blockchain Explained",
         "url": "https://www.investopedia.com/terms/b/blockchain.asp",
@@ -190,7 +210,7 @@
       }
     ]
   },
-  "Nc9AH6L7EqeQxh0m6Hddz": {
+  "why-it-matters@Nc9AH6L7EqeQxh0m6Hddz.md": {
     "title": "Why it matters?",
     "description": "",
     "links": []
@@ -199,6 +219,11 @@
     "title": "General Blockchain Knowledge",
     "description": "A blockchain is a decentralized, distributed ledger technology that records transactions across many computers in such a way that the registered transactions cannot be altered retroactively. This technology is the backbone of cryptocurrencies like Bitcoin and Ethereum, but its applications extend far beyond digital currencies.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfirn Updraft | Blockchain Basics",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics",
+        "type": "course"
+      },
       {
         "title": "The Complete Course On Understanding Blockchain Technology",
         "url": "https://www.udemy.com/course/understanding-blockchain-technology/",
@@ -303,6 +328,11 @@
         "url": "https://www.nerdwallet.com/article/investing/cryptocurrency",
         "type": "article"
       },
+      {
+        "title": "Cyfrin Glossary | Cryptocurrency",
+        "url": "https://www.cyfrin.io/glossary/cryptocurrency",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Crypto",
         "url": "https://app.daily.dev/tags/crypto?ref=roadmapsh",
@@ -328,6 +358,11 @@
         "title": "What is a Crypto Wallet? A Beginner’s Guide",
         "url": "https://crypto.com/university/crypto-wallets",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Settin Up a Wallet",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics/basics/setting-up-your-wallet",
+        "type": "video"
       }
     ]
   },
@@ -380,6 +415,11 @@
         "title": "What Is a Consensus Mechanism?",
         "url": "https://www.coindesk.com/learn/what-is-a-consensus-mechanism/",
         "type": "article"
+      },
+      {
+        "title": "Consensus Algorithm",
+        "url": "https://www.cyfrin.io/glossary/consensus-algorithm",
+        "type": "article"
       }
     ]
   },
@@ -828,6 +868,11 @@
         "title": "Explore top posts about Blockchain",
         "url": "https://app.daily.dev/tags/blockchain?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | L1s L2s and Rollups",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics/basics/l1s-l2s-and-rollups",
+        "type": "video"
       }
     ]
   },
@@ -939,6 +984,11 @@
         "title": "What Is Chainlink in 5 Minutes",
         "url": "https://www.gemini.com/cryptopedia/what-is-chainlink-and-how-does-it-work",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Getting real world price data from chainlink",
+        "url": "https://updraft.cyfrin.io/courses/solidity/fund-me/getting-prices-from-chainlink",
+        "type": "video"
       }
     ]
   },
@@ -965,6 +1015,11 @@
         "title": "Explore top posts about Oracle",
         "url": "https://app.daily.dev/tags/oracle?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Intro to oracles",
+        "url": "https://updraft.cyfrin.io/courses/solidity/fund-me/real-world-price-data",
+        "type": "video"
       }
     ]
   },
@@ -972,6 +1027,11 @@
     "title": "Smart Contracts",
     "description": "A smart contract is a computer program or a transaction protocol that is intended to automatically execute, control or document legally relevant events and actions according to the terms of a contract or an agreement.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfirn Updraft | Solidity Smart Contract Development",
+        "url": "https://updraft.cyfrin.io/courses/solidity",
+        "type": "course"
+      },
       {
         "title": "Smart Contracts",
         "url": "https://www.ibm.com/topics/smart-contracts",
@@ -982,6 +1042,11 @@
         "url": "https://chain.link/education/smart-contracts",
         "type": "article"
       },
+      {
+        "title": "Introduction to smart contracts - Ethereum",
+        "url": "https://ethereum.org/en/smart-contracts/",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Smart Contracts",
         "url": "https://app.daily.dev/tags/smart-contracts?ref=roadmapsh",
@@ -998,6 +1063,11 @@
     "title": "Solidity",
     "description": "Solidity is an object-oriented programming language created specifically by Ethereum Network team for constructing smart contracts on various blockchain platforms, most notably, Ethereum. It's used to create smart contracts that implements business logic and generate a chain of transaction records in the blockchain system. It acts as a tool for creating machine-level code and compiling it on the Ethereum Virtual Machine (EVM).\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfirn Updraft | Solidity Smart Contract Development",
+        "url": "https://updraft.cyfrin.io/courses/solidity",
+        "type": "course"
+      },
       {
         "title": "Solidity Programming Language",
         "url": "https://soliditylang.org/",
@@ -1034,6 +1104,11 @@
     "title": "Vyper",
     "description": "Vyper is a contract-oriented, pythonic programming language that targets the Ethereum Virtual Machine (EVM).\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Vyper Smart Contract Development",
+        "url": "https://updraft.cyfrin.io/courses/intro-python-vyper-smart-contract-development",
+        "type": "course"
+      },
       {
         "title": "Vyper Programming Language",
         "url": "https://vyper.readthedocs.io/en/stable/",
@@ -1153,6 +1228,11 @@
         "title": "Explore top posts about CI/CD",
         "url": "https://app.daily.dev/tags/cicd?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Deploying Your First Smart Contract",
+        "url": "https://updraft.cyfrin.io/courses/solidity/simple-storage/deploying-solidity-smart-contract",
+        "type": "video"
       }
     ]
   },
@@ -1195,6 +1275,11 @@
         "title": "Upgrading your Smart Contracts | A Tutorial & Introduction",
         "url": "https://youtu.be/bdXJmWajZRY",
         "type": "video"
+      },
+      {
+        "title": "Cyfrin Updraft | Introduction to Upgradable Smart Contracts",
+        "url": "https://updraft.cyfrin.io/courses/advanced-foundry/upgradeable-smart-contracts/introduction-to-upgradeable-smart-contracts",
+        "type": "video"
       }
     ]
   },
@@ -1221,6 +1306,21 @@
         "title": "ERC-1155 Token Standard (Multi-Token)",
         "url": "https://decrypt.co/resources/what-is-erc-1155-ethereums-flexible-token-standard",
         "type": "article"
+      },
+      {
+        "title": "ERC3675",
+        "url": "https://www.cyfrin.io/glossary/erc-3675",
+        "type": "article"
+      },
+      {
+        "title": "ERC4337",
+        "url": "https://www.cyfrin.io/glossary/erc-4337",
+        "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Introduction To ERC Fundamentals and ERC20",
+        "url": "https://updraft.cyfrin.io/courses/advanced-foundry/How-to-create-an-erc20-crypto-currency/erc-and-erc20-fundamentals",
+        "type": "video"
       }
     ]
   },
@@ -1228,6 +1328,11 @@
     "title": "Crypto Wallets",
     "description": "A cryptocurrency wallet is a device, physical medium, program, or service which stores the public and/or private keys for cryptocurrency transactions. In addition to this basic function of storing the keys, a cryptocurrency wallet more often also offers the functionality of encrypting and/or signing information.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfrin Updraft | Smart Contract DevOps",
+        "url": "https://updraft.cyfrin.io/courses/wallets",
+        "type": "course"
+      },
       {
         "title": "What is a Crypto Wallet?: A Beginner’s Guide",
         "url": "https://crypto.com/university/crypto-wallets",
@@ -1239,8 +1344,8 @@
         "type": "article"
       },
       {
-        "title": "Explore top posts about Crypto",
-        "url": "https://app.daily.dev/tags/crypto?ref=roadmapsh",
+        "title": "Choose your wallet - Ethereum",
+        "url": "https://ethereum.org/en/wallets/find-wallet/",
         "type": "article"
       }
     ]
@@ -1305,6 +1410,11 @@
         "title": "Explore top posts about Decentralized",
         "url": "https://app.daily.dev/tags/decentralized?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Introduction to IPFS",
+        "url": "https://updraft.cyfrin.io/courses/advanced-foundry/how-to-create-an-NFT-collection/what-is-ipfs",
+        "type": "video"
       }
     ]
   },
@@ -1396,6 +1506,16 @@
     "title": "Foundry",
     "description": "Foundry is a smart contract development toolchain. Foundry manages your dependencies, compiles your project, runs tests, deploys, and lets you interact with the chain from the command-line and via Solidity scripts.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfrin Updraft | Foundry Fundamentals",
+        "url": "https://updraft.cyfrin.io/courses/foundry",
+        "type": "course"
+      },
+      {
+        "title": "Cyfrin Updraft | Foundry Advanced",
+        "url": "https://updraft.cyfrin.io/courses/advanced-foundry",
+        "type": "course"
+      },
       {
         "title": "Foundry Overview",
         "url": "https://book.getfoundry.sh/",
@@ -1412,6 +1532,11 @@
     "title": "Security",
     "description": "Smart contracts are extremely flexible, capable of both holding large quantities of tokens (often in excess of $1B) and running immutable logic based on previously deployed smart contract code. While this has created a vibrant and creative ecosystem of trustless, interconnected smart contracts, it is also the perfect ecosystem to attract attackers looking to profit by exploiting vulnerabilities\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfrin Updraft | Smart Contract Security",
+        "url": "https://updraft.cyfrin.io/courses/security",
+        "type": "course"
+      },
       {
         "title": "Smart Contract Security",
         "url": "https://ethereum.org/en/developers/docs/smart-contracts/security/",
@@ -1433,6 +1558,11 @@
     "title": "Practices",
     "description": "Smart contract programming requires a different engineering mindset. The cost of failure can be high, and change can be difficult.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Cyfrin Updraft | Smart Contract Security",
+        "url": "https://updraft.cyfrin.io/courses/security",
+        "type": "course"
+      },
       {
         "title": "Ethereum Smart Contract Security Best Practices",
         "url": "https://consensys.github.io/smart-contract-best-practices/",
@@ -1468,6 +1598,11 @@
         "title": "Smart Contract Fuzzing",
         "url": "https://youtu.be/LRyyNzrqgOc",
         "type": "video"
+      },
+      {
+        "title": "Cyfrin Updraft | Stateful And Stateless Fuzzing",
+        "url": "https://updraft.cyfrin.io/courses/security/tswap/stateful-and-stateless-fuzzing",
+        "type": "video"
       }
     ]
   },
@@ -1521,6 +1656,11 @@
         "title": "Top 10 Tools for Blockchain Development",
         "url": "https://www.blockchain-council.org/blockchain/top-10-tools-for-blockchain-development/",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Security Tools",
+        "url": "https://updraft.cyfrin.io/courses/security/audit/tools",
+        "type": "video"
       }
     ]
   },
@@ -1537,6 +1677,11 @@
         "title": "Slither Framework",
         "url": "https://blog.trailofbits.com/2018/10/19/slither-a-solidity-static-analysis-framework/",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Slither Walkthrough",
+        "url": "https://updraft.cyfrin.io/courses/security/puppy-raffle/slither-walkthrough",
+        "type": "video"
       }
     ]
   },
@@ -1799,6 +1944,21 @@
         "title": "What Is a Dapp? Decentralized Apps Explained",
         "url": "https://www.coindesk.com/learn/what-is-a-dapp-decentralized-apps-explained/",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Glossary | dApp",
+        "url": "https://www.cyfrin.io/glossary/dapp",
+        "type": "article"
+      },
+      {
+        "title": "Explore Top dApps on Ethereum and its Layer 2s",
+        "url": "https://www.ethereum-ecosystem.com/apps",
+        "type": "article"
+      },
+      {
+        "title": "Explore Top Ethereum dApps",
+        "url": "https://eth.blockscout.com/apps",
+        "type": "article"
       }
     ]
   },
@@ -1893,6 +2053,11 @@
         "title": "NFT Explained In 5 Minutes | What Is NFT? - Non Fungible Token",
         "url": "https://youtu.be/NNQLJcJEzv0",
         "type": "video"
+      },
+      {
+        "title": "Cyfrin Updraft | What is an NFT",
+        "url": "https://updraft.cyfrin.io/courses/advanced-foundry/how-to-create-an-NFT-collection/what-is-a-nft",
+        "type": "video"
       }
     ]
   },
@@ -1952,6 +2117,11 @@
         "title": "Alchemy",
         "url": "https://www.alchemy.com/",
         "type": "article"
+      },
+      {
+        "title": "Cyfrin Updraft | Introduction to Alchemy",
+        "url": "https://updraft.cyfrin.io/courses/foundry/foundry-simple-storage/introduction-to-alchemy",
+        "type": "video"
       }
     ]
   },
@@ -2079,11 +2249,6 @@
         "url": "https://www.docs.python.org/3",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -2120,11 +2285,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Golang",
         "url": "https://app.daily.dev/tags/golang?ref=roadmapsh",
@@ -2355,7 +2515,7 @@
         "type": "article"
       },
       {
-        "title": "dApp Security:All You Need to Know",
+        "title": "dApp Security: All You Need to Know",
         "url": "https://www.immunebytes.com/blog/dapp-security/#Benefits_of_DApps_Security",
         "type": "article"
       },
@@ -2572,6 +2732,11 @@
         "url": "https://ethereum.org/en/developers/docs/scaling/zk-rollups",
         "type": "article"
       },
+      {
+        "title": "What are Zero-Knowledge proofs? - Ethereum",
+        "url": "https://ethereum.org/en/zero-knowledge-proofs/",
+        "type": "article"
+      },
       {
         "title": "Why and How zk-SNARK Works",
         "url": "https://medium.com/@imolfar/why-and-how-zk-snark-works-1-introduction-the-medium-of-a-proof-d946e931160",
@@ -2581,6 +2746,11 @@
         "title": "Introduction to zk-SNARKs",
         "url": "https://vitalik.eth.limo/general/2021/01/26/snarks.html",
         "type": "article"
+      },
+      {
+        "title": "What Are zk-SNARKs and zkSTARKs: Full Comparison",
+        "url": "https://www.cyfrin.io/blog/a-full-comparison-what-are-zk-snarks-and-zk-starks",
+        "type": "article"
       }
     ]
   },
@@ -2682,6 +2852,11 @@
         "title": "Explore top posts about Blockchain",
         "url": "https://app.daily.dev/tags/blockchain?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Cyfirn Updraft | The Purpose of Smart Contracts",
+        "url": "https://updraft.cyfrin.io/courses/blockchain-basics/basics/the-purpose-of-smart-contracts",
+        "type": "video"
       }
     ]
   },
@@ -2704,6 +2879,11 @@
         "url": "https://docs.ipfs.tech/concepts/how-ipfs-works/",
         "type": "article"
       },
+      {
+        "title": "Data Locations - Storage, Memory, and Calldata",
+        "url": "https://www.cyfrin.io/glossary/data-locations-storage-memory-and-calldata-solidity-code-example",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Storage",
         "url": "https://app.daily.dev/tags/storage?ref=roadmapsh",

public/roadmap-content/computer-science.json

@@ -4,8 +4,8 @@
     "description": "You need to pick a programming language to learn the Computer Science concepts. My personal recommendation would be to pick C++ or C and the reason for that is:\n\n*   They allow you to deal with pointers and memory allocation/deallocation, so you feel the data structures and algorithms in your bones. In higher level languages like Python or Java, these are hidden from you. In day to day work, that's terrific, but when you're learning how these low-level data structures are built, it's great to feel close to the metal.\n*   You will be able to find a lot of resources for the topics listed in this roadmap using C or C++. You can find a lot of resources for Python and Java, but they are not as abundant as C++ and C.\n\nGiven below is the list of resources; pick ones relevant to the language of your choice.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Learn C++ - W3Schools",
-        "url": "https://www.w3schools.com/cpp/",
+        "title": "Visit Dedicated C++ Roadmap",
+        "url": "https://roadmap.sh/cpp",
         "type": "article"
       },
       {
@@ -13,11 +13,6 @@
         "url": "https://www.tutorialspoint.com/cplusplus/index.htm",
         "type": "article"
       },
-      {
-        "title": "Learn C - W3Schools",
-        "url": "https://www.w3schools.com/c/",
-        "type": "article"
-      },
       {
         "title": "Learn C - Tutorials Point",
         "url": "https://www.tutorialspoint.com/cprogramming/index.htm",
@@ -74,11 +69,6 @@
         "url": "https://pythonprinciples.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial ",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -125,11 +115,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial ",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Making a RESTful JSON API in Go",
         "url": "https://thenewstack.io/make-a-restful-json-api-go/",
@@ -156,11 +141,6 @@
         "url": "https://docs.microsoft.com/en-us/learn/paths/csharp-first-steps/?WT.mc_id=dotnet-35129-website",
         "type": "article"
       },
-      {
-        "title": "C# on W3 schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Introduction to C#",
         "url": "https://docs.microsoft.com/en-us/shows/CSharp-101/?WT.mc_id=Educationalcsharp-c9-scottha",
@@ -219,7 +199,7 @@
     "description": "C++ is a powerful general-purpose programming language. It can be used to develop operating systems, browsers, games, and so on. C++ supports different ways of programming like procedural, object-oriented, functional, and so on. This makes C++ powerful as well as flexible.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "C++ Roadmap",
+        "title": "Visit Dedicated C++ Roadmap",
         "url": "https://roadmap.sh/cpp",
         "type": "article"
       },
@@ -243,11 +223,6 @@
         "url": "https://www.tutorialspoint.com/cplusplus/index.htm",
         "type": "article"
       },
-      {
-        "title": "W3Schools C++",
-        "url": "https://www.w3schools.com/cpp/default.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C++ Programming",
         "url": "https://app.daily.dev/tags/c++?ref=roadmapsh",
@@ -259,11 +234,6 @@
     "title": "C",
     "description": "C is a general-purpose computer programming language. It was created in the 1970s by Dennis Ritchie, and remains very widely used and influential. By design, C's features cleanly reflect the capabilities of the targeted CPUs.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Learn C - W3Schools",
-        "url": "https://www.w3schools.com/c/",
-        "type": "article"
-      },
       {
         "title": "Learn C - Tutorials Point",
         "url": "https://www.tutorialspoint.com/cprogramming/index.htm",
@@ -301,15 +271,10 @@
         "type": "article"
       },
       {
-        "title": "Java Website",
+        "title": "Java",
         "url": "https://www.java.com/",
         "type": "article"
       },
-      {
-        "title": "W3 Schools Tutorials",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Java",
         "url": "https://app.daily.dev/tags/java?ref=roadmapsh",
@@ -336,11 +301,6 @@
         "url": "https://roadmap.sh/datastructures-and-algorithms",
         "type": "article"
       },
-      {
-        "title": "Data Structures and Algorithms",
-        "url": "https://www.javatpoint.com/data-structure-tutorial",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Data Structures",
         "url": "https://app.daily.dev/tags/data-structures?ref=roadmapsh",
@@ -460,6 +420,11 @@
     "title": "Hash Table",
     "description": "Hash Table, Map, HashMap, Dictionary or Associative are all the names of the same data structure. It is one of the most commonly used data structures.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Hash Tables - Princeton University",
+        "url": "https://algs4.cs.princeton.edu/34hash/",
+        "type": "article"
+      },
       {
         "title": "Hash Table | Illustrated Data Structures",
         "url": "https://www.youtube.com/watch?v=jalSiaIi8j4",
@@ -475,26 +440,6 @@
         "url": "https://www.youtube.com/watch?v=0M_kIqhwbFo&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=9",
         "type": "video"
       },
-      {
-        "title": "Table Doubling, Karp-Rabin",
-        "url": "https://www.youtube.com/watch?v=BRO7mVIFt08&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=10",
-        "type": "video"
-      },
-      {
-        "title": "Open Addressing, Cryptographic Hashing",
-        "url": "https://www.youtube.com/watch?v=rvdJDijO2Ro&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=11",
-        "type": "video"
-      },
-      {
-        "title": "PyCon 2010: The Mighty Dictionary",
-        "url": "https://www.youtube.com/watch?v=C4Kc8xzcA68",
-        "type": "video"
-      },
-      {
-        "title": "PyCon 2017: The Dictionary Even Mightier",
-        "url": "https://www.youtube.com/watch?v=66P5FMkWoVU",
-        "type": "video"
-      },
       {
         "title": "(Advanced) Randomization: Universal & Perfect Hashing",
         "url": "https://www.youtube.com/watch?v=z0lJ2k0sl1g&list=PLUl4u3cNGP6317WaSNfmCvGym2ucw3oGp&index=11",
@@ -517,9 +462,9 @@
         "type": "course"
       },
       {
-        "title": "Dynamic Arrays - Coursera",
-        "url": "https://www.coursera.org/lecture/data-structures/dynamic-arrays-EwbnV",
-        "type": "course"
+        "title": "What is Array in Data Structure? Types & Syntax",
+        "url": "https://www.simplilearn.com/tutorials/data-structure-tutorial/arrays-in-data-structure",
+        "type": "article"
       },
       {
         "title": "Array Data Structure | Illustrated Data Structures",
@@ -527,8 +472,8 @@
         "type": "video"
       },
       {
-        "title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
-        "url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
+        "title": "Jagged Arrays",
+        "url": "https://www.youtube.com/watch?v=1jtrQqYpt7g",
         "type": "video"
       },
       {
@@ -542,8 +487,8 @@
         "type": "video"
       },
       {
-        "title": "Jagged Arrays",
-        "url": "https://www.youtube.com/watch?v=1jtrQqYpt7g",
+        "title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
+        "url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
         "type": "video"
       }
     ]
@@ -552,6 +497,11 @@
     "title": "Tree",
     "description": "A tree is non-linear and a hierarchical data structure consisting of a collection of nodes such that each node of the tree stores a value and a list of references to other nodes (the “children”).\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Tree Data Structure",
+        "url": "https://www.programiz.com/dsa/trees",
+        "type": "article"
+      },
       {
         "title": "Tree | Illustrated Data Structures",
         "url": "https://www.youtube.com/watch?v=S2W3SXGPVyU",
@@ -679,8 +629,13 @@
     "description": "An unbalanced binary tree is one that is not balanced.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Balanced Binary Tree",
-        "url": "https://www.programiz.com/dsa/balanced-binary-tree",
+        "title": "Balanced vs Unbalanced Binary Tree",
+        "url": "https://stackoverflow.com/questions/59206128/balanced-vs-unbalanced-binary-tree-clarification-needed",
+        "type": "article"
+      },
+      {
+        "title": "Unbalanced Binary Tree",
+        "url": "https://eng.libretexts.org/Bookshelves/Computer_Science/Databases_and_Data_Structures/Open_Data_Structures_-_An_Introduction_(Morin)/06%3A_Binary_Trees/6.02%3A_BinarySearchTree_-_An_Unbalanced_Binary_Search_Treee",
         "type": "article"
       }
     ]
@@ -820,6 +775,11 @@
         "url": "https://www.coursera.org/lecture/data-structures/introduction-2OpTs",
         "type": "course"
       },
+      {
+        "title": "Heap Data Structure",
+        "url": "https://www.programiz.com/dsa/heap-data-structure",
+        "type": "article"
+      },
       {
         "title": "CS 61B Lecture 24: Priority Queues",
         "url": "https://archive.org/details/ucberkeley_webcast_yIUFT6AKBGE",
@@ -883,7 +843,12 @@
     "description": "The Big O notation can be used to describe how the running time of an algorithm scales with the growth of the input size, ignoring implementation details such as programming language and computer speed. Specifically, it denotes the upper bound of the growth rate of a function that relates the running time of an algorithm to its input size. It can be used to compare algorithms and determine which one is better.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "moviesCS 61B Lecture 19: Asymptotic Analysis",
+        "title": "Big-O Notation: A Simple Explanation with Examples",
+        "url": "https://medium.com/better-programming/big-o-notation-a-simple-explanation-with-examples-a56347d1daca",
+        "type": "article"
+      },
+      {
+        "title": "CS 61B Lecture 19: Asymptotic Analysis",
         "url": "https://archive.org/details/ucberkeley_webcast_VIS4YDpuP98",
         "type": "article"
       },
@@ -987,6 +952,11 @@
     "title": "Linear",
     "description": "Linear algorithms are algorithms that have a runtime that is directly proportional to the size of the input. This means that the runtime of the algorithm will increase linearly with the size of the input. For example, if the input size is 10, the runtime will be 10 times the runtime of the algorithm when the input size is 1. If the input size is 100, the runtime will be 100 times the runtime of the algorithm when the input size is 1.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Linear Search Algorithm",
+        "url": "https://www.geeksforgeeks.org/linear-search/",
+        "type": "article"
+      },
       {
         "title": "Big O Notation — Calculating Time Complexity",
         "url": "https://www.youtube.com/watch?v=Z0bH0cMY0E8",
@@ -1033,8 +1003,19 @@
   },
   "m0umGQNdvg95UiNpQZsQN": {
     "title": "Factorial",
-    "description": "Factorial complexity algorithms have a runtime of `O(n!)`. This is the worst case scenario for an algorithm. Factorial complexity algorithms are very inefficient and should be avoided.\n\n    def generate_permutations(s):\n        # Base case: If the string length is 1, return a list containing the string\n        if len(s) == 1:\n            return [s]\n    \n        # Initialize the result list\n        permutations = []\n    \n        # Recursively generate all permutations\n        for i in range(len(s)):\n            # Current character\n            current_char = s[i]\n            # Remaining characters\n            remaining_chars = s[:i] + s[i+1:]\n            # Generate all permutations of the remaining characters\n            for perm in generate_permutations(remaining_chars):\n                # Add the current character to the front of each generated permutation\n                permutations.append(current_char + perm)\n    \n        return permutations",
-    "links": []
+    "description": "Factorial complexity algorithms have a runtime of `O(n!)`. This is the worst case scenario for an algorithm. Factorial complexity algorithms are very inefficient and should be avoided.\n\n    def generate_permutations(s):\n        # Base case: If the string length is 1, return a list containing the string\n        if len(s) == 1:\n            return [s]\n    \n        # Initialize the result list\n        permutations = []\n    \n        # Recursively generate all permutations\n        for i in range(len(s)):\n            # Current character\n            current_char = s[i]\n            # Remaining characters\n            remaining_chars = s[:i] + s[i + 1 :]\n            # Generate all permutations of the remaining characters\n            for perm in generate_permutations(remaining_chars):\n                # Add the current character to the front of each generated permutation\n                permutations.append(current_char + perm)\n    \n        return permutations\n    \n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Big O Cheat Sheet - Time Complexity Chart",
+        "url": "https://www.freecodecamp.org/news/big-o-cheat-sheet-time-complexity-chart/",
+        "type": "article"
+      },
+      {
+        "title": "Factorial Explained",
+        "url": "https://www.youtube.com/watch?v=pxh__ugRKz8",
+        "type": "video"
+      }
+    ]
   },
   "7a6-AnBI-3tAU1dkOvPkx": {
     "title": "Common Algorithms",
@@ -1042,7 +1023,7 @@
     "links": [
       {
         "title": "Top Algorithms and Data Structures",
-        "url": "https://towardsdatascience.com/top-algorithms-and-data-structures-you-really-need-to-know-ab9a2a91c7b5",
+        "url": "https://medium.com/data-science/top-algorithms-and-data-structures-you-really-need-to-know-ab9a2a91c7b5",
         "type": "article"
       }
     ]
@@ -1208,6 +1189,11 @@
         "url": "https://www.coursera.org/lecture/algorithms-part1/selection-UQxFT",
         "type": "course"
       },
+      {
+        "title": "Selection Sort",
+        "url": "https://en.wikipedia.org/wiki/Selection_sort",
+        "type": "article"
+      },
       {
         "title": "Selection Sort in 3 Minutes",
         "url": "https://www.youtube.com/watch?v=g-PGLbMth_g",
@@ -1220,7 +1206,7 @@
     "description": "Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time by comparisons. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Insertion Sort Algorithm",
+        "title": "Insertion Sort",
         "url": "https://www.programiz.com/dsa/insertion-sort",
         "type": "article"
       },
@@ -1329,6 +1315,11 @@
     "title": "In-Order Traversal",
     "description": "In-order traversal is a tree traversal algorithm that visits the left subtree, the root, and then the right subtree. This is the most common way to traverse a binary search tree. It is also used to create a sorted list of nodes in a binary search tree.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Tree Traversal Techniques",
+        "url": "https://www.geeksforgeeks.org/tree-traversals-inorder-preorder-and-postorder/",
+        "type": "article"
+      },
       {
         "title": "Tree | Illustrated Data Structures",
         "url": "https://www.youtube.com/watch?v=S2W3SXGPVyU",
@@ -1340,6 +1331,11 @@
     "title": "Post Order Traversal",
     "description": "Post-order traversal is a type of tree traversal that visits the left subtree, then the right subtree, and finally the root node. This is the opposite of pre-order traversal, which visits the root node first, then the left subtree, and finally the right subtree.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Postorder Traversal of Binary Tree",
+        "url": "https://www.geeksforgeeks.org/postorder-traversal-of-binary-tree/",
+        "type": "article"
+      },
       {
         "title": "Tree | Illustrated Data Structures",
         "url": "https://www.youtube.com/watch?v=S2W3SXGPVyU",
@@ -1557,7 +1553,7 @@
         "type": "article"
       },
       {
-        "title": "Knights Tour Proble",
+        "title": "Knights Tour Problem",
         "url": "https://www.codesdope.com/course/algorithms-knights-tour-problem/",
         "type": "article"
       },
@@ -1713,6 +1709,11 @@
     "title": "LFU Cache",
     "description": "LFU Cache is a data structure that stores key-value pairs. It has a fixed size and when it is full, it removes the least frequently used key-value pair. It is a variation of the LRU Cache and is used in many applications such as caching web pages, caching database queries, and caching images.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Least Frequently Used (LFU) Cache Implementation",
+        "url": "https://www.geeksforgeeks.org/least-frequently-used-lfu-cache-implementation/",
+        "type": "article"
+      },
       {
         "title": "1117. Data Structure - LFU Cache",
         "url": "https://jojozhuang.github.io/algorithm/data-structure-lfu-cache/",
@@ -1725,7 +1726,7 @@
     "description": "String search and manipulation is a very important topic in computer science. It is used in many different applications, such as searching or replacing a specific pattern, word or character in a string.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "String-searching algorithm",
+        "title": "String-searching Algorithm",
         "url": "https://en.wikipedia.org/wiki/String-searching_algorithm",
         "type": "article"
       }
@@ -1739,6 +1740,11 @@
         "title": "Search Pattern in Text",
         "url": "https://www.coursera.org/learn/data-structures/lecture/tAfHI/search-pattern-in-text",
         "type": "course"
+      },
+      {
+        "title": "Pattern Searching",
+        "url": "https://www.geeksforgeeks.org/pattern-searching/",
+        "type": "article"
       }
     ]
   },
@@ -1752,7 +1758,12 @@
         "type": "course"
       },
       {
-        "title": "Suffix array introduction",
+        "title": "Suffix Arrays - Princeton University",
+        "url": "https://algs4.cs.princeton.edu/63suffix/",
+        "type": "article"
+      },
+      {
+        "title": "Suffix Array Introduction",
         "url": "https://www.youtube.com/watch?v=zqKlL3ZpTqs",
         "type": "video"
       },
@@ -1762,7 +1773,7 @@
         "type": "video"
       },
       {
-        "title": "Suffix arrays: building",
+        "title": "Suffix Arrays: building",
         "url": "https://www.youtube.com/watch?v=ZWlbhBjjwyA",
         "type": "video"
       }
@@ -1778,7 +1789,7 @@
         "type": "course"
       },
       {
-        "title": "A beginner guide to Brute Force Algorithm for substring search",
+        "title": "A Beginner Guide to Brute Force Algorithm for Substring Search",
         "url": "https://nulpointerexception.com/2019/02/10/a-beginner-guide-to-brute-force-algorithm-for-substring-search/",
         "type": "article"
       },
@@ -1798,11 +1809,6 @@
         "url": "https://www.coursera.org/learn/algorithms-part2/lecture/TAtDr/knuth-morris-pratt",
         "type": "course"
       },
-      {
-        "title": "The Knuth-Morris-Pratt (KMP)Algorithm",
-        "url": "https://www.javatpoint.com/daa-knuth-morris-pratt-algorithm",
-        "type": "article"
-      },
       {
         "title": "9.1 Knuth-Morris-Pratt KMP String Matching Algorithm",
         "url": "https://www.youtube.com/watch?v=V5-7GzOfADQ",
@@ -1820,8 +1826,8 @@
         "type": "course"
       },
       {
-        "title": "The Boyer-Moore Algorithm",
-        "url": "https://www.javatpoint.com/daa-boyer-moore-algorithm",
+        "title": "Boyer-Moore String-search Algorithm",
+        "url": "https://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string-search_algorithm",
         "type": "article"
       }
     ]
@@ -1936,7 +1942,7 @@
     "description": "Little Endian is a way of storing data in memory. It is the opposite of Big Endian. In Little Endian, the least significant byte is stored first. In Big Endian, the most significant byte is stored first.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Big Endian vs Little Endian.mp4",
+        "title": "Big Endian vs Little Endian",
         "url": "https://www.youtube.com/watch?v=JrNF0KRAlyo",
         "type": "video"
       },
@@ -1951,6 +1957,11 @@
     "title": "Common UML Diagrams",
     "description": "UML is a standard way of visualizing a software system. It is a general-purpose, developmental, modeling language in the field of software engineering that is intended to provide a standard way to visualize the design of a system.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Unified Modeling Language (UML) Description",
+        "url": "https://www.uml-diagrams.org/",
+        "type": "article"
+      },
       {
         "title": "UML Diagrams Full Course (Unified Modeling Language)",
         "url": "https://www.youtube.com/watch?v=WnMQ8HlmeXc",
@@ -2106,7 +2117,7 @@
         "type": "opensource"
       },
       {
-        "title": "Design Patterns - Wikipedia",
+        "title": "Design Patterns",
         "url": "https://en.wikipedia.org/wiki/Software_design_pattern",
         "type": "article"
       },
@@ -2329,7 +2340,7 @@
     "description": "Combinatorics is the study of counting. It is a branch of mathematics that is used to solve problems in a variety of fields, including computer science, statistics, and physics. In computer science, combinatorics is used to solve problems related to counting the number of possible outcomes of a given problem. For example, if you are given a set of 10 objects, how many different ways can you arrange them? Or, if you are given a set of 10 objects, how many different ways can you choose 3 objects from that set? These are examples of combinatorial problems.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Probability and Combinatorics Topic",
+        "title": "Probability and Combinatorics",
         "url": "https://www.khanacademy.org/math/probability/probability-and-combinatorics-topic",
         "type": "article"
       },
@@ -2383,21 +2394,6 @@
         "title": "Greedy Algs. II & Intro to NP Completeness",
         "url": "https://youtu.be/qcGnJ47Smlo?list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&t=2939",
         "type": "video"
-      },
-      {
-        "title": "NP Completeness II & Reductions",
-        "url": "https://www.youtube.com/watch?v=e0tGC6ZQdQE&index=16&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness III",
-        "url": "https://www.youtube.com/watch?v=fCX1BGT3wjE&index=17&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness IV",
-        "url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
-        "type": "video"
       }
     ]
   },
@@ -2434,21 +2430,6 @@
         "title": "Greedy Algs. II & Intro to NP Completeness",
         "url": "https://youtu.be/qcGnJ47Smlo?list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&t=2939",
         "type": "video"
-      },
-      {
-        "title": "NP Completeness II & Reductions",
-        "url": "https://www.youtube.com/watch?v=e0tGC6ZQdQE&index=16&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness III",
-        "url": "https://www.youtube.com/watch?v=fCX1BGT3wjE&index=17&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness IV",
-        "url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
-        "type": "video"
       }
     ]
   },
@@ -2573,21 +2554,6 @@
         "url": "https://www.youtube.com/watch?v=YX40hbAHx3s",
         "type": "video"
       },
-      {
-        "title": "Complexity: Approximation Algorithms",
-        "url": "https://www.youtube.com/watch?v=MEz1J9wY2iM&list=PLUl4u3cNGP6317WaSNfmCvGym2ucw3oGp&index=24",
-        "type": "video"
-      },
-      {
-        "title": "Complexity: Fixed-Parameter Algorithms",
-        "url": "https://www.youtube.com/watch?v=4q-jmGrmxKs&index=25&list=PLUl4u3cNGP6317WaSNfmCvGym2ucw3oGp",
-        "type": "video"
-      },
-      {
-        "title": "Lecture 23: Computational Complexity",
-        "url": "https://www.youtube.com/watch?v=moPtwq_cVH8&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=24",
-        "type": "video"
-      },
       {
         "title": "Greedy Algs. II & Intro to NP Completeness",
         "url": "https://youtu.be/qcGnJ47Smlo?list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&t=2939",
@@ -2625,6 +2591,11 @@
     "title": "Travelling Salesman Problem",
     "description": "The Travelling Salesman Problem (TSP) is a classic problem in computer science. It is a problem that is NP-complete, which means that it is a problem that is hard to solve. It is also a problem that is used to test the efficiency of algorithms.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Traveling Salesman Problem",
+        "url": "https://en.wikipedia.org/wiki/Travelling_salesman_problem",
+        "type": "article"
+      },
       {
         "title": "What is the Traveling Salesman Problem?",
         "url": "https://www.youtube.com/watch?v=1pmBjIZ20pE",
@@ -2730,7 +2701,7 @@
     "description": "Balanced search trees are a type of data structure that allow for fast insertion, deletion, and lookup of data. They are a type of self-balancing binary search tree, which means that they are a binary tree that maintains the binary search tree property while also keeping the tree balanced. This means that the tree is always approximately balanced, which allows for fast insertion, deletion, and lookup of data.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Self-balancing binary search tree - Wikipedia",
+        "title": "Self-balancing Binary Search Tree - Wikipedia",
         "url": "https://en.wikipedia.org/wiki/Self-balancing_binary_search_tree",
         "type": "article"
       },
@@ -2765,6 +2736,11 @@
         "url": "https://www.coursera.org/learn/data-structures/lecture/22BgE/split-and-merge",
         "type": "course"
       },
+      {
+        "title": "AVL Tree - Programiz",
+        "url": "https://www.programiz.com/dsa/avl-tree",
+        "type": "article"
+      },
       {
         "title": "MIT AVL Trees / AVL Sort",
         "url": "https://www.youtube.com/watch?v=FNeL18KsWPc&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb&index=6",
@@ -2824,26 +2800,10 @@
       }
     ]
   },
-  "IaPd_zuLbiOCwoSHQLoIG": {
+  "2-3-4-trees@IaPd_zuLbiOCwoSHQLoIG.md": {
     "title": "2 3 4 Trees",
-    "description": "In practice: For every 2-4 tree, there are corresponding red–black trees with data elements in the same order. The insertion and deletion operations on 2-4 trees are also equivalent to color-flipping and rotations in red–black trees. This makes 2-4 trees an important tool for understanding the logic behind red–black trees, and this is why many introductory algorithm texts introduce 2-4 trees just before red–black trees, even though 2-4 trees are not often used in practice.\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "CS 61B Lecture 26: Balanced Search Trees",
-        "url": "https://archive.org/details/ucberkeley_webcast_zqrqYXkth6Q",
-        "type": "article"
-      },
-      {
-        "title": "Bottom Up 234-Trees",
-        "url": "https://www.youtube.com/watch?v=DQdMYevEyE4&index=4&list=PLA5Lqm4uh9Bbq-E0ZnqTIa8LRaL77ica6",
-        "type": "video"
-      },
-      {
-        "title": "Top Down 234-Trees",
-        "url": "https://www.youtube.com/watch?v=2679VQ26Fp4&list=PLA5Lqm4uh9Bbq-E0ZnqTIa8LRaL77ica6&index=5",
-        "type": "video"
-      }
-    ]
+    "description": "",
+    "links": []
   },
   "UOYeM-hqIKCrB9hGez4Q_": {
     "title": "K-ary / M-ary Tree",
@@ -2902,7 +2862,7 @@
         "type": "opensource"
       },
       {
-        "title": "System Design: The complete course",
+        "title": "System Design: The Complete Course",
         "url": "https://dev.to/karanpratapsingh/system-design-the-complete-course-10fo",
         "type": "article"
       },
@@ -2922,7 +2882,7 @@
         "type": "video"
       },
       {
-        "title": "System design interview: Scale to 1 million users",
+        "title": "System Design interview: Scale to 1 million users",
         "url": "https://www.youtube.com/watch?v=YkGHxOg9d3M",
         "type": "video"
       }
@@ -2953,6 +2913,11 @@
     "title": "Load Balancing",
     "description": "Load balancing is the process of distributing network or application traffic across a cluster of servers. Load balancing is used to improve responsiveness and reliability of applications, maximize throughput, minimize response time, and avoid overload of any single server.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "What is Load Balancing? | How load balancers work",
+        "url": "https://www.cloudflare.com/learning/performance/what-is-load-balancing/",
+        "type": "article"
+      },
       {
         "title": "Load Balancers 101",
         "url": "https://www.youtube.com/watch?v=galcDRNd5Ow",
@@ -3018,13 +2983,13 @@
     "description": "A proxy server is an intermediary piece of hardware/software sitting between the client and the backend server. It receives requests from clients and relays them to the origin servers. Typically, proxies are used to filter requests, log requests, or sometimes transform requests (by adding/removing headers, encrypting/decrypting, or compression).\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Proxy - System Design",
-        "url": "https://dev.to/karanpratapsingh/system-design-the-complete-course-10fo#proxy",
+        "title": "Proxy Servers",
+        "url": "https://roadmap.sh/guides/proxy-servers",
         "type": "article"
       },
       {
-        "title": "Proxy Servers",
-        "url": "https://roadmap.sh/guides/proxy-servers",
+        "title": "Proxy - System Design",
+        "url": "https://dev.to/karanpratapsingh/system-design-the-complete-course-10fo#proxy",
         "type": "article"
       }
     ]
@@ -3034,7 +2999,7 @@
     "description": "The CAP theorem states that it is impossible for a distributed data store to simultaneously provide more than two out of Consistency, Availability and Partition Tolerance.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "CAP Theorem - Wikipedia",
+        "title": "CAP Theorem",
         "url": "https://en.wikipedia.org/wiki/CAP_theorem",
         "type": "article"
       },
@@ -3071,7 +3036,7 @@
     "description": "Architectural patterns are the fundamental organization of a system, defining how the system is composed and how its components interact. Architectural patterns are identified by their name, like client-server, peer-to-peer, and layered.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "List of software architecture styles and patterns",
+        "title": "List of Software Architecture Styles and Patterns",
         "url": "https://en.wikipedia.org/wiki/List_of_software_architecture_styles_and_patterns",
         "type": "article"
       }
@@ -3112,6 +3077,16 @@
         "url": "https://roadmap.sh/graphql",
         "type": "article"
       },
+      {
+        "title": "GraphQL",
+        "url": "https://graphql.org/",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL Documentation",
+        "url": "https://graphql.org/learn/",
+        "type": "article"
+      },
       {
         "title": "Apollo GraphQL Tutorials",
         "url": "https://www.apollographql.com/tutorials/",
@@ -3365,11 +3340,6 @@
         "title": "DCL",
         "url": "https://en.wikipedia.org/wiki/Data_Control_Language",
         "type": "article"
-      },
-      {
-        "title": "DCL Commands",
-        "url": "https://www.geeksforgeeks.org/sql-ddl-dql-dml-dcl-tcl-commands/",
-        "type": "article"
       }
     ]
   },
@@ -3420,8 +3390,13 @@
     "description": "The rise in popularity of NoSQL databases provided a flexible and fluidity with ease to manipulate data and as a result, a new database model was designed, reflecting these properties. The acronym BASE is slightly more confusing than ACID but however, the words behind it suggest ways in which the BASE model is different and acronym BASE stands for:-\n\n*   **B**asically **A**vailable\n*   **S**oft state\n*   **E**ventual consistency\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "BASE Model vs. ACID Model",
-        "url": "https://www.geeksforgeeks.org/acid-model-vs-base-model-for-database/",
+        "title": "ACID vs. BASE Database Model",
+        "url": "https://phoenixnap.com/kb/acid-vs-base",
+        "type": "article"
+      },
+      {
+        "title": "What Is BASE in Database Engineering?",
+        "url": "https://www.lifewire.com/abandoning-acid-in-favor-of-base-1019674",
         "type": "article"
       }
     ]
@@ -3472,6 +3447,11 @@
     "title": "Indexes",
     "description": "An index is a data structure that you build and assign on top of an existing table that basically looks through your table and tries to analyze and summarize so that it can create shortcuts.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Database Indexes Explained",
+        "url": "https://www.essentialsql.com/what-is-a-database-index/",
+        "type": "article"
+      },
       {
         "title": "Database Indexing Explained",
         "url": "https://www.youtube.com/watch?v=-qNSXK7s7_w",
@@ -3503,6 +3483,11 @@
         "title": "What are Transactions?",
         "url": "https://fauna.com/blog/database-transaction",
         "type": "article"
+      },
+      {
+        "title": "Database Transaction",
+        "url": "https://en.wikipedia.org/wiki/Database_transaction",
+        "type": "article"
       }
     ]
   },
@@ -3608,7 +3593,7 @@
   },
   "pZ5x_zDYGzW9VxYycyXtN": {
     "title": "OSI Model",
-    "description": "The OSI and TCP/IP model is used to help the developer to design their system for interoperability. The OSI model has 7 layers while the TCP/IP model has a more summarized form of the OSI model only consisting 4 layers. This is important if you're are trying to design a system to communicate with other systems.\n\nVisit the following resources to learn more:",
+    "description": "The OSI and TCP/IP model is used to help the developer to design their system for interoperability. The OSI model has 7 layers while the TCP/IP model has a more summarized form of the OSI model only consisting 4 layers. This is important if you're trying to design a system to communicate with other systems.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Cloudflare - What is the OSI model",
@@ -3624,7 +3609,7 @@
   },
   "Fed5y1D95WPpqoVg7kmob": {
     "title": "TCP/IP Model",
-    "description": "The OSI and TCP/IP model is used to help the developer to design their system for interoperability. The OSI model has 7 layers while the TCP/IP model has a more summarized form of the OSI model only consisting 4 layers. This is important if you're are trying to design a system to communicate with other systems.\n\nVisit the following resources to learn more:",
+    "description": "The OSI and TCP/IP model is used to help the developer to design their system for interoperability. The OSI model has 7 layers while the TCP/IP model has a more summarized form of the OSI model only consisting 4 layers. This is important if you're trying to design a system to communicate with other systems.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Cloudflare - What is the OSI model",
@@ -3714,6 +3699,16 @@
     "title": "TLS & HTTPS",
     "description": "TLS (Transport Layer Security) is a cryptographic protocol that provides privacy and data integrity between two communicating applications. It is widely used to secure HTTP, although it can be used with any protocol. TLS is often used in combination with HTTPS, which is HTTP over TLS.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "What is TLS & How Does it Work? - Internet Society",
+        "url": "https://www.internetsociety.org/deploy360/tls/basics/",
+        "type": "article"
+      },
+      {
+        "title": "What is TLS (Transport Layer Security)? - Cloudflare",
+        "url": "https://www.cloudflare.com/learning/ssl/transport-layer-security-tls/",
+        "type": "article"
+      },
       {
         "title": "SSL and HTTPS",
         "url": "https://www.youtube.com/watch?v=S2iBR2ZlZf0",
@@ -3834,6 +3829,11 @@
     "title": "Hashing Algorithms",
     "description": "Hashing algorithms are used to generate a unique value for a given input. This value is called a hash. Hashing algorithms are used to verify the integrity of data, to store passwords, and to generate unique identifiers for data.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Hashing Algorithm Overview:",
+        "url": "https://www.okta.com/identity-101/hashing-algorithms/",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Algorithms",
         "url": "https://app.daily.dev/tags/algorithms?ref=roadmapsh",
@@ -3892,12 +3892,12 @@
     "description": "Computers are everywhere. They are in our phones, our cars, our homes, and even in our pockets. But how do they actually work? How do they take in information, and how do they output information?\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "How CPU executes a program",
+        "title": "How CPU Executes A Program",
         "url": "https://www.youtube.com/watch?v=XM4lGflQFvA",
         "type": "video"
       },
       {
-        "title": "How computers calculate - ALU",
+        "title": "How Computers Calculate - ALU",
         "url": "https://youtu.be/1I5ZMmrOfnA",
         "type": "video"
       },
@@ -3939,7 +3939,12 @@
     "description": "Computers calculate using the binary system, where all data is represented as 0s and 1s. These binary states correspond to the ON/OFF positions of transistors, which are the building blocks of logic gates (AND, OR, NOT). Numbers, characters, and instructions are broken into binary sequences (bits), and grouped into bytes (8 bits). Arithmetic operations like addition are performed through logic gates, which combine binary values. The CPU executes these calculations by following a fetch-decode-execute cycle. Complex calculations, such as handling decimals, use floating-point representation. Programs written in high-level languages are compiled into machine code for the CPU to execute.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "How computers calculate - ALU",
+        "title": "How Does A Computer Calculate Numbers?",
+        "url": "https://www.sciencing.com/computer-calculate-numbers-4705975/",
+        "type": "article"
+      },
+      {
+        "title": "How Computers Calculate - ALU",
         "url": "https://youtu.be/1I5ZMmrOfnA",
         "type": "video"
       }
@@ -3947,8 +3952,13 @@
   },
   "U3379F4AO1KSmGtVmPr27": {
     "title": "Registers and RAM",
-    "description": "**_Registers_** are the smallest data-holding elements built into the processor itself. Registers are the memory locations that are directly accessible by the processor. The registers hold the instruction or operands currently accessed by the CPU.\n\nRegisters are the high-speed accessible storage elements. The processor accesses the registers within one CPU clock cycle. The processor can decode the instructions and perform operations on the register contents at more than one operation per CPU clock cycle.\n\n**_Memory_** is a hardware device that stores computer programs, instructions, and data. The memory that is internal to the processor is primary memory (RAM), and the memory that is external to the processor is secondary (**Hard Drive**). Primary memory or RAM is a volatile memory, meaning the primary memory data exist when the system's power is on, and the data vanishes as the system is switched off. The primary memory contains the data required by the currently executing program in the CPU. If the data required by the processor is not in primary memory, then the data is transferred from secondary storage to primary memory, and then it is fetched by the processor.\n\nVisit the following resources to learn more:",
+    "description": "**_Registers_** are the smallest data-holding elements built into the processor itself. Registers are the memory locations that are directly accessible by the processor. The registers hold the instruction or operands currently accessed by the CPU.\n\nRegisters are the high-speed accessible storage elements. The processor accesses the registers within one CPU clock cycle. The processor can decode the instructions and perform operations on the register contents at more than one operation per CPU clock cycle.\n\n**_Memory_** is a hardware device that stores computer programs, instructions, and data. The memory that is internal to the processor is primary memory (RAM), and the memory that is external to the processor is secondary (**Hard Drive**).\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "RAM vs. Registers - What's the Difference?",
+        "url": "https://thisvsthat.io/ram-vs-registers",
+        "type": "article"
+      },
       {
         "title": "Registers and RAM",
         "url": "https://youtu.be/fpnE6UAfbtU",
@@ -4023,6 +4033,11 @@
     "title": "Process Forking",
     "description": "Process forking is a way to create a new process from an existing process. The new process is a copy of the existing process. The new process is called a child process and the existing process is called a parent process.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Fork System Call in Operating System",
+        "url": "https://www.geeksforgeeks.org/fork-system-call-in-operating-system/",
+        "type": "article"
+      },
       {
         "title": "Understanding fork() system call for new process creation",
         "url": "https://www.youtube.com/watch?v=PwxTbksJ2fo",
@@ -4095,27 +4110,12 @@
   },
   "Ge2nagN86ofa2y-yYR1lv": {
     "title": "Scheduling Algorithms",
-    "description": "CPU Scheduling is the process of selecting a process from the ready queue and allocating the CPU to it. The selection of a process is based on a particular scheduling algorithm. The scheduling algorithm is chosen depending on the type of system and the requirements of the processes.\n\nHere is the list of some of the most commonly used scheduling algorithms:\n\n*   **First Come First Serve (FCFS):** The process that arrives first is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Job First (SJF):** The process with the smallest execution time is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Remaining Time First (SRTF):** The process with the smallest remaining execution time is allocated the CPU first. It is a preemptive algorithm.\n*   **Round Robin (RR):** The process is allocated the CPU for a fixed time slice. The time slice is usually 10 milliseconds. It is a preemptive algorithm.\n*   **Priority Scheduling:** The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Feedback Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. If a process is preempted, it is moved to the next queue. It is a preemptive algorithm.\n*   **Highest Response Ratio Next(HRRN):** CPU is allotted to the next process which has the highest response ratio and not to the process having less burst time. It is a Non-Preemptive algorithm.\n*   **Lottery Scheduling:** The process is allocated the CPU based on a lottery system. It is a preemptive algorithm.\n\nVisit the following resources to learn more",
+    "description": "CPU Scheduling is the process of selecting a process from the ready queue and allocating the CPU to it. The selection of a process is based on a particular scheduling algorithm. The scheduling algorithm is chosen depending on the type of system and the requirements of the processes.\n\nHere is the list of some of the most commonly used scheduling algorithms:\n\n*   **First Come First Serve (FCFS):** The process that arrives first is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Job First (SJF):** The process with the smallest execution time is allocated the CPU first. It is a non-preemptive algorithm.\n*   **Shortest Remaining Time First (SRTF):** The process with the smallest remaining execution time is allocated the CPU first. It is a preemptive algorithm.\n*   **Round Robin (RR):** The process is allocated the CPU for a fixed time slice. The time slice is usually 10 milliseconds. It is a preemptive algorithm.\n*   **Priority Scheduling:** The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. It is a preemptive algorithm.\n*   **Multi-level Feedback Queue Scheduling:** The processes are divided into different queues based on their priority. The process with the highest priority is allocated the CPU first. If a process is preempted, it is moved to the next queue. It is a preemptive algorithm.\n*   **Highest Response Ratio Next(HRRN):** CPU is allotted to the next process which has the highest response ratio and not to the process having less burst time. It is a Non-Preemptive algorithm.\n*   **Lottery Scheduling:** The process is allocated the CPU based on a lottery system. It is a preemptive algorithm.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "CPU Scheduling in Operating Systems - geeksforgeeks",
-        "url": "https://www.geeksforgeeks.org/cpu-scheduling-in-operating-systems/",
+        "title": "CPU Scheduling in Operating System",
+        "url": "https://www.scaler.com/topics/operating-system/cpu-scheduling/",
         "type": "article"
-      },
-      {
-        "title": "Lottery Scheduling for Operating Systems - geeksforgeeks",
-        "url": "https://www.geeksforgeeks.org/lottery-process-scheduling-in-operating-system/",
-        "type": "article"
-      },
-      {
-        "title": "Program for Round Robin Scheduling for the same Arrival time - geeksforgeeks",
-        "url": "https://www.geeksforgeeks.org/program-for-round-robin-scheduling-for-the-same-arrival-time/",
-        "type": "article"
-      },
-      {
-        "title": "Introduction to CPU Scheduling",
-        "url": "https://youtu.be/EWkQl0n0w5M?si=Lb-PxN_t-rDfn4JL",
-        "type": "video"
       }
     ]
   },
@@ -4123,6 +4123,11 @@
     "title": "CPU Interrupts",
     "description": "CPU Interrupts are a way for the CPU to communicate with the rest of the computer. They are a way for the CPU to tell the rest of the computer that it needs to do something. For example, if the CPU is running a program and it needs to read from the keyboard, it will send an interrupt to the keyboard to tell it to send the data to the CPU. The CPU will then wait for the keyboard to send the data and then continue running the program.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "System Interrupts 100% CPU",
+        "url": "https://www.wikihow.com/System-Interrupts-100-Cpu",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Computing",
         "url": "https://app.daily.dev/tags/computing?ref=roadmapsh",
@@ -4172,7 +4177,7 @@
     "description": "Skip lists are a data structure that allows you to perform operations on a sorted list in O(log n) time. Skip lists are a probabilistic data structure, which means that the probability of a certain operation taking a certain amount of time is a certain value. In the case of skip lists, the probability of an operation taking O(log n) time is 1.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Skip Lists - Wikipedia",
+        "title": "Skip Lists",
         "url": "https://en.wikipedia.org/wiki/Skip_list",
         "type": "article"
       },
@@ -4216,21 +4221,6 @@
         "title": "Greedy Algs. II & Intro to NP Completeness",
         "url": "https://youtu.be/qcGnJ47Smlo?list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&t=2939",
         "type": "video"
-      },
-      {
-        "title": "NP Completeness II & Reductions",
-        "url": "https://www.youtube.com/watch?v=e0tGC6ZQdQE&index=16&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness III",
-        "url": "https://www.youtube.com/watch?v=fCX1BGT3wjE&index=17&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm",
-        "type": "video"
-      },
-      {
-        "title": "NP Completeness IV",
-        "url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
-        "type": "video"
       }
     ]
   },

public/roadmap-content/cpp.json

@@ -0,0 +1,813 @@
+{
+  "ofwdZm05AUqCIWmfgGHk8": {
+    "title": "Diamond Inheritance",
+    "description": "Diamond inheritance is a specific scenario in multiple inheritance where a class is derived from two or more classes, which in turn, are derived from a common base class. It creates an ambiguity that arises from duplicating the common base class, which leads to an ambiguous behavior while calling the duplicate members.\n\nTo resolve this ambiguity, you can use virtual inheritance. A virtual base class is a class that is shared by multiple classes using `virtual` keyword in C++. This ensures that only one copy of the base class is inherited in the final derived class, and thus, resolves the diamond inheritance problem.\n\n_Example:_\n\n    #include <iostream>\n    \n    class Base {\n    public:\n        void print() {\n            std::cout << \"Base class\\n\";\n        }\n    };\n    \n    class Derived1 : virtual public Base {\n    public:\n        void derived1Print() {\n            std::cout << \"Derived1 class\\n\";\n        }\n    };\n    \n    class Derived2 : virtual public Base {\n    public:\n        void derived2Print() {\n            std::cout << \"Derived2 class\\n\";\n        }\n    };\n    \n    class Derived3 : public Derived1, public Derived2 {\n    public:\n        void derived3Print() {\n            std::cout << \"Derived3 class\\n\";\n        }\n    };\n    \n    int main() {\n        Derived3 d3;\n        d3.print(); // Now, there is no ambiguity in calling the base class function\n        d3.derived1Print();\n        d3.derived2Print();\n        d3.derived3Print();\n    \n        return 0;\n    }\n    \n\nIn the code above, `Derived1` and `Derived2` are derived from the `Base` class using virtual inheritance. So, when we create an object of `Derived3` and call the `print()` function from the `Base` class, there is no ambiguity, and the code executes without any issues.",
+    "links": []
+  },
+  "ZHjU60uzJTezADRhDTESG": {
+    "title": "Forward Declaration",
+    "description": "Forward declaration is a way of declaring a symbol (class, function, or variable) before defining it in the code. It helps the compiler understand the type, size, and existence of the symbol. This declaration is particularly useful when we have cyclic dependencies or to reduce compilation time by avoiding unnecessary header inclusions in the source file.\n\nClass Forward Declaration\n-------------------------\n\nTo use a class type before it is defined, you can declare the class without defining its members, like this:\n\n    class ClassA; // forward declaration\n    \n\nYou can then use pointers or references to the class in your code before defining the class itself:\n\n    void do_something (ClassA& obj);\n    \n    class ClassB {\n    public:\n        void another_function(ClassA& obj);\n    };\n    \n\nHowever, if you try to make an object of `ClassA` or call its member functions without defining the class, you will get a compilation error.\n\nFunction Forward Declaration\n----------------------------\n\nFunctions must be declared before using them, and a forward declaration can be used to declare a function without defining it:\n\n    int add(int a, int b); // forward declaration\n    \n    int main() {\n        int result = add(2, 3);\n        return 0;\n    }\n    \n    int add(int a, int b) {\n        return a + b;\n    }\n    \n\nEnum and Typedef Forward Declaration\n------------------------------------\n\nFor `enum` and `typedef`, it is not possible to forward declare because they don't have separate declaration and definition stages.\n\nKeep in mind that forward declarations should be used cautiously, as they can make the code more difficult to understand.",
+    "links": []
+  },
+  "NvODRFR0DLINB0RlPSsvt": {
+    "title": "Introduction to Language",
+    "description": "C++ is a general-purpose, high-performance programming language. It was developed by Bjarne Stroustrup at Bell Labs starting in 1979. C++ is an extension of the C programming language, adding features such as classes, objects, and exceptions.\n\nBasics of C++ Programming\n-------------------------\n\nHere are some basic components and concepts in C++ programming:\n\nIncluding Libraries\n-------------------\n\nIn C++, we use the `#include` directive to include libraries or header files into our program. For example, to include the standard input/output library, we write:\n\n    #include <iostream>\n    \n\nMain Function\n-------------\n\nThe entry point of a C++ program is the `main` function. Every C++ program must have a `main` function:\n\n    int main() {\n        // Your code goes here\n        return 0;\n    }\n    \n\nInput/Output\n------------\n\nTo perform input and output operations in C++, we can use the built-in objects `std::cin` for input and `std::cout` for output, available in the `iostream` library. Here's an example of reading an integer and printing its value:\n\n    #include <iostream>\n    \n    int main() {\n        int number;\n        std::cout << \"Enter an integer: \";\n        std::cin >> number;\n        std::cout << \"You entered: \" << number << '\\n';\n        return 0;\n    }\n    \n\nVariables and Data Types\n------------------------\n\nC++ has several basic data types for representing integer, floating-point, and character values:\n\n*   `int`: integer values\n*   `float`: single-precision floating-point values\n*   `double`: double-precision floating-point values\n*   `char`: single characters\n*   `bool`: boolean values\n\nVariables must be declared with a data type before they can be used:\n\n    int x;\n    float y;\n    double z;\n    char c;\n    bool b;\n    \n\nControl Structures\n------------------\n\nC++ provides control structures for conditional execution and iteration, such as `if`, `else`, `while`, `for`, and `switch` statements.\n\n### If-Else Statement\n\n    if (condition) {\n        // Code to execute if the condition is true\n    } else {\n        // Code to execute if the condition is false\n    }\n    \n\n### While Loop\n\n    while (condition) {\n        // Code to execute while the condition is true\n    }\n    \n\n### For Loop\n\n    for (initialization; condition; update) {\n        // Code to execute while the condition is true\n    }\n    \n\n### Switch Statement\n\n    switch (variable) {\n        case value1:\n            // Code to execute if variable == value1\n            break;\n        case value2:\n            // Code to execute if variable == value2\n            break;\n        // More cases...\n        default:\n            // Code to execute if variable does not match any case value\n    }\n    \n\nFunctions\n---------\n\nFunctions are reusable blocks of code that can be called with arguments to perform a specific task. Functions are defined with a return type, a name, a parameter list, and a body.\n\n    ReturnType functionName(ParameterType1 parameter1, ParameterType2 parameter2) {\n        // Function body\n        // ...\n        return returnValue;\n    }\n    \n\nFor example, here's a function that adds two integers and returns the result:\n\n    int add(int a, int b) {\n        return a + b;\n    }\n    \n    int main() {\n        int result = add(3, 4);\n        std::cout << \"3 + 4 = \" << result << '\\n';\n        return 0;\n    }\n    \n\nThis basic introduction to C++ should provide you with a good foundation for further learning. Explore more topics such as classes, objects, inheritance, polymorphism, templates, and the Standard Template Library (STL) to deepen your understanding of C++ and start writing more advanced programs.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "LearnC++",
+        "url": "https://www.learncpp.com/",
+        "type": "article"
+      },
+      {
+        "title": "C++ Full Course by freeCodeCamp",
+        "url": "https://youtu.be/vLnPwxZdW4Y",
+        "type": "video"
+      }
+    ]
+  },
+  "x_28LiDVshqWns_aIBsdx": {
+    "title": "What is C++?",
+    "description": "C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language. It was first introduced in 1985 and provides object-oriented features like classes and inheritance. C++ is widely used in various applications like game development, system programming, embedded systems, and high-performance computing.\n\nC++ is a statically-typed language, meaning that the type of a variable is determined during compilation, and has an extensive library called the C++ Standard Library, which provides a rich set of functions, algorithms, and data structures for various tasks.\n\nC++ builds upon the features of C, and thus, most C programs can be compiled and run with a C++ compiler.\n\nCode Example\n------------\n\nHere's a simple example of a C++ program that demonstrates some essential features of the language:\n\n    #include <iostream>\n    \n    // A simple function to add two numbers\n    int add(int a, int b) {\n        return a + b;\n    }\n    \n    class Calculator {\n    public:\n        // A member function to multiply two numbers\n        int multiply(int a, int b) {\n            return a * b;\n        }\n    };\n    \n    int main() {\n        int x = 5;\n        int y = 3;\n    \n        // Using the standalone function 'add'\n        int sum = add(x, y);\n        std::cout << \"Sum: \" << sum << '\\n';\n    \n        // Using a class and member function\n        Calculator calc;\n        int product = calc.multiply(x, y);\n        std::cout << \"Product: \" << product << '\\n';\n    \n        return 0;\n    }\n    \n\nIn the above program, we define a simple function `add` and a class `Calculator` with a member function `multiply`. The `main` function demonstrates how to use these to perform basic arithmetic.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Learn C++",
+        "url": "https://www.learncpp.com/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about C++",
+        "url": "https://app.daily.dev/tags/c++?ref=roadmapsh",
+        "type": "article"
+      },
+      {
+        "title": "C++ Tutorial for Beginners - Full Course",
+        "url": "https://youtu.be/vLnPwxZdW4Y",
+        "type": "video"
+      }
+    ]
+  },
+  "tl6VCQ5IEGDVyFcgj7jDm": {
+    "title": "Why use C++",
+    "description": "C++ is a popular and widely used programming language for various reasons. Here are some of the reasons why you might choose to utilize C++:\n\nPerformance\n-----------\n\nC++ is designed to provide high performance and efficiency. It offers fine-grained control over system resources, making it easier to optimize your software.\n\nPortability\n-----------\n\nC++ is supported on different computer architectures and operating systems, allowing you to write portable code that runs on various platforms without making major modifications.\n\nObject-Oriented Programming\n---------------------------\n\nC++ supports object-oriented programming (OOP) - a paradigm that allows you to design programs using classes and objects, leading to better code organization and reusability.\n\n    class MyClass {\n        public:\n            void myFunction() {\n                // Code here\n            }\n    };\n    \n    int main() {\n        MyClass obj;\n        obj.myFunction();\n    }\n    \n\nSupport for low-level and high-level programming\n------------------------------------------------\n\nC++ allows you to write both low-level code, like memory manipulation, as well as high-level abstractions, like creating classes and using the Standard Template Library (STL).\n\n    #include <iostream>\n    #include <vector>\n    \n    int main() {\n        // Low-level programming\n        int number = 42;\n        int* ptr_number = &number;\n    \n        // High-level programming\n        std::vector<int> myVector = {1, 2, 3};\n        for (const auto &i: myVector) {\n            std::cout << i << '\\n';\n        }\n    }\n    \n\nExtensive Libraries\n-------------------\n\nC++ offers a vast range of libraries and tools, such as the Standard Template Library (STL), Boost, and Qt, among others, that can aid in the development of your projects and make it more efficient.\n\nCombination with C language\n---------------------------\n\nC++ can be combined with C, offering the capabilities of both languages and allowing you to reuse your existing C code. By incorporating C++ features, you can enhance your code and improve its functionality.\n\nActive Community\n----------------\n\nC++ has been around for a long time and has a large, active community of users who contribute to the growth of the language, express new ideas, and engage in discussions that help develop the language further. This makes finding solutions to any problems you experience much easier.\n\nIn summary, C++ offers a great balance of performance, portability, and feature set, making it a versatile and powerful programming language suitable for many applications. With its extensive libraries, active community, and continuous development, C++ is an excellent choice for any software development project.",
+    "links": []
+  },
+  "2Ag0t3LPryTF8khHLRfy-": {
+    "title": "C vs C++",
+    "description": "C and C++ are two popular programming languages with some similarities, but they also have key differences. C++ is an extension of the C programming language, with added features such as object-oriented programming, classes, and exception handling. Although both languages are used for similar tasks, they have their own syntax and semantics, which makes them distinct from each other.\n\nSyntax and Semantics\n--------------------\n\n### C\n\n*   C is a procedural programming language.\n*   Focuses on functions and structured programming.\n*   Does not support objects or classes.\n*   Memory management is manual, using functions like `malloc` and `free`.\n\n    #include <stdio.h>\n    \n    void printHello() {\n        printf(\"Hello, World!\\n\");\n    }\n    \n    int main() {\n        printHello();\n        return 0;\n    }\n    \n\n### C++\n\n*   C++ is both procedural and object-oriented.\n*   Supports both functions and classes.\n*   Incorporates different programming paradigms.\n*   Memory management can be manual (like C) or rely on constructors/destructors and smart pointers.\n\n    #include <iostream>\n    \n    class HelloWorld {\n    public:\n        void printHello() {\n            std::cout << \"Hello, World!\\n\";\n        }\n    };\n    \n    int main() {\n        HelloWorld obj;\n        obj.printHello();\n        return 0;\n    }\n    \n\nCode Reusability and Modularity\n-------------------------------\n\n### C\n\n*   Code reusability is achieved through functions and modular programming.\n*   High cohesion and low coupling are achieved via structured design.\n*   Function libraries can be created and included through headers.\n\n### C++\n\n*   Offers better code reusability with classes, inheritance, and polymorphism.\n*   Code modularity is enhanced through namespaces and well-designed object-oriented hierarchy.\n\nError Handling\n--------------\n\n### C\n\n*   Error handling in C is done primarily through return codes.\n*   Lacks support for exceptions or any built-in error handling mechanism.\n\n### C++\n\n*   Offers exception handling, which can be used to handle errors that may occur during program execution.\n*   Enables catching and handling exceptions with `try`, `catch`, and `throw` keywords, providing more control over error handling.\n\nConclusion\n----------\n\nBoth C and C++ are powerful languages with unique features and capabilities. While C is simpler and focuses on procedural programming, C++ offers the versatility of using different programming paradigms and improved code organization. Understanding the differences between these two languages can help you decide which one is more suitable for your specific needs and programming style.",
+    "links": []
+  },
+  "Zc_TTzmM36yWsu3GvOy9x": {
+    "title": "Setting up your Environment",
+    "description": "Setting up C++ requires a few steps, including installing a compiler, configuring an Integrated Development Environment (IDE), and creating a new C++ project.\n\n1\\. Installing a Compiler\n-------------------------\n\nA compiler is required to convert C++ code into machine language. Some popular C++ compilers include:\n\n*   GCC (GNU Compiler Collection) for Linux and macOS, but can also be used on Windows through MinGW\n*   MSVC (Microsoft Visual C++) for Windows\n\nTo install a compiler, simply follow the instructions provided by the respective websites.\n\n2\\. Configuring an IDE\n----------------------\n\nAn IDE is a software application that provides facilities for programming, such as code editing, debugging, and building. Some popular C++ IDEs include:\n\n*   [@article@Visual Studio](https://visualstudio.microsoft.com/vs/features/cplusplus/) (Windows, macOS)\n*   [@article@Eclipse](https://eclipse.org) (Windows, macOS, Linux)\n*   [@article@Code::Blocks](http://www.codeblocks.org) (Windows, macOS, Linux)\n\nAfter downloading and installing an IDE, you might need to configure it to use the installed compiler. Check the documentation of the respective IDE for instructions on how to do this.\n\n3\\. Creating a New C++ Project\n------------------------------\n\nOnce you have your IDE and compiler set up, you can create a new C++ project and start writing code. In general, follow these steps to create a new C++ project:\n\n*   Open the IDE and create a new project.\n*   Select the project type (C++ Application or Console Application).\n*   Specify the project name and location.\n*   Let the IDE generate the main.cpp and build files (such as Makefile or CMakeLists.txt) for you.\n\nExample: Hello World in C++\n---------------------------\n\nCreate a new file called `main.cpp` within your project and include this code:\n\n    #include <iostream>\n    \n    int main() {\n        std::cout << \"Hello, World!\\n\";\n        return 0;\n    }\n    \n\nThen, follow the IDE's instructions to build and run your program. You should see \"Hello, World!\" displayed in the console.\n\nSummary\n-------\n\nSetting up C++ involves:\n\n*   Installing a compiler (e.g. GCC, MinGW, or MSVC)\n*   Configuring an IDE (e.g. Visual Studio, Eclipse, or Code::Blocks)\n*   Creating a new C++ project and writing code\n\nBy following these steps, you'll be ready to start developing C++ applications!",
+    "links": []
+  },
+  "0J_ltQEJh2g28OE2ZEYJj": {
+    "title": "Installing C++",
+    "description": "Before you can start programming in C++, you will need to have a compiler installed on your system. A compiler is a program that converts the C++ code you write into an executable file that your computer can run. There are several popular C++ compilers to choose from, depending on your operating system and preference.\n\n### Windows\n\nFor Windows, one popular option is to install the [Microsoft Visual Studio IDE](https://visualstudio.microsoft.com/vs/), which includes the Microsoft Visual C++ compiler (MSVC).\n\nAlternatively, you can also install the [MinGW-w64](https://mingw-w64.org/) compiler system, which is a Windows port of the GNU Compiler Collection (GCC). To install MinGW-w64, follow these steps:\n\n*   Download the installer from [here](https://sourceforge.net/projects/mingw-w64/files/).\n*   Run the installer and select your desired architecture, version, and install location.\n*   Add the `bin` folder inside the installation directory to your system's `PATH` environment variable.\n\n### macOS\n\nFor macOS, you can install the Apple LLVM `clang` compiler which is part of the Xcode Command Line Tools. To do this, open a terminal and enter:\n\n    xcode-select --install\n    \n\nThis will prompt a dialog to install the Command Line Tools, which includes the `clang` compiler.\n\n### Linux\n\nOn Linux, you can install the GNU Compiler Collection (GCC) through your distribution's package manager. Here are some examples for popular Linux distributions:\n\n*   Ubuntu, Debian, and derivatives:\n\n    sudo apt-get install g++ build-essential\n    \n\n*   Fedora, CentOS, RHEL, and derivatives:\n\n    sudo dnf install gcc-c++ make\n    \n\n*   Arch Linux and derivatives:\n\n    sudo pacman -S gcc make\n    \n\n### Checking the Installation\n\nTo confirm that the compiler is installed and available on your system, open a terminal/command prompt, and enter the following command:\n\n    g++ --version\n    \n\nYou should see output displaying the version of your installed C++ compiler.\n\nNow you're ready to start writing and compiling your C++ code!",
+    "links": []
+  },
+  "ew0AfyadpXPRO0ZY3Z19k": {
+    "title": "Code Editors / IDEs",
+    "description": "Code editors and IDEs are programs specifically designed for editing, managing and writing source code. They offer a wide range of features that make the development process easier and faster. Here's a brief introduction to some of the most popular code editors and IDEs for C++:\n\n*   **Visual Studio**: Visual Studio is an Integrated Development Environment (IDE) for Windows, developed by Microsoft. It includes its own integrated compiler known as Microsoft Visual C++ (MSVC).\n    \n*   **Visual Studio Code (VSCode)**: Visual Studio Code is a popular, free, open-source, and lightweight code editor developed by Microsoft. It offers an extensive library of extensions that enhance functionality for C++ development.\n    \n*   **Sublime Text**: Sublime Text is a cross-platform text editor that is quite popular among developers due to its speed and minimalist design. It supports C++ with the help of plugins and has a variety of themes and packages available for customization.\n    \n*   **CLion**: CLion is an Integrated Development Environment (IDE) developed by JetBrains specifically for C and C++ developers. It provides advanced features like code completion, refactoring support, debugging, and more. It's worth noting that CLion is a commercial IDE, but there is community version available.\n    \n\nThese are just a few examples, and there are many other code editors available, including Atom, Notepad++, and Geany. They all have their features and may suit different developers' needs. Finding the right code editor is often a matter of personal preference and workflow.\n\nTo work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided in the editor's documentation to set up C++ correctly.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Using C++ on Linux in VSCode",
+        "url": "https://code.visualstudio.com/docs/cpp/config-linux",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about General Programming",
+        "url": "https://app.daily.dev/tags/general-programming?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "SEq0D2Zg5WTsIDtd1hW9f": {
+    "title": "Running your First Program",
+    "description": "In this section, we'll discuss the basic structure of a C++ program, walk you through your first program (the \"Hello, World!\" example), and provide additional explanations of its syntax.\n\nHello, World!\n-------------\n\nThe first program that most people learn to write in any programming language is often a simple one that displays the message \"Hello, World!\" on the screen. Here's the classic \"Hello, World!\" program in C++:\n\n    #include <iostream>\n    \n    int main() {\n      std::cout << \"Hello, World!\\n\";\n      return 0;\n    }\n    \n\nLet's break down the different components of this program:\n\nHeader Files & Preprocessor Directives\n--------------------------------------\n\nThe first line of the program `#include <iostream>` is a [preprocessor directive](https://en.cppreference.com/w/cpp/preprocessor) that tells the compiler to include the header file `iostream`. Header files provide function and class declarations that we can use in our C++ programs.\n\n    #include <iostream>\n    \n\n`main()` Function\n-----------------\n\nIn C++, the `main()` function serves as the entry point of your program. The operating system runs your program by calling this `main()` function. It should be defined only once in your program and must return an integer. The keyword `int` is the return type of this function which is an integer. Unlike C in C++ it is mandatory to have `int` as the return type for the `main` function.\n\n    int main() {\n      // Your code goes here.\n    }\n    \n\nOutput to the Console\n---------------------\n\nTo output text to the console, we use the `std::cout` object and the insertion operator `<<`. In the \"Hello, World!\" example, we used the following line to print \"Hello, World!\" to the console:\n\n    std::cout << \"Hello, World!\\n\";\n    \n\n*   `std`: This is the namespace where C++ standard library entities (classes and functions) reside. It stands for \"standard\"\n*   `std::cout`: The standard \"character output\" stream that writes to the console\n*   `\"Hello, World!\"`: The string literal to print\n*   `'\\n'`: The \"end line\" manipulator that inserts a newline character and flushes the output buffer\n\nReturn Statement\n----------------\n\nLastly, the `return 0;` statement informs the operating system that the program executed successfully. Returning any other integer value indicates that an error occurred:\n\n    return 0;\n    \n\nNow that you understand the basic components of a C++ program, you can write your first program, compile it, and run it to see the \"Hello, World!\" message displayed on the screen.",
+    "links": []
+  },
+  "kl2JI_Wl47c5r8SYzxvCq": {
+    "title": "Basic Operations",
+    "description": "Basic operations in C++ refer to the fundamental arithmetic, relational, and logical operations that can be performed using C++ programming language, which are essential for any kind of program or calculation in a real-world scenario.\n\nHere's a summary of the basic operations in C++\n\nArithmetic Operations\n---------------------\n\nThese operations are used for performing calculations in C++ and include the following:\n\n*   **Addition (+)**: Adds two numbers.\n\n    int a = 5;\n    int b = 6;\n    int sum = a + b; // sum is 11\n    \n\n*   **Subtraction (-)**: Subtracts one number from the other.\n\n    int a = 10;\n    int b = 6;\n    int diff = a - b; // diff is 4\n    \n\n*   **Multiplication (\\*)**: Multiplies two numbers.\n\n    int a = 3;\n    int b = 4;\n    int product = a * b; // product is 12\n    \n\n*   **Division (/)**: Divides one number by another, yields quotient.\n\n    int a = 12;\n    int b = 4;\n    int quotient = a / b; // quotient is 3\n    \n\n*   **Modulus (%)**: Divides one number by another, yields remainder.\n\n    int a = 15;\n    int b = 4;\n    int remainder = a % b; // remainder is 3\n    \n\nRelational Operators\n--------------------\n\nThese operations compare two values and return a boolean value (true/false) depending on the comparison. The relational operations are:\n\n*   **Equal to (==)**: Returns true if both operands are equal.\n\n    5 == 5 // true\n    3 == 4 // false\n    \n\n*   **Not equal to (!=)**: Returns true if operands are not equal.\n\n    5 != 2 // true\n    1 != 1 // false\n    \n\n*   **Greater than (>)**: Returns true if the first operand is greater than the second.\n\n    5 > 3 // true\n    2 > 3 // false\n    \n\n*   **Less than (<)**: Returns true if the first operand is less than the second.\n\n    3 < 5 // true\n    6 < 5 // false\n    \n\n*   **Greater than or equal to (>=)**: Returns true if the first operand is greater than or equal to the second.\n\n    5 >= 5 // true\n    6 >= 2 // true\n    3 >= 4 // false\n    \n\n*   **Less than or equal to (<=)**: Returns true if the first operand is less than or equal to the second.\n\n    4 <= 4 // true\n    2 <= 3 // true\n    5 <= 4 // false\n    \n\nLogical Operators\n-----------------\n\nLogical operators are used for combining multiple conditions or boolean values.\n\n*   **AND (&&)**: Returns true if both operands are true.\n\n    true && true // true\n    true && false // false\n    \n\n*   **OR (||)**: Returns true if any one of the operands is true.\n\n    true || false // true\n    false || false // false\n    \n\n*   **NOT (!)**: Returns true if the operand is false and vice versa.\n\n    !true // false\n    !false // true",
+    "links": []
+  },
+  "8aOSpZLWwZv_BEYiurhyR": {
+    "title": "Arithmetic Operators",
+    "description": "Arithmetic operators are used to perform mathematical operations with basic variables such as integers and floating-point numbers. Here is a brief summary of the different arithmetic operators in C++:\n\n1\\. Addition Operator (`+`)\n---------------------------\n\nIt adds two numbers together.\n\n    int sum = a + b;\n    \n\n2\\. Subtraction Operator (`-`)\n------------------------------\n\nIt subtracts one number from another.\n\n    int difference = a - b;\n    \n\n3\\. Multiplication Operator (`*`)\n---------------------------------\n\nIt multiplies two numbers together.\n\n    int product = a * b;\n    \n\n4\\. Division Operator (`/`)\n---------------------------\n\nIt divides one number by another. Note that if both operands are integers, it will perform integer division and the result will be an integer.\n\n    int quotient = a / b; // integer division\n    float quotient = float(a) / float(b); // floating-point division\n    \n\n5\\. Modulus Operator (`%`)\n--------------------------\n\nIt calculates the remainder of an integer division.\n\n    int remainder = a % b;\n    \n\n6\\. Increment Operator (`++`)\n-----------------------------\n\nIt increments the value of a variable by 1. There are two ways to use this operator: prefix (`++x`) and postfix (`x++`). Prefix increments the value before returning it, whereas postfix returns the value first and then increments it.\n\n    int x = 5;\n    int y = ++x; // x = 6, y = 6\n    int z = x++; // x = 7, z = 6\n    \n\n7\\. Decrement Operator (`--`)\n-----------------------------\n\nIt decrements the value of a variable by 1. It can also be used in prefix (`--x`) and postfix (`x--`) forms.\n\n    int x = 5;\n    int y = --x; // x = 4, y = 4\n    int z = x--; // x = 3, z = 4\n    \n\nThese are the basic arithmetic operators in C++ that allow you to perform mathematical operations on your variables. Use them in combination with other control structures, such as loops and conditionals, to build more complex programs.",
+    "links": []
+  },
+  "Y9gq8WkDA_XGe68JkY2UZ": {
+    "title": "Logical Operators",
+    "description": "Logical operators are used to perform logical operations on the given expressions, mostly to test the relationship between different variables or values. They return a boolean value i.e., either true (1) or false (0) based on the result of the evaluation.\n\nC++ provides the following logical operators:\n\n*   **AND Operator (&&)** The AND operator checks if both the operands/conditions are true, then the expression is true. If any one of the conditions is false, the whole expression will be false.\n    \n        (expression1 && expression2)\n        \n    \n    Example:\n    \n        int a = 5, b = 10;\n        if (a > 0 && b > 0) {\n            std::cout << \"Both values are positive.\\n\";\n        }\n        \n    \n*   **OR Operator (||)** The OR operator checks if either of the operands/conditions are true, then the expression is true. If both the conditions are false, it will be false.\n    \n        (expression1 || expression2)\n        \n    \n    Example:\n    \n        int a = 5, b = -10;\n        if (a > 0 || b > 0) {\n            std::cout << \"At least one value is positive.\\n\";\n        }\n        \n    \n*   **NOT Operator (!)** The NOT operator reverses the result of the condition/expression it is applied on. If the condition is true, the NOT operator will make it false and vice versa.\n    \n        !(expression)\n        \n    \n    Example:\n    \n        int a = 5;\n        if (!(a < 0)) {\n            std::cout << \"The value is not negative.\\n\";\n        }\n        \n    \n\nUsing these operators, you can create more complex logical expressions, for example:\n\n    int a = 5, b = -10, c = 15;\n    \n    if (a > 0 && (b > 0 || c > 0)) {\n        std::cout << \"At least two values are positive.\\n\";\n    }\n    \n\nThis covers the essential information about logical operators in C++.",
+    "links": []
+  },
+  "zE4iPSq2KsrDSByQ0sGK_": {
+    "title": "Bitwise Operators",
+    "description": "Bitwise operations are operations that directly manipulate the bits of a number. Bitwise operations are useful for various purposes, such as optimizing algorithms, performing certain calculations, and manipulating memory in lower-level programming languages like C and C++.\n\nHere is a quick summary of common bitwise operations in C++:\n\nBitwise AND (`&`)\n-----------------\n\nThe bitwise AND operation (`&`) is a binary operation that takes two numbers, compares them bit by bit, and returns a new number where each bit is set (1) if the corresponding bits in both input numbers are set (1); otherwise, the bit is unset (0).\n\nExample:\n\n    int result = 5 & 3; // result will be 1 (0000 0101 & 0000 0011 = 0000 0001)\n    \n\nBitwise OR (`|`)\n----------------\n\nThe bitwise OR operation (`|`) is a binary operation that takes two numbers, compares them bit by bit, and returns a new number where each bit is set (1) if at least one of the corresponding bits in either input number is set (1); otherwise, the bit is unset (0).\n\nExample:\n\n    int result = 5 | 3; // result will be 7 (0000 0101 | 0000 0011 = 0000 0111)\n    \n\nBitwise XOR (`^`)\n-----------------\n\nThe bitwise XOR (exclusive OR) operation (`^`) is a binary operation that takes two numbers, compares them bit by bit, and returns a new number where each bit is set (1) if the corresponding bits in the input numbers are different; otherwise, the bit is unset (0).\n\nExample:\n\n    int result = 5 ^ 3; // result will be 6 (0000 0101 ^ 0000 0011 = 0000 0110)\n    \n\nBitwise NOT (`~`)\n-----------------\n\nThe bitwise NOT operation (`~`) is a unary operation that takes a single number, and returns a new number where each bit is inverted (1 becomes 0, and 0 becomes 1).\n\nExample:\n\n    int result = ~5; // result will be -6 (1111 1010)\n    \n\nBitwise Left Shift (`<<`)\n-------------------------\n\nThe bitwise left shift operation (`<<`) is a binary operation that takes two numbers, a value and a shift amount, and returns a new number by shifting the bits of the value to the left by the specified shift amount. The vacated bits are filled with zeros.\n\nExample:\n\n    int result = 5 << 1; // result will be 10 (0000 0101 << 1 = 0000 1010)\n    \n\nBitwise Right Shift (`>>`)\n--------------------------\n\nThe bitwise right shift operation (`>>`) is a binary operation that takes two numbers, a value and a shift amount, and returns a new number by shifting the bits of the value to the right by the specified shift amount. The vacated bits are filled with zeros or sign bit depending on the input value being signed or unsigned.\n\nExample:\n\n    int result = 5 >> 1; // result will be 2 (0000 0101 >> 1 = 0000 0010)\n    \n\nThese were the most common bitwise operations in C++. Remember to use them carefully and understand their behavior when applied to specific data types and scenarios.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Intro to Binary and Bitwise Operators in C++",
+        "url": "https://youtu.be/KXwRt7og0gI",
+        "type": "video"
+      },
+      {
+        "title": "Bitwise AND (&), OR (|), XOR (^) and NOT (~) in C++",
+        "url": "https://youtu.be/HoQhw6_1NAA",
+        "type": "video"
+      }
+    ]
+  },
+  "s5Gs4yF9TPh-psYmtPzks": {
+    "title": "Control Flow & Statements",
+    "description": "",
+    "links": []
+  },
+  "_IP_e1K9LhNHilYTDh7L5": {
+    "title": "for / while / do while loops",
+    "description": "Loops are an essential concept in programming that allow you to execute a block of code repeatedly until a specific condition is met. In C++, there are three main types of loops: `for`, `while`, and `do-while`.\n\nFor Loop\n--------\n\nA `for` loop is used when you know the number of times you want to traverse through a block of code. It consists of an initialization statement, a condition, and an increment/decrement operation.\n\nHere's the syntax for a `for` loop:\n\n    for (initialization; condition; increment/decrement) {\n        // block of code to execute\n    }\n    \n\nFor example:\n\n    #include <iostream>\n    \n    int main() {\n        for (int i = 0; i < 5; i++) {\n            std::cout << \"Iteration: \" << i << '\\n';\n        }\n        return 0;\n    }\n    \n\nWhile Loop\n----------\n\nA `while` loop runs as long as a specified condition is `true`. The loop checks for the condition before entering the body of the loop.\n\nHere's the syntax for a `while` loop:\n\n    while (condition) {\n        // block of code to execute\n    }\n    \n\nFor example:\n\n    #include <iostream>\n    \n    int main() {\n        int i = 0;\n        while (i < 5) {\n            std::cout << \"Iteration: \" << i << '\\n';\n            i++;\n        }\n        return 0;\n    }\n    \n\nDo-While Loop\n-------------\n\nA `do-while` loop is similar to a `while` loop, with the key difference being that the loop body is executed at least once, even when the condition is `false`.\n\nHere's the syntax for a `do-while` loop:\n\n    do {\n        // block of code to execute\n    } while (condition);\n    \n\nFor example:\n\n    #include <iostream>\n    \n    int main() {\n        int i = 0;\n        do {\n            std::cout << \"Iteration: \" << i << '\\n';\n            i++;\n        } while (i < 5);\n        return 0;\n    }\n    \n\nIn summary, loops are an integral part of C++ programming that allow you to execute a block of code multiple times. The three types of loops in C++ are `for`, `while`, and `do-while`. Each type has its own specific use case and can be chosen depending on the desired behavior.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "C++ For Loop",
+        "url": "https://www.w3schools.com/cpp/cpp_for_loop.asp",
+        "type": "article"
+      }
+    ]
+  },
+  "bjpFWxiCKGz28E-ukhZBp": {
+    "title": "if else / switch / goto",
+    "description": "C++ provides you with tools which helps you to control the way your program behaves (logic flows) based on how the user interact with your program. Here we will discuss about `if-else`, `switch` and `goto` are three common ways to guide the flow of logic in your code.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "The 'if-else' Statement in C++",
+        "url": "https://www.youtube.com/watch?v=9-BjXs1vMSc",
+        "type": "video"
+      },
+      {
+        "title": "Learn C++ With Me - Switch Statement",
+        "url": "https://www.youtube.com/watch?v=uOlLs1OYSSI",
+        "type": "video"
+      },
+      {
+        "title": "Why is it illegal to use \"goto\"?",
+        "url": "https://youtu.be/AKJhThyTmQw?si=gjEqAsDZVMDGVAT2",
+        "type": "video"
+      }
+    ]
+  },
+  "oYi3YOc1GC2Nfp71VOkJt": {
+    "title": "Functions",
+    "description": "A **function** is a group of statements that perform a specific task, organized as a separate unit in a program. Functions help in breaking the code into smaller, manageable, and reusable blocks.\n\nThere are mainly two types of functions in C++:\n\n*   **Standard library functions**: Pre-defined functions available in the C++ standard library, such as `sort()`, `strlen()`, `sqrt()`, and many more. These functions are part of the standard library, so you need to include the appropriate header file to use them.\n    \n*   **User-defined functions**: Functions created by the programmer to perform a specific task. To create a user-defined function, you need to define the function and call it in your code.\n    \n\nDefining a Function\n-------------------\n\nThe general format for defining a function in C++ is:\n\n    return_type function_name(parameter list) {\n        // function body\n    }\n    \n\n*   `return_type`: Data type of the output produced by the function. It can be `void`, indicating that the function doesn't return any value.\n*   `function_name`: Name given to the function, following C++ naming conventions.\n*   `parameter list`: List of input parameters/arguments that are needed to perform the task. It is optional, you can leave it blank when no parameters are needed.\n\nExample\n-------\n\n    #include <iostream>\n    \n    // Function to add two numbers\n    int addNumbers(int a, int b) {\n        int sum = a + b;\n        return sum;\n    }\n    \n    int main() {\n        int num1 = 5, num2 = 10;\n        int result = addNumbers(num1, num2); // Calling the function\n        std::cout << \"The sum is: \" << result << '\\n';\n        return 0;\n    }\n    \n\nIn this example, the function `addNumbers` takes two integer parameters, `a` and `b`, and returns the sum of the numbers. We then call this function from the `main()` function and display the result.\n\nFunction Prototypes\n-------------------\n\nIn some cases, you might want to use a function before actually defining it. To do this, you need to declare a **function prototype** at the beginning of your code.\n\nA function prototype is a declaration of the function without its body, and it informs the compiler about the function's name, return type, and parameters.\n\n    #include <iostream>\n    \n    // Function prototype\n    int multiplyNumbers(int x, int y);\n    \n    int main() {\n        int num1 = 3, num2 = 7;\n        int result = multiplyNumbers(num1, num2); // Calling the function\n        std::cout << \"The product is: \" << result << '\\n';\n        return 0;\n    }\n    \n    // Function definition\n    int multiplyNumbers(int x, int y) {\n        int product = x * y;\n        return product;\n    }\n    \n\nIn this example, we use a function prototype for `multiplyNumbers()` before defining it. This way, we can call the function from the `main()` function even though it hasn't been defined yet in the code.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "introduction to functions in c++",
+        "url": "https://www.learncpp.com/cpp-tutorial/introduction-to-functions/",
+        "type": "article"
+      }
+    ]
+  },
+  "obZIxRp0eMWdG7gplNIBc": {
+    "title": "Static Polymorphism",
+    "description": "Static polymorphism, also known as compile-time polymorphism, is a type of polymorphism that resolves the types and method calls at compile time rather than at runtime. This is commonly achieved through the use of function overloading and templates in C++.\n\nFunction Overloading\n--------------------\n\nFunction overloading is a way to create multiple functions with the same name but different parameter lists. The compiler determines the correct function to call based on the types and number of arguments used when the function is called.\n\nExample:\n\n    #include <iostream>\n    \n    void print(int i) {\n        std::cout << \"Printing int: \" << i << '\\n';\n    }\n    \n    void print(double d) {\n        std::cout << \"Printing double: \" << d << '\\n';\n    }\n    \n    void print(const char* s) {\n        std::cout << \"Printing string: \" << s << '\\n';\n    }\n    \n    int main() {\n        print(5);          // Calls print(int i)\n        print(3.14);       // Calls print(double d)\n        print(\"Hello\");    // Calls print(const char* s)\n    \n        return 0;\n    }\n    \n\nTemplates\n---------\n\nTemplates are a powerful feature in C++ that allows you to create generic functions or classes. The actual code for specific types is generated at compile time, which avoids the overhead of runtime polymorphism. The use of templates is the main technique to achieve static polymorphism in C++.\n\nExample:\n\n    #include <iostream>\n    \n    // Template function to print any type\n    template<typename T>\n    void print(const T& value) {\n        std::cout << \"Printing value: \" << value << '\\n';\n    }\n    \n    int main() {\n        print(42);           // int\n        print(3.14159);      // double\n        print(\"Hello\");      // const char*\n    \n        return 0;\n    }\n    \n\nIn conclusion, static polymorphism achieves polymorphic behavior during compile time using function overloading and templates, instead of relying on runtime information like dynamic polymorphism does. This can result in more efficient code since method calls are resolved at compile time.",
+    "links": []
+  },
+  "sgfqb22sdN4VRJYkhAVaf": {
+    "title": "Function Overloading",
+    "description": "Function overloading in C++ allows multiple functions to share the same name, provided they differ in the number or types of parameters. This facilitates compile-time polymorphism, enhancing code readability and maintainability by enabling functions to perform similar operations on different data types or argument counts.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Function Overloading - Microsoft Learn",
+        "url": "https://learn.microsoft.com/en-us/cpp/cpp/function-overloading",
+        "type": "article"
+      }
+    ]
+  },
+  "llCBeut_uc9IAe2oi4KZ9": {
+    "title": "Operator Overloading",
+    "description": "Operator overloading in C++ is a feature that allows you to redefine the way operators work for user-defined types (such as classes and structs). It lets you specify how operators like +, -, \\*, ==, etc., behave when applied to objects of your class. Visit the following resources to learn more:\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Operator Overloading - Microsoft Learn",
+        "url": "https://learn.microsoft.com/en-us/cpp/cpp/operator-overloading",
+        "type": "article"
+      },
+      {
+        "title": "operator overloading - cppreference.com",
+        "url": "https://en.cppreference.com/w/cpp/language/operators",
+        "type": "article"
+      }
+    ]
+  },
+  "xjiFBVe-VGqCqWfkPVGKf": {
+    "title": "Lambdas",
+    "description": "A lambda function, or simply \"lambda\", is an anonymous (unnamed) function that is defined in place, within your source code, and with a concise syntax. Lambda functions were introduced in C++11 and have since become a widely used feature, especially in combination with the Standard Library algorithms.\n\nSyntax\n------\n\nHere is a basic syntax of a lambda function in C++:\n\n    [capture-list](parameters) -> return_type {\n        // function body\n    };\n    \n\n*   **capture-list**: A list of variables from the surrounding scope that the lambda function can access.\n*   **parameters**: The list of input parameters, just like in a regular function. Optional.\n*   **return\\_type**: The type of the value that the lambda function will return. This part is optional, and the compiler can deduce it in many cases.\n*   **function body**: The code that defines the operation of the lambda function.\n\nUsage Examples\n--------------\n\nHere are a few examples to demonstrate the use of lambda functions in C++:\n\n*   Lambda function with no capture, parameters, or return type.\n\n    auto printHello = []() {\n        std::cout << \"Hello, World!\\n\";\n    };\n    printHello(); // Output: Hello, World!\n    \n\n*   Lambda function with parameters.\n\n    auto add = [](int a, int b) {\n        return a + b;\n    };\n    int result = add(3, 4); // result = 7\n    \n\n*   Lambda function with capture-by-value.\n\n    int multiplier = 3;\n    auto times = [multiplier](int a) {\n        return a * multiplier;\n    };\n    int result = times(5); // result = 15\n    \n\n*   Lambda function with capture-by-reference.\n\n    int expiresInDays = 45;\n    auto updateDays = [&expiresInDays](int newDays) {\n        expiresInDays = newDays;\n    };\n    updateDays(30); // expiresInDays = 30\n    \n\nNote that, when using the capture by reference, any change made to the captured variable _inside_ the lambda function will affect its value in the surrounding scope.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Lambda Expressions",
+        "url": "https://en.cppreference.com/w/cpp/language/lambda",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about AWS Lambda",
+        "url": "https://app.daily.dev/tags/aws-lambda?ref=roadmapsh",
+        "type": "article"
+      },
+      {
+        "title": "Lambdas in C++",
+        "url": "https://youtu.be/MH8mLFqj-n8",
+        "type": "video"
+      }
+    ]
+  },
+  "MwznA4qfpNlv6sqSNjPZi": {
+    "title": "Data Types",
+    "description": "In C++, data types are used to categorize different types of data that a program can process. They are essential for determining the type of value a variable can hold and how much memory space it will occupy. Some basic data types in C++ include integers, floating-point numbers, characters, and booleans.\n\nFundamental Data Types\n----------------------\n\nInteger (int)\n-------------\n\nIntegers are whole numbers that can store both positive and negative values. The size of `int` depends on the system architecture (usually 4 bytes).\n\nExample:\n\n    int num = 42;\n    \n\nThere are variants of `int` that can hold different ranges of numbers:\n\n*   short (`short int`): Smaller range than `int`.\n*   long (`long int`): Larger range than `int`.\n*   long long (`long long int`): Even larger range than `long int`.\n\nFloating-Point (float, double)\n------------------------------\n\nFloating-point types represent real numbers, i.e., numbers with a decimal point. There are two main floating-point types:\n\n*   **float**: Provides single-precision floating-point numbers. It typically occupies 4 bytes of memory.\n\nExample:\n\n    float pi = 3.14f;\n    \n\n*   **double**: Provides double-precision floating-point numbers. It consumes more memory (usually 8 bytes) but has a higher precision than `float`.\n\nExample:\n\n    double pi_high_precision = 3.1415926535;\n    \n\nCharacter (char)\n----------------\n\nCharacters represent a single character, such as a letter, digit, or symbol. They are stored using the ASCII value of the symbol and typically occupy 1 byte of memory.\n\nExample:\n\n    char letter = 'A';\n    \n\nBoolean (bool)\n--------------\n\nBooleans represent logical values: `true` or `false`. They usually occupy 1 byte of memory.\n\nExample:\n\n    bool is_cpp_great = true;\n    \n\nDerived Data Types\n------------------\n\nDerived data types are types that are derived from fundamental data types. Some examples include:\n\nArrays\n------\n\nArrays are used to store multiple values of the same data type in consecutive memory locations.\n\nExample:\n\n    int numbers[5] = {1, 2, 3, 4, 5};\n    \n\nPointers\n--------\n\nPointers are used to store the memory address of a variable.\n\nExample:\n\n    int num = 42;\n    int* pNum = &num;\n    \n\nReferences\n----------\n\nReferences are an alternative way to share memory locations between variables, allowing you to create an alias for another variable.\n\nExample:\n\n    int num = 42;\n    int& numRef = num;\n    \n\nUser-Defined Data Types\n-----------------------\n\nUser-defined data types are types that are defined by the programmer, such as structures, classes, and unions.\n\nStructures (struct)\n-------------------\n\nStructures are used to store different data types under a single variable and accessibility of member variables and methods are public.\n\nExample:\n\n    struct Person {\n        std::string name;\n        int age;\n        float height;\n    };\n    \n    Person p1 = {\"John Doe\", 30, 5.9};\n    \n\nClasses (class)\n---------------\n\nClasses are similar to structures, but the accessibility of the member data and function are governed by access specifiers. By default access to members of a class is private.\n\nExample:\n\n    class Person {\n    public:\n        std::string name;\n        int age;\n    \n        void printInfo() {\n            std::cout << \"Name: \" << name << \", Age: \" << age << '\\n';\n        };\n    };\n    \n    Person p1;\n    p1.name = \"John Doe\";\n    p1.age = 30;\n    \n\nUnions (union)\n--------------\n\nUnions are used to store different data types in the same memory location.\n\nExample:\n\n    union Data {\n        int num;\n        char letter;\n        float decimal;\n    };\n    \n    Data myData;\n    myData.num = 42;",
+    "links": []
+  },
+  "f1djN0GxoeVPr_0cl6vMq": {
+    "title": "Static Typing",
+    "description": "In C++, static typing means that the data type of a variable is determined at compile time, before the program is executed. This means that a variable can only be used with data of a specific type, and the compiler ensures that the operations performed with the variable are compatible with its type. If there is a mismatch, the compiler will adjust the data type of variable to match another provided it's feasible. This process is known as `Type Conversion`. If the compiler is not able to achieve type conversion, an `Invalid Type Conversion` error will be raised during compilation of the code.\n\nC++ is a statically typed language, which means that it uses static typing to determine data types and perform type checking during compile time. This helps with ensuring type safety and can prevent certain types of errors from occurring during the execution of the program.\n\nHere's a simple code example to demonstrate static typing in C++:\n\n    #include <iostream>\n    \n    int main() {\n        int num = 65;        // 'num' is statically typed as an integer\n        double pi = 3.14159; // 'pi' is statically typed as a double\n        char c = 'c';        // 'c' is statically typed as a char\n    \n        c = num;    // This asssigment would convert num's value to ASCII equivalent character\n        num = pi; // This assignment would convert pi's value from double type to int type\n        \n        std::cout << \"The value of num is: \" << num << '\\n';\n        std::cout << \"The value of pi is: \" << pi << '\\n';\n        std::cout << \"The value of c is: \"<< c << '\\n';\n        return 0;\n    }\n    \n\nIn the code above, the variable `num` is statically typed as an `int`, `pi` is statically typed as a `double`, and `c` is statically typed as a `char`. If you attempt to assign the value of `pi` to `num`, the value `3.14159` will be converted to the integer `3` and assigned to `num`. Similarly, when the value of `num` is assigned to `c`, the compiler will convert the value `65` to its corresponding [ASCII](https://www.ascii-code.com) code, which is `A`.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Type-Coversion",
+        "url": "https://www.programiz.com/cpp-programming/type-conversion",
+        "type": "article"
+      },
+      {
+        "title": "Static Vs Dynamic",
+        "url": "https://www.techtarget.com/searchapparchitecture/tip/Static-vs-dynamic-typing-The-details-and-differences",
+        "type": "article"
+      }
+    ]
+  },
+  "i0EAFEUB-F0wBJWOtrl1A": {
+    "title": "Dynamic Typing",
+    "description": "C++ is known as a statically-typed language, which means the data types of its variables are determined at compile time. However, C++ also provides concepts to have certain level of _dynamic typing_, which means determining the data types of variables at runtime.\n\nHere is a brief overview of two ways to achieve dynamic typing in C++:\n\n`void*` Pointers\n----------------\n\nA `void*` pointer is a generic pointer that can point to objects of any data type. They can be used to store a reference to any type of object without knowing the specific type of the object.\n\nExample:\n\n    #include <iostream>\n    \n    int main() {\n        int x = 42;\n        float y = 3.14f;\n        std::string z = \"Hello, world!\";\n    \n        void* void_ptr;\n    \n        void_ptr = &x;\n        std::cout << \"int value: \" << *(static_cast<int*>(void_ptr)) << '\\n';\n    \n        void_ptr = &y;\n        std::cout << \"float value: \" << *(static_cast<float*>(void_ptr)) << '\\n';\n    \n        void_ptr = &z;\n        std::cout << \"string value: \" << *(static_cast<std::string*>(void_ptr)) << '\\n';\n    \n        return 0;\n    }\n    \n\n`std::any` (C++17)\n------------------\n\nC++17 introduced the `std::any` class which represents a generalized type-safe container for single values of any type.\n\nExample:\n\n    #include <iostream>\n    #include <any>\n    \n    int main() {\n        std::any any_value;\n    \n        any_value = 42;\n        std::cout << \"int value: \" << std::any_cast<int>(any_value) << '\\n';\n    \n        any_value = 3.14;\n        std::cout << \"double value: \" << std::any_cast<double>(any_value) << '\\n';\n    \n        any_value = std::string(\"Hello, world!\");\n        std::cout << \"string value: \" << std::any_cast<std::string>(any_value) << '\\n';\n    \n        return 0;\n    }\n    \n\nKeep in mind that both `void*` pointers and `std::any` have performance implications due to the additional type checking and casting that take place during runtime. They should be used carefully and only when absolutely necessary.",
+    "links": []
+  },
+  "r0yD1gfn03wTpEBi6zNsu": {
+    "title": "RTTI",
+    "description": "Run-Time Type Identification (RTTI) is a feature in C++ that allows you to obtain the type information of an object during program execution. This can be useful when using dynamic typing, where the type of an object can change at runtime.\n\nThere are two main mechanisms for RTTI in C++:\n\n*   `typeid` operator\n*   `dynamic_cast` operator\n\ntypeid operator\n---------------\n\n`typeid` is an operator that returns a reference to an object of type `std::type_info`, which contains information about the type of the object. The header file `<typeinfo>` should be included to use `typeid`.\n\nHere is an example:\n\n    #include <iostream>\n    #include <typeinfo>\n    \n    class Base { virtual void dummy() {} };\n    class Derived : public Base { /* ... */ };\n    \n    int main() {\n        Base* base_ptr = new Derived;\n    \n        // Using typeid to get the type of the object\n        std::cout << \"Type: \" << typeid(*base_ptr).name() << '\\n';\n    \n        delete base_ptr;\n        return 0;\n    }\n    \n\ndynamic\\_cast operator\n----------------------\n\n`dynamic_cast` is a type-casting operator that performs a runtime type check and safely downcasts a base pointer or reference to a derived pointer or reference. It returns null or throws a bad\\_cast exception (if casting references) when the casting fails.\n\nHere is an example:\n\n    #include <iostream>\n    \n    class Base { virtual void dummy() {} };\n    class Derived1 : public Base { /* ... */ };\n    class Derived2 : public Base { /* ... */ };\n    \n    int main() {\n        Base* base_ptr = new Derived1;\n    \n        // Using dynamic_cast to safely downcast the pointer\n        Derived1* derived1_ptr = dynamic_cast<Derived1*>(base_ptr);\n        if (derived1_ptr) {\n            std::cout << \"Downcast to Derived1 successful\\n\";\n        }\n        else {\n            std::cout << \"Downcast to Derived1 failed\\n\";\n        }\n    \n        Derived2* derived2_ptr = dynamic_cast<Derived2*>(base_ptr);\n        if (derived2_ptr) {\n            std::cout << \"Downcast to Derived2 successful\\n\";\n        }\n        else {\n            std::cout << \"Downcast to Derived2 failed\\n\";\n        }\n    \n        delete base_ptr;\n        return 0;\n    }\n    \n\nPlease note that the use of RTTI can have some performance overhead, as it requires additional compiler-generated information to be stored and processed during runtime.",
+    "links": []
+  },
+  "DWw8NxkLpIpiOSUaZZ1oA": {
+    "title": "Pointers and References",
+    "description": "A pointer is a variable that stores the memory address of another variable (or function). It points to the location of the variable in memory, and it allows you to access or modify the value indirectly. Here's a general format to declare a pointer:\n\n    dataType *pointerName;\n    \n\n**Initializing a pointer:**\n\n    int num = 10;\n    int *ptr = &num;  // Pointer 'ptr' now points to the memory address of 'num'\n    \n\n**Accessing value using a pointer:**\n\n    int value = *ptr; // Value now contains the value of the variable that 'ptr' points to (i.e., 10)\n    \n\n**Function pointer:**\n\n    int add(int a, int b)\n    {\n      return a + b;\n    }\n    \n    int main()\n    {\n      int (*funcptr) (int, int) = add; // Pointer 'funcptr' now points to the functions 'add'\n      funcptr(4, 5); // Return 9\n    }\n    \n\nReferences\n----------\n\nA reference is an alias for an existing variable, meaning it's a different name for the same memory location. Unlike pointers, references cannot be null, and they must be initialized when they are declared. Once a reference is initialized, it cannot be changed to refer to another variable.\n\nHere's a general format to declare a reference:\n\n    dataType &referenceName = existingVariable;\n    \n\n**Example:**\n\n    int num = 10;\n    int &ref = num; // Reference 'ref' is now an alias of 'num'\n    \n\nModifying the value of `ref` will also modify the value of `num` because they share the same memory location.\n\n**Note:** References are generally used when you want to pass a variable by reference in function arguments or when you want to create an alias for a variable without the need for pointer syntax.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Function Pointer in C++",
+        "url": "https://www.scaler.com/topics/cpp/function-pointer-cpp/",
+        "type": "article"
+      }
+    ]
+  },
+  "uUzRKa9wGzdUwwmAg3FWr": {
+    "title": "References",
+    "description": "A reference can be considered as a constant pointer (not to be confused with a pointer to a constant value) which always points to (references) the same object. They are declared using the `&` (ampersand) symbol.\n\nDeclaration and Initialization\n------------------------------\n\nTo declare a reference, use the variable type followed by the `&` symbol and the reference's name. Note that you must initialize a reference when you declare it.\n\n    int var = 10;        // Declare an integer variable\n    int& ref = var;      // Declare a reference that \"points to\" var\n    \n\nUsage\n-----\n\nYou can use the reference just like you'd use the original variable. When you change the value of the reference, the value of the original variable also changes, because they both share the same memory location.\n\n    var = 20;            // Sets the value of var to 20\n    std::cout << ref << '\\n'; // Outputs 20\n    \n    ref = 30;            // Sets the value of ref to 30\n    std::cout << var << '\\n'; // Outputs 30\n    \n\nFunction Parameters\n-------------------\n\nYou can use references as function parameters to create an alias for an argument. This is commonly done when you need to modify the original variable or when passing an object of considerable size to avoid the cost of copying.\n\n    void swap(int& a, int& b) {\n        int temp = a;\n        a = b;\n        b = temp;\n    }\n    \n    int main() {\n       int x = 5, y = 10;\n       std::cout << \"Before Swap: x = \" << x << \" y = \" << y << '\\n'; // Outputs 5 10\n       \n       swap(x, y);\n       std::cout << \"After Swap: x = \" << x << \" y = \" << y << '\\n';  // Outputs 10 5\n    }",
+    "links": []
+  },
+  "mSFwsTYvmg-GwG4_DEIEf": {
+    "title": "Memory Model",
+    "description": "The memory model in C++ defines how the program stores and accesses data in computer memory. It consists of different segments, such as the Stack, Heap, Data and Code segments. Each of these segments is used to store different types of data and has specific characteristics.\n\nStack Memory\n------------\n\nStack memory is used for automatic storage duration variables, such as local variables and function call data. Stack memory is managed by the compiler, and it's allocation and deallocation are done automatically. The stack memory is also a LIFO (Last In First Out) data structure, meaning that the most recent data allocated is the first to be deallocated.\n\n    void functionExample() {\n        int x = 10; // x is stored in the stack memory\n    }\n    \n\nHeap Memory\n-----------\n\nHeap memory is used for dynamic storage duration variables, such as objects created using the `new` keyword. The programmer has control over the allocation and deallocation of heap memory using `new` and `delete` operators. Heap memory is a larger pool of memory than the stack, but has a slower access time.\n\n    void functionExample() {\n        int* p = new int; // dynamically allocated int in heap memory\n        *p = 10;\n        // more code\n        delete p; // deallocate memory\n    }\n    \n\nData Segment\n------------\n\nThe Data segment is composed of two parts: the initialized data segment and the uninitialized data segment. The initialized data segment stores global, static, and constant variables with initial values, whereas the uninitialized segment stores uninitialized global and static variables.\n\n    // Initialized data segment\n    int globalVar = 10; // global variables\n    static int staticVar = 10; // static local variables\n    const int constVar = 10; // constant variables with value\n    \n    // Uninitialized data segment\n    int globalVar; // uninitialized global variables\n    \n\nCode Segment\n------------\n\nThe Code segment (also known as the Text segment) stores the executable code (machine code) of the program. It's usually located in a read-only area of memory to prevent accidental modification.\n\n    void functionExample() {\n        // The machine code for this function is stored in the code segment.\n    }\n    \n\nIn summary, understanding the memory model in C++ helps to optimize the usage of memory resources and improves overall program performance.",
+    "links": []
+  },
+  "9aA_-IfQ9WmbPgwic0mFN": {
+    "title": "Lifetime of Objects",
+    "description": "Object lifetime refers to the time during which an object exists, from the moment it is created until it is destroyed. In C++, an object's lifetime can be classified into four categories:\n\n*   **Static Storage Duration**: Objects with static storage duration exist for the entire run of the program. These objects are allocated at the beginning of the program's run and deallocated when the program terminates. Global variables, static data members, and static local variables fall into this category.\n    \n        int global_var;            // Static storage duration\n        class MyClass {\n          static int static_var;   // Static storage duration\n        };\n        void myFunction() {\n          static int local_var;    // Static storage duration\n        }\n        \n    \n*   **Thread Storage Duration**: Objects with thread storage duration exist for the lifetime of the thread they belong to. They are created when a thread starts and destroyed when the thread exits. Thread storage duration can be specified using the `thread_local` keyword.\n    \n        thread_local int my_var;   // Thread storage duration\n        \n    \n*   **Automatic Storage Duration**: Objects with automatic storage duration are created at the point of definition and destroyed when the scope in which they are declared is exited. These objects are also known as \"local\" or \"stack\" objects. Function parameters and local non-static variables fall into this category.\n    \n        void myFunction() {\n          int local_var;           // Automatic storage duration\n        }\n        \n    \n*   **Dynamic Storage Duration**: Objects with dynamic storage duration are created at runtime, using memory allocation functions such as `new` or `malloc`. The lifetime of these objects must be managed manually, as they are not automatically deallocated when the scope is exited. Instead, it is the programmer's responsibility to destroy the objects using the `delete` or `free` functions when they are no longer needed, to avoid memory leaks.\n    \n        int* ptr = new int;        // Dynamic storage duration\n        delete ptr;\n        \n    \n\nUnderstanding object lifetimes is essential for managing memory efficiently in C++ programs and avoiding common issues like memory leaks and undefined behavior.\n\nKeep in mind that a proper understanding of constructors and destructors for classes is also essential when working with objects of varying lifetimes, as they allow you to control the behavior of object creation and destruction.",
+    "links": []
+  },
+  "ulvwm4rRPgkpgaqGgyH5a": {
+    "title": "Smart Pointers",
+    "description": "",
+    "links": []
+  },
+  "vUwSS-uX36OWZouO0wOcy": {
+    "title": "weak_ptr",
+    "description": "",
+    "links": []
+  },
+  "b5jZIZD_U_CPg-_bdndjz": {
+    "title": "shared_ptr",
+    "description": "",
+    "links": []
+  },
+  "k9c5seRkhgm_yHPpiz2X0": {
+    "title": "unique_ptr",
+    "description": "One of C++'s main features includes variants of the normal _raw_ C pointers. One of these is the `unique_ptr`, which is a type of smart pointer that claims exclusive ownership over a value.\n\nThese types of pointers **can be moved** (`std::move`), but not **copied** and are automatically deleted when out of scope. The recommended way to create a `unique_ptr` is using `std::make_unique`.\n\n    #include <memory>\n    #include <iostream>\n    \n    int main() {\n        std::unique_ptr<int> uptr = std::make_unique<int>(10);\n        std::cout << *uptr << std::endl;\n    \n        std::unique_ptr<int> uptr2 = uptr; // compile error\n        std::unique_ptr<int> uptr2 = std::move(uptr); // transferring ownership\n    }",
+    "links": [
+      {
+        "title": "std::unique_ptr - Detailed Reference",
+        "url": "https://en.cppreference.com/w/cpp/memory/unique_ptr",
+        "type": "article"
+      },
+      {
+        "title": "Smart Pointers – unique_ptr",
+        "url": "https://www.learncpp.com/cpp-tutorial/unique-ptr/",
+        "type": "article"
+      },
+      {
+        "title": "When should you use std::unique_ptr? - StackOverflow Discussion",
+        "url": "https://stackoverflow.com/questions/13782051/when-should-you-use-stdunique-ptr",
+        "type": "video"
+      }
+    ]
+  },
+  "uEGEmbxegATIrvGfobJb9": {
+    "title": "Raw Pointers",
+    "description": "",
+    "links": []
+  },
+  "Gld0nRs0sM8kRe8XmYolu": {
+    "title": "New/Delete Operators",
+    "description": "",
+    "links": []
+  },
+  "6w0WExQ4lGIGgok6Thq0s": {
+    "title": "Memory Leakage",
+    "description": "",
+    "links": []
+  },
+  "Zw2AOTK5uc9BoKEpY7W1C": {
+    "title": "Structuring Codebase",
+    "description": "Structuring codebase is an essential part of software development that deals with organizing and modularizing your code to make it more maintainable, efficient, and easier to understand. A well-structured codebase enhances collaboration, simplifies adding new features, and makes debugging faster. In C++, there are various techniques to help you structure your codebase effectively.\n\nNamespaces\n----------\n\nNamespaces are one of the tools in C++ to organize your code by providing a named scope for different identifiers you create, like functions, classes, and variables. They help avoid name clashes and make your code more modular.\n\n    namespace MyNamespace {\n        int aFunction() {\n            // function implementation\n        }\n    }\n    // to use the function\n    MyNamespace::aFunction();\n    \n\nInclude Guards\n--------------\n\nInclude guards are a tool for preventing multiple inclusions of a header file in your project. They consist of preprocessor directives that conditionally include the header file only once, even if it's included in multiple places.\n\n    #ifndef MY_HEADER_FILE_H\n    #define MY_HEADER_FILE_H\n    \n    // Your code here\n    \n    #endif // MY_HEADER_FILE_H\n    \n\nHeader and Source Files\n-----------------------\n\nSeparating your implementation and declarations into header (_.h) and source (_.cpp) files is a key aspect of structuring your codebase in C++. Header files usually contain class and function declarations, while source files contain their definitions.\n\n// MyClass.h\n\n    #ifndef MY_CLASS_H\n    #define MY_CLASS_H\n    \n    class MyClass\n    {\n    public:\n        MyClass();\n        int myMethod();\n    };\n     \n    #endif // MY_CLASS_H\n    \n\n// MyClass.cpp\n\n    #include \"MyClass.h\"\n    \n    MyClass::MyClass() {\n        // constructor implementation\n    }\n    \n    int MyClass::myMethod() {\n        // method implementation\n    }\n    \n\nCode Formatting\n---------------\n\nConsistent code formatting and indentation play a crucial role in structuring your codebase, making it easier to read and understand for both you and other developers. A style guide such as the [Google C++ Style Guide](https://google.github.io/styleguide/cppguide.html) can help you maintain consistent formatting throughout your project.",
+    "links": []
+  },
+  "dKCYmxDNZubCVcR5rf8b-": {
+    "title": "Scope",
+    "description": "**Scope** refers to the visibility and accessibility of variables, functions, classes, and other identifiers in a C++ program. It determines the lifetime and extent of these identifiers. In C++, there are four types of scope:\n\n*   **Global scope:** Identifiers declared outside any function or class have a global scope. They can be accessed from any part of the program (unless hidden by a local identifier with the same name). The lifetime of a global identifier is the entire duration of the program.\n\n    #include <iostream>\n    \n    int globalVar; // This is a global variable\n    \n    int main() {\n        std::cout << \"Global variable: \" << globalVar << '\\n';\n    }\n    \n\n*   **Local scope:** Identifiers declared within a function or a block have a local scope. They can be accessed only within the function or the block they were declared in. Their lifetime is limited to the duration of the function/block execution.\n\n    #include <iostream>\n    \n    void localExample() {\n        int localVar; // This is a local variable\n        localVar = 5;\n        std::cout << \"Local variable: \" << localVar << '\\n';\n    }\n    \n    int main() {\n        localExample();\n        // std::cout << localVar << '\\n'; //error: ‘localVar’ was not declared in this scope\n    }\n    \n\n*   **Namespace scope:** A namespace is a named scope that groups related identifiers together. Identifiers declared within a namespace have the namespace scope. They can be accessed using the namespace name and the scope resolution operator `::`.\n\n    #include <iostream>\n    \n    namespace MyNamespace {\n        int namespaceVar = 42;\n    }\n    \n    int main() {\n        std::cout << \"Namespace variable: \" << MyNamespace::namespaceVar << '\\n';\n    }\n    \n\n*   **Class scope:** Identifiers declared within a class have a class scope. They can be accessed using the class name and the scope resolution operator `::` or, for non-static members, an object of the class and the dot `.` or arrow `->` operator.\n\n    #include <iostream>\n    \n    class MyClass {\n    public:\n        static int staticMember;\n        int nonStaticMember;\n    \n        MyClass(int value) : nonStaticMember(value) {}\n    };\n    \n    int MyClass::staticMember = 7;\n    \n    int main() {\n        MyClass obj(10);\n        std::cout << \"Static member: \" << MyClass::staticMember << '\\n';\n        std::cout << \"Non-static member: \" << obj.nonStaticMember << '\\n';\n    }\n    \n\nUnderstanding various types of scope in C++ is essential for effective code structuring and management of resources in a codebase.",
+    "links": []
+  },
+  "iIdC7V8sojwyEqK1xMuHn": {
+    "title": "Namespaces",
+    "description": "In C++, a namespace is a named scope or container that is used to organize and enclose a collection of code elements, such as variables, functions, classes, and other namespaces. They are mainly used to divide and manage the code base, giving developers control over name collisions and the specialization of code.\n\nSyntax\n------\n\nHere's the syntax for declaring a namespace:\n\n    namespace identifier {\n        // code elements\n    }\n    \n\nUsing Namespaces\n----------------\n\nTo access elements within a namespace, you can use the scope resolution operator `::`. Here are some examples:\n\n### Declaring and accessing a namespace\n\n    #include <iostream>\n    \n    namespace animals {\n        std::string dog = \"Bobby\";\n        std::string cat = \"Lilly\";\n    }\n    \n    int main() {\n        std::cout << \"Dog's name: \" << animals::dog << '\\n';\n        std::cout << \"Cat's name: \" << animals::cat << '\\n';\n    \n        return 0;\n    }\n    \n\n### Nesting namespaces\n\nNamespaces can be nested within other namespaces:\n\n    #include <iostream>\n    \n    namespace outer {\n        int x = 10;\n    \n        namespace inner {\n            int y = 20;\n        }\n    }\n    \n    int main() {\n        std::cout << \"Outer x: \" << outer::x << '\\n';\n        std::cout << \"Inner y: \" << outer::inner::y << '\\n';\n    \n        return 0;\n    }\n    \n\n`using` Keyword\n---------------\n\nYou can use the `using` keyword to import namespaced elements into the current scope. However, this might lead to name conflicts if multiple namespaces have elements with the same name.\n\n### Using a single element from a namespace\n\n    #include <iostream>\n    \n    namespace animals {\n        std::string dog = \"Bobby\";\n        std::string cat = \"Lilly\";\n    }\n    \n    int main() {\n        using animals::dog;\n        \n        std::cout << \"Dog's name: \" << dog << '\\n';\n    \n        return 0;\n    }\n    \n\n### Using the entire namespace\n\n    #include <iostream>\n    \n    namespace animals {\n        std::string dog = \"Bobby\";\n        std::string cat = \"Lilly\";\n    }\n    \n    int main() {\n        using namespace animals;\n        \n        std::cout << \"Dog's name: \" << dog << '\\n';\n        std::cout << \"Cat's name: \" << cat << '\\n';\n    \n        return 0;\n    }\n    \n\nIn conclusion, namespaces are a useful mechanism in C++ to organize code, avoid naming conflicts, and manage the visibility of code elements.",
+    "links": []
+  },
+  "CK7yf8Bo7kfbV6x2tZTrh": {
+    "title": "Headers / CPP Files",
+    "description": "Code splitting refers to the process of breaking down a large code base into smaller, more manageable files or modules. This helps improve the organization, maintainability, and readability of the code. In C++, code splitting is generally achieved through the use of separate compilation, header files, and source files.\n\n### Header Files (.h or .hpp)\n\nHeader files, usually with the `.h` or `.hpp` extension, are responsible for declaring classes, functions, and variables that are needed by multiple source files. They act as an interface between different parts of the code, making it easier to manage dependencies and reduce the chances of duplicated code.\n\nExample of a header file:\n\n    // example.h\n    #ifndef EXAMPLE_H\n    #define EXAMPLE_H\n    \n    class Example {\n    public:\n        void printMessage();\n    };\n    \n    #endif\n    \n\n### Source Files (.cpp)\n\nSource files, with the `.cpp` extension, are responsible for implementing the actual functionality defined in the corresponding header files. They include the header files as needed and provide the function and class method definitions.\n\nExample of a source file:\n\n    // example.cpp\n    #include \"example.h\"\n    #include <iostream>\n    \n    void Example::printMessage() {\n        std::cout << \"Hello, code splitting!\\n\";\n    }\n    \n\n### Separate Compilation\n\nC++ allows for separate compilation, which means that each source file can be compiled independently into an object file. These object files can then be linked together to form the final executable. This provides faster build times when making changes to a single source file since only that file needs to be recompiled, and the other object files can be reused.\n\nExample of separate compilation and linking:\n\n    # Compile each source file into an object file\n    g++ -c main.cpp -o main.o\n    g++ -c example.cpp -o example.o\n    \n    # Link object files together to create the executable\n    g++ main.o example.o -o my_program\n    \n\nBy following the code splitting technique, you can better organize your C++ codebase, making it more manageable and maintainable.",
+    "links": []
+  },
+  "CMlWNQwpywNhO9B6Yj6Me": {
+    "title": "Structures and Classes",
+    "description": "Structures and classes are user-defined data types in C++ that allow for the grouping of variables of different data types under a single name. They make it easier to manage and organize complex data by creating objects that have particular attributes and behaviors. The main difference between a structure and a class is their default access specifier: members of a structure are public by default, while members of a class are private.\n\nStructures\n----------\n\nA structure is defined using the `struct` keyword, followed by the structure's name and a set of curly braces `{}` enclosing the members (variables and/or functions) of the structure. The members can be of different data types. To create an object of the structure's type, use the structure name followed by the object name.\n\nHere's an example of defining a structure and creating an object:\n\n    struct Employee {\n        int id;\n        std::string name;\n        float salary;\n    };\n    \n    Employee e1; // create an object of the 'Employee' structure\n    \n\nYou can access the members of a structure using the dot operator `.`:\n\n    e1.id = 1;\n    e1.name = \"John Doe\";\n    e1.salary = 40000;\n    \n\nClasses\n-------\n\nA class is defined using the `class` keyword, followed by the class's name and a set of curly braces `{}` enclosing the members (variables and/or functions) of the class. Like structures, class members can be of different data types. You can create objects of a class using the class name followed by the object name.\n\nHere's an example of a class definition and object creation:\n\n    class Student {\n        int roll_no;\n        std::string name;\n        float marks;\n    \n    public:\n        void set_data(int r, std::string n, float m) {\n            roll_no = r;\n            name = n;\n            marks = m;\n        }\n    \n        void display() {\n            std::cout << \"Roll no: \" << roll_no\n                      << \"\\nName: \" << name\n                      << \"\\nMarks: \" << marks << '\\n';\n        }\n    };\n    \n    Student s1; // create an object of the 'Student' class\n    \n\nSince the data members of a class are private by default, we cannot access them directly using the dot operator from outside the class. Instead, we use public member functions to set or get their values:\n\n    s1.set_data(1, \"Alice\", 95.0);\n    s1.display();\n    \n\nThat's a brief summary of structures and classes in C++. Remember that while they may seem similar, classes provide more control over data encapsulation and can be used to implement more advanced features like inheritance and polymorphism.",
+    "links": []
+  },
+  "7sdEzZCIoarzznwO4XcCv": {
+    "title": "Rule of Zero, Five, Three",
+    "description": "**Rule of Zero, Three, and Five in C++**\n\nThe Rule of Zero, Three, and Five is a set of guidelines for managing object resources in modern C++, related to structures and classes. These rules deal with the default behavior of constructors, destructors, and other special member functions that are necessary for proper resource management.\n\n**Rule of Zero**\n\nThe Rule of Zero states that if a class or structure does not explicitly manage resources, it should not define any of the special member functions, i.e., destructor, copy constructor, copy assignment operator, move constructor, and move assignment operator. The compiler will automatically generate these functions, and the behavior will be correct for managing resources like memory and file handles.\n\n_Example:_\n\n    struct MyResource {\n        std::string name;\n        int value;\n    };\n    \n\nIn this example, MyResource is a simple structure that does not manage any resources, so it does not define any special member functions. The compiler will generate them automatically, and the behavior will be correct.\n\n**Rule of Three**\n\nThe Rule of Three states that a class or structure that manages resources should define the following three special member functions:\n\n*   Destructor\n*   Copy constructor\n*   Copy assignment operator\n\nThese functions are necessary for proper resource management, such as releasing memory or correctly handling deep copies.\n\n_Example:_\n\n    class MyResource {\n    public:\n        // Constructor and destructor\n        MyResource() : data(new int[100]) {} \n        ~MyResource() { delete[] data; } \n    \n        // Copy constructor\n        MyResource(const MyResource& other) : data(new int[100]) {\n            std::copy(other.data, other.data + 100, data);\n        }\n    \n        // Copy assignment operator\n        MyResource& operator=(const MyResource& other) {\n            if (&other == this) { return *this; }\n            std::copy(other.data, other.data + 100, data);\n            return *this;\n        }\n    \n    private:\n        int* data;\n    };\n    \n\nIn this example, MyResource is a class that manages a resource (an array of integers), so it defines the destructor, copy constructor, and copy assignment operator.\n\n**Rule of Five**\n\nThe Rule of Five extends the Rule of Three to include two additional special member functions:\n\n*   Move constructor\n*   Move assignment operator\n\nModern C++ introduces move semantics, which allows for more efficient handling of resources by transferring ownership without necessarily copying all the data.\n\n_Example:_\n\n    class MyResource {\n    public:\n        // Constructors and destructor\n        MyResource() : data(new int[100]) {}\n        ~MyResource() { delete[] data; }\n    \n        // Copy constructor\n        MyResource(const MyResource& other) : data(new int[100]) {\n            std::copy(other.data, other.data + 100, data);\n        }\n    \n        // Copy assignment operator\n        MyResource& operator=(const MyResource& other) {\n            if (&other == this) { return *this; }\n            std::copy(other.data, other.data + 100, data);\n            return *this;\n        }\n    \n        // Move constructor\n        MyResource(MyResource&& other) noexcept : data(other.data) {\n            other.data = nullptr;\n        }\n    \n        // Move assignment operator\n        MyResource& operator=(MyResource&& other) noexcept {\n            if (&other == this) { return *this; }\n            delete[] data;\n            data = other.data;\n            other.data = nullptr;\n            return *this;\n        }\n    \n    private:\n        int* data;\n    };\n    \n\nIn this example, MyResource is a class that manages a resource (an array of integers), so it defines all five special member functions for proper resource management and move semantics.",
+    "links": []
+  },
+  "WjHpueZDK-d3oDNMVZi9w": {
+    "title": "Multiple Inheritance",
+    "description": "Multiple inheritance is a feature in C++ where a class can inherit characteristics (data members and member functions) from more than one parent class. The concept is similar to single inheritance (where a class inherits from a single base class), but in multiple inheritance, a class can have multiple base classes.\n\nWhen a class inherits multiple base classes, it becomes a mixture of their properties and behaviors, and can override or extend them as needed.\n\nSyntax\n------\n\nHere is the syntax to declare a class with multiple inheritance:\n\n    class DerivedClass : access-specifier BaseClass1, access-specifier BaseClass2, ...\n    {\n        // class body\n    };\n    \n\nThe `DerivedClass` will inherit members from both `BaseClass1` and `BaseClass2`. The `access-specifier` (like `public`, `protected`, or `private`) determines the accessibility of the inherited members.\n\nExample\n-------\n\nHere is an example of multiple inheritance in action:\n\n    #include <iostream>\n    \n    // Base class 1\n    class Animal\n    {\n    public:\n        void eat()\n        {\n            std::cout << \"I can eat!\\n\";\n        }\n    };\n    \n    // Base class 2\n    class Mammal\n    {\n    public:\n        void breath()\n        {\n            std::cout << \"I can breathe!\\n\";\n        }\n    };\n    \n    // Derived class inheriting from both Animal and Mammal\n    class Dog : public Animal, public Mammal\n    {\n    public:\n        void bark()\n        {\n            std::cout << \"I can bark! Woof woof!\\n\";\n        }\n    };\n    \n    int main()\n    {\n        Dog myDog;\n    \n        // Calling members from both base classes\n        myDog.eat();\n        myDog.breath();\n        \n        // Calling a member from the derived class\n        myDog.bark();\n    \n        return 0;\n    }\n    \n\nNote\n----\n\nIn some cases, multiple inheritance can lead to complications such as ambiguity and the \"diamond problem\". Ensure that you use multiple inheritance judiciously and maintain well-structured and modular classes to prevent issues.\n\nFor more information on C++ multiple inheritance and related topics, refer to C++ documentation or a comprehensive C++ programming guide.",
+    "links": []
+  },
+  "b3-QYKNcW3LYCNOza3Olf": {
+    "title": "Object Oriented Programming",
+    "description": "Object-oriented programming (OOP) is a programming paradigm that uses objects, which are instances of classes, to perform operations and interact with each other. In C++, you can achieve OOP through the use of classes and objects.\n\nClasses\n-------\n\nA class is a blueprint for creating objects. It defines the structure (data members) and behavior (member functions) for a type of object. Here's an example of a simple class:\n\n    class Dog {\n    public:\n        std::string name;\n        int age;\n    \n        void bark() {\n            std::cout << name << \" barks!\\n\";\n        }\n    };\n    \n\nThis `Dog` class has two data members: `name` and `age`, and one member function `bark`. You can create an object of this class and access its members like this:\n\n    Dog myDog;\n    myDog.name = \"Fido\";\n    myDog.age = 3;\n    myDog.bark(); // Output: Fido barks!\n    \n\nEncapsulation\n-------------\n\nEncapsulation is the concept of bundling data and functions that operate on that data within a single unit, such as a class. It helps to hide the internal implementation details of a class and expose only the necessary information and functionalities. In C++, you can use access specifiers like `public`, `private`, and `protected` to control the visibility and accessibility of class members. For example:\n\n    class Dog {\n    private:\n        std::string name;\n        int age;\n    \n    public:\n        void setName(std::string n) {\n            name = n;\n        }\n    \n        void setAge(int a) {\n            age = a;\n        }\n    \n        void bark() {\n            std::cout << name << \" barks!\\n\";\n        }\n    };\n    \n\nIn this example, we've made the `name` and `age` data members `private` and added public member functions `setName` and `setAge` to modify them. This way, the internal data of the `Dog` class is protected and only accessible through the provided functions.\n\nInheritance\n-----------\n\nInheritance is the concept of deriving new classes from existing ones, which enables code reusability and organization. In C++, inheritance is achieved by using a colon `:` followed by the base class' access specifier and the base class name. For example:\n\n    class Animal {\n    public:\n        void breathe() {\n            std::cout << \"I can breathe\\n\";\n        }\n    };\n    \n    class Dog : public Animal {\n    public:\n        void bark() {\n            std::cout << \"Dog barks!\\n\";\n        }\n    };\n    \n\nIn this example, the `Dog` class inherits from the `Animal` class, so the `Dog` class can access the `breathe` function from the `Animal` class. When you create a `Dog` object, you can use both `breathe` and `bark` functions.\n\n    Dog myDog;\n    myDog.breathe(); // Output: I can breathe\n    myDog.bark(); // Output: Dog barks!\n    \n\nPolymorphism\n------------\n\nPolymorphism allows you to use a single interface to represent different types. In C++, it's mainly achieved using function overloading, virtual functions, and overriding. For example:\n\n    class Animal {\n    public:\n        virtual void makeSound() {\n            std::cout << \"The Animal makes a sound\\n\";\n        }\n    };\n    \n    class Dog : public Animal {\n    public:\n        void makeSound() override {\n            std::cout << \"Dog barks!\\n\";\n        }\n    };\n    \n    class Cat : public Animal {\n    public:\n        void makeSound() override {\n            std::cout << \"Cat meows!\\n\";\n        }\n    };\n    \n\nIn this example, we have an `Animal` base class with a virtual `makeSound` function. We then derive two classes, `Dog` and `Cat`, which override the `makeSound` function. This enables polymorphic behavior, where an `Animal` pointer or reference can be used to access the correct `makeSound` function depending on the derived class type.\n\n    Animal *animals[2] = {new Dog, new Cat};\n    animals[0]->makeSound(); // Output: Dog barks!\n    animals[1]->makeSound(); // Output: Cat meows!\n    \n\nThat's a brief overview of object-oriented programming concepts in C++.",
+    "links": []
+  },
+  "hNBErGNiegLsUJn_vgcOR": {
+    "title": "Virtual Methods",
+    "description": "Virtual functions enable runtime polymorphism in C++, allowing derived classes to override base class behavior. When called via a base pointer/reference, the _actual object's type_ determines which function is executed (dynamic dispatch). Non-virtual functions use compile-time resolution based on the pointer/reference type (static dispatch), which prevents overriding.\n\n    // Base class with virtual function\n    class Animal {\n    public:\n        virtual void speak() { std::cout << \"Generic sound\"; }\n    };\n    \n    // Derived class override\n    class Dog : public Animal {\n    public:\n        void speak() override { std::cout << \"Woof!\"; } // Dynamic dispatch\n    };\n    \n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "C++ Virtual Functions Documentation",
+        "url": "https://en.cppreference.com/w/cpp/language/virtual",
+        "type": "article"
+      },
+      {
+        "title": "GeeksforGeeks Virtual Functions Guide",
+        "url": "https://www.geeksforgeeks.org/virtual-function-cpp/",
+        "type": "article"
+      },
+      {
+        "title": "Virtual Functions Explained (YouTube)",
+        "url": "https://www.youtube.com/watch?v=oIV2KchSyGQ&ab_channel=TheCherno",
+        "type": "video"
+      }
+    ]
+  },
+  "s99ImazcwCgAESxZd8ksa": {
+    "title": "Virtual Tables",
+    "description": "",
+    "links": []
+  },
+  "7h1VivjCPDwriL7FirtFv": {
+    "title": "Dynamic Polymorphism",
+    "description": "Dynamic polymorphism is a programming concept in object-oriented languages like C++ where a derived class can override or redefine methods of its base class. This means that a single method call can have different implementations based on the type of object it is called on.\n\nDynamic polymorphism is achieved through **virtual functions**, which are member functions of a base class marked with the `virtual` keyword. When you specify a virtual function in a base class, it can be overridden in any derived class to provide a different implementation.\n\nExample\n-------\n\nHere's an example in C++ demonstrating dynamic polymorphism.\n\n    #include <iostream>\n    \n    // Base class\n    class Shape {\n    public:\n        virtual void draw() {\n            std::cout << \"Drawing a shape\\n\"; \n        }\n    };\n    \n    // Derived class 1\n    class Circle : public Shape {\n    public:\n        void draw() override {\n            std::cout << \"Drawing a circle\\n\"; \n        }\n    };\n    \n    // Derived class 2\n    class Rectangle : public Shape {\n    public:\n        void draw() override {\n            std::cout << \"Drawing a rectangle\\n\";\n        }\n    };\n    \n    int main() {\n        Shape* shape;\n        Circle circle;\n        Rectangle rectangle;\n    \n        // Storing the address of circle\n        shape = &circle;\n    \n        // Call circle draw function\n        shape->draw();\n    \n        // Storing the address of rectangle\n        shape = &rectangle;\n    \n        // Call rectangle draw function\n        shape->draw();\n    \n        return 0;\n    }\n    \n\nThis code defines a base class `Shape` with a virtual function `draw`. Two derived classes `Circle` and `Rectangle` both override the `draw` function to provide their own implementations. Then in the `main` function, a pointer of type `Shape` is used to call the respective `draw` functions of `Circle` and `Rectangle` objects. The output of this program will be:\n\n    Drawing a circle\n    Drawing a rectangle\n    \n\nAs you can see, using dynamic polymorphism, we can determine at runtime which `draw` method should be called based on the type of object being used.",
+    "links": []
+  },
+  "B2SGBENzUMl0SAjG4j91V": {
+    "title": "Exception Handling",
+    "description": "Exception handling in C++ is a mechanism to handle errors, anomalies, or unexpected events that can occur during the runtime execution of a program. This allows the program to continue running or exit gracefully when encountering errors instead of crashing abruptly.\n\nC++ provides a set of keywords and constructs for implementing exception handling:\n\n*   `try`: Defines a block of code that should be monitored for exceptions.\n*   `catch`: Specifies the type of exception to be caught and the block of code that shall be executed when that exception occurs.\n*   `throw`: Throws an exception that will be caught and handled by the appropriate catch block.\n*   `noexcept`: Specifies a function that doesn't throw exceptions or terminates the program if an exception is thrown within its scope.\n\nExample\n-------\n\nHere's an example demonstrating the basic usage of exception handling:\n\n    #include <iostream>\n    \n    int divide(int a, int b) {\n        if (b == 0) {\n            throw \"Division by zero!\";\n        }\n        return a / b;\n    }\n    \n    int main() {\n        int num1, num2;\n    \n        std::cout << \"Enter two numbers for division: \";\n        std::cin >> num1 >> num2;\n    \n        try {\n            int result = divide(num1, num2);\n            std::cout << \"The result is: \" << result << '\\n';\n        } catch (const char* msg) {\n            std::cerr << \"Error: \" << msg << '\\n';\n        }\n    \n        return 0;\n    }\n    \n\nIn this example, we define a function `divide` that throws an exception if `b` is zero. In the `main` function, we use a `try` block to call `divide` and output the result. If an exception is thrown, it is caught inside the `catch` block, which outputs an error message. This way, we can handle the error gracefully rather than letting the program crash when attempting to divide by zero.\n\nStandard Exceptions\n-------------------\n\nC++ provides a standard set of exception classes under the `<stdexcept>` library which can be used as the exception type for more specific error handling. Some of these classes include:\n\n*   `std::exception`: Base class for all standard exceptions.\n*   `std::logic_error`: Represents errors which can be detected statically by the program.\n*   `std::runtime_error`: Represents errors occurring during the execution of a program.\n\nHere's an example showing how to use standard exceptions:\n\n    #include <iostream>\n    #include <stdexcept>\n    \n    int divide(int a, int b) {\n        if (b == 0) {\n            throw std::runtime_error(\"Division by zero!\");\n        }\n        return a / b;\n    }\n    \n    int main() {\n        int num1, num2;\n    \n        std::cout << \"Enter two numbers for division: \";\n        std::cin >> num1 >> num2;\n    \n        try {\n            int result = divide(num1, num2);\n            std::cout << \"The result is: \" << result << '\\n';\n        } catch (const std::exception& e) {\n            std::cerr << \"Error: \" << e.what() << '\\n';\n        }\n    \n        return 0;\n    }\n    \n\nIn this example, we modified the `divide` function to throw a `std::runtime_error` instead of a simple string. The catch block now catches exceptions derived from `std::exception` and uses the member function `what()` to display the error message.",
+    "links": []
+  },
+  "oWygnpwHq2poXQMTTSCpl": {
+    "title": "Exit Codes",
+    "description": "Exit codes, also known as \"return codes\" or \"status codes\", are numeric values that a program returns to the calling environment (usually the operating system) when it finishes execution. These codes are used to indicate the success or failure of a program's execution.\n\n0 is the standard exit code for a successful execution, while non-zero exit codes typically indicate errors or other exceptional situations. The actual meanings of non-zero exit codes can vary between different applications or systems.\n\nIn C++, you can return an exit code from the `main` function by using the `return` statement, or you can use the `exit()` function, which is part of the C++ Standard Library.\n\nExample: Using return in `main`\n-------------------------------\n\n    #include <iostream>\n    \n    int main() {\n        // Some code here...\n    \n        if (/*some error condition*/) {\n            std::cout << \"An error occurred.\\n\";\n            return 1;\n        }\n    \n        // More code here...\n    \n        if (/*another error condition*/) {\n            std::cout << \"Another error occurred.\\n\";\n            return 2;\n        }\n    \n        return 0; // Successful execution\n    }\n    \n\nExample: Using the `exit()` function\n------------------------------------\n\n    #include <iostream>\n    #include <cstdlib>\n    \n    void some_function() {\n        // Some code here...\n    \n        if (/*some error condition*/) {\n            std::cout << \"An error occurred.\\n\";\n            std::exit(1);\n        }\n    \n        // More code here...\n    }\n    \n    int main() {\n        some_function();\n    \n        // Some other code here...\n    \n        return 0; // Successful execution\n    }\n    \n\nIn both examples above, the program returns exit codes depending on different error conditions encountered during execution. The codes 1 and 2 are used to distinguish between the two error conditions.",
+    "links": []
+  },
+  "NJud5SXBAUZ6Sr78kZ7jx": {
+    "title": "Exceptions",
+    "description": "Exception handling is a method used to tackle runtime errors so that normal flow of the program can be maintained. In C++, this is accomplished using three keywords: `try`, `catch`, and `throw`.\n\ntry { ... }\n-----------\n\nIn the `try` block, you write the code that can possibly generate an exception. If an exception is encountered, the control is passed to the relevant `catch` block to handle the issue.\n\nExample:\n\n    try {\n      // code that might throw an exception\n    }\n    \n\ncatch (...) { ... }\n-------------------\n\nThe `catch` block follows the `try` block and is responsible for handling the exceptions thrown by the `try` block. There can be multiple `catch` blocks to handle different types of exceptions.\n\nExample:\n\n    catch (int e) {\n      // handle exception of type int\n    }\n    catch (char e) {\n      // handle exception of type char\n    }\n    catch (...) {\n      // handle any other exception\n    }\n    \n\nthrow ... ;\n-----------\n\nIn case an error occurs within the `try` block, you can use the `throw` keyword to generate an exception of the specific type. This will then be caught and handled by the corresponding `catch` block.\n\nExample:\n\n    try {\n      int num1 = 10, num2 = 0;\n      if (num2 == 0) {\n        throw \"Division by zero not allowed!\";\n      } else {\n        int result = num1 / num2;\n        std::cout << \"Result: \" << result << '\\n';\n      }\n    }\n    catch (const char* e) {\n      std::cout << \"Error: \" << e << '\\n';\n    }\n    \n\nIn summary, exception handling in C++ is a technique to handle runtime errors while maintaining the normal flow of the program. The `try`, `catch`, and `throw` keywords are used together to create the structure to deal with exceptions as they occur.",
+    "links": []
+  },
+  "y4-P4UNC--rE1vni8HdTn": {
+    "title": "Access Violations",
+    "description": "An access violation is a specific type of error that occurs when a program attempts to access an illegal memory location. In C++, access violations are most commonly caused by:\n\n*   **Dereferencing a null or invalid pointer.**\n*   **Accessing an array out of bounds.**\n*   **Reading or writing to memory freed by the user or the operating system.**\n\nIt is crucial to identify access violations because they can lead to unpredictable behavior, application crashes, or corruption of data.\n\nSome examples of access violations are:\n\nDereferencing null or invalid pointer\n-------------------------------------\n\n    int *p = nullptr;\n    int x = *p;  // Access violation: trying to access null pointer's content\n    \n\nAccessing an array out of bounds\n--------------------------------\n\n    int arr[5] = {1, 2, 3, 4, 5};\n    int y = arr[5];  // Access violation: index out of bounds (valid indices are 0-4)\n    \n\nReading or writing to freed memory\n----------------------------------\n\n    int* p2 = new int[10];\n    delete[] p2;\n    p2[3] = 42;  // Access violation: writing to memory that has been freed\n    \n\n### Debugging Access Violations\n\nTools like _debuggers_, _static analyzers_, and _profilers_ can help identify access violations in your code. For example:\n\n*   **Microsoft Visual Studio**: Use the built-in debugger to identify the line of code responsible for the access violation error.\n    \n*   **Valgrind**: A popular Linux tool that detects memory leaks and access violations in your C++ programs.\n    \n*   **AddressSanitizer**: A runtime memory error detector for C++ that can detect out-of-bounds accesses, memory leaks, and use-after-free errors.",
+    "links": []
+  },
+  "-6fwJQOfsorgHkoQGp4T3": {
+    "title": "Language Concepts",
+    "description": "C++ is a powerful, high-level, object-oriented programming language that offers several key language concepts. These concepts provide the foundation upon which you can build efficient, reliable, and maintainable programs. Here's a brief summary of some important language concepts in C++.\n\nVariables and Data Types\n------------------------\n\nC++ provides various fundamental data types such as `int`, `float`, `double`, `char`, and `bool` to declare and manipulate variables in a program.\n\nExample:\n\n    int age = 25;\n    float height = 1.7f;\n    double salary = 50000.0;\n    char grade = 'A';\n    bool isEmployed = true;\n    \n\nControl Structures\n------------------\n\nControl structures enable you to control the flow of execution of a program. Key control structures in C++ include:\n\n*   Conditional statement: `if`, `else`, and `else if`\n*   Loop constructs: `for`, `while`, and `do-while`\n*   Switch-case construct\n\nExample:\n\n    // If-else statement\n    if (age > 18) {\n        std::cout << \"You are eligible to vote.\";\n    } else {\n        std::cout << \"You are not eligible to vote.\";\n    }\n    \n    // For loop\n    for (int i = 0; i < 5; i++) {\n        std::cout << \"Hello World!\";\n    }\n    \n\nFunctions\n---------\n\nFunctions in C++ allow you to break down a large program into small, manageable, and reusable pieces of code.\n\nExample:\n\n    int add(int a, int b) {\n        return a + b;\n    }\n    \n    int main() {\n        int sum = add(10, 20);\n        std::cout << \"The sum is: \" << sum;\n        return 0;\n    }\n    \n\nArrays and Vectors\n------------------\n\nArrays and Vectors are commonly used data structures to store and manipulate a collection of elements of the same datatype.\n\nExample:\n\n    // Array\n    int marks[] = {90, 80, 95, 85};\n    \n    // Vector\n    std::vector<int> scores = {10, 20, 30, 40};\n    \n\nPointers\n--------\n\nPointers are variables that store memory addresses of other variables. They enable more efficient handling of memory, and are useful for working with dynamic data structures.\n\nExample:\n\n    int num = 10;\n    int* p = &num; // p stores the address of num\n    \n\nStructures and Classes\n----------------------\n\nStructures and Classes are user-defined data types that allow grouping of variables and functions under a single name.\n\nExample:\n\n    // Structure\n    struct Student {\n        std::string name;\n        int age;\n    };\n    \n    // Class\n    class Employee {\n    public:\n        std::string name;\n        int age;\n        void displayInfo() {\n            std::cout << \"Name: \" << name << \"\\nAge: \" << age;\n        }\n    };\n    \n\nInheritance and Polymorphism\n----------------------------\n\nInheritance is a mechanism that allows a class to inherit properties and methods from a base class. Polymorphism enables you to use a base class type to represent derived class objects.\n\nExample:\n\n    class Base {\n    public:\n        void display() {\n            std::cout << \"This is the base class.\";\n        }\n    };\n    \n    class Derived : public Base {\n    public:\n        void display() {\n            std::cout << \"This is the derived class.\";\n        }\n    };\n    \n\nException Handling\n------------------\n\nC++ provides a mechanism to handle exceptions(runtime errors) gracefully using `try`, `catch`, and `throw` constructs.\n\nExample:\n\n    try {\n        // Code that might throw an exception\n        int result = a / b;\n    } catch (const exception &e) {\n        std::cout << \"Caught an exception: \" << e.what();\n    }\n    \n\nThese are some of the key language concepts in C++, which will help you to understand the language better and develop efficient and maintainable applications.",
+    "links": []
+  },
+  "CG01PTVgHtjfKvsJkJLGl": {
+    "title": "auto (Automatic Type Deduction)",
+    "description": "**Auto**\n\n`auto` is a keyword in C++ language introduced in C++11, which is used for automatic type deduction. It automatically deduces the type of a variable from the type of its initializer expression at compile time.\n\nThe `auto` keyword is useful when you are dealing with complex types or when the type of a variable is hard to predict. It can help in writing cleaner and less error-prone code.\n\nHere's a simple example of using `auto` for type deduction:\n\n    #include <iostream>\n    #include <vector>\n    \n    int main() {\n        // Traditional way of declaring a variable:\n        int myInt = 5;\n    \n        // Using auto for type deduction:\n        auto myAutoInt = 5; // Automatically deduces the type as 'int'\n    \n        // Example with more complex types:\n        std::vector<int> myVector = {1, 2, 3, 4, 5};\n    \n        // Without auto, iterating the vector would look like this:\n        for (std::vector<int>::iterator it = myVector.begin(); it != myVector.end(); ++it) {\n            std::cout << *it << '\\n';\n        }\n    \n        // With auto, the iterator declaration becomes simpler:\n        for (auto it = myVector.begin(); it != myVector.end(); ++it) {\n            std::cout << *it << '\\n';\n        }\n    }\n    \n\nKeep in mind that `auto` deduces the type based on the initializer expression, so if you don't provide an initial value, you will get a compile-time error:\n\n    auto myVar; // Error: Cannot deduce the type without initializer\n    \n\nIn C++14, you can also use `auto` with function return types to let the compiler automatically deduce the return type based on the returned expression:\n\n    auto add(int x, int y) {\n        return x + y; // The compiler deduces the return type as 'int'\n    }",
+    "links": []
+  },
+  "PiMhw1oP9-NZEa6I9u4lX": {
+    "title": "Type Casting",
+    "description": "Type casting is the process of converting a value from one data type to another. In C++, there are four different methods of type casting:\n\n*   **C-style casting**: It is the syntax inherited from C, and it is done by simply putting the target data type in parentheses before the value to cast. Example:\n    \n        int a = 10;\n        float b = (float)a;  // C-style cast from int to float\n        \n    \n*   **`static_cast`**: This is the most commonly used method for type casting in C++. It is performed at compile time, and you should use it when you have an explicit conversion between data types. Example:\n    \n        int a = 10;\n        float b = static_cast<float>(a);  // static_cast from int to float\n        \n    \n*   **`dynamic_cast`**: This method is specifically used for safely converting pointers and references between base and derived classes in a class hierarchy. Example:\n    \n        class Base {};\n        class Derived : public Base {};\n        \n        Base* base_ptr = new Derived();\n        Derived* derived_ptr = dynamic_cast<Derived*>(base_ptr);  // dynamic_cast from Base* to Derived*\n        \n    \n*   **`reinterpret_cast`**: This cast changes the type of a pointer, reference, or an integer value. It is also called a bitwise cast because it changes how the compiler interprets the underlying bits. Use `reinterpret_cast` only when you have a deep understanding of what you're doing, as it does not guarantee that the resulting value will be meaningful. Example:\n    \n        int* a = new int(42);\n        long b = reinterpret_cast<long>(a);  // reinterpret_cast from int* to long\n        \n    \n*   **`const_cast`**: This casting method is used to remove the `const` qualifier from a variable. It is generally not recommended, but can be useful in certain situations where you have no control over the constness of a variable. Example:\n    \n        const int a = 10;\n        int* ptr = const_cast<int*>(&a);  // const_cast from const int* to int*\n        *ptr = 20;  // Not recommended, use with caution\n        \n    \n\nRemember to use the right type of casting based on the specific situation and follow good programming practices in order to ensure a safe and efficient code.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Casting in C++",
+        "url": "https://youtu.be/pWZS1MtxI-A",
+        "type": "video"
+      }
+    ]
+  },
+  "_XB2Imyf23-6AOeoNLhYQ": {
+    "title": "static_cast",
+    "description": "`static_cast` is one of the casting operators in C++ that allows you to convert between different data types, such as integer and float, or between pointer types. This type of cast performs a compile-time check and gives an error if there is no valid conversion possible between given types. `static_cast` is generally safer than C-style casts since it does not perform an unsafe reinterpretation of data and allows for better type checking.\n\nSyntax\n------\n\nThe syntax for `static_cast` is as follows:\n\n    static_cast<new_type>(expression)\n    \n\nExamples\n--------\n\n*   Converting between basic data types:\n\n    int i = 42;\n    float f = static_cast<float>(i); // Converts integer i to float f\n    \n\n*   Casting pointers of different object types in an inheritance hierarchy:\n\n    class Base { /* ... */ };\n    class Derived : public Base { /* ... */ };\n    \n    Base *bPtr = new Derived;\n    Derived *dPtr = static_cast<Derived *>(bPtr); // Converts Base pointer bPtr to Derived pointer dPtr\n    \n\n*   Converting an integer to an enumeration:\n\n    enum Color { RED, GREEN, BLUE };\n    int value = 1;\n    Color color = static_cast<Color>(value); // Converts integer value to corresponding Color enumeration\n    \n\nKeep in mind that `static_cast` should be used with caution when casting pointers between different object types. If the original type of the pointer does not match the target type, the result of the cast can be incorrect or cause unexpected behavior.",
+    "links": []
+  },
+  "5g22glc97siQOcTkHbwan": {
+    "title": "const_cast",
+    "description": "`const_cast` is a type of casting in C++ that allows you to remove or add constness to a variable. In other words, it enables you to modify a `const` or `volatile` object, or change a pointer or reference to a `const` or `volatile` type. This is useful in certain scenarios when you need to pass a `const` variable as an argument or when a function parameter requires a non-const type, but you want to make sure the variable remains constant throughout the code.\n\nKeep in mind that using `const_cast` to modify a truly `const` variable can lead to undefined behavior, so it is best to use this feature only when absolutely necessary.\n\nExample\n-------\n\nHere's a code example showing how to use `const_cast`:\n\n    #include <cassert>\n    #include <iostream>\n    \n    void modifyVariable(int* ptr) {\n        *ptr = 42;\n    }\n    \n    int main() {\n        const int original_value = 10;\n        int* non_const_value_ptr = const_cast<int*>(&original_value);\n        std::cout << \"Original value: \" << original_value << '\\n';\n    \n        modifyVariable(non_const_value_ptr);\n        std::cout << \"Modified value: \" << *non_const_value_ptr << \", original_value: \" << original_value << '\\n';\n    \n        assert(non_const_value_ptr == &original_value);\n    \n        return 0;\n    }\n    \n    \n\nIn this example, we first create a `const` variable, `original_value`. Then we use `const_cast` to remove the constness of the variable and assign it to a non-const pointer, `non_const_value_ptr`. The `modifyVariable` function takes an `int*` as an argument and modifies the value pointed to by the pointer, which would not have been possible if we passed the original `const int` directly. Finally, we print the `original_value` and the `*non_const_value_ptr`, which shows that the value has been modified using `const_cast`.\n\nPlease note that this example comes with some risks, as it touches undefined behavior. \\*/",
+    "links": []
+  },
+  "4BdFcuQ5KNW94cu2jz-vE": {
+    "title": "dynamic_cast",
+    "description": "`dynamic_cast` is a type of casting operator in C++ that is used specifically for polymorphism. It safely converts pointers and references of a base class to its derived class and checks the validity of the conversion during runtime. If the conversion is not valid (i.e., the object is not of the target type), it returns a null pointer instead of producing undefined behavior. Therefore, `dynamic_cast` can prevent potential crashes and errors when using polymorphism.\n\nHere is a basic example of how `dynamic_cast` can be used:\n\n    #include <iostream>\n    \n    class BaseClass {\n       public:\n        virtual void display() {\n            std::cout << \"BaseClass\\n\";\n        }\n    };\n    \n    class DerivedClass : public BaseClass {\n       public:\n        void display() {\n            std::cout << \"DerivedClass\\n\";\n        }\n    };\n    \n    int main() {\n        BaseClass *basePtr = new DerivedClass();  // Upcasting\n        DerivedClass *derivedPtr;\n    \n        derivedPtr = dynamic_cast<DerivedClass *>(basePtr);  // Downcasting\n        if (derivedPtr) {\n            derivedPtr->display();  // Output: DerivedClass\n        } else {\n            std::cout << \"Invalid type conversion.\";\n        }\n    \n        delete basePtr;\n        return 0;\n    }\n    \n\nIn this example, a pointer to a `DerivedClass` object is assigned to a `BaseClass` pointer (`basePtr`). Then, we attempt to downcast it back to a `DerivedClass` pointer using `dynamic_cast`. If the casting is successful, we can access the `DerivedClass` functionality through the new pointer (`derivedPtr`).",
+    "links": []
+  },
+  "ZMyFDJrpCauGrY5NZkOwg": {
+    "title": "reinterpret_cast",
+    "description": "`reinterpret_cast` is a type of casting in C++ that allows you to change the type of a pointer or an integer without altering the representation of the data. It is generally used when the conversion required is too low-level or not supported by other casting methods, such as `static_cast`.\n\nUsing `reinterpret_cast` should be handled with care, as it can lead to undefined behavior and severe problems if used incorrectly.\n\nHere's an example of usage:\n\n    #include <iostream>\n    \n    int main() {\n        int num = 42;\n        int *num_ptr = &num;\n    \n        // Disguise the integer pointer as a char pointer\n        char *char_ptr = reinterpret_cast<char *>(num_ptr);\n    \n        for (size_t i = 0; i < sizeof(int); ++i) {\n            // Print the individual bytes of the integer as characters\n            std::cout << \"Byte \" << i << \": \" << char_ptr[i] << '\\n';\n        }\n    \n        return 0;\n    }\n    \n\nIn this example, we're using `reinterpret_cast` to change the type of a pointer from `int *` to `char *`, effectively treating the integer as an array of characters and printing each byte.\n\nRemember that when using `reinterpret_cast`, you should be cautious about dereferencing the converted pointers. The behavior can be unpredictable, and it can lead to issues, such as accessing memory regions that are not intended to be accessed. `reinterpret_cast` should be used sparingly and only when a low-level conversion is necessary.",
+    "links": []
+  },
+  "IDOlquv6jlfecwQoBwkGZ": {
+    "title": "Undefined Behavior (UB)",
+    "description": "**Undefined Behavior**\n----------------------\n\nUndefined behavior in C++ refers to a situation where a program's behavior cannot be predicted due to any violation of the language rules. It is a result of various factors like uninitialized variables, using pointers to deallocated memory, out-of-bounds memory access, etc. The C++ standard does not define the behavior in such cases, which means the compiler or the runtime system is free to handle these situations in any way it wants.\n\nSome common examples of Undefined Behavior are:\n\n*   **Uninitialized Variables**: Accessing the value of an uninitialized variable can lead to undefined behavior. The value of an uninitialized variable is arbitrary and depends on what was in the memory location before the variable was declared.\n    \n        int x;\n        int y = x + 5; // Undefined behavior since x is uninitialized\n        \n    \n*   **Out-of-bounds Memory Access**: Accessing memory outside the boundaries of an array or buffer may result in undefined behavior.\n    \n        int arr[5];\n        int val = arr[5]; // Undefined behavior since the valid indices are 0 to 4\n        \n    \n*   **Null Pointer Dereference**: Dereferencing a null pointer may lead to undefined behavior.\n    \n        int *ptr = nullptr;\n        int val = *ptr; // Undefined behavior since ptr is a null pointer\n        \n    \n*   **Division by Zero**: Performing a division operation by zero is undefined behavior in C++.\n    \n        int x = 5;\n        int y = 0;\n        int z = x / y; // Undefined behavior since division by zero is not allowed\n        \n    \n\nIt is crucial to detect and fix the root cause of undefined behavior in your programs since it can lead to unpredictable results, data corruption, and security vulnerabilities. To mitigate undefined behavior, you can utilize tools like static code analyzers, dynamic analysis tools, and compiler options that help detect potential issues.",
+    "links": []
+  },
+  "YSWN7nS8vA9nMldSUrZRT": {
+    "title": "Argument Dependent Lookup (ADL)",
+    "description": "Argument Dependent Lookup (ADL) or Koenig Lookup is a mechanism in C++ that allows the compiler to search for the appropriate function to call based on the types of arguments provided. It is particularly helpful when using overloaded functions or operators in a namespace.\n\nADL allows the compiler to find functions in the same namespace as the arguments, even if the function is not declared at the point of use or within the namespace provided. This is especially useful when working with templates or generic programming.\n\nExample\n-------\n\nConsider the following example using a namespace and overloaded `operator<<()`:\n\n    namespace MyNamespace {\n        class MyClass {\n        public:\n            int value;\n        };\n    \n        std::ostream& operator<<(std::ostream& os, const MyClass& obj) {\n            os << \"MyClass: \" << obj.value;\n            return os;\n        }\n    }\n    \n    int main() {\n        MyNamespace::MyClass obj;\n        obj.value = 42;\n        using std::cout; // Required to use 'cout' without fully qualifying it.\n        cout << obj << '\\n'; // ADL is used to find the correct overloaded 'operator<<'.\n    }\n    \n\nIn this example, when you call `cout << obj;` in `main()`, ADL is used to find the correct `operator<<()` in the `MyNamespace` namespace because the argument `obj` is of type `MyNamespace::MyClass`.",
+    "links": []
+  },
+  "Lt7ss59KZw9Jwqj234jm2": {
+    "title": "Name Mangling",
+    "description": "Name mangling, also known as name decoration, is a technique used by compilers to encode additional information about the scope, type, linkage, or other identifying information of an identifier (function names, variable names, etc.) within its name. The primary purpose of name mangling is to support function overloading, which allows multiple functions with the same name but different parameter lists to coexist in a single program.\n\nIn C++, the compiler generates a mangled name for each function and variable based on their scopes and types. The mangled name is usually formed by concatenating the original name, parameter types, and other information, often using a prefix or suffix.\n\nFor example, suppose you have the following function:\n\n    int add(int a, int b)\n    {\n        return a + b;\n    }\n    \n\nThe compiler might generate a mangled name such as `_Z3addii`, which encodes the function name `add` and its two `int` parameters.\n\nThe exact rules for name mangling are implementation and platform dependent. Different compilers may mangle names differently, which can lead to incompatibilities when attempting to link together object files or libraries compiled with different compilers.\n\nSome tools, such as c++filt (included in GCC and Clang), can be used to demangle a mangled name back to the original identifier, which can be useful when debugging or working with symbol tables.\n\n    $ echo \"_Z3addii\" | c++filt\n    add(int, int)\n    \n\nIn general, it is not necessary for you to understand the details of name mangling when writing code in C++, as the compiler handles it automatically. However, it can affect program behavior in some cases, such as when using external libraries or linking object files from different compilers.",
+    "links": []
+  },
+  "zKdlfZTRHwjtmRUGW9z9-": {
+    "title": "Macros",
+    "description": "Macros are preprocessing directives in C++ used by the preprocessor to perform text substitution. They are defined using the `#define` directive, followed by the macro name and the value to be substituted.\n\nMacros can be used to define constants, create function-like macros, or perform conditional compilation.\n\nConstant Macros\n---------------\n\nConstant macros are used to define symbolic constants for use in code. They do not use any memory and are replaced by the preprocessor before the compilation process.\n\nExample:\n\n    #define PI 3.14159\n    \n\nThis macro defines a symbolic constant `PI`. You can use it in your code as if it were a regular variable.\n\n    double circumference = 2 * PI * radius;\n    \n\nFunction-like Macros\n--------------------\n\nFunction-like macros are similar to regular functions. They take a list of arguments and perform text substitution.\n\nExample:\n\n    #define SQUARE(x) ((x) * (x))\n    \n\nThis macro defines a function-like macro `SQUARE` that calculates the square of a number.\n\n    int square_of_five = SQUARE(5); // expands to ((5) * (5))\n    \n\nConditional Compilation\n-----------------------\n\nMacros can be used for conditional compilation using the `#ifdef`, `#ifndef`, `#if`, `#else`, `#elif`, and `#endif` directives.\n\nExample:\n\n    #define DEBUG_MODE\n    \n    #ifdef DEBUG_MODE\n      // Code to be compiled only in debug mode\n    #else\n      // Code to be compiled only if DEBUG_MODE is not defined\n    #endif\n    \n\nThis example demonstrates how you can use macros to control the parts of code that are being compiled, depending on the presence or absence of a macro definition.",
+    "links": []
+  },
+  "DHdNBP7_ixjr6h-dIQ7g6": {
+    "title": "Standard Library + STL",
+    "description": "The C++ Standard Template Library (STL) is a collection of header files that provide several data structures, algorithms, and functions to simplify your C++ coding experience. The primary purpose of the STL is to save time and increase efficiency by providing a ready-to-use set of useful tools. The most commonly used features of the STL can be divided into three main categories: containers, algorithms, and iterators.\n\nContainers\n----------\n\nContainers are the data structures used for data storage and manipulation in C++. They are classified into four types: sequence containers, associative containers, unordered associative containers, and container adaptors.\n\n*   **Sequence Containers**: These are linear data structures that store elements in a sequential manner. Examples include:\n    \n    *   `std::vector`: A dynamic array that grows and shrinks at runtime.\n        \n            std::vector<int> my_vector;\n            \n        \n    *   `std::list`: A doubly linked list.\n        \n            std::list<int> my_list;\n            \n        \n    *   `std::deque`: A double-ended queue allowing insertion and deletion at both ends.\n        \n            std::deque<int> my_deque;\n            \n        \n*   **Associative Containers**: These containers store data in a sorted manner with unique keys. Examples include:\n    \n    *   `std::set`: A collection of unique elements sorted by keys.\n        \n            std::set<int> my_set;\n            \n        \n    *   `std::map`: A collection of key-value pairs sorted by keys.\n        \n            std::map<std::string, int> my_map;\n            \n        \n*   **Unordered Associative Containers**: These containers store data in an unordered manner using hash tables. Examples include:\n    \n    *   `std::unordered_set`: A collection of unique elements in no specific order.\n        \n            std::unordered_set<int> my_unordered_set;\n            \n        \n    *   `std::unordered_map`: A collection of key-value pairs in no specific order.\n        \n            std::unordered_map<std::string, int> my_unordered_map;\n            \n        \n*   **Container Adaptors**: These are containers based on other existing containers. Examples include:\n    \n    *   `std::stack`: A LIFO data structure based on deque or list.\n        \n            std::stack<int> my_stack;\n            \n        \n    *   `std::queue`: A FIFO data structure based on deque or list.\n        \n            std::queue<int> my_queue;\n            \n        \n    *   `std::priority_queue`: A sorted queue based on vector or deque.\n        \n            std::priority_queue<int> my_priority_queue;\n            \n        \n\nAlgorithms\n----------\n\nThe STL provides several generic algorithms that can be used to perform various operations on the data stored in containers. They are divided into five categories: non-modifying sequence algorithms, modifying sequence algorithms, sorting algorithms, sorted range algorithms, and numeric algorithms.\n\nSome examples include `std::find`, `std::replace`, `std::sort`, and `std::binary_search`.\n\nFor example, to sort a vector, you can use the following code:\n\n    std::vector<int> my_vec = {4, 2, 5, 1, 3};\n    std::sort(my_vec.begin(), my_vec.end());\n    \n\nIterators\n---------\n\nIterators are a fundamental concept in the STL, as they provide a unified way to access elements in containers. Iterators can be thought of as an advanced form of pointers.\n\nEach container has its own iterator type, which can be used to traverse elements and modify values. The most common iterator operations are `begin()` and `end()` for getting iterators pointing to the first and one past the last element of a container, respectively.\n\nFor example, to iterate through a vector and print its elements, you can use the following code:\n\n    std::vector<int> my_vec = {1, 2, 3, 4, 5};\n    for (auto it = my_vec.begin(); it != my_vec.end(); ++it) {\n        std::cout << *it << \" \";\n    }\n    \n\nThis is just a brief overview of the C++ Standard Template Library. There are many other features and functions available in the STL, and familiarizing yourself with them is crucial for efficient C++ programming.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Mastering STL in C++23: New Features, Updates, and Best Practices",
+        "url": "https://simplifycpp.org/books/Mastering_STL.pdf",
+        "type": "article"
+      },
+      {
+        "title": "C++ Standard Template Library (STL) Short Overview",
+        "url": "https://www.youtube.com/watch?v=Id6ZEb_Lg58",
+        "type": "video"
+      }
+    ]
+  },
+  "Ebu8gzbyyXEeJryeE0SpG": {
+    "title": "Iterators",
+    "description": "Iterators are objects in the C++ Standard Library (`STL`) that help us traverse containers like arrays, lists, and vectors. Essentially, they act as a bridge between container classes and algorithms. Iterators behave similar to pointers but provide a more generalized and abstract way of accessing elements in a container.\n\nThere are different types of iterators which you would encounter depending on their use cases:\n\n*   **Input Iterator**: Used to read elements in a container only once, in a forward direction. They cannot modify elements.\n\nExample:\n\n    std::vector<int> nums = {1, 2, 3, 4};\n    std::istream_iterator<int> input(std::cin);\n    std::copy(input, std::istream_iterator<int>(), std::back_inserter(nums));\n    \n\n*   **Output Iterator**: Used to write elements in a container only once, in a forward direction. They cannot re-write elements.\n\nExample:\n\n    std::vector<int> nums = {1, 2, 3, 4};\n    std::ostream_iterator<int> output(std::cout, \", \");\n    std::copy(nums.begin(), nums.end(), output);\n    \n\n*   **Forward Iterator**: Similar to input iterators but can be used for multiple passes over the elements in a container. They cannot move backward.\n\nExample:\n\n    std::forward_list<int> nums = {1, 2, 3, 4};\n    std::forward_list<int>::iterator itr = nums.begin();\n    while (itr != nums.end()) {\n        std::cout << *itr << \" \";\n        ++itr;\n    }\n    \n\n**Reverse Iterator**: Similar to input iterators but can be used for multiple passes over the elements in a container. They cannot move forward.\n\nExample:\n\n    std::list<int> nums = {1, 2, 3, 4};\n    std::list<int>::reverse_iterator itr = nums.rbegin();\n    while (itr != nums.rend()) {\n        std::cout << *itr << \" \";\n        ++itr;\n    }\n    \n\n*   **Bidirectional Iterator**: These iterators offer the ability to move both forward and backward in a container. List and set containers have bi-directional iterators.\n\nExample:\n\n    std::list<int> nums = {1, 2, 3, 4};\n    std::list<int>::iterator itr;\n    for (itr = nums.begin(); itr != nums.end(); ++itr) {\n        std::cout << *itr << \" \";\n    }\n    for (--itr; itr != nums.begin(); --itr) {\n        std::cout << *itr << \" \";\n    }\n    \n\n*   **Random Access Iterator**: These iterators provide the most flexible ways to access elements in a container. They can move forwards, backwards, jump directly to other elements, and access elements at a given index.\n\nExample:\n\n    std::vector<int> nums = {1, 2, 3, 4};\n    std::vector<int>::iterator itr;\n    for (itr = nums.begin(); itr != nums.end(); ++itr) {\n        std::cout << *itr << \" \";\n    }\n    for (itr -= 1; itr != nums.begin() - 1; --itr) {\n        std::cout << *itr << \" \";\n    }\n    \n\nFor most cases, you would want to start with the `auto` keyword and the appropriate container methods (like `begin()` and `end()`) to work with iterators.\n\nExample:\n\n    std::vector<int> nums = {1, 2, 3, 4};\n    for (auto itr = nums.begin(); itr != nums.end(); ++itr) {\n        std::cout << *itr << \" \";\n    }\n    \n\nWhen working with algorithms, remember that the C++ Standard Library provides various algorithms that already utilize iterators for tasks like searching, sorting, and manipulating elements.",
+    "links": []
+  },
+  "VeVxZ230xkesQsIDig8zQ": {
+    "title": "iostream",
+    "description": "`iostream` is a header in the C++ Standard Library that provides functionality for basic input and output (I/O) operations. The I/O streams facilitate communication between your program and various sources, such as the console, files, or other programs.\n\n`iostream` includes the following classes:\n\n*   `istream`: for input operations from an input source.\n*   `ostream`: for output operations to an output target.\n*   `iostream`: a combination of `istream` and `ostream` for both input and output operations.\n\nThese classes inherit from base classes `ios` and `ios_base`.\n\nAdditionally, `iostream` defines several objects that are instances of these classes and represent the standard input and output streams:\n\n*   `cin`: an `istream` object to read from the standard input, typically corresponding to the keyboard.\n*   `cout`: an `ostream` object to write to the standard output, typically the console.\n*   `cerr`: an `ostream` object to write to the standard error output, typically used for displaying error messages.\n*   `clog`: an `ostream` object, similar to `cerr`, but its output can be buffered.\n\nHere are some code examples on using `iostream` for input and output operations:\n\n    #include <iostream>\n    \n    int main() {\n        int a;\n        std::cout << \"Enter a number: \";\n        std::cin >> a;\n        std::cout << \"You entered: \" << a << '\\n';\n        return 0;\n    }\n    \n\n    #include <iostream>\n    \n    int main() {\n        std::cerr << \"An error occurred.\\n\";\n        std::clog << \"Logging information.\\n\";\n        return 0;\n    }\n    \n\nRemember to include the `iostream` header when using these features:\n\n    #include <iostream>",
+    "links": []
+  },
+  "whyj6Z4RXFsVQYRfYYn7B": {
+    "title": "Algorithms",
+    "description": "The Standard Template Library (STL) in C++ provides a collection of generic algorithms that are designed to work with various container classes. These algorithms are implemented as functions and can be applied to different data structures, such as arrays, vectors, lists, and others. The primary header file for algorithms is `<algorithm>`.\n\nKey Concepts\n------------\n\nSorting\n-------\n\nSorting refers to arranging a sequence of elements in a specific order. The STL provides several sorting algorithms, such as `std::sort`, `std::stable_sort`, and `std::partial_sort`.\n\n### std::sort\n\n`std::sort` is used to sort a range of elements \\[first, last) in non-descending order (by default). You can also use custom comparison functions or lambda expressions to change the sorting order.\n\nExample:\n\n    #include <algorithm>\n    #include <vector>\n    #include <iostream>\n    \n    int main() {\n        std::vector<int> nums = {10, 9, 8, 7, 6, 5};\n        std::sort(nums.begin(), nums.end());\n    \n        for (int num : nums) {\n            std::cout << num << ' ';\n        }\n        // Output: 5 6 7 8 9 10\n    }\n    \n\nSearching\n---------\n\nSearching refers to finding if a particular element is present within a given range of elements. STL provides various searching algorithms, such as `std::find`, `std::binary_search`, and `std::find_if`.\n\n### std::find\n\n`std::find` is used to find the iterator of the first occurrence of a given value within the range \\[first, last).\n\nExample:\n\n    #include <algorithm>\n    #include <vector>\n    #include <iostream>\n    \n    int main() {\n        std::vector<int> nums = {5, 6, 7, 8, 9, 10};\n        auto it = std::find(nums.begin(), nums.end(), 9);\n    \n        if (it != nums.end()) {\n            std::cout << \"Found 9 at position: \" << (it - nums.begin());\n        } else {\n            std::cout << \"9 not found\";\n        }\n        // Output: Found 9 at position: 4\n    }\n    \n\nModifying Sequences\n-------------------\n\nThe STL also provides algorithms for modifying sequences, such as `std::remove`, `std::replace`, and `std::unique`.\n\n### std::remove\n\n`std::remove` is used to remove all instances of a value from a container within the given range \\[first, last). Note that the function does not resize the container after removing elements.\n\nExample:\n\n    #include <algorithm>\n    #include <vector>\n    #include <iostream>\n    \n    int main() {\n        std::vector<int> nums = {5, 6, 7, 6, 8, 6, 9, 6, 10};\n        nums.erase(std::remove(nums.begin(), nums.end(), 6), nums.end());\n    \n        for (int num : nums) {\n            std::cout << num << ' ';\n        }\n        // Output: 5 7 8 9 10\n    }\n    \n\nSummary\n-------\n\nSTL algorithms in C++ provide a set of useful functions for key operations such as sorting, searching, and modifying sequences. The algorithms can be used with a variety of container classes, making them highly versatile and an essential part of C++ programming.",
+    "links": []
+  },
+  "yGvE6eHKlPMBB6rde0llR": {
+    "title": "Date / Time",
+    "description": "In C++, you can work with dates and times using the `chrono` library, which is part of the Standard Library (STL). The `chrono` library provides various data types and functions to represent and manipulate time durations, time points, and clocks.\n\nDuration\n--------\n\nA `duration` represents a span of time, which can be expressed in various units such as seconds, minutes, hours, etc. To create a duration, use the `std::chrono::duration` template class. Common predefined duration types are:\n\n*   `std::chrono::seconds`\n*   `std::chrono::minutes`\n*   `std::chrono::hours`\n\n**Example:**\n\n    #include <iostream>\n    #include <chrono>\n    \n    int main() {\n        std::chrono::seconds sec(5);\n        std::chrono::minutes min(2);\n        std::chrono::hours hr(1);\n        return 0;\n    }\n    \n\nTime Point\n----------\n\nA `time_point` represents a specific point in time. It is usually created using a combination of duration and a clock. In C++, there are three clock types provided by the `chrono` library:\n\n*   `std::chrono::system_clock`: Represents the system-wide real time wall clock.\n*   `std::chrono::steady_clock`: Represents a monotonic clock that is guaranteed to never be adjusted.\n*   `std::chrono::high_resolution_clock`: Represents the clock with the shortest tick period.\n\n**Example:**\n\n    #include <iostream>\n    #include <chrono>\n    \n    int main() {\n        std::chrono::system_clock::time_point tp = std::chrono::system_clock::now();\n        return 0;\n    }\n    \n\nClock\n-----\n\nA clock provides access to the current time. It consists of the following elements:\n\n*   `time_point`: A specific point in time.\n*   `duration`: The time duration between two time points.\n*   `now()`: A static function that returns the current time point.\n\n**Example:**\n\n    #include <iostream>\n    #include <chrono>\n    \n    int main() {\n        // Get the current time_point using system_clock\n        std::chrono::system_clock::time_point now = std::chrono::system_clock::now();\n    \n        // Get the time_point 1 hour from now\n        std::chrono::system_clock::time_point one_hour_from_now = now + std::chrono::hours(1);\n        return 0;\n    }\n    \n\nConverting Time Points to Calendar Time\n---------------------------------------\n\nTo convert a time point to calendar representation, you can use the `std::chrono::system_clock::to_time_t` function.\n\n**Example:**\n\n    #include <iostream>\n    #include <chrono>\n    #include <ctime>\n    \n    int main() {\n        std::chrono::system_clock::time_point now = std::chrono::system_clock::now();\n        std::time_t now_c = std::chrono::system_clock::to_time_t(now);\n        std::cout << \"Current time: \" << std::ctime(&now_c) << '\\n';\n        return 0;\n    }\n    \n\nThis summarizes the basic functionality of working with date and time in C++ using the `chrono` library. You can find more advanced features, such as casting durations and time arithmetic, in the [C++ reference](https://en.cppreference.com/w/cpp/chrono).",
+    "links": []
+  },
+  "OXQUPqxzs1-giAACwl3X1": {
+    "title": "Multithreading",
+    "description": "Multithreading is the concurrent execution of multiple threads within a single process or program. It improves the performance and efficiency of an application by allowing multiple tasks to be executed in parallel.\n\nIn C++, multithreading support is available through the `thread` library introduced in the C++11 standard.\n\nBasic Thread Creation\n---------------------\n\nTo create a new thread, include the `<thread>` header file and create an instance of `std::thread` that takes a function as an argument. The function will be executed in a new thread.\n\n    #include <iostream>\n    #include <thread>\n    \n    void my_function() {\n        std::cout << \"This function is executing in a separate thread\\n\";\n    }\n    \n    int main() {\n        std::thread t(my_function);\n        t.join(); // waits for the thread to complete\n        return 0;\n    }\n    \n\nThread with Arguments\n---------------------\n\nYou can pass arguments to the thread function by providing them as additional arguments to the `std::thread` constructor.\n\n    #include <iostream>\n    #include <thread>\n    \n    void print_sum(int a, int b) {\n        std::cout << \"The sum is: \" << a + b << '\\n';\n    }\n    \n    int main() {\n        std::thread t(print_sum, 3, 5);\n        t.join();\n        return 0;\n    }\n    \n\nMutex and Locks\n---------------\n\nWhen multiple threads access shared resources, there is a possibility of a data race. To avoid this, use mutex and locks to synchronize shared resource access.\n\n    #include <iostream>\n    #include <mutex>\n    #include <thread>\n    \n    std::mutex mtx;\n    \n    void print_block(int n, char c) {\n        {\n            std::unique_lock<std::mutex> locker(mtx);\n            for (int i = 0; i < n; ++i) {\n                std::cout << c;\n            }\n            std::cout << '\\n';\n        }\n    }\n    \n    int main() {\n        std::thread t1(print_block, 50, '*');\n        std::thread t2(print_block, 50, '$');\n    \n        t1.join();\n        t2.join();\n    \n        return 0;\n    }\n    \n\nThis short introduction should help you get started with basic multithreading techniques in C++. There is a lot more to learn, such as thread pools, condition variables, and atomic operations for advanced synchronization and performance tuning.",
+    "links": []
+  },
+  "1pydf-SR0QUfVNuBEyvzc": {
+    "title": "Containers",
+    "description": "C++ Containers are a part of the Standard Template Library (STL) that provide data structures to store and organize data. There are several types of containers, each with its own characteristics and use cases. Here, we discuss some of the commonly used containers:\n\n1\\. Vector\n----------\n\nVectors are dynamic arrays that can resize themselves as needed. They store elements in a contiguous memory location, allowing fast random access using indices.\n\nExample\n-------\n\n    #include <iostream>\n    #include <vector>\n    \n    int main() {\n        std::vector<int> vec = {1, 2, 3, 4, 5};\n    \n        vec.push_back(6); // Add an element to the end\n    \n        std::cout << \"Vector contains:\";\n        for (int x : vec) {\n            std::cout << ' ' << x;\n        }\n        std::cout << '\\n';\n    }\n    \n\n2\\. List\n--------\n\nA list is a doubly-linked list that allows elements to be inserted or removed from any position in constant time. It does not support random access. Lists are better than vectors for scenarios where you need to insert or remove elements in the middle frequently.\n\nExample\n-------\n\n    #include <iostream>\n    #include <list>\n    \n    int main() {\n        std::list<int> lst = {1, 2, 3, 4, 5};\n    \n        lst.push_back(6); // Add an element to the end\n        \n        std::cout << \"List contains:\";\n        for (int x : lst) {\n            std::cout << ' ' << x;\n        }\n        std::cout << '\\n';\n    }\n    \n\n3\\. Map\n-------\n\nA map is an associative container that stores key-value pairs. It supports the retrieval of values based on their keys. The keys are sorted in ascending order by default.\n\nExample\n-------\n\n    #include <iostream>\n    #include <map>\n    \n    int main() {\n        std::map<std::string, int> m;\n    \n        m[\"one\"] = 1;\n        m[\"two\"] = 2;\n    \n        std::cout << \"Map contains:\\n\";\n        for (const auto &pair : m) {\n            std::cout << pair.first << \": \" << pair.second << '\\n';\n        }\n    }\n    \n\n4\\. Unordered\\_map\n------------------\n\nSimilar to a map, an unordered map stores key-value pairs, but it is implemented using a hash table. This means unordered\\_map has faster average-case performance compared to map, since it does not maintain sorted order. However, worst-case performance can be worse than map.\n\nExample\n-------\n\n    #include <iostream>\n    #include <unordered_map>\n    \n    int main() {\n        std::unordered_map<std::string, int> um;\n    \n        um[\"one\"] = 1;\n        um[\"two\"] = 2;\n    \n        std::cout << \"Unordered map contains:\\n\";\n        for (const auto &pair : um) {\n            std::cout << pair.first << \": \" << pair.second << '\\n';\n        }\n    }\n    \n\nThese are just a few examples of C++ containers. There are other container types, such as `set`, `multiset`, `deque`, `stack`, `queue`, and `priority_queue`. Each container has its own use cases and unique characteristics. Learning about these containers and when to use them can greatly improve your efficiency and effectiveness in using C++.",
+    "links": []
+  },
+  "-6AOrbuOE7DJCmxlcgCay": {
+    "title": "Templates",
+    "description": "Templates in C++ are a powerful feature that allows you to write generic code, meaning that you can write a single function or class that can work with different data types. This means you do not need to write separate functions or classes for each data type you want to work with.\n\nTemplate Functions\n------------------\n\nTo create a template function, you use the `template` keyword followed by the type parameters or placeholders enclosed in angle brackets (`< >`). Then, you define your function as you normally would, using the type parameters to specify the generic types.\n\nHere's an example of a simple template function that takes two arguments and returns the larger of the two:\n\n    template <typename T>\n    T max(T a, T b) {\n        return (a > b) ? a : b;\n    }\n    \n\nTo use this function, you can either explicitly specify the type parameter:\n\n    int result = max<int>(10, 20);\n    \n\nOr, you can let the compiler deduce the type for you:\n\n    int result = max(10, 20);\n    \n\nTemplate Classes\n----------------\n\nSimilarly, you can create template classes using the `template` keyword. Here's an example of a simple template class that represents a pair of values:\n\n    template <typename T1, typename T2>\n    class Pair {\n    public:\n        T1 first;\n        T2 second;\n    \n        Pair(T1 first, T2 second) : first(first), second(second) {}\n    };\n    \n\nTo use this class, you need to specify the type parameters when creating an object:\n\n    Pair<int, std::string> pair(1, \"Hello\");\n    \n\nTemplate Specialization\n-----------------------\n\nSometimes, you may need special behavior for a specific data type. In this case, you can use template specialization. For example, you can specialize the `Pair` class for a specific type, like `char`:\n\n    template <>\n    class Pair<char, char> {\n    public:\n        char first;\n        char second;\n    \n        Pair(char first, char second) : first(first), second(second) {\n            // Special behavior for characters (e.g., convert to uppercase)\n            this->first = std::toupper(this->first);\n            this->second = std::toupper(this->second);\n        }\n    };\n    \n\nNow, when you create a `Pair` object with `char` template arguments, the specialized behavior will be used:\n\n    Pair<char, char> charPair('a', 'b');\n    \n\nIn summary, templates in C++ allow you to write generic functions and classes that can work with different data types, reducing code duplication and making your code more flexible and reusable.",
+    "links": []
+  },
+  "w4EIf58KP-Pq-yc0HlGxc": {
+    "title": "Variadic Templates",
+    "description": "Variadic templates are a feature in C++11 that allows you to define a template with a variable number of arguments. This is especially useful when you need to write a function or class that can accept different numbers and types of arguments.\n\nSyntax\n------\n\nThe syntax for variadic templates is very simple. To define a variadic template, use the `...` (ellipsis) notation:\n\n    template <typename... Args>\n    \n\nThis notation represents a parameter pack, which can contain zero or more arguments. You can use this parameter pack as a variable list of template parameters in your template definition.\n\nExamples\n--------\n\n### Summing Multiple Arguments Using Variadic Templates\n\n    #include <iostream>\n    \n    // Base case for recursion\n    template <typename T>\n    T sum(T t) {\n      return t;\n    }\n    \n    // Variadic template\n    template <typename T, typename... Args>\n    T sum(T t, Args... args) {\n      return t + sum(args...);\n    }\n    \n    int main() {\n      int result = sum(1, 2, 3, 4, 5);  // expands to 1 + 2 + 3 + 4 + 5\n      std::cout << \"The sum is: \" << result << '\\n';\n    \n      return 0;\n    }\n    \n\n### Tuple Class Using Variadic Templates\n\n    template <typename... Types>\n    class Tuple;\n    \n    // Base case: empty tuple\n    template <>\n    class Tuple<> {};\n    \n    // Recursive case: Tuple with one or more elements\n    template <typename Head, typename... Tail>\n    class Tuple<Head, Tail...> : public Tuple<Tail...> {\n     public:\n      Tuple(Head head, Tail... tail) : Tuple<Tail...>(tail...), head_(head) {}\n    \n      Head head() const { return head_; }\n    \n     private:\n      Head head_;\n    };\n    \n    int main() {\n      Tuple<int, float, double> tuple(1, 2.0f, 3.0);\n      std::cout << \"First element: \" << tuple.head() << '\\n';\n      return 0;\n    }\n    \n\nPlease note that the examples shown are for educational purposes and might not be the most efficient or production-ready implementations. With C++17 and onward, there are even more concise ways to handle variadic templates, like using fold expressions.",
+    "links": []
+  },
+  "sObOuccY0PDeGG-9GrFDF": {
+    "title": "Template Specialization",
+    "description": "Template specialization is a way to customize or modify the behavior of a template for a specific type or a set of types. This can be useful when you want to optimize the behavior or provide specific implementation for a certain type, without affecting the overall behavior of the template for other types.\n\nThere are two main ways you can specialize a template:\n\n*   **Full specialization:** This occurs when you provide a specific implementation for a specific type or set of types.\n    \n*   **Partial specialization:** This occurs when you provide a more general implementation for a subset of types that match a certain pattern or condition.\n    \n\nFull Template Specialization\n----------------------------\n\nFull specialization is used when you want to create a separate implementation of a template for a specific type. To do this, you need to use keyword `template<>` followed by the function template with the desired specialized type.\n\nHere is an example:\n\n    #include <iostream>\n    \n    template <typename T>\n    void printData(const T& data) {\n        std::cout << \"General template: \" << data << '\\n';\n    }\n    \n    template <>\n    void printData(const char* const & data) {\n        std::cout << \"Specialized template for const char*: \" << data << '\\n';\n    }\n    \n    int main() {\n        int a = 5;\n        const char* str = \"Hello, world!\";\n        printData(a); // General template: 5\n        printData(str); // Specialized template for const char*: Hello, world!\n    }\n    \n\nPartial Template Specialization\n-------------------------------\n\nPartial specialization is used when you want to create a separate implementation of a template for a subset of types that match a certain pattern or condition.\n\nHere is an example of how you can partially specialize a template class:\n\n    #include <iostream>\n    \n    template <typename K, typename V>\n    class MyPair {\n    public:\n        MyPair(K k, V v) : key(k), value(v) {}\n    \n        void print() const {\n            std::cout << \"General template: key = \" << key << \", value = \" << value << '\\n';\n        }\n    \n    private:\n        K key;\n        V value;\n    };\n    \n    template <typename T>\n    class MyPair<T, int> {\n    public:\n        MyPair(T k, int v) : key(k), value(v) {}\n    \n        void print() const {\n            std::cout << \"Partial specialization for int values: key = \" << key\n                      << \", value = \" << value << '\\n';\n        }\n    \n    private:\n        T key;\n        int value;\n    };\n    \n    int main() {\n        MyPair<double, std::string> p1(3.2, \"example\");\n        MyPair<char, int> p2('A', 65);\n        p1.print(); // General template: key = 3.2, value = example\n        p2.print(); // Partial specialization for int values: key = A, value = 65\n    }\n    \n\nIn this example, the `MyPair` template class is partially specialized to provide a different behavior when the second template parameter is of type `int`.",
+    "links": []
+  },
+  "WptReUOwVth3C9-AVmMHF": {
+    "title": "Type Traits",
+    "description": "Type Traits are a set of template classes in C++ that help in getting the information about the type's properties, behavior, or characteristics. They can be found in the `<type_traits>` header file. By using Type Traits, you can adapt your code depending on the properties of a given type, or even enforce specific properties for your type parameters in template code.\n\nSome common type traits are:\n\n*   `std::is_pointer`: Checks if a given type is a pointer type.\n*   `std::is_arithmetic`: Checks if the given type is an arithmetic type.\n*   `std::is_function`: Checks if the given type is a function type.\n*   `std::decay`: Applies decltype rules to the input type ( strips references, cv-qualifiers, etc. ).\n\nUsage\n-----\n\nYou can use type traits like this:\n\n    #include <iostream>\n    #include <type_traits>\n    \n    int main() {\n        int a;\n        int* a_ptr = &a;\n    \n        std::cout << \"Is 'a' a pointer? \" << std::boolalpha << std::is_pointer<decltype(a)>::value << '\\n';\n        std::cout << \"Is 'a_ptr' a pointer? \" << std::boolalpha << std::is_pointer<decltype(a_ptr)>::value << '\\n';\n    \n        return 0;\n    }\n    \n\nComposing Type Traits\n---------------------\n\nSome type traits help you compose other traits or modify them, such as:\n\n*   `std::conditional`: If a given boolean value is true, use type A; otherwise, use type B.\n*   `std::enable_if`: If a given boolean value is true, use type A; otherwise, there is no nested type.\n\n    #include <iostream>\n    #include <type_traits>\n    \n    template <typename T>\n    typename std::enable_if<std::is_arithmetic<T>::value, T>::type find_max(T a, T b) {\n        return a > b ? a : b;\n    }\n    \n    int main() {\n        int max = find_max(10, 20);\n        std::cout << \"Max: \" << max << '\\n';\n    \n        return 0;\n    }\n    \n\nIn this example, the `find_max` template function is only defined when T is an arithmetic type (e.g., int, float, double). This prevents unintended usage of the `find_max` function with non-arithmetic types.\n\nOverall, type traits are a powerful tool to create more generic, extensible, and efficient C++ code, providing a way to query and adapt your code based on type characteristics.",
+    "links": []
+  },
+  "3C5UfejDX-1Z8ZF6C53xD": {
+    "title": "SFINAE",
+    "description": "SFINAE is a principle in C++ template metaprogramming that allows the compiler to select the appropriate function or class when a specific template specialization fails during substitution. The term \"substitution failure\" refers to the process where the compiler tries to substitute template arguments into a function template or class template. If the substitution causes an error, the compiler won't consider that specific specialization as a candidate and will continue searching for a valid one.\n\nThe key idea behind SFINAE is that if a substitution error occurs, it is silently ignored, and the compiler continues to explore other template specializations or overloads. This allows you to write more flexible and generic code, as it enables you to have multiple specializations for different scenarios.\n\nCode Example\n------------\n\nHere's an example that demonstrates SFINAE in action:\n\n    #include <iostream>\n    #include <type_traits>\n    \n    template <typename T, typename = void>\n    struct foo_impl {\n        void operator()(T t) {\n            std::cout << \"Called when T is not arithmetic\\n\";\n        }\n    };\n    \n    template <typename T>\n    struct foo_impl<T, std::enable_if_t<std::is_arithmetic<T>::value>> {\n        void operator()(T t) {\n            std::cout << \"Called when T is arithmetic\\n\";\n        }\n    };\n    \n    template <typename T>\n    void foo(T t) {\n        foo_impl<T>()(t);\n    }\n    \n    int main() {\n        int a = 5;\n        foo(a); // output: Called when T is arithmetic\n    \n        std::string s = \"example\";\n        foo(s); // output: Called when T is not arithmetic\n    }\n    \n\nIn this example, we define two `foo_impl` functions are specialized based on the boolean value of `std::is_arithmetic<T>`. The first one is enabled when `T` is an arithmetic type, while the second one is enabled when `T` is not an arithmetic type. The `foo` function then calls the appropriate `foo_impl` specialization based on the result of the type trait.\n\nWhen calling `foo(a)` with an integer, the first specialization is selected, and when calling `foo(s)` with a string, the second specialization is selected. If there is no valid specialization, the code would fail to compile.",
+    "links": []
+  },
+  "6hTcmJwNnQstbWWzNCfTe": {
+    "title": "Full Template Specialization",
+    "description": "Full template specialization allows you to provide a specific implementation, or behavior, for a template when used with a certain set of type parameters. It is useful when you want to handle special cases or optimize your code for specific types.\n\nSyntax\n------\n\nTo create a full specialization of a template, you need to define the specific type for which the specialization should happen. The syntax looks as follows:\n\n    template <> //Indicates that this is a specialization\n    className<specificType> //The specialized class for the specific type\n    \n\nExample\n-------\n\nConsider the following example to demonstrate full template specialization:\n\n    // Generic template\n    template <typename T>\n    class MyContainer {\n    public:\n        void print() {\n            std::cout << \"Generic container.\\n\";\n        }\n    };\n    \n    // Full template specialization for int\n    template <>\n    class MyContainer<int> {\n    public:\n        void print() {\n            std::cout << \"Container for integers.\\n\";\n        }\n    };\n    \n    int main() {\n        MyContainer<double> d;\n        MyContainer<int> i;\n    \n        d.print(); // Output: Generic container.\n        i.print(); // Output: Container for integers.\n    \n        return 0;\n    }\n    \n\nIn this example, we defined a generic `MyContainer` template class along with a full specialization for `int` type. When we use the container with the `int` type, the specialized implementation's `print` method is called. For other types, the generic template implementation will be used.",
+    "links": []
+  },
+  "1NYJtbdcdOB4-vIrnq4yX": {
+    "title": "Partial Template Specialization",
+    "description": "Partial template specialization is a concept in C++ templates, which allows you to specialize a template for a subset of its possible type arguments. It is particularly useful when you want to provide a customized implementation for a particular group of types without having to define separate specializations for all types in that group.\n\nPartial template specialization is achieved by providing a specialization of a template with a new set of template parameters. This new template will be chosen when the compiler deduces the types that match the partial specialization.\n\nHere is a code example that demonstrates partial template specialization:\n\n    // Primary template\n    template <typename T>\n    struct MyTemplate {\n        static const char* name() {\n            return \"General case\";\n        }\n    };\n    \n    // Partial specialization for pointers\n    template <typename T>\n    struct MyTemplate<T*> {\n        static const char* name() {\n            return \"Partial specialization for pointers\";\n        }\n    };\n    \n    // Full specialization for int\n    template <>\n    struct MyTemplate<int> {\n        static const char* name() {\n            return \"Full specialization for int\";\n        }\n    };\n    \n    int main() {\n        MyTemplate<double> t1; // General case\n        MyTemplate<double*> t2; // Partial specialization for pointers\n        MyTemplate<int> t3; // Full specialization for int\n    \n        std::cout << t1.name() << '\\n';\n        std::cout << t2.name() << '\\n';\n        std::cout << t3.name() << '\\n';\n    \n        return 0;\n    }\n    \n\nIn the example above, we have defined a primary template `MyTemplate` with a single type parameter `T`. We then provide a partial template specialization for pointer types by specifying `MyTemplate<T*>`. This means that the partial specialization will be chosen when the type argument is a pointer type.\n\nLastly, we provide a full specialization for the `int` type by specifying `MyTemplate<int>`. This will be chosen when the type argument is `int`.\n\nWhen running this example, the output will be:\n\n    General case\n    Partial specialization for pointers\n    Full specialization for int\n    \n\nThis demonstrates that the partial specialization works as expected, and is chosen for pointer types, while the full specialization is chosen for the `int` type.",
+    "links": []
+  },
+  "fb3bnfKXjSIjPAk4b95lg": {
+    "title": "Idioms",
+    "description": "C++ idioms are well-established patterns or techniques that are commonly used in C++ programming to achieve a specific outcome. They help make code efficient, maintainable, and less error-prone. Here are some of the common C++ idioms:\n\n1\\. Resource Acquisition is Initialization (RAII)\n-------------------------------------------------\n\nThis idiom ensures that resources are always properly acquired and released by tying their lifetime to the lifetime of an object. When the object gets created, it acquires the resources and when it gets destroyed, it releases them.\n\n    class Resource {\n    public:\n        Resource() { /* Acquire resource */ }\n        ~Resource() { /* Release resource */ }\n    };\n    \n    void function() {\n        Resource r; // Resource is acquired\n        // ...\n    } // Resource is released when r goes out of scope\n    \n\n2\\. Rule of Three\n-----------------\n\nIf a class defines any one of the following, it should define all three: copy constructor, copy assignment operator, and destructor.\n\n    class MyClass {\n    public:\n        MyClass();\n        MyClass(const MyClass& other); // Copy constructor\n        MyClass& operator=(const MyClass& other); // Copy assignment operator\n        ~MyClass(); // Destructor\n    };\n    \n\n3\\. Rule of Five\n----------------\n\nWith C++11, the rule of three was extended to five, covering move constructor and move assignment operator.\n\n    class MyClass {\n    public:\n        MyClass();\n        MyClass(const MyClass& other); // Copy constructor\n        MyClass(MyClass&& other); // Move constructor\n        MyClass& operator=(const MyClass& other); // Copy assignment operator\n        MyClass& operator=(MyClass&& other); // Move assignment operator\n        ~MyClass(); // Destructor\n    };\n    \n\n4\\. PImpl (Pointer to Implementation) Idiom\n-------------------------------------------\n\nThis idiom is used to separate the implementation details of a class from its interface, resulting in faster compile times and the ability to change implementation without affecting clients.\n\n    // header file\n    class MyClass {\n    public:\n        MyClass();\n        ~MyClass();\n        void someMethod();\n    \n    private:\n        class Impl;\n        Impl* pImpl;\n    };\n    \n    // implementation file\n    class MyClass::Impl {\n    public:\n        void someMethod() { /* Implementation */ }\n    };\n    \n    MyClass::MyClass() : pImpl(new Impl()) {}\n    MyClass::~MyClass() { delete pImpl; }\n    void MyClass::someMethod() { pImpl->someMethod(); }\n    \n\n5\\. Non-Virtual Interface (NVI)\n-------------------------------\n\nThis enforces a fixed public interface and allows subclasses to only override specific private or protected virtual methods.\n\n    class Base {\n    public:\n        void publicMethod() {\n            // Common behavior\n            privateMethod(); // Calls overridden implementation\n        }\n    \n    protected:\n        virtual void privateMethod() = 0; // Pure virtual method\n    };\n    \n    class Derived : public Base {\n    protected:\n        virtual void privateMethod() override {\n            // Derived implementation\n        }\n    };\n    \n\nThese are just a few examples of the many idioms in C++ programming. They can provide guidance when designing and implementing your code, but it's essential to understand the underlying concepts to adapt them to different situations.",
+    "links": []
+  },
+  "xjUaIp8gGxkN-cp8emJ2M": {
+    "title": "Non-Copyable / Non-Moveable",
+    "description": "The non-copyable idiom is a C++ design pattern that prevents objects from being copied or assigned. It's usually applied to classes that manage resources, like file handles or network sockets, where copying the object could cause issues like resource leaks or double deletions.\n\nTo make a class non-copyable, you need to delete the copy constructor and the copy assignment operator. This can be done explicitly in the class declaration, making it clear to other programmers that copying is not allowed.\n\nHere's an example of how to apply the non-copyable idiom to a class:\n\n    class NonCopyable {\n    public:\n      NonCopyable() = default;\n      ~NonCopyable() = default;\n    \n      // Delete the copy constructor\n      NonCopyable(const NonCopyable&) = delete;\n    \n      // Delete the copy assignment operator\n      NonCopyable& operator=(const NonCopyable&) = delete;\n    };\n    \n\nTo use the idiom, simply inherit from the `NonCopyable` class:\n\n    class MyClass : private NonCopyable {\n      // MyClass is now non-copyable\n    };\n    \n\nThis ensures that any attempt to copy or assign objects of `MyClass` will result in a compilation error, thus preventing unwanted behavior.",
+    "links": []
+  },
+  "YvmjrZSAOmjhVPo05MJqN": {
+    "title": "Erase-Remove",
+    "description": "The erase-remove idiom is a common C++ technique to efficiently remove elements from a container, particularly from standard sequence containers like `std::vector`, `std::list`, and `std::deque`. It leverages the standard library algorithms `std::remove` (or `std::remove_if`) and the member function `erase()`.\n\nThe idiom consists of two steps:\n\n*   `std::remove` (or `std::remove_if`) moves the elements to be removed towards the end of the container and returns an iterator pointing to the first element to remove.\n*   `container.erase()` removes the elements from the container using the iterator obtained in the previous step.\n\nHere's an example:\n\n    #include <algorithm>\n    #include <vector>\n    #include <iostream>\n    \n    int main() {\n        std::vector<int> numbers = {1, 3, 2, 4, 3, 5, 3};\n        \n        // Remove all occurrences of 3 from the vector.\n        numbers.erase(std::remove(numbers.begin(), numbers.end(), 3), numbers.end());\n    \n        for (int number : numbers) {\n            std::cout << number << \" \";\n        }\n    \n        return 0;\n    }\n    \n\nOutput:\n\n    1 2 4 5\n    \n\nIn this example, we used the `std::remove` algorithm to remove all occurrences of the number 3 from the `std::vector<int> numbers`. After the removal, the vector contains only 1, 2, 4, and 5, as the output shows.",
+    "links": []
+  },
+  "lxAzI42jQdaofzQ5MXebG": {
+    "title": "Copy and Swap",
+    "description": "Copy-swap is a C++ idiom that leverages the copy constructor and swap function to create an assignment operator. It follows a simple, yet powerful paradigm: create a temporary copy of the right-hand side object, and swap its contents with the left-hand side object.\n\nHere's a brief summary:\n\n*   **Copy**: Create a local copy of the right-hand side object. This step leverages the copy constructor, providing exception safety and code reuse.\n*   **Swap**: Swap the contents of the left-hand side object with the temporary copy. This step typically involves swapping internal pointers or resources, without needing to copy the full contents again.\n*   **Destruction**: Destroy the temporary copy. This happens upon the exit of the assignment operator.\n\nHere's a code example for a simple `String` class:\n\n    class String {\n        // ... rest of the class ...\n    \n        String(const String& other);\n        \n        friend void swap(String& first, String& second) {\n            using std::swap; // for arguments-dependent lookup (ADL)\n            swap(first.size_, second.size_);\n            swap(first.buffer_, second.buffer_);\n        }\n    \n        String& operator=(String other) {\n            swap(*this, other);\n            return *this;\n        }\n    };\n    \n\nUsing the copy-swap idiom:\n\n*   The right-hand side object is copied when passed by value to the assignment operator.\n*   The left-hand side object's contents are swapped with the temporary copy.\n*   The temporary copy is destroyed, releasing any resources that were previously held by the left-hand side object.\n\nThis approach simplifies the implementation and provides strong exception safety, while reusing the copy constructor and destructor code.",
+    "links": []
+  },
+  "O2Du5gHHxFxAI2u5uO8wu": {
+    "title": "Copy on Write",
+    "description": "The Copy-Write idiom, sometimes called the Copy-on-Write (CoW) or \"lazy copying\" idiom, is a technique used in programming to minimize the overhead of copying large objects. It helps in reducing the number of actual copy operations by using shared references to objects and only copying the data when it's required for modification.\n\nLet's understand this with a simple example:\n\n    #include <iostream>\n    #include <memory>\n    \n    class MyString {\n    public:\n        MyString(const std::string &str) : data(std::make_shared<std::string>(str)) {}\n    \n        // Use the same shared data for copying.\n        MyString(const MyString &other) : data(other.data) { \n            std::cout << \"Copied using the Copy-Write idiom.\\n\";\n        }\n    \n        // Make a copy only if we want to modify the data.\n        void write(const std::string &str) {\n            // Check if there's more than one reference.\n            if (data.use_count() > 1) {\n                data = std::make_shared<std::string>(*data);\n                std::cout << \"Copy is actually made for writing.\\n\";\n            }\n            *data = str;\n        }\n    \n    private:\n        std::shared_ptr<std::string> data;\n    };\n    \n    int main() {\n        MyString str1(\"Hello\");\n        MyString str2 = str1; // No copy operation, just shared references.\n    \n        str1.write(\"Hello, World!\"); // This is where the actual duplication happens.\n        return 0;\n    }\n    \n\nIn this example, we have a class `MyString` that simulates the Copy-Write idiom. When a `MyString` object is created, it constructs a `shared_ptr` pointing to a string. When a `MyString` object is copied, it does not perform any actual copy operation, but simply increases the reference count of the shared object. Finally, when the `write` function is called, it checks if there's more than one reference to the data and if so, it actually creates a new copy and updates the reference. This way, unnecessary copies can be avoided until they are actually needed for modification.",
+    "links": []
+  },
+  "OmHDlLxCnH8RDdu5vx9fl": {
+    "title": "RAII",
+    "description": "RAII is a popular idiom in C++ that focuses on using the object's life cycle to manage resources. It encourages binding the resource lifetime to the scope of a corresponding object so that it's automatically acquired when an object is created and released when the object is destroyed. This helps in simplifying the code, avoiding leaks and managing resources efficiently.\n\nCode Examples\n-------------\n\nHere's an example of using RAII to manage resources, specifically a dynamically allocated array:\n\n    class ManagedArray {\n    public:\n        ManagedArray(size_t size) : size_(size), data_(new int[size]) {\n        }\n    \n        ~ManagedArray() {\n            delete[] data_;\n        }\n    \n        // Access function\n        int& operator [](size_t i) {\n            return data_[i];\n        }\n    \n    private:\n        size_t size_;\n        int* data_;\n    };\n    \n\nUsages:\n\n    {\n        ManagedArray arr(10);\n        arr[0] = 42;\n    \n        // No need to explicitly free memory, it will be automatically released when arr goes out of scope.\n    }\n    \n\nAnother common use case is managing a mutex lock:\n\n    class Lock {\n    public:\n        Lock(std::mutex& mtx) : mutex_(mtx) {\n            mutex_.lock();\n        }\n    \n        ~Lock() {\n            mutex_.unlock();\n        }\n    \n    private:\n        std::mutex& mutex_;\n    };\n    \n\nUsages:\n\n    std::mutex some_mutex;\n    \n    void protected_function() {\n        Lock lock(some_mutex);\n    \n        // Do some work that must be synchronized\n    \n        // No need to explicitly unlock the mutex, it will be automatically unlocked when lock goes out of scope.\n    }\n    \n\nIn both examples, the constructor acquires the resource (memory for the array and the lock for the mutex), and the destructor takes care of releasing them. This way, the resource management is tied to the object's lifetime, and the resource is correctly released even in case of an exception being thrown.",
+    "links": []
+  },
+  "MEoWt8NKjPLVTeGgYf3cR": {
+    "title": "Pimpl",
+    "description": "Pimpl (Pointer-to-Implementation) idiom, also known as a private class data, compiler firewall, or handle classes, is a technique used in C++ to hide the implementation details of a class by using a forward declaration to a private structure or class, keeping the public interface of the class clean, and reducing compile-time dependencies.\n\nImplementation\n--------------\n\nHere is a simple example illustrating the Pimpl idiom:\n\n**my\\_class.h**\n\n    class MyClass_Impl; // forward declaration\n    \n    class MyClass\n    {\n    public:\n        MyClass();\n        ~MyClass();\n        void some_method();\n    \n    private:\n        MyClass_Impl *pimpl; // pointer to the implementation\n    };\n    \n\n**my\\_class.cpp**\n\n    #include \"my_class.h\"\n    #include <iostream>\n    \n    class MyClass_Impl // the actual implementation\n    {\n    public:\n        void some_method()\n        {\n            std::cout << \"Implementation method called!\\n\";\n        }\n    };\n    \n    MyClass::MyClass() : pimpl(new MyClass_Impl()) {} // constructor\n    \n    MyClass::~MyClass() { delete pimpl; } // destructor\n    \n    void MyClass::some_method()\n    {\n        pimpl->some_method(); // delegation to the implementation\n    }\n    \n\nNow, all the public methods of `MyClass` will delegate the calls to the corresponding methods of `MyClass_Impl`. By doing this, you can hide the details of class implementation, reduce the compile-time dependencies, and ease the maintenance of your code.",
+    "links": []
+  },
+  "ttt-yeIi4BPWrgvW324W7": {
+    "title": "CRTP",
+    "description": "**Curiously Recurring Template Pattern (CRTP)**\n\nThe Curiously Recurring Template Pattern (CRTP) is a C++ idiom that involves a class template being derived from its own specialization. This pattern allows for the creation of static polymorphism, which differs from regular runtime polymorphism that relies on virtual functions and inheritance.\n\nCRTP is usually employed when you want to customize certain behavior in the base class without adding the overhead of a virtual function call. In short, CRTP can be used for achieving compile-time polymorphism without the runtime performance cost.\n\nHere's an example demonstrating CRTP:\n\n    template <typename Derived>\n    class Base {\n    public:\n        void interface() {\n            static_cast<Derived*>(this)->implementation();\n        }\n    \n        void implementation() {\n            std::cout << \"Default implementation in Base\\n\";\n        }\n    };\n    \n    class Derived1 : public Base<Derived1> {\n    public:\n        void implementation() {\n            std::cout << \"Custom implementation in Derived1\\n\";\n        }\n    };\n    \n    class Derived2 : public Base<Derived2> {\n        // No custom implementation, so Base::implementation will be used.\n    };\n    \n    int main() {\n        Derived1 d1;\n        d1.interface();  // Output: \"Custom implementation in Derived1\"\n    \n        Derived2 d2;\n        d2.interface();  // Output: \"Default implementation in Base\"\n    \n        return 0;\n    }\n    \n\nIn this example, the `Base` class is a template that takes a single type parameter. `Derived1` and `Derived2` are derived from their respective specialization of `Base`. CRTP is employed to allow custom implementations of the `implementation()` function in derived classes while providing a default behavior in the `Base` class. The `interface()` function in the `Base` class is a template for the derived class's behavior and calls the corresponding `implementation()` function based on the static type.\n\nThis pattern enables you to override certain behavior in derived classes with additional functionality, all while avoiding the overhead of virtual function calls and, in turn, achieving a higher degree of efficiency at runtime.",
+    "links": []
+  },
+  "vvE1aUsWbF1OFcmMUHbJa": {
+    "title": "Standards",
+    "description": "C++ standards are a set of rules and guidelines that define the language's features, syntax, and semantics. The International Organization for Standardization (ISO) is responsible for maintaining and updating the C++ standards. The main purpose of the standards is to ensure consistency, efficiency, and maintainability across multiple platforms and compilers.\n\nHere's a brief summary of the different C++ standards released to date:\n\n*   **C++98/C++03**: The first standardized version of C++, which introduced many features like templates, exceptions, and the Standard Template Library (STL). C++03 is a minor update to C++98 with some bug fixes and performance improvements.\n    \n*   **C++11**: A major upgrade to the language, which introduced features such as:\n    \n    *   Lambda expressions:\n    \n        auto sum = [](int a, int b) -> int { return a + b; };\n        \n    \n    *   Range-based for loops:\n    \n        std::vector<int> numbers = {1, 2, 3, 4};\n        for (int num : numbers) {\n            std::cout << num << '\\n';\n        }\n        \n    \n    *   Smart pointers like `std::shared_ptr` and `std::unique_ptr`.\n*   **C++14**: A minor update to C++11, which added features such as:\n    \n    *   Generic lambda expressions:\n    \n        auto generic_sum = [](auto a, auto b) { return a + b; };\n        \n    \n    *   Binary literals:\n    \n        int binary_number = 0b1010;\n        \n    \n*   **C++17**: Another major update that introduced features such as:\n    \n    *   `if` and `switch` with initializers:\n    \n        if (auto it = my_map.find(key); it != my_map.end()) {\n            // use 'it' here\n        }\n        \n    \n    *   Structured bindings:\n    \n        std::map<std::string, int> my_map = {{\"A\", 1}, {\"B\", 2}};\n        for (const auto& [key, value] : my_map) {\n            // use 'key' and 'value' here\n        }\n        \n    \n*   **C++20**: The latest major update to the language, with features such as:\n    \n    *   Concepts:\n    \n        template<typename T>\n        concept Addable = requires(T a, T b) {\n            { a + b } -> std::same_as<T>;\n        };\n        \n    \n    *   Ranges:\n    \n        std::vector<int> numbers = {1, 2, 3, 4};\n        auto doubled = numbers | std::views::transform([](int n) { return n * 2; });\n        \n    \n    *   Coroutines and more.\n\nRemember that to use these language features, you might need to configure your compiler to use the specific C++ standard version. For example, with GCC or Clang, you can use the `-std=c++11`, `-std=c++14`, `-std=c++17`, or `-std=c++20` flags.",
+    "links": []
+  },
+  "T6rCTv9Dxkm-tEA-l9XEv": {
+    "title": "C++ 11 / 14",
+    "description": "**C++11** The C++11 standard, also known as C++0x, was officially released in September 2011. It introduced several new language features and improvements, including:\n\n*   **Auto**: Allows compiler to infer the variable type based on its initializing expression.\n    \n        auto integer = 42; // integer is of int type\n        auto floating = 3.14; // floating is of double type\n        \n    \n*   **Range-Based for Loop**: Provides foreach-like semantics for iterating through a container or array.\n    \n        std::vector<int> numbers {1, 2, 3, 4};\n        for (int number : numbers) {\n            std::cout << number << '\\n';\n        }\n        \n    \n*   **Lambda Functions**: Anonymous functions that allow the creation of function objects more easily.\n    \n        auto add = [](int a, int b) -> int { return a + b; };\n        int sum = add(42, 13); // sum is equal to 55\n        \n    \n*   **nullptr**: A new keyword to represent null pointers, more type-safe than using a literal '0' or \"NULL\".\n    \n        int *ptr = nullptr;\n        \n    \n*   **Thread Support Library**: Provides a standard way to work with threads and synchronize data access across threads.\n    \n        std::thread t([]() { std::cout << \"Hello from another thread\\n\"; });\n        t.join();\n        \n    \n\n**C++14** The C++14 standard was officially released in December 2014 as a small extension over C++11, focusing more on fine-tuning language features and fixing issues. Some of the new features introduced:\n\n*   **Generic Lambdas**: Allows lambda function parameters to be declared with 'auto' type placeholders.\n    \n        auto add = [](auto a, auto b) { return a + b; };\n        auto sum_i = add(42, 13); // Still works with integers\n        auto sum_f = add(3.14, 2.72); // Now works with doubles too\n        \n    \n*   **Binary Literals**: Allow you to input integers as binary literals for better readability.\n    \n        int b = 0b110101; // Decimal value is 53\n        \n    \n*   **decltype(auto)**: Deduces the type of variable to match that of the expression it is initialized with.\n    \n        auto func = [](auto a, auto b) { return a * b; };\n        decltype(auto) result = func(5, 3.14); // decltype(auto) deduces to \"double\"\n        \n    \n*   **Variable Templates**: Allows you to define variables with template parameters.\n    \n        template <typename T>\n        constexpr T pi = T(3.1415926535897932385);\n        float r = pi<float>; // Instantiated as a float\n        double d = pi<double>; // Instantiated as a double",
+    "links": []
+  },
+  "R2-qWGUxsTOeSHRuUzhd2": {
+    "title": "C++ 17",
+    "description": "C++17, also known as C++1z, is the version of the C++ programming language published in December 2017. It builds upon the previous standard, C++14, and adds various new features and enhancements to improve the language's expressiveness, performance, and usability.\n\nKey Features:\n-------------\n\n*   If-init-statement: Introduces a new syntax for writing conditions with scope inside if and switch statements.\n\n    if (auto it = map.find(key); it != map.end())\n    {\n        // Use it\n    }\n    \n\n*   Structured Binding Declarations: Simplify the process of unpacking a tuple, pair, or other aggregate types.\n\n    map<string, int> data;\n    auto [iter, success] = data.emplace(\"example\", 42);\n    \n\n*   Inline variables: Enables `inline` keyword for variables and allows single definition of global and class static variables in header files.\n\n    inline int globalVar = 0;\n    \n\n*   Folds expressions: Introduce fold expressions for variadic templates.\n\n    template <typename... Ts>\n    auto sum(Ts... ts)\n    {\n        return (ts + ...);\n    }\n    \n\n*   constexpr if statement: Allows conditional compilation during compile time.\n\n    template <typename T>\n    auto get_value(T t)\n    {\n        if constexpr (std::is_pointer_v<T>)\n        {\n            return *t;\n        }\n        else\n        {\n            return t;\n        }\n    }\n    \n\n*   Improved lambda expression: Allows lambda to capture a single object without changing its type or constness.\n\n    auto func = [x = std::move(obj)] { /* use x */ };\n    \n\n*   Standard file system library: `std::filesystem` as a standardized way to manipulate paths, directories, and files.\n    \n*   New Standard Library additions: `<string_view>` (non-owning string reference), `<any>` (type-erased container), `<optional>` (optional value wrapper), `<variant>` (type-safe discriminated union / sum type), and `<memory_resource>` (library for polymorphic allocators).\n    \n*   Parallel Algorithms: Adds support for parallel execution of Standard Library algorithms.\n    \n\nThis is a brief summary of the key features of C++17; it includes more features and library updates. For a complete list, you can refer to the [full list of C++17 features and changes](https://en.cppreference.com/w/cpp/17).",
+    "links": []
+  },
+  "o3no4a5_iMFzEAGs56-BJ": {
+    "title": "C++ 20",
+    "description": "C++20 is the latest standard of the C++ programming language, which brings significant improvements and new features to the language. This version is aimed at facilitating better software development practices and enabling developers to write more efficient, readable, and maintainable code.\n\nHere are some of the key features introduced in C++20:\n\nConcepts\n--------\n\nConcepts are a way to enforce specific requirements on template parameters, allowing you to write more expressive and understandable code. They improve the error messages when using templates and ensure that the template parameters fulfill specific criteria.\n\n    template <typename T>\n    concept Addable = requires (T a, T b) {\n        { a + b } -> std::same_as<T>;\n    };\n    \n    template <Addable T>\n    T add(T a, T b) {\n        return a + b;\n    }\n    \n\nRanges\n------\n\nRanges provide a new way to work with sequences of values, enhancing the power and expressiveness of the Standard Library algorithms. The range-based algorithms make it easier and more convenient to work with sequences.\n\n    #include <algorithm>\n    #include <iostream>\n    #include <ranges>\n    #include <vector>\n    \n    int main() {\n        std::vector<int> numbers = { 1, 2, 3, 4, 5 };\n    \n        auto even_numbers = numbers | std::views::filter([](int n) { return n % 2 == 0; });\n    \n        for (int n : even_numbers) {\n            std::cout << n << ' ';\n        }\n    }\n    \n\nCoroutines\n----------\n\nCoroutines are a new way to write asynchronous and concurrent code with improved readability. They allow functions to be suspended and resumed, enabling you to write more efficient, non-blocking code.\n\n    #include <coroutine>\n    #include <iostream>\n    #include <future>\n    \n    std::future<int> async_value(int value) {\n        co_await std::chrono::seconds(1);\n        co_return value * 2;\n    }\n    \n    int main() {\n        auto result = async_value(42);\n        std::cout << \"Result: \" << result.get() << '\\n';\n    }\n    \n\nThe `constexpr` and `consteval` Keywords\n----------------------------------------\n\nBoth `constexpr` and `consteval` are related to compile-time evaluation. Functions marked with `constexpr` can be executed at compile-time or runtime, while functions marked with `consteval` can only be executed at compile-time.\n\n    constexpr int add(int a, int b) {\n        return a + b;\n    }\n    \n    consteval int square(int x) {\n        return x * x;\n    }\n    \n    int main() {\n        constexpr int result1 = add(3, 4);   // evaluated at compile-time\n        int result2 = add(5, 6);             // evaluated at runtime\n        constexpr int result3 = square(7);   // evaluated at compile-time\n    }\n    \n\nThese are just some of the highlights of the C++20 standard. It also includes many other features and improvements, like structured bindings, improved lambdas, and new standard library components. Overall, C++20 makes it easier for developers to write clean, efficient, and expressive code.",
+    "links": []
+  },
+  "sxbbKtg7kMNbkx7fXhjR9": {
+    "title": "Newest",
+    "description": "C++20 is the newest standard of the C++ programming language, which was officially published in December 2020. It introduces many new features, enhancements, and improvements over the previous standards. Here is a brief summary of some key features in C++20.\n\n*   **Concepts**: Concepts provide a way to specify constraints on template parameters, ensuring that they meet a specific set of requirements. This allows for better compile-time error messages and code readability.\n    \n    Example:\n    \n        template<typename T>\n        concept Printable = requires(T x) {\n            {std::cout << x};\n        };\n        \n        template<Printable T>\n        void print(const T& x) {\n            std::cout << x << '\\n';\n        }\n        \n    \n*   **Ranges**: Ranges build on the iterator concept and provide a more usable and composable framework for dealing with sequences of values. They simplify the way algorithms can be applied to collections of data.\n    \n    Example:\n    \n        #include <iostream>\n        #include <vector>\n        #include <ranges>\n        \n        int main() {\n            std::vector<int> numbers{1, 2, 3, 4, 5};\n            auto even_view = numbers | std::views::filter([](int n) { return n % 2 == 0; });\n        \n            for (int n : even_view) {\n                std::cout << n << ' ';\n            }\n        }\n        \n    \n*   **Coroutines**: Coroutines offer a way to split complex, long-running functions into smaller, more manageable chunks, allowing them to be suspended and resumed at specific points.\n    \n    Example:\n    \n        #include <iostream>\n        #include <coroutine>\n        \n        std::generator<int> generator() {\n            for (int i = 0; i < 5; ++i)\n                co_yield i;\n        }\n        \n        int main() {\n            for (int value : generator())\n                std::cout << value << ' ';\n        }\n        \n    \n*   **Lambdas with template parameters**: C++20 enables using `auto` as a lambda parameter, allowing for generic lambdas with templated parameters.\n    \n    Example:\n    \n        auto sum = [](auto a, auto b) {\n            return a + b;\n        };\n        \n        int res1 = sum(1, 2);           // int\n        double res2 = sum(1.0, 2.0);    // double\n        \n    \n*   **Constexpr enhancements**: `constexpr` support is extended with additional features, such as `constexpr` dynamic allocations, `constexpr` try-catch blocks, and `constexpr` lambdas.\n    \n    Example:\n    \n        struct Point {\n            constexpr Point(int x, int y): x_{x}, y_{y} {}\n            int x_, y_;\n        };\n        \n        constexpr auto create_points() {\n            Point points[3]{};\n        \n            for (int i = 0; i < 3; ++i) {\n                points[i] = Point{i, i * i};\n            }\n        \n            return points;\n        }\n        \n        constexpr auto points = create_points();\n        \n    \n\nThere are many other features in C++20, such as new standard library improvements, `std::format`, improvements to compile-time programming, and more. These are just a few highlights that showcase the versatility and power of the newest standard of C++.",
+    "links": []
+  },
+  "PPg0V5EzGBeJsysg1215V": {
+    "title": "C++ 0x",
+    "description": "`cpp0x` refers to the working name for [C++11](https://en.cppreference.com/w/cpp/11), which was previously known as C++0x before its final release. C++11 is a major revision of the C++ language standard, published in 2011, and brought several new features and improvements to the language.\n\nSome of the notable features in C++11 include:\n\n*   **Auto** keyword for automatic type inference.\n    \n        auto i = 42; // i is an int\n        auto s = \"hello\"; // s is a const char*\n        \n    \n*   **Range-based for loop** for easier iteration over containers.\n    \n        std::vector<int> vec = {1, 2, 3};\n        for (int i : vec) {\n            std::cout << i << '\\n';\n        }\n        \n    \n*   **Lambda functions** for creating anonymous functions.\n    \n        auto add = [](int a, int b) { return a + b; };\n        int result = add(3, 4); // result is 7\n        \n    \n*   **nullptr** for representing null pointer values, instead of using `NULL`.\n    \n        int* p = nullptr;\n        \n    \n*   **Rvalue references and move semantics** to optimize the handling of temporary objects.\n    \n        std::string str1 = \"hello\";\n        std::string str2 = std::move(str1); // move the content of str1 to str2\n        \n    \n*   **Variadic templates** for creating templates that take a variable number of arguments.\n    \n        template <typename... Args>\n        void printArgs(Args... args) {\n            // function body\n        }\n        \n    \n*   **Static assertions** for compile-time assertions.\n    \n        static_assert(sizeof(int) == 4, \"This code requires int to be 4 bytes.\");\n        \n    \n*   **Thread support** for multithreading programming.\n    \n        #include <thread>\n        \n        void my_function() {\n            // thread function body\n        }\n        \n        int main() {\n            std::thread t(my_function);\n            t.join();\n            return 0;\n        }\n        \n    \n\nThese are just a few examples of the many new features introduced in C++11. For a comprehensive list, you can refer to the [C++11 documentation](https://en.cppreference.com/w/cpp/11).",
+    "links": []
+  },
+  "qmHs6_BzND_xpMmls5YUH": {
+    "title": "Debuggers",
+    "description": "Debuggers are essential tools for any C++ programmer, as they help in detecting, diagnosing, and fixing bugs in the code. They serve as an invaluable resource in identifying and understanding potential errors in the program.\n\nTypes of Debuggers\n------------------\n\nThere are several debuggers available for use with C++:\n\n*   **GDB (GNU Debugger):** This is the most widely used C++ debugger in the Linux environment. It can debug many languages, including C and C++.\n    \n    Example usage:\n    \n        g++ -g main.cpp -o main    # compile the code with debug info\n        gdb ./main                 # start gdb session\n        b main                     # set a breakpoint at the start of the main function\n        run                        # run the program\n        next                       # step to the next line\n        \n    \n*   **LLDB:** This is the debugger developed by LLVM. It supports multiple languages and is popular among macOS and iOS developers.\n    \n    Example usage:\n    \n        clang++ -g main.cpp -o main # compile the code with debug info\n        lldb ./main                 # start lldb session\n        breakpoint set --name main  # set a breakpoint at the start of the main function\n        run                         # run the program\n        next                        # step to the next line\n        \n    \n*   **Microsoft Visual Studio Debugger:** This debugger is built into Visual Studio and is typically used in a graphical interface on Windows systems.\n    \n    Example usage:\n    \n        Open your Visual Studio project and go to Debug > Start Debugging. Then use the step over (F10), step into (F11), or continue (F5) commands to navigate through the code.\n        \n    \n*   **Intel Debugger (IDB):** This debugger is part of Intel's parallel development suite and is popular for high-performance applications.\n    \n*   **TotalView Debugger:** Developed by Rogue Wave Software, TotalView Debugger is a commercial debugger designed for parallel, high-performance, and enterprise applications.\n    \n\nEach debugger has its advantages and unique features, so it's essential to choose the one that best suits your needs and works well with your development environment.",
+    "links": []
+  },
+  "VtPb8-AJKzhTB0QbMtoU4": {
+    "title": "Understanding Debugger Messages",
+    "description": "Debugger messages are notifications or alerts provided by a debugger to help you identify problems or errors in your C++ code. These messages can be warnings or error messages and can provide helpful information about the state of your program and specific issues encountered during the debugging process.\n\nTypes of Debugger Messages\n--------------------------\n\n*   **Error Messages:** Notify you about issues in the code that prevent the program from running or compiling correctly. These messages typically include information about the file and the line number where the error is detected, followed by a description of the issue.\n    \n    Example:\n    \n        test.cpp: In function 'int main()':\n        test.cpp:6:5: error: 'cout' was not declared in this scope\n             cout << \"Hello World!\";\n             ^~~~\n        \n    \n*   **Warning Messages:** Inform you about potential issues or risky programming practices that may not necessarily cause errors but could lead to problems later on. Like error messages, warning messages usually include information about the file and line number where the issue is found, along with a description of the problem.\n    \n    Example:\n    \n        test.cpp: In function 'int main()':\n        test.cpp:6:17: warning: comparison between signed and unsigned integer expressions [-Wsign-compare]\n             if (a < size)\n                      ^\n        \n    \n*   **Informational Messages:** Provide general information about the execution of the program, such as breakpoints, watchpoints, and variable values. These messages can also reveal the current state of the program, including the call stack and the list of active threads.\n    \n    Example (_assuming you are using GDB as debugger_):\n    \n        (gdb) break main\n        Breakpoint 1 at 0x40055f: file test.cpp, line 5.\n        (gdb) run\n        Starting program: /path/to/test\n        Breakpoint 1, main () at test.cpp:5\n        5       int a = 5;\n        \n    \n\nCode Examples\n-------------\n\nTo make use of debugger messages, you need to employ a debugger, such as GDB or Visual Studio Debugger, and include specific flags during the compilation process.\n\nExample using GDB:\n\n    // test.cpp\n    \n    #include <iostream>\n    \n    int main() {\n        int num1 = 10;\n        int num2 = 0;\n        int result = num1 / num2;\n    \n        std::cout << \"Result: \" << result << '\\n';\n    \n        return 0;\n    }\n    \n\n    $ g++ -g -o test test.cpp  // Compile with -g flag to include debugging information\n    $ gdb ./test               // Run the GDB debugger\n    (gdb) run                  // Execute the program inside GDB\n    \n\nAt this point, the debugger will show an error message triggered by the division by zero:\n\n    Program received signal SIGFPE, Arithmetic exception.\n    0x00005555555546fb in main () at test.cpp:7\n    7       int result = num1 / num2;\n    \n\nNow you can make appropriate changes to fix the issue in your C++ code.",
+    "links": []
+  },
+  "sR_FxGZHoMCV9Iv7z2_SX": {
+    "title": "Debugging Symbols",
+    "description": "Debugger symbols are additional information embedded within the compiled program's binary code, that help debuggers in understanding the structure, source code, and variable representations at a particular point in the execution process.\n\nThere are generally two types of debugging symbols:\n\n*   **Internal Debugging Symbols**: These symbols reside within the compiled binary code itself. When using internal debugging symbols, it is essential to note that the size of the binary increases, which may not be desirable for production environments.\n    \n*   **External Debugging Symbols**: The debugging symbols are kept in separate files apart from the binary code, usually with file extensions such as `.pdb` (Program Database) in Windows or `.dSYM` (DWARF Symbol Information) in macOS.\n    \n\nGenerating Debugger Symbols\n---------------------------\n\nTo generate debugger symbols in C++, you need to specify specific options during the compilation process. We will use `g++` compiler as an example.\n\n**Internal Debugging Symbols (g++)**\n\nTo create a debug build with internal debugging symbols, use the `-g` flag:\n\n    g++ -g -o my_program my_program.cpp\n    \n\nThis command compiles `my_program.cpp` into an executable named `my_program` with internal debugging symbols.\n\n**External Debugging Symbols (g++)**\n\nIn case you want to generate a separate file containing debugging symbols, you can use the `-gsplit-dwarf` flag:\n\n    g++ -g -gsplit-dwarf -o my_program my_program.cpp\n    \n\nThis command compiles `my_program.cpp` into an executable named `my_program` and generates a separate file named `my_program.dwo` containing the debugging symbols.\n\nWhen sharing your compiled binary to end-users, you can remove the debugging symbols using the `strip` command:\n\n    strip --strip-debug my_program\n    \n\nThis command removes internal debug symbols, resulting in a smaller binary size while keeping the `.dwo` file for debugging purposes when needed.\n\nRemember that the availability and syntax of these options may vary between different compilers and platforms. Be sure to consult your compiler's documentation to ensure proper usage of the debugging options.",
+    "links": []
+  },
+  "y8VCbGDUco9bzGRfIBD8R": {
+    "title": "WinDBg",
+    "description": "WinDbg is a powerful debugger for Windows applications, which is included in the Microsoft Windows SDK. It provides an extensive set of features to help you analyze and debug complex programs, kernel mode, and user-mode code. With a user-friendly graphical interface, WinDbg can help in analyzing crash dumps, setting breakpoints, and stepping through code execution.\n\nGetting Started\n---------------\n\nTo begin using WinDbg, you first need to install it. You can download the [Windows SDK](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk/) and install it to get the WinDbg.\n\nLoading Symbols\n---------------\n\nWinDbg relies on symbol files (\\*.pdb) to provide more useful information about a program's internal structures, functions, and variables. To load symbols properly, you may need to configure the symbol path:\n\n    !sym noisy\n    .sympath SRV*C:\\symbols*http://msdl.microsoft.com/download/symbols\n    .reload /f\n    \n\nOpening Executables and Crash Dumps\n-----------------------------------\n\nTo debug an executable using WinDbg, go to `File > Open Executable...`, then locate and open the target program. To analyze a crash dump, use `File > Open Crash Dump...` instead.\n\nBasic Commands\n--------------\n\nSome common commands you might use in WinDbg:\n\n*   `g`: Execute the program until the next breakpoint or exception\n*   `bp <address>`: Set a breakpoint at a given address\n*   `bl`: List all breakpoints\n*   `bd <breakpoint_id>`: Disable a breakpoint\n*   `be <breakpoint_id>`: Enable a breakpoint\n*   `bc <breakpoint_id>`: Clear a breakpoint\n*   `t`: Single-step through instructions (trace)\n*   `p`: Step over instructions (proceed)\n*   `k`: Display call stack\n*   `dd`: Display memory contents in 4-byte units (double words)\n*   `da`: Display memory contents as ASCII strings\n*   `!analyze -v`: Analyze the program state and provide detailed information\n\nExample Usage\n-------------\n\nDebugging a simple program:\n\n*   Open the executable in WinDbg\n*   Set a breakpoint using `bp <address>`\n*   Run the program using `g`\n*   Once the breakpoint is hit, use `t` or `p` to step through the code\n*   Try `k` to view the call stack, or `dd`, `da` to inspect memory\n*   Remove the breakpoint and continue debugging with other commands as needed\n\nRemember that WinDbg has a wealth of commands and functionality, so it's essential to get comfortable with the [documentation](https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/debugger-download-tools) and explore the wealth of available resources specific to your debugging tasks.",
+    "links": []
+  },
+  "BmWsoL9c_Aag5nVlMsKm2": {
+    "title": "GDB",
+    "description": "GDB, or the GNU Project Debugger, is a powerful command-line debugger used primarily for C, C++, and other languages. It can help you find runtime errors, examine the program's execution state, and manipulate the flow to detect and fix bugs easily.\n\nGetting started with GDB\n------------------------\n\nTo start using GDB, you first need to compile your code with the `-g` flag, which includes debugging information in the executable:\n\n    g++ -g myfile.cpp -o myfile\n    \n\nNow, you can load your compiled program into GDB:\n\n    gdb myfile\n    \n\nBasic GDB Commands\n------------------\n\nHere are some common GDB commands you'll find useful when debugging:\n\n*   `run`: Start your program.\n*   `break [function/line number]`: Set a breakpoint at the specified function or line.\n*   `continue`: Continue the program execution after stopping on a breakpoint.\n*   `next`: Execute the next line of code, stepping over function calls.\n*   `step`: Execute the next line of code, entering function calls.\n*   `print [expression]`: Evaluate an expression in the current context and display its value.\n*   `backtrace`: Show the current call stack.\n*   `frame [frame-number]`: Switch to a different stack frame.\n*   `quit`: Exit GDB.\n\nExample Usage\n-------------\n\nSuppose you have a simple `cpp` file called `example.cpp`:\n\n    #include <iostream>\n    \n    void my_function(int i) {\n      std::cout << \"In my_function with i = \" << i << '\\n';\n    }\n    \n    int main() {\n      for (int i = 0; i < 5; ++i) {\n        my_function(i);\n      }\n      return 0;\n    }\n    \n\nFirst, compile the code with debugging symbols:\n\n    g++ -g example.cpp -o example\n    \n\nStart GDB and load the `example` program:\n\n    gdb example\n    \n\nSet a breakpoint in the `my_function` function and run the program:\n\n    (gdb) break my_function\n    (gdb) run\n    \n\nOnce stopped at the breakpoint, use `next`, `print`, and `continue` to examine the program's state:\n\n    (gdb) next\n    (gdb) print i\n    (gdb) continue\n    \n\nFinally, exit GDB with the `quit` command.\n\nThis was just a brief summary of GDB; you can find more details in the [official GDB manual](https://sourceware.org/gdb/current/onlinedocs/gdb/).",
+    "links": []
+  },
+  "FTMHsUiE8isD_OVZr62Xc": {
+    "title": "Compilers",
+    "description": "A compiler is a computer program that translates source code written in one programming language into a different language, usually machine code or assembly code, that can be executed directly by a computer's processor. In the context of C++, compilers take your written C++ source code and convert it into an executable program.\n\nPopular C++ Compilers\n---------------------\n\nThere are several popular C++ compilers available, here's a short list of some common ones:\n\n*   **GNU Compiler Collection (GCC)**: Developed by the GNU Project, GCC is an open-source compiler that supports multiple programming languages, including C++.\n    \n*   **Clang**: As part of the LLVM project, Clang is another open-source compiler that supports C++ and is known for its fast compilation times and extensive diagnostics.\n    \n*   **Microsoft Visual C++ (MSVC)**: MSVC is a commercial compiler provided by Microsoft as part of Visual Studio, and it's widely used on Windows platforms.\n    \n*   **Intel C++ Compiler (ICC)**: ICC is a commercial compiler provided by Intel and is known for its ability to optimize code for the latest Intel processors.\n    \n\nExample of a Simple C++ Compilation\n-----------------------------------\n\nLet's say you have a simple C++ program saved in a file called `hello.cpp`:\n\n    #include <iostream>\n    \n    int main() {\n      std::cout << \"Hello, World!\\n\";\n      return 0;\n    }\n    \n\nYou can compile this program using the GCC compiler by executing the following command in a command-line/terminal:\n\n    g++ hello.cpp -o hello\n    \n\nThis will generate an executable file called `hello` (or `hello.exe` on Windows) which you can run to see the output \"Hello, World!\".\n\nNote\n----\n\nWhen learning about compilers, it's essential to know that they work closely with the linker and the standard library. The linker takes care of combining compiled object files and libraries into a single executable, while the standard library provides implementations for common functionalities used in your code.",
+    "links": []
+  },
+  "DVckzBUMgk_lWThVkLyAT": {
+    "title": "Compiler Stages",
+    "description": "The process of compilation in C++ can be divided into four primary stages: Preprocessing, Compilation, Assembly, and Linking. Each stage performs a specific task, ultimately converting the source code into an executable program.\n\nPreprocessing\n-------------\n\nThe first stage is the preprocessing of the source code. Preprocessors modify the source code before the actual compilation process. They handle directives that start with a `#` (hash) symbol, like `#include`, `#define`, and `#if`. In this stage, included header files are expanded, macros are replaced, and conditional compilation statements are processed.\n\n**Code Example:**\n\n    #include <iostream>\n    #define PI 3.14\n    \n    int main() {\n        std::cout << \"The value of PI is: \" << PI << '\\n';\n        return 0;\n    }\n    \n\nCompilation\n-----------\n\nThe second stage is the actual compilation of the preprocessed source code. The compiler translates the modified source code into an intermediate representation, usually specific to the target processor architecture. This step also involves performing syntax checking, semantic analysis, and producing error messages for any issues encountered in the source code.\n\n**Code Example:**\n\n    int main() {\n        int a = 10;\n        int b = 20;\n        int sum = a + b;\n        return 0;\n    }\n    \n\nAssembly\n--------\n\nThe third stage is converting the compiler's intermediate representation into assembly language. This stage generates assembly code using mnemonics and syntax that is specific to the target processor architecture. Assemblers then convert this assembly code into object code (machine code).\n\n**Code Example (x86 Assembly):**\n\n    mov eax, 10\n    mov ebx, 20\n    add eax, ebx\n    \n\nLinking\n-------\n\nThe final stage is the linking of the object code with the necessary libraries and other object files. In this stage, the linker merges multiple object files and libraries, resolves external references from other modules or libraries, allocates memory addresses for functions and variables, and generates an executable file that can be run on the target platform.\n\n**Code Example (linking objects and libraries):**\n\n    $ g++ main.o -o main -lm\n    \n\nIn summary, the compilation process in C++ involves four primary stages: preprocessing, compilation, assembly, and linking. Each stage plays a crucial role in transforming the source code into an executable program.",
+    "links": []
+  },
+  "hSG6Aux39X0cXi6ADy2al": {
+    "title": "Compilers and Features",
+    "description": "Different C++ compilers have different features. Some of the most common features of C++ compilers are:\n\n*   **Optimization:** Compilers can optimize the code to improve the performance of the program. For example, they can remove redundant code, inline functions, and perform loop unrolling.\n*   **Debugging:** Compilers can generate debugging information that can be used to debug the program.\n*   **Warnings:** Compilers can generate warnings for suspicious code that may cause errors.\n\nSome of the most popular C++ compilers are:\n\n*   **GNU Compiler Collection (GCC):** GCC is a free and open-source compiler that supports many programming languages, including C++.\n*   **Clang:** Clang is a C++ compiler that is part of the LLVM project. It is designed to be compatible with GCC.\n*   **Microsoft Visual C++:** Microsoft Visual C++ is a C++ compiler that is part of the Microsoft Visual Studio IDE.\n*   **Intel C++ Compiler:** Intel C++ Compiler is a C++ compiler that is part of the Intel Parallel Studio XE suite.\n\nYou should go through the documentation of your compiler to learn more about its features.",
+    "links": []
+  },
+  "jVXFCo6puMxJ_ifn_uwim": {
+    "title": "Build Systems",
+    "description": "A build system is a collection of tools and utilities that automate the process of compiling, linking, and executing source code files in a project. The primary goal of build systems is to manage the complexity of the compilation process and produce a build (executable or binary files) in the end. In C++ (cpp), some common build systems are:\n\n*   **GNU Make**: It is a popular build system that uses `Makefile` to define the build process. It checks the dependencies and timestamps of source files to determine which files need to be compiled and linked.\n    \n    Code example:\n    \n        # Makefile\n        CXX = g++\n        CPPFLAGS = -Wall -std=c++11\n        TARGET = HelloWorld\n        \n        all: $(TARGET)\n        \n        $(TARGET): main.cpp\n            $(CXX) $(CPPFLAGS)main.cpp -o $(TARGET)\n        \n        clean:\n            rm $(TARGET)\n        \n    \n*   **CMake**: It is a cross-platform build system that focuses on defining project dependencies and managing build environments. CMake generates build files (like Makefiles) for different platforms and allows developers to write source code once and then compile it for different target platforms.\n    \n    Code example:\n    \n        # CMakeLists.txt\n        cmake_minimum_required(VERSION 3.10)\n        project(HelloWorld)\n        \n        set(CMAKE_CXX_STANDARD 11)\n        \n        add_executable(HelloWorld main.cpp)\n        \n    \n*   **Autotools**: Also known as GNU Build System, consists of the GNU Autoconf, Automake, and Libtool tools that enable developers to create portable software across different Unix-based systems. For a C++ project, you will need to create `configure.ac`, `Makefile.am` files with specific rules, and then run the following commands in the terminal to build the project:\n    \n        autoreconf --install\n        ./configure\n        make\n        make install\n        \n    \n*   **SCons**: This build system uses Python for build scripts, making it more expressive than GNU Make. It can also build for multiple platforms and configurations simultaneously.\n    \n    Code example:\n    \n        # SConstruct\n        env = Environment()\n        env.Program(target=\"HelloWorld\", source=[\"main.cpp\"])\n        \n    \n*   **Ninja**: A small and focused build system that takes a list of build targets specified in a human-readable text file and builds them as fast as possible.\n    \n    Code example:\n    \n        # build.ninja\n        rule cc\n          command = g++ -c $in -o $out\n        \n        rule link\n          command = g++ $in -o $out\n        \n        build main.o: cc main.cpp\n        build HelloWorld: link main.o\n          default HelloWorld\n        \n    \n\nThese are some of the popular build systems in C++, each with their own syntax and capabilities. While Make is widely used, CMake is a cross-platform build system that generates build files for other build systems like Make or Ninja. Autotools is suitable for creating portable software, SCons leverages Python for its build scripts, and Ninja focuses on fast build times.",
+    "links": []
+  },
+  "ysnXvSHGBMMozBJyXpHl5": {
+    "title": "CMAKE",
+    "description": "CMake is a powerful cross-platform build system that generates build files, Makefiles, or workspaces for various platforms and compilers. Unlike the others build systems, CMake does not actually build the project, it only generates the files needed by build tools. CMake is widely used, particularly in C++ projects, for its ease of use and flexibility.\n\nCMakeLists.txt\n--------------\n\nCMake uses a file called `CMakeLists.txt` to define settings, source files, libraries, and other configurations. A typical `CMakeLists.txt` for a simple project would look like:\n\n    cmake_minimum_required(VERSION 3.0)\n    \n    project(MyProject)\n    \n    set(SRC_DIR \"${CMAKE_CURRENT_LIST_DIR}/src\")\n    set(SOURCES \"${SRC_DIR}/main.cpp\" \"${SRC_DIR}/file1.cpp\" \"${SRC_DIR}/file2.cpp\")\n    \n    add_executable(${PROJECT_NAME} ${SOURCES})\n    \n    target_include_directories(${PROJECT_NAME} PRIVATE \"${CMAKE_CURRENT_LIST_DIR}/include\")\n    \n    set_target_properties(${PROJECT_NAME} PROPERTIES\n        CXX_STANDARD 14\n        CXX_STANDARD_REQUIRED ON\n        CXX_EXTENSIONS OFF\n    )\n    \n\nBuilding with CMake\n-------------------\n\nHere is an example of a simple build process using CMake:\n\n*   Create a new directory for the build.\n\n    mkdir build\n    cd build\n    \n\n*   Generate build files using CMake.\n\n    cmake ..\n    \n\nIn this example, `..` indicates the parent directory where `CMakeLists.txt` is located. The build files will be generated in the `build` directory.\n\n*   Build the project using the generated build files.\n\n    make\n    \n\nOr, on Windows with Visual Studio, you may use:\n\n    msbuild MyProject.sln\n    \n\nCMake makes it easy to manage large projects, define custom build configurations, and work with many different compilers and operating systems. Making it a widely chosen tool for managing build systems in C++ projects.",
+    "links": []
+  },
+  "t6rZLH7l8JQm99ax_fEJ9": {
+    "title": "Makefile",
+    "description": "A Makefile is a configuration file used by the `make` utility to automate the process of compiling and linking code in a C++ project. It consists of a set of rules and dependencies that help in building the target executable or library from source code files.\n\nMakefiles help developers save time, reduce errors, and ensure consistency in the build process. They achieve this by specifying the dependencies between different source files, and providing commands that generate output files (such as object files and executables) from input files (such as source code and headers).\n\nStructure of a Makefile\n-----------------------\n\nA typical Makefile has the following structure:\n\n*   **Variables**: Define variables to store commonly used values, such as compiler flags, directories, or target names.\n*   **Rules**: Define how to generate output files from input files using a set of commands. Each rule has a _target_, a set of _prerequisites_, and a _recipe_.\n*   **Phony targets**: Targets that do not represent actual files in the project but serve as a way to group related rules and invoke them using a single command.\n\nExample\n-------\n\nConsider a basic C++ project with the following directory structure:\n\n    project/\n    |-- include/\n    |   |-- header.h\n    |-- src/\n    |   |-- main.cpp\n    |-- Makefile\n    \n\nA simple Makefile for this project could be as follows:\n\n    # Variables\n    CXX = g++\n    CXXFLAGS = -Wall -Iinclude\n    SRC = src/main.cpp\n    OBJ = main.o\n    EXE = my_program\n    \n    # Rules\n    $(EXE): $(OBJ)\n    \t$(CXX) $(CXXFLAGS) -o $(EXE) $(OBJ)\n    \n    $(OBJ): $(SRC)\n    \t$(CXX) $(CXXFLAGS) -c $(SRC)\n    \n    # Phony targets\n    .PHONY: clean\n    clean:\n    \trm -f $(OBJ) $(EXE)\n    \n\nWith this Makefile, you can simply run `make` in the terminal to build the project, and `make clean` to remove the output files. The Makefile specifies the dependencies between the source code, object files, and the final executable, as well as the commands to compile and link them.\n\nSummary\n-------\n\nMakefiles provide a powerful way to automate building C++ projects using the `make` utility. They describe the dependencies and commands required to generate output files from source code, saving time and ensuring consistency in the build process.",
+    "links": []
+  },
+  "HkUCD5A_M9bJxJRElkK0x": {
+    "title": "Ninja",
+    "description": "Ninja is a small build system with a focus on speed. It is designed to handle large projects by generating build files that implement the minimal amount of work necessary to build the code. This results in faster build times, especially for large codebases. Ninja is often used in conjunction with other build systems like CMake, which can generate Ninja build files for you.\n\nNinja build files are typically named `build.ninja` and contain rules, build statements, and variable declarations. Here's a simple example of a Ninja build file for a C++ project:\n\n    # Variable declarations\n    cxx = g++\n    cflags = -Wall -Wextra -std=c++17\n    \n    # Rule for compiling the C++ files\n    rule cxx_compile\n      command = $cxx $cflags -c $in -o $out\n    \n    # Build statements for the source files\n    build main.o: cxx_compile main.cpp\n    build foo.o: cxx_compile foo.cpp\n    \n    # Rule for linking the object files\n    rule link\n      command = $cxx $in -o $out\n    \n    # Build statement for the final executable\n    build my_program: link main.o foo.o\n    \n\nTo build the project using this `build.ninja` file, simply run `ninja` in the terminal:\n\n    $ ninja\n    \n\nThis will build the `my_program` executable by first compiling the `main.cpp` and `foo.cpp` files into object files, and then linking them together.",
+    "links": []
+  },
+  "h29eJG1hWHa7vMhSqtfV2": {
+    "title": "Package Managers",
+    "description": "Package managers are tools that automate the process of installing, upgrading, and managing software (libraries, frameworks, and other dependencies) for a programming language, such as C++.\n\nSome popular package managers used in the C++ ecosystem include:\n\n*   **Conan**\n*   **vcpkg**\n*   **C++ Archive Network (cppan)**\n\nConan\n-----\n\n[Conan](https://conan.io/) is an open-source, decentralized, cross-platform package manager for C and C++ developers. It simplifies managing dependencies and reusing code, which benefits multi-platform development projects.\n\nFor example, installing a library using Conan:\n\n    conan install poco/1.9.4@\n    \n\nvcpkg\n-----\n\n[vcpkg](https://github.com/microsoft/vcpkg) is a cross-platform package manager created by Microsoft. It is an open-source library management system for C++ developers to build and manage their projects.\n\nFor example, installing a package using vcpkg:\n\n    ./vcpkg install boost:x64-windows\n    \n\nC++ Archive Network (cppan)\n---------------------------\n\n[cppan](https://cppan.org/) is a package manager and software repository for C++ developers, simplifying the process of managing and distributing C++ libraries and tools. It's now part of [build2](https://build2.org/), a build toolchain that provides a package manager.\n\nAn example of a `cppan.yml` file:\n\n    #\n    # cppan.yml\n    #\n    \n    project:\n      api_version: 1\n    \n      depend:\n        - pvt.cppan.demo.sqlite3\n        - pvt.cppan.demo.xz_utils.lzma\n    \n\nWith these package managers, you can streamline your development process and easily manage dependencies in your C++ projects. In addition, you can easily reuse the code in your projects to improve code quality and accelerate development.",
+    "links": []
+  },
+  "PKG5pACLfRS2ogfzBX47_": {
+    "title": "vcpkg",
+    "description": "`vcpkg` is a cross-platform, open-source package manager for C and C++ libraries. Developed by Microsoft, it simplifies the process of acquiring and building open-source libraries for your projects. `vcpkg` supports various platforms including Windows, Linux, and macOS, enabling you to easily manage and integrate external libraries into your projects.\n\nInstallation\n------------\n\nTo install `vcpkg`, follow these steps:\n\n*   Clone the repository:\n    \n        git clone https://github.com/Microsoft/vcpkg.git\n        \n    \n*   Change to the `vcpkg` directory and run the bootstrap script:\n    \n    *   On Windows:\n        \n            .\\bootstrap-vcpkg.bat\n            \n        \n    *   On Linux/macOS:\n        \n            ./bootstrap-vcpkg.sh\n            \n        \n*   (Optional) Add the `vcpkg` executable to your `PATH` environment variable for easy access.\n    \n\nBasic usage\n-----------\n\nHere are some basic examples of using `vcpkg`:\n\n*   Search for a package:\n    \n        vcpkg search <package_name>\n        \n    \n*   Install a package:\n    \n        vcpkg install <package_name>\n        \n    \n*   Remove a package:\n    \n        vcpkg remove <package_name>\n        \n    \n*   List installed packages:\n    \n        vcpkg list\n        \n    \n*   Integrate `vcpkg` with Visual Studio (Windows only):\n    \n        vcpkg integrate install\n        \n    \n\nFor additional documentation and advanced usage, you can refer to the [official GitHub repository](https://github.com/microsoft/vcpkg).",
+    "links": []
+  },
+  "g0s0F4mLV16eNvMBflN2e": {
+    "title": "NuGet",
+    "description": "[NuGet](https://www.nuget.org/) is a Microsoft-supported package manager for the .NET framework, mainly used in C# and other .NET languages, but also supports C++ projects with `PackageReference`. It allows you to easily add, update, and manage dependencies in your projects.\n\n### Installation\n\nYou can use NuGet either as a command-line tool or integrated in your preferred IDE like Visual Studio or Visual Studio Code. If you're using Visual Studio, it comes pre-installed. For other editors, you may need to download the command-line tool `nuget.exe`.\n\n### Usage\n\nYou can use NuGet to manage your C++ dependencies using the PackageReference format in vcxproj files:\n\n*   Tools > NuGet Package Manager > Manage NuGet Packages for Solution…\n*   Package source should be set to \"[nuget.org](http://nuget.org)\"\n*   Select the Projects tab\n*   Use the search box to find packages\n\nFor example, to install a package called \"PackageName\" for all configurations:\n\n    <Project>\n      <ItemGroup>\n        <PackageReference Include=\"PackageName\" Version=\"1.0.0\" />\n      </ItemGroup>\n      ...\n    </Project>\n    \n\n### NuGet Command-Line\n\nYou can also use the command-line tool `nuget.exe` for more advanced scenarios or for specific needs.\n\nHere's an example of installing a package using the command line:\n\n    nuget install PackageName\n    \n\nAnd updating a package:\n\n    nuget update PackageName\n    \n\nFor more information and detailed examples on using NuGet in your projects, please refer to the [official documentation](https://docs.microsoft.com/en-us/nuget/guides/native-packages).",
+    "links": []
+  },
+  "ky_UqizToTZHC_b77qFi2": {
+    "title": "Conan",
+    "description": "[Conan](https://conan.io/) is a popular package manager for C and C++ languages and is designed to be cross-platform, extensible, and easy to use. It allows developers to declare, manage, and fetch dependencies while automating the build process. Conan supports various build systems, such as CMake, Visual Studio, MSBuild, and more.\n\nInstallation\n------------\n\nTo install Conan, you can use pip, the Python package manager:\n\n    pip install conan\n    \n\nBasic Usage\n-----------\n\n*   Create a `conanfile.txt` file in your project root directory, specifying dependencies you need for your project:\n\n    [requires]\n    boost/1.75.0\n    \n    [generators]\n    cmake\n    \n\n*   Run the `conan install` command to fetch and build required dependencies:\n\n    mkdir build && cd build\n    conan install ..\n    \n\n*   Now build your project using your build system, for example CMake:\n\n    cmake .. -DCMAKE_BUILD_TYPE=Release\n    cmake --build .\n    \n\nCreating Packages\n-----------------\n\nTo create a package in Conan, you need to write a `conanfile.py` file with package information and build instructions.\n\nHere's an example:\n\n    from conans import ConanFile, CMake\n    \n    \n    class MyLibraryConan(ConanFile):\n        name = \"MyLibrary\"\n        version = \"0.1\"\n        license = \"MIT\"\n        url = \"https://github.com/username/mylibrary\"\n        description = \"A simple example library\"\n        settings = \"os\", \"compiler\", \"build_type\", \"arch\"\n        generators = \"cmake\"\n    \n        def build(self):\n            cmake = CMake(self)\n            cmake.configure(source_folder=\"src\")\n            cmake.build()\n    \n        def package(self):\n            self.copy(\"*.hpp\", dst=\"include\", src=\"src/include\")\n            self.copy(\"*.lib\", dst=\"lib\", keep_path=False)\n            self.copy(\"*.dll\", dst=\"bin\", keep_path=False)\n            self.copy(\"*.so\", dst=\"lib\", keep_path=False)\n            self.copy(\"*.a\", dst=\"lib\", keep_path=False)\n    \n        def package_info(self):\n            self.cpp_info.libs = [\"MyLibrary\"]\n    \n\nWith that setup, you can create a package by running:\n\n    conan create . username/channel\n    \n\nThis will compile the package and store it in your Conan cache. You can now use this package as a dependency in other projects.",
+    "links": []
+  },
+  "3ehBc2sKVlPj7dn4RVZCH": {
+    "title": "Spack",
+    "description": "[Spack](https://spack.io/) is a flexible package manager designed to support multiple versions, configurations, platforms, and compilers. It is particularly useful in High Performance Computing (HPC) environments and for those who require fine control over their software stack. Spack is a popular choice in scientific computing due to its support for various platforms such as Linux, macOS, and many supercomputers. It is designed to automatically search for and install dependencies, making it easy to build complex software.\n\nKey Features\n------------\n\n*   **Multi-Version Support**: Spack allows for the installation of multiple versions of packages, enabling users to work with different configurations depending on their needs.\n*   **Compiler Support**: Spack supports multiple compilers, including GCC, Clang, Intel, PGI, and others, allowing users to choose the best toolchain for their application.\n*   **Platform Support**: Spack can run on Linux, macOS, and various supercomputers, and it can even target multiple architectures within a single package.\n*   **Dependencies**: Spack takes care of dependencies, providing automatic installation and management of required packages.\n\nBasic Usage\n-----------\n\n*   To install Spack, clone its Git repository and set up your environment:\n    \n        git clone https://github.com/spack/spack.git\n        cd spack\n        . share/spack/setup-env.sh\n        \n    \n*   Install a package using Spack:\n    \n        spack install <package-name>\n        \n    \n    For example, to install `hdf5`:\n    \n        spack install hdf5\n        \n    \n*   Load a package in your environment:\n    \n        spack load <package-name>\n        \n    \n    For example, to load `hdf5`:\n    \n        spack load hdf5\n        \n    \n*   List installed packages:\n    \n        spack find\n        \n    \n*   Uninstall a package:\n    \n        spack uninstall <package-name>\n        \n    \n\nFor more advanced usage, like installing specific versions or using different compilers, consult the [Spack documentation](https://spack.readthedocs.io/).",
+    "links": []
+  },
+  "4kkX5g_-plX9zVqr0ZoiR": {
+    "title": "Working with Libraries",
+    "description": "When working with C++, you may need to use external libraries to assist in various tasks. Libraries are precompiled pieces of code that can be reused in your program to perform a specific task or provide a certain functionality. In C++, libraries can be either static libraries (.lib) or dynamic libraries (.dll in Windows, .so in Unix/Linux).\n\n**1\\. Static Libraries**\n\nStatic libraries are incorporated into your program during compile time. They are linked with your code, creating a larger executable file, but it does not require any external files during runtime.\n\nTo create a static library, you'll need to compile your source files into object files, then bundle them into an archive. You can use the following commands:\n\n    g++ -c sourcefile.cpp -o objectfile.o\n    ar rcs libmystaticlibrary.a objectfile.o\n    \n\nTo use a static library, you need to include the header files in your source code and then link the library during the compilation process:\n\n    g++ main.cpp -o myprogram -L/path/to/your/library/ -lmystaticlibrary\n    \n\nReplace `/path/to/your/library/` with the path where your `libmystaticlibrary.a` file is located.\n\n**2\\. Dynamic Libraries**\n\nDynamic libraries are loaded during runtime, which means that your executable file only contains references to these libraries. The libraries need to be available on the system where your program is running.\n\nTo create a dynamic library, you'll need to compile your source files into object files, then create a shared library:\n\n    g++ -c -fPIC sourcefile.cpp -o objectfile.o\n    g++ -shared -o libmydynamiclibrary.so objectfile.o\n    \n\nTo use a dynamic library, include the library's header files in your source code and then link the library during the compilation process:\n\n    g++ main.cpp -o myprogram -L/path/to/your/library/ -lmydynamiclibrary\n    \n\nReplace `/path/to/your/library/` with the path where your `libmydynamiclibrary.so` file is located.\n\n**NOTE:** When using dynamic libraries, make sure the library is in the system's search path for shared libraries. You may need to update the `LD_LIBRARY_PATH` environment variable on Unix/Linux systems or the `PATH` variable on Windows.\n\nIn conclusion, using libraries in C++ involves creating or obtaining a library (static or dynamic), including the library's header files in your source code, and linking the library during the compilation process. Be aware of the differences between static and dynamic libraries, and choose the right approach to suit your needs.",
+    "links": []
+  },
+  "5mNqH_AEiLxUmgurNW1Fq": {
+    "title": "Library Inclusion",
+    "description": "In C++ programming, inclusion refers to incorporating external libraries, header files, or other code files into your program. This process allows developers to access pre-built functions, classes, and variable declarations that can be used in their own code. There are two types of inclusion in C++:\n\n*   Header Inclusion\n*   Source Inclusion\n\n### Header Inclusion\n\nHeader inclusion involves including header files using the preprocessor directive `#include`. Header files are typically used to provide function prototypes, class declarations, and constant definitions that can be shared across multiple source files. There are two ways to include header files in your program:\n\n*   Angle brackets `<>`: Used for including standard library headers, like `iostream`, `vector`, or `algorithm`.\n\nExample:\n\n    #include <iostream>\n    #include <vector>\n    \n\n*   Double quotes `\"\"`: Used for including user-defined headers or headers provided by third-party libraries.\n\nExample:\n\n    #include \"myHeader.h\"\n    #include \"thirdPartyLibrary.h\"\n    \n\n### Source Inclusion\n\nSource inclusion refers to including the content of a source file directly in another source file. This approach is generally not recommended as it can lead to multiple definitions and increased compile times but it can occasionally be useful for certain tasks (e.g., templates or simple small programs). To include a source file, you can use the `#include` directive with double quotes, just like with header files:\n\nExample:\n\n    #include \"mySourceFile.cpp\"\n    \n\nRemember, using source inclusion for large projects or in situations where it's not necessary can lead to unexpected issues and should be avoided.",
+    "links": []
+  },
+  "sLVs95EOeHZldoKY0L_dH": {
+    "title": "Licensing",
+    "description": "Licensing is a crucial aspect of working with libraries in C++ because it determines the rights and limitations on how you can use, modify, and distribute a given library. There are various types of licenses applied to open-source libraries. Below is a brief overview of three common licenses:\n\nMIT License\n-----------\n\nThe MIT License is a permissive license that allows users to do whatever they want with the software code. They only need to include the original copyright, license notice, and a disclaimer of warranty in their copies.\n\nExample: Including the MIT License into your project can be done by simply adding the license file and a notice at the top of your source code files like:\n\n    /* Copyright (C) [year] [author]\n     * SPDX-License-Identifier:    MIT\n     */\n    \n\nGNU General Public License (GPL)\n--------------------------------\n\nThe GPL is a copyleft license that grants users the rights to use, study, share, and modify the software code. However, any changes made to the code or any software that uses GPL licensed code must also be distributed under the GPL license.\n\nExample: To include a GPL license in your project, include a `COPYING` file with the full text of the license and place a notice in your source code files like:\n\n    /* Copyright (C) [year] [author]\n     * SPDX-License-Identifier:    GPL-3.0-or-later\n     */\n    \n\nApache License 2.0\n------------------\n\nThe Apache License is a permissive license similar to the MIT license and allows users to do virtually anything with the software code. The primary difference is that it requires that any changes to the code are documented, and it provides specific terms for patent protection.\n\nExample: To include the Apache License in your project, add a `LICENSE` file with the full text of the license. Add a notice to your source code files like:\n\n    /* Copyright (C) [year] [author]\n     * SPDX-License-Identifier:    Apache-2.0\n     */\n    \n\nPlease note that these are brief summaries of the licenses, and there are many other licenses available for use in software projects. When using third-party libraries, it is crucial to understand and adhere to the terms of their respective licenses to avoid legal complications.",
+    "links": []
+  },
+  "1d7h5P1Q0RVHryKPVogQy": {
+    "title": "Boost",
+    "description": "",
+    "links": []
+  },
+  "Eq3TKSFJ2F2mrTHAaU2J4": {
+    "title": "OpenCV",
+    "description": "",
+    "links": []
+  },
+  "nOkniNXfXwPPlOEJHJoGl": {
+    "title": "POCO",
+    "description": "",
+    "links": []
+  },
+  "jpMCIWQko7p3ndezYHL4D": {
+    "title": "protobuf",
+    "description": "",
+    "links": []
+  },
+  "621J9W4xCofumNZGo4TZT": {
+    "title": "gRPC",
+    "description": "",
+    "links": []
+  },
+  "j_eNHhs0J08Dt7HVbo4Q2": {
+    "title": "Tensorflow",
+    "description": "",
+    "links": []
+  },
+  "tEkvlJPAkD5fji-MMODL7": {
+    "title": "pybind11",
+    "description": "",
+    "links": []
+  },
+  "q64qFxoCrR38RPsN2lC8x": {
+    "title": "spdlog",
+    "description": "",
+    "links": []
+  },
+  "GGZJaYpRENaqloJzt0VtY": {
+    "title": "opencl",
+    "description": "",
+    "links": []
+  },
+  "1CqQgmHDeo1HlPdpUJS7H": {
+    "title": "fmt",
+    "description": "",
+    "links": []
+  },
+  "et-dXKPYuyVW6eV2K3CM8": {
+    "title": "ranges_v3",
+    "description": "",
+    "links": []
+  },
+  "MrAM-viRaF8DSxB6sVdD9": {
+    "title": "gtest / gmock",
+    "description": "",
+    "links": []
+  },
+  "gAZ9Dqgj1_UkaLzVgzx1t": {
+    "title": "Qt",
+    "description": "",
+    "links": []
+  },
+  "s13jQuaC6gw0Lab3Cbyy6": {
+    "title": "Catch2",
+    "description": "",
+    "links": []
+  },
+  "O0lVEMTAV1pq9sYCKQvh_": {
+    "title": "Orbit Profiler",
+    "description": "",
+    "links": []
+  },
+  "88pr5aN7cctZfDVVo-2ns": {
+    "title": "PyTorch C++",
+    "description": "",
+    "links": []
+  }
+}

public/roadmap-content/data-analyst.json

@@ -19,11 +19,6 @@
     "title": "Types of Data Analytics",
     "description": "Data Analytics has proven to be a critical part of decision-making in modern business ventures. It is responsible for discovering, interpreting, and transforming data into valuable information. Different types of data analytics look at past, present, or predictive views of business operations.\n\nData Analysts, as ambassadors of this domain, employ these types, to answer various questions:\n\n*   Descriptive Analytics _(what happened in the past?)_\n*   Diagnostic Analytics _(why did it happened in the past?)_\n*   Predictive Analytics _(what will happen in the future?)_\n*   Prescriptive Analytics _(how can we make it happen?)_\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Data Analytics and its type",
-        "url": "https://www.geeksforgeeks.org/data-analytics-and-its-type/",
-        "type": "article"
-      },
       {
         "title": "The 4 Types of Data Analysis: Ultimate Guide",
         "url": "https://careerfoundry.com/en/blog/data-analytics/different-types-of-data-analysis/",
@@ -206,10 +201,16 @@
       }
     ]
   },
-  "analysis--reporting-with-excel@sgXIjVTbwdwdYoaxN3XBM.md": {
+  "sgXIjVTbwdwdYoaxN3XBM": {
     "title": "Analysis / Reporting with Excel",
-    "description": "",
-    "links": []
+    "description": "Excel is a powerful tool utilized by data analysts worldwide to store, manipulate, and analyze data. It offers a vast array of features such as pivot tables, graphs and a powerful suite of formulas and functions to help sift through large sets of data. A data analyst uses Excel to perform a wide range of tasks, from simple data entry and cleaning, to more complex statistical analysis and predictive modeling. Proficiency in Excel is often a key requirement for a data analyst, as its versatility and ubiquity make it an indispensable tool in the field of data analysis.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Microsoft Excel Course",
+        "url": "https://support.microsoft.com/en-us/office/excel-video-training-9bc05390-e94c-46af-a5b3-d7c22f6990bb",
+        "type": "course"
+      }
+    ]
   },
   "wME4MSldOWlMB54ekpReS": {
     "title": "IF",

public/roadmap-content/design-system.json

@@ -0,0 +1,982 @@
+{
+  "understand-the-basics@uvnV1IjE8RV-FKDxHntUU.md": {
+    "title": "Understand the Basics",
+    "description": "",
+    "links": []
+  },
+  "4PrkkoZ5fY-oow0O-bVhu": {
+    "title": "What is a Design System?",
+    "description": "A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Everything you need to know about Design Systems",
+        "url": "https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems 101",
+        "url": "https://www.nngroup.com/articles/design-systems-101/",
+        "type": "article"
+      },
+      {
+        "title": "A comprehensive guide to design systems",
+        "url": "https://www.invisionapp.com/inside-design/guide-to-design-systems/",
+        "type": "article"
+      }
+    ]
+  },
+  "2rlmLn_yQQV-7DpX1qT98": {
+    "title": "Need of Design System",
+    "description": "Having a solid design system speeds up your work by making the product team more efficient, and it creates consistency and harmony within the product and brand ecosystem. A strong design system takes the burden off individual designers to think through commonly recurring design problems. With a full library of pre-approved elements, designers can focus on bigger problems like creating seamless, intuitive flows that delight users. That kind of efficiency pays huge dividends over time.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Why You Need a Strong Design System (and How to Build One)",
+        "url": "https://www.drawbackwards.com/blog/why-you-need-a-strong-design-system-and-how-to-build-one",
+        "type": "article"
+      },
+      {
+        "title": "On Design Systems: Sell The Output, Not The Workflow",
+        "url": "https://www.smashingmagazine.com/2016/05/design-systems-responsive-design-sell-output-not-workflow/",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems, when and how much?",
+        "url": "https://www.youtube.com/watch?v=Hx02SaL_IH0",
+        "type": "video"
+      }
+    ]
+  },
+  "J5mU0v491qrm-mr1W3Msd": {
+    "title": "Design System vs Component Library",
+    "description": "A component library is just a collection of visuals i.e. colours, button stylings, fonts, etc. A Design System takes it to the next level by including standards and documentation around the look and usage of each component. The Design System acts as the single-source of truth.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "A Design System: So Much More Than A Component Library",
+        "url": "https://www.architech.ca/a-design-system-so-much-more-than-a-component-library",
+        "type": "article"
+      },
+      {
+        "title": "Design System vs UI Component Library vs Brand Style Guide",
+        "url": "https://prototype.net/blog/design-system-component-library-style-guide",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems vs Pattern Libraries vs Style Guides vs Component Libraries",
+        "url": "https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/",
+        "type": "article"
+      }
+    ]
+  },
+  "6r9XbwlBtHmJrhviG2cTD": {
+    "title": "What is Atomic Design",
+    "description": "Atomic design (by Brad Frost) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Atomic Design Principles & Methodology 101",
+        "url": "https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/",
+        "type": "article"
+      },
+      {
+        "title": "Atomic Design Methodology",
+        "url": "https://atomicdesign.bradfrost.com/chapter-2/",
+        "type": "article"
+      },
+      {
+        "title": "Atomic Design and UI Components: Theory to Practice",
+        "url": "https://blog.bitsrc.io/atomic-design-and-ui-components-theory-to-practice-f200db337c24",
+        "type": "article"
+      }
+    ]
+  },
+  "_3_tFOpQisx6DSP4Yc2E2": {
+    "title": "Stakeholders Involved in Building",
+    "description": "Building an effective design system is not an individual responsibility, you need more than just designers. Here’s a quick list of the disciplines that can be represented in your team to create an effective design system:\n\n*   **Designers:** to define the visual elements of the system\n*   **Frontend Developers:** To create modular efficient code\n*   **Accessibility Experts:** Accessibility experts to ensure your system conforms to standards like WCAG\n*   **Performance Experts:** who can ensure your system loads quickly on all devices\n*   **Content Strategists:** who can help the team nail the voice and tone of the system\n*   **Researchers:** who can help you understand customer needs\n*   **Product Managers:** to ensure the system is aligning to customer needs\n*   **Leaders:** (VPs and directors) to champion and align the vision throughout the company including up to executive leadership\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Designing the Design System",
+        "url": "https://www.designbetter.co/design-systems-handbook/designing-design-system",
+        "type": "article"
+      }
+    ]
+  },
+  "hauTvrBOAHgrUnO_m_kDM": {
+    "title": "Design System Examples",
+    "description": "Visit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Collection of Open Source Design Systems",
+        "url": "https://github.com/alexpate/awesome-design-systems",
+        "type": "opensource"
+      },
+      {
+        "title": "Material Design (Google)",
+        "url": "https://material.io/",
+        "type": "article"
+      },
+      {
+        "title": "Carbon Design System (IBM)",
+        "url": "https://carbondesignsystem.com/",
+        "type": "article"
+      },
+      {
+        "title": "Atlassian Design System",
+        "url": "https://atlassian.design/",
+        "type": "article"
+      },
+      {
+        "title": "Polaris Design System (Shopify)",
+        "url": "https://polaris.shopify.com/",
+        "type": "article"
+      },
+      {
+        "title": "Gov.uk Design System",
+        "url": "https://design-system.service.gov.uk/",
+        "type": "article"
+      }
+    ]
+  },
+  "de0TKvmFTDmKGZc5X7iFq": {
+    "title": "Terminology",
+    "description": "Design systems can be tricky if you don’t know what certain words mean. Have a look at the roadmap nodes as well as follow the link below to read the glossary.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems Glossary",
+        "url": "https://web.archive.org/web/20220620075140/https://superfriendly.com/design-systems/glossary/",
+        "type": "article"
+      }
+    ]
+  },
+  "97cpJyKBKNAq1P_pQZH-t": {
+    "title": "Component",
+    "description": "Components are the reusable building blocks of a design system. Each component meets a specific interaction or UI needs, and is specifically created to work together to create patterns and intuitive user experiences.",
+    "links": []
+  },
+  "vJ4WytrzY7j10mo8S3O1u": {
+    "title": "Component Library",
+    "description": "A component library is a collection of all the components used in a website, software or app. Some of the common tools to showcase and browse components in a component library include are given below:\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Pattern Lab",
+        "url": "https://patternlab.io/",
+        "type": "article"
+      },
+      {
+        "title": "Fractal",
+        "url": "https://fractal.build/",
+        "type": "article"
+      },
+      {
+        "title": "Storybook",
+        "url": "https://storybook.js.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "fPUuXrlchna3K00KcY4O6": {
+    "title": "Design Language",
+    "description": "A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Design Language.. really?",
+        "url": "https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793",
+        "type": "article"
+      },
+      {
+        "title": "How to Develop a Design Language",
+        "url": "https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language/",
+        "type": "article"
+      },
+      {
+        "title": "What Actually Constitutes Design Language?",
+        "url": "https://www.uxpin.com/studio/blog/design-language/",
+        "type": "article"
+      },
+      {
+        "title": "Visual Design Language: The Building Blocks Of Design",
+        "url": "https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/",
+        "type": "article"
+      }
+    ]
+  },
+  "kifE3JE2immnU1O3-toZf": {
+    "title": "Governance",
+    "description": "Governance is a framework for clarifying roles, responsibilities, and authority over decisions. Having that clarity ensures that decisions for the design system funnel smoothly through the governance process\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Governance is a design system’s friend",
+        "url": "https://zeroheight.com/blog/governance-is-a-design-systems-friend",
+        "type": "article"
+      },
+      {
+        "title": "Design System Governance – Scale Your Design",
+        "url": "https://www.uxpin.com/studio/blog/design-system-governance/",
+        "type": "article"
+      },
+      {
+        "title": "Governance by design: Building successful design systems",
+        "url": "https://rangle.io/blog/governance-by-design-building-successful-design-systems/",
+        "type": "article"
+      },
+      {
+        "title": "Team Models for Scaling a Design System",
+        "url": "https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0",
+        "type": "article"
+      }
+    ]
+  },
+  "mlBzJ2YvBr9QuOthKdj0p": {
+    "title": "Guidelines",
+    "description": "Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Guidelines",
+        "url": "https://www.interaction-design.org/literature/topics/design-guidelines",
+        "type": "article"
+      }
+    ]
+  },
+  "7xPT8rUX3hjSWbxH_FfQs": {
+    "title": "Pattern",
+    "description": "Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns often use one or more components and explain how to adapt them to the context. Some sample patterns could be user signing in to the application or performing the checkout operation.",
+    "links": []
+  },
+  "4dzoZmkNHPedgLqLy93t8": {
+    "title": "Pilot",
+    "description": "Pilots are one of the best ways to put your design system through its paces, especially before the design system even gets to a v1. Like television pilots help test audience reactions to a series concept without investing significant resources to create the whole thing, application pilots are a good foundation for ensuring your design system’s design and code are battle-tested.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems: Pilots & Scorecards",
+        "url": "https://superfriendly.com/design-systems/articles/design-systems-pilots-scorecards/",
+        "type": "article"
+      }
+    ]
+  },
+  "jETJVuS_EczJiQASLqaQr": {
+    "title": "Token",
+    "description": "Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What Are Design Tokens?",
+        "url": "https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/",
+        "type": "article"
+      }
+    ]
+  },
+  "lUObv2N7eH3Jdnwwd5vmI": {
+    "title": "UI Kit",
+    "description": "As it relates to a design system, a UI Kit is a representation of coded components created in a way that designers who don’t know code can create interface mockups. Examples of UI kits are Sketch libraries and [Figma design systems](https://www.figma.com/blog/how-to-build-your-design-system-in-figma/).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design System vs UI Kit",
+        "url": "https://uigstudio.com/insights/design-system-vs-ui-kit",
+        "type": "article"
+      },
+      {
+        "title": "Your sketch library is not a design system",
+        "url": "http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/",
+        "type": "article"
+      }
+    ]
+  },
+  "dUaoMARPabiD4DRqdkaer": {
+    "title": "Making a Design System",
+    "description": "First step in building a design system is identifying [if you even need a design system](https://sparkbox.com/foundry/when_not_to_use_a_design_system).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems: Step-by-Step Guide to Creating Your Own",
+        "url": "https://www.uxpin.com/create-design-system-guide/",
+        "type": "article"
+      },
+      {
+        "title": "Does My Organization Need a Design System?",
+        "url": "https://www.method.com/insights/does-my-organization-need-a-design-system/",
+        "type": "article"
+      },
+      {
+        "title": "Introducing Design Systems Into Chaos - Diana Mounter, GitHub",
+        "url": "https://www.youtube.com/watch?v=FZSi1bK-BRM",
+        "type": "video"
+      },
+      {
+        "title": "Design Systems, when and how much?",
+        "url": "https://www.youtube.com/watch?v=Hx02SaL_IH0",
+        "type": "video"
+      },
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "-9I3fTpnQlmcZmIIuQiPe": {
+    "title": "Making it from Scratch",
+    "description": "If you are building a Design System from Scratch, you may skip the \"Existing Design Analysis\" node of the roadmap and start with \"Creating Design Language\".\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "z5gBy7BjlBKwbYbxXtoDA": {
+    "title": "Making it from Existing Design",
+    "description": "If you are creating a Design System from pre-existing product design, there is an additional step to perform the existing design analysis, understand the existing design process, perform a visual audit, identify design elements and components and so on.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "8eWhvW2zDIxMGHaXl0Y9i": {
+    "title": "Existing Design Analysis",
+    "description": "First step in creating a design system from an existing design is performing a design analysis and understanding what you will be working with to identify the requirements and prepare a plan. Performing the analysis may consist of:\n\n*   Understanding the Existing Design Process\n*   Performing Visual Audit\n*   Identifying Design Elements\n*   Identify Common Components\n*   Understanding the A/B Testing and Experimentation Needs\n*   Understanding any Locale or regional requirements (such as LTR/RTL).\n*   Documenting your findings",
+    "links": []
+  },
+  "NKm-gXbt5Y7dDwKVkPHjX": {
+    "title": "Performing a Visual Audit",
+    "description": "Take screenshots of your current product with the help of your team. You can use any presentation software like Google Slides or print and pin them on foam-core boards. Group the screenshots into categories like buttons, navigation, forms, tables, charts, lists etc.\n\nNow, review each category to find inconsistencies and note areas for improvement with your team. Use a tool like [CSS Stats](https://cssstats.com/) to see how many unique colors, typefaces you have in your style sheets.",
+    "links": []
+  },
+  "CnsDoZ3gIaPeNbwHuZXYJ": {
+    "title": "Identify Existing Design Process",
+    "description": "To better understand the kind of design system you would like to implement, you need to start by reviewing and analyzing the current approach for design at your company. Find the answers to the following questions:\n\n*   What is the design process that your company follows?\n*   What are the existing tools that your company uses?\n\nIt’s also recommended to evaluate the level of design maturity of the product teams. This knowledge will help you estimate the time required to introduce the system to your organization.",
+    "links": []
+  },
+  "aak3227IDDJMh0MquQX6m": {
+    "title": "Icons",
+    "description": "Icons are visual symbols that communicate meaning quickly. They should maintain consistent style, use a grid system, provide multiple sizes, organize into semantic categories, ensure accessibility, consider cultural neutrality, be available in multiple formats, include interactive states, and follow systematic versioning.",
+    "links": []
+  },
+  "-MrrapoyFWKhSeE2PZ9mb": {
+    "title": "Visual Forms",
+    "description": "Visual forms focus on aesthetic and interactive design aspects of form components. Effective design should establish clear information architecture, create consistent field styling, develop harmonious label positioning, design clear error communication, implement progressive enhancement, prioritize mobile-first design, and ensure cross-platform consistency.",
+    "links": []
+  },
+  "78RsPhsWpl00AbkwKXUxL": {
+    "title": "Sizing",
+    "description": "Sizing tokens establish consistent dimensions across components and layouts. An effective system should establish a foundational unit, create predefined size variations, ensure minimum accessibility requirements, define standard icon sizes, establish container dimensions, implement fluid sizing, and account for platform-specific requirements.",
+    "links": []
+  },
+  "GtLYBPJjdZwG0qgA7erk7": {
+    "title": "Spaces",
+    "description": "Spacing tokens define white space between elements, creating visual rhythm and clear relationships. An effective system should establish a foundational unit, create systematic scales, define consistent internal spacing, establish layout guidelines, implement fluid spacing, create meaningful categories, and ensure cross-platform consistency.",
+    "links": []
+  },
+  "2prUeRYbSJTYjo2quJIKs": {
+    "title": "Color",
+    "description": "Color establishes brand identity and visual hierarchy in design systems. A comprehensive color system should organize colors logically, meet WCAG accessibility standards, support light/dark themes, create semantic categories, establish systematic naming, balance brand expression with function, and provide multiple formats.",
+    "links": []
+  },
+  "ODQ8zrHc2rsc8PN-APKvz": {
+    "title": "Typography",
+    "description": "Typography establishes hierarchy, readability, and brand personality. An effective system should develop harmonious scales using mathematical ratios, choose appropriate typefaces, implement fluid typography, establish consistent line-heights, define font weight hierarchy, ensure accessibility compliance, and provide clear usage guidelines.",
+    "links": []
+  },
+  "_dIMuXWI73ogboGjnLIpT": {
+    "title": "Avatar",
+    "description": "Avatars represent users or entities in interfaces. They should support multiple shapes (circular, square), various sizes, handle missing images with initials or default icons, include status indicators, maintain image quality standards, ensure accessibility, provide loading states, and support group arrangements with proper interactive feedback.",
+    "links": []
+  },
+  "UG4AIgJBfZpuhia4Y1K5v": {
+    "title": "Badges",
+    "description": "Badges are small status indicators that communicate information about objects or actions. Effective design should include numeric indicators for notifications, status badges with distinct colors, category labels, interactive states, multiple sizes, semantic color integration, consistent positioning, content guidelines, and proper accessibility.",
+    "links": []
+  },
+  "5DUobzueMZbScyTZTHpCS": {
+    "title": "Banners",
+    "description": "Banners communicate important information at the top of pages. They should support different message types with distinct visuals, various positioning options, clear dismissal mechanisms, relevant actions, consistent iconography, mobile adaptations, subtle animations, content guidelines, proper accessibility, and stacking rules for multiple banners.",
+    "links": []
+  },
+  "s6oqvHgwK4Cwyx-JENBbY": {
+    "title": "Buttons",
+    "description": "Buttons enable user actions and require clear visual hierarchy (primary, secondary, tertiary), comprehensive interactive states, multiple sizes, icon support, content guidelines, minimum 44px touch targets, loading indicators, responsive behavior, proper accessibility with ARIA labels, and subtle animations.",
+    "links": []
+  },
+  "yLLAUGbGUHBTEDkZNK0fm": {
+    "title": "Cards",
+    "description": "Cards are flexible content containers that group related information and actions. They require clear content hierarchy, consistent elevation systems, responsive behavior, distinct interactive states, media support, defined action areas, content variants, loading states, proper accessibility, and consistent spacing aligned with the design system.",
+    "links": []
+  },
+  "hzVwLVzAij6TgPTcNHyhv": {
+    "title": "Dropdowns",
+    "description": "Dropdowns reveal option lists when activated to save space. They need clear triggers with visual indicators, organized options with grouping, search/filtering for long lists, multi-select support, smart positioning, full keyboard navigation, loading states, mobile adaptations, proper accessibility, and performance optimization.",
+    "links": []
+  },
+  "5LCMzBnnS206t5EtgaUx8": {
+    "title": "Forms",
+    "description": "Forms collect user input and require standardized input components, comprehensive validation systems, effective labeling strategies, consistent layouts, clear error handling, progressive disclosure, required field indicators, auto-complete integration, proper accessibility, and mobile optimization.",
+    "links": []
+  },
+  "Ia1gYzepJOTvTro961eSj": {
+    "title": "...other",
+    "description": "Specialized elements beyond core components include badges for notifications, breadcrumbs for navigation, progress indicators, tooltips for help, pagination for browsing, tab systems, accordions for collapsible content, modals for focused interactions, notification systems, and basic data visualization elements.",
+    "links": []
+  },
+  "ILRDAnpfGHCZq-FBlbfDO": {
+    "title": "A/B Tests & Experiments",
+    "description": "Understand how the team implements A/B tests and experiments on different screens and if the new design system should accommodate any necessary requirements.",
+    "links": []
+  },
+  "pRJ9wEPNfFx_6EYB501vk": {
+    "title": "Regional Requirements",
+    "description": "Understand any regional requirements such as LTR or any other UX variations that your design system should accommodate.",
+    "links": []
+  },
+  "-b4GjLpL_ppDMJSiChTef": {
+    "title": "Documentation",
+    "description": "Organize and document the results of visual audit, design elements, components with variations, states, patterns found, any existing documentation, current design process, and considerations. This documentation will be shared across the team and act as a guide when building the new design system.",
+    "links": []
+  },
+  "JnaNZ9MfMrXQrjW2wABzB": {
+    "title": "Creating Design Language",
+    "description": "Like any language, a design language is a methodical way of communicating with your audience through your approach to product design. It’s the cornerstone of consistent customer experiences.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Design Language.. really?",
+        "url": "https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793",
+        "type": "article"
+      },
+      {
+        "title": "How to Develop a Design Language",
+        "url": "https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language/",
+        "type": "article"
+      },
+      {
+        "title": "What Actually Constitutes Design Language?",
+        "url": "https://www.uxpin.com/studio/blog/design-language/",
+        "type": "article"
+      },
+      {
+        "title": "Visual Design Language: The Building Blocks Of Design",
+        "url": "https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/",
+        "type": "article"
+      }
+    ]
+  },
+  "toyNbBB5tbyiJZkzuklIv": {
+    "title": "Writing Guidelines",
+    "description": "Every consistent experience needs watertight writing. Laying down the foundations for your house style early keeps everything in line with consistent grammar, style choices and action-oriented language to help your design.",
+    "links": []
+  },
+  "fnlVIgsmyxj2UVCCjM-8g": {
+    "title": "Tone of Voice",
+    "description": "A clear tone of voice defines how you speak to your audience at every moment in their journey, helping them get wherever they want to go.",
+    "links": []
+  },
+  "Zspu1SsuTE34PVmYePcs4": {
+    "title": "Terminology",
+    "description": "Create the standard terms and phrases that need to be kept the same throughout the user experience, speeding up the design process and unifying your voice.",
+    "links": []
+  },
+  "1RJrMVJf_3clM7E5OML-f": {
+    "title": "Design Principles",
+    "description": "The considerations that guide the basis of your practice. They outline how you approach design from a philosophical perspective and help with everyday decisions.",
+    "links": []
+  },
+  "cMfsRtvzvDZZJ0TqeUOxm": {
+    "title": "Vision",
+    "description": "Brand vision serves as the foundation for design system decisions, providing purpose and direction. An effective vision should articulate organizational purpose, identify core values, visualize future success, prioritize user needs, clarify brand uniqueness, account for cultural considerations, and connect to measurable goals.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Creating Brand Vision",
+        "url": "https://www.interaction-design.org/literature/article/branding-in-ux",
+        "type": "article"
+      },
+      {
+        "title": "Vision-Driven Design Systems",
+        "url": "https://bradfrost.com/blog/post/the-design-system-ecosystem/",
+        "type": "article"
+      },
+      {
+        "title": "Brand Strategy for Design",
+        "url": "https://alistapart.com/article/creating-a-brand-identity/",
+        "type": "article"
+      },
+      {
+        "title": "Purpose-Driven Design",
+        "url": "https://designsystem.digital.gov/design-tokens/brand/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Brand Strategy",
+        "url": "https://app.daily.dev/tags/branding?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "Wn8CylBz-hyl9-iXcUVTO": {
+    "title": "Monochrome Version",
+    "description": "A monochrome version of your logo that looks good on top of photography or when it’s printed with a poor quality printer.",
+    "links": []
+  },
+  "FA3JsZgNhKrgNHVtVreol": {
+    "title": "Small Use Guidance",
+    "description": "Your logo must perform well and be recognisable at all sizes. Tips for using your logo in these cases will minimise the risk of it being misused.",
+    "links": [
+      {
+        "title": "Everything You Need to Know About Logo Usage Guidelines",
+        "url": "https://www.tailorbrands.com/blog/logo-usage-guidelines",
+        "type": "article"
+      }
+    ]
+  },
+  "7n61402xwhIgJ7dPHg8q7": {
+    "title": "Placement Guidance",
+    "description": "Logo placement guidance ensures consistent brand representation through clear positioning, sizing, and clearance rules. Effective guidelines should define minimum clearance areas, establish preferred positions for different contexts, provide size specifications, define background treatments, and account for platform-specific requirements.",
+    "links": []
+  },
+  "RmSFwKqL9yXXxGKZusKWX": {
+    "title": "Usage Guidance",
+    "description": "Logo usage guidance provides rules for proper implementation to maintain brand consistency. Effective guidance should establish clear examples of proper usage and mistakes to avoid, define logo variations, specify color requirements, prohibit unauthorized alterations, and include approval processes for new contexts.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Logo Usage Best Practices",
+        "url": "https://99designs.com/blog/tips/logo-usage-guidelines/",
+        "type": "article"
+      },
+      {
+        "title": "Brand Guidelines Development",
+        "url": "https://designsystem.digital.gov/design-tokens/logo/",
+        "type": "article"
+      },
+      {
+        "title": "Trademark and Logo Legal Guidelines",
+        "url": "https://www.uspto.gov/trademarks-getting-started/trademark-basics",
+        "type": "article"
+      },
+      {
+        "title": "Brand Identity Protection",
+        "url": "https://www.brandfolder.com/blog/brand-guidelines",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Brand Management",
+        "url": "https://app.daily.dev/tags/branding?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "-6LPUMRm-SqvRVEWPDFl8": {
+    "title": "File Formats",
+    "description": "Providing a variety of formats for the vector version of your logo will make it easier for others to work and prevent anyone from redrawing it.",
+    "links": [
+      {
+        "title": "What is a Vector Logo and Why You Need It",
+        "url": "https://www.renderforest.com/blog/vector-logo",
+        "type": "article"
+      }
+    ]
+  },
+  "aLtOGjNFxaRzg0PI-ed99": {
+    "title": "Accessibility",
+    "description": "Guidelines for how you approach accessibility and how you leverage colour, hierarchy and assistive technologies to help your users.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Introduction to Web Accessibility",
+        "url": "https://www.w3.org/WAI/fundamentals/accessibility-intro/",
+        "type": "article"
+      },
+      {
+        "title": "What is Accessibility? by Mozilla",
+        "url": "https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility",
+        "type": "article"
+      },
+      {
+        "title": "Accessibility Principles",
+        "url": "https://www.w3.org/WAI/fundamentals/accessibility-principles/",
+        "type": "article"
+      },
+      {
+        "title": "WebAIMs Website (Web Accessibility In Mind)",
+        "url": "https://webaim.org/",
+        "type": "article"
+      },
+      {
+        "title": "WAVE Web Accessibility Evaluation Tool",
+        "url": "https://wave.webaim.org/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Accessibility",
+        "url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "PlW8mHnOTyYnbtl0zUSG9": {
+    "title": "User Onboarding",
+    "description": "How you onboard your users to your product or a new feature and give them a great experience from the start.",
+    "links": [
+      {
+        "title": "What is user onboarding? ",
+        "url": "https://www.youtube.com/watch?v=PatIqbGEQe4",
+        "type": "video"
+      }
+    ]
+  },
+  "bD-DjUbAA6l2eK1R9ITcK": {
+    "title": "Microcopy Guidelines",
+    "description": "The standard way to write for the components in your design system. These take platform conventions and best practices for writing all into consideration.",
+    "links": []
+  },
+  "a53cl6ZKvYXxG25Ii2_zu": {
+    "title": "Defining Design Tokens",
+    "description": "Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What Are Design Tokens?",
+        "url": "https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/",
+        "type": "article"
+      }
+    ]
+  },
+  "fW0cEy2SB0HDbiF7QA7Ev": {
+    "title": "Accessibility",
+    "description": "Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them.",
+    "links": []
+  },
+  "__Pv19gRr2SFknVnfm0Mr": {
+    "title": "Functional Colors",
+    "description": "Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text.",
+    "links": []
+  },
+  "kxUnqpydDwB73IwrCPZM0": {
+    "title": "Dark Mode",
+    "description": "Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see.",
+    "links": []
+  },
+  "XDfxs5cgjSuTEprZi2Z5b": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "wQbMhC7q3qdKYf_pX5qL4": {
+    "title": "Units",
+    "description": "Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values.",
+    "links": []
+  },
+  "8f2V-rM7soorTTvNo5Vcx": {
+    "title": "Grid",
+    "description": "Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily.",
+    "links": []
+  },
+  "djwnJq9Y_Hx1Ynw01wr_u": {
+    "title": "Breakpoints",
+    "description": "Predefine the screen sizes and orientations your grid will adapt to.",
+    "links": []
+  },
+  "dXaYOwTAnYSlipNEBSV9l": {
+    "title": "Spacking",
+    "description": "Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid.",
+    "links": []
+  },
+  "8YVCtgYRHR3VcpUJXMVwP": {
+    "title": "Responsiveness",
+    "description": "Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout.",
+    "links": []
+  },
+  "Zl7MVllzJgObruYtlibKf": {
+    "title": "Grid Relation",
+    "description": "Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes.",
+    "links": []
+  },
+  "L2NHddsv5RGR_BW0I3f4T": {
+    "title": "Readability",
+    "description": "Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text.",
+    "links": []
+  },
+  "wFL9axjaPcVvI8XWduxgz": {
+    "title": "Performance",
+    "description": "Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem.",
+    "links": []
+  },
+  "Jab5LO0mGhTy1cU61Catu": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "DhrnZwQODG0P7D-27_3ec": {
+    "title": "Accessibility",
+    "description": "For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons.",
+    "links": []
+  },
+  "SPK1i0XuHpNEWyi1iIxrV": {
+    "title": "Style",
+    "description": "Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability.",
+    "links": []
+  },
+  "wiclAEEYioRgLmXFcKQ4E": {
+    "title": "Naming",
+    "description": "Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.",
+    "links": []
+  },
+  "6Hmj_TeQ563jshqAAl__I": {
+    "title": "Grid Relation",
+    "description": "Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text.",
+    "links": []
+  },
+  "w3LS85eFerscaxb2Xp-dP": {
+    "title": "Sizes",
+    "description": "Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes.",
+    "links": []
+  },
+  "HDf2L4F1f8uUGpVaf7Y7z": {
+    "title": "Keywords",
+    "description": "Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system.",
+    "links": []
+  },
+  "Y0KxHVrcNGHDao-38Oz3w": {
+    "title": "Reserved Icons",
+    "description": "Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience.",
+    "links": []
+  },
+  "eTxhpC3AQIMcUax6WFU9U": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "Hw_LQInG6OtSwDXch3Lvg": {
+    "title": "Creating Core Components",
+    "description": "Components are the main building blocks for user interfaces. Building a reusable component library enhances your product development workflow by reducing design and tech debt and speeding up the process. Core components can’t be broken down into granular pieces without losing their meaning.",
+    "links": []
+  },
+  "h3TZY1yBkzLYUK6W7K7xs": {
+    "title": "Avatar",
+    "description": "Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.\n\n*   **Image:** Avatars should mask an image into their shape and work with any image size since they may get this image from unknown data sources.\n*   **Image Fallback:** There should be fallbacks when there’s no image available. This can be done with placeholder images or initials.\n*   **Accessibility:** Always provide a description for screen readers describing what’s displayed on the avatar image instead of just naming its role.\n*   **Sizes:** There are many contexts to use avatars and they all require different sizes for the component. For average projects use at least 2-3 different sizes and make sure there’s at least a small size available.\n*   **Icon:** Avatars can be used with an icon instead of an image to emphasize areas that don’t necessarily have (or need) an image associated with it.\n*   **Background Colors:** When used with icons or text, there has to be a background colour from the design system colour tokens applied to the avatar shape. Make sure that icons and text have enough contrast ratio with the background according to the WCAG AA standard.",
+    "links": []
+  },
+  "hjiJJg4KNr8lyktFQd868": {
+    "title": "Input Text",
+    "description": "Input text lets users enter and edit text.\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.\n*   **Autocomplete:** When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.\n*   **Icon Support:** Icons are used to describe input methods, express a text field state or provide additional functionality.",
+    "links": []
+  },
+  "kkqRIgdXWaJbX9CjLpwha": {
+    "title": "Banner",
+    "description": "Banners display an actionable message used as a prominent way of communicating with your users.\n\n*   **Appearance:** Banners are used to display different types of messages and it’s important to differentiate their visual appearance based on the role they’re playing. If you’re using background colours for role differentiation, make sure there’s enough contrast ratio with the content according to the WCAG AA standard.\n*   **Area for icons or images:** Banners can supplement their message using a supporting icon or image. They shouldn’t be used instead of text content.\n*   **Actions:** Actions in banners should relate to its text and provide a way to react to the message sent to the user.\n*   **Dismissible Action:** Don’t overwhelm the user with banners on the page and include a dismissable action. That may be either a separate close button or one of the actions provided.\n*   **Accessibility:** If a banner dynamically appears on the page, it should be announced to the user by their assistive technology.\n*   **Responsiveness:** Banners should adapt to the viewport size. This usually means that they become full-width for mobile to save some space.",
+    "links": []
+  },
+  "LNsXQI8sE_5kzSD_iMLJA": {
+    "title": "Badge",
+    "description": "Badges are elements that represent the status of an object or user input value.\n\n*   **Appearance:** Badges may play various roles in your product and having a predefined colour for each role should help users understand their meaning. When changing colours, make sure the text has enough contrast ratio with the background according to the WCAG AA standard.\n*   **Dismissible Action:** Badges can be used as a dynamic way to display selected values and there should be a way to dismiss them.",
+    "links": []
+  },
+  "LWihkf4q5UawjLd84KQxN": {
+    "title": "Button",
+    "description": "Buttons are interactive elements used for single-step actions.\n\n*   **Hover State:** Clearly show that the button is interactive when it gets hovered with a mouse cursor.\n*   **Active State:** Used when a button gets pressed. The same state can be used to represent the button responsible for toggling another element on the page while that element is visibly opened.\n*   **Focused State:** Used when a button gets selected through keyboard navigation.\n*   **Icon Support:** Icons easily communicate the purpose of the button when used next to its label or can be used without text when there’s not enough space. Make sure that the accessibility label is provided when used with an icon only.\n*   **Disabled:** Visually shows that a button is not interactive and restricts it from being pressed.\n*   **Loading:** Used when users have to wait for the result of their action after they press a button. If a spinner is used to display this state make sure that it’s not changing the original button width or height.\n*   **Full Width:** By default buttons take the width of their content, but they should also come with a full width variant that works well in mobile devices.\n*   **Variants:** When using multiple buttons, there should be a way to differentiate between primary and secondary actions. Buttons may play different roles for the user or be used on different types of surfaces and they have to change the way they look.\n*   **Sizes:** Buttons can be used in different areas of the website and may have multiple predefined sizes. On mobile, tappable areas have to be a minimum of 48px to be accessible according to iOS and Android accessibility guidelines.",
+    "links": []
+  },
+  "rZ7d1C9swiqlRTbdJLZ0R": {
+    "title": "Card",
+    "description": "Cards are used to group information about subjects and their related actions.\n\n*   **Supports any type of content:** Cards are one of the most used components in the product, so they have to be flexible enough to support any other components placed in them.\n*   **Information structure:** No matter how flexible cards are, it’s important for cards to have a specific structure for its elements for product consistency.\n*   **Supports media sections:** One of the most popular scenarios for using cards is mixing them with media content. The most popular options are having a full-width area on top of the content or full-height area at one of the card’s sides.\n*   **Supplementary actions:** Cards can be used with actions usually placed at the bottom of the card, or the card itself can be tappable and represent an action.\n*   **Responsiveness:** On mobile viewports cards are usually full-width in order to save space for the content.",
+    "links": []
+  },
+  "yWEXfjzuzk99dxjZlG4Cq": {
+    "title": "Carousel",
+    "description": "Carousels stack the same type of items and allows scrolling through them horizontally.\n\n*   **Navigation Controls:** Carousels should have easy-to-find navigation controls for scrolling through content.\n*   **Supports any content:** Carousels can be used in different contexts and shouldn’t be limited to a specific child component. In some scenarios you might want items within the same carousel to differ from each other.\n*   **Items width customisation:** For simple products, it might be fine to use multiple predefined sizes for carousel items. For more flexibility, it’s good to provide a way to define a custom width.\n*   **Touch events support:** Carousels should be scrollable on touch devices. Some of the best practices are to use native scrolling and to make sure you’re supporting the same behaviour for all touch devices, not just mobile phones.\n*   **Keyboard navigation:** It should be possible to scroll through content with keyboard arrows when focused on navigation controls.\n*   **Responsiveness:** It’s good practice to hide or reduce the size of navigation controls for mobile viewports to improve the visibility of the content.",
+    "links": []
+  },
+  "MtBSvKoyjdLd6DIdolLRi": {
+    "title": "Dropdown",
+    "description": "Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.\n\n*   **Supports any type of content:** Dropdowns may be used in a lot of contexts like date pickers, language selection or other product features.\n*   **Action Menu:** One of the most used scenarios for dropdowns is providing an action menu for the user, so it’s useful to have this layout defined.\n*   **Focus Trapping:** Once the dropdown’s opened, the focus should work only for elements inside the dropdown. When it’s closed, the focus should move to the dropdown trigger.\n*   **Close Action:** Either some actions inside the dropdown should close it or there should be a separate close button. Also, it’s good practice to close the dropdown when a user clicks outside.\n*   **Keyboard Navigation:** It should be possible to navigate through dropdown children elements with the keyboard and close it with an Esc key.\n*   **Dynamic Position:** Dropdown content should be displayed based on the current position of the trigger element on the screen and always visible to the user.\n*   **Responsiveness:** Dropdown content should be adapted for mobile viewpoints as it may take a lot of space on desktops.",
+    "links": []
+  },
+  "bzY_iXRnotct_WnNRTlbd": {
+    "title": "Icon",
+    "description": "The icon component is a way to align the way iconography static assets are displayed in the product.\n\n*   **Sizes:** Icons should have a number of predefined sizes to provide a holistic experience across the product. Typography pairings may be used for these size values to ensure that they are aligned with the text sizes.\n*   **Colors:** Icons should be using values from the design system colour palette. Using parent element text colour for icon fill colour can make this automatic.",
+    "links": []
+  },
+  "F5_sxUnnGEdgF6BkA5T5x": {
+    "title": "Input Checkbox",
+    "description": "An input checkbox is a form element used for selecting one or multiple options.\n\n*   **Checked State:** Used when the checkbox is selected and will use its value for the form submission.\n*   **Disabled State:** Prevents checkbox interactions and removes its value from the form submission.\n*   **Intermediate State:** Used when the checkbox has children selectable elements and only some of them are selected.\n*   **Label:** There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection.\n*   **Error State:** The error state is used for form validation errors when the error is related to the checkbox field only. Always use a text error along with changing the colour of the field.\n*   **Keyboard State:** Checkbox selections should be triggered with the Space key. Using native elements for this should provide this kind of interaction out of the box.\n*   **Checkbox Group:** Checkboxes can be grouped to work with multiple values at the same time.",
+    "links": []
+  },
+  "rN-_plAA5FkcQl03wsL18": {
+    "title": "Input Radio",
+    "description": "An input radio is a form element used for selecting one option from a list.\n\n*   **Checked State:** Used when the radio is selected and will use its value for the form submission. A radio input can’t be unselected by pressing it again.\n*   **Disabled State:** Prevents radio interactions and removes its value from the form submission.\n*   **Label:** There should be a text label linked with the radio field. Clicking the label should also trigger the radio selection.\n*   **Error State:** The error state is used for form validation errors when the error is related to the radio field only. Always use a text error along with changing the colour of the field.\n*   **Keyboard State:** A radio selection should be triggered when the Space key is pressed. Using native elements for this should provide this kind of interaction out of the box.\n*   **Radio Group:** Radio inputs should always be used in a group. If one of them is selected, it can be deselected only by choosing another radio.",
+    "links": []
+  },
+  "NISeaJUlDtQ0kSuyxmrOT": {
+    "title": "Input Switch",
+    "description": "Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.\n\n*   **Checked State:** Used when an input switch is turned on. It’s better to provide an additional way to indicate the checked state besides changing its colour when applicable.\n*   **Disabled State:** Prevents interacting with an input switch.\n*   **Label:** There should be a text label linked with the switch field. Clicking the label should also trigger the input selection.\n*   **Keyboard State:** A switch selection should be triggered when the Space key is pressed.",
+    "links": []
+  },
+  "n1nUkMqGtPobZPJHCvPsk": {
+    "title": "Select",
+    "description": "Select lets user select a value from a list of values in a form context:\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.\n*   **Autocomplete:** When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.\n*   **Icon Support:** Icons are used to describe input methods, express a text field state or provide additional functionality.",
+    "links": []
+  },
+  "iusI39fxcu2rbMXiosaM6": {
+    "title": "Textarea",
+    "description": "Text area lets users enter and edit text.\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.",
+    "links": []
+  },
+  "2T7tiM3Ew3H1U5iJR2TDb": {
+    "title": "List",
+    "description": "Lists define the layout of the page content or groups of elements stacking them vertically or horizontally.\n\n*   **Support any type of content:** Lists can be used in any context from page-level layout to managing offsets between granular components. hey should work with any component used inside.\n*   **Horizontal Stacking:** Lists can be used for inline elements and they have to manage how they’re stacked horizontally, including handling offsets between multiple rows of elements.\n*   **Divided Variant:** Lists with dividers are the best practice advised by many platform guidelines (especially on mobile).\n*   **Supports Actionable Content:** Sometimes lists are used for grouping tappable components, where the whole area of the list item should be clickable.",
+    "links": []
+  },
+  "JhnHOMIlU6mQcwvIpErUY": {
+    "title": "Loading Indicator",
+    "description": "The loading indicator shows that an operation’s being performed and how long the process will take.\n\n*   **Linear and non-linear Variants:** Depending on the context and the component it’s used for, the loading indicator can be represented either with linear or with a non-linear (e.g. circular) variant.\n*   **Determinate or indeterminate wait time:** In some cases, the wait time can’t be determined. The loading indicator should be shown until the loading finishes or an error happens. In other cases, it’s better to indicate how much time’s left until the loading is done.\n*   **Light Variant:** The loading indicator should respect its parent element background and provide a variant to be used on darker background colours.\n*   **Reduced Motion:** The loading indicator should be synced with the system motion settings and reduce its animation speed when reduced motion settings are turned on.",
+    "links": []
+  },
+  "IjNitkG25vNo30rB4ckNV": {
+    "title": "Modal",
+    "description": "Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.\n\n*   **Supports any type of Content:** Like any other container, modals can be used in different scenarios and you should be able to use it with any other component inside.\n*   **Supplementary Actions:** Since content in the modal may be actionable, it’s important to have an area for action elements. This area is usually located at the bottom of the modal container.\n*   **Close Action:** Modals should provide a clear way to be closed as they’re blocking content when open. This may be either a separate close button or one of the supplementary actions.\n*   **Information Structure:** Even though modals can be used as an empty container for the content, they need a defined information structure to provide a holistic experience. It may include defining how titles and subtitles look by default or where an action element’s area is.\n*   **Keyboard Navigation Support:** It should be possible to close a modal by pressing the Esc key and all the focusable elements inside the modal container should be accessible with keyboard navigation.\n*   **Focus Trapping:** Once a modal is opened, the focus should be moved to the first element inside the modal and should be looped within the modal container. Closing the modal should return the focus to the last focused element on the page.",
+    "links": []
+  },
+  "1vYR1EMyZhJA-znxnFBBb": {
+    "title": "Tabs",
+    "description": "Tabs organise navigation between multiple pages or content sections.\n\n*   **Active Button State:** There should be a clear differentiation between selected and unselected tab buttons.\n*   **Button Icon Support:** Icons help show the purpose of the tab buttons when used next to its label.\n*   **Equally-sized tab buttons:** Tabs can be used in a relatively small-sized container where you need to switch between a definite number of sections. For such scenarios, it’s better to support a variant where the button’s area is divided equally.\n*   **Keyboard Navigation:** All tab buttons should be focusable and navigation between the tab’s component should be accessible from the keyboard.\n*   **Responsiveness:** If all tabs on mobile don’t fit into the viewport, users should still have access to all tab buttons. Ways to solve this can be making the button area scrollable for mobile or showing a More button containing a dropdown with the rest of the buttons.",
+    "links": []
+  },
+  "-T7uL6a3lJ5-IIcDaG6IN": {
+    "title": "Toast",
+    "description": "Toasts provide short meaningful feedback messages about the action results.\n\n*   **Dismissed Automatically:** Toast messages shouldn’t interrupt the user flow, block the screen for a long time or require additional action from the user.\n*   **Action Support:** Besides displaying the message, toasts may also provide an action related to the message like undoing an action.\n*   **Handles Multiple Instances:** Even though it doesn’t happen often, toasts can be called from multiple sources at the same time and all resulting toasts should be queued. It’s good practice not to show all the messages at the same time.\n*   **Accessibility:** Toast messages should be announced by the voice assistive technology and their action should be easily accessible from the keyboard.\n*   **Responsivenss:** Toasts should be aligned with the mobile viewport and their action should be easily reachable for tapping.",
+    "links": []
+  },
+  "2oCAzsk_y2Y2oHUi467dp": {
+    "title": "Tooltip",
+    "description": "Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.\n\n*   **Keyboard Hover Support:** Tooltips should be accessible when an element is focused using the keyboard.\n*   **Dynamic Positioning:** Tooltip content should be displayed based on the current position of the trigger element on the screen and always visible to the user.\n*   **Hover Timeout:** Having a small timeout before triggering a tooltip will help to prevent occasionally showing tooltips while users move their mouse cursor.\n*   **Light Variant:** The tooltip should respect its parent element background and provide a variant to be used on darker background colours.\n*   **Instant Transition for Element Groups:** If there’s a group of elements using tooltips, hovering over another element while a tooltip’s already active shouldn’t trigger the animation.",
+    "links": []
+  },
+  "jggrr5nZOe6FY3ZrZJTOw": {
+    "title": "Tooling",
+    "description": "Design system tooling encompasses technical infrastructure and workflows. Effective tooling should integrate with design tools, provide component libraries for frameworks, implement token management, utilize documentation platforms, establish automated versioning, create testing infrastructure, and enable collaboration workflows.",
+    "links": []
+  },
+  "ccpT9MPFbc3Ewjm1tFMsZ": {
+    "title": "Design Editor",
+    "description": "There are many design editors available in the market today with the most popular names being Sketch, Figma and Adobe XD. If you're unsure which route to go down it's often best to speak with your team.",
+    "links": []
+  },
+  "uO-2O0Jwh_DxrMAB9wxp1": {
+    "title": "Plugins",
+    "description": "Most popular Design Editors (Sketch and Figma, especially) come with third-party plugin support. Whilst it's best to use the editors in-built tools for laying out your components, plugins can bring in a range of useful data to populate them.",
+    "links": []
+  },
+  "CYY6nbQiC2pu5ATWmO6wA": {
+    "title": "Version Control",
+    "description": "Having your design versioned with semantic versioning will allow you to easily align design with development, roll back faulty changes and release changes in code and design at the same time.",
+    "links": []
+  },
+  "TiCNCRpMPgZUhn7JdaIZA": {
+    "title": "Contribution Guidelines",
+    "description": "Define the process of contributing to the UI and UX of the design system and document it in a discoverable place to make it easier for everyone to contribute.",
+    "links": []
+  },
+  "VeLiPzbGr22_Mh_8T2Gnf": {
+    "title": "Component Catalog",
+    "description": "Isolate your UI components’ environment outside of your product codebase to make sure they’re not dependent on any global dependencies and can be easily reused.",
+    "links": []
+  },
+  "k1Lwk_b6cLIeyQwc4RUh1": {
+    "title": "Documentation",
+    "description": "Having your code documented is key to driving adoption and reducing the load on the contributors.",
+    "links": []
+  },
+  "zEqFAuH9zmKTLwwgx54pW": {
+    "title": "Code Style",
+    "description": "Having a defined code style helps align the way code’s written in the system and increases development velocity. It should be automated with the tools provided for each platform.",
+    "links": []
+  },
+  "y8No8I0MltA91j4Q2toT0": {
+    "title": "Unit Testing",
+    "description": "Every part of the design system should be covered with unit tests. Once your system’s adopted, any change in the isolated environment may affect how the product works.",
+    "links": []
+  },
+  "yhP8EhyCWWRBLkYPyOFeg": {
+    "title": "Accessibility Testing",
+    "description": "Design systems should cover accessibility as much as possible. Making this automatic reduces the risk of inaccessible components or user flows in the product.",
+    "links": []
+  },
+  "ZLt1yJqinC8OSpqucC2dV": {
+    "title": "Semantic Versioning",
+    "description": "Version your code with semantic versioning that dictates how version numbers are assigned and incremented.",
+    "links": []
+  },
+  "CfWCQNaCJGL-egRhFhc4B": {
+    "title": "Release Strategy",
+    "description": "Design system releases should be automated and ideally use scripts ran locally or in remote CI pipelines to prevent broken releases.",
+    "links": []
+  },
+  "IVYe8oh1IWbUbxMZRxVQA": {
+    "title": "Commit Guidelines",
+    "description": "Automate the generation of your changelog by adopting a commit message guidelines that categorise and define the changes being made.",
+    "links": []
+  },
+  "wd9ZHZmqV7wbLN-9V4EQy": {
+    "title": "PR Templates",
+    "description": "Create pull request templates that outline the change being proposed to facilitate productive discussions.",
+    "links": []
+  },
+  "xJ1LAAhiZvbZOLRVc1HZa": {
+    "title": "Contribution Guidelines",
+    "description": "Define the process of contributing to the code of the design system. Document everything in a discoverable place to make it easier for everyone to contribute.",
+    "links": []
+  },
+  "JfXwzkN29UGz17FYHHE3A": {
+    "title": "Project Management",
+    "description": "Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together.",
+    "links": []
+  },
+  "gMrX5600JqFDplriq-eU3": {
+    "title": "Roadmap",
+    "description": "Setting your short and long term vision and mapping things out helps you decide the steps to take, understand your place in the bigger picture and prioritise day-to-day tasks.",
+    "links": []
+  },
+  "ruPXxVwmD9vSlS7rBZmA-": {
+    "title": "Milestones",
+    "description": "Define milestones that act as bigger epics in your project management with the help of your roadmap. These will help you understand your progress.",
+    "links": []
+  },
+  "i39J0fk4DaPeNFIMbH0ap": {
+    "title": "Ticketing",
+    "description": "Make it easier to track your day-to-day progress by using ticketing software like Jira, Trello or GitHub. This’ll make it easier for others to submit feature proposals or bug reports.",
+    "links": []
+  },
+  "G8dOkM_4hP7wPF3QJ8y4g": {
+    "title": "Component Analytics",
+    "description": "Track the usage of your components. For development you can use built-in tools like Figma’s Design System Analytics. For the end product you can have a separate way of tracking per platform depending on the technology.",
+    "links": []
+  },
+  "xYqDmDpjwkShtL86nt-vY": {
+    "title": "Logging",
+    "description": "Implement a way to track and pinpoint component-related outages in your product.",
+    "links": []
+  },
+  "qiJGYYWL4naJX-MgZA9Ms": {
+    "title": "Tooling Analytics",
+    "description": "Track what tools are being used for your design system. Find out which ones are used the most and which features are the most popular.",
+    "links": []
+  },
+  "5znnOkpf9G9tdiMWB6Rut": {
+    "title": "Service and Health Metrics",
+    "description": "Define service and health metrics for your design system to set a benchmark on how well you’re doing. Common examples can be the number of tickets closed, improvements made or bugs fixed.",
+    "links": []
+  },
+  "eG8ranXuINtcqWfeMH5GW": {
+    "title": "Community Meetings",
+    "description": "Arrange community meetings with everyone who uses the design system. Share your knowledge and make proposals to improve the sense of community.",
+    "links": []
+  },
+  "LWrrKrhwXfMDKgbFW5DuO": {
+    "title": "Communication Channel",
+    "description": "Most product development work happens digitally, so create a digital channel where people can reach out and ask questions.",
+    "links": []
+  },
+  "YWoPoO9IW3vLZyxLL2fnT": {
+    "title": "Open Hours",
+    "description": "Create open hours in which you can engage your audience in a more private setting where you can discuss things in more detail. You can also use these as peer coding or peer design opportunities.",
+    "links": []
+  },
+  "cpAeotBxN8BCsU9RqTEue": {
+    "title": "FAQs",
+    "description": "To save everyone time, define which questions are asked frequently by your audience and document them in a discoverable place.",
+    "links": []
+  }
+}

public/roadmap-content/devops.json

@@ -168,21 +168,11 @@
         "url": "https://roadmap.sh/javascript",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
         "type": "article"
       },
-      {
-        "title": "What is NPM?",
-        "url": "https://www.w3schools.com/nodejs/nodejs_npm.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -204,11 +194,6 @@
         "url": "https://en.wikipedia.org/wiki/Operating_system",
         "type": "article"
       },
-      {
-        "title": "All you need to know about OS.",
-        "url": "https://www.javatpoint.com/operating-system",
-        "type": "article"
-      },
       {
         "title": "Learn Operating Systems",
         "url": "https://www.tutorialspoint.com/operating_system/os_overview.htm",
@@ -532,11 +517,6 @@
         "url": "https://www.learnshell.org/en/Welcome",
         "type": "article"
       },
-      {
-        "title": "Bash Scripting Tutorial",
-        "url": "https://www.javatpoint.com/bash",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Bash",
         "url": "https://app.daily.dev/tags/bash?ref=roadmapsh",
@@ -626,7 +606,7 @@
         "type": "article"
       },
       {
-        "title": "Mecurial",
+        "title": "Mercurial",
         "url": "https://www.mercurial-scm.org/",
         "type": "article"
       },
@@ -780,11 +760,6 @@
         "url": "https://bitbucket.org/product/guides/getting-started/overview",
         "type": "article"
       },
-      {
-        "title": "Git and Bitbucket Introduction",
-        "url": "https://www.w3schools.com/git/git_intro.asp?remote=bitbucket",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Bitbucket",
         "url": "https://app.daily.dev/tags/bitbucket?ref=roadmapsh",
@@ -2860,8 +2835,8 @@
     "description": "GitOps is a paradigm for managing infrastructure and application deployments using Git as the single source of truth. It extends DevOps practices by using Git repositories to store declarative descriptions of infrastructure and applications. Changes to the desired state are made through pull requests, which trigger automated processes to align the actual state with the desired state. GitOps relies on continuous deployment tools that automatically reconcile the live system with the desired state defined in Git. This approach provides benefits such as version control for infrastructure, improved auditability, easier rollbacks, and enhanced collaboration. GitOps is particularly well-suited for cloud-native applications and Kubernetes environments, offering a streamlined method for managing complex, distributed systems.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Guide to GitOps",
-        "url": "https://www.weave.works/technologies/gitops/",
+        "title": " GitOps",
+        "url": "https://www.gitops.tech/",
         "type": "article"
       },
       {

public/roadmap-content/devrel.json

@@ -201,7 +201,7 @@
   },
   "LRZ8yxTfEGCXsYp4N1_uD": {
     "title": "Public Speaking",
-    "description": "",
+    "description": "Public speaking is very important for a Developer Relations (DevRel) role, though its exact importance depends on the specific job and company. DevRel professionals act as a bridge between a company (often its tech or product team) and the developer community, so communication—especially in public settings—is a core part of the gig.",
     "links": []
   },
   "0ntOE6PSdMl_EXB9gdgIv": {

public/roadmap-content/docker.json

@@ -0,0 +1,973 @@
+{
+  "Py9nst2FDJ1_hoXeX_qSF": {
+    "title": "Introduction",
+    "description": "Docker is an open-source platform that automates application deployment, scaling, and management using lightweight, portable containers. Containers are standalone executable units containing all necessary dependencies, libraries, and configuration files for consistent application execution across various environments.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker",
+        "url": "https://www.docker.com/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Docs",
+        "url": "https://docs.docker.com/",
+        "type": "article"
+      }
+    ]
+  },
+  "74JxgfJ_1qmVNZ_QRp9Ne": {
+    "title": "What are Containers?",
+    "description": "Containers are lightweight, portable, and isolated software environments that package applications with their dependencies for consistent execution across different platforms. They streamline development, deployment, and management while ensuring applications run reliably regardless of underlying infrastructure.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Introduction to Containers - AWS Skill Builder",
+        "url": "https://explore.skillbuilder.aws/learn/course/106/introduction-to-containers",
+        "type": "course"
+      },
+      {
+        "title": "What is a Container?",
+        "url": "https://www.docker.com/resources/what-container/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Containers",
+        "url": "https://app.daily.dev/tags/containers?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "i4ijY3T5gLgNz0XqRipXe": {
+    "title": "Why do we need Containers?",
+    "description": "Containers solve environment inconsistency issues when working in teams by standardizing runtime environments. Before containers, significant time was lost configuring local environments to run projects shared by teammates, leading to \"works on my machine\" problems.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Need for Containers",
+        "url": "https://www.redhat.com/en/topics/containers",
+        "type": "article"
+      }
+    ]
+  },
+  "3hatcMVLDbMuz73uTx-9P": {
+    "title": "Bare Metal vs VMs vs Containers",
+    "description": "Bare metal runs applications directly on hardware with maximum performance but limited flexibility. VMs use hypervisors to run multiple OS instances with strong isolation but higher overhead. Containers share the host OS kernel, providing lightweight isolation with better resource efficiency than VMs while maintaining portability.\n\nYou can learn more from the following resources:",
+    "links": [
+      {
+        "title": "History of Virtualization",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/01-history-and-motivation/03-history-of-virtualization",
+        "type": "article"
+      },
+      {
+        "title": "Bare Metal Machine",
+        "url": "https://glossary.cncf.io/bare-metal-machine/",
+        "type": "article"
+      },
+      {
+        "title": "What is a Virtual Machine?",
+        "url": "https://azure.microsoft.com/en-au/resources/cloud-computing-dictionary/what-is-a-virtual-machine",
+        "type": "article"
+      }
+    ]
+  },
+  "43drPbTwPqJQPyzwYUdBT": {
+    "title": "Docker and OCI",
+    "description": "The Open Container Initiative (OCI) is a Linux Foundation project which aims at creating industry standards for container formats and runtimes. Its primary goal is to ensure the compatibility and interoperability of container environments through defined technical specifications.\n\nYou can learn more from the following resources:",
+    "links": [
+      {
+        "title": "Open Container Initiative",
+        "url": "https://opencontainers.org/",
+        "type": "article"
+      },
+      {
+        "title": "OCI - Wikipedia",
+        "url": "https://en.wikipedia.org/wiki/Open_Container_Initiative",
+        "type": "article"
+      }
+    ]
+  },
+  "mw-weCutd2ECKlx2DE_ZJ": {
+    "title": "Package Managers",
+    "description": "",
+    "links": []
+  },
+  "uKjB2qntFTpPuYUT9sdxd": {
+    "title": "Users / Groups Permissions",
+    "description": "",
+    "links": []
+  },
+  "W5kX5jn49hghRgkEw6_S3": {
+    "title": "Shell Commands",
+    "description": "",
+    "links": []
+  },
+  "InlMtuaUJ9EXO-OD9x1jj": {
+    "title": "Shell Scripting",
+    "description": "",
+    "links": []
+  },
+  "XxT9UUjbKW1ARyERSLH_W": {
+    "title": "Programming Languages",
+    "description": "",
+    "links": []
+  },
+  "EqYWfBL5l5OOquok_OvOW": {
+    "title": "Application Architecture",
+    "description": "Application architecture in containerized environments focuses on designing applications to leverage containerization benefits. This includes microservices patterns, service decomposition, inter-service communication, data persistence strategies, and designing for scalability and fault tolerance in distributed systems.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Microservices Architecture",
+        "url": "https://microservices.io/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Application Design Patterns",
+        "url": "https://docs.docker.com/get-started/docker-concepts/building-images/",
+        "type": "article"
+      },
+      {
+        "title": "Container Design Patterns",
+        "url": "https://kubernetes.io/blog/2016/06/container-design-patterns/",
+        "type": "article"
+      },
+      {
+        "title": "Twelve-Factor App Methodology",
+        "url": "https://12factor.net/",
+        "type": "article"
+      },
+      {
+        "title": "Microservices vs Monolith Architecture",
+        "url": "https://www.youtube.com/watch?v=GBTdnfD6s5Q",
+        "type": "video"
+      }
+    ]
+  },
+  "jrH1qE6EnFXL4fTyYU8gR": {
+    "title": "Underlying Technologies",
+    "description": "Docker containers use Linux kernel technologies for isolation and resource management: namespaces for process isolation, cgroups for resource limits, and union filesystems for efficient layered storage. These enable lightweight, portable, and secure containers that share the host kernel.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Underlying Technologies",
+        "url": "https://www.docker.com/resources/what-container/#underlying-technologies",
+        "type": "article"
+      },
+      {
+        "title": "Underlying Technologies - Medium",
+        "url": "https://medium.com/@furkan.turkal/how-does-docker-actually-work-the-hard-way-a-technical-deep-diving-c5b8ea2f0422",
+        "type": "article"
+      }
+    ]
+  },
+  "BvV8VCX39wRB-g8WvGF1g": {
+    "title": "Namespaces",
+    "description": "Docker namespaces are a Linux kernel feature that creates isolated environments for containers by providing separate instances of global system resources. Docker uses PID, NET, MNT, UTS, IPC, and USER namespaces to ensure each container believes it has its own unique resources, enabling lightweight, portable, and secure containerization.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Namespaces",
+        "url": "https://docs.docker.com/engine/security/userns-remap/",
+        "type": "article"
+      },
+      {
+        "title": "Linux Namespaces",
+        "url": "https://man7.org/linux/man-pages/man7/namespaces.7.html",
+        "type": "article"
+      }
+    ]
+  },
+  "fRl4EfNwlBiidzn3IV34-": {
+    "title": "cgroups",
+    "description": "cgroups (control groups) are Linux kernel features that limit and manage system resources like CPU, memory, and I/O for process groups. Docker uses cgroups to enforce resource constraints on containers, ensuring predictable performance and preventing containers from consuming excessive system resources.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Control Groups",
+        "url": "https://www.docker.com/resources/what-container/#control-groups",
+        "type": "article"
+      },
+      {
+        "title": "Control Groups - Medium",
+        "url": "https://medium.com/@furkan.turkal/how-does-docker-actually-work-the-hard-way-a-technical-deep-diving-c5b8ea2f0422",
+        "type": "article"
+      },
+      {
+        "title": "An introduction to cgroups, runc & containerD",
+        "url": "https://www.youtube.com/watch?v=u1LeMndEk70",
+        "type": "video"
+      }
+    ]
+  },
+  "vEUfw_vobshuZI0-q8RZo": {
+    "title": "Union Filesystems",
+    "description": "Union filesystems (UnionFS) create virtual, layered file structures by overlaying multiple directories without modifying originals. Docker uses this to manage storage efficiently by minimizing duplication and reducing image sizes through layered filesystem approach that keeps directory contents separate while mounted together.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "AUFS (Advanced Multi-Layered Unification Filesystem)",
+        "url": "http://aufs.sourceforge.net/",
+        "type": "article"
+      },
+      {
+        "title": "OverlayFS (Overlay Filesystem)",
+        "url": "https://www.kernel.org/doc/html/latest/filesystems/overlayfs.html",
+        "type": "article"
+      },
+      {
+        "title": "Btrfs (B-Tree Filesystem)",
+        "url": "https://btrfs.readthedocs.io/en/stable/",
+        "type": "article"
+      },
+      {
+        "title": "ZFS (Z File System)",
+        "url": "https://zfsonlinux.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "01nDXqxVdMv4SeXc0nYHH": {
+    "title": "Installation / Setup",
+    "description": "Docker provides Docker Desktop, a desktop application that simplifies installation and setup with GUI capabilities. Alternatively, you can install Docker Engine for command-line only functionality without graphical interface components.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Desktop website",
+        "url": "https://www.docker.com/products/docker-desktop",
+        "type": "article"
+      },
+      {
+        "title": "Docker Engine",
+        "url": "https://docs.docker.com/engine/install/",
+        "type": "article"
+      }
+    ]
+  },
+  "NCdsPRhJy7UtQFNLo1J1f": {
+    "title": "Docker Desktop (Win/Mac/Linux)",
+    "description": "Docker Desktop is a comprehensive development environment for Windows, macOS, and Linux with a GUI. It includes Docker Engine, CLI, Buildx, Extensions, Compose, Kubernetes, and credentials helper, providing everything needed for container development on desktop platforms.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Docker Desktop Documentation",
+        "url": "https://docs.docker.com/desktop/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Get Started Guide",
+        "url": "https://docs.docker.com/get-started/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Hub",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Docker",
+        "url": "https://app.daily.dev/tags/docker?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "0NKqLUWtJMlXn-m6wpA6f": {
+    "title": "Docker Engine ( Linux )",
+    "description": "Docker Engine is the core open-source containerization runtime that creates and manages containers, builds images, and provides the Docker API. It runs on Linux, Windows, and macOS, serving as the foundation for Docker Desktop and standalone Docker installations on servers.\n\nFor more information about docker engine see:",
+    "links": [
+      {
+        "title": "Docker Engine Installation Guide",
+        "url": "https://docs.docker.com/engine/install/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Engine - Docker Documentation",
+        "url": "https://docs.docker.com/engine/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Docker",
+        "url": "https://app.daily.dev/tags/docker?ref=roadmapsh",
+        "type": "article"
+      },
+      {
+        "title": "Docker Engine for Linux Servers Setup and Tips",
+        "url": "https://www.youtube.com/watch?v=YeF7ObTnDwc",
+        "type": "video"
+      }
+    ]
+  },
+  "kIqx7Inf50mE9W0juwNBz": {
+    "title": "Basics of Docker",
+    "description": "Docker is a platform that simplifies building, packaging, and deploying applications in lightweight, portable containers. Key components include Dockerfiles (build instructions), Images (snapshots), and Containers (running instances). Essential commands cover pulling images, building from Dockerfiles, running containers with port mapping, and managing both containers and images.\n\nWhat is a Container?\n--------------------\n\nA container is a lightweight, standalone, and executable software package that includes all the dependencies (libraries, binaries, and configuration files) required to run an application. Containers isolate applications from their environment, ensuring they work consistently across different systems.\n\nDocker Components\n-----------------\n\nThere are three key components in the Docker ecosystem:\n\n*   **Dockerfile**: A text file containing instructions (commands) to build a Docker image.\n*   **Docker Image**: A snapshot of a container, created from a Dockerfile. Images are stored in a registry, like Docker Hub, and can be pulled or pushed to the registry.\n*   **Docker Container**: A running instance of a Docker image.\n\nDocker Commands\n---------------\n\nBelow are some essential Docker commands you'll use frequently:\n\n*   `docker pull <image>`: Download an image from a registry, like Docker Hub.\n*   `docker build -t <image_name> <path>`: Build an image from a Dockerfile, where `<path>` is the directory containing the Dockerfile.\n*   `docker image ls`: List all images available on your local machine.\n*   `docker run -d -p <host_port>:<container_port> --name <container_name> <image>`: Run a container from an image, mapping host ports to container ports.\n*   `docker container ls`: List all running containers.\n*   `docker container stop <container>`: Stop a running container.\n*   `docker container rm <container>`: Remove a stopped container.\n*   `docker image rm <image>`: Remove an image from your local machine.",
+    "links": []
+  },
+  "uUPYXmwu27SBPqKZx6U_q": {
+    "title": "Data Persistence",
+    "description": "Docker enables you to run containers that are isolated pieces of code, including applications and their dependencies, separated from the host operating system. Containers are ephemeral by default, which means any data stored in the container will be lost once it is terminated. To overcome this problem and retain data across container lifecycle, Docker provides various data persistence methods.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Data Persistence - Docker Documentation",
+        "url": "https://docs.docker.com/get-started/docker-concepts/running-containers/persisting-container-data/",
+        "type": "article"
+      }
+    ]
+  },
+  "086zZYjtzdCaDHm-MkSqg": {
+    "title": "Ephemeral Container Filesystem",
+    "description": "By default, the storage within a Docker container is ephemeral, meaning that any data changes or modifications made inside a container will only persist until the container is stopped and removed. Once the container is stopped and removed, all the associated data will be lost. This is because Docker containers are designed to be stateless by nature. This temporary or short-lived storage is called the \"ephemeral container file system\". It is an essential feature of Docker, as it enables fast and consistent deployment of applications across different environments without worrying about the state of a container.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Data Persistence - Docker Documentation",
+        "url": "https://docs.docker.com/get-started/docker-concepts/running-containers/persisting-container-data/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Concepts - Persisting container data",
+        "url": "https://www.youtube.com/watch?v=10_2BjqB_Ls",
+        "type": "video"
+      }
+    ]
+  },
+  "woemCQmWTR-hIoWAci3d5": {
+    "title": "Volume Mounts",
+    "description": "Volume mounts are a way to map a folder or file on the host system to a folder or file inside a container. This allows the data to persist outside the container even when the container is removed. Additionally, multiple containers can share the same volume, making data sharing between containers easy.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Volumes",
+        "url": "https://docs.docker.com/storage/volumes/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Volume Flags",
+        "url": "https://docs.docker.com/storage/bind-mounts/#choose-the--v-or---mount-flag",
+        "type": "article"
+      },
+      {
+        "title": "Docker Volumes explained in 6 minutes",
+        "url": "https://www.youtube.com/watch?v=p2PH_YPCsis",
+        "type": "video"
+      }
+    ]
+  },
+  "wZcCW1ojGzUakHCv2AaI1": {
+    "title": "Bind Mounts",
+    "description": "Bind mounts have limited functionality compared to volumes. When you use a bind mount, a file or directory on the host machine is mounted into a container. The file or directory is referenced by its absolute path on the host machine. By contrast, when you use a volume, a new directory is created within Docker's storage directory on the host machine, and Docker manages that directory's contents.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Bind Mounts",
+        "url": "https://docs.docker.com/storage/bind-mounts/",
+        "type": "article"
+      }
+    ]
+  },
+  "LShK3-1EGGuXnEvdScFR7": {
+    "title": "Using 3rd Party Container Images",
+    "description": "Third-party images are pre-built Docker container images that are available on Docker Hub or other container registries. These images are created and maintained by individuals or organizations and can be used as a starting point for your containerized applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Hub Registry",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      }
+    ]
+  },
+  "jKSE_wKYf4P9wnSh_LkMi": {
+    "title": "Databases",
+    "description": "Running your database in a Docker container can help streamline your development process and ease deployment. Docker Hub provides numerous pre-made images for popular databases such as MySQL, PostgreSQL, and MongoDB.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Containerized Databases",
+        "url": "https://docs.docker.com/guides/use-case/databases/",
+        "type": "article"
+      },
+      {
+        "title": "How to Setup MySQL Database with Docker",
+        "url": "https://www.youtube.com/watch?v=igc2zsOKPJs",
+        "type": "video"
+      }
+    ]
+  },
+  "HlTxLqKNFMhghtKF6AcWu": {
+    "title": "Interactive Test Environments",
+    "description": "Docker allows you to create isolated, disposable environments that can be deleted once you're done with testing. This makes it much easier to work with third party software, test different dependencies or versions, and quickly experiment without the risk of damaging your local setup.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Launch a Dev Environment",
+        "url": "https://docs.docker.com/desktop/dev-environments/create-dev-env/",
+        "type": "article"
+      },
+      {
+        "title": "Test Environments - Medium",
+        "url": "https://manishsaini74.medium.com/containerized-testing-orchestrating-test-environments-with-docker-5201bfadfdf2",
+        "type": "article"
+      }
+    ]
+  },
+  "YzpB7rgSR4ueQRLa0bRWa": {
+    "title": "Command Line Utilities",
+    "description": "Docker images can include command line utilities or standalone applications that we can run inside containers.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Images",
+        "url": "https://docs.docker.com/engine/reference/commandline/images/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Run",
+        "url": "https://docs.docker.com/reference/cli/docker/container/run/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Pull",
+        "url": "https://docs.docker.com/engine/reference/commandline/pull/",
+        "type": "article"
+      }
+    ]
+  },
+  "5OEfBQaYNOCi999x6QUqW": {
+    "title": "Building Container Images",
+    "description": "Container images are executable packages that include everything required to run an application: code, runtime, system tools, libraries, and settings. By building custom images, you can deploy applications seamlessly with all their dependencies on any Docker-supported platform. The key component in building a container image is the `Dockerfile`. It is essentially a script containing instructions on how to assemble a Docker image. Each instruction in the Dockerfile creates a new layer in the image, making it easier to track changes and minimize the image size. Here's a simple example of a Dockerfile:\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Dockerfile Examples",
+        "url": "https://github.com/dockersamples",
+        "type": "opensource"
+      },
+      {
+        "title": "Docker Image Builder",
+        "url": "https://docs.docker.com/reference/cli/docker/buildx/build/",
+        "type": "article"
+      },
+      {
+        "title": "Dockerfile Reference",
+        "url": "https://docs.docker.com/engine/reference/builder/",
+        "type": "article"
+      }
+    ]
+  },
+  "yGRQcx64S-yBGEoOeMc55": {
+    "title": "Dockerfiles",
+    "description": "A Dockerfile is a text document that contains a list of instructions used by the Docker engine to build an image. Each instruction in the Dockerfile adds a new layer to the image. Docker will build the image based on these instructions, and then you can run containers from the image.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Dockerfile Examples",
+        "url": "https://github.com/dockersamples",
+        "type": "opensource"
+      },
+      {
+        "title": "Dockerfile Reference",
+        "url": "https://docs.docker.com/engine/reference/builder/",
+        "type": "article"
+      },
+      {
+        "title": "Dockerfile Best Practices",
+        "url": "https://docs.docker.com/develop/develop-images/dockerfile_best-practices/",
+        "type": "article"
+      }
+    ]
+  },
+  "frshJqVMP8D7o_7tMZMPI": {
+    "title": "Efficient Layer Caching",
+    "description": "When building container images, Docker caches the newly created layers. These layers can then be used later on when building other images, reducing the build time and minimizing bandwidth usage. However, to make the most of this caching mechanism, you should be aware of how to efficiently use layer caching. Docker creates a new layer for each instruction (e.g., `RUN`, `COPY`, `ADD`, etc.) in the Dockerfile. If the instruction hasn't changed since the last build, Docker will reuse the existing layer.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Layer Caching",
+        "url": "https://docs.docker.com/build/cache/",
+        "type": "article"
+      },
+      {
+        "title": "Layer Caching",
+        "url": "https://www.youtube.com/watch?v=_nMpndIyaBU",
+        "type": "video"
+      }
+    ]
+  },
+  "-8wAzF6_3gruiM3VYMvB0": {
+    "title": "Image Size and Security",
+    "description": "Reducing Docker image size is crucial for optimizing storage, transfer speeds, and deployment times. Key strategies include using minimal base images like Alpine Linux, leveraging multi-stage builds to exclude unnecessary build tools, removing unnecessary files and packages, and minimizing the number of layers by combining commands.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Multi-stage builds",
+        "url": "https://docs.docker.com/build/building/multi-stage/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Best Practices",
+        "url": "https://docs.docker.com/develop/develop-images/dockerfile_best-practices/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Security",
+        "url": "https://app.daily.dev/tags/security?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "3VKPiMfbGBxv9m_SljIQV": {
+    "title": "Container Registries",
+    "description": "A Container Registry is a centralized storage and distribution system for Docker container images. It allows developers to easily share and deploy applications in the form of these images. Container registries play a crucial role in the deployment of containerized applications, as they provide a fast, reliable, and secure way to distribute container images across various production environments.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Registry",
+        "url": "https://docs.docker.com/registry/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Hub",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      },
+      {
+        "title": "Artifact Registry",
+        "url": "https://cloud.google.com/artifact-registry",
+        "type": "article"
+      },
+      {
+        "title": "Amazon ECR",
+        "url": "https://aws.amazon.com/ecr/",
+        "type": "article"
+      },
+      {
+        "title": "Azure Container Registry",
+        "url": "https://azure.microsoft.com/en-in/products/container-registry",
+        "type": "article"
+      }
+    ]
+  },
+  "rxVR62_yXIjc-L4GFSV6u": {
+    "title": "Dockerhub",
+    "description": "Docker Hub is a cloud-based registry service that serves as the primary public repository for Docker container images. It allows users to store, share, and distribute Docker images, offering both free public repositories and paid private ones and integrates seamlessly with Docker CLI, enabling easy pushing and pulling of images. It features official images maintained by software vendors, automated builds linked to source code repositories, and webhooks for triggering actions based on repository events.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "DockerHub",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      },
+      {
+        "title": "DockerHub Repositories",
+        "url": "https://docs.docker.com/docker-hub/repos/",
+        "type": "article"
+      },
+      {
+        "title": "DockerHub Webhooks",
+        "url": "https://docs.docker.com/docker-hub/webhooks/",
+        "type": "article"
+      }
+    ]
+  },
+  "Vs4WQwgJFhA63U9Gf2ym0": {
+    "title": "Image Tagging Best Practices",
+    "description": "Docker image tagging best practices center on creating clear, consistent, and informative labels. Adopt semantic versioning for releases, avoid the ambiguous \"latest\" tag in production, and include relevant metadata like build dates or Git commit hashes. Implement a strategy distinguishing between environments, use descriptive tags for variants, and automate tagging in CI/CD pipelines. Regularly clean up old tags and document your conventions to maintain clarity and facilitate team-wide adoption. These practices ensure efficient image management and improve collaboration across your organization.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Tags",
+        "url": "https://docs.docker.com/get-started/docker-concepts/building-images/build-tag-and-publish-an-image/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Image Tagging Best Practices",
+        "url": "https://medium.com/@nirmalkushwah08/docker-image-tagging-strategy-4aa886fb4fcc",
+        "type": "article"
+      },
+      {
+        "title": "Semantic Versioning",
+        "url": "https://semver.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "fh5aERX7c-lY9FPsmftoF": {
+    "title": "Others (ghcr, ecr, gcr, acr, etc)",
+    "description": "Container images can be stored in many different registries, not just Dockerhub. Most major cloud platforms now provide container registries such as \"Artifact Registry\" on Google Cloud Platform, Elastic Container Registry on AWS and Azure Container Registry on Microsoft Azure. GitHub also provides it's own registry which is useful when container builds are included in your GitHub Actions workflow.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "DockerHub",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      },
+      {
+        "title": "Artifact Registry",
+        "url": "https://cloud.google.com/artifact-registry",
+        "type": "article"
+      },
+      {
+        "title": "Amazon ECR",
+        "url": "https://aws.amazon.com/ecr/",
+        "type": "article"
+      },
+      {
+        "title": "Azure Container Registry",
+        "url": "https://azure.microsoft.com/en-in/products/container-registry",
+        "type": "article"
+      },
+      {
+        "title": "GitHub Container Registry",
+        "url": "https://docs.github.com/en/packages/guides/about-github-container-registry",
+        "type": "article"
+      }
+    ]
+  },
+  "z2eeBXPzo-diQ67Fcfyhc": {
+    "title": "Running Containers",
+    "description": "The `docker run` command creates and starts containers from images in one step. It combines `docker create` and `docker start` operations, allowing you to execute applications in isolated environments with various configuration options like port mapping, volumes, and environment variables.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Run",
+        "url": "https://docs.docker.com/engine/reference/commandline/run/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Containers",
+        "url": "https://docs.docker.com/engine/reference/commandline/container/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Exec",
+        "url": "https://docs.docker.com/engine/reference/commandline/exec/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Stop",
+        "url": "https://docs.docker.com/engine/reference/commandline/stop/",
+        "type": "article"
+      }
+    ]
+  },
+  "6eu5NRA1sJuaHTlHtNurc": {
+    "title": "docker run",
+    "description": "The `docker run` command creates and starts a new container from a specified image. It combines `docker create` and `docker start` operations, offering a range of options to customize the container's runtime environment. Users can set environment variables, map ports and volumes, define network connections, and specify resource limits. The command supports detached mode for background execution, interactive mode for shell access, and the ability to override the default command defined in the image. Common flags include `-d` for detached mode, `-p` for port mapping, `-v` for volume mounting, and `--name` for assigning a custom container name. Understanding `docker run` is fundamental to effectively deploying and managing Docker containers.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Run",
+        "url": "https://docs.docker.com/engine/reference/commandline/run/",
+        "type": "article"
+      }
+    ]
+  },
+  "jjA9E0J8N2frfeJCNtA1m": {
+    "title": "docker compose",
+    "description": "Docker Compose is a tool for defining and running multi-container applications using a YAML file (`docker-compose.yml`). It describes application services, networks, and volumes, enabling you to create, manage, and run entire containerized applications with single commands for simplified orchestration.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Curated Docker Compose Samples",
+        "url": "https://github.com/docker/awesome-compose?tab=readme-ov-file",
+        "type": "opensource"
+      },
+      {
+        "title": "Docker Compose documentation",
+        "url": "https://docs.docker.com/compose/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Compose Tutorial",
+        "url": "https://www.youtube.com/watch?v=DM65_JyGxCo",
+        "type": "video"
+      }
+    ]
+  },
+  "mAaEz-bwB5DLaBbOSYGMn": {
+    "title": "Runtime Configuration Options",
+    "description": "Docker runtime configuration options give you powerful control over your containers' environments. By tweaking resource limits, network settings, security profiles, and logging drivers, you can optimize performance and enhance security. You'll also find options for setting environment variables, mounting volumes, and overriding default behaviors – all crucial for tailoring containers to your specific needs. For more advanced users, there are tools to adjust kernel capabilities and set restart policies. Whether you're using command-line flags or Docker Compose files, these options help ensure your containers run smoothly and consistently, no matter where they're deployed.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Documentation",
+        "url": "https://docs.docker.com/engine/reference/run/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Runtime Arguments",
+        "url": "https://galea.medium.com/docker-runtime-arguments-604593479f45",
+        "type": "article"
+      }
+    ]
+  },
+  "78YFahP3Fg-c27reLkuK4": {
+    "title": "Container Security",
+    "description": "Container security encompasses a broad set of practices and tools aimed at protecting containerized applications from development through deployment and runtime. It involves securing the container image, ensuring that only trusted and non-vulnerable code is used, implementing strong access controls for container environments, and configuring containers to follow the principle of least privilege. Additionally, it includes monitoring for unexpected behavior, protecting communication between containers, and maintaining the host environment’s security. Effective container security integrates seamlessly into DevSecOps workflows to provide continuous visibility and protection across the container lifecycle without disrupting development speed or agility.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Security",
+        "url": "https://docs.docker.com/engine/security/",
+        "type": "article"
+      },
+      {
+        "title": "Kubernetes Security Best Practices",
+        "url": "https://www.aquasec.com/cloud-native-academy/kubernetes-in-production/kubernetes-security-best-practices-10-steps-to-securing-k8s/",
+        "type": "article"
+      }
+    ]
+  },
+  "vYug8kcwrMoWf8ft4UDNI": {
+    "title": "Runtime Security",
+    "description": "Runtime security in Docker focuses on ensuring the safety and integrity of containers during their execution, safeguarding against vulnerabilities and malicious activities that could arise while the containerized application is running. This involves monitoring container behavior for anomalies, implementing access controls to limit permissions, and employing tools to detect and respond to suspicious activity in real time. Effective runtime security also ensures that only verified images are deployed and continuously audits the system to maintain compliance, thereby providing a robust defense layer to prevent exploits and maintain the desired security posture throughout the container lifecycle.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Security",
+        "url": "https://docs.docker.com/engine/security/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Security Best Practices",
+        "url": "https://docs.docker.com/build/building/best-practices/",
+        "type": "article"
+      }
+    ]
+  },
+  "M5UG-ZcyhBPbksZd0ZdNt": {
+    "title": "Image Security",
+    "description": "Image security is a crucial aspect of deploying Docker containers in your environment. Ensuring the images you use are secure, up to date, and free of vulnerabilities is essential. In this section, we will review best practices and tools for securing and managing your Docker images. When pulling images from public repositories, always use trusted, official images as a starting point for your containerized applications. Official images are vetted by Docker and are regularly updated with security fixes. You can find these images on the Docker Hub or other trusted registries.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Content Trust",
+        "url": "https://docs.docker.com/engine/security/trust/content_trust/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Hub",
+        "url": "https://hub.docker.com/",
+        "type": "article"
+      }
+    ]
+  },
+  "b-LwyYiegbF0jIrn7HYRv": {
+    "title": "Docker CLI",
+    "description": "The Docker Command Line Interface (CLI) is a powerful tool used to interact with the Docker engine, enabling developers and operators to build, manage, and troubleshoot containers and related resources. With a wide range of commands, the Docker CLI provides control over all aspects of Docker, including creating and managing containers (`docker run`, `docker stop`), building images (`docker build`), managing networks (`docker network`), handling storage (`docker volume`), and inspecting system status (`docker ps`, `docker info`). Its intuitive syntax and flexibility allow users to automate complex workflows, streamline development processes, and maintain containerized applications with ease, making it a foundational utility for Docker management and orchestration.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker CLI",
+        "url": "https://docs.docker.com/reference/cli/docker/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Compose",
+        "url": "https://docs.docker.com/compose/",
+        "type": "article"
+      }
+    ]
+  },
+  "3Nsg-F3wMKEzEsXw1MBZv": {
+    "title": "Images",
+    "description": "Docker images are lightweight, standalone packages containing everything needed to run software: application code, runtime, libraries, and system tools. Built in layers for efficient storage, they serve as blueprints for containers and can be shared through registries like Docker Hub for consistent deployment across environments.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What's the Difference Between Docker Images and Containers?",
+        "url": "https://aws.amazon.com/compare/the-difference-between-docker-images-and-containers/",
+        "type": "article"
+      },
+      {
+        "title": "What is an image?",
+        "url": "https://www.youtube.com/watch?v=NyvT9REqLe4",
+        "type": "video"
+      }
+    ]
+  },
+  "jhwe-xfVc-C7qy8YuS5dZ": {
+    "title": "Containers",
+    "description": "Containers are isolated, lightweight environments that run applications using a shared operating system kernel, ensuring consistency and portability across different computing environments. They encapsulate everything needed to run an application, such as code, dependencies, and configurations, making it easy to move and run the containerized application anywhere. Using the Docker CLI, you can create, start, stop, and manage containers with commands like `docker run`, `docker ps` to list running containers, `docker stop` to halt them, and `docker exec` to interact with them in real time. The CLI provides a powerful interface for developers to build, control, and debug containers effortlessly, allowing for streamlined development and operational workflows.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker CLI Commands",
+        "url": "https://docs.docker.com/engine/reference/commandline/cli/",
+        "type": "article"
+      },
+      {
+        "title": "Docker CLI Commands Cheat Sheet",
+        "url": "https://docs.docker.com/get-started/docker_cheatsheet.pdf",
+        "type": "article"
+      }
+    ]
+  },
+  "eHtVLB6v3h7hatJb-9cZK": {
+    "title": "Volumes",
+    "description": "Docker volumes are persistent storage solutions used to manage and store data outside the container's filesystem, ensuring data remains intact even if the container is deleted or recreated. They are ideal for storing application data, logs, and configuration files that need to persist across container restarts and updates. With the Docker CLI, you can create and manage volumes using commands like `docker volume create` to define a new volume, `docker volume ls` to list all volumes, and `docker run -v` to mount a volume to a specific container. This approach helps maintain data integrity, simplifies backup processes, and supports data sharing between containers, making volumes a core part of stateful containerized applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Volumes",
+        "url": "https://docs.docker.com/storage/volumes/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Volume Commands",
+        "url": "https://docs.docker.com/engine/reference/commandline/volume/",
+        "type": "article"
+      }
+    ]
+  },
+  "w5QjzvOaciK2rotOkjvjQ": {
+    "title": "Networks",
+    "description": "Docker networks enable containers to communicate with each other and with external systems, providing the necessary connectivity for microservices architectures. By default, Docker offers several network types such as bridge, host, and overlay, each suited for different use cases like isolated environments, high-performance scenarios, or multi-host communication. Using the Docker CLI, you can create, inspect, and manage networks with commands like `docker network create` to define custom networks, `docker network ls` to list existing networks, and `docker network connect` to attach a container to a network. This flexibility allows developers to control how containers interact, ensuring secure and efficient communication across distributed applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Networks",
+        "url": "https://docs.docker.com/network/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Network Commands",
+        "url": "https://docs.docker.com/engine/reference/commandline/network/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Networking",
+        "url": "https://www.youtube.com/watch?v=bKFMS5C4CG0",
+        "type": "video"
+      }
+    ]
+  },
+  "hHXTth0ZP8O-iMGR9xfu9": {
+    "title": "Developer Experience",
+    "description": "Docker significantly enhances the developer experience by providing a consistent, isolated environment for building, testing, and running applications, eliminating the “it works on my machine” problem. With Docker, developers can package their applications and dependencies into portable containers, ensuring consistency across different environments, from local development to staging and production. The simplified setup and reproducibility of environments accelerate onboarding, minimize conflicts, and allow developers to focus on coding rather than troubleshooting configurations. Moreover, tools like Docker Compose enable quick orchestration of complex multi-container applications, making it easier to prototype, iterate, and collaborate, ultimately streamlining the entire development lifecycle.\n\nFor more details and practical examples:",
+    "links": [
+      {
+        "title": "Developer Experience Wishlist - Docker",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/11-development-workflow/00-devx-wishlist#key-devx-features",
+        "type": "article"
+      },
+      {
+        "title": "Docker Developer Experience",
+        "url": "https://www.docker.com/blog/cto-chat-overcoming-the-developer-experience-gap-feat-redmonk-flow-io/",
+        "type": "article"
+      }
+    ]
+  },
+  "4p5d3rzCHy4vjg2PRX-2k": {
+    "title": "Hot Reloading",
+    "description": "Even though we can speed up the image building with layer caching enable, we don't want to have to rebuild our container image with every code change. Instead, we want the state of our application in the container to reflect changes immediately. We can achieve this through a combination of bind mounts and hot reloading utilities!\n\nHave a look at the following resources for sample implementations:",
+    "links": [
+      {
+        "title": "Hot Reloading - Docker",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/11-development-workflow/01-hot-reloading",
+        "type": "article"
+      }
+    ]
+  },
+  "LiAV9crrTHhLqeZhD25a2": {
+    "title": "Debuggers",
+    "description": "In order to make developing with containers competitive with developing locally, we need the ability to run and attach to debuggers inside the container.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Buildx Debug",
+        "url": "https://docs.docker.com/reference/cli/docker/buildx/debug/",
+        "type": "article"
+      },
+      {
+        "title": "Debuggers in Docker",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/11-development-workflow/02-debug-and-test",
+        "type": "article"
+      }
+    ]
+  },
+  "Kmyo1_Mor9WHLkRhNShRZ": {
+    "title": "Tests",
+    "description": "We want to run tests in an environment as similar as possible to production, so it only makes sense to do so inside of our containers! This can include unit tests, integration tests, and end-to-end tests, all run within Docker containers to simulate real-world scenarios while avoiding interference from external dependencies. Using Docker CLI and tools like Docker Compose, you can create isolated testing environments, run tests in parallel, and spin up and tear down the necessary infrastructure automatically.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Running Tests - Docker",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/11-development-workflow/03-tests",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Testing",
+        "url": "https://app.daily.dev/tags/testing?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "oyqw4tr-taZcxt5kREh1g": {
+    "title": "Continuous Integration",
+    "description": "Continuous integration is the idea of executing some actions (for example build, test, etc...) automatically as you push code to your version control system.\n\nFor containers, there are a number of things we may want to do:\n\n*   Build the container images\n*   Execute tests\n*   Scan container images for vulnerabilities\n*   Tag images with useful metadata\n*   Push to a container registry\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Continuous Integration - Docker",
+        "url": "https://courses.devopsdirective.com/docker-beginner-to-pro/lessons/11-development-workflow/04-continuous-integration-github-actions",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about CI/CD",
+        "url": "https://app.daily.dev/tags/cicd?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "qXOGqORi3EdqwsP9Uhi9m": {
+    "title": "Deploying Containers",
+    "description": "Deploying containers is a crucial step in using Docker and containerization to manage applications more efficiently, easily scale, and ensure consistent performance across environments. This topic will give you an overview of how to deploy Docker containers to create and run your applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Deployment",
+        "url": "https://docs.docker.com/get-started/deployment/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Compose",
+        "url": "https://docs.docker.com/compose/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Swarm",
+        "url": "https://docs.docker.com/engine/swarm/",
+        "type": "article"
+      }
+    ]
+  },
+  "PP_RRBo_pThe2mgf6xzMP": {
+    "title": "PaaS Options",
+    "description": "Platform-as-a-Service (PaaS) options for deploying containers provide a simplified and managed environment where developers can build, deploy, and scale containerized applications without worrying about the underlying infrastructure. Popular PaaS offerings include Google Cloud Run, Azure App Service, AWS Elastic Beanstalk, and Heroku, which abstract away container orchestration complexities while offering automated scaling, easy integration with CI/CD pipelines, and monitoring capabilities. These platforms support rapid development and deployment by allowing teams to focus on application logic rather than server management, providing a seamless way to run containers in production with minimal operational overhead.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "PaaS Options for Deploying Containers",
+        "url": "https://www.docker.com/resources/what-container/#paas-options",
+        "type": "article"
+      },
+      {
+        "title": "Azure Container Instances",
+        "url": "https://azure.microsoft.com/en-us/services/container-instances/",
+        "type": "article"
+      },
+      {
+        "title": "Google Cloud Run",
+        "url": "https://cloud.google.com/run",
+        "type": "article"
+      },
+      {
+        "title": "IBM Cloud Code Engine",
+        "url": "https://www.ibm.com/cloud/code-engine",
+        "type": "article"
+      },
+      {
+        "title": "Amazon Elastic Container Service",
+        "url": "https://aws.amazon.com/ecs/",
+        "type": "article"
+      }
+    ]
+  },
+  "RqXpX2XabtHYVjgg1EZR_": {
+    "title": "Kubernetes",
+    "description": "Kubernetes is an open-source container orchestration platform designed to automate the deployment, scaling, and management of containerized applications. It provides a robust framework for handling complex container workloads by organizing containers into logical units called pods, managing service discovery, load balancing, and scaling through declarative configurations. Kubernetes enables teams to deploy containers across clusters of machines, ensuring high availability and fault tolerance through self-healing capabilities like automatic restarts, replacements, and rollback mechanisms. With its extensive ecosystem and flexibility, Kubernetes has become the de facto standard for running large-scale, distributed applications, simplifying operations and improving the reliability of containerized workloads.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Kubernetes",
+        "url": "https://kubernetes.io/",
+        "type": "article"
+      },
+      {
+        "title": "Docker Swarm",
+        "url": "https://docs.docker.com/engine/swarm/",
+        "type": "article"
+      }
+    ]
+  },
+  "r1eJZDZYouUjnGwAtRbyU": {
+    "title": "Nomad",
+    "description": "Nomad is a cluster manager and scheduler that enables you to deploy, manage and scale your containerized applications. It automatically handles node failures, resource allocation, and container orchestration. Nomad supports running Docker containers as well as other container runtime(s) and non-containerized applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Nomad Documentation",
+        "url": "https://www.nomadproject.io/docs",
+        "type": "article"
+      }
+    ]
+  },
+  "ks6PFN-0Z9zH7gtWaWgxz": {
+    "title": "Docker Swarm",
+    "description": "Docker Swarm is Docker’s native container orchestration tool that allows users to deploy, manage, and scale containers across a cluster of Docker hosts. By transforming a group of Docker nodes into a single, unified cluster, Swarm provides high availability, load balancing, and automated container scheduling using simple declarative commands. With features like service discovery, rolling updates, and integrated security through TLS encryption, Docker Swarm offers an approachable alternative to more complex orchestrators like Kubernetes. Its tight integration with the Docker CLI and ease of setup make it a suitable choice for small to medium-sized deployments where simplicity and straightforward management are priorities.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Docker Swarm",
+        "url": "https://docs.docker.com/engine/swarm/",
+        "type": "article"
+      }
+    ]
+  }
+}

public/roadmap-content/engineering-manager.json

@@ -7,6 +7,11 @@
         "title": "Engineering Management Resources",
         "url": "https://github.com/engineering-management/awesome-engineering-management",
         "type": "article"
+      },
+      {
+        "title": "Software Engineering at Google: The Engineering Manager",
+        "url": "https://abseil.io/resources/swe-book/html/ch05.html#the_engineering_manager",
+        "type": "article"
       }
     ]
   },
@@ -223,8 +228,14 @@
   },
   "n9gvPHn4c1U-l6v-W9v6r": {
     "title": "Agile methodologies",
-    "description": "An Engineering Manager ensures smooth implementation of Agile methodologies within the team. The manager oversees sprint planning, backlog refinement, and retrospectives for consistent development flow. They have the key role in facilitating communication, fostering a high-performing environment, and encouraging adaptive planning.\n\nThe Engineering Manager faces the challenge of maintaining an Agile mindset even when facing pressures to deliver. They have to ensure team members are motivated, engaged, and productive. This can be handled by adopting feedback-friendly culture and regular knowledge-sharing sessions.\n\nSkills required for an Engineering Manager in handling Agile methodologies include strong leadership, excellent communication, and proficiency in risk management. The manager has to balance the opposing needs of flexibility and stability, always keeping customer satisfaction in perspective.",
-    "links": []
+    "description": "An Engineering Manager ensures smooth implementation of Agile methodologies within the team. The manager oversees sprint planning, backlog refinement, and retrospectives for consistent development flow. They have the key role in facilitating communication, fostering a high-performing environment, and encouraging adaptive planning.\n\nThe Engineering Manager faces the challenge of maintaining an Agile mindset even when facing pressures to deliver. They have to ensure team members are motivated, engaged, and productive. This can be handled by adopting feedback-friendly culture and regular knowledge-sharing sessions.\n\nSkills required for an Engineering Manager in handling Agile methodologies include strong leadership, excellent communication, and proficiency in risk management. The manager has to balance the opposing needs of flexibility and stability, always keeping customer satisfaction in perspective.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Scrum Guide",
+        "url": "https://scrumguides.org/",
+        "type": "article"
+      }
+    ]
   },
   "SuT6q5lMMSyVkadlQp7iU": {
     "title": "Project Tracking",
@@ -343,8 +354,14 @@
   },
   "h7gEQNbGiabDA1q1Bk_IB": {
     "title": "Emotional Intelligence",
-    "description": "Emotional intelligence is crucial for an Engineering Manager. It helps them understand team dynamics, enhances communication, and strengthens relationships. Their main responsibilities include recognizing team members' emotions, gauging their reactions appropriately, and managing their responses effectively.\n\nEngineering Managers often face challenges in dealing with various personalities within a team. By applying emotional intelligence, they can navigate these difficulties, resolve conflicts, and maintain a positive working environment. Their challenge is to balance their own emotions while addressing those of their team.\n\nSuccess in this aspect requires strong listening skills, empathy, and patience. Engineering Managers also need to continuously improve their emotional intelligence through self-reflection and seeking feedback. This helps them foster a team environment where everyone is understood and valued.",
-    "links": []
+    "description": "Emotional intelligence is crucial for an Engineering Manager. It helps them understand team dynamics, enhances communication, and strengthens relationships. Their main responsibilities include recognizing team members' emotions, gauging their reactions appropriately, and managing their responses effectively.\n\nEngineering Managers often face challenges in dealing with various personalities within a team. By applying emotional intelligence, they can navigate these difficulties, resolve conflicts, and maintain a positive working environment. Their challenge is to balance their own emotions while addressing those of their team.\n\nSuccess in this aspect requires strong listening skills, empathy, and patience. Engineering Managers also need to continuously improve their emotional intelligence through self-reflection and seeking feedback. This helps them foster a team environment where everyone is understood and valued.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Daniel Goleman on the different kinds of empathy",
+        "url": "https://www.youtube.com/watch?v=WdDVvLEKoc8",
+        "type": "video"
+      }
+    ]
   },
   "ZuZuzwy-Frsn_PFJZVuAQ": {
     "title": "Defining and Enforcing Values",

public/roadmap-content/frontend.json

@@ -1,7 +1,7 @@
 {
   "VlNNwIEDWqQXtqkHWJYzC": {
     "title": "Internet",
-    "description": "The Internet is a global network of interconnected computer networks that use the Internet Protocol Suite (TCP/IP) to communicate. It enables the exchange of data, information, and services across the world, connecting billions of devices and users. The Internet has revolutionized communication, commerce, education, and entertainment, becoming an integral part of modern society. It supports various applications and services, from web browsing and instant messaging to streaming media and online gaming. While offering unprecedented access to information and connectivity, the Internet also raises concerns about privacy, security, and digital divide issues.\n\nVisit the following resources to learn more:",
+    "description": "The Internet, a global network of interconnected computer networks using TCP/IP, facilitates worldwide data exchange, connecting billions of devices. It has revolutionized communication, commerce, education, and entertainment, supporting diverse applications from web browsing to streaming. While offering vast information access, it also presents privacy, security, and digital divide challenges.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Introduction to Internet",
@@ -17,7 +17,7 @@
   },
   "yCnn-NfSxIybUQ2iTuUGq": {
     "title": "How does the internet work?",
-    "description": "The Internet works through a global network of interconnected computers and servers, communicating via standardized protocols. Data is broken into packets and routed through various network nodes using the Internet Protocol (IP). These packets travel across different physical infrastructures, including fiber optic cables, satellites, and wireless networks. The Transmission Control Protocol (TCP) ensures reliable delivery and reassembly of packets at their destination. Domain Name System (DNS) servers translate human-readable website names into IP addresses. When you access a website, your device sends a request to the appropriate server, which responds with the requested data. This process, facilitated by routers, switches, and other networking equipment, enables the seamless exchange of information across vast distances, forming the backbone of our digital communications.\n\nVisit the following resources to learn more:",
+    "description": "The internet is a global network connecting computers and devices for information sharing, enabling activities like browsing websites, sending emails, and streaming videos. It acts as a vast web linking everything, facilitating communication and access to online resources and services worldwide.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Introduction to Internet",
@@ -43,7 +43,7 @@
   },
   "R12sArWVpbIs_PHxBqVaR": {
     "title": "What is HTTP?",
-    "description": "HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the World Wide Web. It's an application-layer protocol that defines how messages are formatted and transmitted between web browsers and servers. HTTP operates on a request-response model: clients (usually web browsers) send requests to servers, which then respond with the requested data. The protocol is stateless, meaning each request is independent of any previous requests. HTTP supports various methods (GET, POST, PUT, DELETE, etc.) for different types of interactions with resources. HTTPS is the secure version of HTTP, using encryption to protect data in transit. HTTP/2 and HTTP/3 are more recent versions, offering improved performance through features like multiplexing and header compression. Understanding HTTP is crucial for web development, as it underpins how web applications communicate and function.\n\nVisit the following resources to learn more:",
+    "description": "HTTP (Hypertext Transfer Protocol) is the main way information is sent and received on the internet. It's like the language web browsers and servers use to talk to each other. When you visit a website, your browser sends an HTTP request to the server, and the server sends back the website data. Each request is separate, so the server doesn't remember past requests. HTTP has different commands (like GET for getting data, POST for sending it). HTTPS is a secure version of HTTP that encrypts information. Newer versions like HTTP/2 and HTTP/3 are faster. Knowing HTTP is important for anyone building websites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Everything you need to know about HTTP",
@@ -69,7 +69,7 @@
   },
   "ZhSuu2VArnzPDp6dPQQSC": {
     "title": "What is Domain Name?",
-    "description": "A domain name is a human-readable address used to identify and access websites on the internet. It serves as a more memorable alternative to the numerical IP addresses that computers use to locate web servers. Domain names consist of two main parts: the second-level domain (usually the website or organization name) and the top-level domain (such as .com, .org, or .net). They are registered through domain registrars and must be unique within their top-level domain. Domain names are crucial for branding, marketing, and establishing an online presence. The Domain Name System (DNS) translates domain names into IP addresses, allowing users to access websites by typing in familiar names rather than complex number sequences. Domain names can be customized, transferred, and renewed, playing a vital role in the structure and accessibility of the World Wide Web.\n\nVisit the following resources to learn more:",
+    "description": "A domain name is a human-friendly web address (e.g., [google.com](http://google.com)) that acts as a memorable substitute for numerical IP addresses. It comprises a second-level domain (like \"google\") and a top-level domain (like \".com\"). Registered via domain registrars, these unique names are key for branding and online presence. The Domain Name System (DNS) translates these names into IP addresses, enabling easy website access. Domain names are vital for web structure and accessibility.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What is a Domain Name?",
@@ -90,7 +90,7 @@
   },
   "aqMaEY8gkKMikiqleV5EP": {
     "title": "What is hosting?",
-    "description": "Web hosting is a service that allows individuals and organizations to make their websites accessible on the internet. It involves storing website files on powerful computers called servers, which are connected to a high-speed network. When users enter a domain name in their browser, the web host serves the website's content. Hosting services range from shared hosting (where multiple websites share server resources) to dedicated hosting (where a server is exclusively used by one client). Other types include VPS (Virtual Private Server) hosting, cloud hosting, and managed WordPress hosting. Web hosts typically provide additional services such as email hosting, domain registration, SSL certificates, and technical support. The choice of web hosting impacts a website's performance, security, and scalability, making it a crucial decision for any online presence.\n\nVisit the following resources to learn more:",
+    "description": "Web hosting is like renting space on the internet for your website. It means storing your website's files on special computers called servers, so people can visit your site. When someone types your website address, the hosting service sends them your site's content. There are different kinds of hosting, like shared hosting (sharing a server with others) or dedicated hosting (having a server all to yourself). Hosting companies often offer other services too, like email, domain names, and security certificates. Choosing the right hosting is important for how well your website works.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What is Web Hosting?",
@@ -111,7 +111,7 @@
   },
   "hkxw9jPGYphmjhTjw8766": {
     "title": "DNS and how it works?",
-    "description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like [www.example.com](http://www.example.com)) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses.\n\nVisit the following resources to learn more:",
+    "description": "DNS (Domain Name System) translates human-readable domain names (e.g., [www.example.com](http://www.example.com)) into IP addresses computers use. It's a global, decentralized system of servers. When you enter a domain name, DNS servers find the corresponding IP address, letting your browser connect to the website. This makes navigating the internet easy, as you don't need to remember numeric IP addresses.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What is DNS?",
@@ -142,7 +142,7 @@
   },
   "P82WFaTPgQEPNp5IIuZ1Y": {
     "title": "Browsers and how they work?",
-    "description": "A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.\n\nVisit the following resources to learn more:",
+    "description": "Web browsers are apps that let you view websites. When you type a web address, the browser asks a server for the page. It then reads the HTML (structure), CSS (style), and JavaScript (interactivity) to show you the webpage. Browsers have rendering engines (like Blink in Chrome or Gecko in Firefox) to display content and JavaScript engines (like V8 in Chrome) to run code. They also handle things like security, bookmarks, and history.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "How Browsers Work",
@@ -168,18 +168,13 @@
   },
   "yWG2VUkaF5IJVVut6AiSy": {
     "title": "HTML",
-    "description": "HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It provides a structure for content on the World Wide Web, using a system of elements and attributes to define the layout and content of a document. HTML elements are represented by tags, which browsers interpret to render the visual and auditory elements of a web page. The language has evolved through several versions, with HTML5 being the current standard, introducing semantic elements, improved multimedia support, and enhanced form controls. HTML works in conjunction with CSS for styling and JavaScript for interactivity, forming the foundation of modern web development.\n\nVisit the following resources to learn more:",
+    "description": "HTML (Hypertext Markup Language) is the standard for creating web pages, structuring content with elements and attributes. Browsers interpret HTML tags to render pages. HTML5, the current standard, adds semantic elements, multimedia support, and form controls. It works with CSS for styling and JavaScript for interactivity, forming web development's foundation.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects",
         "url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/",
         "type": "course"
       },
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@@ -199,13 +194,8 @@
   },
   "PCirR2QiFYO89Fm-Ev3o1": {
     "title": "Learn the basics",
-    "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:",
+    "description": "HTML (HyperText Markup Language) is the backbone of webpages. It structures the content you see online. You use CSS to style this HTML structure and JavaScript to make it interactive. Think of HTML as the skeleton of a website.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "web.dev: Learn HTML",
         "url": "https://web.dev/learn/html",
@@ -220,18 +210,13 @@
   },
   "z8-556o-PaHXjlytrawaF": {
     "title": "Writing Semantic HTML",
-    "description": "Semantic HTML refers to the use of HTML markup to reinforce the meaning of web content, rather than merely defining its appearance. It involves using HTML elements that clearly describe their purpose and content. Semantic HTML improves accessibility, SEO, and code readability. Key elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. It also encompasses using appropriate heading levels (`<h1>` to `<h6>`), lists (`<ul>`, `<ol>`,`<li>`), and data tables (`<table>`, `<th>`, `<td>`). Semantic HTML helps screen readers interpret page content, enables better browser rendering, and provides clearer structure for developers. By using semantically correct elements, developers create more meaningful, accessible, and maintainable web documents that are easier for both humans and machines to understand and process.\n\nVisit the following resources to learn more:",
+    "description": "Semantic HTML uses markup to convey the meaning of web content, not just its appearance, by employing elements like `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. This practice enhances accessibility, SEO, and code readability. It includes proper use of headings, lists, and tables. Semantic HTML aids screen readers, improves browser rendering, and offers clearer structure for developers, leading to more meaningful, accessible, and maintainable web documents for both humans and machines.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Guide to Writing Semantic HTML",
         "url": "https://cs.fyi/guide/writing-semantic-html",
         "type": "article"
       },
-      {
-        "title": "W3Schools: Semantic HTML",
-        "url": "https://www.w3schools.com/html/html5_semantic_elements.asp",
-        "type": "article"
-      },
       {
         "title": "Semantic HTML - web.dev",
         "url": "https://web.dev/learn/html/semantic-html/",
@@ -246,7 +231,7 @@
   },
   "V5zucKEHnIPPjwHqsMPHF": {
     "title": "Forms and Validations",
-    "description": "Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.\n\nVisit the following resources to learn more:",
+    "description": "Before sending data from a form to a server, it's important to check if all required fields are filled in correctly. This is called client-side form validation. It helps make sure the data sent matches what the form expects, improving data quality and user experience.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "MDN Web Docs: Client-side form validation",
@@ -257,17 +242,12 @@
         "title": "Learn Forms by web.dev",
         "url": "https://web.dev/learn/forms/",
         "type": "article"
-      },
-      {
-        "title": "W3Schools: JavaScript Form Validation",
-        "url": "https://www.w3schools.com/js/js_validation.asp",
-        "type": "article"
       }
     ]
   },
   "iJIqi7ngpGHWAqtgdjgxB": {
     "title": "Accessibility",
-    "description": "Website accessibility is the practice of designing and developing websites that can be used by everyone, including people with disabilities. It involves implementing features and standards that make web content perceivable, operable, understandable, and robust for all users, regardless of their physical or cognitive abilities. This includes providing text alternatives for images, ensuring keyboard navigation, using sufficient color contrast, offering captions for audio content, and creating a consistent and predictable layout. Adhering to accessibility guidelines not only improves usability for people with disabilities but also enhances the overall user experience for all visitors while potentially increasing a site's reach and legal compliance.\n\nVisit the following resources to learn more:",
+    "description": "Website accessibility means making sites usable by everyone, including those with disabilities. This involves clear design, like text for images, keyboard navigation, good color contrast, and captions. Following accessibility rules helps all users, not just those with disabilities, and can also help with legal compliance and reaching more people.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Accessibility for Developers by Google",
@@ -288,7 +268,7 @@
   },
   "mH_qff8R7R6eLQ1tPHLgG": {
     "title": "SEO Basics",
-    "description": "SEO (Search Engine Optimization) basics involve strategies to improve a website's visibility and ranking in search engine results. Key elements include creating relevant, high-quality content, proper use of keywords, optimizing meta tags and URLs, ensuring mobile-friendliness, improving site speed, and building quality backlinks. SEO also focuses on user experience, including easy navigation and responsive design. Technical aspects like XML sitemaps, HTTPS security, and structured data markup play crucial roles. Understanding user intent, regularly updating content, and adhering to search engine guidelines are essential practices. Effective SEO combines on-page optimization, off-page tactics, and technical enhancements to increase organic traffic, improve user engagement, and enhance online presence in an increasingly competitive digital landscape.\n\nVisit the following resources to learn more:",
+    "description": "SEO (Search Engine Optimization) helps websites show up higher in search results. This means using good keywords, creating quality content, making sure your site is fast and mobile-friendly, and getting links from other trusted sites. Good navigation and design also help. Technical things like sitemaps and secure HTTPS are important too. SEO aims to get more visitors from search engines by improving your site both on the page and technically.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Complete SEO Course for Beginners",
@@ -314,7 +294,7 @@
   },
   "ZhJhf1M2OphYbEmduFq-9": {
     "title": "CSS",
-    "description": "CSS (Cascading Style Sheets) is a styling language used to describe the presentation of a document written in HTML or XML. It defines how elements should be displayed on screen, on paper, or in other media. CSS separates the design from the content, allowing for greater flexibility and control over the layout, colors, and fonts of web pages. It uses a system of selectors to target HTML elements and apply styles to them. CSS supports responsive design through media queries, enabling the creation of layouts that adapt to different screen sizes and devices. The cascade, inheritance, and specificity are key concepts in CSS that determine how styles are applied when multiple rules target the same element. Modern CSS includes features like Flexbox and Grid for advanced layout control, animations, and transitions for creating dynamic user interfaces.\n\nVisit the following resources to learn more:",
+    "description": "CSS (Cascading Style Sheets) is what makes websites look good. It's a language used to style HTML documents, controlling things like layout, colors, and fonts. CSS keeps the design separate from the HTML content, which makes websites easier to manage. It uses \"selectors\" to pick HTML elements and apply styles. CSS also helps make websites responsive, meaning they look good on any device, thanks to media queries. Important ideas in CSS are the cascade (how styles override each other), inheritance (how styles pass from parent to child elements), and specificity (which style rule wins). Modern CSS has cool tools like Flexbox and Grid for layout, plus animations and transitions for interactive designs.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "CSS Complete Course",
@@ -345,13 +325,8 @@
   },
   "YFjzPKWDwzrgk2HUX952L": {
     "title": "Learn the basics",
-    "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:",
+    "description": "CSS (Cascading Style Sheets) is the language for styling websites. It makes the frontend look good. Along with HTML and JavaScript, CSS is a key part of the World Wide Web. It controls colors, fonts, layout, and more to visually design webpages.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools — Learn CSS",
-        "url": "https://www.w3schools.com/css/",
-        "type": "article"
-      },
       {
         "title": "web.dev — Learn CSS",
         "url": "https://web.dev/learn/css/",
@@ -371,7 +346,7 @@
   },
   "dXeYVMXv-3MRQ1ovOUuJW": {
     "title": "Making Layouts",
-    "description": "Making layouts in web design involves organizing content and visual elements on a page to create an effective and aesthetically pleasing user interface. Modern layout techniques primarily use CSS, with key approaches including:\n\n1.  Flexbox for one-dimensional layouts (rows or columns)\n2.  CSS Grid for two-dimensional layouts\n3.  Responsive design principles for adaptability across devices\n4.  CSS frameworks like Bootstrap or Tailwind for rapid development\n5.  Custom CSS properties (variables) for consistent styling\n6.  Media queries for device-specific adjustments\n7.  CSS positioning and float for specific element placement\n\nThese tools allow designers to create complex, responsive layouts that maintain consistency and usability across various screen sizes and devices. Effective layouts consider visual hierarchy, user flow, accessibility, and content prioritization to enhance the overall user experience and achieve design goals.\n\nVisit the following resources to learn more:",
+    "description": "Making web layouts means arranging content on a page well. Modern CSS uses Flexbox (for rows/columns) and CSS Grid (for 2D layouts). Responsive design makes sites fit all devices. Frameworks like Bootstrap or Tailwind help build faster. Good layouts think about what's important, how users move through the page, and if everyone can use it. This makes the site look good and work well.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Learn and Practice Flexbox",
@@ -397,7 +372,7 @@
   },
   "TKtWmArHn7elXRJdG6lDQ": {
     "title": "Responsive Design",
-    "description": "Responsive web design is an approach to web development that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. It uses fluid grids, flexible images, and CSS media queries to adapt the layout to the viewing environment. The goal is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly, providing an optimal viewing experience across a wide range of devices, from desktop computers to mobile phones. This approach eliminates the need for a different design and development phase for each new gadget on the market, while ensuring a consistent and intuitive user experience across all devices.\n\nVisit the following resources to learn more:",
+    "description": "Responsive web design makes websites look good on all devices, from big desktops to small phones. It uses flexible layouts, images that resize, and CSS media queries to change how the site appears based on screen size. This way, users get a great experience no matter what device they use, and developers don't need to make separate sites for each gadget.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Conquering Responsive Layouts",
@@ -410,7 +385,7 @@
         "type": "article"
       },
       {
-        "title": "The Beginner’s Guide to Responsive Web Design",
+        "title": "The Beginner's Guide to Responsive Web Design",
         "url": "https://kinsta.com/blog/responsive-web-design/",
         "type": "article"
       },
@@ -423,7 +398,7 @@
   },
   "ODcfFEorkfJNupoQygM53": {
     "title": "JavaScript",
-    "description": "JavaScript is a high-level, interpreted programming language that is a core technology of the World Wide Web. It allows for dynamic, client-side scripting in web browsers, enabling interactive web pages and user interfaces. JavaScript supports object-oriented, imperative, and functional programming styles. It's also used server-side through Node.js, for desktop application development with frameworks like Electron, and in various other contexts. The language features dynamic typing, first-class functions, and prototype-based object-orientation. JavaScript's ubiquity in web development, coupled with its versatility and continuous evolution through ECMAScript standards, has made it one of the most popular programming languages in use today.\n\nVisit the following resources to learn more:",
+    "description": "JavaScript is a key programming language for the web. It makes websites interactive, like when things move or change when you click them. It works in web browsers but also on servers (with Node.js) and for desktop apps. JavaScript is flexible and always updating, making it very popular for all kinds of web development.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated JavaScript Roadmap",
@@ -449,7 +424,7 @@
   },
   "A4brX0efjZ0FFPTB4r6U0": {
     "title": "Fetch API / Ajax (XHR)",
-    "description": "The Fetch API is a modern JavaScript interface for making HTTP requests in web browsers. It provides a more powerful and flexible way to send and receive data compared to older methods like XMLHttpRequest. Fetch uses Promises, allowing for cleaner asynchronous code. It supports various data formats, custom headers, and different types of requests (GET, POST, etc.). The API is designed to be extensible and integrates well with other web technologies. While simpler for basic use cases, Fetch also handles complex scenarios like request cancellation and reading streamed responses. It's widely supported in modern browsers and has become the standard for network requests in client-side JavaScript applications.\n\nVisit the following resources to learn more:",
+    "description": "The Fetch API is a new way for JavaScript in browsers to make HTTP requests (getting or sending data online). It's better and more flexible than older ways like XMLHttpRequest. Fetch uses Promises, making code that waits for data cleaner. It handles different data types and request methods (GET, POST). It's now the standard way for websites to talk to servers and is supported by most browsers.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Fetch API MDN Docs",
@@ -475,7 +450,7 @@
   },
   "0MAogsAID9R04R5TTO2Qa": {
     "title": "Learn DOM Manipulation",
-    "description": "The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc.\n\nVisit the following resources to learn more:",
+    "description": "The Document Object Model (DOM) is how programs see HTML and XML documents. It lets scripts change a page's structure, content, and style dynamically. With the DOM, you can easily work with HTML tags, IDs, classes, and attributes to make webpages interactive.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "DOM Tree",
@@ -506,13 +481,8 @@
   },
   "wQSjQqwKHfn5RGPk34BWI": {
     "title": "Learn the Basics",
-    "description": "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.\n\nVisit the following resources to learn more:",
+    "description": "JavaScript makes webpages interactive. Think of sliders, what happens when you click something, or pop-up messages – that's often JavaScript at work. It adds dynamic behavior to the static structure created by HTML and styled by CSS.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
@@ -527,7 +497,7 @@
   },
   "MXnFhZlNB1zTsBFDyni9H": {
     "title": "VCS Hosting",
-    "description": "Repo hosting services provide platforms for storing, managing, and collaborating on software projects using version control systems, primarily Git. These services offer features like issue tracking, pull requests, code review tools, wikis, and continuous integration/continuous deployment (CI/CD) pipelines. Popular platforms include GitHub, GitLab, Bitbucket, and SourceForge, each with unique offerings. GitHub, owned by Microsoft, is the largest and most widely used, known for its open-source community. GitLab offers a complete DevOps platform with built-in CI/CD. Bitbucket, part of Atlassian's suite, integrates well with other Atlassian tools. These services facilitate team collaboration, code sharing, and project management, making them integral to modern software development workflows. They also often provide features like access control, branch protection, and integration with various development tools, enhancing the overall development process.\n\nVisit the following resources to learn more:",
+    "description": "Repo hosting services, like GitHub, GitLab, and Bitbucket, are platforms for storing, managing, and collaborating on software projects using version control systems, mainly Git. They facilitate teamwork, code sharing, and project tracking in software development.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Git & Github Roadmap",
@@ -558,7 +528,7 @@
   },
   "NIY7c4TQEEHx0hATu-k5C": {
     "title": "Version Control Systems",
-    "description": "Version Control Systems (VCS) are tools that help developers track and manage changes to code over time. They allow multiple people to work on a project simultaneously, maintaining a history of modifications. Git is the most popular VCS, known for its distributed nature and branching model. Other systems include Subversion (SVN) and Mercurial. VCS enables features like branching for parallel development, merging to combine changes, and reverting to previous states. They facilitate collaboration through remote repositories, pull requests, and code reviews. VCS also provides backup and recovery capabilities, conflict resolution, and the ability to tag specific points in history. By maintaining a detailed record of changes and supporting non-linear development, VCS has become an essential tool in modern software development, enhancing productivity, code quality, and team collaboration.\n\nVisit the following resources to learn more:",
+    "description": "Version Control Systems (VCS) like Git, Subversion, and Mercurial track code changes, enabling multiple developers to collaborate by maintaining a history of modifications. Git is popular for its distributed model and branching. VCS features include branching for parallel work, merging changes, reverting to past states, remote repositories, pull requests, and code reviews. They also offer backup, recovery, conflict resolution, and tagging. VCS is crucial in modern software development for productivity, code quality, and collaboration.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Git & Github Roadmap",
@@ -584,7 +554,7 @@
   },
   "R_I4SGYqLk5zze5I1zS_E": {
     "title": "Git",
-    "description": "Git is a distributed version control system designed to handle projects of any size with speed and efficiency. Created by Linus Torvalds in 2005, Git tracks changes in source code during software development, allowing multiple developers to work together on non-linear development. It provides strong support for branching, merging, and distributed development workflows. Git maintains a complete history of all changes, enabling easy rollbacks and comparisons between versions. Its distributed nature means each developer has a full copy of the repository, allowing for offline work and backup. Git's speed, flexibility, and robust branching and merging capabilities have made it the most widely used version control system in software development, particularly for open-source projects.\n\nVisit the following resources to learn more:",
+    "description": "Git is a tool for tracking code changes in software projects. It lets many developers work together by keeping a history of all changes. Git is great for branching (working on different features at once) and merging (combining changes). Everyone has a full copy of the project, so they can work offline. Git is fast, flexible, and the most popular version control system, especially for open-source projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Git & Github Roadmap",
@@ -615,7 +585,7 @@
   },
   "IqvS1V-98cxko3e9sBQgP": {
     "title": "Package Managers",
-    "description": "Package managers are tools that automate the process of installing, updating, configuring, and removing software packages in a consistent manner. They handle dependency resolution, version management, and package distribution for programming languages and operating systems. Popular package managers include npm for JavaScript, pip for Python, and apt for Debian-based Linux distributions. These tools maintain a centralized repository of packages, allowing developers to easily share and reuse code. Package managers simplify project setup, ensure consistency across development environments, and help manage complex dependency trees. They play a crucial role in modern software development by streamlining workflow, enhancing collaboration, and improving code reusability.\n\nVisit the following resources to learn more:",
+    "description": "Package managers are tools that help install, update, and remove software pieces (packages). They manage versions and what other packages are needed. Examples are npm for JavaScript and pip for Python. They make it easy to share and reuse code by keeping packages in one place. Package managers simplify project setup and help keep things consistent. They are very important for modern software development by making work smoother and improving teamwork.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "PNPM: The Faster, More Performant NPM",
@@ -646,7 +616,7 @@
   },
   "qmTVMJDsEhNIkiwE_UTYu": {
     "title": "GitHub",
-    "description": "GitHub has become a central hub for open-source projects and is widely used by developers, companies, and organizations for both private and public repositories. It was acquired by Microsoft in 2018 but continues to operate as a relatively independent entity. GitHub's popularity has made it an essential tool in modern software development workflows and a key platform for showcasing coding projects and contributing to open-source software.\n\nVisit the following resources to learn more:",
+    "description": "GitHub is a popular website for hosting Git projects. It's a key place for open-source software and is used by developers and companies for both public and private code. Microsoft bought GitHub in 2018. It's a vital tool for modern software development, showing off projects, and contributing to open-source.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Git & Github Roadmap",
@@ -677,7 +647,7 @@
   },
   "zIoSJMX3cuzCgDYHjgbEh": {
     "title": "GitLab",
-    "description": "GitLab is a web-based DevOps platform that provides a complete solution for the software development lifecycle. GitLab emphasizes an all-in-one approach, integrating various development tools into a single platform. It's available as both a cloud-hosted service and a self-hosted solution, giving organizations flexibility in deployment. GitLab's focus on DevOps practices and its comprehensive feature set make it popular among enterprises and teams seeking a unified platform for their entire development workflow. While similar to GitHub in many respects, GitLab's integrated CI/CD capabilities and self-hosting options are often cited as key differentiators.\n\nVisit the following resources to learn more:",
+    "description": "GitLab is a web platform for the entire software development process (DevOps). It offers many tools in one place. You can use it online or host it yourself. GitLab is popular with businesses that want one platform for all their development work. It's like GitHub but often highlighted for its built-in CI/CD (automating build and release) and self-hosting options.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "GitLab Website",
@@ -703,7 +673,7 @@
   },
   "DILBiQp7WWgSZ5hhtDW6A": {
     "title": "Bitbucket",
-    "description": "Bitbucket is a web-based version control repository hosting service owned by Atlassian. It provides Git and Mercurial version control systems for both open source and private projects. Bitbucket offers features such as pull requests, branch permissions, and in-line commenting for code review. It integrates seamlessly with other Atlassian products like Jira and Trello, facilitating project management and issue tracking. Bitbucket provides both cloud-hosted and self-hosted options, catering to different organizational needs. It supports continuous integration and deployment (CI/CD) through Bitbucket Pipelines.\n\nVisit the following resources to learn more:",
+    "description": "Bitbucket, by Atlassian, hosts Git and Mercurial code projects. It’s for both open-source and private work. Bitbucket has features like pull requests and code review comments. It works well with other Atlassian tools like Jira for project management. You can use it online or host it yourself. Bitbucket also supports CI/CD (automating build and release) with Bitbucket Pipelines.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "How to use BitBucket?",
@@ -724,7 +694,7 @@
   },
   "yrq3nOwFREzl-9EKnpU-e": {
     "title": "yarn",
-    "description": "Yarn is a fast, reliable, and secure package manager for JavaScript, developed by Facebook as an alternative to npm (Node Package Manager). It addresses issues of consistency, security, and performance in dependency management. Yarn uses a lockfile to ensure consistent installations across different environments and offers parallel installation of packages, significantly speeding up the process. It features offline mode, allowing installation from cached packages, and provides improved network performance through request queuing and retries. Yarn's focus on security includes checksum verification of every installed package. While it shares many features with npm, Yarn's emphasis on speed, reliability, and security has made it a popular choice among developers, especially for larger projects. Recent versions of Yarn (Berry) introduce new features like Plug'n'Play for even faster and more efficient package resolution.\n\nVisit the following resources to learn more:",
+    "description": "Yarn is a JavaScript package manager developed by Facebook, offering a fast, reliable, and secure alternative to npm. It ensures consistent installations with a lockfile, speeds up processes with parallel installations and offline mode, and enhances security via checksum verification. Yarn, especially later versions like Berry with Plug'n'Play, is favored for large projects due to its performance and efficiency in dependency management.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Yarn - Getting Started",
@@ -745,7 +715,7 @@
   },
   "SLxA5qJFp_28TRzr1BjxZ": {
     "title": "pnpm",
-    "description": "pnpm (performant npm) is a fast, disk-space efficient package manager for JavaScript and Node.js projects. It addresses inefficiencies in npm and Yarn by using a unique approach to storing and linking dependencies. pnpm creates a single, global store for all packages and uses hard links to reference them in project node\\_modules, significantly reducing disk space usage and installation time. It strictly adheres to package.json specifications, ensuring consistent installs across environments. pnpm offers features like workspace support for monorepos, side-by-side versioning, and improved security through better isolation of dependencies. While less widely adopted than npm or Yarn, pnpm's performance benefits and efficient disk usage are attracting increasing attention in the JavaScript community.\n\nVisit the following resources to learn more:",
+    "description": "pnpm (performant npm) is a fast and disk-space-saving package manager for JavaScript. It's different from npm and Yarn because it stores packages in one global place and links to them. This means less disk space used and faster installs. pnpm follows `package.json` strictly, making sure installs are consistent. It supports monorepos and is more secure by keeping dependencies separate. It's gaining popularity for its speed and efficiency.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "PNPM Website",
@@ -766,7 +736,7 @@
   },
   "ib_FHinhrw8VuSet-xMF7": {
     "title": "npm",
-    "description": "npm (Node Package Manager) is the default package manager for Node.js, providing a vast ecosystem of reusable JavaScript code. It allows developers to easily share, discover, and install packages (libraries and tools) for their projects. npm consists of a command-line interface for package installation and management, and an online repository of open-source packages. It handles dependency management, version control, and script running for Node.js projects. The npm registry is the largest software registry in the world, containing over a million packages. npm's package.json file defines project metadata and dependencies, enabling reproducible builds across different environments. Despite competition from alternatives like Yarn, npm remains the most widely used package manager in the JavaScript ecosystem.\n\nVisit the following resources to learn more:",
+    "description": "npm (Node Package Manager) is the main tool for managing code packages in Node.js. It helps developers find, share, and use JavaScript code easily. Think of it as a big library where you can get tools and code bits for your projects. npm uses a file called `package.json` to keep track of what your project needs, making it easy to build your project anywhere. Even with other tools like Yarn, npm is still the most popular choice for JavaScript developers.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "How to NPM",
@@ -802,10 +772,10 @@
   },
   "eXezX7CVNyC1RuyU_I4yP": {
     "title": "Pick a Framework",
-    "description": "Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.\n\nVisit the following resources to learn more:",
+    "description": "Web frameworks are toolkits for building web applications. They are sets of libraries that help create software or websites. Different frameworks have different features, depending on what you need to do. They give structure, rules, and tools for development. Examples are React, Angular, and Vue.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "15 Crazy New JS Framework Features You Don’t Know Yet",
+        "title": "15 Crazy New JS Framework Features You Don't Know Yet",
         "url": "https://www.youtube.com/watch?v=466U-2D86bc",
         "type": "video"
       },
@@ -818,7 +788,7 @@
   },
   "-bHFIiXnoUQSov64WI9yo": {
     "title": "Angular",
-    "description": "Angular is a popular open-source web application framework developed and maintained by Google. It uses TypeScript, a statically typed superset of JavaScript, to build scalable and efficient single-page applications (SPAs). Angular follows a component-based architecture, where the user interface is composed of reusable, self-contained components. The framework provides features like two-way data binding, dependency injection, and a powerful template syntax, which simplify the development of complex web applications. Angular also includes a comprehensive set of tools for testing, routing, and state management, making it a full-fledged solution for front-end development. Its modular structure and emphasis on best practices make it particularly suitable for large-scale enterprise applications.\n\nVisit the following resources to learn more:",
+    "description": "Angular is a popular tool from Google for building websites and web apps. It uses TypeScript (a type of JavaScript) to create large, efficient single-page applications (SPAs), where content loads in one go without needing to reload the whole page. Angular builds UIs with reusable components, like building blocks. It has features like two-way data binding (data updates automatically in different places), dependency injection (helps manage code parts), and a strong template system. Angular also offers tools for testing, page navigation, and managing app data, making it great for big, complex projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Angular Roadmap",
@@ -844,7 +814,7 @@
   },
   "ERAdwL1G9M1bnx-fOm5ZA": {
     "title": "Vue.js",
-    "description": "Vue.js is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable, allowing developers to integrate it into projects gradually. Vue uses a template-based approach with a virtual DOM for efficient rendering. It features a reactive and composable component system, making it easy to organize and reuse code. Vue's core library focuses on the view layer, but it can be easily extended with official and community-built tools for state management, routing, and build tooling. Known for its gentle learning curve and flexibility, Vue has gained popularity for both small projects and large-scale applications. Its performance, lightweight nature, and comprehensive documentation have contributed to its widespread adoption in the web development community.\n\nVisit the following resources to learn more:",
+    "description": "Vue.js is a JavaScript framework for building website interfaces. It's easy to start with and can be added to projects bit by bit. Vue uses templates and a virtual DOM (a lightweight copy of the real page) to show things on screen efficiently. It has a system of reusable components, making code organized. While Vue mainly handles what users see, it works well with other tools for things like managing data or page navigation. It's known for being easy to learn, flexible, and fast, making it popular for all kinds of projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Vue Roadmap",
@@ -870,7 +840,7 @@
   },
   "tG5v3O4lNIFc2uCnacPak": {
     "title": "React",
-    "description": "React is an open-source JavaScript library for building user interfaces, primarily for single-page applications. Developed and maintained by Facebook, it allows developers to create reusable UI components that efficiently update and render as data changes. React uses a virtual DOM for performance optimization and supports a unidirectional data flow. Its component-based architecture promotes modularity and reusability. React's ecosystem includes tools like Redux for state management and React Native for mobile app development. The library's declarative nature, efficient rendering, and strong community support have made it one of the most popular choices for front-end development in modern web applications.\n\nVisit the following resources to learn more:",
+    "description": "React is a JavaScript tool from Facebook for building UIs, especially for single-page apps. It lets you create reusable UI parts that update when data changes. React uses a virtual DOM for speed and has a one-way data flow. This component style makes code neat and reusable. React also works with tools like Redux for data management and React Native for mobile apps. It's popular because it's clear, fast, and has a big community.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Full Stack React Developer Course",
@@ -896,7 +866,7 @@
   },
   "ZR-qZ2Lcbu3FtqaMd3wM4": {
     "title": "Svelte",
-    "description": "Svelte is a modern JavaScript framework for building user interfaces that takes a unique approach to web development. Unlike traditional frameworks that do most of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. It compiles your code to efficient vanilla JavaScript, resulting in smaller bundle sizes and better runtime performance. Svelte uses a component-based architecture and features a simple, intuitive syntax that allows developers to write less code. It includes built-in state management, CSS scoping, and animations. Svelte's approach eliminates the need for a virtual DOM, leading to faster initial loads and updates. Its simplicity and performance benefits have been gaining it increasing popularity in the front-end development community.\n\nVisit the following resources to learn more:",
+    "description": "Svelte is a JavaScript tool for building UIs. Unlike others, Svelte does its main work during build time, not in the browser. It turns your code into small, fast, plain JavaScript. Svelte uses components and has a simple syntax, so you write less code. It includes features for managing data, styling, and animations. Because Svelte doesn't use a virtual DOM, pages load and update quickly. It's liked for its simplicity and speed.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Svelte Course Playlist for beginners",
@@ -927,7 +897,7 @@
   },
   "DxOSKnqAjZOPP-dq_U7oP": {
     "title": "Solid JS",
-    "description": "SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses a fine-grained reactivity system that updates only what changes, resulting in high performance. SolidJS compiles templates to real DOM nodes and updates them in-place, avoiding the overhead of a virtual DOM. It offers a syntax similar to React, making it familiar to many developers, but with a different underlying mechanism. SolidJS supports JSX, provides built-in state management, and emphasizes composition over inheritance. Its small size and lack of runtime overhead make it particularly suitable for applications requiring high performance. While newer compared to some frameworks, SolidJS is gaining popularity for its simplicity, performance, and developer-friendly approach to reactive programming.\n\nVisit the following resources to learn more:",
+    "description": "SolidJS is a JavaScript tool for building website interfaces that is known for being very fast and efficient. It updates only the parts of the page that change, which makes it perform well. SolidJS doesn't use a virtual DOM; instead, it directly changes the real DOM. Its syntax is like React, so many developers find it familiar. It supports JSX, has built-in ways to manage data, and is small in size. SolidJS is getting popular for its speed, simplicity, and smart way of handling updates.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "SolidJS Website",
@@ -953,7 +923,7 @@
   },
   "N5DCb6bDfgUnSdHPLYY4g": {
     "title": "Qwik",
-    "description": "Qwik is an open-source front-end framework designed for optimal performance and near-instant loading of web applications. It focuses on delivering a \"resumable\" application model, where the app can start running with minimal JavaScript downloaded. Qwik achieves this through fine-grained lazy loading, serialization of the application state, and prefetching. It uses a unique approach to hydration, only loading JavaScript for interactive elements when needed. Qwik is built for modern web standards and aims to solve performance issues common in large-scale web applications. While still relatively new compared to established frameworks, Qwik's innovative approach to performance optimization is garnering attention in the web development community.\n\nLearn more from the following resources:",
+    "description": "Qwik is a new front-end tool for making websites load super fast. It uses a \"resumable\" idea, meaning apps start with very little JavaScript. Qwik only loads code for interactive parts when you need them. This makes even big websites feel quick. It's getting noticed for its smart way of making sites fast.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "Qwik Website",
@@ -969,7 +939,7 @@
   },
   "XDTD8el6OwuQ55wC-X4iV": {
     "title": "Writing CSS",
-    "description": "Modern CSS emphasizes responsive design with techniques like media queries and fluid typography. It also includes methodologies like CSS-in-JS and utility-first frameworks (e.g., Tailwind CSS). Features such as CSS Logical Properties improve internationalization, while CSS Houdini allows for more powerful custom styling. Modern CSS focuses on performance optimization, maintainability, and creating adaptive, accessible designs across various devices and screen sizes, significantly improving the capabilities and efficiency of web styling.\n\nVisit the following resources to learn more:",
+    "description": "Modern CSS helps make websites that look good on any device using things like media queries and flexible text sizes. It also includes new ways to write CSS, like CSS-in-JS or using frameworks like Tailwind CSS. Features like CSS Logical Properties help with different languages, and CSS Houdini gives more power for custom styles. The main goals are to make CSS fast, easy to keep up, and to create designs that work well for everyone on any screen.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Modern CSS: A Comprehensive Guide",
@@ -990,7 +960,7 @@
   },
   "eghnfG4p7i-EDWfp3CQXC": {
     "title": "Tailwind",
-    "description": "Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. It offers a highly customizable set of pre-defined classes for layout, typography, color, and more, allowing rapid UI development. Tailwind emphasizes flexibility and composability, enabling developers to create unique designs without writing custom CSS. It uses a mobile-first approach and includes a built-in purge feature to remove unused styles in production, resulting in smaller file sizes. Tailwind's philosophy promotes consistency in design while maintaining the freedom to create custom looks. Its popularity has grown due to its efficiency in prototyping and building responsive designs quickly.\n\nVisit the following resources to learn more:",
+    "description": "Tailwind CSS is a special kind of CSS framework that gives you lots of small, ready-to-use style classes. You use these classes directly in your HTML to build custom designs quickly, without writing much custom CSS. It's very flexible and lets you create unique looks. Tailwind is designed for mobile first and automatically removes unused styles to keep your website files small. It's popular because it helps build and try out responsive designs fast.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Tailwind CSS Full Course for Beginners",
@@ -1026,7 +996,7 @@
   },
   "nPg_YWpMJtlhU2t2UD_6B": {
     "title": "CSS Architecture",
-    "description": "CSS architecture refers to the methodologies and organizational strategies used to structure and maintain CSS code in large-scale web projects. It focuses on creating scalable, maintainable, and modular stylesheets to manage the growing complexity of web applications. Key concepts include naming conventions (like BEM or SMACSS), component-based design, separation of concerns, and the use of preprocessors (such as Sass or Less). CSS architecture often employs techniques like CSS modules, utility classes, or CSS-in-JS solutions to improve code reusability and reduce specificity conflicts. The goal is to create a systematic approach to styling that enhances collaboration among developers, reduces code duplication, and facilitates easier updates and maintenance of the visual design across an entire application or website.\n\nVisit the following resources to learn more:",
+    "description": "CSS architecture organizes CSS in large web projects for scalability and maintenance. It involves naming conventions (like BEM), component-based design, and tools like preprocessors. Techniques like CSS modules or utility classes enhance reusability and reduce conflicts. The aim is a systematic styling approach for better collaboration, less code duplication, and easier updates.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "How to Organize Your CSS with a Modular Architecture",
@@ -1047,7 +1017,7 @@
   },
   "UTW1pP59dUehuf0zeHXqL": {
     "title": "CSS Preprocessors",
-    "description": "CSS preprocessors are scripting languages that extend the capabilities of standard CSS, allowing developers to write more maintainable and efficient stylesheets. They introduce features like variables, nesting, mixins, functions, and mathematical operations, which are then compiled into standard CSS. Popular preprocessors include Sass, Less, and Stylus. These tools enable developers to organize styles more logically, reuse code more effectively, and create complex CSS structures with less repetition. Preprocessors often support features like partials for modular stylesheets and built-in color manipulation functions. By using a preprocessor, developers can write more DRY (Don't Repeat Yourself) code, manage large-scale projects more easily, and potentially improve the performance of their stylesheets through optimization during the compilation process.\n\nVisit the following resources to learn more:",
+    "description": "CSS preprocessors (like Sass, Less, Stylus) add extra features to CSS, making it easier to write and manage. They offer things like variables (for colors, sizes), nesting (to organize styles), mixins (reusable style blocks), and functions. This helps keep CSS tidy and avoid repetition, especially in big projects. The preprocessor code is then turned into regular CSS that browsers understand. They make CSS more powerful and efficient.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Sass Website",
@@ -1078,7 +1048,7 @@
   },
   "dRDmS072xeNLX7p_X565w": {
     "title": "BEM",
-    "description": "The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.\n\nVisit the following resources to learn more:",
+    "description": "BEM (Block, Element, Modifier) is a way to name CSS classes in HTML. It helps developers see how HTML and CSS relate in a project. The goal is to make CSS more modular, reusable, and easier to understand, especially in large projects, by creating clear, consistent naming rules.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "BEM Official Website",
@@ -1099,7 +1069,7 @@
   },
   "kukEE5rMSPa4NeNjx21kt": {
     "title": "Sass",
-    "description": "Sass (Syntactically Awesome Style Sheets) is a mature, stable, and powerful professional-grade CSS extension language. It extends CSS with features like variables, nested rules, mixins, inline imports, and more, all with fully CSS-compatible syntax. Sass allows for more organized, maintainable, and reusable styles in complex projects. It compiles to clean, standard CSS, supporting two syntaxes: the original indented syntax and the more popular SCSS (Sassy CSS) syntax. Sass provides functionality like control directives for libraries, making it easier to write well-structured, scalable CSS. Its features help reduce repetition in CSS and save time, making it a popular choice among frontend developers for managing large, complex stylesheets.\n\nVisit the following resources to learn more:",
+    "description": "Sass (Syntactically Awesome Style Sheets) is a tool that makes writing CSS easier and more powerful. It adds features like variables (to store colors or sizes), nested rules (to organize your styles better), and mixins (to reuse styles). This helps keep your CSS neat and easy to manage, especially in big projects. Sass code gets turned into regular CSS that browsers can understand. It has two ways of writing: the original indented style and the more common SCSS style. Sass is popular because it saves time and makes CSS less repetitive.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Sass Website",
@@ -1125,7 +1095,7 @@
   },
   "9WlPENh9g1xOv-zA64Tfg": {
     "title": "PostCSS",
-    "description": "PostCSS is a tool for transforming CSS with JavaScript plugins. It allows developers to enhance their CSS workflow by automating repetitive tasks, adding vendor prefixes, and implementing future CSS features. PostCSS works as a preprocessor, but unlike Sass or Less, it's highly modular and customizable. Users can choose from a wide range of plugins or create their own to suit specific needs. Popular plugins include Autoprefixer for adding vendor prefixes, cssnext for using future CSS features, and cssnano for minification. PostCSS integrates well with various build tools and can be used alongside traditional CSS preprocessors. Its flexibility and performance make it a popular choice for optimizing CSS in modern web development workflows.\n\nVisit the following resources to learn more:",
+    "description": "PostCSS is a tool that uses JavaScript plugins to change CSS. It can automate tasks, add browser prefixes (like `-webkit-`), and let you use future CSS features now. It's like a CSS preprocessor but more flexible, as you pick the plugins you need. Popular plugins include Autoprefixer, cssnext, and cssnano (for making CSS smaller). PostCSS works with many build tools and is liked for its flexibility and speed in modern web development.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "PostCSS Website",
@@ -1146,7 +1116,7 @@
   },
   "i9z0stM4uKu27Cz6NIgNX": {
     "title": "Build Tools",
-    "description": "Build tools are software utilities designed to automate the process of creating executable applications from source code. They handle tasks such as compiling, linking, minifying, and bundling code, as well as running tests and managing dependencies. Common build tools include Make, Gradle, Maven, Webpack, and Gulp. These tools streamline development workflows by reducing manual steps, ensuring consistency across different environments, and optimizing output for production. They often support features like incremental builds, parallel processing, and custom task definitions. Build tools are crucial in modern software development, especially for large-scale projects, as they improve efficiency, reduce errors, and facilitate continuous integration and deployment processes.\n\nVisit the following resources to learn more:",
+    "description": "Build tools automate making apps from source code. They compile, link, minify (shrink), and bundle code, run tests, and manage dependencies. Examples are Webpack, Vite, and Parcel for web development. Build tools speed up development, ensure consistency, and optimize code for users. They're key for modern software, especially big projects, making work more efficient and enabling continuous integration (CI).\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Webpack Website",
@@ -1172,7 +1142,7 @@
   },
   "9VcGfDBBD8YcKatj4VcH1": {
     "title": "Linters and Formatters",
-    "description": "Linters and formatters are tools used in software development to improve code quality and consistency. Linters analyze source code to detect programming errors, bugs, stylistic issues, and suspicious constructs, often enforcing a set of predefined or custom rules. Formatters automatically restructure code to adhere to a consistent style, adjusting elements like indentation, line breaks, and spacing. Together, these tools help maintain code standards across projects and teams, enhance readability, catch potential errors early, and reduce the cognitive load on developers during code reviews. Popular examples include ESLint for JavaScript linting and Prettier for code formatting, both of which can be integrated into development workflows and IDEs for real-time feedback and automatic corrections.\n\nVisit the following resources to learn more:",
+    "description": "Linters and formatters boost code quality. Linters find errors, bugs, and style issues by checking code against rules. Formatters automatically fix style, like indents and spacing. They help keep code consistent, readable, and catch errors early. ESLint and Prettier are popular examples, often used in code editors for live feedback.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What Is a Linter?",
@@ -1183,7 +1153,7 @@
   },
   "hkSc_1x09m7-7BO7WzlDT": {
     "title": "Module Bundlers",
-    "description": "Module bundlers are development tools that combine multiple JavaScript files and their dependencies into a single file, optimized for web browsers. They resolve and manage dependencies, transform and optimize code, and often support features like code splitting and lazy loading. Popular module bundlers include Webpack, Rollup, and Parcel. These tools address challenges in managing complex JavaScript applications by organizing code into modules, eliminating global scope pollution, and improving load times. Bundlers typically support various file formats, enable the use of modern JavaScript features through transpilation, and integrate with task runners and other build tools. Their primary goal is to streamline the development process and enhance application performance in production environments.\n\nVisit the following resources to learn more:",
+    "description": "Module bundlers are tools that take many JavaScript files and combine them into one, which is better for web browsers. They handle dependencies, improve code, and can split code for faster loading. Webpack, Rollup, and Parcel are examples. They help manage big JavaScript projects by organizing code into modules and making load times better. Bundlers also let you use new JavaScript features by changing them to older versions if needed. They make development smoother and apps run better.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "The Complete JavaScript Module Bundlers Guide",
@@ -1209,7 +1179,7 @@
   },
   "NS-hwaWa5ebSmNNRoxFDp": {
     "title": "Parcel",
-    "description": "Parcel is a zero-configuration web application bundler that simplifies the process of building and deploying web projects. It supports multiple programming languages and file types out of the box, including JavaScript, CSS, HTML, and various image formats. Parcel automatically analyzes dependencies, transforms code, and optimizes assets without requiring a complex configuration file. It offers features like hot module replacement, code splitting, and tree shaking by default. Parcel's main selling point is its ease of use and fast build times, achieved through parallel processing and caching. While it may lack some advanced features of more established bundlers like Webpack, Parcel's simplicity and performance make it an attractive option for rapid prototyping and smaller projects.\n\nVisit the following resources to learn more:",
+    "description": "Parcel is a web app bundler that needs no setup. It makes building websites easy by handling many file types like JavaScript, CSS, and HTML automatically. Parcel figures out dependencies, changes code, and optimizes files without needing a config file. It has features like live updates, code splitting, and removing unused code by default. It's known for being easy and fast, great for quick projects or smaller sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Parcel Website",
@@ -1230,7 +1200,7 @@
   },
   "sCjErk7rfWAUvhl8Kfm3n": {
     "title": "Rollup",
-    "description": "Rollup is a module bundler for JavaScript that compiles small pieces of code into larger, more complex structures. It specializes in producing smaller, more efficient bundles for ES modules. Rollup excels at tree-shaking, eliminating unused code for leaner outputs. It's particularly well-suited for libraries and applications using the ES module format. Rollup supports various output formats, including UMD and CommonJS, making it versatile for different deployment scenarios. While it may require more configuration than some alternatives, Rollup's focus on ES modules and its efficient bundling make it popular for projects prioritizing small bundle sizes and modern JavaScript practices.\n\nVisit the following resources to learn more:",
+    "description": "Rollup is a tool that bundles JavaScript code, making small pieces into bigger ones. It's good at making small, efficient bundles, especially for ES modules (a modern way to organize JavaScript). Rollup is great at \"tree-shaking,\" which means it removes unused code to make files smaller. It can output code in different formats, so it's flexible. While it might need more setup, Rollup is liked for its small bundles and focus on modern JavaScript.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Rollup Website and Docs",
@@ -1251,7 +1221,7 @@
   },
   "twufEtHgxcRUWAUQ9bXus": {
     "title": "Webpack",
-    "description": "Webpack is a popular open-source JavaScript module bundler that transforms, bundles, or packages resources for the web. It takes modules with dependencies and generates static assets representing those modules. Webpack can handle not just JavaScript, but also other assets like CSS, images, and fonts. It uses loaders to preprocess files and plugins to perform a wider range of tasks like bundle optimization. Webpack's key features include code splitting, lazy loading, and a rich ecosystem of extensions. It supports hot module replacement for faster development and tree shaking to eliminate unused code. While it has a steeper learning curve compared to some alternatives, Webpack's flexibility and powerful features make it a standard tool in many modern JavaScript development workflows, especially for complex applications.\n\nVisit the following resources to learn more:",
+    "description": "Webpack is an open-source JavaScript module bundler that processes and packages web resources, including JavaScript, CSS, images, and fonts. It uses loaders for preprocessing and plugins for tasks like optimization. Key features are code splitting, lazy loading, hot module replacement for faster development, and tree shaking to remove unused code. Despite a steeper learning curve, Webpack's flexibility and power make it a standard for complex JavaScript applications.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Webpack",
@@ -1277,7 +1247,7 @@
   },
   "4W7UXfdKIUsm1bUrjdTVT": {
     "title": "esbuild",
-    "description": "esbuild is a high-performance JavaScript bundler and minifier designed for speed and efficiency. Created by Evan Wallace, it's written in Go and compiles to native code, making it significantly faster than traditional JavaScript-based build tools. esbuild supports modern JavaScript features, TypeScript, and JSX out of the box, with near-instant bundling times even for large projects. It offers a simple API and command-line interface, making it easy to integrate into existing build pipelines. While primarily focused on speed, esbuild also provides basic code splitting, tree shaking, and source map generation. Its extreme performance makes it particularly suitable for development environments and as a foundation for other build tools, though it may lack some advanced features found in more mature bundlers.\n\nVisit the following resources to learn more:",
+    "description": "esbuild is a very fast JavaScript bundler and minifier. It's written in Go, so it's much quicker than older tools. esbuild handles modern JavaScript, TypeScript, and JSX. It bundles code almost instantly, even for big projects. It's easy to use with a simple API. While super fast, it might not have all the advanced features of older bundlers, but it's great for development and as a base for other tools.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Let's Learn esbuild! (with Sunil Pai) — Learn With Jason",
@@ -1303,7 +1273,7 @@
   },
   "0Awx3zEI5_gYEIrD7IVX6": {
     "title": "Vite",
-    "description": "Vite is a modern build tool and development server designed for fast and lean development of web applications. Created by Evan You, the author of Vue.js, Vite leverages native ES modules in the browser to enable near-instantaneous server start and lightning-fast hot module replacement (HMR). It supports various frameworks including Vue, React, and Svelte out of the box. Vite uses Rollup for production builds, resulting in highly optimized bundles. It offers features like CSS pre-processor support, TypeScript integration, and plugin extensibility. Vite's architecture, which separates dev and build concerns, allows for faster development cycles and improved developer experience, particularly for large-scale projects where traditional bundlers might struggle with performance.\n\nVisit the following resources to learn more:",
+    "description": "Vite is a modern build tool by Evan You (creator of Vue.js) that offers rapid web development through native ES modules, enabling instant server starts and fast Hot Module Replacement (HMR). It supports frameworks like Vue, React, and Svelte, uses Rollup for optimized production builds, and includes features like CSS pre-processor support and TypeScript integration. Vite enhances developer experience, especially for large projects, by separating development and build processes for faster cycles.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vite - The Build Tool for the Web",
@@ -1334,7 +1304,7 @@
   },
   "zbkpu_gvQ4mgCiZKzS1xv": {
     "title": "Prettier",
-    "description": "Prettier is an opinionated code formatter that supports multiple programming languages, including JavaScript, TypeScript, CSS, and more. It automatically formats code to adhere to a consistent style, eliminating debates about code formatting in development teams. Prettier parses code and reprints it with its own rules, taking maximum line length into account and wrapping code when necessary. It integrates with most editors and can be run as part of the development workflow or in pre-commit hooks. Prettier's main benefits include saving time on code reviews, reducing cognitive load for developers, and maintaining a consistent code style across projects. Its \"zero-config\" philosophy and wide language support have made it a popular tool in modern development environments.\n\nVisit the following resources to learn more:",
+    "description": "Prettier is a tool that automatically formats your code to look consistent. It works with many languages like JavaScript, TypeScript, and CSS. Prettier takes your code and rewrites it following its own style rules, like line length. This stops arguments about code style and saves time. It can be used in code editors or run automatically before you commit code. Prettier is popular because it's easy to use and keeps code looking the same for everyone.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Prettier Website",
@@ -1355,7 +1325,7 @@
   },
   "NFjsI712_qP0IOmjuqXar": {
     "title": "ESLint",
-    "description": "ESLint is a popular open-source static code analysis tool for identifying and fixing problems in JavaScript code. It enforces coding standards, detects potential errors, and promotes consistent coding practices across projects. ESLint is highly configurable, allowing developers to define custom rules or use preset configurations. It supports modern JavaScript features, JSX, and TypeScript through plugins. ESLint can be integrated into development workflows through IDE extensions, build processes, or git hooks, providing real-time feedback to developers. Its ability to automatically fix many issues it detects makes it a valuable tool for maintaining code quality and consistency, especially in large teams or projects. ESLint's extensibility and wide adoption in the JavaScript ecosystem have made it a standard tool in modern JavaScript development.\n\nVisit the following resources to learn more:",
+    "description": "ESLint is a tool that checks JavaScript code for problems. It helps keep code style consistent and finds errors. ESLint is very flexible; you can set your own rules or use ready-made ones. It works with modern JavaScript, JSX, and TypeScript. You can use ESLint in your code editor or when you build your project to get live feedback. It can even fix many issues automatically, which is great for team projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "ESLint Website",
@@ -1381,7 +1351,7 @@
   },
   "igg4_hb3XE3vuvY8ufV-4": {
     "title": "Testing",
-    "description": "Testing apps involves systematically evaluating software to ensure it meets requirements, functions correctly, and maintains quality. Key testing types include:\n\n1.  Unit testing: Verifying individual components or functions\n2.  Integration testing: Checking interactions between different parts of the app\n3.  Functional testing: Ensuring the app meets specified requirements\n4.  UI/UX testing: Evaluating the user interface and experience\n5.  Performance testing: Assessing app speed, responsiveness, and stability\n6.  Security testing: Identifying vulnerabilities and ensuring data protection\n7.  Accessibility testing: Verifying usability for people with disabilities\n8.  Compatibility testing: Checking functionality across different devices and platforms\n\nModern testing often incorporates automated testing tools and continuous integration/continuous deployment (CI/CD) pipelines. Test-driven development (TDD) and behavior-driven development (BDD) are popular methodologies that emphasize writing tests before or alongside code. Effective testing strategies help identify bugs early, improve code quality, and ensure a reliable user experience.\n\nVisit the following resources to learn more:",
+    "description": "Testing apps means checking if software works right and meets goals. Types include unit (small parts), integration (how parts work together), functional (if it does what it should), UI/UX (look and feel), performance (speed), security, accessibility (for disabilities), and compatibility (on different devices). Modern testing uses automated tools and CI/CD (automating build and release). TDD and BDD are ways to write tests with code. Good testing finds bugs early and makes apps better.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "The Different Types of Software Tests",
@@ -1402,7 +1372,7 @@
   },
   "hVQ89f6G0LXEgHIOKHDYq": {
     "title": "Vitest",
-    "description": "Vitest is a fast and lightweight testing framework for JavaScript and TypeScript projects, designed as a Vite-native alternative to Jest. It leverages Vite's transformation pipeline and config resolution, offering near-instant test execution and hot module replacement (HMR) for tests. Vitest provides a Jest-compatible API, making migration easier for projects already using Jest. It supports features like snapshot testing, mocking, and code coverage out of the box. Vitest's architecture allows for parallel test execution and watch mode, significantly speeding up the testing process. Its integration with Vite's ecosystem makes it particularly well-suited for projects already using Vite, but it can be used in any JavaScript project. Vitest's focus on speed and developer experience has made it an increasingly popular choice for modern web development workflows.\n\nVisit the following resources to learn more:",
+    "description": "Vitest is a speedy testing tool for JavaScript and TypeScript, made to work well with Vite (a build tool). It runs tests very quickly and updates them live as you code. Vitest is similar to Jest (another testing tool), so it's easy to switch if you're used to Jest. It includes features like snapshot testing, mocking, and checking code coverage. Vitest can run multiple tests at once and watch for changes, making testing faster. It's great for Vite projects but works with any JavaScript project too.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vitest - Next Generation Testing Framework",
@@ -1423,7 +1393,7 @@
   },
   "g5itUjgRXd9vs9ujHezFl": {
     "title": "Jest",
-    "description": "Jest is a popular JavaScript testing framework developed by Facebook. It provides a comprehensive solution for unit testing JavaScript code, with a focus on simplicity and minimal configuration. Jest offers features such as automatic mocking, code coverage reporting, and snapshot testing. It supports testing of both synchronous and asynchronous code, and can be used with various JavaScript frameworks and libraries, including React, Angular, and Vue. Jest's built-in assertion library and test runner make it easy to write and execute tests quickly. Its ability to run tests in parallel and its intelligent test-watching mode contribute to fast test execution, making it a preferred choice for many developers and organizations in the JavaScript ecosystem.\n\nVisit the following resources to learn more:",
+    "description": "Jest is a popular JavaScript testing tool from Facebook. It's made for easy unit testing (testing small code parts). Jest has features like auto mocking, code coverage reports, and snapshot testing. It works with React, Angular, and Vue. Jest has its own tools for writing and running tests fast. It can run tests at the same time and watches for changes, making it a top choice for JavaScript developers.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Jest Website",
@@ -1444,7 +1414,7 @@
   },
   "jramLk8FGuaEH4YpHIyZT": {
     "title": "Playwright",
-    "description": "Playwright is an open-source automation framework developed by Microsoft for end-to-end testing of web applications. It provides a single API to automate Chromium, Firefox, and WebKit browsers across Windows, macOS, and Linux. Playwright supports multiple programming languages including JavaScript, TypeScript, Python, and .NET. It offers features like auto-waiting, network interception, and mobile emulation. The framework excels in handling modern web apps with dynamic content, providing reliable automation through its ability to wait for elements to be ready before acting on them. Playwright's cross-browser and cross-platform capabilities, combined with its powerful tooling for debugging and test generation, make it a robust choice for automated testing of web applications.\n\nVisit the following resources to learn more:",
+    "description": "Playwright by Microsoft is a tool for testing websites automatically. It can control Chromium, Firefox, and WebKit browsers on different systems (Windows, macOS, Linux) with one API. It works with JavaScript, TypeScript, Python, and .NET. Features include auto-waiting for elements, network control, and mobile simulation. Playwright is good for testing modern, dynamic web apps. Its cross-browser support and debugging tools make it strong for automated testing.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Playwright Website",
@@ -1465,7 +1435,7 @@
   },
   "DaynCz5RR26gjT6N6gTDL": {
     "title": "Cypress",
-    "description": "Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.\n\nVisit the following resources to learn more:",
+    "description": "Cypress is a tool for testing websites from start to finish, just like a user would. It's written in JavaScript and based on Mocha (another JavaScript testing tool). Cypress runs tests directly in the browser, which makes testing things that happen over time (asynchronous testing) easier. It also uses common testing approaches like BDD/TDD and can work with other JavaScript testing tools.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Cypress Website",
@@ -1491,7 +1461,7 @@
   },
   "U5mD5FmVx7VWeKxDpQxB5": {
     "title": "Authentication Strategies",
-    "description": "Authentication strategies are methods or techniques used to verify the identity of a user or system in order to grant access to a protected resource. There are several different authentication strategies that can be used, including:\n\n*   Basic Authentication\n*   Session Based Authentication\n*   Token Based Authentication\n*   JWT Authentication\n*   OAuth\n*   SSO\n\nYou don't necessarily need to learn all of these, how to implement and the ins and outs from the get go. But it's important to know what they are and how they work. This will help you make better decisions when choosing an authentication strategy for your application.\n\nVisit the following resources to learn more:",
+    "description": "Authentication strategies verify a user's identity to grant access. Common methods include Basic Auth (username/password), Session-based (server remembers login), Token-based (like JWT, a secure digital key), OAuth (for third-party access like \"Login with Google\"), and SSO (Single Sign-On, one login for many apps). Knowing these helps choose the right security for your app.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Basic Authentication",
@@ -1527,7 +1497,7 @@
   },
   "RDWbG3Iui6IPgp0shvXtg": {
     "title": "Web Security Basics",
-    "description": "Web security knowledge encompasses understanding and implementing practices to protect websites, web applications, and web services from various cyber threats. Key areas include:\n\n1.  HTTPS and TLS for secure data transmission\n2.  Cross-Site Scripting (XSS) prevention\n3.  SQL injection protection\n4.  Cross-Site Request Forgery (CSRF) mitigation\n5.  Content Security Policy (CSP) implementation\n6.  Secure authentication and session management\n7.  Input validation and sanitization\n8.  Protection against clickjacking\n9.  Secure cookie handling\n10.  Regular security updates and patch management\n\nWeb security also involves understanding common vulnerabilities listed in the OWASP Top Ten, implementing proper access controls, and using secure coding practices. It requires ongoing education and vigilance as new threats emerge. Effective web security strategies often include a combination of preventive measures, regular security audits, and incident response planning to ensure the confidentiality, integrity, and availability of web resources and user data.\n\nVisit the following resources to learn more:",
+    "description": "Web security involves protecting websites and applications from cyber threats through practices like HTTPS/TLS for secure data, XSS/SQL injection/CSRF prevention, CSP implementation, secure authentication/session management, input validation, clickjacking protection, secure cookie handling, and regular updates. It also means understanding OWASP Top Ten vulnerabilities, access controls, secure coding, and staying informed on new threats. A good strategy combines prevention, audits, and incident response to protect web resources and data.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "OWASP Website",
@@ -1558,7 +1528,7 @@
   },
   "AfH2zCbqzw0Nisg1yyISS": {
     "title": "CORS",
-    "description": "Cross-Origin Resource Sharing (CORS) is a security mechanism implemented by web browsers to control access to resources (like APIs or fonts) on a web page from a different domain than the one serving the web page. It extends and adds flexibility to the Same-Origin Policy, allowing servers to specify who can access their resources. CORS works through a system of HTTP headers, where browsers send a preflight request to the server hosting the cross-origin resource, and the server responds with headers indicating whether the actual request is allowed. This mechanism helps prevent unauthorized access to sensitive data while enabling legitimate cross-origin requests. CORS is crucial for modern web applications that often integrate services and resources from multiple domains, balancing security needs with the functionality requirements of complex, distributed web systems.\n\nVisit the following resources to learn more:",
+    "description": "Cross-Origin Resource Sharing (CORS) is a browser security feature that controls how web pages access resources from different domains. It allows servers to specify who can access their assets (like APIs or fonts). CORS uses HTTP headers; browsers may send a preflight request to check if the actual request is allowed. This prevents unauthorized access while enabling legitimate cross-origin requests, vital for modern apps using multiple domain services.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Cross-Origin Resource Sharing (CORS)",
@@ -1579,7 +1549,7 @@
   },
   "uum7vOhOUR38vLuGZy8Oa": {
     "title": "HTTPS",
-    "description": "Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider.\n\nVisit the following resources to learn more:",
+    "description": "HTTPS (Hypertext Transfer Protocol Secure) is the secure version of HTTP, the main way data is sent between your browser and websites. HTTPS encrypts this data, making it safer. This is very important for sensitive information like bank logins or emails. It keeps your data private and secure online.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What is HTTPS?",
@@ -1610,7 +1580,7 @@
   },
   "rmcm0CZbtNVC9LZ14-H6h": {
     "title": "Content Security Policy",
-    "description": "Content Security Policy (CSP) is a security standard implemented by web browsers to prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by allowing web developers to specify which sources of content are trusted and can be loaded on a web page. CSP is typically implemented through HTTP headers or meta tags, defining rules for various types of resources like scripts, stylesheets, images, and fonts. By restricting the origins from which content can be loaded, CSP significantly reduces the risk of malicious code execution. It also provides features like reporting violations to help developers identify and fix potential security issues. While powerful, implementing CSP requires careful configuration to balance security with functionality, especially for sites using third-party resources or inline scripts.\n\nVisit the following resources to learn more:",
+    "description": "Content Security Policy (CSP) is a security feature in web browsers that helps stop attacks like cross-site scripting (XSS) and clickjacking. It lets website creators tell the browser which sources of content (like scripts, styles, and images) are safe to load. This is done using special instructions sent with the webpage. By limiting where content can come from, CSP makes it much harder for bad code to run on a site. It can also report problems, helping developers find and fix security holes. Setting up CSP needs care to make sure everything works right, especially if the site uses content from other places.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "MDN Content Security Policy (CSP)",
@@ -1631,7 +1601,7 @@
   },
   "JanR7I_lNnUCXhCMGLdn-": {
     "title": "OWASP Security Risks",
-    "description": "OWASP (Open Web Application Security Project) identifies and ranks the most critical security risks to web applications. The OWASP Top 10 list includes vulnerabilities such as injection flaws, broken authentication, sensitive data exposure, XML external entities (XXE), broken access control, security misconfigurations, cross-site scripting (XSS), insecure deserialization, using components with known vulnerabilities, and insufficient logging and monitoring. These risks represent common attack vectors exploited by malicious actors to compromise web applications and their underlying systems. OWASP provides guidelines and best practices for mitigating these risks, emphasizing the importance of secure coding practices, regular security assessments, and implementing robust security controls throughout the software development lifecycle. Understanding and addressing these risks is crucial for developers and organizations to enhance the security posture of their web applications.\n\nVisit the following resources to learn more:",
+    "description": "OWASP (Open Web Application Security Project) lists the biggest security dangers for web apps. The OWASP Top 10 includes things like injection attacks, bad authentication, data exposure, and using old, unsafe code. These are common ways hackers break into websites. OWASP gives advice on how to fix these problems by coding securely, checking for issues often, and using strong security from start to finish. Knowing these risks helps protect web apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "OWASP Web Application Security Testing Checklist",
@@ -1662,7 +1632,7 @@
   },
   "ruoFa3M4bUE3Dg6GXSiUI": {
     "title": "Web Components",
-    "description": "Web Components are a set of standardized browser technologies that allow developers to create reusable, encapsulated HTML elements for web pages and applications. They consist of three main technologies: Custom Elements for defining new HTML tags, Shadow DOM for encapsulating styles and markup, and HTML Templates for declaring fragments of reusable HTML. Web Components enable the creation of modular, shareable components that work across different frameworks and browsers. They provide strong encapsulation, reducing style conflicts and promoting code reuse. While adoption has been slower compared to popular JavaScript frameworks, Web Components offer a standards-based approach to component development, ensuring long-term compatibility and interoperability in web ecosystems.\n\nVisit the following resources to learn more:",
+    "description": "Web Components are a way to create your own reusable HTML elements that work in any browser and with any JavaScript framework. They use three main ideas: Custom Elements (making new HTML tags), Shadow DOM (keeping styles and structure separate and private), and HTML Templates (bits of HTML you can reuse). This helps make code modular and shareable, and reduces conflicts between styles. Web Components are a standard way to build parts of websites, aiming for long-term use and working well together.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Web Components - MDN",
@@ -1688,7 +1658,7 @@
   },
   "hwPOGT0-duy3KfI8QaEwF": {
     "title": "Type Checkers",
-    "description": "Type checkers are tools that analyze code to detect and prevent type-related errors without executing the program. They enforce type consistency, helping developers catch mistakes early in the development process. Popular type checkers include TypeScript for JavaScript, Flow for JavaScript, and mypy for Python. These tools add static typing to dynamically typed languages, offering benefits like improved code reliability, better documentation, and enhanced developer tooling support. Type checkers can infer types in many cases and allow for gradual adoption in existing projects. They help prevent common runtime errors, facilitate refactoring, and improve code maintainability. While adding some overhead to the development process, type checkers are widely adopted in large-scale applications for their ability to catch errors before runtime and improve overall code quality.\n\nVisit the following resources to learn more:",
+    "description": "Type checkers are tools that look at your code to find and stop errors related to data types (like numbers, strings, etc.) before you run the program. They help make sure your code uses types correctly, catching mistakes early. Examples include TypeScript and Flow for JavaScript, and mypy for Python. These tools add static typing (checking types before running) to languages that usually check types while running. This makes code more reliable, easier to understand, and helps with refactoring. While they add a bit of work, type checkers are great for big projects to improve code quality.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Flow - Static Type Checker for JavaScript",
@@ -1709,7 +1679,7 @@
   },
   "VxiQPgcYDFAT6WgSRWpIA": {
     "title": "Custom Elements",
-    "description": "One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.\n\nVisit the following resources to learn more:",
+    "description": "Custom Elements are a part of Web Components that let you create your own HTML tags. This means you can make reusable parts for your webpage that have their own special behavior, instead of using lots of nested standard HTML tags. It helps keep your HTML cleaner and your components easier to manage.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Using Custom Elements - MDN",
@@ -1730,18 +1700,13 @@
   },
   "Hk8AVonOd693_y1sykPqd": {
     "title": "HTML Templates",
-    "description": "The `<template>` HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document.\n\nVisit the following resources to learn more:",
+    "description": "The `<template>` HTML tag holds HTML content that isn't shown right away when a page loads. Instead, JavaScript can use it later to create new elements on the page. It's like a blueprint for HTML parts you want to reuse.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Using Templates and Slots - MDN",
         "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots",
         "type": "article"
       },
-      {
-        "title": "HTML Template Tag",
-        "url": "https://www.w3schools.com/tags/tag_template.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@@ -1751,7 +1716,7 @@
   },
   "-SpsNeOZBkQfDA-rwzgPg": {
     "title": "Shadow DOM",
-    "description": "The Shadow DOM is a web standard that provides encapsulation for JavaScript, CSS, and templating in web components. It allows developers to create isolated DOM trees within elements, separate from the main document DOM. This encapsulation prevents styles and scripts from leaking in or out, ensuring that component internals remain separate from the rest of the page. Shadow DOM enables more modular and maintainable code by reducing naming conflicts and CSS specificity issues. It's particularly useful for creating reusable custom elements with self-contained styling and behavior. While primarily used in web components, Shadow DOM can also be leveraged in various scenarios to improve code organization and reduce unintended side effects in complex web applications.\n\nVisit the following resources to learn more:",
+    "description": "The Shadow DOM is a way to keep the HTML, CSS, and JavaScript of a web component separate from the rest of the webpage. Think of it as creating a private little DOM (Document Object Model) inside an element. This stops styles and scripts from accidentally affecting other parts of the page, and vice-versa. It helps make code cleaner and easier to manage, especially for custom elements that you want to reuse. It's mainly for web components but can be used anytime you want to keep code self-contained.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Using shadow DOM | MDN web docs",
@@ -1772,7 +1737,7 @@
   },
   "0asdhvwBH3gn-ercktV7A": {
     "title": "TypeScript",
-    "description": "TypeScript is a strongly-typed, object-oriented programming language that builds upon JavaScript by adding optional static typing and other features. Developed and maintained by Microsoft, it compiles to plain JavaScript, allowing it to run in any environment that supports JavaScript. TypeScript offers enhanced IDE support with better code completion, refactoring, and error detection during development. It introduces concepts like interfaces, generics, and decorators, enabling more robust software architecture. TypeScript is particularly valuable for large-scale applications, as it improves code maintainability and readability. Its type system helps catch errors early in the development process, reducing runtime errors. With its growing ecosystem and adoption in popular frameworks like Angular, TypeScript has become a standard tool in modern web development.\n\nVisit the following resources to learn more:",
+    "description": "TypeScript, by Microsoft, is a strongly-typed language that extends JavaScript with optional static typing. It compiles to plain JavaScript, running anywhere JavaScript does. TypeScript enhances IDE support with better code completion, refactoring, and error detection. It introduces interfaces, generics, and decorators for robust software architecture, proving valuable for large apps by improving maintainability and readability. Its type system catches errors early, reducing runtime issues. TypeScript is a standard in modern web development.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated TypeScript Roadmap",
@@ -1808,7 +1773,7 @@
   },
   "Cxspmb14_0i1tfw-ZLxEu": {
     "title": "SSR",
-    "description": "Server-side rendering (SSR) is a technique used in web development where web pages are generated on the server and sent to the client as fully rendered HTML. This approach contrasts with client-side rendering, where the browser builds the page using JavaScript. SSR improves initial page load time and search engine optimization (SEO) by providing complete content to crawlers. It's particularly beneficial for content-heavy sites and applications requiring fast first-page loads. SSR can be implemented with various frameworks like Next.js for React or Nuxt.js for Vue.js. While it can increase server load and complexity, SSR offers advantages in performance perception, especially on slower devices or networks, and can be combined with client-side hydration for dynamic interactivity after initial load.\n\nVisit the following resources to learn more:",
+    "description": "Server-side rendering (SSR) means websites are built on the server before being sent to your browser as complete HTML. This is different from client-side rendering, where the browser builds the page. SSR helps pages load faster at first and is better for search engines. It's good for sites with lots of content. Frameworks like Next.js (for React) and Nuxt.js (for Vue) use SSR. It can make servers busier but improves performance, especially on slow devices.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Server-Side Rendering (SSR)",
@@ -1834,7 +1799,7 @@
   },
   "OL8I6nOZ8hGGWmtxg_Mv8": {
     "title": "Svelte",
-    "description": "Svelte is a modern JavaScript framework for building user interfaces that takes a unique approach to web development. Unlike traditional frameworks that do most of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. It compiles your code to efficient vanilla JavaScript, resulting in smaller bundle sizes and better runtime performance. Svelte uses a component-based architecture and features a simple, intuitive syntax that allows developers to write less code. It includes built-in state management, CSS scoping, and animations. Svelte's approach eliminates the need for a virtual DOM, leading to faster initial loads and updates. Its simplicity and performance benefits have been gaining it increasing popularity in the front-end development community.\n\nVisit the following resources to learn more:",
+    "description": "Svelte is a JavaScript tool for building UIs. Unlike others, Svelte does its main work during build time, not in the browser. It turns your code into small, fast, plain JavaScript. Svelte uses components and has a simple syntax, so you write less code. It includes features for managing data, styling, and animations. Because Svelte doesn't use a virtual DOM, pages load and update quickly. It's liked for its simplicity and speed.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Svelte Course Playlist for beginners",
@@ -1865,7 +1830,7 @@
   },
   "3TE_iYvbklXK0be-5f2M7": {
     "title": "Vue.js",
-    "description": "Vue.js is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable, allowing developers to integrate it into projects gradually. Vue uses a template-based approach with a virtual DOM for efficient rendering. It features a reactive and composable component system, making it easy to organize and reuse code. Vue's core library focuses on the view layer, but it can be easily extended with official and community-built tools for state management, routing, and build tooling. Known for its gentle learning curve and flexibility, Vue has gained popularity for both small projects and large-scale applications. Its performance, lightweight nature, and comprehensive documentation have contributed to its widespread adoption in the web development community.\n\nVisit the following resources to learn more:",
+    "description": "Vue.js is a JavaScript framework for building website interfaces. It's easy to start with and can be added to projects bit by bit. Vue uses templates and a virtual DOM (a lightweight copy of the real page) to show things on screen efficiently. It has a system of reusable components, making code organized. While Vue mainly handles what users see, it works well with other tools for things like managing data or page navigation. It's known for being easy to learn, flexible, and fast, making it popular for all kinds of projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vue.js Website",
@@ -1891,7 +1856,7 @@
   },
   "k6rp6Ua9qUEW_DA_fOg5u": {
     "title": "Angular",
-    "description": "Angular is a popular open-source web application framework developed and maintained by Google. It uses TypeScript, a statically typed superset of JavaScript, to build scalable and efficient single-page applications (SPAs). Angular follows a component-based architecture, where the user interface is composed of reusable, self-contained components. The framework provides features like two-way data binding, dependency injection, and a powerful template syntax, which simplify the development of complex web applications. Angular also includes a comprehensive set of tools for testing, routing, and state management, making it a full-fledged solution for front-end development. Its modular structure and emphasis on best practices make it particularly suitable for large-scale enterprise applications.\n\nVisit the following resources to learn more:",
+    "description": "Angular is a popular tool from Google for building websites and web apps. It uses TypeScript (a type of JavaScript) to create large, efficient single-page applications (SPAs), where content loads in one go without needing to reload the whole page. Angular builds UIs with reusable components, like building blocks. It has features like two-way data binding (data updates automatically in different places), dependency injection (helps manage code parts), and a strong template system. Angular also offers tools for testing, page navigation, and managing app data, making it great for big, complex projects.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated Angular Roadmap",
@@ -1917,7 +1882,7 @@
   },
   "SGDf_rbfmFSHlxI-Czzlz": {
     "title": "React",
-    "description": "React is an open-source JavaScript library for building user interfaces, primarily for single-page applications. Developed and maintained by Facebook, it allows developers to create reusable UI components that efficiently update and render as data changes. React uses a virtual DOM for performance optimization and supports a unidirectional data flow. Its component-based architecture promotes modularity and reusability. React's ecosystem includes tools like Redux for state management and React Native for mobile app development. The library's declarative nature, efficient rendering, and strong community support have made it one of the most popular choices for front-end development in modern web applications.\n\nVisit the following resources to learn more:",
+    "description": "React is a JavaScript tool from Facebook for building UIs, especially for single-page apps. It lets you create reusable UI parts that update when data changes. React uses a virtual DOM for speed and has a one-way data flow. This component style makes code neat and reusable. React also works with tools like Redux for data management and React Native for mobile apps. It's popular because it's clear, fast, and has a big community.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Full Stack React Developer Course",
@@ -1943,7 +1908,7 @@
   },
   "KJRkrFZIihCUBrOf579EU": {
     "title": "react-router",
-    "description": "React Router is a popular routing library for React applications that enables dynamic, client-side routing. It allows developers to create single-page applications with multiple views, managing the URL and history of the browser while keeping the UI in sync with the URL. React Router provides a declarative way to define routes, supporting nested routes, route parameters, and programmatic navigation. It offers components like BrowserRouter, Route, and Link to handle routing logic and navigation. The library also supports features such as lazy loading of components, route guards, and custom history management. React Router's integration with React's component model makes it a go-to solution for managing navigation and creating complex, multi-view applications in React ecosystems.\n\nVisit the following resources to learn more:",
+    "description": "React Router is a key tool for React apps that need different pages or views. It handles the website's URL, letting you create single-page apps that feel like they have multiple pages. It provides components to define routes (paths to different views) and link between them. Features include lazy loading (loading parts only when needed) and route guards (controlling access to pages). It's the standard for navigation in React apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "React Router Website",
@@ -1964,7 +1929,7 @@
   },
   "zNFYAJaSq0YZXL5Rpx1NX": {
     "title": "Next.js",
-    "description": "Next.js is a React-based open-source framework for building server-side rendered and statically generated web applications. It provides features like automatic code splitting, optimized performance, and simplified routing out of the box. Next.js supports both static site generation (SSG) and server-side rendering (SSR), allowing developers to choose the most appropriate rendering method for each page. The framework offers built-in CSS support, API routes for backend functionality, and easy deployment options. Next.js is known for its developer-friendly experience, with features like hot module replacement and automatic prefetching. Its ability to create hybrid apps that combine static and server-rendered pages makes it popular for building scalable, SEO-friendly web applications.\n\nVisit the following resources to learn more:",
+    "description": "Next.js is a React framework for building websites that can be server-rendered (built on the server) or static (built beforehand). It offers features like auto code splitting, fast performance, and easy page routing. You can choose how each page is made. Next.js has CSS support, API routes (for backend tasks), and simple deployment. It's known for being developer-friendly, with live updates and smart preloading. It's great for big, SEO-friendly sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Official Website",
@@ -1985,7 +1950,7 @@
   },
   "BBsXxkbbEG-gnbM1xXKrj": {
     "title": "Nuxt.js",
-    "description": "Nuxt.js is a higher-level framework built on top of Vue.js, designed to create universal or single-page Vue applications. It simplifies the development process by providing a structured directory layout, automatic routing, and server-side rendering capabilities out of the box. Nuxt.js offers features like static site generation, code splitting, and asynchronous data fetching. It supports both client-side and server-side rendering, allowing developers to choose the most appropriate approach for each page. Nuxt.js emphasizes developer experience and performance optimization, making it popular for building scalable, SEO-friendly Vue applications. Its modular architecture and extensive plugin ecosystem enable easy integration of additional functionalities.\n\nVisit the following resources to learn more:",
+    "description": "Nuxt.js is a framework based on Vue.js for building web apps. It makes development easier with a ready-made structure, auto page routing, and server-side rendering. Nuxt.js can also create static sites, split code, and fetch data. You can choose how each page is rendered. It focuses on good developer experience and performance, making it popular for large, SEO-friendly Vue apps. It's also easy to add more features with its plugins.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Nuxt.js Fundamentals",
@@ -2011,7 +1976,7 @@
   },
   "P4st_telfCwKLSAU2WsQP": {
     "title": "Svelte Kit",
-    "description": "SvelteKit is a framework for building web applications using Svelte, a component-based JavaScript framework. It provides a full-stack development experience, handling both server-side and client-side rendering. SvelteKit offers features like file-based routing, code-splitting, and server-side rendering out of the box. It supports both static site generation and server-side rendering, allowing developers to choose the most appropriate approach for each page. SvelteKit emphasizes simplicity and performance, leveraging Svelte's compile-time approach to generate highly optimized JavaScript. It includes built-in development tools, easy deployment options, and integrates well with various backend services. SvelteKit's efficient development experience and flexibility make it an attractive option for building modern, performant web applications.\n\nVisit the following resources to learn more:",
+    "description": "SvelteKit is a framework for building websites and apps with Svelte (a JavaScript framework). It helps you build both the parts that run on a server and the parts that run in the user's browser. SvelteKit comes with useful things like easy page routing (how you go from one page to another), making sure only needed code is loaded, and server-side rendering (building pages on the server for faster loading). You can make static sites (pages that don't change much) or dynamic ones. It's designed to be simple and fast, thanks to Svelte's smart way of compiling code. SvelteKit also has good tools for developers and makes deploying your site easy.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Svelte Kit",
@@ -2037,7 +2002,7 @@
   },
   "L7AllJfKvClaam3y-u6DP": {
     "title": "GraphQL",
-    "description": "GraphQL is a query language and runtime for APIs, developed by Facebook. GraphQL's flexibility and efficiency make it popular for building complex applications, especially those with diverse client requirements. It's particularly useful for mobile applications where bandwidth efficiency is crucial. While it requires a paradigm shift from REST, many developers and organizations find GraphQL's benefits outweigh the learning curve, especially for large-scale or rapidly evolving APIs.\n\nVisit the following resources to learn more:",
+    "description": "GraphQL, by Facebook, is a way to get data for apps. Unlike older methods, it lets apps ask for exactly the data they need, no more, no less. This is great for mobile apps where saving data is important. It's different from REST but good for big or changing APIs.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "visit Dedicated GraphQL Roadmap",
@@ -2073,7 +2038,7 @@
   },
   "5eUbDdOTOfaOhUlZAmmXW": {
     "title": "Apollo",
-    "description": "Apollo GraphQL is a comprehensive platform for building and managing GraphQL-based data layers in modern applications. It provides a set of open-source tools and libraries that simplify the implementation of GraphQL on both the client and server sides. On the client side, Apollo Client offers powerful caching, state management, and data fetching capabilities, integrating seamlessly with various front-end frameworks. On the server side, Apollo Server facilitates the creation of GraphQL APIs, handling queries, mutations, and subscriptions efficiently. The Apollo platform also includes developer tools for schema management, performance monitoring, and API governance. By abstracting away much of the complexity of GraphQL implementation, Apollo enables developers to build faster, more scalable, and more maintainable applications with a unified data graph.\n\nVisit the following resources to learn more:",
+    "description": "Apollo GraphQL is a platform for using GraphQL in apps. It has tools for both client (front-end) and server (back-end). Apollo Client helps with caching, data, and state in the front-end. Apollo Server helps build GraphQL APIs. Apollo also offers tools for managing your data graph, checking performance, and more. It simplifies GraphQL, helping build faster and more scalable apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Apollo Website",
@@ -2099,7 +2064,7 @@
   },
   "0moPO23ol33WsjVXSpTGf": {
     "title": "Relay Modern",
-    "description": "Relay is a JavaScript framework developed by Facebook for building data-driven React applications. It's specifically designed to work with GraphQL, providing a declarative approach to fetching and managing data in complex web applications. Relay optimizes data fetching by colocating data requirements with components, enabling efficient updates and minimizing over-fetching. It handles caching, real-time updates, and optimistic UI updates out of the box. Relay's architecture promotes scalability and performance in large applications by managing data dependencies and reducing network requests. While it has a steeper learning curve compared to simpler data-fetching solutions, Relay offers significant benefits for applications with complex data requirements, especially when used in conjunction with React and GraphQL.\n\nVisit the following resources to learn more:",
+    "description": "Relay is a Facebook JavaScript library for React apps that use a lot of data. It works with GraphQL to get and manage data efficiently. Relay puts data needs next to components, so it only fetches what's needed and updates well. It handles caching, live updates, and quick UI changes. Relay helps big apps perform better by managing data smartly. It's a bit harder to learn but great for complex data needs with React and GraphQL.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "facebook/relay",
@@ -2120,7 +2085,7 @@
   },
   "n0q32YhWEIAUwbGXexoqV": {
     "title": "Static Site Generators",
-    "description": "Static site generators (SSGs) are tools that create HTML websites from raw data and templates, producing pre-rendered pages at build time rather than at runtime. They combine the benefits of static websites (speed, security, simplicity) with the flexibility of dynamic sites. SSGs typically use markup languages like Markdown for content, templating engines for layouts, and generate a fully static website that can be hosted on simple web servers or content delivery networks. Popular SSGs include Jekyll, Hugo, Gatsby, and Eleventy. They're well-suited for blogs, documentation sites, and content-focused websites. SSGs offer advantages in performance, version control integration, and reduced server-side complexity, making them increasingly popular for a wide range of web projects.\n\nVisit the following resources to learn more:",
+    "description": "Static Site Generators (SSGs) are tools that build websites as simple HTML files. They take your content (like Markdown files) and templates, and create all the pages beforehand. This makes websites fast, secure, and easy to host. Examples are Jekyll, Hugo, and Eleventy. They are great for blogs and documentation. SSGs offer good performance and are simple to manage.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "What is a Static Site Generator?",
@@ -2146,7 +2111,7 @@
   },
   "CMrss8E2W0eA6DVEqtPjT": {
     "title": "Vuepress",
-    "description": "VuePress is a static site generator powered by Vue.js, primarily designed for creating documentation websites. It generates pre-rendered static HTML for each page, resulting in fast loading times and SEO-friendly content. VuePress features a Vue-powered theming system, automatic code syntax highlighting, and a default theme optimized for technical documentation. It supports markdown content with Vue components, allowing for dynamic and interactive documentation. VuePress offers built-in search functionality, responsive layouts, and easy customization through plugins and themes. While primarily used for documentation, it's versatile enough for blogs and simple websites. VuePress's combination of simplicity, performance, and Vue.js integration makes it popular for creating modern, fast-loading documentation sites and technical blogs.\n\nVisit the following resources to learn more:",
+    "description": "VuePress is a Vue.js-powered static site generator ideal for documentation. It creates pre-rendered static HTML for fast, SEO-friendly sites, featuring a Vue-based theming system, code syntax highlighting, and a default theme for technical docs. It supports Markdown with Vue components for dynamic content, built-in search, responsive layouts, and customization via plugins/themes. While great for docs, it also suits blogs and simple websites, valued for its simplicity, performance, and Vue.js integration.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vuepress",
@@ -2167,7 +2132,7 @@
   },
   "XWJxV42Dpu2D3xDK10Pn3": {
     "title": "Nuxt.js",
-    "description": "Nuxt.js is a higher-level framework built on top of Vue.js, designed to create universal or single-page Vue applications. It simplifies the development process by providing a structured directory layout, automatic routing, and server-side rendering capabilities out of the box. Nuxt.js offers features like static site generation, code splitting, and asynchronous data fetching. It supports both client-side and server-side rendering, allowing developers to choose the most appropriate approach for each page. Nuxt.js emphasizes developer experience and performance optimization, making it popular for building scalable, SEO-friendly Vue applications. Its modular architecture and extensive plugin ecosystem enable easy integration of additional functionalities.\n\nVisit the following resources to learn more:",
+    "description": "Nuxt.js is a framework based on Vue.js for building web apps. It makes development easier with a ready-made structure, auto page routing, and server-side rendering. Nuxt.js can also create static sites, split code, and fetch data. You can choose how each page is rendered. It focuses on good developer experience and performance, making it popular for large, SEO-friendly Vue apps. It's also easy to add more features with its plugins.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Nuxt.js Fundamentals",
@@ -2193,7 +2158,7 @@
   },
   "iUxXq7beg55y76dkwhM13": {
     "title": "Astro",
-    "description": "Astro is a modern static site generator (SSG) and web framework designed for building fast, content-focused websites. It allows developers to use multiple frontend frameworks (like React, Vue, or Svelte) within the same project, automatically rendering components to static HTML at build time. Astro's unique \"partial hydration\" approach only sends JavaScript to the browser when necessary, resulting in significantly smaller bundle sizes and faster load times. The framework supports file-based routing, markdown content, and built-in optimizations for images and assets. Astro's component islands architecture enables developers to create interactive components while maintaining the performance benefits of static HTML, making it particularly well-suited for content-rich sites like blogs, documentation, and marketing pages.\n\nVisit the following resources to learn more:",
+    "description": "Astro is a static site generator for fast, content-focused websites. It lets you use various frontend frameworks (like React, Vue, Svelte) and renders components to static HTML. Astro's \"partial hydration\" only sends JavaScript when needed, leading to smaller bundles and quicker loads. It supports file-based routing and markdown, making it great for blogs, docs, and marketing sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Astro Web Framework Crash Course",
@@ -2219,7 +2184,7 @@
   },
   "io0RHJWIcVxDhcYkV9d38": {
     "title": "Eleventy",
-    "description": "Eleventy (11ty) is a simple to use, easy to customize, highly performant and powerful static site generator with a helpful set of plugins (e.g. navigation, build-time image transformations, cache assets). Pages can be built and written with a variety of template languages (HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug or JS template literals). But it also offers the possibility to dynamically create pages from local data or external sources that are compiled at build time. It has zero client-side JavaScript dependencies.\n\nVisit the following resources to learn more:",
+    "description": "Eleventy (or 11ty) is a tool for building fast websites that don't change often (static sites). It's easy to use and change to fit your needs. You can write pages using many different template languages like HTML, Markdown, or JavaScript. Eleventy can also create pages from data you have or from other websites when you build your site. A big plus is that it doesn't add any extra JavaScript to the user's browser, making sites load quickly. It also has helpful plugins for things like navigation or changing images.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Eleventy",
@@ -2240,7 +2205,7 @@
   },
   "V70884VcuXkfrfHyLGtUg": {
     "title": "Next.js",
-    "description": "Next.js is a React-based open-source framework for building server-side rendered and statically generated web applications. It provides features like automatic code splitting, optimized performance, and simplified routing out of the box. Next.js supports both static site generation (SSG) and server-side rendering (SSR), allowing developers to choose the most appropriate rendering method for each page. The framework offers built-in CSS support, API routes for backend functionality, and easy deployment options. Next.js is known for its developer-friendly experience, with features like hot module replacement and automatic prefetching. Its ability to create hybrid apps that combine static and server-rendered pages makes it popular for building scalable, SEO-friendly web applications.\n\nVisit the following resources to learn more:",
+    "description": "Next.js is a React framework for building websites that can be server-rendered (built on the server) or static (built beforehand). It offers features like auto code splitting, fast performance, and easy page routing. You can choose how each page is made. Next.js has CSS support, API routes (for backend tasks), and simple deployment. It's known for being developer-friendly, with live updates and smart preloading. It's great for big, SEO-friendly sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Next.js Website",
@@ -2261,7 +2226,7 @@
   },
   "PoM77O2OtxPELxfrW1wtl": {
     "title": "PWAs",
-    "description": "Progressive Web Apps (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They combine the best features of web and native apps, offering reliability, speed, and engagement. PWAs are built using web technologies (HTML, CSS, JavaScript) but provide features typically associated with native apps, such as offline functionality, push notifications, and home screen installation. They are responsive, work across different devices and browsers, and are discoverable through search engines. PWAs use service workers for background processing and caching, enabling faster load times and offline access. This approach allows developers to create cross-platform applications that are both cost-effective to develop and easy to maintain, while providing users with a seamless, app-like experience directly through their web browser.\n\nVisit the following resources to learn more:",
+    "description": "Progressive Web Apps (PWAs) are websites that act like native apps. They use web tech (HTML, CSS, JavaScript) but offer features like offline use, push alerts, and home screen icons. PWAs work on many devices and browsers, load fast, and can be found on search engines. They use service workers for background tasks and caching. PWAs are a cost-effective way to build cross-platform apps with a smooth user experience.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Learn PWA",
@@ -2287,7 +2252,7 @@
   },
   "VOGKiG2EZVfCBAaa7Df0W": {
     "title": "Mobile Apps",
-    "description": "Mobile applications are software programs designed to run on mobile devices such as smartphones and tablets. They are typically distributed through app stores like Google Play or Apple's App Store. Mobile apps can be native (built specifically for one platform using languages like Swift for iOS or Kotlin for Android), hybrid (web technologies wrapped in a native container), or cross-platform (using frameworks like React Native or Flutter). These apps leverage device-specific features such as GPS, cameras, and sensors to provide rich, interactive experiences. They cover a wide range of functions from productivity and entertainment to social networking and e-commerce. Mobile app development considers factors like user interface design, performance optimization, offline functionality, and security to ensure a smooth user experience across various devices and operating systems.",
+    "description": "Mobile apps are programs for phones and tablets, usually from app stores. They can be native (for one OS like iOS or Android), hybrid (web tech in a native shell), or cross-platform (like React Native). Apps use phone features like GPS and cameras. They do many things from games to shopping. Good mobile apps focus on easy use, speed, offline working, and security.",
     "links": [
       {
         "title": "React Native",
@@ -2318,7 +2283,7 @@
   },
   "dsTegXTyupjS8iU6I7Xiv": {
     "title": "React Native",
-    "description": "React Native is an open-source mobile application development framework created by Facebook. It allows developers to build native mobile apps for iOS and Android using JavaScript and React. React Native translates JavaScript code into native components, providing near-native performance and a genuine native user interface. It enables code reuse across platforms, speeding up development and reducing costs. The framework offers hot reloading for quick iterations, access to native APIs, and a large ecosystem of third-party plugins. React Native's \"learn once, write anywhere\" philosophy and its ability to bridge web and mobile development make it popular for creating cross-platform mobile applications, especially among teams already familiar with React for web development.\n\nVisit the following resources to learn more:",
+    "description": "React Native, by Facebook, lets you build real mobile apps for iOS and Android using JavaScript and React. It turns your code into native app parts, so apps look and feel native and run fast. You can share code between iOS and Android, saving time and money. It has features like hot reloading (see changes instantly) and access to phone features. It's great for web developers who know React and want to make mobile apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Visit Dedicated React Roadmap",
@@ -2339,7 +2304,7 @@
   },
   "dIQXjFEUAJAGxxfAYceHU": {
     "title": "Flutter",
-    "description": "Flutter is an open-source UI software development kit created by Google for building natively compiled, multi-platform applications from a single codebase. It uses the Dart programming language and provides a rich set of pre-designed widgets for creating responsive and visually appealing user interfaces. Flutter's architecture allows for fast development with hot reload, enabling developers to see changes instantly. It supports iOS, Android, web, and desktop platforms, offering true cross-platform development. Flutter uses a custom rendering engine, Skia, to draw UI components, ensuring consistent appearance across devices. While known for mobile app development, Flutter's expanding ecosystem and performance improvements have increased its adoption for web and desktop applications as well.\n\nVisit the following resources to learn more:",
+    "description": "Flutter, by Google, is a tool for building apps for many platforms (iOS, Android, web, desktop) from one set of code. It uses the Dart language and has many ready-made UI parts (widgets) for making good-looking apps. Flutter is fast to develop with because of its hot reload (see changes instantly). It draws its own UI, so apps look the same everywhere. It's very popular for mobile apps and growing for web and desktop too.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Flutter course for beginners",
@@ -2375,7 +2340,7 @@
   },
   "xmRv6-L45m5MDpHmdHFCL": {
     "title": "Ionic",
-    "description": "Ionic is an open-source UI toolkit for building high-quality, cross-platform mobile and desktop applications using web technologies (HTML, CSS, and JavaScript). It leverages popular web frameworks like Angular, React, or Vue.js for application logic, while providing a rich set of pre-built UI components and native device functionalities. Ionic uses Cordova or Capacitor to wrap web apps for native deployment, allowing developers to create hybrid apps that can access device features through plugins. The framework emphasizes performance and native look-and-feel, offering adaptive styling for different platforms. With its focus on web standards and cross-platform compatibility, Ionic enables developers to maintain a single codebase for multiple platforms, making it a popular choice for rapid mobile app development.\n\nVisit the following resources to learn more:",
+    "description": "Ionic is a tool for building mobile and desktop apps using web tech (HTML, CSS, JavaScript) and frameworks like Angular, React, or Vue. It gives you ready-made UI parts and access to phone features. Ionic wraps your web app so it can be a native app. It tries to make apps look and feel native on different platforms. Ionic is good for quickly making apps for many platforms with one codebase.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "ionic-team/ionic-framework",
@@ -2401,7 +2366,7 @@
   },
   "KMA7NkxFbPoUDtFnGBFnj": {
     "title": "Desktop Apps",
-    "description": "Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses.\n\nVisit the following resources to learn more:",
+    "description": "JavaScript can build desktop apps using tools like Electron, NW.js, or Tauri. These mix JavaScript with a native look and feel, letting web developers make desktop apps for different systems (like Windows, Mac, Linux). Electron is very popular (used by VS Code, Discord). These tools let JavaScript access computer features like files. While they make development fast and work on many systems, they can sometimes be slower or use more resources than fully native apps. But, they benefit from all the JavaScript tools available.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Electron Website",
@@ -2422,7 +2387,7 @@
   },
   "mQHpSyMR4Rra4mqAslgiS": {
     "title": "Electron",
-    "description": "Electron is an open-source framework developed by GitHub that enables developers to build cross-platform desktop applications using web technologies. It combines the Chromium rendering engine with the Node.js runtime, allowing applications to be written in HTML, CSS, and JavaScript. Electron provides APIs to access native operating system functions, bridging the gap between web and desktop development. It's widely used for creating popular applications like Visual Studio Code, Atom, and Discord. Electron apps benefit from rapid development cycles, cross-platform compatibility, and access to a vast ecosystem of web technologies and Node.js modules. However, they can face challenges with resource usage and performance compared to native applications. Despite these trade-offs, Electron remains a popular choice for developers seeking to leverage web skills for desktop app development.\n\nVisit the following resources to learn more:",
+    "description": "Electron is a framework for building cross-platform desktop apps with web tech (HTML, CSS, JavaScript). It uses Chromium and Node.js, allowing access to native OS functions. Popular apps like VS Code use Electron. It enables fast development and cross-platform use, but can be resource-intensive. Still, it's a go-to for web developers creating desktop apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Electron Website",
@@ -2448,7 +2413,7 @@
   },
   "GJctl0tVXe4B70s35RkLT": {
     "title": "Tauri",
-    "description": "Tauri is an open-source framework for building lightweight, secure desktop applications using web technologies. It allows developers to create cross-platform apps with HTML, CSS, and JavaScript, while using a Rust backend for core functionality. Tauri offers smaller bundle sizes compared to Electron, as it leverages the operating system's native webview instead of bundling Chromium. It provides robust security features, including a custom protocol for IPC (Inter-Process Communication) and fine-grained permissions. Tauri supports multiple JavaScript frameworks and offers API bindings for various system-level operations. Its emphasis on performance, security, and small binary sizes makes it an attractive option for developers seeking to create efficient desktop applications with web technologies.\n\nVisit the following resources to learn more:",
+    "description": "Tauri is a tool for building small, secure desktop apps using web technologies like HTML, CSS, and JavaScript. It uses a Rust backend for the main logic. Unlike Electron, Tauri uses the computer's built-in web viewer, making apps smaller. It has strong security features and works with many JavaScript frameworks. Tauri is good for making fast, secure desktop apps with web skills, focusing on small app size and good performance.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Tauri Website",
@@ -2469,7 +2434,7 @@
   },
   "2MRvAK9G9RGM_auWytcKh": {
     "title": "Flutter",
-    "description": "Flutter is an open-source UI software development kit created by Google for building natively compiled, multi-platform applications from a single codebase. It uses the Dart programming language and provides a rich set of pre-designed widgets for creating responsive and visually appealing user interfaces. Flutter's architecture allows for fast development with hot reload, enabling developers to see changes instantly. It supports iOS, Android, web, and desktop platforms, offering true cross-platform development. Flutter uses a custom rendering engine, Skia, to draw UI components, ensuring consistent appearance across devices. While known for mobile app development, Flutter's expanding ecosystem and performance improvements have increased its adoption for web and desktop applications as well.\n\nVisit the following resources to learn more:",
+    "description": "Flutter, by Google, is a tool for building apps for many platforms (iOS, Android, web, desktop) from one set of code. It uses the Dart language and has many ready-made UI parts (widgets) for making good-looking apps. Flutter is fast to develop with because of its hot reload (see changes instantly). It draws its own UI, so apps look the same everywhere. It's very popular for mobile apps and growing for web and desktop too.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Flutter course for beginners",
@@ -2505,7 +2470,7 @@
   },
   "-DsETM9xLgHyGZthptj1Y": {
     "title": "PRPL Pattern",
-    "description": "The PRPL pattern is a web application architecture strategy designed to improve performance, especially on mobile devices. PRPL stands for Push, Render, Pre-cache, and Lazy-load. It focuses on optimizing the initial load time and subsequent navigation speed. The pattern involves pushing critical resources for the initial route, rendering the initial route as quickly as possible, pre-caching remaining routes, and lazy-loading other routes and non-critical assets. This approach aims to deliver a near-instant loading experience for users, particularly on slower networks and less powerful devices. PRPL is often implemented using modern web technologies like service workers and is commonly associated with Progressive Web Apps (PWAs), though it can be applied to various web application architectures.\n\nVisit the following resources to learn more:",
+    "description": "The PRPL pattern helps websites load fast, especially on mobile. PRPL means: Push critical resources, Render the first page quickly, Pre-cache other pages, and Lazy-load non-essential stuff. This makes the site feel instant, even on slow connections. It often uses service workers and is common in Progressive Web Apps (PWAs).\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "PRPL Pattern - Google Developers",
@@ -2521,7 +2486,7 @@
   },
   "xD5WfEP7Ez0oi3890UgmH": {
     "title": "RAIL Model",
-    "description": "The RAIL Model is a user-centric performance model developed by Google that focuses on improving web application responsiveness and user experience. RAIL stands for Response, Animation, Idle, and Load. It provides specific performance goals: Responses to user input should occur within 100ms; Animations should run at 60 frames per second (16ms per frame); Idle time should be used to complete deferred work; and Load time for interactive content should be under 5 seconds. The model emphasizes the importance of perceived performance, encouraging developers to prioritize user interactions and break up long tasks. By adhering to RAIL guidelines, developers can create web applications that feel fast and responsive, enhancing user satisfaction and engagement.\n\nVisit the following resources to learn more:",
+    "description": "The RAIL Model from Google helps make websites feel fast. RAIL stands for Response (quick reaction to clicks), Animation (smooth visuals), Idle (using downtime well), and Load (fast page start). It sets goals like responding in 100ms and animations at 60fps. Following RAIL makes users happier because the site feels responsive.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "RAIL Model - Google Developers",
@@ -2537,7 +2502,7 @@
   },
   "X0Y3-IpPiFUCsNDK4RFxw": {
     "title": "Performance Metrics",
-    "description": "Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include:\n\n*   Load time: The time it takes for a web page to fully load and become interactive.\n*   First contentful paint (FCP): The time it takes for the first content to appear on the page.\n*   Time to interactive (TTI): The time it takes for the page to become fully interactive.\n*   First input delay (FID): The time it takes for the page to respond to the first user input.\n*   Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread.\n\nVisit the following resources to learn more:",
+    "description": "Web performance metrics measure how fast and efficient a webpage is. They help find ways to improve. Key metrics include: Load time (how long to fully load), First Contentful Paint (FCP - when first content shows), Time to Interactive (TTI - when page is usable), First Input Delay (FID - time to respond to first click/tap), and Total Blocking Time (TBT - time main thread is blocked).\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Web Performance Metrics - Google Developers",
@@ -2563,7 +2528,7 @@
   },
   "RIhHMHLsLLPhNl05Q9aBf": {
     "title": "Using Lighthouse",
-    "description": "Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement. Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links. Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools.\n\nVisit the following resources to learn more:",
+    "description": "Lighthouse, a Google open-source tool, audits web page performance, accessibility, and SEO. Available as a browser extension and CLI tool, it simulates page load/interaction to measure metrics like load time and TTI, and checks for issues like incorrect image sizes or broken links. It offers comprehensive reports with improvement recommendations, widely used by developers and integrated into many dev tools for identifying and fixing web page issues.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Lighthouse - Google Developers",
@@ -2584,7 +2549,7 @@
   },
   "3_sJHKTogkDoCjR518-OL": {
     "title": "Using DevTools",
-    "description": "Browser Developer Tools, commonly known as DevTools, are built-in features in modern web browsers that provide a suite of debugging and development capabilities. These tools allow developers to inspect, edit, and debug HTML, CSS, and JavaScript in real-time on web pages. Key features include:\n\n1.  DOM inspector for viewing and modifying page structure\n2.  Console for JavaScript debugging and logging\n3.  Network panel for analyzing HTTP requests and responses\n4.  Performance profiler for optimizing page load and runtime performance\n5.  Application panel for managing storage, caches, and service workers\n6.  Source panel for setting breakpoints and debugging JavaScript\n7.  Elements panel for live CSS editing\n8.  Device emulation for testing responsive designs\n\nDevTools are essential for front-end development, performance optimization, and cross-browser compatibility testing, providing developers with crucial insights into web application behavior and structure.\n\nVisit the following resources to learn more:",
+    "description": "Browser Developer Tools (DevTools) are built-in browser features for web development, allowing real-time inspection, editing, and debugging of HTML, CSS, and JavaScript. Key features include a DOM inspector, console for JavaScript, network panel, performance profiler, application panel for storage/caches/service workers, source panel for JavaScript debugging, elements panel for CSS editing, and device emulation. DevTools are vital for front-end development, optimization, and compatibility testing, offering insights into web app behavior.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Chrome DevTools - Google Developers",
@@ -2605,7 +2570,7 @@
   },
   "raoa-75p_DyBAycvy3yVv": {
     "title": "Storage",
-    "description": "The Web Storage API provides mechanisms for storing key-value pairs in a web browser. It includes two storage objects: localStorage and sessionStorage, which allow you to save data on the client side and persist it across multiple browser sessions, respectively. The Web Storage API is designed to be simple and easy to use, and it is widely supported across modern web browsers. It is often used as an alternative to cookies, as it allows for larger amounts of data to be stored and is more efficient in terms of performance.\n\nVisit the following resources to learn more:",
+    "description": "The Web Storage API lets websites store information directly in your web browser. It has two main types: `localStorage` (keeps data even after you close the browser) and `sessionStorage` (keeps data only while the browser tab is open). This is useful for saving things like user preferences or items in a shopping cart. It's simpler and can hold more data than traditional cookies, and most modern browsers support it.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Web Storage API - MDN",
@@ -2626,7 +2591,7 @@
   },
   "NDJR8UCoa31v45TBFP7we": {
     "title": "Web Sockets",
-    "description": "Web Sockets is a technology that allows for full-duplex communication over a single TCP connection. It enables real-time, bi-directional communication between a client and a server, and is typically used in applications that require high-speed, low-latency communication, such as online gaming and real-time data streaming. Web Sockets utilizes a persistent connection between a client and a server, allowing for continuous data exchange without the need for the client to send additional requests to the server. This makes it more efficient and faster than other technologies, such as HTTP, which require a new request to be sent for each piece of data. Web Sockets is supported by most modern web browsers and can be used with a variety of programming languages and frameworks.\n\nVisit the following resources to learn more:",
+    "description": "WebSockets enable real-time, two-way communication between a client and server over a single, persistent TCP connection. This is ideal for applications needing fast, low-latency data exchange, like online games or live data streams, as it avoids repeated HTTP requests. Most modern browsers support WebSockets, and it integrates with various programming languages and frameworks.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Web Sockets - MDN",
@@ -2647,7 +2612,7 @@
   },
   "doPe92aUpo-8KWhi45lWK": {
     "title": "Server Sent Events",
-    "description": "Server-Sent Events (SSE) is a technology that allows a web server to push data to a client in real-time. It uses an HTTP connection to send a stream of data from the server to the client, and the client can listen for these events and take action when they are received. SSE is useful for applications that require real-time updates, such as chat systems, stock tickers, and social media feeds. It is a simple and efficient way to establish a long-lived connection between a client and a server, and it is supported by most modern web browsers.\n\nTo use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting.\n\nVisit the following resources to learn more:",
+    "description": "Server-Sent Events (SSE) let a web server send live updates to a webpage. It uses a regular HTTP connection for a one-way stream of data from server to client. This is good for things like live chats or news feeds. It's a simple way to keep a connection open for updates and works in most browsers. The webpage listens for these events and acts on them.\n\nTo use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Server-Sent Events - MDN",
@@ -2663,7 +2628,7 @@
   },
   "TldWoXiqKxM4X3JONKAR7": {
     "title": "Service Workers",
-    "description": "Service Workers are a type of web worker that acts as a proxy between a web page and the network, allowing web developers to build offline-first and reliable applications. Service Workers can intercept network requests, access the cache, and make decisions on how to respond to a request based on the available resources. Service Workers are written in JavaScript and are registered by a web page. Once registered, they can control the page and all its requests, even when the page is not open in a browser. This allows Service Workers to enable features such as push notifications, background synchronization, and offline support. Service Workers are supported by most modern web browsers, and they are an essential component of progressive web applications (PWAs).\n\nVisit the following resources to learn more:",
+    "description": "Service Workers are special JavaScript files that act like a middleman between a webpage and the internet. They help build apps that work offline. Service Workers can catch network requests, use stored (cached) data, and decide how to respond, even if the webpage isn't open. This allows for features like push notifications, background updates, and offline use. Most modern browsers support them, and they are key for Progressive Web Apps (PWAs).\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Service Workers - MDN",
@@ -2684,7 +2649,7 @@
   },
   "YbGGYoKJEx29PlvopUBiM": {
     "title": "Location",
-    "description": "The Geolocation API is a web API that provides access to the device's location data, such as latitude and longitude. It allows web developers to build location-based applications, such as mapping and location sharing, by using the device's GPS, Wi-Fi, and other sensors to determine the user's location. To use the Geolocation API, a web page must first request permission from the user to access their location. If permission is granted, the page can then use the `navigator.geolocation` object to access the device's location data. The API provides several methods for getting the user's current location, watching for location changes, and calculating distances between two locations.\n\nVisit the following resources to learn more:",
+    "description": "The Geolocation API lets websites know a device's location (like latitude and longitude). This is for apps that use location, like maps. It uses GPS, Wi-Fi, and other sensors. The website must ask for permission first. If given, it can get the current location, watch for changes, or find distances. This helps make location-aware web apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Geolocation API - MDN",
@@ -2700,7 +2665,7 @@
   },
   "6AlcArOiJMhHXguAosDzn": {
     "title": "Notifications",
-    "description": "The Notifications API is a web API that allows web pages to display system-level notifications to the user. These notifications can be used to alert the user of important events, such as new messages or updates, even when the web page is not open in the browser. To use the Notifications API, a web page must first request permission from the user to display notifications. If permission is granted, the page can then use the `Notification` constructor to create a new notification and display it to the user. The notification can include a title, body text, and an icon, and it can be customized with options such as a timeout and a click action.\n\nVisit the following resources to learn more:",
+    "description": "The Notifications API lets websites show system alerts to users, like for new messages or updates, even if the site isn't open. The site must ask for permission first. If allowed, it can create notifications with a title, text, and icon. These can also have a timeout or an action when clicked. It helps keep users informed about important events from the website.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Get Started With The Notifications API",
@@ -2721,7 +2686,7 @@
   },
   "Fd0hQh1DleM0gMzCpGou4": {
     "title": "Device Orientation",
-    "description": "The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games. To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation.\n\nVisit the following resources to learn more:",
+    "description": "The Device Orientation API lets websites know how a device is tilted or moving (like its pitch, roll, and yaw). This is for apps that react to movement, like augmented reality or motion games. The site must ask for permission first. If allowed, it can get the device's orientation and react to changes. It helps make interactive, motion-aware web apps.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Device Orientation API - MDN",
@@ -2737,7 +2702,7 @@
   },
   "MAM1nuVk-h4AvTUk4nvmj": {
     "title": "Payments",
-    "description": "The Payment Request API is a web API that allows web developers to build checkout flows within their web applications. It provides a standardized, browser-based interface for collecting payment and shipping information from the user, and it supports a wide range of payment methods, including credit cards, debit cards, and digital wallets. To use the Payment Request API, a web page must first create a `PaymentRequest` object and specify the payment and shipping options that are available to the user. The page can then invoke the Payment Request UI by calling the `show()` method on the `PaymentRequest` object. The user can then select their preferred payment and shipping options and confirm the payment, at which point the Payment Request API will return a payment response object that can be used to complete the transaction.\n\nVisit the following resources to learn more:",
+    "description": "The Payment Request API helps websites build checkout forms. It gives a standard way for browsers to get payment and shipping info from users. It works with credit cards, debit cards, and digital wallets. A webpage creates a `PaymentRequest`, shows options, and then the user confirms. The API then gives a response to finish the payment.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Payment Request API - MDN",
@@ -2753,7 +2718,7 @@
   },
   "opu2bAsmdWHqWqtsCscLC": {
     "title": "Credentials",
-    "description": "The Credential Management API is a web standard that allows websites to interact with the browser's credential manager to store, retrieve, and manage user credentials. It provides a programmatic interface for seamless and secure user authentication, enabling features like automatic sign-in and one-tap sign-up. The API supports various credential types, including passwords, federated identities, and public key credentials. By leveraging this API, developers can improve user experience by reducing login friction, implementing smoother account switching, and enhancing overall security. It works in conjunction with password managers and platform authenticators, helping to streamline authentication processes across devices and browsers while adhering to modern security practices.\n\nVisit the following resources to learn more:",
+    "description": "The Credential Management API helps websites work with the browser's password manager. It lets sites store and get user logins securely, making sign-in and sign-up easier (like auto sign-in). It supports passwords and other login types. This API improves login experience and security by working with password managers and platform authenticators, making logins smoother across devices.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Credential Management API - MDN",
@@ -2769,7 +2734,7 @@
   },
   "h26uS3muFCabe6ekElZcI": {
     "title": "SWC",
-    "description": "The Speedy Web Compiler (SWC) is a fast, extensible JavaScript/TypeScript compiler written in Rust. It's designed as a faster alternative to Babel for transpiling modern JavaScript code into backwards-compatible versions. SWC can be used for both compilation and bundling, offering significant performance improvements over traditional JavaScript-based tools. It supports latest ECMAScript features, JSX, and TypeScript, and can be configured for custom transformations. SWC is commonly used in development environments to speed up build times and in production builds to optimize code. Its speed and compatibility make it increasingly popular in large-scale JavaScript projects and as a core component in other build tools and frameworks aiming for improved performance.\n\nVisit the following resources to learn more:",
+    "description": "SWC (Speedy Web Compiler) is a super-fast tool for changing modern JavaScript and TypeScript code into older versions that more browsers can understand. It's written in Rust, making it much faster than tools like Babel. SWC can compile and bundle code, speeding up website building. It supports new JavaScript features, JSX (used with React), and TypeScript. It's popular for big JavaScript projects and is used by other tools to make them faster too.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "SWC Website",
@@ -2800,7 +2765,7 @@
   },
   "wA2fSYsbBYU02VJXAvUz8": {
     "title": "Astro",
-    "description": "Astro is a modern static site generator (SSG) and web framework designed for building fast, content-focused websites. It allows developers to use multiple frontend frameworks (like React, Vue, or Svelte) within the same project, automatically rendering components to static HTML at build time. Astro's unique \"partial hydration\" approach only sends JavaScript to the browser when necessary, resulting in significantly smaller bundle sizes and faster load times. The framework supports file-based routing, markdown content, and built-in optimizations for images and assets. Astro's component islands architecture enables developers to create interactive components while maintaining the performance benefits of static HTML, making it particularly well-suited for content-rich sites like blogs, documentation, and marketing pages.\n\nVisit the following resources to learn more:",
+    "description": "Astro is a static site generator for fast, content-focused websites. It lets you use various frontend frameworks (like React, Vue, Svelte) and renders components to static HTML. Astro's \"partial hydration\" only sends JavaScript when needed, leading to smaller bundles and quicker loads. It supports file-based routing and markdown, making it great for blogs, docs, and marketing sites.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Astro Web Framework Crash Course",

public/roadmap-content/full-stack.json

@@ -3,11 +3,6 @@
     "title": "HTML",
     "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@@ -29,11 +24,6 @@
     "title": "CSS",
     "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools — Learn CSS",
-        "url": "https://www.w3schools.com/css/",
-        "type": "article"
-      },
       {
         "title": "Web.dev by Google — Learn CSS",
         "url": "https://web.dev/learn/css/",
@@ -163,8 +153,8 @@
         "type": "article"
       },
       {
-        "title": "Git & GitHub Crash Course For Beginners",
-        "url": "https://www.youtube.com/watch?v=SWYqp7iY_Tc",
+        "title": "Git & GitHub Crash Course For Beginners 2025",
+        "url": "https://youtu.be/vA5TTz6BXhY?si=GvKMbLL4UBtOq6fh",
         "type": "video"
       },
       {
@@ -326,11 +316,6 @@
         "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
         "type": "article"
       },
-      {
-        "title": "Node.JS Introduction",
-        "url": "https://www.w3schools.com/nodejs/nodejs_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Node.js",
         "url": "https://app.daily.dev/tags/nodejs?ref=roadmapsh",
@@ -504,7 +489,7 @@
   },
   "cUOfvOlQ_0Uu1VX3i67kJ": {
     "title": "Basic AWS Services",
-    "description": "AWS has several services but you don't need to know all of them. Some common ones that you can start with are EC2, VPN, S3, Route 53, and SES.\n\nHere are some of the resources to get you started:",
+    "description": "AWS has several services but you don't need to know all of them. Some common ones that you can start with are EC2, VPC, S3, Route 53, and SES.\n\nHere are some of the resources to get you started:",
     "links": [
       {
         "title": "Up and Running with AWS VPC",