Merge branch 'kamranahmedse:master' into master

pull/8385/head
Liwei Su 3 weeks ago committed by GitHub
commit fce687699c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 2
      .astro/settings.json
  2. 9
      .env.example
  3. 2
      .github/workflows/cloudfront-fe-cache.yml
  4. 16
      .github/workflows/greetings.yml
  5. 8
      astro.config.mjs
  6. 3
      license
  7. 9
      package.json
  8. 3044
      pnpm-lock.yaml
  9. BIN
      public/pdfs/roadmaps/aspnet-core.pdf
  10. BIN
      public/pdfs/roadmaps/cloudflare.pdf
  11. BIN
      public/pdfs/roadmaps/cpp.pdf
  12. BIN
      public/pdfs/roadmaps/java.pdf
  13. 8
      public/roadmap-content/ai-data-scientist.json
  14. 2
      public/roadmap-content/ai-engineer.json
  15. 32
      public/roadmap-content/api-design.json
  16. 2875
      public/roadmap-content/aspnet-core.json
  17. 6
      public/roadmap-content/backend.json
  18. 1643
      public/roadmap-content/cloudflare.json
  19. 352
      public/roadmap-content/computer-science.json
  20. 742
      public/roadmap-content/cpp.json
  21. 50
      public/roadmap-content/cyber-security.json
  22. 224
      public/roadmap-content/data-analyst.json
  23. 10
      public/roadmap-content/devops.json
  24. 10
      public/roadmap-content/engineering-manager.json
  25. 15
      public/roadmap-content/frontend.json
  26. 2
      public/roadmap-content/full-stack.json
  27. 52
      public/roadmap-content/game-developer.json
  28. 7
      public/roadmap-content/git-github.json
  29. 1591
      public/roadmap-content/java.json
  30. 5
      public/roadmap-content/javascript.json
  31. 13
      public/roadmap-content/nodejs.json
  32. 25
      public/roadmap-content/php.json
  33. 11
      public/roadmap-content/postgresql-dba.json
  34. 15
      public/roadmap-content/product-manager.json
  35. 43
      public/roadmap-content/python.json
  36. 2
      public/roadmap-content/qa.json
  37. 27
      public/roadmap-content/redis.json
  38. 13
      public/roadmap-content/server-side-game-developer.json
  39. 37
      public/roadmap-content/software-architect.json
  40. 35
      public/roadmap-content/system-design.json
  41. 15
      public/roadmap-content/typescript.json
  42. 10
      public/roadmap-content/ux-design.json
  43. 38
      public/roadmap-content/vue.json
  44. BIN
      public/roadmaps/cloudflare.png
  45. BIN
      public/roadmaps/cpp.png
  46. BIN
      public/roadmaps/java.png
  47. 1
      readme.md
  48. 181
      scripts/gemini-roadmap-content.ts
  49. 13
      src/api/ai-roadmap.ts
  50. 16
      src/components/AccountSidebar.astro
  51. 1
      src/components/Activity/ProjectProgress.tsx
  52. 2
      src/components/Activity/ResourceProgress.tsx
  53. 3
      src/components/AdvertiseForm.tsx
  54. 14
      src/components/Analytics/Clarity.astro
  55. 114
      src/components/Analytics/GoogleAd.astro
  56. 59
      src/components/Analytics/GoogleAdSlot.astro
  57. 19
      src/components/Analytics/RedditPixel.astro
  58. 8
      src/components/Analytics/analytics.ts
  59. 2
      src/components/AstroIcon.astro
  60. 143
      src/components/AuthenticationFlow/CourseLoginPopup.tsx
  61. 21
      src/components/AuthenticationFlow/EmailLoginForm.tsx
  62. 44
      src/components/AuthenticationFlow/GitHubButton.tsx
  63. 48
      src/components/AuthenticationFlow/GoogleButton.tsx
  64. 50
      src/components/AuthenticationFlow/LinkedInButton.tsx
  65. 2
      src/components/AuthenticationFlow/LoginPopup.astro
  66. 16
      src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
  67. 226
      src/components/Billing/BillingPage.tsx
  68. 39
      src/components/Billing/BillingWarning.tsx
  69. 22
      src/components/Billing/CheckSubscriptionVerification.tsx
  70. 68
      src/components/Billing/EmptyBillingScreen.tsx
  71. 96
      src/components/Billing/UpdatePlanConfirmation.tsx
  72. 306
      src/components/Billing/UpgradeAccountModal.tsx
  73. 76
      src/components/Billing/VerifyUpgrade.tsx
  74. 32
      src/components/ChangelogBanner.astro
  75. 38
      src/components/CreateTeam/RoadmapSelector.tsx
  76. 2
      src/components/Dashboard/DashboardCustomProgressCard.tsx
  77. 151
      src/components/Dashboard/DashboardPage.tsx
  78. 3
      src/components/Dashboard/DashboardProgressCard.tsx
  79. 10
      src/components/Dashboard/DashboardTabButton.tsx
  80. 578
      src/components/Dashboard/PersonalDashboard.tsx
  81. 72
      src/components/FeatureAnnouncement.tsx
  82. 47
      src/components/FeaturedGuides.astro
  83. 51
      src/components/FeaturedGuides/FeaturedGuideList.tsx
  84. 57
      src/components/FeaturedGuides/GuideListItem.tsx
  85. 35
      src/components/FeaturedVideos.astro
  86. 39
      src/components/FeaturedVideos/FeaturedVideoList.tsx
  87. 38
      src/components/FeaturedVideos/VideoListItem.tsx
  88. 172
      src/components/GenerateCourse/AICourse.tsx
  89. 116
      src/components/GenerateCourse/AICourseActions.tsx
  90. 82
      src/components/GenerateCourse/AICourseCard.tsx
  91. 533
      src/components/GenerateCourse/AICourseContent.tsx
  92. 131
      src/components/GenerateCourse/AICourseFollowUp.css
  93. 74
      src/components/GenerateCourse/AICourseFollowUp.tsx
  94. 390
      src/components/GenerateCourse/AICourseFollowUpPopover.tsx
  95. 387
      src/components/GenerateCourse/AICourseLesson.tsx
  96. 81
      src/components/GenerateCourse/AICourseLimit.tsx
  97. 46
      src/components/GenerateCourse/AICourseSearch.tsx
  98. 204
      src/components/GenerateCourse/AICourseSidebarModuleList.tsx
  99. 103
      src/components/GenerateCourse/AILimitsPopup.tsx
  100. 57
      src/components/GenerateCourse/CircularProgress.tsx
  101. Some files were not shown because too many files have changed in this diff Show More

@ -3,6 +3,6 @@
"enabled": false
},
"_variables": {
"lastUpdateCheck": 1734436957813
"lastUpdateCheck": 1741697790683
}
}

@ -1,3 +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_EDITOR_APP_URL=https://draw.roadmap.sh
PUBLIC_COURSE_APP_URL=http://localhost:5173
PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_ID=
PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_ID=
PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=10
PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=100

@ -13,4 +13,4 @@ jobs:
-H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-H "X-GitHub-Api-Version: 2022-11-28" \
https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
-d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront", "is_verbose": false } }'
-d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront,cloudfront-course", "is_verbose": false } }'

@ -15,19 +15,9 @@ jobs:
- uses: actions/first-interaction@v1
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
issue-message: |
🙌 Hello! Thank you for taking the time to file an issue.
If this is a bug report, please include any relevant logs or details that can help us debug the problem. Your help is greatly appreciated! 💡
We'll get back to you as soon as possible, kindly be patient for a response from a maintainer.
pr-message: |
🎉 Warm regards and welcome! Thank you for your first ever contribution to **Roadmap.sh**!
Thank you for your first ever contribution to [roadmap.sh](https://roadmap.sh)! 🎉
We appreciate your effort and enthusiasm. Before diving in, we kindly ask you to take a moment to go through our [Contribution Guidelines](https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md) 📘 to ensure your contribution aligns with the project's standards and goals.
If you are fixing a bug, please reference the associated issue number in your pull request description. 🐛
If you're working on a new feature, feel free to check with the community on [discord](https://roadmap.sh/discord) to ensure the feature will be accepted. *Also, kindly refrain pinging the maintainer(s).* 🚀
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 making this project better! 🌟
Thanks for choosing to contribute, and for helping make this project better! 🌟

@ -11,6 +11,14 @@ import react from '@astrojs/react';
// https://astro.build/config
export default defineConfig({
site: 'https://roadmap.sh/',
vite: {
server: {
allowedHosts: [
'roadmap.sh',
'port3k.kamranahmed.info',
],
},
},
markdown: {
shikiConfig: {
theme: 'dracula',

@ -1,6 +1,7 @@
Everything including text and images in this project are protected by the copyright laws.
You are allowed to use this material for personal use but are not allowed to use it for
any other purpose including publishing the images, the project files or the content in the images in any form either digital, non-digital, textual, graphical or written formats.
any other purpose including publishing the images, the project files or the content in
the images in any form either digital, non-digital, textual, graphical or written formats.
You are allowed to share the links to the repository or the website roadmap.sh but not
the content for any sort of usage that involves the content of this repository taken out
of the repository and be shared from any other medium including but not limited to blog

@ -34,6 +34,7 @@
"@astrojs/sitemap": "^3.2.0",
"@astrojs/tailwind": "^5.1.2",
"@fingerprintjs/fingerprintjs": "^4.5.0",
"@microsoft/clarity": "^1.0.0",
"@nanostores/react": "^0.8.0",
"@napi-rs/image": "^1.9.2",
"@resvg/resvg-js": "^2.6.2",
@ -52,6 +53,7 @@
"js-cookie": "^3.0.5",
"lucide-react": "^0.452.0",
"luxon": "^3.5.0",
"markdown-it-async": "^2.0.0",
"nanoid": "^5.0.7",
"nanostores": "^0.11.3",
"node-html-parser": "^6.1.13",
@ -62,22 +64,27 @@
"react-calendar-heatmap": "^1.9.0",
"react-confetti": "^6.1.0",
"react-dom": "^18.3.1",
"react-textarea-autosize": "^8.5.7",
"react-tooltip": "^5.28.0",
"reactflow": "^11.11.4",
"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",
"satori-html": "^0.3.2",
"sharp": "^0.33.5",
"shiki": "^3.1.0",
"slugify": "^1.6.6",
"tailwind-merge": "^2.5.3",
"tailwindcss": "^3.4.13",
"tiptap-markdown": "^0.8.10",
"turndown": "^7.2.0",
"unified": "^11.0.5",
"zustand": "^4.5.5"
},
"devDependencies": {
"@ai-sdk/google": "^1.1.19",
"@playwright/test": "^1.48.0",
"@tailwindcss/typography": "^0.5.15",
"@types/dom-to-image": "^2.6.7",
@ -86,7 +93,9 @@
"@types/prismjs": "^1.26.4",
"@types/react-calendar-heatmap": "^1.6.7",
"@types/react-slick": "^0.23.13",
"@types/sanitize-html": "^2.13.0",
"@types/turndown": "^5.0.5",
"ai": "^4.1.51",
"csv-parser": "^3.0.0",
"gh-pages": "^6.2.0",
"js-yaml": "^4.1.0",

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

@ -42,7 +42,7 @@
]
},
"mwPJh33MEUQ4Co_LiVEOb": {
"title": "Differential Calculus",
"title": "Differential Calculus ",
"description": "",
"links": [
{
@ -330,17 +330,17 @@
"links": [
{
"title": "Advantages and Disadvantages of AI",
"url": "https://towardsdatascience.com/advantages-and-disadvantages-of-artificial-intelligence-182a5ef6588c",
"url": "https://medium.com/@laners.org/advantages-and-disadvantages-of-artificial-intelligence-cd6e42819b20",
"type": "article"
},
{
"title": "Reinforcement Learning 101",
"url": "https://towardsdatascience.com/reinforcement-learning-101-e24b50e1d292",
"url": "https://medium.com/towards-data-science/reinforcement-learning-101-e24b50e1d292",
"type": "article"
},
{
"title": "Understanding AUC-ROC Curve",
"url": "https://towardsdatascience.com/understanding-auc-roc-curve-68b2303cc9c5",
"url": "https://medium.com/towards-data-science/understanding-auc-roc-curve-68b2303cc9c5",
"type": "article"
}
]

@ -633,7 +633,7 @@
]
},
"lhIU0ulpvDAn1Xc3ooYz_": {
"title": "Bias and Fareness",
"title": "Bias and Fairness",
"description": "Bias and fairness in AI refer to the challenges of ensuring that machine learning models do not produce discriminatory or skewed outcomes. Bias can arise from imbalanced training data, flawed assumptions, or biased algorithms, leading to unfair treatment of certain groups based on race, gender, or other factors. Fairness aims to address these issues by developing techniques to detect, mitigate, and prevent biases in AI systems. Ensuring fairness involves improving data diversity, applying fairness constraints during model training, and continuously monitoring models in production to avoid unintended consequences, promoting ethical and equitable AI use.\n\nLearn more from the following resources:",
"links": [
{

@ -458,8 +458,29 @@
},
"O7wjldZ3yTA2s_F-UnJw_": {
"title": "Rate Limiting",
"description": "Rate Limiting is a critical aspect of API Design that dictates the number of API calls a client can make within a specified timeframe. This helps in managing resource allocation, preventing abuse of the API, and maintaining the overall health of the API system. Proper rate limiting measures should be in place to ensure the API's stability, thereby delivering a consistent and reliable service to all consumers. It works primarily by setting a limit on the frequency of client requests, thereby preventing individual users from overloading the system. It is crucial to design and implement rate limiting carefully for maintaining API availability and performance.",
"links": []
"description": "Rate Limiting is a critical aspect of API Design that dictates the number of API calls a client can make within a specified timeframe. This helps in managing resource allocation, preventing abuse of the API, and maintaining the overall health of the API system. Proper rate limiting measures should be in place to ensure the API's stability, thereby delivering a consistent and reliable service to all consumers. It works primarily by setting a limit on the frequency of client requests, thereby preventing individual users from overloading the system. It is crucial to design and implement rate limiting carefully for maintaining API availability and performance.\n\nLearn more from the following resources:",
"links": [
{
"title": "Rate limit",
"url": "https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit",
"type": "article"
},
{
"title": "Throttle",
"url": "https://developer.mozilla.org/en-US/docs/Glossary/Throttle",
"type": "article"
},
{
"title": "Debounce",
"url": "https://developer.mozilla.org/en-US/docs/Glossary/Debounce",
"type": "article"
},
{
"title": "What is rate limiting? | Rate limiting and bots",
"url": "https://www.cloudflare.com/en-gb/learning/bots/what-is-rate-limiting/",
"type": "article"
}
]
},
"20KEgZH6cu_UokqWpV-9I": {
"title": "Idempotency",
@ -569,6 +590,11 @@
"title": "Caching REST API Response",
"url": "https://restfulapi.net/caching/",
"type": "article"
},
{
"title": "HTTP caching",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching",
"type": "article"
}
]
},
@ -709,7 +735,7 @@
"links": [
{
"title": "API Authorization Methods",
"url": "https://konghq.com/blog/engineering/common-api-authentication-methods",
"url": "https://www.pingidentity.com/en/resources/identity-fundamentals/authorization/authorization-methods.html",
"type": "article"
}
]

File diff suppressed because it is too large Load Diff

@ -629,7 +629,7 @@
"type": "article"
},
{
"title": "MySQL Full Course for free",
"title": "MySQL Complete Course",
"url": "https://www.youtube.com/watch?v=5OdVJbNCSso",
"type": "video"
}
@ -1690,8 +1690,8 @@
"type": "article"
},
{
"title": "Architectural Patterns in a nutshell",
"url": "https://towardsdatascience.com/10-common-software-architectural-patterns-in-a-nutshell-a0b47a1e9013",
"title": "10 Common Software Architectural Patterns in a nutshell",
"url": "https://theiotacademy.medium.com/10-common-software-architectural-patterns-in-a-nutshell-1b1f6cf5036b",
"type": "article"
}
]

File diff suppressed because it is too large Load Diff

@ -55,12 +55,12 @@
"type": "article"
},
{
"title": "Python Website",
"title": "Python",
"url": "https://www.python.org/",
"type": "article"
},
{
"title": "Python Getting Started",
"title": "Getting Started with Python",
"url": "https://www.python.org/about/gettingstarted/",
"type": "article"
},
@ -182,6 +182,11 @@
"title": "Rust",
"description": "Rust is a modern systems programming language focusing on safety, speed, and concurrency. It accomplishes these goals by being memory safe without using garbage collection.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Rust Roadmap",
"url": "https://roadmap.sh/rust",
"type": "article"
},
{
"title": "The Rust Programming Language - online book",
"url": "https://doc.rust-lang.org/book/",
@ -213,6 +218,11 @@
"title": "C++",
"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",
"url": "https://roadmap.sh/cpp",
"type": "article"
},
{
"title": "Learn C++",
"url": "https://learncpp.com/",
@ -238,11 +248,6 @@
"url": "https://www.w3schools.com/cpp/default.asp",
"type": "article"
},
{
"title": "C++ Roadmap",
"url": "https://roadmap.sh/cpp",
"type": "article"
},
{
"title": "Explore top posts about C++ Programming",
"url": "https://app.daily.dev/tags/c++?ref=roadmapsh",
@ -326,6 +331,11 @@
"url": "https://techdevguide.withgoogle.com/paths/data-structures-and-algorithms/",
"type": "course"
},
{
"title": "Visit Dedicated DSA Roadmap",
"url": "https://roadmap.sh/datastructures-and-algorithms",
"type": "article"
},
{
"title": "Data Structures and Algorithms",
"url": "https://www.javatpoint.com/data-structure-tutorial",
@ -645,6 +655,11 @@
"title": "Complete Binary Tree - Programiz",
"url": "https://www.programiz.com/dsa/complete-binary-tree",
"type": "article"
},
{
"title": "Complete Binary Trees",
"url": "https://www.wscubetech.com/resources/dsa/complete-binary-tree",
"type": "article"
}
]
},
@ -771,8 +786,14 @@
},
"HZ1kk0TQ13FLC9t13BZl5": {
"title": "Adjacency Matrix",
"description": "",
"links": []
"description": "An adjacency matrix is a square matrix used to represent a finite graph. It is used to represent the connections between vertices in a graph. The matrix is filled with 0s and 1s, where a 1 represents a connection between two vertices and a 0 represents no connection.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Adjacency Matrix",
"url": "https://en.wikipedia.org/wiki/Adjacency_matrix",
"type": "article"
}
]
},
"rTnKJcPniUtqvfOyC88N0": {
"title": "Adjacency List",
@ -1017,8 +1038,14 @@
},
"7a6-AnBI-3tAU1dkOvPkx": {
"title": "Common Algorithms",
"description": "Here are some common algorithms that you should know. You can find more information about them in the [Algorithms](https://www.khanacademy.org/computing/computer-science/algorithms) section of the Computer Science course.\n\n* Sorting\n* Recursion\n* Searching\n* Cache Algorithms\n* Tree Algorithms\n* Graph Algorithms\n* Greedy Algorithms\n* Backtracking\n* Substring Search\n* Suffix Arrays\n* Dynamic Programming",
"links": []
"description": "Here are some common algorithms that you should know. You can find more information about them in the Algorithms section of the Computer Science course.\n\n* Sorting\n* Recursion\n* Searching\n* Cache Algorithms\n* Tree Algorithms\n* Graph Algorithms\n* Greedy Algorithms\n* Backtracking\n* Substring Search\n* Suffix Arrays\n* Dynamic Programming\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Top Algorithms and Data Structures",
"url": "https://towardsdatascience.com/top-algorithms-and-data-structures-you-really-need-to-know-ab9a2a91c7b5",
"type": "article"
}
]
},
"0_qNhprnXU3i8koW3XTdD": {
"title": "Tail Recursion",
@ -1143,20 +1170,26 @@
"XwyqBK9rgP1MMcJrdIzm5": {
"title": "Linear Search",
"description": "Linear search is a very simple algorithm that is used to search for a value in an array. It sequentially checks each element of the array until a match is found or until all the elements have been searched.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "Linear Search",
"url": "https://www.programiz.com/dsa/linear-search",
"type": "article"
}
]
},
"4wGBYFZpcdTt97WTbSazx": {
"title": "Bubble Sort",
"description": "Bubble sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Bubble Sort",
"url": "https://www.youtube.com/watch?v=P00xJgWzz2c&index=1&list=PL89B61F78B552C1AB",
"type": "video"
"title": "Bubble Sort Algorithm",
"url": "https://www.programiz.com/dsa/bubble-sort",
"type": "article"
},
{
"title": "Analyzing Bubble Sort",
"url": "https://www.youtube.com/watch?v=ni_zk257Nqo&index=7&list=PL89B61F78B552C1AB",
"title": "Bubble Sort",
"url": "https://www.youtube.com/watch?v=P00xJgWzz2c&index=1&list=PL89B61F78B552C1AB",
"type": "video"
},
{
@ -1375,7 +1408,13 @@
"Yf5gOIe7oiL19MjEVcpdw": {
"title": "Depth First Search",
"description": "Depth first search is a graph traversal algorithm that starts at a root node and explores as far as possible along each branch before backtracking.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "Depth-first Search",
"url": "https://en.wikipedia.org/wiki/Depth-first_search",
"type": "article"
}
]
},
"eY4nK2lPYsrR-a_8y2sao": {
"title": "Bellman Ford's Algorithm",
@ -1442,8 +1481,13 @@
},
"aBjBHpq_OajgQjxdCobXD": {
"title": "Finding Hamiltonian Paths",
"description": "Hamiltonian paths are paths that visit every node in a graph exactly once. They are named after the famous mathematician [Hamilton](https://en.wikipedia.org/wiki/William_Rowan_Hamilton). Hamiltonian paths are a special case of [Hamiltonian cycles](https://en.wikipedia.org/wiki/Hamiltonian_cycle), which are cycles that visit every node in a graph exactly once.\n\nVisit the following resources to learn more:",
"description": "Hamiltonian paths are paths that visit every node in a graph exactly once. They are named after the famous mathematician Hamilton. Hamiltonian paths are a special case of Hamiltonian cycles, which are cycles that visit every node in a graph exactly once.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Hamiltonian Cycles",
"url": "https://en.wikipedia.org/wiki/Hamiltonian_cycle",
"type": "article"
},
{
"title": "Hamiltonian Path",
"url": "https://www.hackerearth.com/practice/algorithms/graphs/hamiltonian-path/tutorial/",
@ -1967,13 +2011,13 @@
"description": "Class Diagrams are used to model the static structure of a system. They are used to show the classes, their attributes, operations (or methods), and the relationships between objects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "UML Class Diagram Tutorial",
"url": "https://www.youtube.com/watch?v=UI6lqHOVHic",
"type": "video"
"title": "Class Diagrams",
"url": "https://www.visual-paradigm.com/guide/uml-unified-modeling-language/uml-class-diagram-tutorial/",
"type": "article"
},
{
"title": "UML Class Diagram Tutorial",
"url": "https://www.youtube.com/watch?v=3cmzqZzwNDM&list=PLfoY2ARMh0hC2FcJKP5voAKCpk6PZXSd5&index=2",
"url": "https://www.youtube.com/watch?v=UI6lqHOVHic",
"type": "video"
}
]
@ -2354,26 +2398,6 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},
@ -2425,26 +2449,6 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},
@ -2496,26 +2500,6 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},
@ -2567,26 +2551,6 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},
@ -2643,32 +2607,12 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},
"0btHNkzWL1w_-pUgU_k2y": {
"title": "P = NP",
"description": "The P = NP problem is one of the most famous problems in computer science. It asks if the problem of determining if a given input belongs to a certain class of problems is as hard as the problem of solving the given input. In other words, it asks if the problem of determining if a given input belongs to a certain class of problems is as hard as the problem of determining if a given input belongs to a certain class of problems. This problem is also known as the Halting Problem.\n\nVisit the following resources to learn more:",
"description": "The P = NP problem is one of the most famous problems in computer science. It asks whether a problem that can be solved in polynomial time on a non-deterministic machine (i.e., the problem is in NP) can also be solved in polynomial time on a deterministic machine (i.e., the problem is in P).\n\nIf you can find a polynomial-time solution to an NP-complete problem, then all problems in NP can be solved in polynomial time. This shows that P = NP.\n\nIf you can prove for any single NP-complete problem that it is only solvable in exponential time, then all NP-complete problems are only solvable in exponential time. This shows that P ≠ NP.\n\nSo far, we don't know whether P = NP or P ≠ NP.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Whats P=NP?, and why is it such a famous question?",
@ -2941,11 +2885,6 @@
"url": "https://www.youtube.com/watch?v=svfnVhJOfMc&index=8&list=PLA5Lqm4uh9Bbq-E0ZnqTIa8LRaL77ica6",
"type": "video"
},
{
"title": "MIT 6.851 - Memory Hierarchy Models",
"url": "https://www.youtube.com/watch?v=V3omVLzI0WE&index=7&list=PLUl4u3cNGP61hsJNdULdudlRL493b-XZf",
"type": "video"
},
{
"title": "B-Trees (playlist) in 26 minutes",
"url": "https://www.youtube.com/playlist?list=PL9xmBV_5YoZNFPPv98DjTdD9X6UI9KMHz",
@ -3057,6 +2996,11 @@
"title": "CDN",
"description": "A CDN is a network of servers that are distributed geographically. The servers are connected to each other and to the internet. The servers are used to deliver content to users. The content is delivered to the user from the server that is closest to the user. This is done to reduce latency and improve the performance of the content delivery.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is a CDN?",
"url": "https://www.cloudflare.com/learning/cdn/what-is-a-cdn/",
"type": "article"
},
{
"title": "Content Delivery Network (CDN) - System Design",
"url": "https://dev.to/karanpratapsingh/system-design-the-complete-course-10fo#content-delivery-network-cdn",
@ -3163,6 +3107,11 @@
"title": "GraphQL",
"description": "GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated GraphQL Roadmap",
"url": "https://roadmap.sh/graphql",
"type": "article"
},
{
"title": "Apollo GraphQL Tutorials",
"url": "https://www.apollographql.com/tutorials/",
@ -3227,7 +3176,7 @@
"description": "Long polling is a technique used to implement server push functionality over HTTP. It is a method of opening a request on the server and keeping it open until an event occurs, at which point the server responds. This is in contrast to a regular HTTP request, where the server responds immediately with whatever data is available at the time.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Long polling",
"title": "Long Polling",
"url": "https://javascript.info/long-polling",
"type": "article"
},
@ -3252,7 +3201,18 @@
"bVjI14VismTHNCyA0mEBP": {
"title": "Web Sockets",
"description": "Web sockets are a bidirectional communication protocol between a client and a server. They are used for real-time applications like chat, multiplayer games, and live data updates. Web sockets are also used to establish a connection between a server and a client. This connection is then used to send data in both directions.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "WebSockets",
"url": "https://en.wikipedia.org/wiki/WebSocket",
"type": "article"
},
{
"title": "Web Sockets API",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API",
"type": "article"
}
]
},
"JckRqZA8C6IqQLPpTCgf4": {
"title": "SSE",
@ -3280,12 +3240,12 @@
"description": "A database is a collection of useful data of one or more related organizations structured in a way to make data an asset to the organization. A database management system is a software designed to assist in maintaining and extracting large collections of data in a timely fashion.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Oracle: What is a Database?",
"title": "What is a Database?",
"url": "https://www.oracle.com/database/what-is-database/",
"type": "article"
},
{
"title": "Prisma.io: What are Databases?",
"title": "What are Databases?",
"url": "https://www.prisma.io/dataguide/intro/what-are-databases",
"type": "article"
},
@ -3362,22 +3322,51 @@
"ii1vF74u3yrFNlw_21b3B": {
"title": "DDL",
"description": "DDL or Data Definition Language actually consists of the SQL commands that can be used to define the database schema. It simply deals with descriptions of the database schema and is used to create and modify the structure of database objects in the database. DDL is a set of SQL commands used to create, modify, and delete database structures but not data. These commands are normally not used by a general user, who should be accessing the database via an application.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "DDL",
"url": "https://en.wikipedia.org/wiki/Data_definition_language",
"type": "article"
}
]
},
"tcQSH-eAvJUZuePTDjAIb": {
"title": "DML",
"description": "The SQL commands that deals with the manipulation of data present in the database belong to DML or Data Manipulation Language and this includes most of the SQL statements. It is the component of the SQL statement that controls access to data and to the database. Basically, DCL statements are grouped with DML statements.\n\nVisit the following resources to learn more:",
"links": []
"description": "The SQL commands that manipulate data in the database belong to DML, or Data Manipulation Language, and this includes most of the SQL statements. DCL is the component of the SQL statement that controls access to data and to the database. Basically, DCL statements are grouped with DML statements.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "DML: Data Manipulation Language",
"url": "https://satoricyber.com/glossary/dml-data-manipulation-language",
"type": "article"
},
{
"title": "Difference Between DDL and DML",
"url": "https://appmaster.io/blog/difference-between-ddl-and-dml",
"type": "article"
}
]
},
"05lkb3B86Won7Rkf-8DeD": {
"title": "DQL",
"description": "DQL statements are used for performing queries on the data within schema objects. The purpose of the DQL Command is to get some schema relation based on the query passed to it. We can define DQL as follows it is a component of SQL statement that allows getting data from the database and imposing order upon it. It includes the SELECT statement. This command allows getting the data out of the database to perform operations with it. When a SELECT is fired against a table or tables the result is compiled into a further temporary table, which is displayed or perhaps received by the program i.e. a front-end.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "Data Query Language",
"url": "https://en.wikipedia.org/wiki/Data_query_language",
"type": "article"
}
]
},
"4bUmfuP2qgcli8I2Vm9zh": {
"title": "DCL",
"description": "DCL includes commands such as GRANT and REVOKE which mainly deal with the rights, permissions, and other controls of the database system.\n\nVisit the following resources to learn more:",
"links": []
"links": [
{
"title": "DCL",
"url": "https://en.wikipedia.org/wiki/Data_Control_Language",
"type": "article"
}
]
},
"_sm63rZNKoibVndeNgOpW": {
"title": "Locking",
@ -3423,7 +3412,7 @@
},
"q3nRhTYS5wg9tYnQe2sCF": {
"title": "BASE",
"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:",
"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",
"links": []
},
"uqfeiQ9K--QkGNwks4kjk": {
@ -3793,7 +3782,7 @@
"description": "Public-key cryptography, or asymmetric cryptography, is the field of cryptographic systems that use pairs of related keys. Each key pair consists of a public key and a corresponding private key. Key pairs are generated with cryptographic algorithms based on mathematical problems termed one-way functions.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Public-key cryptography - Wikipedia",
"title": "Public-key Cryptography",
"url": "https://en.wikipedia.org/wiki/Public-key_cryptography",
"type": "article"
},
@ -3866,7 +3855,12 @@
"type": "opensource"
},
{
"title": "Wikipedia - OWASP",
"title": "OWASP",
"url": "https://owasp.org/",
"type": "article"
},
{
"title": "OWASP - Wiki",
"url": "https://en.wikipedia.org/wiki/OWASP",
"type": "article"
},
@ -3915,7 +3909,7 @@
},
"1eglba39q426Nh0E0qcdj": {
"title": "How CPU Executes Programs",
"description": "Visit the following resources to learn more:",
"description": "The CPU executes programs by repeatedly fetching instructions from memory, decoding them to understand the operation, and then executing those operations. This cycle, called the fetch-decode-execute cycle, continues for each instruction in the program, with the CPU using registers for temporary storage and a program counter to keep track of the next instruction. Modern CPUs use techniques like pipelining and caches to speed up this process, enabling them to execute complex programs efficiently.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Explore top posts about Computing",
@ -3923,7 +3917,7 @@
"type": "article"
},
{
"title": "How CPU executes a program",
"title": "How CPU Executes a Program",
"url": "https://www.youtube.com/watch?v=XM4lGflQFvA",
"type": "video"
}
@ -3931,7 +3925,7 @@
},
"GDLKJkKgB-i7n0YcV2NDa": {
"title": "How Computers Calculate",
"description": "Visit the following resources to learn more:",
"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",
@ -3953,8 +3947,13 @@
},
"AxiGqbteK7ZSXEUt_zckH": {
"title": "Instructions and Programs",
"description": "Visit the following resources to learn more:",
"description": "Instructions are the most basic commands a CPU can understand, directing it to perform specific actions like adding numbers or moving data. A program, on the other hand, is a collection of these instructions, organized in a sequence to accomplish a particular task. Think of instructions as individual words and a program as a complete sentence or story; the CPU executes these instructions one by one, following the program's logic, to achieve the desired outcome.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Instruction and Programs",
"url": "https://nerdfighteria.info/v/zltgXvg6r3k/",
"type": "article"
},
{
"title": "Instructions and Programs",
"url": "https://youtu.be/zltgXvg6r3k",
@ -3964,8 +3963,13 @@
},
"DjTQjMbika4_yTzrBpcmB": {
"title": "CPU Cache",
"description": "Visit the following resources to learn more:",
"description": "A CPU cache is a hardware cache used by the central processing unit of a computer to reduce the average cost to access data from the main memory. A cache is a smaller, faster memory, located closer to a processor core, which stores copies of the data from frequently used main memory locations.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is CPU Cache",
"url": "https://www.howtogeek.com/854138/what-is-cpu-cache/",
"type": "article"
},
{
"title": "Explore top posts about Computing",
"url": "https://app.daily.dev/tags/computing?ref=roadmapsh",
@ -4059,10 +4063,10 @@
},
"xUo5Ox_HTgGyeQMDIkVyK": {
"title": "Concurrency in Multiple Cores",
"description": "Visit the following resources to learn more:",
"description": "Concurrency or Parallelism is simultaneous execution of processes on a multiple cores per CPU or multiple CPUs (on a single motherboard). Concurrency is when Parallelism is achieved on a single core/CPU by using scheduling algorithms that divides the CPU's time (time-slice).\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is the difference between multicore and concurrent programming?",
"title": "Difference between Multi-core and concurrent Programming?",
"url": "https://stackoverflow.com/questions/5372861/what-is-the-difference-between-multicore-and-concurrent-programming",
"type": "article"
},
@ -4070,35 +4074,19 @@
"title": "Concurrency in Multicore systems",
"url": "https://cs.stackexchange.com/questions/140793/concurrency-in-multiple-core",
"type": "article"
}
]
},
"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 :",
"links": [
{
"title": "CPU Scheduling in Operating Systems - geeksforgeeks",
"url": "https://www.geeksforgeeks.org/cpu-scheduling-in-operating-systems/",
"type": "article"
},
{
"title": "Lottery Scheduling for Operating Systems - geeksforgeeks",
"url": "https://www.geeksforgeeks.org/lottery-process-scheduling-in-operating-system/",
"title": "Mastering Concurrency",
"url": "https://www.harrisonclarke.com/blog/mastering-concurrency-a-guide-for-software-engineers",
"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"
}
]
},
"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.",
"links": []
},
"cpQvB0qMDL3-NWret7oeA": {
"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:",
@ -4109,7 +4097,7 @@
"type": "article"
},
{
"title": "Video on Interrupts",
"title": "Interrupts",
"url": "https://youtu.be/iKlAWIKEyuw",
"type": "video"
}
@ -4211,26 +4199,6 @@
"title": "NP Completeness IV",
"url": "https://www.youtube.com/watch?v=NKLDp3Rch3M&list=PLFDnELG9dpVxQCxuD-9BSy2E7BWY3t5Sm&index=18",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 23 - NP-Completeness",
"url": "https://www.youtube.com/watch?v=ItHp5laE1VE&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=23",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 24 - Satisfiability",
"url": "https://www.youtube.com/watch?v=inaFJeCzGxU&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=24",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 25 - More NP-Completeness",
"url": "https://www.youtube.com/watch?v=B-bhKxjZLlc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=25",
"type": "video"
},
{
"title": "CSE373 2020 - Lecture 26 - NP-Completeness Challenge",
"url": "https://www.youtube.com/watch?v=_EzetTkG_Cc&list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx&index=26",
"type": "video"
}
]
},

@ -0,0 +1,742 @@
{
"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\" << std::endl;\n }\n };\n \n class Derived1 : virtual public Base {\n public:\n void derived1Print() {\n std::cout << \"Derived1 class\" << std::endl;\n }\n };\n \n class Derived2 : virtual public Base {\n public:\n void derived2Print() {\n std::cout << \"Derived2 class\" << std::endl;\n }\n };\n \n class Derived3 : public Derived1, public Derived2 {\n public:\n void derived3Print() {\n std::cout << \"Derived3 class\" << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\n \n // Using a class and member function\n Calculator calc;\n int product = calc.multiply(x, y);\n std::cout << \"Product: \" << product << std::endl;\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": "w3schools C++ tutorial",
"url": "https://www.w3schools.com/cpp/",
"type": "article"
},
{
"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 << std::endl;\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!\" << std::endl;\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!\" << std::endl;\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, and there is no community version available; users are required to purchase a license for usage.\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!\" << std::endl;\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!\" << std::endl;\n \n\n* `std`: This is the namespace where C++ standard library entities (classes and functions) reside. It stands for \"standard\" and is an abbreviation for the Standard Template Library (STL).\n* `std::cout`: The standard \"character output\" stream that writes to the console\n* `\"Hello, World!\"`: The string literal to print\n* `std::endl`: 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.\" << std::endl;\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.\" << std::endl;\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.\" << std::endl;\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.\" << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\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": "",
"links": []
},
"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 << std::endl;\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 << std::endl;\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 << std::endl;\n }\n \n void print(double d) {\n std::cout << \"Printing double: \" << d << std::endl;\n }\n \n void print(const char* s) {\n std::cout << \"Printing string: \" << s << std::endl;\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 << std::endl;\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": "",
"links": []
},
"llCBeut_uc9IAe2oi4KZ9": {
"title": "Operator Overloading",
"description": "Operators in C++ are symbols that perform various operations on data, such as arithmetic, comparison, and logical operations. They are used to manipulate and evaluate expressions and variables.\n\nHere is a list of the commonly used operator types in C++:\n\n* **Arithmetic Operators**: These are used for performing arithmetic operations like addition, subtraction, multiplication, and division.\n \n * `+`: addition\n \n int sum = 5 + 3; // sum will be 8\n \n \n * `-`: subtraction\n \n int difference = 5 - 3; // difference will be 2\n \n \n * `*`: multiplication\n \n int product = 5 * 3; // product will be 15\n \n \n * `/`: division\n \n int quotient = 15 / 3; // quotient will be 5\n \n \n * `%`: modulo (remainder)\n \n int remainder = 7 % 3; // remainder will be 1\n \n \n* **Comparison (Relational) Operators**: These are used to compare two values and return true or false based on the comparison.\n \n * `==`: equal to\n \n bool isEqual = (5 == 3); // isEqual will be false\n \n \n * `!=`: not equal to\n \n bool isNotEqual = (5 != 3); // isNotEqual will be true\n \n \n * `<`: less than\n \n bool isLess = (5 < 3); // isLess will be false\n \n \n * `>`: greater than\n \n bool isGreater = (5 > 3); // isGreater will be true\n \n \n * `<=`: less than or equal to\n \n bool isLessOrEqual = (5 <= 3); // isLessOrEqual will be false\n \n \n * `>=`: greater than or equal to\n \n bool isGreaterOrEqual = (5 >= 3); // isGreaterOrEqual will be true\n \n \n* **Logical Operators**: These operators are used to perform logical operations such as AND (&&), OR (||), and NOT (!) on boolean values.\n \n * `&&`: logical AND\n \n bool result = (true && false); // result will be false\n \n \n * `||`: logical OR\n \n bool result = (true || false); // result will be true\n \n \n * `!`: logical NOT\n \n bool result = !false; // result will be true\n \n \n* **Assignment Operators**: These are used to assign values to variables.\n \n * `=`: simple assignment\n \n int x = 5; // x gets the value 5\n \n \n * `+=`: addition assignment\n \n int x = 5;\n x += 3; // x gets the value 8 (5 + 3)\n \n \n * `-=`: subtraction assignment\n \n int x = 5;\n x -= 3; // x gets the value 2 (5 - 3)\n \n \n * `*=`: multiplication assignment\n \n int x = 5;\n x *= 3; // x gets the value 15 (5 * 3)\n \n \n * `/=`: division assignment\n \n int x = 15;\n x /= 3; // x gets the value 5 (15 / 3)\n \n \n * `%=`: modulo assignment\n \n int x = 7;\n x %= 3; // x gets the value 1 (7 % 3)\n \n \n\nThese are some of the main operator categories in C++. Each operator allows you to perform specific operations, making your code more efficient and concise.",
"links": []
},
"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!\" << std::endl;\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 << std::endl;\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 compiler not able to achieve type conversion , `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 << std::endl;\n std::cout << \"The value of pi is: \" << pi << std::endl;\n std::cout << \"The value of c is: \"<< c << std::endl;\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)) << std::endl;\n \n void_ptr = &y;\n std::cout << \"float value: \" << *(static_cast<float*>(void_ptr)) << std::endl;\n \n void_ptr = &z;\n std::cout << \"string value: \" << *(static_cast<std::string*>(void_ptr)) << std::endl;\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) << std::endl;\n \n any_value = 3.14;\n std::cout << \"double value: \" << std::any_cast<double>(any_value) << std::endl;\n \n any_value = std::string(\"Hello, world!\");\n std::cout << \"string value: \" << std::any_cast<std::string>(any_value) << std::endl;\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 `&` symbol followed by the variable type 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 << std::endl; // Outputs 20\n \n ref = 30; // Sets the value of ref to 30\n std::cout << var << std::endl; // 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 << std::endl; // Outputs 5 10\n \n swap(x, y);\n std::cout << \"After Swap: x = \" << x << \" y = \" << y << std::endl; // 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": "",
"links": []
},
"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 << std::endl;\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 << std::endl;\n }\n \n int main() {\n localExample();\n // std::cout << localVar << std::endl; //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 << std::endl;\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 << std::endl;\n std::cout << \"Non-static member: \" << obj.nonStaticMember << std::endl;\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 << std::endl;\n std::cout << \"Cat's name: \" << animals::cat << std::endl;\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 << std::endl;\n std::cout << \"Inner y: \" << outer::inner::y << std::endl;\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 << std::endl;\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 << std::endl;\n std::cout << \"Cat's name: \" << cat << std::endl;\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!\" << std::endl;\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 << std::endl;\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!\" << std::endl;\n }\n };\n \n // Base class 2\n class Mammal\n {\n public:\n void breath()\n {\n std::cout << \"I can breathe!\" << std::endl;\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!\" << std::endl;\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!\" << std::endl;\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!\" << std::endl;\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\" << std::endl;\n }\n };\n \n class Dog : public Animal {\n public:\n void bark() {\n std::cout << \"Dog barks!\" << std::endl;\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\" << std::endl;\n }\n };\n \n class Dog : public Animal {\n public:\n void makeSound() override {\n std::cout << \"Dog barks!\" << std::endl;\n }\n };\n \n class Cat : public Animal {\n public:\n void makeSound() override {\n std::cout << \"Cat meows!\" << std::endl;\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": "",
"links": []
},
"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\" << std::endl; \n }\n };\n \n // Derived class 1\n class Circle : public Shape {\n public:\n void draw() override {\n std::cout << \"Drawing a circle\" << std::endl; \n }\n };\n \n // Derived class 2\n class Rectangle : public Shape {\n public:\n void draw() override {\n std::cout << \"Drawing a rectangle\" << std::endl;\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 << std::endl;\n } catch (const char* msg) {\n std::cerr << \"Error: \" << msg << std::endl;\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 << std::endl;\n } catch (const std::exception& e) {\n std::cerr << \"Error: \" << e.what() << std::endl;\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.\" << std::endl;\n return 1;\n }\n \n // More code here...\n \n if (/*another error condition*/) {\n std::cout << \"Another error occurred.\" << std::endl;\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.\" << std::endl;\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 << std::endl;\n }\n }\n catch (const char* e) {\n std::cout << \"Error: \" << e << std::endl;\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 << std::endl;\n }\n \n // With auto, the iterator declaration becomes simpler:\n for (auto it = myVector.begin(); it != myVector.end(); ++it) {\n std::cout << *it << std::endl;\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 << std::endl;\n \n modifyVariable(non_const_value_ptr);\n std::cout << \"Modified value: \" << *non_const_value_ptr << \", original_value: \" << original_value << std::endl;\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\" << std::endl;\n }\n };\n \n class DerivedClass : public BaseClass {\n public:\n void display() {\n std::cout << \"DerivedClass\" << std::endl;\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] << std::endl;\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 << std::endl; // 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.",
"links": []
},
"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 << std::endl;\n return 0;\n }\n \n\n #include <iostream>\n \n int main() {\n std::cerr << \"An error occurred.\" << std::endl;\n std::clog << \"Logging information.\" << std::endl;\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) << std::endl;\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\" << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\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:\" << std::endl;\n for (const auto &pair : m) {\n std::cout << pair.first << \": \" << pair.second << std::endl;\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:\" << std::endl;\n for (const auto &pair : um) {\n std::cout << pair.first << \": \" << pair.second << std::endl;\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 << std::endl;\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() << std::endl;\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 << std::endl;\n }\n \n template <>\n void printData(const char* const & data) {\n std::cout << \"Specialized template for const char*: \" << data << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\n std::cout << \"Is 'a_ptr' a pointer? \" << std::boolalpha << std::is_pointer<decltype(a_ptr)>::value << std::endl;\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 << std::endl;\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\" << std::endl;\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\" << std::endl;\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.\" << std::endl;\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.\" << std::endl;\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() << std::endl;\n std::cout << t2.name() << std::endl;\n std::cout << t3.name() << std::endl;\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.\" << std::endl;\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.\" << std::endl;\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!\" << std::endl;\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\" << std::endl;\n }\n };\n \n class Derived1 : public Base<Derived1> {\n public:\n void implementation() {\n std::cout << \"Custom implementation in Derived1\" << std::endl;\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": "Standardds",
"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 << std::endl;\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 << std::endl;\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-safe discrimination union), `<optional>` (optional value wrapper), `<variant>` (type-safe 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() << std::endl;\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 << std::endl;\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 << std::endl;\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 << std::endl;\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!\" << std::endl;\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 << std::endl;\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 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": []
}
}

@ -521,11 +521,6 @@
"title": "Operating Systems",
"description": "**Operating systems (OS)** are software that manage computer hardware and provide a platform for applications to run. They handle essential functions such as managing memory, processing tasks, controlling input and output devices, and facilitating file management. Key examples include **Windows**, **macOS**, **Linux**, and **Unix**. Each operating system offers different features and interfaces, tailored to specific user needs or system requirements, from desktop computing to server management and embedded systems.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is an operating system?",
"url": "https://www.geeksforgeeks.org/what-is-an-operating-system/",
"type": "article"
},
{
"title": "What is an operating system as fast as possible",
"url": "https://www.youtube.com/watch?v=pVzRTmdd9j0",
@ -708,11 +703,6 @@
"title": "What are Network Protocols?",
"url": "https://www.solarwinds.com/resources/it-glossary/network-protocols",
"type": "article"
},
{
"title": "Types of Network Topology",
"url": "https://www.geeksforgeeks.org/types-of-network-topology/",
"type": "article"
}
]
},
@ -853,11 +843,6 @@
"title": "loopback",
"description": "**Loopback** refers to a special network interface used to send traffic back to the same device for testing and diagnostic purposes. The loopback address for IPv4 is `127.0.0.1`, while for IPv6 it is `::1`. When a device sends a request to the loopback address, the network data does not leave the local machine; instead, it is processed internally, allowing developers to test applications or network services without requiring external network access. Loopback is commonly used to simulate network traffic, check local services, or debug issues locally.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a loopback address?",
"url": "https://www.geeksforgeeks.org/what-is-a-loopback-address/",
"type": "article"
},
{
"title": "Understanding the loopback address and loopback interfaces",
"url": "https://study-ccna.com/loopback-interface-loopback-address/",
@ -1256,11 +1241,6 @@
"title": "Star",
"description": "A star network topology is a configuration where all devices (nodes) are connected directly to a central hub or switch. In this arrangement, each node has a dedicated point-to-point link to the central device, forming a star-like structure. This topology offers advantages such as easy installation and reconfiguration, centralized management, and fault isolation. If one connection fails, it doesn't affect others. However, the central hub is a single point of failure for the entire network. Star topologies are commonly used in local area networks (LANs) due to their reliability, scalability, and ease of maintenance, making them a popular choice in both small office and large enterprise environments.\n\nLearn more from the following resources:",
"links": [
{
"title": "Advantages and Disadvantages of Star Topology",
"url": "https://www.geeksforgeeks.org/advantages-and-disadvantages-of-star-topology/",
"type": "article"
},
{
"title": "Star Topology",
"url": "https://www.youtube.com/watch?v=EQ3rW22-Py0",
@ -1698,11 +1678,6 @@
"title": "Protocol Analyzers",
"description": "**Protocol analyzers**, also known as network analyzers or packet sniffers, are tools used to capture, inspect, and analyze network traffic. They help diagnose network issues, troubleshoot performance problems, and ensure security by providing detailed insights into the data packets transmitted across a network. Protocol analyzers decode and display various network protocols, such as TCP/IP, HTTP, and DNS, allowing users to understand communication patterns, detect anomalies, and identify potential vulnerabilities. Popular examples include Wireshark and tcpdump.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a protocol analyzer?",
"url": "https://www.geeksforgeeks.org/what-is-protocol-analyzer/",
"type": "article"
},
{
"title": "Protocol Analyzers",
"url": "https://www.youtube.com/watch?v=hTMhlB-o0Ow",
@ -1733,14 +1708,8 @@
},
"xFuWk7M-Vctk_xb7bHbWs": {
"title": "route",
"description": "The `route` command is a network utility used to view and manipulate the IP routing table on Unix-like and Windows systems. It allows users to display the current routes that data packets take, as well as add, modify, or delete routes for network traffic. This command is often used in network troubleshooting and configuration to control how data flows between different networks and subnets. By specifying routes manually, administrators can define specific paths for network traffic, bypassing default routes and optimizing performance or security.\n\nLearn more from the following resources:",
"links": [
{
"title": "How to check the routing table in Linux",
"url": "https://www.geeksforgeeks.org/route-command-in-linux-with-examples/",
"type": "article"
}
]
"description": "The `route` command is a network utility used to view and manipulate the IP routing table on Unix-like and Windows systems. It allows users to display the current routes that data packets take, as well as add, modify, or delete routes for network traffic. This command is often used in network troubleshooting and configuration to control how data flows between different networks and subnets. By specifying routes manually, administrators can define specific paths for network traffic, bypassing default routes and optimizing performance or security.",
"links": []
},
"y8GaUNpaCT1Ai88wPOk6d": {
"title": "tcpdump",
@ -2308,11 +2277,6 @@
"title": "Understand Handshakes",
"description": "In networking and cybersecurity, a handshake is a process of establishing a secure connection between two parties before data exchange begins. It typically involves a series of predefined messages exchanged to verify identities, agree on communication parameters, and sometimes establish encryption keys. The most common example is the TCP three-way handshake used to initiate a connection. In cryptographic protocols like TLS/SSL, handshakes are more complex, involving certificate verification and key exchange. Handshakes are crucial for ensuring secure, authenticated communications, preventing unauthorized access, and setting up the parameters for efficient data transfer in various network protocols and security systems.\n\nLearn more from the following resources:",
"links": [
{
"title": "TCP 3-Way Handshake Process",
"url": "https://www.geeksforgeeks.org/tcp-3-way-handshake-process/",
"type": "article"
},
{
"title": "TLS Handshake Explained",
"url": "https://www.youtube.com/watch?v=86cQJ0MMses",
@ -3110,14 +3074,8 @@
},
"W7bcydXdwlubXF2PHKOuq": {
"title": "Port Blocking",
"description": "Port blocking is an essential practice in hardening the security of your network and devices. It involves restricting, filtering, or entirely denying access to specific network ports to minimize exposure to potential cyber threats. By limiting access to certain ports, you can effectively safeguard your systems against unauthorized access and reduce the likelihood of security breaches.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is port blocking with LAN?",
"url": "https://www.geeksforgeeks.org/what-is-port-blocking-within-lan/",
"type": "article"
}
]
"description": "Port blocking is an essential practice in hardening the security of your network and devices. It involves restricting, filtering, or entirely denying access to specific network ports to minimize exposure to potential cyber threats. By limiting access to certain ports, you can effectively safeguard your systems against unauthorized access and reduce the likelihood of security breaches.",
"links": []
},
"FxuMJmDoDkIsPFp2iocFg": {
"title": "Group Policy",

@ -6,18 +6,19 @@
},
"yCnn-NfSxIybUQ2iTuUGq": {
"title": "What is Data Analytics",
"description": "Data Analytics is a core component of a Data Analyst's role. The field involves extracting meaningful insights from raw data to drive decision-making processes. It includes a wide range of techniques and disciplines ranging from the simple data compilation to advanced algorithms and statistical analysis. As a data analyst, you are expected to understand and interpret complex digital data, such as the usage statistics of a website, the sales figures of a company, or client engagement over social media, etc. This knowledge enables data analysts to support businesses in identifying trends, making informed decisions, predicting potential outcomes - hence playing a crucial role in shaping business strategies.",
"links": []
"description": "Data Analytics is a core component of a Data Analyst's role. The field involves extracting meaningful insights from raw data to drive decision-making processes. It includes a wide range of techniques and disciplines ranging from the simple data compilation to advanced algorithms and statistical analysis. As a data analyst, you are expected to understand and interpret complex digital data, such as the usage statistics of a website, the sales figures of a company, or client engagement over social media, etc. This knowledge enables data analysts to support businesses in identifying trends, making informed decisions, predicting potential outcomes - hence playing a crucial role in shaping business strategies.\n\nLearn more from the following resources:",
"links": [
{
"title": "Introduction to Data Analytics",
"url": "https://www.coursera.org/learn/introduction-to-data-analytics",
"type": "course"
}
]
},
"Lsapbmg-eMIYJAHpV97nO": {
"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\nUnderstanding these types gives data analysts the power to transform raw datasets into strategic insights.\n\nVisit the following resources to learn more:",
"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/",
@ -72,12 +73,12 @@
"description": "Predictive analysis is a crucial type of data analytics that any competent data analyst should comprehend. It refers to the practice of extracting information from existing data sets in order to determine patterns and forecast future outcomes and trends. Data analysts apply statistical algorithms, machine learning techniques, and artificial intelligence to the data to anticipate future results. Predictive analysis enables organizations to be proactive, forward-thinking, and strategic by providing them valuable insights on future occurrences. It's a powerful tool that gives companies a significant competitive edge by enabling risk management, opportunity identification, and strategic decision-making.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is predictive analytics? - Google",
"title": "What is Predictive Analytics? - Google",
"url": "https://cloud.google.com/learn/what-is-predictive-analytics",
"type": "article"
},
{
"title": "What is predictive analytics?",
"title": "What is Predictive Analytics?",
"url": "https://www.youtube.com/watch?v=cVibCHRSxB0",
"type": "video"
}
@ -125,7 +126,7 @@
"description": "The Cleanup of Data is a critical component of a Data Analyst's role. It involves the process of inspecting, cleaning, transforming, and modeling data to discover useful information, inform conclusions, and support decision making. This process is crucial for Data Analysts to generate accurate and significant insights from data, ultimately resulting in better and more informed business decisions. A solid understanding of data cleanup procedures and techniques is a fundamental skill for any Data Analyst. Hence, it is necessary to hold a high emphasis on maintaining data quality by managing data integrity, accuracy, and consistency during the data cleanup process.\n\nLearn more from the following resources:",
"links": [
{
"title": "Top 10 ways to clean your data",
"title": "Top 10 Ways to Clean Your Data",
"url": "https://support.microsoft.com/en-gb/office/top-ten-ways-to-clean-your-data-2844b620-677c-47a7-ac3e-c2e157d1db19",
"type": "article"
},
@ -157,7 +158,7 @@
"description": "The visualization of data is an essential skill in the toolkit of every data analyst. This practice is about transforming complex raw data into a graphical format that allows for an easier understanding of large data sets, trends, outliers, and important patterns. Whether pie charts, line graphs, bar graphs, or heat maps, data visualization techniques not only streamline data analysis, but also facilitate a more effective communication of the findings to others. This key concept underscores the importance of presenting data in a digestible and visually appealing manner to drive data-informed decision making in an organization.\n\nLearn more from the following resources:",
"links": [
{
"title": "Data visualization beginner's guide",
"title": "Data Visualization Beginner's Guide",
"url": "https://www.tableau.com/en-gb/learn/articles/data-visualization",
"type": "article"
},
@ -223,7 +224,7 @@
},
"yBlJrNo9eO470dLp6OaQZ": {
"title": "DATEDIF",
"description": "The `DATEDIF` function is an incredibly valuable tool for a Data Analyst in Excel or Google Sheets, by providing the ability to calculate the difference between two dates. This function takes in three parameters: start date, end date and the type of difference required (measured in years, months, days, etc.). In Data Analysis, particularly when dealing with time-series data or when you need to uncover trends over specific periods, the `DATEDIF` function is a necessary asset. Recognizing its functionality will enable a data analyst to manipulate or shape data progressively and efficiently.\n\n* `DATEDIF` is technically still supported, but wont show as an option. For additional information, see Excel \"Help\" page.\n\nLearn more from the following resources:",
"description": "The `DATEDIF` function is an incredibly valuable tool for a Data Analyst in Excel or Google Sheets, by providing the ability to calculate the difference between two dates. This function takes in three parameters: start date, end date and the type of difference required (measured in years, months, days, etc.). In Data Analysis, particularly when dealing with time-series data or when you need to uncover trends over specific periods, the `DATEDIF` function is a necessary asset. Recognizing its functionality will enable a data analyst to manipulate or shape data progressively and efficiently.\n\n`DATEDIF` is technically still supported, but wont show as an option. For additional information, see Excel \"Help\" page.\n\nLearn more from the following resources:",
"links": [
{
"title": "DATEDIF function",
@ -259,7 +260,7 @@
"links": [
{
"title": "Replace Function",
"url": "https://support.microsoft.com/en-us/office/replace-function-6acf209b-01b7-4078-b4b8-e0a4ef67d181",
"url": "https://support.microsoft.com/en-us/office/replace-function-8d799074-2425-4a8a-84bc-82472868878a",
"type": "article"
},
{
@ -407,17 +408,17 @@
"description": "Data Analysts recurrently find the need to summarize, investigate, and analyze their data to make meaningful and insightful decisions. One of the most powerful tools to accomplish this in Microsoft Excel is the Pivot Table. Pivot Tables allow analysts to organize and summarize large quantities of data in a concise, tabular format. The strength of pivot tables comes from their ability to manipulate data dynamically, leading to quicker analysis and richer insights. Understanding and employing Pivot Tables efficiently is a fundamental skill for any data analyst, as it directly impacts their ability to derive significant information from raw datasets.\n\nLearn more from the following resources:",
"links": [
{
"title": "Create a pivot table",
"title": "Create a Pivot Table",
"url": "https://support.microsoft.com/en-gb/office/create-a-pivottable-to-analyze-worksheet-data-a9a84538-bfe9-40a9-a8e9-f99134456576",
"type": "article"
},
{
"title": "Pivot tables in excel",
"title": "Pivot Tables in Excel",
"url": "https://www.excel-easy.com/data-analysis/pivot-tables.html",
"type": "article"
},
{
"title": "How to create a pivot table in excel",
"title": "How to Create a Pivot Table in Excel",
"url": "https://www.youtube.com/watch?v=PdJzy956wo4",
"type": "video"
}
@ -452,15 +453,31 @@
},
"M1QtGTLyygIjePoCfvjve": {
"title": "Data Manipulation Libraries",
"description": "Data manipulation libraries are essential tools in data science and analytics, enabling efficient handling, transformation, and analysis of large datasets. Python, a popular language for data science, offers several powerful libraries for this purpose. Pandas is a highly versatile library that provides data structures like DataFrames, which allow for easy manipulation and analysis of tabular data. NumPy, another fundamental library, offers support for large, multi-dimensional arrays and matrices, along with a collection of mathematical functions to operate on these arrays. Together, Pandas and NumPy form the backbone of data manipulation in Python, facilitating tasks such as data cleaning, merging, reshaping, and statistical analysis, thus streamlining the data preparation process for machine learning and other data-driven applications.",
"links": []
"description": "Data manipulation libraries are essential tools in data science and analytics, enabling efficient handling, transformation, and analysis of large datasets. Python, a popular language for data science, offers several powerful libraries for this purpose. Pandas is a highly versatile library that provides data structures like DataFrames, which allow for easy manipulation and analysis of tabular data. NumPy, another fundamental library, offers support for large, multi-dimensional arrays and matrices, along with a collection of mathematical functions to operate on these arrays. Together, Pandas and NumPy form the backbone of data manipulation in Python, facilitating tasks such as data cleaning, merging, reshaping, and statistical analysis, thus streamlining the data preparation process for machine learning and other data-driven applications.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pandas",
"url": "https://pandas.pydata.org/",
"type": "article"
},
{
"title": "NumPy",
"url": "https://numpy.org/",
"type": "article"
},
{
"title": "Top Python Libraries for Data Science",
"url": "https://www.simplilearn.com/top-python-libraries-for-data-science-article",
"type": "article"
}
]
},
"8OXmF2Gn6TYJotBRvDjqA": {
"title": "Pandas",
"description": "Pandas is a widely acknowledged and highly useful data manipulation library in the world of data analysis. Known for its robust features like data cleaning, wrangling and analysis, pandas has become one of the go-to tools for data analysts. Built on NumPy, it provides high-performance, easy-to-use data structures and data analysis tools. In essence, its flexibility and versatility make it a critical part of the data analyst's toolkit, as it holds the capability to cater to virtually every data manipulation task.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pandas Website",
"title": "Pandas",
"url": "https://pandas.pydata.org/",
"type": "article"
},
@ -473,7 +490,7 @@
},
"l1SnPc4EMqGdaIAhIQfrT": {
"title": "Data Visualisation Libraries",
"description": "Data visualization libraries are crucial in data science for transforming complex datasets into clear and interpretable visual representations, facilitating better understanding and communication of data insights. In Python, several libraries are widely used for this purpose. Matplotlib is a foundational library that offers comprehensive tools for creating static, animated, and interactive plots. Seaborn, built on top of Matplotlib, provides a high-level interface for drawing attractive and informative statistical graphics with minimal code. Plotly is another powerful library that allows for the creation of interactive and dynamic visualizations, which can be easily embedded in web applications. Additionally, libraries like Bokeh and Altair offer capabilities for creating interactive plots and dashboards, enhancing exploratory data analysis and the presentation of data findings. Together, these libraries enable data scientists to effectively visualize trends, patterns, and outliers in their data, making the analysis more accessible and actionable.",
"description": "Data visualization libraries are crucial in data science for transforming complex datasets into clear and interpretable visual representations, facilitating better understanding and communication of data insights. In Python, several libraries are widely used for this purpose. Matplotlib is a foundational library that offers comprehensive tools for creating static, animated, and interactive plots. Seaborn, built on top of Matplotlib, provides a high-level interface for drawing attractive and informative statistical graphics with minimal code. Plotly is another powerful library that allows for the creation of interactive and dynamic visualizations, which can be easily embedded in web applications. Additionally, libraries like Bokeh and Altair offer capabilities for creating interactive plots and dashboards, enhancing exploratory data analysis and the presentation of data findings. Together, these libraries enable data scientists to effectively visualize trends, patterns, and outliers in their data, making the analysis more accessible and actionable.\n\nLearn more from the following resources:",
"links": []
},
"uGkXxdMXUMY-3fQFS1jK8": {
@ -481,7 +498,7 @@
"description": "Matplotlib is a paramount data visualization library used extensively by data analysts for generating a wide array of plots and graphs. Through Matplotlib, data analysts can convey results clearly and effectively, driving insights from complex data sets. It offers a hierarchical environment which is very natural for a data scientist to work with. Providing an object-oriented API, it allows for extensive customization and integration into larger applications. From histograms, bar charts, scatter plots to 3D graphs, the versatility of Matplotlib assists data analysts in the better comprehension and compelling representation of data.\n\nLearn more from the following resources:",
"links": [
{
"title": "Matplotlib Website",
"title": "Matplotlib",
"url": "https://matplotlib.org/",
"type": "article"
},
@ -497,7 +514,7 @@
"description": "Dplyr is a powerful and popular toolkit for data manipulation in R. As a data analyst, this library provides integral functions to manipulate, clean, and process data efficiently. It has been designed to be easy and intuitive, ensuring a robust and consistent syntax. Dplyr ensures data reliability and fast processing, essential for analysts dealing with large datasets. With a strong focus on efficiency, dplyr functions like select, filter, arrange, mutate, summarise, and group\\_by optimise data analysis operations, making data manipulation a smoother and hassle-free procedure for data analysts.\n\nLearn more from the following resources:",
"links": [
{
"title": "dplyr website",
"title": "dplyr",
"url": "https://dplyr.tidyverse.org/",
"type": "article"
},
@ -513,7 +530,7 @@
"description": "When it comes to data visualization in R programming, ggplot2 stands tall as one of the primary tools for data analysts. This data visualization library, which forms part of the tidyverse suite of packages, facilitates the creation of complex and sophisticated visual narratives. With its grammar of graphics philosophy, ggplot2 enables analysts to build graphs and charts layer by layer, thereby offering detailed control over graphical features and design. Its versatility in creating tailored and aesthetically pleasing graphics is a vital asset for any data analyst tackling exploratory data analysis, reporting, or dashboard building.\n\nLearn more from the following resources:",
"links": [
{
"title": "ggplot2 website",
"title": "ggplot2",
"url": "https://ggplot2.tidyverse.org/",
"type": "article"
},
@ -526,21 +543,27 @@
},
"_sjXCLHHTbZromJYn6fnu": {
"title": "Data Collection",
"description": "In the context of the Data Analyst role, data collection is a foundational process that entails gathering relevant data from various sources. This data can be quantitative or qualitative and may be sourced from databases, online platforms, customer feedback, among others. The gathered information is then cleaned, processed, and interpreted to extract meaningful insights. A data analyst performs this whole process carefully, as the quality of data is paramount to ensuring accurate analysis, which in turn informs business decisions and strategies. This highlights the importance of an excellent understanding, proper tools, and precise techniques when it comes to data collection in data analysis.",
"links": []
"description": "Data collection is a foundational process that entails gathering relevant data from various sources. This data can be quantitative or qualitative and may be sourced from databases, online platforms, customer feedback, among others. The gathered information is then cleaned, processed, and interpreted to extract meaningful insights. A data analyst performs this whole process carefully, as the quality of data is paramount to ensuring accurate analysis, which in turn informs business decisions and strategies. This highlights the importance of an excellent understanding, proper tools, and precise techniques when it comes to data collection in data analysis.\n\nLearn more from the following resources:",
"links": [
{
"title": "Data Collection",
"url": "https://en.wikipedia.org/wiki/Data_collection",
"type": "article"
}
]
},
"tYPeLCxbqvMFlTkCGjdHg": {
"title": "Databases",
"description": "Behind every strong data analyst, there's not just a rich assortment of data, but a set of robust databases that enable effective data collection. Databases are a fundamental aspect of data collection in a world where the capability to manage, organize, and evaluate large volumes of data is critical. As a data analyst, the understanding and use of databases is instrumental in capturing the necessary data for conducting qualitative and quantitative analysis, forecasting trends and making data-driven decisions. Thorough knowledge of databases, therefore, can be considered a key component of a data analyst's arsenal. These databases can vary from relational databases like SQL to NoSQL databases like MongoDB, each serving a unique role in the data collection process.\n\nLearn more from the following resources:",
"links": [
{
"title": "PostgreSQL Roadmap",
"url": "https://roadmap.sh/postgresql-dba",
"title": "Visit Dedicated SQL Roadmap",
"url": "https://roadmap.sh/sql",
"type": "article"
},
{
"title": "MongoDB Roadmap",
"url": "https://roadmap.sh/mongodb",
"title": "Visit Dedicated PostgreSQL Roadmap",
"url": "https://roadmap.sh/postgresql-dba",
"type": "article"
}
]
@ -571,7 +594,7 @@
"type": "article"
},
{
"title": "A beginners guide to APIs",
"title": "A Beginner's Guide to APIs",
"url": "https://www.postman.com/what-is-an-api/",
"type": "article"
}
@ -582,12 +605,12 @@
"description": "Web scraping plays a significant role in collecting unique datasets for data analysis. In the realm of a data analyst's tasks, web scraping refers to the method of extracting information from websites and converting it into a structured usable format like a CSV, Excel spreadsheet, or even into databases. This technique allows data analysts to gather large sets of data from the internet, which otherwise could be time-consuming if done manually. The capability of web scraping and parsing data effectively can give data analysts a competitive edge in their data analysis process, from unlocking in-depth, insightful information to making data-driven decisions.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is web scraping what is it used for?",
"title": "What is Web Scraping & What is it used for?",
"url": "https://www.parsehub.com/blog/what-is-web-scraping/",
"type": "article"
},
{
"title": "What is web scraping?",
"title": "What is Web Scraping?",
"url": "https://www.youtube.com/watch?v=dlj_QL-ENJM",
"type": "video"
}
@ -595,8 +618,14 @@
},
"E6cpb6kvluJM8OGuDcFBT": {
"title": "Data Cleanup",
"description": "Data cleaning, which is often referred as data cleansing or data scrubbing, is one of the most important and initial steps in the data analysis process. As a data analyst, the bulk of your work often revolves around understanding, cleaning, and standardizing raw data before analysis. Data cleaning involves identifying, correcting or removing any errors or inconsistencies in datasets in order to improve their quality. The process is crucial because it directly determines the accuracy of the insights you generate - garbage in, garbage out. Even the most sophisticated models and visualizations would not be of much use if they're based on dirty data. Therefore, mastering data cleaning techniques is essential for any data analyst.",
"links": []
"description": "Data cleaning, which is often referred as data cleansing or data scrubbing, is one of the most important and initial steps in the data analysis process. As a data analyst, the bulk of your work often revolves around understanding, cleaning, and standardizing raw data before analysis. Data cleaning involves identifying, correcting or removing any errors or inconsistencies in datasets in order to improve their quality. The process is crucial because it directly determines the accuracy of the insights you generate - garbage in, garbage out. Even the most sophisticated models and visualizations would not be of much use if they're based on dirty data. Therefore, mastering data cleaning techniques is essential for any data analyst.\n\nLearn more from the following resources:",
"links": [
{
"title": "Data Cleaning",
"url": "https://www.tableau.com/learn/articles/what-is-data-cleaning#:~:text=tools%20and%20software-,What%20is%20data%20cleaning%3F,to%20be%20duplicated%20or%20mislabeled.",
"type": "article"
}
]
},
"X9WmfHOks82BIAzs6abqO": {
"title": "Handling Missing Data",
@ -636,14 +665,14 @@
"links": [
{
"title": "Outliers",
"url": "%5Bhttps://www.mathsisfun.com/data/outliers.html",
"url": "https://www.mathsisfun.com/data/outliers.html",
"type": "article"
}
]
},
"t_BRtEharsrOZxoyX0OzV": {
"title": "Data Transformation",
"description": "Data Transformation, also known as Data Wrangling, is an essential part of a Data Analyst's role. This process involves the conversion of data from a raw format into another format to make it more appropriate and valuable for a variety of downstream purposes such as analytics. Data Analysts transform data to make the data more suitable for analysis, ensure accuracy, and to improve data quality. The right transformation techniques can give the data a structure, multiply its value, and enhance the accuracy of the analytics performed by serving meaningful results.",
"description": "Data Transformation, also known as Data Wrangling, is an essential part of a Data Analyst's role. This process involves the conversion of data from a raw format into another format to make it more appropriate and valuable for a variety of downstream purposes such as analytics. Data Analysts transform data to make the data more suitable for analysis, ensure accuracy, and to improve data quality. The right transformation techniques can give the data a structure, multiply its value, and enhance the accuracy of the analytics performed by serving meaningful results.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is data transformation?",
@ -662,7 +691,7 @@
"description": "In the realms of data analysis, data cleaning is a crucial preliminary process, this is where `pandas` - a popular python library - shines. Primarily used for data manipulation and analysis, pandas adopts a flexible and powerful data structure (DataFrames and Series) that greatly simplifies the process of cleaning raw, messy datasets. Data analysts often work with large volumes of data, some of which may contain missing or inconsistent data that can negatively impact the results of their analysis. By utilizing pandas, data analysts can quickly identify, manage and fill these missing values, drop unnecessary columns, rename column headings, filter specific data, apply functions for more complex data transformations and much more. Thus, making pandas an invaluable tool for effective data cleaning in data analysis.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pandas Website",
"title": "Pandas",
"url": "https://pandas.pydata.org/",
"type": "article"
},
@ -678,7 +707,7 @@
"description": "Data cleaning plays a crucial role in the data analysis pipeline, where it rectifies and enhances the quality of data to increase the efficiency and authenticity of the analytical process. The `dplyr` package, an integral part of the `tidyverse` suite in R, has become a staple in the toolkit of data analysts dealing with data cleaning. `dplyr` offers a coherent set of verbs that significantly simplifies the process of manipulating data structures, such as dataframes and databases. This involves selecting, sorting, filtering, creating or modifying variables, and aggregating records, among other operations. Incorporating `dplyr` into the data cleaning phase enables data analysts to perform operations more effectively, improve code readability, and handle large and complex data with ease.\n\nLearn more from the following resources:",
"links": [
{
"title": "dplyr website",
"title": "dplyr",
"url": "https://dplyr.tidyverse.org/",
"type": "article"
},
@ -790,7 +819,7 @@
"description": "When focusing on data analysis, understanding key statistical concepts is crucial. Amongst these, central tendency is a foundational element. Central Tendency refers to the measure that determines the center of a distribution. The average is a commonly used statistical tool by which data analysts discern trends and patterns. As one of the most recognized forms of central tendency, figuring out the \"average\" involves summing all values in a data set and dividing by the number of values. This provides analysts with a 'typical' value, around which the remaining data tends to cluster, facilitating better decision-making based on existing data.\n\nLearn more from the following resources:",
"links": [
{
"title": "How to calculate the average",
"title": "How to Calculate the Average",
"url": "https://support.microsoft.com/en-gb/office/calculate-the-average-of-a-group-of-numbers-e158ef61-421c-4839-8290-34d7b1e68283#:~:text=Average%20This%20is%20the%20arithmetic,by%206%2C%20which%20is%205.",
"type": "article"
},
@ -806,7 +835,7 @@
"description": "The concept of Range refers to the spread of a dataset, primarily in the realm of statistics and data analysis. This measure is crucial for a data analyst as it provides an understanding of the variability amongst the numbers within a dataset. Specifically in a role such as Data Analyst, understanding the range and dispersion aids in making more precise analyses and predictions. Understanding the dispersion within a range can highlight anomalies, identify standard norms, and form the foundation for statistical conclusions like the standard deviation, variance, and interquartile range. It allows for the comprehension of the reliability and stability of particular datasets, which can help guide strategic decisions in many industries. Therefore, range is a key concept that every data analyst must master.\n\nLearn more from the following resources:",
"links": [
{
"title": "How to find the range of a data set",
"title": "How to Find the Range of a Data Set",
"url": "https://www.scribbr.co.uk/stats/range-statistics/",
"type": "article"
}
@ -817,12 +846,12 @@
"description": "Data analysts heavily rely on statistical concepts to analyze and interpret data, and one such fundamental concept is variance. Variance, an essential measure of dispersion, quantifies the spread of data, providing insight into the level of variability within the dataset. Understanding variance is crucial for data analysts as the reliability of many statistical models depends on the assumption of constant variance across observations. In other words, it helps analysts determine how much data points diverge from the expected value or mean, which can be pivotal in identifying outliers, understanding data distribution, and driving decision-making processes. However, variance can't be interpreted in the original units of measurement due to its squared nature, which is why it is often used in conjunction with its square root, the standard deviation.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is variance?",
"title": "What is Variance?",
"url": "https://www.investopedia.com/terms/v/variance.asp",
"type": "article"
},
{
"title": "How to calculate variance",
"title": "How to Calculate Variance",
"url": "https://www.scribbr.co.uk/stats/variance-meaning/",
"type": "article"
}
@ -892,7 +921,7 @@
"description": "Tableau is a powerful data visualization tool utilized extensively by data analysts worldwide. Its primary role is to transform raw, unprocessed data into an understandable format without any technical skills or coding. Data analysts use Tableau to create data visualizations, reports, and dashboards that help businesses make more informed, data-driven decisions. They also use it to perform tasks like trend analysis, pattern identification, and forecasts, all within a user-friendly interface. Moreover, Tableau's data visualization capabilities make it easier for stakeholders to understand complex data and act on insights quickly.\n\nLearn more from the following resources:",
"links": [
{
"title": "Tableau Website",
"title": "Tableau",
"url": "https://www.tableau.com/en-gb",
"type": "article"
},
@ -908,7 +937,7 @@
"description": "PowerBI, an interactive data visualization and business analytics tool developed by Microsoft, plays a crucial role in the field of a data analyst's work. It helps data analysts to convert raw data into meaningful insights through it's easy-to-use dashboards and reports function. This tool provides a unified view of business data, allowing analysts to track and visualize key performance metrics and make better-informed business decisions. With PowerBI, data analysts also have the ability to manipulate and produce visualizations of large data sets that can be shared across an organization, making complex statistical information more digestible.\n\nLearn more from the following resources:",
"links": [
{
"title": "Power BI Website",
"title": "Power BI",
"url": "https://www.microsoft.com/en-us/power-platform/products/power-bi",
"type": "article"
},
@ -924,7 +953,7 @@
"description": "For a Data Analyst, understanding data and being able to represent it in a visually insightful form is a crucial part of effective decision-making in any organization. Matplotlib, a plotting library for the Python programming language, is an extremely useful tool for this purpose. It presents a versatile framework for generating line plots, scatter plots, histogram, bar charts and much more in a very straightforward manner. This library also allows for comprehensive customizations, offering a high level of control over the look and feel of the graphics it produces, which ultimately enhances the quality of data interpretation and communication.\n\nLearn more from the following resources:",
"links": [
{
"title": "Matplotlib Website",
"title": "Matplotlib",
"url": "https://matplotlib.org/",
"type": "article"
},
@ -940,7 +969,7 @@
"description": "Seaborn is a robust, comprehensive Python library focused on the creation of informative and attractive statistical graphics. As a data analyst, seaborn plays an essential role in elaborating complex visual stories with the data. It aids in understanding the data by providing an interface for drawing attractive and informative statistical graphics. Seaborn is built on top of Python's core visualization library Matplotlib, and is integrated with data structures from Pandas. This makes seaborn an integral tool for data visualization in the data analyst's toolkit, making the exploration and understanding of data easier and more intuitive.\n\nLearn more from the following resources:",
"links": [
{
"title": "Seaborn Website",
"title": "Seaborn",
"url": "https://seaborn.pydata.org/",
"type": "article"
},
@ -972,12 +1001,12 @@
"description": "As a vital tool in the data analyst's arsenal, bar charts are essential for analyzing and interpreting complex data. Bar charts, otherwise known as bar graphs, are frequently used graphical displays for dealing with categorical data groups or discrete variables. With their stark visual contrast and definitive measurements, they provide a simple yet effective means of identifying trends, understanding data distribution, and making data-driven decisions. By analyzing the lengths or heights of different bars, data analysts can effectively compare categories or variables against each other and derive meaningful insights effectively. Simplicity, readability, and easy interpretation are key features that make bar charts a favorite in the world of data analytics.\n\nLearn more from the following resources:",
"links": [
{
"title": "A complete guide to bar charts",
"title": "A Complete Guide to Bar Charts",
"url": "https://www.atlassian.com/data/charts/bar-chart-complete-guide",
"type": "article"
},
{
"title": "What is a bar chart?",
"title": "What is a Bar Chart?",
"url": "https://www.youtube.com/watch?v=WTVdncVCvKo",
"type": "video"
}
@ -1004,7 +1033,7 @@
"description": "A scatter plot, a crucial aspect of data visualization, is a mathematical diagram using Cartesian coordinates to represent values from two different variables. As a data analyst, understanding and interpreting scatter plots can be instrumental in identifying correlations and trends within a dataset, drawing meaningful insights, and showcasing these findings in a clear, visual manner. In addition, scatter plots are paramount in predictive analytics as they reveal patterns which can be used to predict future occurrences.\n\nLearn more from the following resources:",
"links": [
{
"title": "Mastering scatter plots",
"title": "Mastering Scatter Plots",
"url": "https://www.atlassian.com/data/charts/what-is-a-scatter-plot",
"type": "article"
},
@ -1052,7 +1081,7 @@
"description": "A stacked chart is an essential tool for a data analyst in the field of data visualization. This type of chart presents quantitative data in a visually appealing manner and allows users to easily compare different categories while still being able to compare the total sizes. These charts are highly effective when trying to measure part-to-whole relationships, displaying accumulated totals over time or when presenting data with multiple variables. Data analysts often use stacked charts to detect patterns, trends and anomalies which can aid in strategic decision making.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a stacked chart?",
"title": "What is a Stacked Chart?",
"url": "https://www.spotfire.com/glossary/what-is-a-stacked-chart",
"type": "article"
},
@ -1068,12 +1097,12 @@
"description": "Heatmaps are a crucial component of data visualization that Data Analysts regularly employ in their analyses. As one of many possible graphical representations of data, heatmaps show the correlation or scale of variation between two or more variables in a dataset, making them extremely useful for pattern recognition and outlier detection. Individual values within a matrix are represented in a heatmap as colors, with differing intensities indicating the degree or strength of an occurrence. In short, a Data Analyst would use a heatmap to decode complex multivariate data and turn it into an easily understandable visual that aids in decision making.\n\nLearn more from the following resources:",
"links": [
{
"title": "A complete guide to heatmaps",
"title": "A Complete Guide to Heatmaps",
"url": "https://www.hotjar.com/heatmaps/",
"type": "article"
},
{
"title": "What is a heatmap?",
"title": "What is a Heatmap?",
"url": "https://www.atlassian.com/data/charts/heatmap-complete-guide",
"type": "article"
}
@ -1084,12 +1113,12 @@
"description": "As a data analyst, understanding and efficiently using various forms of data visualization is crucial. Among these, Pie Charts represent a significant tool. Essentially, pie charts are circular statistical graphics divided into slices to illustrate numerical proportions. Each slice of the pie corresponds to a particular category. The pie chart's beauty lies in its simplicity and visual appeal, making it an effective way to convey relative proportions or percentages at a glance. For a data analyst, it's particularly useful when you want to show a simple distribution of categorical data. Like any tool, though, it's important to use pie charts wisely—ideally, when your data set has fewer than seven categories, and the proportions between categories are distinct.\n\nLearn more from the following resources:",
"links": [
{
"title": "A complete guide to pie charts",
"title": "A Complete Guide to Pie Charts",
"url": "https://www.atlassian.com/data/charts/pie-chart-complete-guide",
"type": "article"
},
{
"title": "What is a a pie chart",
"title": "What is a Pie Chart",
"url": "https://www.youtube.com/watch?v=GjJdZaQrItg",
"type": "video"
}
@ -1097,13 +1126,30 @@
},
"2g19zjEASJw2ve57hxpr0": {
"title": "Data Visualisation",
"description": "Data Visualization is a fundamental fragment of the responsibilities of a data analyst. It involves the presentation of data in a graphical or pictorial format which allows decision-makers to see analytics visually. This practice can help them comprehend difficult concepts or establish new patterns. With interactive visualization, data analysts can take the data analysis process to a whole new level — drill down into charts and graphs for more detail, and interactively changing what data is presented or how it’s processed. Thereby it forms a crucial link in the chain of converting raw data to actionable insights which is one of the primary roles of a Data Analyst.",
"links": []
"description": "Data Visualization is a fundamental fragment of the responsibilities of a data analyst. It involves the presentation of data in a graphical or pictorial format which allows decision-makers to see analytics visually. This practice can help them comprehend difficult concepts or establish new patterns. With interactive visualization, data analysts can take the data analysis process to a whole new level — drill down into charts and graphs for more detail, and interactively changing what data is presented or how it’s processed. Thereby it forms a crucial link in the chain of converting raw data to actionable insights which is one of the primary roles of a Data Analyst.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is Data Visualization?",
"url": "https://www.ibm.com/think/topics/data-visualization",
"type": "article"
}
]
},
"TeewVruErSsD4VLXcaDxp": {
"title": "Statistical Analysis",
"description": "Statistical analysis is a core component of a data analyst's toolkit. As professionals dealing with vast amount of structured and unstructured data, data analysts often turn to statistical methods to extract insights and make informed decisions. The role of statistical analysis in data analytics involves gathering, reviewing, and interpreting data for various applications, enabling businesses to understand their performance, trends, and growth potential. Data analysts use a range of statistical techniques from modeling, machine learning, and data mining, to convey vital information that supports strategic company actions.\n\nLearn more from the following resources:",
"links": []
"links": [
{
"title": "Understanding Statistical Analysis",
"url": "https://www.simplilearn.com/what-is-statistical-analysis-article",
"type": "article"
},
{
"title": "Statistical Analysis",
"url": "https://www.youtube.com/watch?v=XjMBZE1DuBY",
"type": "video"
}
]
},
"Xygwu0m5TeYT6S_8FKKXh": {
"title": "Hypothesis Testing",
@ -1155,7 +1201,7 @@
},
"mCUW07rx74_dUNi7OGVlj": {
"title": "Visualizing Distributions",
"description": "Visualising Distributions, from a data analyst's perspective, plays a key role in understanding the overall distribution and identifying patterns within data. It aids in summarising, structuring, and plotting structured data graphically to provide essential insights. This includes using different chart types like bar graphs, histograms, and scatter plots for interval data, and pie or bar graphs for categorical data. Ultimately, the aim is to provide a straightforward and effective manner to comprehend the data's characteristics and underlying structure. A data analyst uses these visualisation techniques to make initial conclusions, detect anomalies, and decide on further analysis paths.\n\nLearn more from the following resources:",
"description": "Visualising Distributions, from a data analyst's perspective, plays a key role in understanding the overall distribution and identifying patterns within data. It aids in summarizing, structuring, and plotting structured data graphically to provide essential insights. This includes using different chart types like bar graphs, histograms, and scatter plots for interval data, and pie or bar graphs for categorical data. Ultimately, the aim is to provide a straightforward and effective manner to comprehend the data's characteristics and underlying structure. A data analyst uses these visualisation techniques to make initial conclusions, detect anomalies, and decide on further analysis paths.\n\nLearn more from the following resources:",
"links": [
{
"title": "Data Visualizations that Capture Distributions",
@ -1195,12 +1241,12 @@
"description": "Unsupervised learning, as a fundamental aspect of Machine Learning, holds great implications in the realm of data analytics. It is an approach where a model learns to identify patterns and relationships within a dataset that isn't labelled or classified. It is especially useful for a Data Analyst as it can assist in recognizing unforeseen trends, providing new insights or preparing data for other machine learning tasks. This ability to infer without direct supervision allows a vast potential for latent structure discovery and new knowledge derivation from raw data.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is unsupervised learning?",
"title": "What is Unsupervised Learning?",
"url": "https://cloud.google.com/discover/what-is-unsupervised-learning",
"type": "article"
},
{
"title": "Introduction to unsupervised learning",
"title": "Introduction to Unsupervised Learning",
"url": "https://www.datacamp.com/blog/introduction-to-unsupervised-learning",
"type": "article"
}
@ -1211,7 +1257,7 @@
"description": "Supervised machine learning forms an integral part of the toolset for a Data Analyst. With a direct focus on building predictive models from labeled datasets, it involves training an algorithm based on these known inputs and outputs, helping Data Analysts establish correlations and make reliable predictions. Fortifying a Data Analyst's role, supervised machine learning enables the accurate interpretation of complex data, enhancing decision-making processes.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is supervised learning?",
"title": "What is Supervised Learning?",
"url": "https://cloud.google.com/discover/what-is-supervised-learning",
"type": "article"
},
@ -1275,12 +1321,12 @@
"description": "As a data analyst, it's crucial to understand various model evaluation techniques. These techniques involve different methods to measure the performance or accuracy of machine learning models. For instance, using confusion matrix, precision, recall, F1 score, ROC curves or Root Mean Squared Error (RMSE) among others. Knowing how to apply these techniques effectively not only helps in selecting the best model for a specific problem but also guides in tuning the performance of the models for optimal results. Understanding these model evaluation techniques also allows data analysts to interpret evaluation results and determine the effectiveness and applicability of a model.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is model evaluation",
"title": "What is Model Evaluation",
"url": "https://domino.ai/data-science-dictionary/model-evaluation",
"type": "article"
},
{
"title": "Model evaluation metrics",
"title": "Model Evaluation Metrics",
"url": "https://www.markovml.com/blog/model-evaluation-metrics",
"type": "article"
}
@ -1288,8 +1334,14 @@
},
"_aUQZWUhFRvNu0MZ8CPit": {
"title": "Big Data Technologies",
"description": "In the modern digitized world, Big Data refers to extremely large datasets that are challenging to manage and analyze using traditional data processing applications. These datasets often come from numerous different sources and are not only voluminous but also diverse in nature, including structured and unstructured data. The role of a data analyst in the context of big data is crucial. Data analysts are responsible for inspecting, cleaning, transforming, and modeling big data to discover useful information, conclude and support decision-making. They leverage their analytical skills and various big data tools and technologies to extract insights that can benefit the organization and drive strategic business initiatives.",
"links": []
"description": "In the modern digitized world, Big Data refers to extremely large datasets that are challenging to manage and analyze using traditional data processing applications. These datasets often come from numerous different sources and are not only voluminous but also diverse in nature, including structured and unstructured data. The role of a data analyst in the context of big data is crucial. Data analysts are responsible for inspecting, cleaning, transforming, and modeling big data to discover useful information, conclude and support decision-making. They leverage their analytical skills and various big data tools and technologies to extract insights that can benefit the organization and drive strategic business initiatives.\n\nLearn more from the following resources:",
"links": [
{
"title": "Big Data Analytics",
"url": "https://www.ibm.com/think/topics/big-data-analytics",
"type": "article"
}
]
},
"m1IfG2sEedUxMXrv_B8GW": {
"title": "Big Data Concepts",
@ -1360,7 +1412,7 @@
"description": "Hadoop is a critical element in the realm of data processing frameworks, offering an effective solution for storing, managing, and analyzing massive amounts of data. Unraveling meaningful insights from a large deluge of data is a challenging pursuit faced by many data analysts. Regular data processing tools fail to handle large-scale data, paving the way for advanced frameworks like Hadoop. This open-source platform by Apache Software Foundation excels at storing and processing vast data across clusters of computers. Notably, Hadoop comprises two key modules - the Hadoop Distributed File System (HDFS) for storage and MapReduce for processing. Hadoop’s ability to handle both structured and unstructured data further broadens its capacity. For any data analyst, a thorough understanding of Hadoop can unlock powerful ways to manage data effectively and construct meaningful analytics.\n\nLearn more from the following resources:",
"links": [
{
"title": "Apache Hadoop Website",
"title": "Apache Hadoop",
"url": "https://hadoop.apache.org/",
"type": "article"
},
@ -1381,7 +1433,7 @@
"type": "opensource"
},
{
"title": "Apache Spark Website",
"title": "Apache Spark",
"url": "https://spark.apache.org/",
"type": "article"
}
@ -1421,15 +1473,21 @@
},
"SiYUdtYMDImRPmV2_XPkH": {
"title": "Deep Learning (Optional)",
"description": "Deep learning, a subset of machine learning technique, is increasingly becoming a critical tool for data analysts. Deep learning algorithms utilize multiple layers of neural networks to understand and interpret intricate structures in large data, a skill that is integral to the daily functions of a data analyst. With the ability to learn from unstructured or unlabeled data, deep learning opens a whole new range of possibilities for data analysts in terms of data processing, prediction, and categorization. It has applications in a variety of industries from healthcare to finance to e-commerce and beyond. A deeper understanding of deep learning methodologies can augment a data analyst's capability to evaluate and interpret complex datasets and provide valuable insights for decision making.",
"links": []
"description": "Deep learning, a subset of machine learning technique, is increasingly becoming a critical tool for data analysts. Deep learning algorithms utilize multiple layers of neural networks to understand and interpret intricate structures in large data, a skill that is integral to the daily functions of a data analyst. With the ability to learn from unstructured or unlabeled data, deep learning opens a whole new range of possibilities for data analysts in terms of data processing, prediction, and categorization. It has applications in a variety of industries from healthcare to finance to e-commerce and beyond. A deeper understanding of deep learning methodologies can augment a data analyst's capability to evaluate and interpret complex datasets and provide valuable insights for decision making.\n\nLearn more from the following resources:",
"links": [
{
"title": "Deep Learning for Data Analysis",
"url": "https://www.ibm.com/think/topics/deep-learning",
"type": "article"
}
]
},
"gGHsKcS92StK5FolzmVvm": {
"title": "Neural Networks",
"description": "Neural Networks play a pivotal role in the landscape of deep learning, offering a plethora of benefits and applications for data analysts. They are computational models that emulate the way human brain processes information, enabling machines to make intelligent decisions. As a data analyst, understanding and utilizing neural networks can greatly enhance decision-making process as it allows to quickly and effectively analyze large datasets, recognize patterns, and forecast future trends. In deep learning, these networks are used for creating advanced models that can tackle complex tasks such as image recognition, natural language processing, and speech recognition, to name but a few. Therefore, an in-depth knowledge of neural networks is a significant asset for any aspiring or professional data analyst.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a neural network?",
"title": "What is a Neural Network?",
"url": "https://aws.amazon.com/what-is/neural-network/",
"type": "article"
},
@ -1461,12 +1519,12 @@
"description": "Recurrent Neural Networks(RNNs) are a type of Artificial Neural Networks(ANNs) which introduces us to the realm of Deep Learning, an aspect that has been significantly contributing to the evolution of Data Analysis. RNNs are specifically designed to recognize patterns in sequences of data, such as text, genomes, handwriting, or the spoken word. This inherent feature of RNNs makes them extremely useful and versatile for a data analyst.\n\nA data analyst leveraging RNNs can effectively charter the intrinsic complexity of data sequences, classify them, and make accurate predictions. With the fundamental understanding of deep learning, data analysts can unlock the full potential of RNNs in delivering insightful data analysis that goes beyond traditional statistical methods. Modern research and applications of RNNs extend to multiple domains including natural language processing, speech recognition, and even in the financial sphere for stock price prediction making this a key tool in a data analyst’s arsenal.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a recurrent neural network (RNN)?",
"title": "What is a Recurrent Neural Network (RNN)?",
"url": "https://www.ibm.com/topics/recurrent-neural-networks",
"type": "article"
},
{
"title": "Recurrent Neural Networks cheatsheet",
"title": "Recurrent Neural Networks Cheat-sheet",
"url": "https://stanford.edu/~shervine/teaching/cs-230/cheatsheet-recurrent-neural-networks",
"type": "article"
}
@ -1477,10 +1535,15 @@
"description": "TensorFlow, developed by Google Brain Team, has become a crucial tool in the realm of data analytics, particularly within the field of deep learning. It's an open-source platform for machine learning, offering a comprehensive and flexible ecosystem of tools, libraries, and community resources. As a data analyst, understanding and implementing TensorFlow for deep learning models allows us to identify complex patterns and make insightful predictions which standard analysis could miss. It's in-demand skill that enhances our ability to generate accurate insights from colossal and complicated structured or unstructured data sets.\n\nLearn more from the following resources:",
"links": [
{
"title": "Tensorflow Website",
"title": "Tensorflow",
"url": "https://www.tensorflow.org/",
"type": "article"
},
{
"title": "Tensorflow Documentation",
"url": "https://www.tensorflow.org/learn",
"type": "article"
},
{
"title": "Tensorflow in 100 seconds",
"url": "https://www.youtube.com/watch?v=i8NETqtGHms",
@ -1493,10 +1556,15 @@
"description": "PyTorch, an open-source machine learning library, has gained considerable popularity among data analysts due to its simplicity and high performance in tasks such as natural language processing and artificial intelligence. Specifically, in the domain of deep learning, PyTorch stands out due to its dynamic computational graph, allowing for a highly intuitive and flexible platform for building complex models. For data analysts, mastering PyTorch can open up a broad range of opportunities for data model development, data processing, and integration of machine learning algorithms.\n\nLearn more from the following resources:",
"links": [
{
"title": "PyTorch Website",
"title": "PyTorch",
"url": "https://pytorch.org/",
"type": "article"
},
{
"title": "PyTorch Documentation",
"url": "https://pytorch.org/docs/stable/index.html",
"type": "article"
},
{
"title": "PyTorch in 100 seconds",
"url": "https://www.youtube.com/watch?v=ORMx45xqWkA",
@ -1509,7 +1577,7 @@
"description": "Image Recognition has become a significant domain because of its diverse applications, including facial recognition, object detection, character recognition, and much more. As a Data Analyst, understanding Image Recognition under Deep Learning becomes crucial. The data analyst's role in this context involves deciphering complex patterns and extracting valuable information from image data. This area of machine learning combines knowledge of data analysis, image processing, and deep neural networks to provide accurate results, contributing significantly to the progression of fields like autonomous vehicles, medical imaging, surveillance, among others. Therefore, proficiency in this field paves the way for proficient data analysis, leading to innovative solutions and improved decision-making.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is image recognition?",
"title": "What is Image Recognition?",
"url": "https://www.techtarget.com/searchenterpriseai/definition/image-recognition",
"type": "article"
},
@ -1541,12 +1609,12 @@
"description": "As a business enterprise expands, so does its data. For data analysts, the surge in information means they need efficient and scalable data storage solutions to manage vast volumes of structured and unstructured data, collectively referred to as Big Data. Big Data storage solutions are critical in preserving the integrity of data while also providing quick and easy access to the data when needed. These solutions use software and hardware components to securely store massive amounts of information across numerous servers, allowing data analysts to perform robust data extraction, data processing and complex data analyses. There are several options, from the traditional Relational Database Management Systems (RDBMS) to the more recent NoSQL databases, Hadoop ecosystems, and Cloud storage solutions, each offering unique capabilities and benefits to cater for different big data needs.\n\nLearn more from the following resources:",
"links": [
{
"title": "SQL Roadmap",
"title": "Visit Dedicated SQL Roadmap",
"url": "https://roadmap.sh/sql",
"type": "article"
},
{
"title": "PostgreSQL Roadmap",
"title": "Visit Dedicated PostgreSQL Roadmap",
"url": "https://roadmap.sh/postgresql-dba",
"type": "article"
}

@ -3026,14 +3026,14 @@
"title": "Envoy",
"description": "Originally created at Lyft, Envoy is a high-performance data plane designed for service mesh architectures. Lyft open sourced it and donated it to the CNCF, where it is now one of the CNCF’s graduated open source projects. Envoy is a self contained process that is designed to run alongside every application server. All of the Envoys form a transparent communication mesh in which each application sends and receives messages to and from localhost and is unaware of the network topology.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Envoy Website",
"url": "https://www.envoyproxy.io/",
"type": "article"
},
{
"title": "envoyproxy/envoy",
"url": "https://github.com/envoyproxy/envoy",
"type": "opensource"
},
{
"title": "Envoy",
"url": "https://www.envoyproxy.io/",
"type": "article"
},
{

@ -162,8 +162,14 @@
},
"7PBmYoSmIgZT21a2Ip3_S": {
"title": "Trust / Influence Building",
"description": "Building trust and influence is crucial for any Engineering Manager. This involves establishing a solid reputation, delivering on promises and being an active listener to your team's ideas and issues. It's a manager's job to ensure there's an open, honest environment that promotes trust. Balancing delegation and taking charge, especially in difficult situations, is key to building influence.\n\nOne challenge in this area is building trust between team members of varying experiences and skills. Managers must not only show the team they're competent, but also that they value everyone's inputs. They can achieve this by promoting inclusivity and praising team contributions regularly.\n\nBeing patient, communicate clearly, and showing empathy are critical skills that can help an Engineering Manager in trust and influence building. By embodying these traits, managers can build a stronger, united, and more effective engineering team.",
"links": []
"description": "Building trust and influence is crucial for any Engineering Manager. This involves establishing a solid reputation, delivering on promises and being an active listener to your team's ideas and issues. It's a manager's job to ensure there's an open, honest environment that promotes trust. Balancing delegation and taking charge, especially in difficult situations, is key to building influence.\n\nOne challenge in this area is building trust between team members of varying experiences and skills. Managers must not only show the team they're competent, but also that they value everyone's inputs. They can achieve this by promoting inclusivity and praising team contributions regularly.\n\nBeing patient, communicate clearly, and showing empathy are critical skills that can help an Engineering Manager in trust and influence building. By embodying these traits, managers can build a stronger, united, and more effective engineering team.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Understanding The Trust Equation",
"url": "https://trustedadvisor.com/why-trust-matters/understanding-trust/understanding-the-trust-equation",
"type": "article"
}
]
},
"b3qoH_LuW-Gz4N8WdGnZs": {
"title": "One-on-One Meetings",

@ -170,6 +170,11 @@
"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:",
"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",
@ -321,6 +326,11 @@
"url": "https://www.youtube.com/watch?v=G3e-cpL7ofc",
"type": "course"
},
{
"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": "Web.dev by Google — Learn CSS",
"url": "https://web.dev/learn/css/",
@ -1607,11 +1617,6 @@
"url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP",
"type": "article"
},
{
"title": "Google Devs Content Security Policy (CSP)",
"url": "https://developers.google.com/web/fundamentals/security/csp",
"type": "article"
},
{
"title": "Web.dev - Content Security Policy (CSP)",
"url": "https://web.dev/csp/",

@ -504,7 +504,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",

@ -364,8 +364,13 @@
"description": "Joints in game development primarily refer to the connections between two objects, often used in the context of physics simulations and character animations. These might simulate the physics of real-world joints like hinges or springs. Developers can control various characteristics of joints such as their constraints, forces, and reactions. The different types come with various properties suitable for specific needs. For example, Fixed joints keep objects together, Hinge joints allow rotation around an axis, and Spring joints apply a force to keep objects apart.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Game Character Rigging Fundamentals",
"url": "https://learn.unity.com/project/game-character-rigging-fundamentals",
"title": "Introduction to joints",
"url": "https://docs.unity3d.com/Manual/Joints.html",
"type": "article"
},
{
"title": "Character Rigging for Video Games",
"url": "https://game-ace.com/blog/character-rigging-for-video-games/",
"type": "article"
},
{
@ -599,16 +604,16 @@
},
"vWLKYK2KUzV1fO-vQunzW": {
"title": "EPA",
"description": "The **EPA**, also known as the _Environmental Protection Agency_, is not typically related to game development or the concept of intersection within this context. However, in game development, EPA might refer to an 'Event-driven Process chain Architecture' or some other game-specific acronym. In this domain, different terminologies and acronyms are often used to express complex architectures, designs, or functionalities. If you have encountered EPA in a game development context, it might be best to refer to the specific documentation or guide where it was described for a better understanding. Understanding the context is key to untangle the meaning of such abbreviations.\n\nVisit the following resources to learn more:",
"description": "The **EPA** (Expanding Polytope Algorithm) is an iterative algorithm used for calculating the penetration depth between two shapes in collision detection. It is commonly used in physics engines and robotics. The algorithm takes the resulting simplex from a previously applied GJK algorithm, iteratively expanding the polytope towards the Minkowski Difference boundary until it finds the closest point to the origin. The vector from that point to the origin is the penetration vector and its magnitude is equal to the penetration depth between the two shapes.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Environmental Sustainability in Game Development",
"url": "https://polydin.com/environmental-sustainability-in-game-development/",
"title": "EPA: Collision response algorithm for 2D/3D - winter.dev",
"url": "https://winter.dev/articles/epa-algorithm",
"type": "article"
},
{
"title": "Gaming Sustainability - Microsoft Game Dev",
"url": "https://learn.microsoft.com/en-us/gaming/sustainability/sustainability-overview",
"title": "EPA (Expanding Polytope Algorithm) - dyn4j",
"url": "https://dyn4j.org/2010/05/epa-expanding-polytope-algorithm/",
"type": "article"
}
]
@ -744,7 +749,7 @@
},
"7OffO2mBmfBKqPBTZ9ngI": {
"title": "Godot",
"description": "Godot is an open-source, multi-platform game engine that is known for being feature-rich and user-friendly. It is developed by hundreds of contributors from around the world and supports the creation of both 2D and 3D games. Godot uses its own scripting language, GDScript, which is similar to Python, but it also supports C# and visual scripting. It is equipped with a unique scene system and comes with a multitude of tools that can expedite the development process. Godot's design philosophy centers around flexibility, extensibility, and ease of use, providing a handy tool for both beginners and pros in game development.\n\nVisit the following resources to learn more:",
"description": "Godot is an open-source, multi-platform game engine that is known for being feature-rich and user-friendly. It is developed by hundreds of contributors from around the world and supports the creation of both 2D and 3D games. Godot uses its own scripting language, GDScript, which is similar to Python, but it also supports C#. It is equipped with a unique scene system and comes with a multitude of tools that can expedite the development process. Godot's design philosophy centers around flexibility, extensibility, and ease of use, providing a handy tool for both beginners and pros in game development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "godotengine/godot",
@ -763,7 +768,17 @@
},
{
"title": "Godot in 100 Seconds",
"url": "https://m.youtube.com/watch?v=QKgTZWbwD1U",
"url": "https://www.youtube.com/watch?v=QKgTZWbwD1U",
"type": "video"
},
{
"title": "Tutorial - How to make a Video Game in Godot",
"url": "https://www.youtube.com/watch?v=LOhfqjmasi0",
"type": "video"
},
{
"title": "Tutorial - How to make 3D Games in Godot",
"url": "https://www.youtube.com/watch?v=ke5KpqcoiIU",
"type": "video"
}
]
@ -882,8 +897,8 @@
"description": "**C** and **C++ (commonly known as CPP)** are two of the most foundational high-level programming languages in computer science. **C** was developed in the 1970s and it is a procedural language, meaning it follows a step-by-step approach. Its fundamental principles include structured programming and lexical variable scope.\n\nOn the other hand, **C++** follows the paradigm of both procedural and object-oriented programming. It was developed as an extension to C to add the concept of \"classes\" - a core feature of object-oriented programming. C++ enhances C by introducing new features like function overloading, exception handling, and templates.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The C Programming Language",
"url": "https://www.iso.org/standard/74528.html",
"title": "C Programming Language",
"url": "https://en.wikipedia.org/wiki/C_%28programming_language%29",
"type": "article"
},
{
@ -971,11 +986,6 @@
"title": "Computer Graphics",
"description": "Computer Graphics is a subfield of computer science that studies methods for digitally synthesizing and manipulating visual content. It involves creating and manipulating visual content using specialized computer software and hardware. This field is primarily used in the creation of digital and video games, CGI in films, and also in visual effects for commercials. The field is divided into two major categories: **Raster graphics** and **Vector graphics**. Raster graphics, also known as bitmap, involve the representation of images through a dot matrix data structure, while Vector graphics involve the use of polygons to represent images in computer graphics. Both of these methods have their unique usage scenarios. Other concepts integral to the study of computer graphics include rendering (including both real-time rendering and offline rendering), animation, and 3D modeling. Generally, computer graphics skills are essential for game developers and animation experts.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is Computer Graphics?",
"url": "https://www.geeksforgeeks.org/introduction-to-computer-graphics/",
"type": "article"
},
{
"title": "Introduction to Computer Graphics",
"url": "https://open.umn.edu/opentextbooks/textbooks/420",
@ -1881,11 +1891,6 @@
"title": "MCTS Algorithm",
"url": "https://en.wikipedia.org/wiki/Monte_Carlo_tree_search/",
"type": "article"
},
{
"title": "Monte Carlo Tree Search",
"url": "https://www.geeksforgeeks.org/ml-monte-carlo-tree-search-mcts/",
"type": "article"
}
]
},
@ -1983,11 +1988,6 @@
"title": "Artificial Neural Network",
"description": "Artificial Neural Networks (ANN) are a branch of machine learning that draw inspiration from biological neural networks. ANNs are capable of 'learning' from observational data, thereby enhancing game development in numerous ways. They consist of interconnected layers of nodes, or artificial neurons, that process information through their interconnected network. Each node's connection has numerical weight that gets adjusted during learning, which helps in optimizing problem solving. ANNs are utilized in various aspects of game development, such as improving AI behavior, procedural content generation, and game testing. They can also be used for image recognition tasks, such as identifying objects or actions in a game environment.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Artificial Neural Networks (ANN)",
"url": "https://www.geeksforgeeks.org/artificial-neural-networks-and-its-applications/",
"type": "article"
},
{
"title": "What is ANN?",
"url": "https://www.coursera.org/articles/artificial-neural-network",

@ -670,11 +670,6 @@
"url": "https://docs.github.com/en/organizations/managing-user-access-to-your-organizations-repositories/managing-outside-collaborators/adding-outside-collaborators-to-repositories-in-your-organization",
"type": "article"
},
{
"title": "What are github collaborators",
"url": "https://www.geeksforgeeks.org/what-are-github-collaborators/",
"type": "article"
},
{
"title": "How to Add Collaborators to Your GitHub Repository",
"url": "https://www.blinkops.com/blog/how-to-add-collaborators-to-your-github-repository",
@ -1440,7 +1435,7 @@
},
"uxqJzQFRcALqatNRIWR0w": {
"title": "Unstaged Changes",
"description": "For changes that are not yet staged with `git add`, such as untracked new files or modified existing ones, use `git diff --unified`. This command compares your working directory against the latest committed version of each file. It's a useful tool for reviewing any local modifications before deciding whether to stage them for future commits.",
"description": "For changes that are not yet staged with `git add`, such as untracked new files or modified existing ones , use `git diff`. This command compares your working directory (your current changes) against the staging area (changes already staged with `git add`). It’s a useful tool for reviewing local modifications before deciding whether to stage them for future commits.\n\nThe `--unified` option (or -U) controls the number of context lines shown in the diff output. By default, Git shows 3 lines of context around each change. For example, `git diff --unified=5` will display 5 lines of context around each change, making it easier to understand the surrounding code or content.",
"links": [
{
"title": "What are unstaged changes in GitHub?",

File diff suppressed because it is too large Load Diff

@ -334,11 +334,6 @@
"title": "JavaScript Scope",
"url": "https://www.w3schools.com/js/js_scope.asp",
"type": "article"
},
{
"title": "Block Scoping in JavaScript",
"url": "https://www.geeksforgeeks.org/javascript-es2015-block-scoping",
"type": "article"
}
]
},

@ -342,6 +342,11 @@
"url": "https://docs.npmjs.com/updating-packages-downloaded-from-the-registry",
"type": "article"
},
{
"title": "How to Update Npm Packages Safely With Npm Check Updates",
"url": "https://chrispennington.blog/blog/how-to-update-npm-packages-safely-with-npm-check-updates/",
"type": "article"
},
{
"title": "How to Update All NPM Dependencies At Once",
"url": "https://www.youtube.com/watch?v=Ghdfdq17JAY",
@ -1023,16 +1028,16 @@
},
"XteNExIZN3_g95_dPCopY": {
"title": "Exitting / Exit Codes",
"description": "`Exiting` is a way of terminating a Node.js process by using node.js process module.\n\nVisit the following resources to learn more:",
"description": "Exiting is a way of terminating a Node.js process by using node.js process module.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Node.js Docs on exit",
"url": "https://nodejs.org/docs/latest/api/process.html",
"title": "Exit Documentation",
"url": "https://nodejs.org/api/process.html#event-exit",
"type": "article"
},
{
"title": "How to Exit a Process in Node.js",
"url": "https://www.knowledgehut.com/blog/web-development/node-js-process-exit",
"url": "https://betterstack.com/community/questions/how-to-exit-in-node-js/",
"type": "article"
}
]

@ -319,8 +319,13 @@
"description": "The Null Safe Operator is a handy feature in PHP which deals with an issue that often pops up when working with objects: trying to access properties or methods on an object that might be null. Instead of a fatal error, the PHP Null Safe Operator (indicated by ?->) allows null values to be returned safely, making your code more robust. Here's a quick example, consider $session?->user?->name. If $session or user is null, PHP will stop further execution and simply return null. This makes PHP more resilient when processing unpredictable data.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Null Safe Operator",
"url": "https://www.php.net/manual/en/language.oop5.nullsafe.php",
"title": "The Basics - Manual",
"url": "https://www.php.net/manual/en/language.oop5.basic.php",
"type": "article"
},
{
"title": "PHP RFC: Nullsafe operator",
"url": "https://wiki.php.net/rfc/nullsafe_operator",
"type": "article"
}
]
@ -393,7 +398,7 @@
},
"RkNjYva8o_jXp9suz5YdG": {
"title": "Named Arguments",
"description": "Named arguments in PHP, introduced with PHP 8.0, allow you to specify the values of required parameters by their names, instead of their position in the function call, thus making your code more readable, reducing mistakes, and allowing for unimportant arguments to be skipped. Here's an array\\_fill() function using named arguments:\n\n <?php\n $a = array_fill(start_index: 0, num: 100, value: 50);\n \n\nIn this code snippet, the parameters are passed by their names ('start\\_index', 'num', 'value'), not by their order in the function definition.\n\nVisit the following resources to learn more:",
"description": "Named arguments in PHP, introduced with PHP 8.0, allow you to specify the values of required parameters by their names, instead of their position in the function call, thus making your code more readable, reducing mistakes, and allowing for unimportant arguments to be skipped. Here's an array\\_fill() function using named arguments:\n\n <?php\n $a = array_fill(start_index: 0, count: 100, value: 50);\n \n\nIn this code snippet, the parameters are passed by their names ('start\\_index', 'count', 'value'), not by their order in the function definition.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Named Arguments",
@ -712,14 +717,8 @@
},
"J9yIXZTtwbFzH2u4dI1ep": {
"title": "CSRF Protection",
"description": "Cross-Site Request Forgery (CSRF) Protection in PHP is a method where a website can defend itself against unwanted actions performed on behalf of the users without their consent. It's a critical aspect of security as it safeguards users against potential harmful activities. Here's an example: if users are logged into a website and get tricked into clicking a deceitful link, CSRF attacks could be triggered. To protect your PHP applications from such attacks, you can generate a unique token for every session and include it as a hidden field for all form submissions. Afterwards, you need to verify this token on the server side before performing any action.\n\n <?php\n // Generate CSRF token\n if(empty($_SESSION['csrf'])) {\n $_SESSION['csrf'] = bin2hex(random_bytes(32));\n }\n \n // Verify CSRF token\n if(isset($_POST['csrf']) && $_POST['csrf'] === $_SESSION['csrf']) {\n // valid CSRF token, perform action\n }\n ?>\n \n\nVisit the following resources to learn more:",
"links": [
{
"title": "Security Guide",
"url": "https://php.net/manual/en/security.csrf.php",
"type": "article"
}
]
"description": "Cross-Site Request Forgery (CSRF) Protection in PHP is a method where a website can defend itself against unwanted actions performed on behalf of the users without their consent. It's a critical aspect of security as it safeguards users against potential harmful activities. Here's an example: if users are logged into a website and get tricked into clicking a deceitful link, CSRF attacks could be triggered. To protect your PHP applications from such attacks, you can generate a unique token for every session and include it as a hidden field for all form submissions. Afterwards, you need to verify this token on the server side before performing any action.\n\n <?php\n // Generate CSRF token\n if(empty($_SESSION['csrf'])) {\n $_SESSION['csrf'] = bin2hex(random_bytes(32));\n }\n \n // Verify CSRF token\n if(isset($_POST['csrf']) && $_POST['csrf'] === $_SESSION['csrf']) {\n // valid CSRF token, perform action\n }\n ?>\n \n\nVisit the following resources to learn more:\n\n* \\[@article@PHP Tutorial CSRF\\] ([https://www.phptutorial.net/php-tutorial/php-csrf/](https://www.phptutorial.net/php-tutorial/php-csrf/))",
"links": []
},
"JbWFfJiCRrXDhnuIx_lqx": {
"title": "Password Hashing",
@ -1021,12 +1020,12 @@
"description": "Symfony is a set of PHP components and a framework for web projects. It aims to speed up the creation and maintenance of web applications and replace the recurring coding tasks. Symfony uses Composer, a PHP dependency manager, to manage its components. Below is an example of creating a new Symfony project:\n\n composer create-project symfony/website-skeleton myproject\n \n\nThis will download and install a new Symfony project in the 'myproject' directory. Symfony's components are reusable PHP libraries that will help you complete tasks, like routing, templating, or even creating form handling.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Symphony",
"title": "Symfony",
"url": "https://symfony.com/",
"type": "article"
},
{
"title": "Symphony Documentation",
"title": "Symfony Documentation",
"url": "https://symfony.com/doc/current/index.html",
"type": "article"
}

@ -251,11 +251,6 @@
"title": "What is the Relational Model?",
"url": "https://www.postgresql.org/docs/7.1/relmodel-oper.html",
"type": "article"
},
{
"title": "The Relational Model",
"url": "https://www.geeksforgeeks.org/relational-model-in-dbms/",
"type": "article"
}
]
},
@ -583,7 +578,7 @@
"links": [
{
"title": "pg_ctlcluster",
"url": "https://www.postgresql.org/docs/current/pgctlcluster.html",
"url": "https://manpages.ubuntu.com/manpages/focal/man1/pg_ctlcluster.1.html",
"type": "article"
}
]
@ -1075,7 +1070,7 @@
]
},
"S20aJB-VuSpXYyd0-0S8c": {
"title": "Object Priviliges",
"title": "Object Privileges",
"description": "Object privileges in PostgreSQL are the permissions given to different user roles to access or modify database objects like tables, views, sequences, and functions. Ensuring proper object privileges is crucial for maintaining a secure and well-functioning database.\n\nLearn more from the following resources:",
"links": [
{
@ -1117,7 +1112,7 @@
]
},
"t18XjeHP4uRyERdqhHpl5": {
"title": "Default Priviliges",
"title": "Default Privileges",
"description": "PostgreSQL allows you to define object privileges for various types of database objects. These privileges determine if a user can access and manipulate objects like tables, views, sequences, or functions. In this section, we will focus on understanding default privileges in PostgreSQL.\n\nLearn more from the following resources:",
"links": [
{

@ -399,8 +399,19 @@
},
"gS3ofDrqDRKbecIskIyGi": {
"title": "Product Roadmap",
"description": "The product roadmap is a strategic document that provides a detailed overview of the product's direction and vision. It outlines the product's plans, both tactical and strategic - including the specific steps necessary to achieve the company's goals and vision. As a Product Manager, you are expected to guide the creation of the product roadmap, communicating the product’s evolution to the team, stakeholders, and customers. This tool serves as an essential reference point helping to align all stakeholders with the key priorities and vision of the product, and acts as a guide for decisions around product development.",
"links": []
"description": "The product roadmap is a strategic document that provides a detailed overview of the product's direction and vision. It outlines the product's plans, both tactical and strategic - including the specific steps necessary to achieve the company's goals and vision. As a Product Manager, you are expected to guide the creation of the product roadmap, communicating the product’s evolution to the team, stakeholders, and customers. This tool serves as an essential reference point helping to align all stakeholders with the key priorities and vision of the product, and acts as a guide for decisions around product development.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a Product Roadmap? - Product Plan",
"url": "https://www.productplan.com/learn/what-is-a-product-roadmap/",
"type": "article"
},
{
"title": "What is a Product Roadmap? - Vibhor Chandel",
"url": "https://www.youtube.com/watch?v=BJR70jnpHog&ab_channel=VibhorChandel",
"type": "video"
}
]
},
"eiqV86PWizZPWsyqoBU5k": {
"title": "Creating a Roadmap",

@ -179,6 +179,21 @@
"title": "Tuples Documentation",
"url": "https://docs.python.org/3/tutorial/datastructures.html#tuples-and-sequences",
"type": "article"
},
{
"title": "When and How to Use Tuples",
"url": "https://thenewstack.io/python-for-beginners-when-and-how-to-use-tuples/",
"type": "article"
},
{
"title": "Python's tuple Data Type: A Deep Dive With Examples",
"url": "https://realpython.com/python-tuple/#getting-started-with-pythons-tuple-data-type",
"type": "article"
},
{
"title": "why are Tuples even a thing?",
"url": "https://www.youtube.com/watch?v=fR_D_KIAYrE",
"type": "video"
}
]
},
@ -205,7 +220,7 @@
},
"bc9CL_HMT-R6nXO1eR-gP": {
"title": "Dictionaries",
"description": "In Python, a dictionary is a built-in data type that allows you to store key-value pairs. Each key in the dictionary is unique, and each key is associated with a value. Dictionaries are unordered collections, meaning the order of items is not guaranteed.\n\nLearn more from the following resources:",
"description": "In Python, a dictionary is a built-in data type that allows you to store key-value pairs. Each key in the dictionary is unique, and each key is associated with a value. Starting from Python 3.7, dictionaries maintain the order of items as they were added.\n\nLearn more from the following resources:",
"links": [
{
"title": "Dictionaries in Python",
@ -216,6 +231,11 @@
"title": "W3 Schools - Dictionaries",
"url": "https://www.w3schools.com/python/python_dictionaries.asp",
"type": "article"
},
{
"title": "Dictionaries in Python",
"url": "https://realpython.com/python-dicts/",
"type": "article"
}
]
},
@ -223,11 +243,6 @@
"title": "Loops",
"description": "Loops are used to execute a block of code repeatedly.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Loops in Python",
"url": "https://www.geeksforgeeks.org/loops-in-python/",
"type": "article"
},
{
"title": "Python \"while\" Loops (Indefinite Iteration)",
"url": "https://realpython.com/python-while-loop/",
@ -533,6 +548,11 @@
"title": "Modules in Python",
"url": "https://www.programiz.com/python-programming/modules",
"type": "article"
},
{
"title": "Python Modules and Packages",
"url": "https://realpython.com/python-modules-packages/",
"type": "article"
}
]
},
@ -596,6 +616,11 @@
"title": "Python Iterators",
"url": "https://www.programiz.com/python-programming/iterator",
"type": "article"
},
{
"title": "Iterators and Iterables in Python",
"url": "https://realpython.com/python-iterators-iterables/",
"type": "article"
}
]
},
@ -622,7 +647,7 @@
},
"P_Di-XPSDITmU3xKQew8G": {
"title": "Object Oriented Programming",
"description": "In Python, object-oriented Programming (OOPs) is a programming paradigm that uses objects and classes in programming. It aims to implement real-world entities like inheritance, polymorphisms, encapsulation, etc. in the programming. The main concept of OOPs is to bind the data and the functions that work on that together as a single unit so that no other part of the code can access this data.\n\nVisit the following resources to learn more:",
"description": "In Python, object-oriented Programming (OOPs) is a programming paradigm that uses objects and classes in programming. It aims to implement real-world entities like inheritance, polymorphism, encapsulation, etc., in programming. The main concept of OOPs is to bind the data and the functions that work on that together as a single unit so that no other part of the code can access this data.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Object Oriented Programming in Python",
@ -685,7 +710,7 @@
},
"zAS4YiEJ6VPsyABrkIG8i": {
"title": "Methods, Dunder",
"description": "A method in python is somewhat similar to a function, except it is associated with object/classes. Methods in python are very similar to functions except for two major differences.\n\n* The method is implicitly used for an object for which it is called.\n* The method is accessible to data that is contained within the class.\n\nDunder or magic methods in Python are the methods having two prefix and suffix underscores in the method name. Dunder here means “Double Under (Underscores)”. These are commonly used for operator overloading. Few examples for magic methods are: **`__init__`**, **`__add__`**, **`__len__`**, **`__repr__`** etc.\n\nVisit the following resources to learn more:",
"description": "A method in python is somewhat similar to a function, except it is associated with object/classes. Methods in python are very similar to functions except for two major differences.\n\n* The method is implicitly used for an object for which it is called.\n* The method is accessible to data that is contained within the class.\n\nDunder or magic methods in Python are the methods that have two prefix and suffix underscores in the method name. Dunder here means “Double Under (Underscores)”. These are commonly used for operator overloading. Few examples for magic methods are: **`__init__`**, **`__add__`**, **`__len__`**, **`__repr__`** etc.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Method vs Function in Python",
@ -1284,7 +1309,7 @@
"description": "An extremely fast Python linter and code formatter, written in Rust.",
"links": [
{
"title": "ruff documentation",
"title": "Ruff documentation",
"url": "https://docs.astral.sh/ruff/",
"type": "article"
}

@ -554,7 +554,7 @@
"links": [
{
"title": "Regression Testing",
"url": "https://www.javatpoint.com/regression-testing",
"url": "https://www.tpointtech.com/regression-testing",
"type": "article"
},
{

@ -534,7 +534,7 @@
"links": [
{
"title": "RPOP Documentation",
"url": "https://redis.io/docs/latest/commands/rpush/",
"url": "https://redis.io/docs/latest/commands/rpop/",
"type": "article"
}
]
@ -732,11 +732,6 @@
"title": "Redis Lists",
"url": "https://redis.io/docs/latest/develop/data-types/lists/",
"type": "article"
},
{
"title": "Complete Guide to Redis Lists",
"url": "https://www.geeksforgeeks.org/complete-guide-to-redis-lists/",
"type": "article"
}
]
},
@ -954,8 +949,19 @@
},
"jrgaoDnt_RxTu79hk4hCD": {
"title": "Atomicity in Redis",
"description": "Atomicity in Redis refers to the property that ensures a set of operations is executed as a single, indivisible unit. This means that either all the operations are executed successfully or none of them are. Atomicity is crucial in Redis to maintain consistency, especially when multiple operations need to be performed together.\n\nLearn more from the following resources:\n\n* [@official@Atomicity with Lua](https://redis.io/learn/develop/java/spring/rate-limiting/fixed-window/reactive-lua) -[@article@Atomicity in Redis operations](https://lucaspin.medium.com/atomicity-in-redis-operations-a1d7bc9f4a90)",
"links": []
"description": "Atomicity in Redis refers to the property that ensures a set of operations is executed as a single, indivisible unit. This means that either all the operations are executed successfully or none of them are. Atomicity is crucial in Redis to maintain consistency, especially when multiple operations need to be performed together.\n\nLearn more from the following resources:",
"links": [
{
"title": "Atomicity with Lua",
"url": "https://redis.io/learn/develop/java/spring/rate-limiting/fixed-window/reactive-lua",
"type": "article"
},
{
"title": "Atomicity in Redis operations",
"url": "https://lucaspin.medium.com/atomicity-in-redis-operations-a1d7bc9f4a90",
"type": "article"
}
]
},
"LHlwjN3WHYUBUafzzwsWQ": {
"title": "Pipelining",
@ -965,11 +971,6 @@
"title": "Redis Pipelining",
"url": "https://redis.io/docs/latest/develop/use/pipelining/",
"type": "article"
},
{
"title": "Complete Guide to Redis Pipelining",
"url": "https://www.geeksforgeeks.org/complete-guide-to-redis-pipelining/",
"type": "article"
}
]
},

@ -257,7 +257,18 @@
"E4H3hniIW6hKpH3Qr--N5": {
"title": "C/C++",
"description": "\"C\" and \"C++\", often written as \"C/CPP\", are two significantly prominent and similar programming languages widely used in server-side game development. \"C\" is a procedural language, which means that it follows a step-by-step procedure to solve a problem, while \"C++\" is both a procedural and object-oriented programming (OOP) language. This dual nature of \"C++\" allows it to handle more complex interrelated data and functions efficiently, which is a beneficial feature in game development. Moreover, \"C++\" is an extension of \"C\", meaning that any legal \"C\" program is also a valid \"C++\" program. Both languages offer a high degree of control over system resources and memory, making them an excellent choice for building fast and efficient server-side applications, such as multiplayer game servers.",
"links": []
"links": [
{
"title": "C Programming Language",
"url": "https://en.wikipedia.org/wiki/C_%28programming_language%29",
"type": "article"
},
{
"title": "C++ Programming Language",
"url": "https://en.wikipedia.org/wiki/C%2B%2B",
"type": "article"
}
]
},
"DuyUc9a-47Uz03yr4aeyg": {
"title": "C#",

@ -38,14 +38,8 @@
},
"2sR4KULvAUUoOtopvsEBs": {
"title": "Levels of Architecture",
"description": "Architecture can be done on several “levels” of abstractions. The level influences the importance of necessary skills. As there are many categorizations possible my favorite segmentation includes these 3 levels:\n\n* **Application Level:** The lowest level of architecture. Focus on one single application. Very detailed, low level design. Communication is usually within one development team.\n* **Solution Level:** The mid-level of architecture. Focus on one or more applications which fulfill a business need (business solution). Some high, but mainly low-level design. Communication is between multiple development teams.\n* **Enterprise Level:** The highest level of architecture. Focus on multiple solutions. High level, abstract design, which needs to be detailed out by solution or application architects. Communication is across the organization.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Software Engineering Architecture",
"url": "https://www.geeksforgeeks.org/software-engineering-architectural-design/",
"type": "article"
}
]
"description": "Architecture can be done on several “levels” of abstractions. The level influences the importance of necessary skills. As there are many categorizations possible my favorite segmentation includes these 3 levels:\n\n* **Application Level:** The lowest level of architecture. Focus on one single application. Very detailed, low level design. Communication is usually within one development team.\n* **Solution Level:** The mid-level of architecture. Focus on one or more applications which fulfill a business need (business solution). Some high, but mainly low-level design. Communication is between multiple development teams.\n* **Enterprise Level:** The highest level of architecture. Focus on multiple solutions. High level, abstract design, which needs to be detailed out by solution or application architects. Communication is across the organization.",
"links": []
},
"Lqe47l4j-C4OwkbkwPYry": {
"title": "Application Architecture",
@ -103,14 +97,8 @@
},
"lBtlDFPEQvQ_xtLtehU0S": {
"title": "Important Skills to Learn",
"description": "To support the laid-out activities specific skills are required. From my experience, read books and discussions we can boil this down to these ten skills every software architect should have:\n\n* Design\n* Decide\n* Simplify\n* Code\n* Document\n* Communicate\n* Estimate\n* Balance\n* Consult\n* Market\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Software Architect Skills",
"url": "https://www.geeksforgeeks.org/software-architects-skills/",
"type": "article"
}
]
"description": "To support the laid-out activities specific skills are required. From my experience, read books and discussions we can boil this down to these ten skills every software architect should have:\n\n* Design\n* Decide\n* Simplify\n* Code\n* Document\n* Communicate\n* Estimate\n* Balance\n* Consult\n* Market",
"links": []
},
"fBd2m8tMJmhuNSaakrpg4": {
"title": "Design & Architecture",
@ -496,7 +484,7 @@
},
"_U0VoTkqM1d6NR13p5azS": {
"title": "Patterns & Design Principles",
"description": "",
"description": "In the realm of software architecture, patterns and design principles are foundational tools that enable architects to create robust, scalable, and maintainable systems. They offer proven solutions to common problems and guide decision-making throughout the software development lifecycle. Understanding these concepts is essential for anyone following a software architect roadmap, as they bridge the gap between high-level architecture and practical implementation.",
"links": []
},
"AMDLJ_Bup-AY1chl_taV3": {
@ -854,14 +842,8 @@
},
"SuMhTyaBS9vwASxAt39DH": {
"title": "Tools",
"description": "Architect tools are software tools that help architects to design, document, and manage software architectures. These tools can be used to create architecture diagrams, generate code, and automate the software development process.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Top 10 Software Architecture Tools in 2024",
"url": "https://www.geeksforgeeks.org/software-architecture-tools/",
"type": "article"
}
]
"description": "Architect tools are software tools that help architects to design, document, and manage software architectures. These tools can be used to create architecture diagrams, generate code, and automate the software development process.",
"links": []
},
"OaLmlfkZid7hKqJ9G8oNV": {
"title": "Architecture",
@ -1856,11 +1838,6 @@
"url": "https://www.fortinet.com/resources/cyberglossary/tcp-ip#:~:text=The%20TCP%2FIP%20model%20defines,exchanged%20and%20organized%20over%20networks.",
"type": "article"
},
{
"title": "TCP/IP Model",
"url": "https://www.geeksforgeeks.org/tcp-ip-model/",
"type": "article"
},
{
"title": "What is TCP/IP and How Does it Work?",
"url": "https://www.techtarget.com/searchnetworking/definition/TCP-IP",

@ -557,11 +557,11 @@
},
"fY8zgbB13wxZ1CFtMSdZZ": {
"title": "SQL Tuning",
"description": "SQL tuning is a broad topic and many books have been written as reference. It's important to benchmark and profile to simulate and uncover bottlenecks.\n\n* Benchmark - Simulate high-load situations with tools such as ab.\n* Profile - Enable tools such as the slow query log to help track performance issues.\n\nBenchmarking and profiling might point you to the following optimizations.\n\nTo learn more, visit the following links:",
"description": "SQL tuning is the attempt to diagnose and repair SQL statements that fail to meet a performance standard. It is a broad topic and many books have been written as reference. It's important to benchmark and profile to simulate and uncover bottlenecks.\n\n* Benchmark - Simulate high-load situations with tools such as ab.\n* Profile - Enable tools such as the slow query log to help track performance issues.\n\nBenchmarking and profiling might point you to the following optimizations.\n\nTo learn more, visit the following links:",
"links": [
{
"title": "Optimizing MySQL Queries",
"url": "https://aiddroid.com/10-tips-optimizing-mysql-queries-dont-suck/",
"title": "Introduction to SQL Tuning - Oracle",
"url": "https://docs.oracle.com/en/database/oracle/oracle-database/23/tgsql/introduction-to-sql-tuning.html#GUID-B653E5F3-F078-4BBC-9516-B892960046A2",
"type": "article"
},
{
@ -1326,16 +1326,10 @@
}
]
},
"LncTxPg-wx8loy55r5NmV": {
"queu-based-load-leveling@LncTxPg-wx8loy55r5NmV.md": {
"title": "Queu-based Load Leveling",
"description": "Use a queue that acts as a buffer between a task and a service it invokes in order to smooth intermittent heavy loads that can cause the service to fail or the task to time out. This can help to minimize the impact of peaks in demand on availability and responsiveness for both the task and the service.\n\nLearn more from the following links:",
"links": [
{
"title": "Queue-Based Load Leveling pattern",
"url": "https://learn.microsoft.com/en-us/azure/architecture/patterns/queue-based-load-leveling",
"type": "article"
}
]
"description": "",
"links": []
},
"2ryzJhRDTo98gGgn9mAxR": {
"title": "Publisher/Subscriber",
@ -1665,10 +1659,21 @@
}
]
},
"backends-for-frontend@n4It-lr7FFtSY83DcGydX.md": {
"n4It-lr7FFtSY83DcGydX": {
"title": "Backends for Frontend",
"description": "",
"links": []
"description": "Create separate backend services to be consumed by specific frontend applications or interfaces. This pattern is useful when you want to avoid customizing a single backend for multiple interfaces. This pattern was first described by Sam Newman.\n\nTo learn more, visit the following links:",
"links": [
{
"title": "Backends for Frontends pattern",
"url": "https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends",
"type": "article"
},
{
"title": "Explore top posts about Frontend Development",
"url": "https://app.daily.dev/tags/frontend?ref=roadmapsh",
"type": "article"
}
]
},
"4hi7LvjLcv8eR6m-uk8XQ": {
"title": "Anti-Corruption Layer",

@ -652,14 +652,8 @@
},
"lvtTSHH9yBTCiLng8btnI": {
"title": "Hybrid Types",
"description": "In TypeScript, a hybrid type is a type that combines multiple types into a single type. The resulting type is considered a union of those types. This allows you to specify that a value can have multiple types, rather than just one.\n\nFor example, you can create a hybrid type that can accept either a string or a number:\n\n type StringOrNumber = string | number;\n \n\nYou can also use hybrid types to create more complex types that can represent a combination of several different types of values. For example:\n\n type Education = {\n degree: string;\n school: string;\n year: number;\n };\n \n type User = {\n name: string;\n age: number;\n email: string;\n education: Education;\n };\n \n\nLearn more from the following links:",
"links": [
{
"title": "Geeksforgeeks.org - Hybrid Types",
"url": "https://www.geeksforgeeks.org/what-are-hybrid-types-in-typescript/#:~:text=Hybrid%20types%20are%20a%20combination,properties%20like%20a%20regular%20object.",
"type": "article"
}
]
"description": "In TypeScript, a hybrid type is a type that combines multiple types into a single type. The resulting type is considered a union of those types. This allows you to specify that a value can have multiple types, rather than just one.\n\nFor example, you can create a hybrid type that can accept either a string or a number:\n\n type StringOrNumber = string | number;\n \n\nYou can also use hybrid types to create more complex types that can represent a combination of several different types of values. For example:\n\n type Education = {\n degree: string;\n school: string;\n year: number;\n };\n \n type User = {\n name: string;\n age: number;\n email: string;\n education: Education;\n };",
"links": []
},
"ib0jfZzukYOZ42AdJqt_W": {
"title": "Classes",
@ -800,11 +794,6 @@
"title": "TypeScript Utility Types Guide",
"url": "https://camchenry.com/blog/typescript-utility-types",
"type": "article"
},
{
"title": "TypeScript Utility Types: Key Concepts And Best Practices",
"url": "https://marketsplash.com/tutorials/typescript/typescript-utility-types/",
"type": "article"
}
]
},

@ -387,8 +387,14 @@
},
"90_M5qABC1vZ1nsXVyqFJ": {
"title": "Good Layout Rules",
"description": "In the world of UX design, a good layout is crucial to ensure your prototype is intuitive and user-friendly. By following these good layout rules, you can ensure your designs are efficient, attractive, and easy to navigate for users.\n\nConsistency\n-----------\n\nBeing consistent with your design is vital in creating an easy-to-navigate interface. Utilize the same color schemes, typography, and other design elements consistently throughout your prototype to make it visually cohesive and user-friendly.\n\nAlignment and Spacing\n---------------------\n\nEnsure all the elements on your prototype are aligned and spaced properly. This helps create a well-structured and clean look, while also making it easy for users to navigate and understand your design.\n\nVisual Hierarchy\n----------------\n\nEstablish clear visual hierarchy by using size, color, contrast, and white space effectively. This helps users identify important elements on the screen quickly and understand the flow of your design easily.\n\nGrouping of Elements\n--------------------\n\nGroup related elements together, such as navigation menus or form input fields. This helps users recognize the purpose and function of each section more quickly and intuitively.\n\nBalance and Proportion\n----------------------\n\nCreate a balanced and proportional look by distributing elements on the screen evenly. This can be achieved through the use of grids or other layout techniques that help maintain a sense of harmony and order in your design.\n\nAccessibility\n-------------\n\nEnsure your design is accessible to all users by considering factors such as text size, contrast, and color combinations. Aim to create an inclusive prototype that caters to people of different abilities and preferences.\n\nResponsiveness and Flexibility\n------------------------------\n\nMake sure your prototype can adapt to different screen sizes and devices, ensuring a seamless user experience across various platforms. This is particularly important when designing for web and mobile applications.\n\nIterating and Testing\n---------------------\n\nAs you develop your design, continually test and iterate on your layout based on user feedback and data. This process will help refine your design and ensure it meets the needs and expectations of your users.\n\nBy incorporating these good layout rules into your prototyping process, you'll be well on your way to creating a user-friendly and effective design that meets the goals and objectives of your project.",
"links": []
"description": "In the world of UX design, a good layout is crucial to ensure your prototype is intuitive and user-friendly. By following these good layout rules, you can ensure your designs are efficient, attractive, and easy to navigate for users.\n\nConsistency\n-----------\n\nBeing consistent with your design is vital in creating an easy-to-navigate interface. Utilize the same color schemes, typography, and other design elements consistently throughout your prototype to make it visually cohesive and user-friendly.\n\nAlignment and Spacing\n---------------------\n\nEnsure all the elements on your prototype are aligned and spaced properly. This helps create a well-structured and clean look, while also making it easy for users to navigate and understand your design.\n\nVisual Hierarchy\n----------------\n\nEstablish clear visual hierarchy by using size, color, contrast, and white space effectively. This helps users identify important elements on the screen quickly and understand the flow of your design easily.\n\nGrouping of Elements\n--------------------\n\nGroup related elements together, such as navigation menus or form input fields. This helps users recognize the purpose and function of each section more quickly and intuitively.\n\nBalance and Proportion\n----------------------\n\nCreate a balanced and proportional look by distributing elements on the screen evenly. This can be achieved through the use of grids or other layout techniques that help maintain a sense of harmony and order in your design.\n\nAccessibility\n-------------\n\nEnsure your design is accessible to all users by considering factors such as text size, contrast, and color combinations. Aim to create an inclusive prototype that caters to people of different abilities and preferences.\n\nResponsiveness and Flexibility\n------------------------------\n\nMake sure your prototype can adapt to different screen sizes and devices, ensuring a seamless user experience across various platforms. This is particularly important when designing for web and mobile applications.\n\nIterating and Testing\n---------------------\n\nAs you develop your design, continually test and iterate on your layout based on user feedback and data. This process will help refine your design and ensure it meets the needs and expectations of your users.\n\nBy incorporating these good layout rules into your prototyping process, you'll be well on your way to creating a user-friendly and effective design that meets the goals and objectives of your project.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "User Interface Design Guidelines: 10 Rules of Thumb",
"url": "https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb",
"type": "article"
}
]
},
"t46s6Piyd8MoJYzdDTsjr": {
"title": "Figma",

@ -234,6 +234,11 @@
"title": "Global Properties",
"description": "Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Application API - globalProperties",
"url": "https://vuejs.org/api/application.html#app-config-globalproperties",
"type": "article"
},
{
"title": "Vue.js Global Properties",
"url": "https://blog.logrocket.com/vue-js-globalproperties/",
@ -374,6 +379,11 @@
"title": "v-on",
"description": "The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "v-on Documentation",
"url": "https://vuejs.org/api/built-in-directives.html#v-on",
"type": "article"
},
{
"title": "v-on Directive",
"url": "https://www.w3schools.com/vue/ref_v-on.php",
@ -539,7 +549,7 @@
"links": [
{
"title": "Modifiers",
"url": "https://v2.vuejs.org/v2/guide/components-custom-events.html",
"url": "https://vuejs.org/guide/essentials/forms.html#modifiers",
"type": "article"
}
]
@ -563,11 +573,6 @@
"title": "Binding Events",
"url": "https://vuejs.org/guide/essentials/event-handling",
"type": "article"
},
{
"title": "Vue.js Event Handling",
"url": "https://www.geeksforgeeks.org/vue-js-event-handling/",
"type": "article"
}
]
},
@ -575,9 +580,14 @@
"title": "Inline / Method Handlers",
"description": "In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Inline Handlers",
"url": "https://vuejs.org/guide/essentials/event-handling#inline-handlers",
"type": "article"
},
{
"title": "Method Handlers",
"url": "https://v1.vuejs.org/guide/events.html",
"url": "https://vuejs.org/guide/essentials/event-handling#method-handlers",
"type": "article"
}
]
@ -586,6 +596,11 @@
"title": "Event Modifiers",
"description": "In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Event Modifiers",
"url": "https://vuejs.org/guide/essentials/event-handling#event-modifiers",
"type": "article"
},
{
"title": "Event Modifiers in Vue.js",
"url": "https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/",
@ -598,8 +613,8 @@
"description": "Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Input Bindings",
"url": "https://vuejs.org/guide/essentials/forms",
"title": "Key Modifiers",
"url": "https://vuejs.org/guide/essentials/event-handling#key-modifiers",
"type": "article"
}
]
@ -608,6 +623,11 @@
"title": "Mouse Button Modifiers",
"description": "Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Mouse Button Modifiers",
"url": "https://vuejs.org/guide/essentials/event-handling#mouse-button-modifiers",
"type": "article"
},
{
"title": "Button Modifiers",
"url": "https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8",

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 786 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 225 KiB

After

Width:  |  Height:  |  Size: 512 KiB

@ -43,6 +43,7 @@ Here is the list of available roadmaps with more being actively worked upon.
- [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
- [AI Engineer Roadmap](https://roadmap.sh/ai-engineer)
- [AWS Roadmap](https://roadmap.sh/aws)
- [Cloudflare Roadmap](https://roadmap.sh/cloudflare)
- [Linux Roadmap](https://roadmap.sh/linux)
- [Terraform Roadmap](https://roadmap.sh/terraform)
- [Data Analyst Roadmap](https://roadmap.sh/data-analyst)

@ -0,0 +1,181 @@
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import type { Edge, Node } from 'reactflow';
import matter from 'gray-matter';
import type { RoadmapFrontmatter } from '../src/lib/roadmap';
import { slugify } from '../src/lib/slugger';
import { runPromisesInBatchSequentially } from '../src/lib/promise';
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { generateText } from 'ai';
// ERROR: `__dirname` is not defined in ES module scope
// https://iamwebwiz.medium.com/how-to-fix-dirname-is-not-defined-in-es-module-scope-34d94a86694d
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Usage: tsx ./scripts/editor-roadmap-content.ts <roadmapId>
const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
console.log('GEMINI_API_KEY:', GEMINI_API_KEY);
const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');
const roadmapId = process.argv[2];
const google = createGoogleGenerativeAI({
apiKey: process.env.GEMINI_API_KEY,
});
const allowedRoadmapIds = await fs.readdir(ROADMAP_CONTENT_DIR);
if (!roadmapId) {
console.error('Roadmap Id is required');
process.exit(1);
}
if (!allowedRoadmapIds.includes(roadmapId)) {
console.error(`Invalid roadmap key ${roadmapId}`);
console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);
process.exit(1);
}
const roadmapFrontmatterDir = path.join(
ROADMAP_CONTENT_DIR,
roadmapId,
`${roadmapId}.md`,
);
const roadmapFrontmatterRaw = await fs.readFile(roadmapFrontmatterDir, 'utf-8');
const { data } = matter(roadmapFrontmatterRaw);
const roadmapFrontmatter = data as RoadmapFrontmatter;
if (!roadmapFrontmatter) {
console.error('Invalid roadmap frontmatter');
process.exit(1);
}
if (roadmapFrontmatter.renderer !== 'editor') {
console.error('Only Editor Rendered Roadmaps are allowed');
process.exit(1);
}
const roadmapDir = path.join(
ROADMAP_CONTENT_DIR,
roadmapId,
`${roadmapId}.json`,
);
const roadmapContent = await fs.readFile(roadmapDir, 'utf-8');
let { nodes, edges } = JSON.parse(roadmapContent) as {
nodes: Node[];
edges: Edge[];
};
const enrichedNodes = nodes
.filter(
(node) =>
node?.type &&
['topic', 'subtopic'].includes(node.type) &&
node.data?.label,
)
.map((node) => {
// Because we only need the parent id and title for subtopics
if (node.type !== 'subtopic') {
return node;
}
const parentNodeId =
edges.find((edge) => edge.target === node.id)?.source || '';
const parentNode = nodes.find((n) => n.id === parentNodeId);
return {
...node,
parentId: parentNodeId,
parentTitle: parentNode?.data?.label || '',
};
}) as (Node & { parentId?: string; parentTitle?: string })[];
const roadmapContentDir = path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content');
const stats = await fs.stat(roadmapContentDir).catch(() => null);
if (!stats || !stats.isDirectory()) {
await fs.mkdir(roadmapContentDir, { recursive: true });
}
function writeTopicContent(
roadmapTitle: string,
childTopic: string,
parentTopic?: string,
) {
const updatedTitle = roadmapTitle.replace('Roadmap', '').trim().replace('Developer', '');
let prompt = `I will give you a topic and you need to write a brief introduction for that in "${roadmapTitle}". Your format should be as follows and be in strictly markdown format:
# (Put a heading for the topic without adding parent "Subtopic in Topic" or "Topic in Roadmap" or "Subtopic under XYZ" etc.)
(Briefly explain the topic in one paragraph using simple english. Don't start with explaining how important the topic is with regard to "${roadmapTitle}". Don't say something along the lines of "XYZ plays a crucial role in ${roadmapTitle}". Don't include anything saying "In the context of ${roadmapTitle}". Instead, start with a simple explanation of the topic itself. For example, if the topic is "React", you can start with "React is a JavaScript library for building user interfaces."".)
`;
if (!parentTopic) {
prompt += `First topic is: ${childTopic}`;
} else {
prompt += `First topic is: "${parentTopic} > ${childTopic}"`;
}
return new Promise((resolve, reject) => {
generateText({
model: google('gemini-2.0-flash'),
prompt: prompt,
providerOptions: {
}
})
.then((response) => {
const article = response.text;
resolve(article);
})
.catch((err) => {
reject(err);
});
});
}
async function writeNodeContent(node: Node & { parentTitle?: string }) {
const nodeDirPattern = `${slugify(node.data.label)}@${node.id}.md`;
if (!roadmapContentFiles.includes(nodeDirPattern)) {
console.log(`Missing file for: ${nodeDirPattern}`);
return;
}
const nodeDir = path.join(roadmapContentDir, nodeDirPattern);
const nodeContent = await fs.readFile(nodeDir, 'utf-8');
const isFileEmpty = !nodeContent.replace(`# ${node.data.label}`, '').trim();
if (!isFileEmpty) {
console.log(`❌ Ignoring ${nodeDirPattern}. Not empty.`);
return;
}
const topic = node.data.label;
const parentTopic = node.parentTitle;
console.log(`⏳ Generating content for ${topic}...`);
let newContentFile = '';
if (GEMINI_API_KEY) {
newContentFile = (await writeTopicContent(
roadmapFrontmatter.title,
topic,
parentTopic,
)) as string;
} else {
newContentFile = `# ${topic}`;
}
await fs.writeFile(nodeDir, newContentFile, 'utf-8');
console.log(`✅ Content generated for ${topic}`);
}
let roadmapContentFiles = await fs.readdir(roadmapContentDir, {
recursive: true,
});
if (!GEMINI_API_KEY) {
console.log('----------------------------------------');
console.log('GEMINI_API_KEY not found. Skipping gemini api calls...');
console.log('----------------------------------------');
}
const promises = enrichedNodes.map((node) => () => writeNodeContent(node));
await runPromisesInBatchSequentially(promises, 20);
console.log('✅ All content generated');

@ -18,3 +18,16 @@ export function aiRoadmapApi(context: APIContext) {
},
};
}
export interface AICourseDocument {
_id: string;
userId: string;
title: string;
slug?: string;
keyword: string;
difficulty: string;
data: string;
viewCount: number;
createdAt: Date;
updatedAt: Date;
}

@ -27,7 +27,7 @@ const sidebarLinks = [
href: '/account/update-profile',
title: 'Profile',
id: 'profile',
isNew: true,
isNew: false,
icon: {
glyph: 'user',
classes: 'h-4 w-4',
@ -56,7 +56,7 @@ const sidebarLinks = [
},
{
href: '/account/road-card',
title: 'Card',
title: 'Road Card',
id: 'road-card',
isNew: false,
icon: {
@ -64,6 +64,16 @@ const sidebarLinks = [
classes: 'h-4 w-4',
},
},
{
href: '/account/billing',
title: 'Billing',
id: 'billing',
isNew: true,
icon: {
glyph: 'credit-card',
classes: 'h-4 w-4',
},
},
{
href: '/account/settings',
title: 'Settings',
@ -97,7 +107,7 @@ const sidebarLinks = [
}`}
>
<AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
Teams
Teams
</a>
</li>
{

@ -1,5 +1,4 @@
import { getUser } from '../../lib/jwt';
import { getPercentage } from '../../helper/number';
import { ProjectProgressActions } from './ProjectProgressActions';
import { cn } from '../../lib/classname';
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';

@ -1,7 +1,7 @@
import { getUser } from '../../lib/jwt';
import { getPercentage } from '../../helper/number';
import { ResourceProgressActions } from './ResourceProgressActions';
import { cn } from '../../lib/classname';
import { getPercentage } from '../../lib/number';
type ResourceProgressType = {
resourceType: 'roadmap' | 'best-practice';

@ -86,9 +86,6 @@ export function AdvertiseForm() {
pageProgressMessage.set('Please wait');
// Placeholder function to send data
console.log('Form data:', formData);
const { response, error } = await httpPost(
`${import.meta.env.PUBLIC_API_URL}/v1-advertise`,
formData,

@ -0,0 +1,14 @@
<script type='text/javascript'>
(function (c, l, a, r, i, t, y) {
c[a] =
c[a] ||
function () {
(c[a].q = c[a].q || []).push(arguments);
};
t = l.createElement(r);
t.async = 1;
t.src = 'https://www.clarity.ms/tag/' + i;
y = l.getElementsByTagName(r)[0];
y.parentNode.insertBefore(t, y);
})(window, document, 'clarity', 'script', 'qcw723i36o');
</script>

@ -0,0 +1,114 @@
---
const page = Astro.url;
---
<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'
></script>
<script async>
const ignoredPages = [
'login',
'signup',
'roadmaps',
'best-practices',
'guides',
'videos',
'roadmaps',
'community',
'start-here',
'ai',
'ai-tutor',
'teams',
'about',
'account',
'projects',
'questions',
'guides',
'advertise',
];
function sanitizeSettingValue(value) {
return (
String(value)
.trim()
// Remove characters forbidden at https://support.google.com/admanager/answer/10020177.
.replace(/'|\\|'|=|!|#|\*|~|;|\^|\(|\)|<|>|\[|\]|,|&/g, '')
// Extra spaces aren't forbidden, but rarely desired.
.replace(/\s+/, ' ')
// The + sign is also forbidden, but is being replaced with 'and' instead.
.replace('+', 'and')
// Maximum length of 40 for values.
.substring(0, 40)
);
}
const page = window.location.pathname;
const pageParts = page.split('/').filter(Boolean);
const isRoadmapPage =
pageParts.length === 1 && !ignoredPages.includes(pageParts[0]);
const isBestPracticesPage =
pageParts.length === 2 && pageParts[0] === 'best-practices';
let adSettings = {};
if (isRoadmapPage) {
adSettings = {
post_id: sanitizeSettingValue(pageParts[0]),
page_type: 'roadmap',
category: ['roadmap', sanitizeSettingValue(pageParts[0])],
};
} else if (isBestPracticesPage) {
adSettings = {
post_id: sanitizeSettingValue(pageParts[1]),
page_type: 'best-practice',
category: ['best-practice', sanitizeSettingValue(pageParts[1])],
};
}
// @ts-nocheck
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function () {
// Always use non-personalized ads
googletag.pubads().setPrivacySettings({
restrictDataProcessing: true,
nonPersonalizedAds: true,
});
// Define ad slot and enable services
googletag
.defineSlot(
'/22873384501/roadmap',
['fluid'],
'div-gpt-ad-1742391132948-0',
)
.addService(googletag.pubads());
// Set targeting for all ad slots on the page.
for (let key in adSettings) {
if (adSettings.hasOwnProperty(key)) {
googletag.pubads().setTargeting(key, adSettings[key]);
}
}
googletag.pubads().enableSingleRequest();
googletag.enableServices();
googletag.pubads().addEventListener('slotRenderEnded', function (e) {
if (!e.isEmpty) {
return;
}
const slotId = e.slot.getSlotElementId();
if (!slotId) {
return;
}
// If empty, hide the ad slot after a small delay.
setTimeout(() => {
const adContainer = document.getElementById(slotId);
if (adContainer) {
adContainer.style.display = 'none';
}
}, 1800);
});
});
</script>

@ -0,0 +1,59 @@
<div
id='div-gpt-ad-1742391132948-0'
class='gam-slot fixed bottom-4 right-4 z-50 h-[160px] w-[350px] cursor-pointer max-md:bottom-0 max-md:right-0 max-md:h-[106px] max-md:w-full'
>
<script>
// @ts-nocheck
googletag.cmd.push(function () {
if (!googletag.pubads) {
console.log('googletag.pubads not found');
return;
}
// Configure all ad slots on the page to be expanded by default, but
// collapse slots that are unable to be filled with an ad.
googletag.pubads().collapseEmptyDivs();
// Set non-personalized ads
googletag.pubads().setPrivacySettings({
restrictDataProcessing: true,
nonPersonalizedAds: true,
});
googletag.display('div-gpt-ad-1742391132948-0');
});
</script>
</div>
<script>
const nativeAds: Window[] = [];
function sendSize(iframe: Window) {
const breakpoint = window.innerWidth < 768 ? 'sm' : 'lg';
iframe.postMessage(`breakpoint:${breakpoint}`, '*');
}
window.addEventListener(
'resize',
() => {
nativeAds.forEach((ad) => {
sendSize(ad);
});
},
{
passive: true,
},
);
window.addEventListener('message', function (e: MessageEvent<any>) {
if (e.data === 'initdfp') {
nativeAds.push(e.source as Window);
sendSize(e.source as Window);
} else if (e.data === 'close-ad') {
const ad = document.getElementById('div-gpt-ad-1742391132948-0');
if (ad) {
ad.remove();
}
}
});
</script>

@ -0,0 +1,19 @@
<script>
// @ts-nocheck
!(function (w, d) {
if (!w.rdt) {
var p = (w.rdt = function () {
p.sendEvent
? p.sendEvent.apply(p, arguments)
: p.callQueue.push(arguments);
});
p.callQueue = [];
var t = d.createElement('script');
(t.src = 'https://www.redditstatic.com/ads/pixel.js'), (t.async = !0);
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
}
})(window, document);
rdt('init', 'a2_ghq8846qpphp');
rdt('track', 'PageVisit');
</script>

@ -6,6 +6,7 @@ declare global {
category: string;
label?: string;
value?: string;
callback?: () => void;
}) => void;
}
}
@ -17,7 +18,7 @@ declare global {
* @returns void
*/
window.fireEvent = (props) => {
const { action, category, label, value } = props;
const { action, category, label, value, callback } = props;
if (!window.gtag) {
console.warn('Missing GTAG - Analytics disabled');
return;
@ -25,11 +26,16 @@ window.fireEvent = (props) => {
if (import.meta.env.DEV) {
console.log('Analytics event fired', props);
callback?.();
return;
}
window.gtag('event', action, {
event_category: category,
event_label: label,
value: value,
...(callback ? { event_callback: callback } : {}),
});
};
export {};

@ -1,6 +1,5 @@
---
import { parse } from 'node-html-parser';
import type { Attributes } from 'node-html-parser/dist/nodes/html';
export interface Props {
icon: string;
@ -15,7 +14,6 @@ async function getSVG(name: string) {
eager: true,
});
if (!(filepath in files)) {
throw new Error(`${filepath} not found`);
}

@ -0,0 +1,143 @@
import { useEffect, useState } from 'react';
import { Modal } from '../Modal';
import { GitHubButton } from './GitHubButton';
import { GoogleButton } from './GoogleButton';
import { LinkedInButton } from './LinkedInButton';
import { EmailLoginForm } from './EmailLoginForm';
import { EmailSignupForm } from './EmailSignupForm';
type CourseLoginPopupProps = {
onClose: () => void;
checkoutAfterLogin?: boolean;
};
export const CHECKOUT_AFTER_LOGIN_KEY = 'checkoutAfterLogin';
export function CourseLoginPopup(props: CourseLoginPopupProps) {
const { onClose: parentOnClose, checkoutAfterLogin = true } = props;
const [isDisabled, setIsDisabled] = useState(false);
const [isUsingEmail, setIsUsingEmail] = useState(false);
const [emailNature, setEmailNature] = useState<'login' | 'signup' | null>(
null,
);
function onClose() {
// if user didn't login and closed the popup, we remove the checkoutAfterLogin flag
// so that login from other buttons on course page will trigger purchase
localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);
parentOnClose();
}
useEffect(() => {
localStorage.setItem(
CHECKOUT_AFTER_LOGIN_KEY,
checkoutAfterLogin ? '1' : '0',
);
}, [checkoutAfterLogin]);
if (emailNature) {
const emailHeader = (
<div className="mb-7 text-center">
<p className="mb-3.5 pt-2 text-2xl font-semibold leading-5 text-slate-900">
{emailNature === 'login'
? 'Login to your account'
: 'Create an account'}
</p>
<p className="mt-2 text-sm leading-4 text-slate-600">
Fill in the details below to continue
</p>
</div>
);
return (
<Modal onClose={onClose} bodyClassName="p-5 h-auto">
{emailHeader}
{emailNature === 'login' && (
<EmailLoginForm
isDisabled={isDisabled}
setIsDisabled={setIsDisabled}
/>
)}
{emailNature === 'signup' && (
<EmailSignupForm
isDisabled={isDisabled}
setIsDisabled={setIsDisabled}
/>
)}
<button
className="mt-2 w-full rounded-md border border-gray-400 py-2 text-center text-sm text-gray-600 hover:bg-gray-100"
onClick={() => setEmailNature(null)}
>
Back to Options
</button>
</Modal>
);
}
return (
<Modal onClose={onClose} bodyClassName="p-5 h-auto">
<div className="mb-7 text-center">
<p className="mb-3.5 pt-2 text-2xl font-semibold leading-5 text-slate-900">
Create or login to your account
</p>
<p className="mt-2 text-sm leading-4 text-slate-600">
Login or sign up for an account to start learning
</p>
</div>
<div className="flex w-full flex-col gap-2">
<GitHubButton
className="rounded-md border-gray-400 hover:bg-gray-100"
isDisabled={isDisabled}
setIsDisabled={setIsDisabled}
/>
<GoogleButton
className="rounded-md border-gray-400 hover:bg-gray-100"
isDisabled={isDisabled}
setIsDisabled={setIsDisabled}
/>
<LinkedInButton
className="rounded-md border-gray-400 hover:bg-gray-100"
isDisabled={isDisabled}
setIsDisabled={setIsDisabled}
/>
</div>
<div className="flex w-full items-center gap-4 py-6 text-sm text-gray-600">
<div className="h-px w-full bg-gray-200" />
OR
<div className="h-px w-full bg-gray-200" />
</div>
<div className="flex flex-row gap-2">
{!isUsingEmail && (
<button
className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
onClick={() => setIsUsingEmail(true)}
>
Use your email address
</button>
)}
{isUsingEmail && (
<>
<button
className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
onClick={() => setEmailNature('login')}
>
Already have an account
</button>
<button
className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
onClick={() => setEmailNature('signup')}
>
Create an account
</button>
</>
)}
</div>
</Modal>
);
}

@ -2,7 +2,7 @@ import Cookies from 'js-cookie';
import type { FormEvent } from 'react';
import { useId, useState } from 'react';
import { httpPost } from '../../lib/http';
import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
import { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';
type EmailLoginFormProps = {
isDisabled?: boolean;
@ -24,19 +24,22 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
setIsDisabled?.(true);
setError('');
const { response, error } = await httpPost<{ token: string }>(
`${import.meta.env.PUBLIC_API_URL}/v1-login`,
{
email,
password,
},
);
const { response, error } = await httpPost<{
token: string;
isNewUser: boolean;
}>(`${import.meta.env.PUBLIC_API_URL}/v1-login`, {
email,
password,
});
// Log the user in and reload the page
if (response?.token) {
setAuthToken(response.token);
window.location.reload();
const currentLocation = window.location.href;
const url = new URL(currentLocation, window.location.origin);
url.searchParams.set(FIRST_LOGIN_PARAM, response?.isNewUser ? '1' : '0');
window.location.href = url.toString();
return;
}

@ -1,21 +1,27 @@
import { useEffect, useState } from 'react';
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
import {
FIRST_LOGIN_PARAM,
COURSE_PURCHASE_PARAM,
setAuthToken,
} from '../../lib/jwt';
import { cn } from '../../lib/classname.ts';
import { httpGet } from '../../lib/http';
import { Spinner } from '../ReactIcons/Spinner.tsx';
import { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';
import { triggerUtmRegistration } from '../../lib/browser.ts';
type GitHubButtonProps = {
isDisabled?: boolean;
setIsDisabled?: (isDisabled: boolean) => void;
className?: string;
};
const GITHUB_REDIRECT_AT = 'githubRedirectAt';
const GITHUB_LAST_PAGE = 'githubLastPage';
export function GitHubButton(props: GitHubButtonProps) {
const { isDisabled, setIsDisabled } = props;
const { isDisabled, setIsDisabled, className } = props;
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
@ -32,7 +38,7 @@ export function GitHubButton(props: GitHubButtonProps) {
setIsLoading(true);
setIsDisabled?.(true);
httpGet<{ token: string }>(
httpGet<{ token: string; isNewUser: boolean }>(
`${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
window.location.search
}`,
@ -49,7 +55,7 @@ export function GitHubButton(props: GitHubButtonProps) {
triggerUtmRegistration();
let redirectUrl = '/';
let redirectUrl = new URL('/', window.location.origin);
const gitHubRedirectAt = localStorage.getItem(GITHUB_REDIRECT_AT);
const lastPageBeforeGithub = localStorage.getItem(GITHUB_LAST_PAGE);
@ -61,20 +67,37 @@ export function GitHubButton(props: GitHubButtonProps) {
const timeSinceRedirect = now - socialRedirectAtTime;
if (timeSinceRedirect < 30 * 1000) {
redirectUrl = lastPageBeforeGithub;
redirectUrl = new URL(lastPageBeforeGithub, window.location.origin);
}
}
const authRedirectUrl = localStorage.getItem('authRedirect');
if (authRedirectUrl) {
localStorage.removeItem('authRedirect');
redirectUrl = authRedirectUrl;
redirectUrl = new URL(authRedirectUrl, window.location.origin);
}
localStorage.removeItem(GITHUB_REDIRECT_AT);
localStorage.removeItem(GITHUB_LAST_PAGE);
setAuthToken(response.token);
window.location.href = redirectUrl;
redirectUrl.searchParams.set(
FIRST_LOGIN_PARAM,
response?.isNewUser ? '1' : '0',
);
const shouldTriggerPurchase =
localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';
if (
redirectUrl.pathname.includes('/courses/sql') &&
shouldTriggerPurchase
) {
redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');
localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);
}
window.location.href = redirectUrl.toString();
})
.catch((err) => {
setError('Something went wrong. Please try again later.');
@ -120,7 +143,10 @@ export function GitHubButton(props: GitHubButtonProps) {
return (
<>
<button
className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
className={cn(
'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
className,
)}
disabled={isLoading || isDisabled}
onClick={handleClick}
>

@ -1,24 +1,32 @@
import { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
import {
FIRST_LOGIN_PARAM,
TOKEN_COOKIE_NAME,
setAuthToken,
} from '../../lib/jwt';
import { httpGet } from '../../lib/http';
import { Spinner } from '../ReactIcons/Spinner.tsx';
import { COURSE_PURCHASE_PARAM } from '../../lib/jwt';
import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
import { Spinner } from '../ReactIcons/Spinner.tsx';
import { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';
import {
getStoredUtmParams,
triggerUtmRegistration,
} from '../../lib/browser.ts';
import { cn } from '../../lib/classname.ts';
type GoogleButtonProps = {
isDisabled?: boolean;
setIsDisabled?: (isDisabled: boolean) => void;
className?: string;
};
const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
const GOOGLE_LAST_PAGE = 'googleLastPage';
export function GoogleButton(props: GoogleButtonProps) {
const { isDisabled, setIsDisabled } = props;
const { isDisabled, setIsDisabled, className } = props;
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
@ -35,14 +43,12 @@ export function GoogleButton(props: GoogleButtonProps) {
setIsLoading(true);
setIsDisabled?.(true);
httpGet<{ token: string }>(
httpGet<{ token: string; isNewUser: boolean }>(
`${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
window.location.search
}`,
)
.then(({ response, error }) => {
const utmParams = getStoredUtmParams();
if (!response?.token) {
setError(error?.message || 'Something went wrong.');
setIsLoading(false);
@ -53,7 +59,7 @@ export function GoogleButton(props: GoogleButtonProps) {
triggerUtmRegistration();
let redirectUrl = '/';
let redirectUrl = new URL('/', window.location.origin);
const googleRedirectAt = localStorage.getItem(GOOGLE_REDIRECT_AT);
const lastPageBeforeGoogle = localStorage.getItem(GOOGLE_LAST_PAGE);
@ -65,20 +71,37 @@ export function GoogleButton(props: GoogleButtonProps) {
const timeSinceRedirect = now - socialRedirectAtTime;
if (timeSinceRedirect < 30 * 1000) {
redirectUrl = lastPageBeforeGoogle;
redirectUrl = new URL(lastPageBeforeGoogle, window.location.origin);
}
}
const authRedirectUrl = localStorage.getItem('authRedirect');
if (authRedirectUrl) {
localStorage.removeItem('authRedirect');
redirectUrl = authRedirectUrl;
redirectUrl = new URL(authRedirectUrl, window.location.origin);
}
redirectUrl.searchParams.set(
FIRST_LOGIN_PARAM,
response?.isNewUser ? '1' : '0',
);
const shouldTriggerPurchase =
localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';
if (
redirectUrl.pathname.includes('/courses/sql') &&
shouldTriggerPurchase
) {
redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');
localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);
}
localStorage.removeItem(GOOGLE_REDIRECT_AT);
localStorage.removeItem(GOOGLE_LAST_PAGE);
setAuthToken(response.token);
window.location.href = redirectUrl;
window.location.href = redirectUrl.toString();
})
.catch((err) => {
setError('Something went wrong. Please try again later.');
@ -130,7 +153,10 @@ export function GoogleButton(props: GoogleButtonProps) {
return (
<>
<button
className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
className={cn(
'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
className,
)}
disabled={isLoading || isDisabled}
onClick={handleClick}
>

@ -1,21 +1,29 @@
import { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
import {
FIRST_LOGIN_PARAM,
COURSE_PURCHASE_PARAM,
TOKEN_COOKIE_NAME,
setAuthToken,
} from '../../lib/jwt';
import { cn } from '../../lib/classname.ts';
import { httpGet } from '../../lib/http';
import { Spinner } from '../ReactIcons/Spinner.tsx';
import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
import { Spinner } from '../ReactIcons/Spinner.tsx';
import { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';
import { triggerUtmRegistration } from '../../lib/browser.ts';
type LinkedInButtonProps = {
isDisabled?: boolean;
setIsDisabled?: (isDisabled: boolean) => void;
className?: string;
};
const LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';
const LINKEDIN_LAST_PAGE = 'linkedInLastPage';
export function LinkedInButton(props: LinkedInButtonProps) {
const { isDisabled, setIsDisabled } = props;
const { isDisabled, setIsDisabled, className } = props;
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
@ -32,7 +40,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
setIsLoading(true);
setIsDisabled?.(true);
httpGet<{ token: string }>(
httpGet<{ token: string; isNewUser: boolean }>(
`${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
window.location.search
}`,
@ -48,7 +56,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
triggerUtmRegistration();
let redirectUrl = '/';
let redirectUrl = new URL('/', window.location.origin);
const linkedInRedirectAt = localStorage.getItem(LINKEDIN_REDIRECT_AT);
const lastPageBeforeLinkedIn = localStorage.getItem(LINKEDIN_LAST_PAGE);
@ -60,20 +68,39 @@ export function LinkedInButton(props: LinkedInButtonProps) {
const timeSinceRedirect = now - socialRedirectAtTime;
if (timeSinceRedirect < 30 * 1000) {
redirectUrl = lastPageBeforeLinkedIn;
redirectUrl = new URL(
lastPageBeforeLinkedIn,
window.location.origin,
);
}
}
const authRedirectUrl = localStorage.getItem('authRedirect');
if (authRedirectUrl) {
localStorage.removeItem('authRedirect');
redirectUrl = authRedirectUrl;
redirectUrl = new URL(authRedirectUrl, window.location.origin);
}
redirectUrl.searchParams.set(
FIRST_LOGIN_PARAM,
response?.isNewUser ? '1' : '0',
);
const shouldTriggerPurchase =
localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';
if (
redirectUrl.pathname.includes('/courses/sql') &&
shouldTriggerPurchase
) {
redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');
localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);
}
localStorage.removeItem(LINKEDIN_REDIRECT_AT);
localStorage.removeItem(LINKEDIN_LAST_PAGE);
setAuthToken(response.token);
window.location.href = redirectUrl;
window.location.href = redirectUrl.toString();
})
.catch((err) => {
setError('Something went wrong. Please try again later.');
@ -125,14 +152,17 @@ export function LinkedInButton(props: LinkedInButtonProps) {
return (
<>
<button
className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
className={cn(
'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
className,
)}
disabled={isLoading || isDisabled}
onClick={handleClick}
>
{isLoading ? (
<Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
) : (
<LinkedInIcon className={'h-[18px] w-[18px]'} />
<LinkedInIcon className={'h-[18px] w-[18px] text-blue-700'} />
)}
Continue with LinkedIn
</button>

@ -7,7 +7,7 @@ import { AuthenticationForm } from './AuthenticationForm';
<Popup id='login-popup' title='' subtitle=''>
<div class='mb-7 text-center'>
<p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
Login to your account
Login or Signup
</p>
<p class='mt-2 text-sm leading-4 text-slate-600'>
You must be logged in to perform this action.

@ -1,7 +1,11 @@
import { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { httpPost } from '../../lib/http';
import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
import {
FIRST_LOGIN_PARAM,
TOKEN_COOKIE_NAME,
setAuthToken,
} from '../../lib/jwt';
import { Spinner } from '../ReactIcons/Spinner';
import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
import { triggerUtmRegistration } from '../../lib/browser.ts';
@ -13,7 +17,7 @@ export function TriggerVerifyAccount() {
const triggerVerify = (code: string) => {
setIsLoading(true);
httpPost<{ token: string }>(
httpPost<{ token: string; isNewUser: boolean }>(
`${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,
{
code,
@ -30,7 +34,13 @@ export function TriggerVerifyAccount() {
triggerUtmRegistration();
setAuthToken(response.token);
window.location.href = '/';
const url = new URL('/', window.location.origin);
url.searchParams.set(
FIRST_LOGIN_PARAM,
response?.isNewUser ? '1' : '0',
);
window.location.href = url.toString();
})
.catch((err) => {
setIsLoading(false);

@ -0,0 +1,226 @@
import { useEffect, useState } from 'react';
import { pageProgressMessage } from '../../stores/page';
import { useToast } from '../../hooks/use-toast';
import { useMutation, useQuery } from '@tanstack/react-query';
import {
billingDetailsOptions,
USER_SUBSCRIPTION_PLAN_PRICES,
} from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
import { httpPost } from '../../lib/query-http';
import { UpgradeAccountModal } from './UpgradeAccountModal';
import { getUrlParams } from '../../lib/browser';
import { VerifyUpgrade } from './VerifyUpgrade';
import { EmptyBillingScreen } from './EmptyBillingScreen';
import {
Calendar,
RefreshCw,
Loader2,
CreditCard,
ArrowRightLeft,
CircleX,
} from 'lucide-react';
import { BillingWarning } from './BillingWarning';
export type CreateCustomerPortalBody = {};
export type CreateCustomerPortalResponse = {
url: string;
};
export function BillingPage() {
const toast = useToast();
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
const [showVerifyUpgradeModal, setShowVerifyUpgradeModal] = useState(false);
const { data: billingDetails, isPending: isLoadingBillingDetails } = useQuery(
billingDetailsOptions(),
queryClient,
);
const isCanceled =
billingDetails?.status === 'canceled' || billingDetails?.cancelAtPeriodEnd;
const isPastDue = billingDetails?.status === 'past_due';
const {
mutate: createCustomerPortal,
isSuccess: isCreatingCustomerPortalSuccess,
isPending: isCreatingCustomerPortal,
} = useMutation(
{
mutationFn: (body: CreateCustomerPortalBody) => {
return httpPost<CreateCustomerPortalResponse>(
'/v1-create-customer-portal',
body,
);
},
onSuccess: (data) => {
window.location.href = data.url;
},
onError: (error) => {
console.error(error);
toast.error(error?.message || 'Failed to Create Customer Portal');
},
},
queryClient,
);
useEffect(() => {
if (isLoadingBillingDetails) {
return;
}
pageProgressMessage.set('');
const shouldVerifyUpgrade = getUrlParams()?.s === '1';
if (shouldVerifyUpgrade) {
setShowVerifyUpgradeModal(true);
}
}, [isLoadingBillingDetails]);
if (isLoadingBillingDetails || !billingDetails) {
return null;
}
const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(
(plan) => plan.priceId === billingDetails?.priceId,
);
const priceDetails = selectedPlanDetails;
const formattedNextBillDate = new Date(
billingDetails?.currentPeriodEnd || '',
).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
return (
<>
{showUpgradeModal && (
<UpgradeAccountModal
onClose={() => {
setShowUpgradeModal(false);
}}
success="/account/billing?s=1"
cancel="/account/billing"
/>
)}
{showVerifyUpgradeModal && <VerifyUpgrade />}
{billingDetails?.status === 'none' && !isLoadingBillingDetails && (
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
)}
{billingDetails?.status !== 'none' &&
!isLoadingBillingDetails &&
priceDetails && (
<div className="mt-1">
{isCanceled && (
<BillingWarning
icon={CircleX}
message="Your subscription has been canceled."
buttonText="Reactivate?"
onButtonClick={() => {
createCustomerPortal({});
}}
isLoading={
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
}
/>
)}
{isPastDue && (
<BillingWarning
message="We were not able to charge your card."
buttonText="Update payment information."
onButtonClick={() => {
createCustomerPortal({});
}}
isLoading={
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
}
/>
)}
<h2 className="mb-2 text-xl font-semibold text-black">
Current Subscription
</h2>
<p className="text-sm text-gray-500">
Thank you for being a pro member. Your plan details are below.
</p>
<div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<RefreshCw className="size-5 text-gray-600" />
</div>
<div>
<span className="text-xs uppercase tracking-wider text-gray-400">
Payment
</span>
<h3 className="flex items-baseline text-lg font-semibold text-black">
${priceDetails.amount}
<span className="ml-1 text-sm font-normal text-gray-500">
/ {priceDetails.interval}
</span>
</h3>
</div>
</div>
</div>
<div className="mt-6 border-t border-gray-100 pt-6">
<div className="flex items-start gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<Calendar className="size-5 text-gray-600" />
</div>
<div>
<span className="text-xs uppercase tracking-wider text-gray-400">
{billingDetails?.cancelAtPeriodEnd
? 'Expires On'
: 'Renews On'}
</span>
<h3 className="text-lg font-semibold text-black">
{formattedNextBillDate}
</h3>
</div>
</div>
<div className="mt-8 flex gap-3 max-sm:flex-col">
{!isCanceled && (
<button
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 max-sm:flex-grow"
onClick={() => {
setShowUpgradeModal(true);
}}
>
<ArrowRightLeft className="mr-2 h-4 w-4" />
Switch Plan
</button>
)}
<button
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => {
createCustomerPortal({});
}}
disabled={
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
}
>
{isCreatingCustomerPortal ||
isCreatingCustomerPortalSuccess ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<CreditCard className="mr-2 h-4 w-4" />
)}
Manage Subscription
</button>
</div>
</div>
</div>
)}
</>
);
}

@ -0,0 +1,39 @@
import { AlertTriangle, type LucideIcon } from 'lucide-react';
export type BillingWarningProps = {
icon?: LucideIcon;
message: string;
onButtonClick?: () => void;
buttonText?: string;
isLoading?: boolean;
};
export function BillingWarning(props: BillingWarningProps) {
const {
message,
onButtonClick,
buttonText,
isLoading,
icon: Icon = AlertTriangle,
} = props;
return (
<div className="mb-6 flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-600">
<Icon className="h-5 w-5" />
<span>
{message}
{buttonText && (
<button
disabled={isLoading}
onClick={() => {
onButtonClick?.();
}}
className="font-semibold underline underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50 ml-0.5"
>
{buttonText}
</button>
)}
</span>
</div>
);
}

@ -0,0 +1,22 @@
import { useEffect, useState } from 'react';
import { getUrlParams } from '../../lib/browser';
import { VerifyUpgrade } from "./VerifyUpgrade";
export function CheckSubscriptionVerification() {
const [shouldVerifyUpgrade, setShouldVerifyUpgrade] = useState(false);
useEffect(() => {
const params = getUrlParams();
if (params.s !== '1') {
return;
}
setShouldVerifyUpgrade(true);
}, []);
if (!shouldVerifyUpgrade) {
return null;
}
return <VerifyUpgrade />;
}

@ -0,0 +1,68 @@
import {
CreditCard,
Ellipsis,
HeartHandshake,
MessageCircleIcon,
SparklesIcon,
Zap,
} from 'lucide-react';
type EmptyBillingScreenProps = {
onUpgrade: () => void;
};
const perks = [
{
icon: Zap,
text: 'Unlimited AI course generations',
},
{
icon: MessageCircleIcon,
text: 'Unlimited AI Chat feature usage',
},
{
icon: SparklesIcon,
text: 'Early access to new features',
},
{
icon: HeartHandshake,
text: 'Support the development of platform',
},
{
icon: Ellipsis,
text: 'more perks coming soon!',
},
];
export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
const { onUpgrade } = props;
return (
<div className="mt-12 flex h-full w-full flex-col items-center">
<CreditCard className="mb-3 h-12 w-12 text-gray-300" />
<h3 className="mb-3 text-xl font-semibold text-black">
No Active Subscription
</h3>
<p className="text-balance text-gray-700">
Unlock pro benefits by upgrading to a subscription
</p>
<div className="my-8 flex flex-col gap-2">
{perks.map((perk) => (
<p className="textsm flex items-center text-gray-600" key={perk.text}>
<perk.icon className="mr-2 h-4 w-4 text-gray-500" />
{perk.text}
</p>
))}
</div>
<button
onClick={onUpgrade}
className="inline-flex items-center justify-center rounded-lg bg-black px-6 py-2.5 text-sm font-medium text-white transition-colors hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
>
Upgrade Account
</button>
</div>
);
}

@ -0,0 +1,96 @@
import { useMutation } from '@tanstack/react-query';
import type { USER_SUBSCRIPTION_PLAN_PRICES } from '../../queries/billing';
import { Modal } from '../Modal';
import { queryClient } from '../../stores/query-client';
import { useToast } from '../../hooks/use-toast';
import { VerifyUpgrade } from './VerifyUpgrade';
import { Loader2Icon } from 'lucide-react';
import { httpPost } from '../../lib/query-http';
type UpdatePlanBody = {
priceId: string;
};
type UpdatePlanResponse = {
status: 'ok';
};
type UpdatePlanConfirmationProps = {
planDetails: (typeof USER_SUBSCRIPTION_PLAN_PRICES)[number];
onClose: () => void;
onCancel: () => void;
};
export function UpdatePlanConfirmation(props: UpdatePlanConfirmationProps) {
const { planDetails, onClose, onCancel } = props;
const toast = useToast();
const {
mutate: updatePlan,
isPending,
status,
} = useMutation(
{
mutationFn: (body: UpdatePlanBody) => {
return httpPost<UpdatePlanResponse>(
'/v1-update-subscription-plan',
body,
);
},
onError: (error) => {
console.error(error);
toast.error(error?.message || 'Failed to Create Customer Portal');
},
},
queryClient,
);
if (!planDetails) {
return null;
}
const selectedPrice = planDetails;
if (status === 'success') {
return <VerifyUpgrade newPriceId={selectedPrice.priceId} />;
}
return (
<Modal
onClose={isPending ? () => {} : onClose}
bodyClassName="rounded-xl bg-white p-6"
>
<h3 className="text-xl font-bold text-black">Subscription Update</h3>
<p className="mt-2 text-balance text-gray-600">
Your plan will be updated to the{' '}
<b className="text-black">{planDetails.interval}</b> plan, and will
be charged{' '}
<b className="text-black">
${selectedPrice.amount}/{selectedPrice.interval}
</b>
.
</p>
<div className="mt-6 grid grid-cols-2 gap-3">
<button
className="rounded-md border border-gray-200 py-2 text-sm font-semibold hover:bg-gray-50 transition-colors disabled:opacity-50"
onClick={onCancel}
disabled={isPending}
>
Cancel
</button>
<button
className="flex items-center justify-center rounded-md bg-purple-600 py-2 text-sm font-semibold text-white hover:bg-purple-500 transition-colors disabled:opacity-50"
disabled={isPending}
onClick={() => {
updatePlan({ priceId: selectedPrice.priceId });
}}
>
{isPending && (
<Loader2Icon className="size-4 animate-spin stroke-[2.5] mr-2" />
)}
{!isPending && 'Confirm'}
</button>
</div>
</Modal>
);
}

@ -0,0 +1,306 @@
import {
Loader2,
Zap,
Infinity,
MessageSquare,
Sparkles,
Heart,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { getUser } from '../../lib/jwt';
import { useMutation, useQuery } from '@tanstack/react-query';
import { Modal } from '../Modal';
import {
billingDetailsOptions,
USER_SUBSCRIPTION_PLAN_PRICES,
type AllowedSubscriptionInterval,
} from '../../queries/billing';
import { cn } from '../../lib/classname';
import { queryClient } from '../../stores/query-client';
import { httpPost } from '../../lib/query-http';
import { useToast } from '../../hooks/use-toast';
import { UpdatePlanConfirmation } from './UpdatePlanConfirmation';
// Define the perk type
type Perk = {
icon: LucideIcon;
title: string;
description: string;
};
// Define the perks array
const PREMIUM_PERKS: Perk[] = [
{
icon: Zap,
title: 'Unlimited AI Course Generations',
description: 'Generate as many custom courses as you need',
},
{
icon: Infinity,
title: 'No Daily Limits on course features',
description: 'Use all features without restrictions',
},
{
icon: MessageSquare,
title: 'Unlimited Course Follow-ups',
description: 'Ask as many questions as you need',
},
{
icon: Sparkles,
title: 'Early Access to Features',
description: 'Be the first to try new tools and features',
},
{
icon: Heart,
title: 'Support Development',
description: 'Help us continue building roadmap.sh',
},
];
type CreateSubscriptionCheckoutSessionBody = {
priceId: string;
success?: string;
cancel?: string;
};
type CreateSubscriptionCheckoutSessionResponse = {
checkoutUrl: string;
};
type UpgradeAccountModalProps = {
onClose: () => void;
success?: string;
cancel?: string;
};
export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
const { onClose, success, cancel } = props;
const [selectedPlan, setSelectedPlan] =
useState<AllowedSubscriptionInterval>('month');
const [isUpdatingPlan, setIsUpdatingPlan] = useState(false);
const user = getUser();
const {
data: userBillingDetails,
isLoading,
error: billingError,
} = useQuery(billingDetailsOptions(), queryClient);
const toast = useToast();
const {
mutate: createCheckoutSession,
isPending: isCreatingCheckoutSession,
} = useMutation(
{
mutationFn: (body: CreateSubscriptionCheckoutSessionBody) => {
return httpPost<CreateSubscriptionCheckoutSessionResponse>(
'/v1-create-subscription-checkout-session',
body,
);
},
onSuccess: (data) => {
window.location.href = data.checkoutUrl;
},
onError: (error) => {
console.error(error);
toast.error(error?.message || 'Failed to create checkout session');
},
},
queryClient,
);
const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(
(plan) => plan.interval === selectedPlan,
);
const currentPlanPriceId = userBillingDetails?.priceId;
const currentPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(
(plan) => plan.priceId === currentPlanPriceId,
);
useEffect(() => {
if (!currentPlan) {
return;
}
setSelectedPlan(currentPlan.interval);
}, [currentPlan]);
if (!user) {
return null;
}
const loader = isLoading ? (
<div className="absolute inset-0 flex h-[540px] w-full items-center justify-center bg-white">
<Loader2 className="h-6 w-6 animate-spin stroke-[3px] text-green-600" />
</div>
) : null;
const error = billingError;
const errorContent = error ? (
<div className="flex h-full w-full flex-col">
<p className="text-center text-red-400">
{error?.message ||
'An error occurred while loading the billing details.'}
</p>
</div>
) : null;
const calculateYearlyPrice = (monthlyPrice: number) => {
return (monthlyPrice * 12).toFixed(2);
};
if (isUpdatingPlan && selectedPlanDetails) {
return (
<UpdatePlanConfirmation
planDetails={selectedPlanDetails}
onClose={() => setIsUpdatingPlan(false)}
onCancel={() => setIsUpdatingPlan(false)}
/>
);
}
return (
<Modal
onClose={onClose}
bodyClassName="p-4 sm:p-6 bg-white"
wrapperClassName="h-auto rounded-xl max-w-3xl w-full min-h-[540px] mx-2 sm:mx-4"
overlayClassName="items-start md:items-center"
>
<div onClick={(e) => e.stopPropagation()}>
{errorContent}
{loader}
{!isLoading && !error && (
<div className="flex flex-col">
<div className="mb-6 text-left sm:mb-8">
<h2 className="text-xl font-bold text-black sm:text-2xl">
Unlock Premium Features
</h2>
<p className="mt-1 text-sm text-gray-600 sm:mt-2 sm:text-base">
Supercharge your learning experience with premium benefits
</p>
</div>
<div className="mb-6 grid grid-cols-1 gap-4 sm:mb-8 sm:gap-6 md:grid-cols-2">
{USER_SUBSCRIPTION_PLAN_PRICES.map((plan) => {
const isCurrentPlanSelected =
currentPlan?.priceId === plan.priceId;
const isYearly = plan.interval === 'year';
return (
<div
key={plan.interval}
className={cn(
'flex flex-col space-y-3 rounded-lg bg-white p-4 sm:space-y-4 sm:p-6',
isYearly
? 'border-2 border-yellow-400'
: 'border border-gray-200',
)}
>
<div className="flex items-start justify-between">
<div>
<h4 className="text-sm font-semibold text-black sm:text-base">
{isYearly ? 'Yearly Payment' : 'Monthly Payment'}
</h4>
{isYearly && (
<span className="text-xs font-medium text-green-500 sm:text-sm">
(2 months free)
</span>
)}
</div>
{isYearly && (
<span className="rounded-full bg-yellow-400 px-1.5 py-0.5 text-xs font-semibold text-black sm:px-2 sm:py-1">
Most Popular
</span>
)}
</div>
<div className="flex items-baseline">
{isYearly && (
<p className="mr-2 text-xs text-gray-400 line-through sm:text-sm">
$
{calculateYearlyPrice(
USER_SUBSCRIPTION_PLAN_PRICES[0].amount,
)}
</p>
)}
<p className="text-2xl font-bold text-black sm:text-3xl">
${plan.amount}{' '}
<span className="text-xs font-normal text-gray-500 sm:text-sm">
/ {isYearly ? 'year' : 'month'}
</span>
</p>
</div>
<div className="flex-grow"></div>
<div>
<button
className={cn(
'flex min-h-9 w-full items-center justify-center rounded-md py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-11 sm:py-2.5 sm:text-base',
'bg-yellow-400 text-black hover:bg-yellow-500',
)}
disabled={
isCurrentPlanSelected || isCreatingCheckoutSession
}
onClick={() => {
setSelectedPlan(plan.interval);
if (!currentPlanPriceId) {
const currentUrlPath = window.location.pathname;
createCheckoutSession({
priceId: plan.priceId,
success: success || `${currentUrlPath}?s=1`,
cancel: cancel || `${currentUrlPath}?s=0`,
});
return;
}
setIsUpdatingPlan(true);
}}
data-1p-ignore=""
data-form-type="other"
data-lpignore="true"
>
{isCreatingCheckoutSession &&
selectedPlan === plan.interval ? (
<Loader2 className="h-3.5 w-3.5 animate-spin sm:h-4 sm:w-4" />
) : isCurrentPlanSelected ? (
'Current Plan'
) : (
'Select Plan'
)}
</button>
</div>
</div>
);
})}
</div>
{/* Benefits Section */}
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2">
{PREMIUM_PERKS.map((perk, index) => {
const Icon = perk.icon;
return (
<div key={index} className="flex items-start space-x-2 sm:space-x-3">
<Icon className="mt-0.5 h-4 w-4 text-yellow-500 sm:h-5 sm:w-5" />
<div>
<h4 className="text-sm font-medium text-black sm:text-base">
{perk.title}
</h4>
<p className="text-xs text-gray-600 sm:text-sm">
{perk.description}
</p>
</div>
</div>
);
})}
</div>
</div>
)}
</div>
</Modal>
);
}

@ -0,0 +1,76 @@
import { useEffect } from 'react';
import { Loader2, CheckCircle } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { billingDetailsOptions } from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
import { Modal } from '../Modal';
import { deleteUrlParam } from '../../lib/browser';
type VerifyUpgradeProps = {
newPriceId?: string;
};
export function VerifyUpgrade(props: VerifyUpgradeProps) {
const { newPriceId } = props;
const { data: userBillingDetails } = useQuery(
{
...billingDetailsOptions(),
refetchInterval: 1000,
},
queryClient,
);
useEffect(() => {
if (!userBillingDetails) {
return;
}
if (
userBillingDetails.status === 'active' &&
(newPriceId ? userBillingDetails.priceId === newPriceId : true)
) {
deleteUrlParam('s');
window.location.reload();
}
}, [userBillingDetails]);
return (
<Modal
// it's an unique modal, so we don't need to close it
// user can close it by refreshing the page
onClose={() => {}}
bodyClassName="rounded-xl bg-white p-6"
>
<div className="mb-4 flex flex-col items-center text-center">
<CheckCircle className="mb-3 h-12 w-12 text-green-600" />
<h3 className="text-xl font-bold text-black">Subscription Activated</h3>
</div>
<p className="mt-2 text-balance text-center text-gray-600">
Your subscription has been activated successfully.
</p>
<p className="mt-4 text-balance text-center text-gray-600">
It might take a minute for the changes to reflect. We will{' '}
<b className="text-black">reload</b> the page for you.
</p>
<div className="my-6 flex animate-pulse items-center justify-center gap-2">
<Loader2 className="size-4 animate-spin stroke-[2.5px] text-green-600" />
<span className="text-gray-600">Please wait...</span>
</div>
<p className="text-center text-sm text-gray-500">
If it takes longer than expected, please email us at{' '}
<a
href="mailto:info@roadmap.sh"
className="text-blue-600 underline underline-offset-2 hover:text-blue-700"
>
info@roadmap.sh
</a>
.
</p>
</Modal>
);
}

@ -1,7 +1,7 @@
---
import { getAllChangelogs } from '../lib/changelog';
import { DateTime } from 'luxon';
import AstroIcon from './AstroIcon.astro';
const allChangelogs = await getAllChangelogs();
const top10Changelogs = allChangelogs.slice(0, 10);
---
@ -12,16 +12,18 @@ const top10Changelogs = allChangelogs.slice(0, 10);
<img
src='/images/gifs/rocket.gif'
alt='Rocket'
class='mr-2 hidden sm:inline h-12 w-12'
class='mr-2 hidden h-12 w-12 sm:inline'
/>
Actively Maintained
</p>
<p class='mt-1 mb-2 sm:my-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
<p
class='mb-2 mt-1 text-sm leading-relaxed text-gray-600 sm:my-2 sm:my-5 sm:text-lg'
>
We are always improving our content, adding new resources and adding
features to enhance your learning experience.
</p>
<div class='relative mt-2 sm:mt-8 text-left'>
<div class='relative mt-2 text-left sm:mt-8'>
<div
class='absolute inset-y-0 left-[120px] hidden w-px -translate-x-[0.5px] translate-x-[5.75px] bg-gray-300 sm:block'
>
@ -36,13 +38,13 @@ const top10Changelogs = allChangelogs.slice(0, 10);
<li class='relative'>
<a
href={`/changelog#${changelog.id}`}
class='flex flex-col sm:flex-row items-start sm:items-center'
class='flex flex-col items-start sm:flex-row sm:items-center'
>
<span class='sm:w-[120px] flex-shrink-0 pr-0 sm:pr-4 text-right text-sm tracking-wide text-gray-400'>
<span class='flex-shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
{formattedDate}
</span>
<span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 hidden sm:block' />
<span class='text-balance sm:pl-8 text-base font-medium text-gray-900'>
<span class='hidden h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 sm:block' />
<span class='text-balance text-base font-medium text-gray-900 sm:pl-8'>
{changelog.frontmatter.title}
</span>
</a>
@ -52,13 +54,23 @@ const top10Changelogs = allChangelogs.slice(0, 10);
}
</ul>
</div>
<div class='mt-2 sm:mt-8 text-left sm:text-center'>
<div
class='mt-2 flex flex-col gap-2 sm:flex-row sm:mt-8 sm:items-center sm:justify-center'
>
<a
href='/changelog'
class='inline-block text-sm sm:text-base rounded-lg sm:rounded-full bg-gray-800 px-4 sm:px-6 py-2 text-white transition-colors hover:bg-gray-700'
class='inline-block rounded-lg border border-black bg-black px-4 py-2 text-sm text-white transition-colors hover:bg-gray-700 sm:rounded-full sm:px-6 sm:text-base'
>
View Full Changelog
</a>
<button
data-guest-required
data-popup='login-popup'
class='flex flex-row items-center gap-2 rounded-lg border border-black bg-white px-4 py-2 text-sm text-black transition-all hover:bg-black hover:text-white sm:rounded-full sm:pl-4 sm:pr-5 sm:text-base'
>
<AstroIcon icon='bell' class='h-5 w-5' />
Subscribe for Notifications
</button>
</div>
</div>
</div>

@ -11,6 +11,7 @@ import type {
} from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
import { useToast } from '../../hooks/use-toast';
import { ContentConfirmationModal } from './ContentConfirmationModal';
export type TeamResourceConfig = {
isCustomResource: boolean;
@ -44,6 +45,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState<boolean>(false);
const [error, setError] = useState<string>('');
const [confirmationContentId, setConfirmationContentId] = useState<string>();
async function loadAllRoadmaps() {
const { error, response } = await httpGet<PageType[]>(`/pages.json`);
@ -101,7 +103,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
});
}
async function addTeamResource(roadmapId: string) {
async function addTeamResource(roadmapId: string, shouldCopyContent = false) {
if (!teamId) {
return;
}
@ -118,6 +120,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
resourceType: 'roadmap',
removed: [],
renderer: renderer || 'balsamiq',
shouldCopyContent,
},
);
@ -148,8 +151,24 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
});
}
const confirmationContentIdModal = confirmationContentId && (
<ContentConfirmationModal
onClose={() => {
setConfirmationContentId('');
}}
onClick={(shouldCopy) => {
addTeamResource(confirmationContentId, shouldCopy).finally(() => {
pageProgressMessage.set('');
setConfirmationContentId('');
});
}}
/>
);
return (
<div>
{confirmationContentIdModal}
{changingRoadmapId && (
<UpdateTeamResourceModal
onClose={() => setChangingRoadmapId('')}
@ -170,9 +189,20 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
allRoadmaps={allRoadmaps.filter((r) => r.renderer === 'editor')}
teamId={teamId}
onRoadmapAdd={(roadmapId) => {
addTeamResource(roadmapId).finally(() => {
pageProgressMessage.set('');
});
const isEditorRoadmap = allRoadmaps.find(
(r) => r.id === roadmapId && r.renderer === 'editor',
);
if (!isEditorRoadmap) {
addTeamResource(roadmapId).finally(() => {
pageProgressMessage.set('');
});
return;
}
setShowSelectRoadmapModal(false);
setConfirmationContentId(roadmapId);
}}
onRoadmapRemove={(roadmapId) => {
onRemove(roadmapId).finally(() => {});

@ -1,5 +1,5 @@
import { getPercentage } from '../../helper/number';
import { getRelativeTimeString } from '../../lib/date';
import { getPercentage } from '../../lib/number';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
type DashboardCustomProgressCardProps = {

@ -1,20 +1,27 @@
import { useStore } from '@nanostores/react';
import { useEffect, useState } from 'react';
import { httpGet } from '../../lib/http';
import { cn } from '../../../editor/utils/classname';
import { useParams } from '../../hooks/use-params';
import { useToast } from '../../hooks/use-toast';
import { useStore } from '@nanostores/react';
import { httpGet } from '../../lib/http';
import { getUser } from '../../lib/jwt';
import { $teamList } from '../../stores/team';
import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
import { DashboardTab } from './DashboardTab';
import { DashboardTabButton } from './DashboardTabButton';
import { PersonalDashboard, type BuiltInRoadmap } from './PersonalDashboard';
import { TeamDashboard } from './TeamDashboard';
import { getUser } from '../../lib/jwt';
import { useParams } from '../../hooks/use-params';
import type { QuestionGroupType } from '../../lib/question-group';
import type { GuideFileType } from '../../lib/guide';
import type { VideoFileType } from '../../lib/video';
type DashboardPageProps = {
builtInRoleRoadmaps?: BuiltInRoadmap[];
builtInSkillRoadmaps?: BuiltInRoadmap[];
builtInBestPractices?: BuiltInRoadmap[];
isTeamPage?: boolean;
questionGroups?: QuestionGroupType[];
guides?: GuideFileType[];
videos?: VideoFileType[];
};
export function DashboardPage(props: DashboardPageProps) {
@ -23,6 +30,9 @@ export function DashboardPage(props: DashboardPageProps) {
builtInBestPractices,
builtInSkillRoadmaps,
isTeamPage = false,
questionGroups,
guides,
videos,
} = props;
const currentUser = getUser();
@ -66,78 +76,79 @@ export function DashboardPage(props: DashboardPageProps) {
: '/images/default-avatar.png';
return (
<div className="min-h-screen bg-gray-50 pb-20 pt-8">
<div className="container">
<div className="mb-6 flex flex-wrap items-center gap-1.5 sm:mb-8">
<DashboardTab
label="Personal"
isActive={!selectedTeamId && !isTeamPage}
href="/dashboard"
avatar={userAvatar}
/>
{isLoading && (
<>
<DashboardTabSkeleton />
<DashboardTabSkeleton />
</>
)}
{!isLoading && (
<>
{teamList.map((team) => {
const { avatar } = team;
const avatarUrl = avatar
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
: '/images/default-avatar.png';
return (
<DashboardTab
key={team._id}
label={team.name}
isActive={team._id === selectedTeamId}
{...(team.status === 'invited'
? {
href: `/respond-invite?i=${team.memberId}`,
}
: {
href: `/team?t=${team._id}`,
})}
avatar={avatarUrl}
/>
);
})}
<DashboardTab
label="+ Create Team"
isActive={false}
href="/team/new"
className="border border-dashed border-gray-300 bg-transparent px-3 text-[13px] text-sm text-gray-500 hover:border-gray-600 hover:text-black"
/>
</>
)}
<>
<div
className={cn('bg-slate-900', {
'striped-loader-slate': isLoading,
})}
>
<div className="bg-slate-800/30 py-5 min-h-[70px]">
<div className="container flex flex-wrap items-center gap-1.5">
{!isLoading && (
<>
<DashboardTabButton
label="Personal"
isActive={!selectedTeamId && !isTeamPage}
href="/dashboard"
avatar={userAvatar}
/>
{teamList.map((team) => {
const { avatar } = team;
const avatarUrl = avatar
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
: '/images/default-avatar.png';
return (
<DashboardTabButton
key={team._id}
label={team.name}
isActive={team._id === selectedTeamId}
{...(team.status === 'invited'
? {
href: `/respond-invite?i=${team.memberId}`,
}
: {
href: `/team?t=${team._id}`,
})}
avatar={avatarUrl}
/>
);
})}
<DashboardTabButton
label="+ Create Team"
isActive={false}
href="/team/new"
className="border border-dashed border-slate-700 bg-transparent px-3 text-[13px] text-sm text-gray-500 hover:border-solid hover:border-slate-700 hover:text-gray-400"
/>
</>
)}
</div>
</div>
</div>
<div className="">
{!selectedTeamId && !isTeamPage && (
<PersonalDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps}
builtInSkillRoadmaps={builtInSkillRoadmaps}
builtInBestPractices={builtInBestPractices}
/>
<div className="bg-slate-900">
<PersonalDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps}
builtInSkillRoadmaps={builtInSkillRoadmaps}
builtInBestPractices={builtInBestPractices}
questionGroups={questionGroups}
guides={guides}
videos={videos}
/>
</div>
)}
{(selectedTeamId || isTeamPage) && (
<TeamDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps!}
builtInSkillRoadmaps={builtInSkillRoadmaps!}
teamId={selectedTeamId!}
/>
<div className="container">
<TeamDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps!}
builtInSkillRoadmaps={builtInSkillRoadmaps!}
teamId={selectedTeamId!}
/>
</div>
)}
</div>
</div>
);
}
function DashboardTabSkeleton() {
return (
<div className="h-[30px] w-[114px] animate-pulse rounded-md border bg-white"></div>
</>
);
}

@ -1,6 +1,5 @@
import { getPercentage } from '../../helper/number';
import { getPercentage } from '../../lib/number';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
import { ArrowUpRight, ExternalLink } from 'lucide-react';
type DashboardProgressCardProps = {
progress: UserProgress;

@ -11,7 +11,7 @@ type DashboardTabProps = {
icon?: ReactNode;
};
export function DashboardTab(props: DashboardTabProps) {
export function DashboardTabButton(props: DashboardTabProps) {
const { isActive, onClick, label, className, href, avatar, icon } = props;
const Slot = href ? 'a' : 'button';
@ -20,8 +20,10 @@ export function DashboardTab(props: DashboardTabProps) {
<Slot
onClick={onClick}
className={cn(
'flex h-[30px] shrink-0 items-center gap-1 rounded-md border bg-white p-1.5 px-2 text-sm leading-none text-gray-600',
isActive ? 'border-gray-500 bg-gray-200 text-gray-900' : '',
'flex h-[30px] shrink-0 items-center gap-1 rounded-md border border-slate-700 bg-slate-800 p-1.5 pl-2 pr-3 text-sm leading-none text-gray-400 transition-colors hover:bg-slate-700',
isActive
? 'border-slate-200 bg-slate-200 text-gray-900 hover:bg-slate-200'
: '',
className,
)}
{...(href ? { href } : {})}
@ -30,7 +32,7 @@ export function DashboardTab(props: DashboardTabProps) {
<img
src={avatar}
alt="avatar"
className="h-4 w-4 mr-0.5 rounded-full object-cover"
className="mr-0.5 h-4 w-4 rounded-full object-cover"
/>
)}
{icon}

@ -1,23 +1,47 @@
import { type JSXElementConstructor, useEffect, useState } from 'react';
import { httpGet } from '../../lib/http';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
import type { PageType } from '../CommandMenu/CommandMenu';
import { useToast } from '../../hooks/use-toast';
import { getCurrentPeriod } from '../../lib/date';
import { ListDashboardCustomProgress } from './ListDashboardCustomProgress';
import { RecommendedRoadmaps } from './RecommendedRoadmaps';
import { ProgressStack } from './ProgressStack';
import { useStore } from '@nanostores/react';
import { $accountStreak, type StreakResponse } from '../../stores/streak';
import { CheckEmoji } from '../ReactIcons/CheckEmoji.tsx';
import { ConstructionEmoji } from '../ReactIcons/ConstructionEmoji.tsx';
import { BookEmoji } from '../ReactIcons/BookEmoji.tsx';
import { DashboardAiRoadmaps } from './DashboardAiRoadmaps.tsx';
import {
ChartColumn,
CheckSquare,
FolderGit2,
SquarePen,
Zap,
type LucideIcon
} from 'lucide-react';
import { useEffect, useState } from 'react';
import type { AllowedProfileVisibility } from '../../api/user.ts';
import { PencilIcon, type LucideIcon } from 'lucide-react';
import { useToast } from '../../hooks/use-toast';
import { cn } from '../../lib/classname.ts';
import type { GuideFileType } from '../../lib/guide';
import { httpGet } from '../../lib/http';
import type { QuestionGroupType } from '../../lib/question-group';
import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
import type { VideoFileType } from '../../lib/video';
import { $accountStreak, type StreakResponse } from '../../stores/streak';
import type { PageType } from '../CommandMenu/CommandMenu';
import { FeaturedGuideList } from '../FeaturedGuides/FeaturedGuideList';
import { FeaturedVideoList } from '../FeaturedVideos/FeaturedVideoList';
import {
FavoriteRoadmaps,
type AIRoadmapType,
} from '../HeroSection/FavoriteRoadmaps.tsx';
import { HeroRoadmap } from '../HeroSection/HeroRoadmap.tsx';
import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
const projectGroups = [
{
title: 'Frontend',
id: 'frontend',
},
{
title: 'Backend',
id: 'backend',
},
{
title: 'DevOps',
id: 'devops',
},
];
type UserDashboardResponse = {
name: string;
@ -28,11 +52,7 @@ type UserDashboardResponse = {
profileVisibility: AllowedProfileVisibility;
progresses: UserProgress[];
projects: ProjectStatusDocument[];
aiRoadmaps: {
id: string;
title: string;
slug: string;
}[];
aiRoadmaps: AIRoadmapType[];
topicDoneToday: number;
};
@ -42,6 +62,7 @@ export type BuiltInRoadmap = {
title: string;
description: string;
isFavorite?: boolean;
isNew?: boolean;
relatedRoadmapIds?: string[];
renderer?: AllowedRoadmapRenderer;
metadata?: Record<string, any>;
@ -51,16 +72,162 @@ type PersonalDashboardProps = {
builtInRoleRoadmaps?: BuiltInRoadmap[];
builtInSkillRoadmaps?: BuiltInRoadmap[];
builtInBestPractices?: BuiltInRoadmap[];
questionGroups?: QuestionGroupType[];
guides?: GuideFileType[];
videos?: VideoFileType[];
};
type DashboardStatItemProps = {
icon: LucideIcon;
iconClassName: string;
value: number;
label: string;
isLoading: boolean;
};
function DashboardStatItem(props: DashboardStatItemProps) {
const { icon: Icon, iconClassName, value, label, isLoading } = props;
return (
<div
className={cn(
'flex items-center gap-1.5 rounded-lg bg-slate-800/50 py-2 pl-3 pr-3',
{
'striped-loader-slate striped-loader-slate-fast text-transparent':
isLoading,
},
)}
>
<Icon
size={16}
className={cn(iconClassName, { 'text-transparent': isLoading })}
/>
<span>
<span className="tabular-nums">{value}</span> {label}
</span>
</div>
);
}
type ProfileButtonProps = {
isLoading: boolean;
name?: string;
username?: string;
avatar?: string;
};
function PersonalProfileButton(props: ProfileButtonProps) {
const { isLoading, name, username, avatar } = props;
if (isLoading || !username) {
return (
<a
href="/account/update-profile"
className={cn(
'flex items-center gap-2 rounded-lg bg-slate-800/50 py-2 pl-3 pr-3 font-medium outline-slate-700 hover:bg-slate-800 hover:outline-slate-400',
{
'striped-loader-slate striped-loader-slate-fast text-transparent':
isLoading,
'bg-blue-500/10 text-blue-500 hover:bg-blue-500/20': !isLoading,
},
)}
>
<CheckSquare className="h-4 w-4" strokeWidth={2.5} />
Set up your profile
</a>
);
}
return (
<div className="flex gap-1.5">
<a
href={`/u/${username}`}
className="flex items-center gap-2 rounded-lg bg-slate-800/50 py-2 pl-3 pr-3 text-slate-300 transition-colors hover:bg-slate-800/70"
>
<img
src={avatar}
alt={name || 'Profile'}
className="h-5 w-5 rounded-full ring-1 ring-slate-700"
/>
<span className="font-medium">Visit Profile</span>
</a>
<a
href="/account/update-profile"
className="flex items-center gap-2 rounded-lg bg-slate-800/50 py-2 pl-3 pr-3 text-slate-400 transition-colors hover:bg-slate-800/70 hover:text-slate-300"
title="Edit Profile"
>
<SquarePen className="h-4 w-4" />
</a>
</div>
);
}
type DashboardStatsProps = {
profile: ProfileButtonProps;
accountStreak?: StreakResponse;
topicsDoneToday?: number;
finishedProjectsCount?: number;
isLoading: boolean;
};
function DashboardStats(props: DashboardStatsProps) {
const {
accountStreak,
topicsDoneToday = 0,
finishedProjectsCount = 0,
isLoading,
profile,
} = props;
return (
<div className="container mb-3 flex flex-col gap-4 pb-2 pt-6 text-sm text-slate-400 sm:flex-row sm:items-center sm:justify-between">
<div className="flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<PersonalProfileButton
isLoading={isLoading}
name={profile.name}
username={profile.username}
avatar={profile.avatar}
/>
<div className="hidden flex-wrap items-center gap-2 md:flex">
<DashboardStatItem
icon={Zap}
iconClassName="text-yellow-500"
value={accountStreak?.count || 0}
label="day streak"
isLoading={isLoading}
/>
<DashboardStatItem
icon={ChartColumn}
iconClassName="text-green-500"
value={topicsDoneToday}
label="learnt today"
isLoading={isLoading}
/>
<DashboardStatItem
icon={FolderGit2}
iconClassName="text-blue-500"
value={finishedProjectsCount}
label="projects finished"
isLoading={isLoading}
/>
</div>
</div>
</div>
);
}
export function PersonalDashboard(props: PersonalDashboardProps) {
const {
builtInRoleRoadmaps = [],
builtInBestPractices = [],
builtInSkillRoadmaps = [],
questionGroups = [],
guides = [],
videos = [],
} = props;
const toast = useToast();
const [isLoading, setIsLoading] = useState(true);
const [personalDashboardDetails, setPersonalDashboardDetails] =
useState<UserDashboardResponse>();
@ -138,7 +305,9 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
return () => window.removeEventListener('refresh-favorites', loadProgress);
}, []);
const learningRoadmapsToShow = (personalDashboardDetails?.progresses || [])
const learningRoadmapsToShow: UserProgress[] = (
personalDashboardDetails?.progresses || []
)
.filter((progress) => !progress.isCustomResource)
.sort((a, b) => {
const updatedAtA = new Date(a.updatedAt);
@ -156,7 +325,10 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
});
const aiGeneratedRoadmaps = personalDashboardDetails?.aiRoadmaps || [];
const customRoadmaps = (personalDashboardDetails?.progresses || [])
const customRoadmaps: UserProgress[] = (
personalDashboardDetails?.progresses || []
)
.filter((progress) => progress.isCustomResource)
.sort((a, b) => {
const updatedAtA = new Date(a.updatedAt);
@ -169,43 +341,6 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
: '/images/default-avatar.png';
const allRoadmapsAndBestPractices = [
...builtInRoleRoadmaps,
...builtInSkillRoadmaps,
...builtInBestPractices,
];
const relatedRoadmapIds = allRoadmapsAndBestPractices
// take the ones that user is learning
.filter((roadmap) =>
learningRoadmapsToShow?.some(
(learningRoadmap) => learningRoadmap.resourceId === roadmap.id,
),
)
.flatMap((roadmap) => roadmap.relatedRoadmapIds)
// remove the ones that user is already learning or has bookmarked
.filter(
(roadmapId) =>
!learningRoadmapsToShow.some((lr) => lr.resourceId === roadmapId),
);
const recommendedRoadmapIds = new Set(
relatedRoadmapIds.length === 0
? [
'frontend',
'backend',
'devops',
'ai-data-scientist',
'full-stack',
'api-design',
]
: relatedRoadmapIds,
);
const recommendedRoadmaps = allRoadmapsAndBestPractices.filter((roadmap) =>
recommendedRoadmapIds.has(roadmap.id),
);
const enrichedProjects = personalDashboardDetails?.projects
.map((project) => {
const projectDetail = projectDetails.find(
@ -232,165 +367,200 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
const { username } = personalDashboardDetails || {};
return (
<section>
{isLoading ? (
<div className="h-7 w-1/4 animate-pulse rounded-lg bg-gray-200"></div>
) : (
<div className="flex flex-col items-start justify-between gap-1 sm:flex-row sm:items-center">
<h2 className="text-lg font-medium">
Hi {name}, good {getCurrentPeriod()}!
</h2>
<a
href="/home"
className="rounded-full bg-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-300 hover:text-black"
>
Visit Homepage
</a>
</div>
)}
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4">
{isLoading ? (
<>
<DashboardCardSkeleton />
<DashboardCardSkeleton />
<DashboardCardSkeleton />
<DashboardCardSkeleton />
</>
) : (
<>
<DashboardCard
imgUrl={avatarLink}
title={name!}
description={
username ? 'View your profile' : 'Setup your profile'
}
href={username ? `/u/${username}` : '/account/update-profile'}
{...(username && {
externalLinkIcon: PencilIcon,
externalLinkHref: '/account/update-profile',
externalLinkText: 'Edit',
})}
className={
!username
? 'border-dashed border-gray-500 bg-gray-100 hover:border-gray-500 hover:bg-gray-200'
: ''
}
/>
<DashboardCard
icon={BookEmoji}
title="Visit Roadmaps"
description="Learn new skills"
href="/roadmaps"
/>
<DashboardCard
icon={ConstructionEmoji}
title="Build Projects"
description="Practice what you learn"
href="/projects"
/>
<DashboardCard
icon={CheckEmoji}
title="Best Practices"
description="Do things the right way"
href="/best-practices"
/>
</>
)}
</div>
<ProgressStack
progresses={learningRoadmapsToShow}
projects={enrichedProjects || []}
<div>
<DashboardStats
profile={{
name,
username,
avatar: avatarLink,
isLoading,
}}
isLoading={isLoading}
accountStreak={accountStreak}
topicDoneToday={personalDashboardDetails?.topicDoneToday || 0}
/>
<ListDashboardCustomProgress
progresses={customRoadmaps}
isLoading={isLoading}
/>
<DashboardAiRoadmaps
roadmaps={aiGeneratedRoadmaps}
isLoading={isLoading}
topicsDoneToday={personalDashboardDetails?.topicDoneToday}
finishedProjectsCount={
enrichedProjects?.filter((p) => p.submittedAt && p.repositoryUrl)
.length
}
/>
<RecommendedRoadmaps
roadmaps={recommendedRoadmaps}
<FavoriteRoadmaps
progress={learningRoadmapsToShow}
customRoadmaps={customRoadmaps}
aiRoadmaps={aiGeneratedRoadmaps}
projects={enrichedProjects || []}
isLoading={isLoading}
/>
</section>
);
}
type DashboardCardProps = {
icon?: JSXElementConstructor<any>;
imgUrl?: string;
title: string;
description: string;
href: string;
externalLinkIcon?: LucideIcon;
externalLinkText?: string;
externalLinkHref?: string;
className?: string;
};
<div className="bg-gradient-to-b from-slate-900 to-black pb-12">
<div className="relative mt-6 border-t border-t-[#1e293c] pt-12">
<div className="container">
<h2
id="role-based-roadmaps"
className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"
>
Role Based Roadmaps
</h2>
<div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInRoleRoadmaps.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id,
);
const percentageDone =
(((roadmapProgress?.skipped || 0) +
(roadmapProgress?.done || 0)) /
(roadmapProgress?.total || 1)) *
100;
return (
<HeroRoadmap
key={roadmap.id}
resourceId={roadmap.id}
resourceType="roadmap"
resourceTitle={roadmap.title}
isFavorite={roadmap.isFavorite}
percentageDone={percentageDone}
isNew={roadmap.isNew}
url={`/${roadmap.id}`}
/>
);
})}
</div>
</div>
</div>
function DashboardCard(props: DashboardCardProps) {
const {
icon: Icon,
imgUrl,
title,
description,
href,
externalLinkHref,
externalLinkIcon: ExternalLinkIcon,
externalLinkText,
className,
} = props;
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container">
<h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Skill Based Roadmaps
</h2>
<div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInSkillRoadmaps.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id,
);
const percentageDone =
(((roadmapProgress?.skipped || 0) +
(roadmapProgress?.done || 0)) /
(roadmapProgress?.total || 1)) *
100;
return (
<HeroRoadmap
key={roadmap.id}
resourceId={roadmap.id}
resourceType="roadmap"
resourceTitle={roadmap.title}
isFavorite={roadmap.isFavorite}
percentageDone={percentageDone}
isNew={roadmap.isNew}
url={`/${roadmap.id}`}
/>
);
})}
</div>
</div>
</div>
return (
<div className={cn('relative overflow-hidden', className)}>
<a
href={href}
className="flex flex-col rounded-lg border border-gray-300 bg-white hover:border-gray-400 hover:bg-gray-50"
>
{Icon && (
<div className="px-4 pb-3 pt-4">
<Icon className="size-6" />
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container">
<h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Project Ideas
</h2>
<div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{projectGroups.map((projectGroup) => {
return (
<HeroRoadmap
percentageDone={0}
key={projectGroup.id}
resourceId={projectGroup.id}
resourceType="roadmap"
resourceTitle={projectGroup.title}
url={`/${projectGroup.id}/projects`}
allowFavorite={false}
/>
);
})}
</div>
</div>
)}
</div>
{imgUrl && (
<div className="px-4 pb-1.5 pt-3.5">
<img src={imgUrl} alt={title} className="size-8 rounded-full" />
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container">
<h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Best Practices
</h2>
<div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInBestPractices.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id,
);
const percentageDone =
(((roadmapProgress?.skipped || 0) +
(roadmapProgress?.done || 0)) /
(roadmapProgress?.total || 1)) *
100;
return (
<HeroRoadmap
key={roadmap.id}
resourceId={roadmap.id}
resourceType="best-practice"
resourceTitle={roadmap.title}
isFavorite={roadmap.isFavorite}
percentageDone={percentageDone}
isNew={roadmap.isNew}
url={`/best-practices/${roadmap.id}`}
/>
);
})}
</div>
</div>
)}
</div>
<div className="flex grow flex-col justify-center gap-0.5 p-4">
<h3 className="truncate font-medium text-black">{title}</h3>
<p className="text-xs text-black">{description}</p>
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container">
<h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Questions
</h2>
<div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{questionGroups.map((questionGroup) => {
return (
<HeroRoadmap
percentageDone={0}
key={questionGroup.id}
resourceId={questionGroup.id}
resourceType="roadmap"
resourceTitle={questionGroup.frontmatter.briefTitle}
url={`/questions/${questionGroup.id}`}
allowFavorite={false}
isNew={questionGroup.frontmatter.isNew}
/>
);
})}
</div>
</div>
</div>
</a>
</div>
{externalLinkHref && (
<a
href={externalLinkHref}
className="absolute right-1 top-1 flex items-center gap-1.5 rounded-md bg-gray-200 p-1 px-2 text-xs text-gray-600 hover:bg-gray-300 hover:text-black"
>
{ExternalLinkIcon && <ExternalLinkIcon className="size-3" />}
{externalLinkText}
</a>
)}
<div className="grid grid-cols-1 gap-5 bg-gray-50 px-4 py-5 sm:gap-16 sm:px-0 sm:py-16">
<FeaturedGuideList
heading="Guides"
guides={guides}
questions={questionGroups
.filter((questionGroup) => questionGroup.frontmatter.authorId)
.slice(0, 7)}
/>
<FeaturedVideoList heading="Videos" videos={videos} />
</div>
</div>
);
}
function DashboardCardSkeleton() {
return (
<div className="h-[128px] animate-pulse rounded-lg border border-gray-300 bg-white"></div>
);
}

@ -6,80 +6,24 @@ import { isMobileScreen } from '../lib/is-mobile.ts';
type FeatureAnnouncementProps = {};
export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
const [isPlaying, setIsPlaying] = useState(false);
const videoModal = (
<Modal
onClose={() => setIsPlaying(false)}
bodyClassName={'h-auto overflow-hidden'}
wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'}
>
<div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 text-left text-sm md:py-3 lg:text-base">
<span
className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800"
style={{ lineHeight: '1.5' }}
>
New
</span>
Projects are live on the{' '}
<a
href={'/projects'}
className="font-medium text-blue-500 underline underline-offset-2"
>
several of our roadmaps
</a>
<span className={'hidden md:inline'}>
{' '}
and are coming soon on the others
</span>
<PartyPopper className="relative -top-[3px] ml-2 inline-block h-5 w-5 text-blue-500 md:ml-1 md:h-6 md:w-6" />
</div>
<div
className="iframe-container"
style={{
position: 'relative',
paddingBottom: '56.25%',
height: 0,
overflow: 'hidden',
}}
>
{/*https://www.youtube.com/embed/?playsinline=1&disablekb=1&&iv_load_policy=3&cc_load_policy=0&controls=0&rel=0&autoplay=1&mute=1&origin=https%3A%2F%2Fytch.xyz&widgetid=1*/}
<iframe
src="https://www.youtube.com/embed/9lS3slfJ0x0?start=31&autoplay=1&disablekb=1&rel=0&cc_load_policy=0&rel=0&autoplay=1&origin=https%3A%2F%2Froadmap.sh&widgetid=1&showinfo=0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
</div>
</Modal>
);
return null;
return (
<>
{isPlaying && videoModal}
<button
<a
className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
onClick={() => {
setIsPlaying(true);
}}
href="/courses/sql"
>
<span className="relative sm:-top-[1px] mr-1 text-xs font-semibold uppercase text-white">
<PlayCircle className="inline-block h-4 w-4 relative -top-[2px] mr-1" />
Watch
<PartyPopper className="inline-block h-4 w-4 relative -top-[2px] mr-1" />
Courses
</span>{' '}
<span className={'hidden sm:inline'}>
Practice your skills with projects
Our first paid course about SQL is now live!
</span>
<span className={'inline text-sm sm:hidden'}>
Build projects to skill up
Our SQL course is now live!
</span>
</button>
</a>
</>
);
}

@ -1,47 +0,0 @@
---
import type { GuideFileType } from '../lib/guide';
import GuideListItem from './GuideListItem.astro';
import { QuestionGroupType } from '../lib/question-group';
export interface Props {
heading: string;
guides: GuideFileType[];
questions: QuestionGroupType[];
}
const { heading, guides, questions = [] } = Astro.props;
const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
...guides,
...questions,
].sort((a, b) => {
const aDate = new Date(a.frontmatter.date);
const bDate = new Date(b.frontmatter.date);
return bDate.getTime() - aDate.getTime();
});
---
<div class='container'>
<h2 class='block text-2xl font-bold sm:text-3xl'>{heading}</h2>
<div class='mt-3 sm:my-5'>
{sortedGuides.map((guide) => <GuideListItem guide={guide} />)}
</div>
<a
href='/guides'
class='hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
>
View All Guides &rarr;
</a>
<div class='mt-3 block sm:hidden'>
<a
href='/guides'
class='font-regular block rounded-md border border-black p-2 text-center text-sm text-black hover:bg-black hover:text-gray-50'
>
View All Guides &nbsp;&rarr;
</a>
</div>
</div>

@ -0,0 +1,51 @@
import type { GuideFileType } from '../../lib/guide';
import type { QuestionGroupType } from '../../lib/question-group';
import { GuideListItem } from './GuideListItem';
export interface FeaturedGuidesProps {
heading: string;
guides: GuideFileType[];
questions: QuestionGroupType[];
}
export function FeaturedGuideList(props: FeaturedGuidesProps) {
const { heading, guides, questions = [] } = props;
const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
...guides,
...questions,
].sort((a, b) => {
const aDate = new Date(a.frontmatter.date as string);
const bDate = new Date(b.frontmatter.date as string);
return bDate.getTime() - aDate.getTime();
});
return (
<div className="container">
<h2 className="block text-2xl font-bold sm:text-3xl">{heading}</h2>
<div className="mt-3 sm:my-5">
{sortedGuides.map((guide) => (
<GuideListItem key={guide.id} guide={guide} />
))}
</div>
<a
href="/guides"
className="hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline"
>
View All Guides &rarr;
</a>
<div className="mt-3 block sm:hidden">
<a
href="/guides"
className="font-regular block rounded-md border border-black p-2 text-center text-sm text-black hover:bg-black hover:text-gray-50"
>
View All Guides &nbsp;&rarr;
</a>
</div>
</div>
);
}

@ -0,0 +1,57 @@
import type { GuideFileType, GuideFrontmatter } from '../../lib/guide';
import { type QuestionGroupType } from '../../lib/question-group';
export interface GuideListItemProps {
guide: GuideFileType | QuestionGroupType;
}
function isQuestionGroupType(
guide: GuideFileType | QuestionGroupType,
): guide is QuestionGroupType {
return (guide as QuestionGroupType).questions !== undefined;
}
export function GuideListItem(props: GuideListItemProps) {
const { guide } = props;
const { frontmatter, id } = guide;
let pageUrl = '';
let guideType = '';
if (isQuestionGroupType(guide)) {
pageUrl = `/questions/${id}`;
guideType = 'Questions';
} else {
const excludedBySlug = (frontmatter as GuideFrontmatter).excludedBySlug;
pageUrl = excludedBySlug ? excludedBySlug : `/guides/${id}`;
guideType = (frontmatter as GuideFrontmatter).type;
}
return (
<a
className="text-md group block flex items-center justify-between border-b py-2 text-gray-600 no-underline hover:text-blue-600"
href={pageUrl}
>
<span className="text-sm transition-transform group-hover:translate-x-2 md:text-base">
{frontmatter.title}
{frontmatter.isNew && (
<span className="ml-2.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900">
New
<span className="hidden sm:inline">
&nbsp;&middot;&nbsp;
{new Date(frontmatter.date || '').toLocaleString('default', {
month: 'long',
})}
</span>
</span>
)}
</span>
<span className="hidden text-xs capitalize text-gray-500 sm:block">
{guideType}
</span>
<span className="block text-xs text-gray-400 sm:hidden"> &raquo;</span>
</a>
);
}

@ -1,35 +0,0 @@
---
import type { VideoFileType } from '../lib/video';
import VideoListItem from './VideoListItem.astro';
export interface Props {
heading: string;
videos: VideoFileType[];
}
const { heading, videos } = Astro.props;
---
<div class='container'>
<h2 class='text-2xl sm:text-3xl font-bold block'>{heading}</h2>
<div class='mt-3 sm:my-5'>
{videos.map((video) => <VideoListItem video={video} />)}
</div>
<a
href='/videos'
class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
>
View All Videos &rarr;
</a>
<div class='block sm:hidden mt-3'>
<a
href='/videos'
class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
>
View All Videos &nbsp;&rarr;
</a>
</div>
</div>

@ -0,0 +1,39 @@
import type { VideoFileType } from '../../lib/video';
import { VideoListItem } from './VideoListItem';
export interface FeaturedVideoListProps {
heading: string;
videos: VideoFileType[];
}
export function FeaturedVideoList(props: FeaturedVideoListProps) {
const { heading, videos } = props;
return (
<div className="container">
<h2 className="block text-2xl font-bold sm:text-3xl">{heading}</h2>
<div className="mt-3 sm:my-5">
{videos.map((video) => (
<VideoListItem key={video.id} video={video} />
))}
</div>
<a
href="/videos"
className="hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline"
>
View All Videos &rarr;
</a>
<div className="mt-3 block sm:hidden">
<a
href="/videos"
className="font-regular block rounded-md border border-black p-2 text-center text-sm text-black hover:bg-black hover:text-gray-50"
>
View All Videos &nbsp;&rarr;
</a>
</div>
</div>
);
}

@ -0,0 +1,38 @@
import type { VideoFileType } from '../../lib/video';
export interface VideoListItemProps {
video: VideoFileType;
}
export function VideoListItem(props: VideoListItemProps) {
const { video } = props;
const { frontmatter, id } = video;
return (
<a
className="block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b"
href={`/videos/${id}`}
>
<span className="group-hover:translate-x-2 transition-transform">
{frontmatter.title}
{frontmatter.isNew && (
<span className="bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-sm uppercase ml-1.5">
New
<span className="hidden sm:inline">
&middot;
{new Date(frontmatter.date).toLocaleString('default', {
month: 'long',
})}
</span>
</span>
)}
</span>
<span className="capitalize text-gray-500 text-xs hidden sm:block">
{frontmatter.duration}
</span>
<span className="text-gray-400 text-xs block sm:hidden"> &raquo;</span>
</a>
);
}

@ -0,0 +1,172 @@
import { SearchIcon, WandIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { cn } from '../../lib/classname';
import { isLoggedIn } from '../../lib/jwt';
import { showLoginPopup } from '../../lib/popup';
import { UserCoursesList } from './UserCoursesList';
import { FineTuneCourse } from './FineTuneCourse';
import {
clearFineTuneData,
getCourseFineTuneData,
getLastSessionId,
storeFineTuneData,
} from '../../lib/ai';
export const difficultyLevels = [
'beginner',
'intermediate',
'advanced',
] as const;
export type DifficultyLevel = (typeof difficultyLevels)[number];
type AICourseProps = {};
export function AICourse(props: AICourseProps) {
const [keyword, setKeyword] = useState('');
const [difficulty, setDifficulty] = useState<DifficultyLevel>('beginner');
const [hasFineTuneData, setHasFineTuneData] = useState(false);
const [about, setAbout] = useState('');
const [goal, setGoal] = useState('');
const [customInstructions, setCustomInstructions] = useState('');
useEffect(() => {
const lastSessionId = getLastSessionId();
if (!lastSessionId) {
return;
}
const fineTuneData = getCourseFineTuneData(lastSessionId);
if (!fineTuneData) {
return;
}
setAbout(fineTuneData.about);
setGoal(fineTuneData.goal);
setCustomInstructions(fineTuneData.customInstructions);
}, []);
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && keyword.trim()) {
onSubmit();
}
};
function onSubmit() {
if (!isLoggedIn()) {
showLoginPopup();
return;
}
let sessionId = '';
if (hasFineTuneData) {
clearFineTuneData();
sessionId = storeFineTuneData({
about,
goal,
customInstructions,
});
}
window.location.href = `/ai-tutor/search?term=${encodeURIComponent(keyword)}&difficulty=${difficulty}&id=${sessionId}`;
}
return (
<section className="flex flex-grow flex-col bg-gray-100">
<div className="container mx-auto flex max-w-3xl flex-col py-24 max-sm:py-4">
<h1 className="mb-2.5 text-center text-4xl font-bold max-sm:mb-2 max-sm:text-left max-sm:text-xl">
Learn anything with AI
</h1>
<p className="mb-6 text-center text-lg text-gray-600 max-sm:hidden max-sm:text-left max-sm:text-sm">
Enter a topic below to generate a personalized course for it
</p>
<div className="rounded-lg border border-gray-200 bg-white p-6 max-sm:p-4">
<form
className="flex flex-col gap-5"
onSubmit={(e) => {
e.preventDefault();
onSubmit();
}}
>
<div className="flex flex-col">
<label
htmlFor="keyword"
className="mb-2.5 text-sm font-medium text-gray-700"
>
Course Topic
</label>
<div className="relative">
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<SearchIcon size={18} />
</div>
<input
id="keyword"
type="text"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="e.g., Algebra, JavaScript, Photography"
className="w-full rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-500 max-sm:placeholder:text-base"
maxLength={50}
/>
</div>
</div>
<div className="flex flex-col">
<label className="mb-2.5 text-sm font-medium text-gray-700">
Difficulty Level
</label>
<div className="flex gap-2 max-sm:flex-col max-sm:gap-1">
{difficultyLevels.map((level) => (
<button
key={level}
type="button"
onClick={() => setDifficulty(level)}
className={cn(
'rounded-md border px-4 py-2 capitalize max-sm:text-sm',
difficulty === level
? 'border-gray-800 bg-gray-800 text-white'
: 'border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200',
)}
>
{level}
</button>
))}
</div>
</div>
<FineTuneCourse
hasFineTuneData={hasFineTuneData}
setHasFineTuneData={setHasFineTuneData}
about={about}
goal={goal}
customInstructions={customInstructions}
setAbout={setAbout}
setGoal={setGoal}
setCustomInstructions={setCustomInstructions}
/>
<button
type="submit"
disabled={!keyword.trim()}
className={cn(
'mt-2 flex items-center justify-center rounded-md px-4 py-2 font-medium text-white transition-colors max-sm:text-sm',
!keyword.trim()
? 'cursor-not-allowed bg-gray-400'
: 'bg-black hover:bg-gray-800',
)}
>
<WandIcon size={18} className="mr-2" />
Generate Course
</button>
</form>
</div>
<div className="mt-8 min-h-[200px]">
<UserCoursesList />
</div>
</div>
</section>
);
}

@ -0,0 +1,116 @@
import { MoreVertical, Play, Trash2 } from 'lucide-react';
import { useRef, useState } from 'react';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { useKeydown } from '../../hooks/use-keydown';
import { useToast } from '../../hooks/use-toast';
import { useMutation } from '@tanstack/react-query';
import { queryClient } from '../../stores/query-client';
import { httpDelete } from '../../lib/query-http';
type AICourseActionsType = {
courseSlug: string;
onDeleted?: () => void;
};
export function AICourseActions(props: AICourseActionsType) {
const { courseSlug, onDeleted } = props;
const toast = useToast();
const dropdownRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(false);
const [isConfirming, setIsConfirming] = useState(false);
const { mutate: deleteCourse, isPending: isDeleting } = useMutation(
{
mutationFn: async () => {
return httpDelete(`/v1-delete-ai-course/${courseSlug}`);
},
onSuccess: () => {
toast.success('Course deleted');
queryClient.invalidateQueries({
predicate: (query) => query.queryKey?.[0] === 'user-ai-courses',
});
onDeleted?.();
},
onError: (error) => {
toast.error(error?.message || 'Failed to delete course');
},
},
queryClient,
);
useOutsideClick(dropdownRef, () => {
setIsOpen(false);
});
useKeydown('Escape', () => {
setIsOpen(false);
});
return (
<div className="relative h-full" ref={dropdownRef}>
<button
className="h-full text-gray-400 hover:text-gray-700"
onClick={(e) => {
e.stopPropagation();
setIsOpen(!isOpen);
}}
>
<MoreVertical size={16} />
</button>
{isOpen && (
<div className="absolute right-0 top-8 z-10 w-48 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
<a
href={`/ai-tutor/${courseSlug}`}
className="flex w-full items-center gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
>
<Play className="h-3.5 w-3.5" />
Start Course
</a>
{!isConfirming && (
<button
className="flex w-full items-center gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
onClick={() => setIsConfirming(true)}
disabled={isDeleting}
>
{!isDeleting ? (
<>
<Trash2 className="h-3.5 w-3.5" />
Delete Course
</>
) : (
'Deleting...'
)}
</button>
)}
{isConfirming && (
<span className="flex w-full items-center justify-between gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70">
Are you sure?
<div className="flex items-center gap-2">
<button
onClick={() => {
setIsConfirming(false);
deleteCourse();
}}
disabled={isDeleting}
className="text-red-500 underline hover:text-red-800"
>
Yes
</button>
<button
onClick={() => setIsConfirming(false)}
className="text-red-500 underline hover:text-red-800"
>
No
</button>
</div>
</span>
)}
</div>
)}
</div>
);
}

@ -0,0 +1,82 @@
import type { AICourseWithLessonCount } from '../../queries/ai-course';
import type { DifficultyLevel } from './AICourse';
import { BookOpen } from 'lucide-react';
import { AICourseActions } from './AICourseActions';
type AICourseCardProps = {
course: AICourseWithLessonCount;
};
export function AICourseCard(props: AICourseCardProps) {
const { course } = props;
// Format date if available
const formattedDate = course.createdAt
? new Date(course.createdAt).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
})
: null;
// Map difficulty to color
const difficultyColor =
{
beginner: 'text-green-700',
intermediate: 'text-blue-700',
advanced: 'text-purple-700',
}[course.difficulty as DifficultyLevel] || 'text-gray-700';
// Calculate progress percentage
const totalTopics = course.lessonCount || 0;
const completedTopics = course.done?.length || 0;
const progressPercentage =
totalTopics > 0 ? Math.round((completedTopics / totalTopics) * 100) : 0;
return (
<div className="relative">
<a
href={`/ai-tutor/${course.slug}`}
className="hover:border-gray-3 00 group relative flex w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
>
<div className="flex items-center justify-between">
<span
className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
>
{course.difficulty}
</span>
</div>
<h3 className="my-2 text-base font-semibold text-gray-900">
{course.title}
</h3>
<div className="mt-auto flex items-center justify-between pt-2">
<div className="flex items-center text-xs text-gray-600">
<BookOpen className="mr-1 h-3.5 w-3.5" />
<span>{totalTopics} lessons</span>
</div>
{totalTopics > 0 && (
<div className="flex items-center">
<div className="mr-2 h-1.5 w-16 overflow-hidden rounded-full bg-gray-200">
<div
className="h-full rounded-full bg-blue-600"
style={{ width: `${progressPercentage}%` }}
/>
</div>
<span className="text-xs font-medium text-gray-700">
{progressPercentage}%
</span>
</div>
)}
</div>
</a>
{course.slug && (
<div className="absolute right-2 top-2">
<AICourseActions courseSlug={course.slug} />
</div>
)}
</div>
);
}

@ -0,0 +1,533 @@
import {
BookOpenCheck,
ChevronLeft,
CircleAlert,
CircleOff,
Loader2,
Menu,
Play,
X,
} from 'lucide-react';
import { useState } from 'react';
import { type AiCourse } from '../../lib/ai';
import { cn } from '../../lib/classname';
import { slugify } from '../../lib/slugger';
import { useIsPaidUser } from '../../queries/billing';
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
import { CheckIcon } from '../ReactIcons/CheckIcon';
import { ErrorIcon } from '../ReactIcons/ErrorIcon';
import { AICourseLesson } from './AICourseLesson';
import { AICourseLimit } from './AICourseLimit';
import { AICourseSidebarModuleList } from './AICourseSidebarModuleList';
import { AILimitsPopup } from './AILimitsPopup';
import { RegenerateOutline } from './RegenerateOutline';
type AICourseContentProps = {
courseSlug?: string;
course: AiCourse;
isLoading: boolean;
error?: string;
onRegenerateOutline: (prompt?: string) => void;
};
export function AICourseContent(props: AICourseContentProps) {
const { course, courseSlug, isLoading, error, onRegenerateOutline } = props;
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
const [activeModuleIndex, setActiveModuleIndex] = useState(0);
const [activeLessonIndex, setActiveLessonIndex] = useState(0);
const [sidebarOpen, setSidebarOpen] = useState(false);
const [viewMode, setViewMode] = useState<'module' | 'outline'>('outline');
const { isPaidUser } = useIsPaidUser();
const aiCourseProgress = course.done || [];
const [expandedModules, setExpandedModules] = useState<
Record<number, boolean>
>({});
const goToNextModule = () => {
if (activeModuleIndex >= course.modules.length) {
return;
}
const nextModuleIndex = activeModuleIndex + 1;
setActiveModuleIndex(nextModuleIndex);
setActiveLessonIndex(0);
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
newState[nextModuleIndex] = true;
return newState;
});
};
const goToNextLesson = () => {
const currentModule = course.modules[activeModuleIndex];
if (currentModule && activeLessonIndex < currentModule.lessons.length - 1) {
setActiveLessonIndex(activeLessonIndex + 1);
} else {
goToNextModule();
}
};
const goToPrevLesson = () => {
if (activeLessonIndex > 0) {
setActiveLessonIndex(activeLessonIndex - 1);
return;
}
const prevModule = course.modules[activeModuleIndex - 1];
if (!prevModule) {
return;
}
const prevModuleIndex = activeModuleIndex - 1;
setActiveModuleIndex(prevModuleIndex);
setActiveLessonIndex(prevModule.lessons.length - 1);
// Expand the previous module in the sidebar
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
// Expand only the previous module
newState[prevModuleIndex] = true;
return newState;
});
};
const currentModule = course.modules[activeModuleIndex];
const currentLesson = currentModule?.lessons[activeLessonIndex];
const totalModules = course.modules.length;
const totalLessons = currentModule?.lessons.length || 0;
const totalCourseLessons = course.modules.reduce(
(total, module) => total + module.lessons.length,
0,
);
const totalDoneLessons = (course?.done || []).length;
const finishedPercentage = Math.round(
(totalDoneLessons / totalCourseLessons) * 100,
);
const modals = (
<>
{showUpgradeModal && (
<UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
)}
{showAILimitsPopup && (
<AILimitsPopup
onClose={() => setShowAILimitsPopup(false)}
onUpgrade={() => {
setShowAILimitsPopup(false);
setShowUpgradeModal(true);
}}
/>
)}
</>
);
if (error && !isLoading) {
const isLimitReached = error.includes('limit');
const isNotFound = error.includes('not exist');
let icon = <ErrorIcon additionalClasses="mb-4 size-16" />;
let title = 'Error occurred';
let message = error;
if (isLimitReached) {
icon = <CircleAlert className="mb-4 size-16 text-yellow-500" />;
title = 'Limit Reached';
message =
'You have reached the daily AI usage limit. Please upgrade your account to continue.';
} else if (isNotFound) {
icon = <CircleOff className="mb-4 size-16 text-gray-300" />;
title = 'Course Not Found';
message =
'The course you are looking for does not exist. Why not create your own course?';
}
const showUpgradeButton = isLimitReached && !isPaidUser;
return (
<>
{modals}
<div className="flex h-screen flex-col items-center justify-center px-4 text-center">
{icon}
<h1 className="mb-2 text-2xl font-bold">{title}</h1>
<p className="max-w-sm text-balance text-gray-500">{message}</p>
{showUpgradeButton && (
<div className="my-5">
<button
onClick={() => setShowUpgradeModal(true)}
className="rounded-md bg-yellow-400 px-6 py-2 text-sm font-medium text-black hover:bg-yellow-500"
>
Upgrade to remove Limits
</button>
<p className="mt-5 text-sm text-black">
<a
href="/ai-tutor"
className="font-medium underline underline-offset-2"
>
Back to AI Tutor
</a>
</p>
</div>
)}
{(isNotFound || !showUpgradeButton) && (
<div className="my-5">
<a
href="/ai-tutor"
className="rounded-md bg-black px-6 py-2 text-sm font-medium text-white hover:bg-opacity-80"
>
Create a course with AI
</a>
</div>
)}
</div>
</>
);
}
const isViewingLesson = viewMode === 'module';
return (
<section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50">
{modals}
<div className="border-b border-gray-200 bg-gray-100">
<div className="flex items-center justify-between px-4 py-2">
<a
href="/ai-tutor"
onClick={(e) => {
if (isViewingLesson) {
e.preventDefault();
setViewMode('outline');
}
}}
className="flex flex-row items-center gap-1.5 text-sm font-medium text-gray-700 hover:text-gray-900"
aria-label="Back to generator"
>
<ChevronLeft className="size-4" strokeWidth={2.5} />
Back {isViewingLesson ? 'to Outline' : 'to AI Tutor'}
</a>
<div className="flex items-center gap-2">
<div className="flex flex-row lg:hidden">
<AICourseLimit
onUpgrade={() => setShowUpgradeModal(true)}
onShowLimits={() => setShowAILimitsPopup(true)}
/>
</div>
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="flex items-center justify-center text-gray-400 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
>
{sidebarOpen ? (
<X size={17} strokeWidth={3} />
) : (
<Menu size={17} strokeWidth={3} />
)}
</button>
</div>
</div>
</div>
<header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 max-lg:py-4 lg:h-[80px]">
<div className="flex items-center">
<div className="flex flex-col">
<h1 className="text-balance text-xl font-bold !leading-tight text-gray-900 max-lg:mb-0.5 max-lg:text-lg">
{course.title || 'Loading Course...'}
</h1>
<div className="mt-1 flex flex-row items-center gap-2 text-sm text-gray-600 max-lg:text-xs">
<span className="font-medium">{totalModules} modules</span>
<span className="text-gray-400"></span>
<span className="font-medium">{totalCourseLessons} lessons</span>
{viewMode === 'module' && (
<span className="flex flex-row items-center gap-1 lg:hidden">
<span className="text-gray-400"></span>
<button
className="underline underline-offset-2"
onClick={() => {
setExpandedModules({});
setViewMode('outline');
}}
>
View outline
</button>
</span>
)}
{finishedPercentage > 0 && (
<>
<span className="text-gray-400"></span>
<span className="font-medium text-green-600">
{finishedPercentage}% complete
</span>
</>
)}
</div>
</div>
</div>
<div className="flex gap-2">
<div className="hidden gap-2 lg:flex">
<AICourseLimit
onUpgrade={() => setShowUpgradeModal(true)}
onShowLimits={() => setShowAILimitsPopup(true)}
/>
</div>
{viewMode === 'module' && (
<button
onClick={() => {
setExpandedModules({});
setViewMode('outline');
}}
className="flex flex-shrink-0 items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 max-lg:hidden"
>
<BookOpenCheck size={18} className="mr-2" />
View Course Outline
</button>
)}
</div>
</header>
<div className="flex flex-1 overflow-hidden">
<aside
className={cn(
'fixed inset-y-0 left-0 z-20 w-80 transform overflow-y-auto border-r border-gray-200 bg-white transition-transform duration-200 ease-in-out lg:relative lg:mt-0 lg:translate-x-0',
sidebarOpen ? 'translate-x-0' : '-translate-x-full',
)}
>
<div
className={cn(
'relative flex min-h-[40px] items-center justify-between border-b border-gray-200 px-3',
isLoading && 'striped-loader bg-gray-50',
)}
>
{!isLoading && (
<div className="flex w-full items-center justify-between text-xs text-black">
<span>
<span className="relative z-10 rounded-full bg-yellow-400 px-1.5 py-0.5">
{finishedPercentage}%
</span>{' '}
<span className="relative z-10">Completed</span>
</span>
<span
style={{
width: `${finishedPercentage}%`,
}}
className={cn(
'absolute bottom-0 left-0 top-0',
'bg-gray-200/50',
)}
></span>
{viewMode !== 'outline' && (
<button
onClick={() => {
setExpandedModules({});
setViewMode('outline');
}}
className="flex items-center gap-1 rounded-md bg-gray-200 px-2.5 py-1.5 text-xs transition-colors hover:bg-gray-300"
>
<BookOpenCheck size={14} />
View Outline
</button>
)}
{viewMode === 'outline' && (
<button
onClick={() => {
setExpandedModules({
...expandedModules,
0: true,
});
setActiveModuleIndex(0);
setActiveLessonIndex(0);
setViewMode('module');
}}
className="flex items-center gap-1 rounded-md bg-gray-200 px-2.5 py-1.5 text-xs transition-colors hover:bg-gray-300"
>
<Play size={14} />
Start Course
</button>
)}
</div>
)}
<button
onClick={() => setSidebarOpen(false)}
className="rounded-md p-1 hover:bg-gray-100 lg:hidden"
>
<X size={18} />
</button>
</div>
<AICourseSidebarModuleList
course={course}
courseSlug={courseSlug}
activeModuleIndex={
viewMode === 'module' ? activeModuleIndex : undefined
}
setActiveModuleIndex={setActiveModuleIndex}
activeLessonIndex={
viewMode === 'module' ? activeLessonIndex : undefined
}
setActiveLessonIndex={setActiveLessonIndex}
setSidebarOpen={setSidebarOpen}
viewMode={viewMode}
setViewMode={setViewMode}
expandedModules={expandedModules}
setExpandedModules={setExpandedModules}
isLoading={isLoading}
/>
</aside>
<main
className={cn(
'flex-1 overflow-y-auto p-6 transition-all duration-200 ease-in-out max-lg:p-3',
sidebarOpen ? 'lg:ml-0' : '',
)}
>
{viewMode === 'module' && (
<AICourseLesson
courseSlug={courseSlug!}
progress={aiCourseProgress}
activeModuleIndex={activeModuleIndex}
totalModules={totalModules}
currentModuleTitle={currentModule?.title || ''}
activeLessonIndex={activeLessonIndex}
totalLessons={totalLessons}
currentLessonTitle={currentLesson || ''}
onGoToPrevLesson={goToPrevLesson}
onGoToNextLesson={goToNextLesson}
key={`${courseSlug}-${activeModuleIndex}-${activeLessonIndex}`}
onUpgrade={() => setShowUpgradeModal(true)}
/>
)}
{viewMode === 'outline' && (
<div className="mx-auto rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-3xl">
<div
className={cn(
'relative mb-1 flex items-start justify-between border-b border-gray-100 p-6 max-lg:hidden',
isLoading && 'striped-loader',
)}
>
<div>
<h2 className="mb-1 text-balance text-2xl font-bold max-lg:text-lg max-lg:leading-tight">
{course.title || 'Loading course ..'}
</h2>
<p className="text-sm capitalize text-gray-500">
{course.title ? course.difficulty : 'Please wait ..'}
</p>
</div>
{!isLoading && (
<RegenerateOutline
onRegenerateOutline={onRegenerateOutline}
/>
)}
</div>
{course.title ? (
<div className="flex flex-col p-6 max-lg:mt-0.5 max-lg:p-4">
{course.modules.map((courseModule, moduleIdx) => {
return (
<div
key={moduleIdx}
className="mb-5 pb-4 last:border-0 last:pb-0 max-lg:mb-2"
>
<h2 className="mb-4 text-xl font-bold text-gray-800 max-lg:mb-2 max-lg:text-lg max-lg:leading-tight">
{courseModule.title}
</h2>
<div className="divide-y divide-gray-100">
{courseModule.lessons.map((lesson, lessonIdx) => {
const key = `${slugify(String(moduleIdx))}-${slugify(String(lessonIdx))}`;
const isCompleted = aiCourseProgress.includes(key);
return (
<div
key={key}
className="flex cursor-pointer items-center gap-2 px-2 py-2.5 transition-colors hover:bg-gray-100 max-lg:px-0 max-lg:py-1.5"
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
setExpandedModules((prev) => {
const newState: Record<number, boolean> =
{};
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
newState[moduleIdx] = true;
return newState;
});
setSidebarOpen(false);
setViewMode('module');
}}
>
{!isCompleted && (
<span
className={cn(
'flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs',
)}
>
{lessonIdx + 1}
</span>
)}
{isCompleted && (
<CheckIcon additionalClasses="size-6 flex-shrink-0 text-green-500" />
)}
<p className="flex-1 truncate text-base text-gray-800 max-lg:text-sm">
{lesson.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</p>
<span className="text-sm font-medium text-gray-700 max-lg:hidden">
{isCompleted ? 'View' : 'Start'}
</span>
</div>
);
})}
</div>
</div>
);
})}
</div>
) : (
<div className="flex h-64 items-center justify-center">
<Loader2 size={36} className="animate-spin text-gray-300" />
</div>
)}
</div>
)}
<div className="mb-10 mt-5 mx-auto text-center text-sm text-gray-400">
AI can make mistakes, check imporant info.
</div>
</main>
</div>
{sidebarOpen && (
<div
className="fixed inset-0 z-10 bg-gray-900 bg-opacity-50 lg:hidden"
onClick={() => setSidebarOpen(false)}
></div>
)}
</section>
);
}

@ -0,0 +1,131 @@
.prose ul li > code,
.prose ol li > code,
p code,
a > code,
strong > code,
em > code,
h1 > code,
h2 > code,
h3 > code {
background: #ebebeb !important;
color: currentColor !important;
font-size: 14px;
font-weight: normal !important;
}
.course-ai-content.course-content.prose ul li > code,
.course-ai-content.course-content.prose ol li > code,
.course-ai-content.course-content.prose p code,
.course-ai-content.course-content.prose a > code,
.course-ai-content.course-content.prose strong > code,
.course-ai-content.course-content.prose em > code,
.course-ai-content.course-content.prose h1 > code,
.course-ai-content.course-content.prose h2 > code,
.course-ai-content.course-content.prose h3 > code,
.course-notes-content.prose ul li > code,
.course-notes-content.prose ol li > code,
.course-notes-content.prose p code,
.course-notes-content.prose a > code,
.course-notes-content.prose strong > code,
.course-notes-content.prose em > code,
.course-notes-content.prose h1 > code,
.course-notes-content.prose h2 > code,
.course-notes-content.prose h3 > code {
font-size: 12px !important;
}
.course-ai-content pre {
-ms-overflow-style: none;
scrollbar-width: none;
}
.course-ai-content pre::-webkit-scrollbar {
display: none;
}
.course-ai-content pre,
.course-notes-content pre {
overflow: scroll;
font-size: 15px;
margin: 10px 0;
}
.prose ul li > code:before,
p > code:before,
.prose ul li > code:after,
.prose ol li > code:before,
p > code:before,
.prose ol li > code:after,
.course-content h1 > code:after,
.course-content h1 > code:before,
.course-content h2 > code:after,
.course-content h2 > code:before,
.course-content h3 > code:after,
.course-content h3 > code:before,
.course-content h4 > code:after,
.course-content h4 > code:before,
p > code:after,
a > code:after,
a > code:before {
content: '' !important;
}
.course-content.prose ul li > code,
.course-content.prose ol li > code,
.course-content p code,
.course-content a > code,
.course-content strong > code,
.course-content em > code,
.course-content h1 > code,
.course-content h2 > code,
.course-content h3 > code,
.course-content table code {
background: #f4f4f5 !important;
border: 1px solid #282a36 !important;
color: #282a36 !important;
padding: 2px 4px;
border-radius: 5px;
font-size: 16px !important;
white-space: pre;
font-weight: normal;
}
.course-content blockquote {
font-style: normal;
}
.course-content.prose blockquote h1,
.course-content.prose blockquote h2,
.course-content.prose blockquote h3,
.course-content.prose blockquote h4 {
font-style: normal;
margin-bottom: 8px;
}
.course-content.prose ul li > code:before,
.course-content p > code:before,
.course-content.prose ul li > code:after,
.course-content p > code:after,
.course-content h2 > code:after,
.course-content h2 > code:before,
.course-content table code:before,
.course-content table code:after,
.course-content a > code:after,
.course-content a > code:before,
.course-content h2 code:after,
.course-content h2 code:before,
.course-content h2 code:after,
.course-content h2 code:before {
content: '' !important;
}
.course-content table {
border-collapse: collapse;
border: 1px solid black;
border-radius: 5px;
}
.course-content table td,
.course-content table th {
padding: 5px 10px;
}

@ -0,0 +1,74 @@
import { ArrowRightIcon, BotIcon } from 'lucide-react';
import { useState } from 'react';
import {
AICourseFollowUpPopover,
type AIChatHistoryType,
} from './AICourseFollowUpPopover';
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
type AICourseFollowUpProps = {
courseSlug: string;
moduleTitle: string;
lessonTitle: string;
};
export function AICourseFollowUp(props: AICourseFollowUpProps) {
const { courseSlug, moduleTitle, lessonTitle } = props;
const [isOpen, setIsOpen] = useState(false);
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
const [courseAIChatHistory, setCourseAIChatHistory] = useState<
AIChatHistoryType[]
>([
{
role: 'assistant',
content:
'Hey, I am your AI instructor. Here are some examples of what you can ask me about 🤖',
isDefault: true,
},
]);
return (
<div className="relative">
<button
className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200 max-lg:mt-3 max-lg:text-sm"
onClick={() => setIsOpen(true)}
>
<BotIcon className="h-4 w-4" />
<span>Ask AI some follow up questions</span>
<ArrowRightIcon className="ml-auto h-4 w-4 max-sm:hidden" />
</button>
{showUpgradeModal && (
<UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
)}
{isOpen && (
<AICourseFollowUpPopover
courseSlug={courseSlug}
moduleTitle={moduleTitle}
lessonTitle={lessonTitle}
courseAIChatHistory={courseAIChatHistory}
setCourseAIChatHistory={setCourseAIChatHistory}
onUpgradeClick={() => {
setIsOpen(false);
setShowUpgradeModal(true);
}}
onOutsideClick={() => {
if (!isOpen) {
return;
}
setIsOpen(false);
}}
/>
)}
{isOpen && (
<div className="pointer-events-none fixed inset-0 z-50 bg-black/50" />
)}
</div>
);
}

@ -0,0 +1,390 @@
import { useQuery } from '@tanstack/react-query';
import {
BookOpen,
Bot,
Code,
Globe, Hammer,
HelpCircle,
LockIcon,
Send,
} from 'lucide-react';
import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
import { flushSync } from 'react-dom';
import TextareaAutosize from 'react-textarea-autosize';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { useToast } from '../../hooks/use-toast';
import { readStream } from '../../lib/ai';
import { cn } from '../../lib/classname';
import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
import {
markdownToHtml,
markdownToHtmlWithHighlighting,
} from '../../lib/markdown';
import { getAiCourseLimitOptions } from '../../queries/ai-course';
import { queryClient } from '../../stores/query-client';
export type AllowedAIChatRole = 'user' | 'assistant';
export type AIChatHistoryType = {
role: AllowedAIChatRole;
content: string;
isDefault?: boolean;
html?: string;
};
type AICourseFollowUpPopoverProps = {
courseSlug: string;
moduleTitle: string;
lessonTitle: string;
courseAIChatHistory: AIChatHistoryType[];
setCourseAIChatHistory: (value: AIChatHistoryType[]) => void;
onOutsideClick?: () => void;
onUpgradeClick: () => void;
};
export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
const {
courseSlug,
moduleTitle,
lessonTitle,
onOutsideClick,
onUpgradeClick,
courseAIChatHistory,
setCourseAIChatHistory,
} = props;
const toast = useToast();
const containerRef = useRef<HTMLDivElement | null>(null);
const scrollareaRef = useRef<HTMLDivElement | null>(null);
const [isStreamingMessage, setIsStreamingMessage] = useState(false);
const [message, setMessage] = useState('');
const [streamedMessage, setStreamedMessage] = useState('');
useOutsideClick(containerRef, onOutsideClick);
const { data: tokenUsage, isLoading } = useQuery(
getAiCourseLimitOptions(),
queryClient,
);
const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
const handleChatSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const trimmedMessage = message.trim();
if (
!trimmedMessage ||
isStreamingMessage ||
!isLoggedIn() ||
isLimitExceeded ||
isLoading
) {
return;
}
const newMessages: AIChatHistoryType[] = [
...courseAIChatHistory,
{
role: 'user',
content: trimmedMessage,
},
];
flushSync(() => {
setCourseAIChatHistory(newMessages);
setMessage('');
});
scrollToBottom();
completeCourseAIChat(newMessages);
};
const scrollToBottom = () => {
scrollareaRef.current?.scrollTo({
top: scrollareaRef.current.scrollHeight,
behavior: 'smooth',
});
};
const completeCourseAIChat = async (messages: AIChatHistoryType[]) => {
setIsStreamingMessage(true);
const response = await fetch(
`${import.meta.env.PUBLIC_API_URL}/v1-follow-up-ai-course/${courseSlug}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify({
moduleTitle,
lessonTitle,
messages: messages.slice(-10),
}),
},
);
if (!response.ok) {
const data = await response.json();
toast.error(data?.message || 'Something went wrong');
setCourseAIChatHistory([...messages].slice(0, messages.length - 1));
setIsStreamingMessage(false);
if (data.status === 401) {
removeAuthToken();
window.location.reload();
}
}
const reader = response.body?.getReader();
if (!reader) {
setIsStreamingMessage(false);
toast.error('Something went wrong');
return;
}
await readStream(reader, {
onStream: async (content) => {
flushSync(() => {
setStreamedMessage(content);
});
scrollToBottom();
},
onStreamEnd: async (content) => {
const newMessages: AIChatHistoryType[] = [
...messages,
{
role: 'assistant',
content,
html: await markdownToHtmlWithHighlighting(content),
},
];
flushSync(() => {
setStreamedMessage('');
setIsStreamingMessage(false);
setCourseAIChatHistory(newMessages);
});
queryClient.invalidateQueries(getAiCourseLimitOptions());
scrollToBottom();
},
});
setIsStreamingMessage(false);
};
useEffect(() => {
scrollToBottom();
}, []);
return (
<div
className="absolute bottom-0 left-0 z-[99] flex h-[500px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow"
ref={containerRef}
>
<div className="flex items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 text-sm">
<h4 className="text-base font-medium">Course AI</h4>
</div>
<div
className="scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-thin relative grow overflow-y-auto"
ref={scrollareaRef}
>
<div className="absolute inset-0 flex flex-col">
<div className="flex grow flex-col justify-end">
<div className="flex flex-col justify-end gap-2 px-3 py-2">
{courseAIChatHistory.map((chat, index) => {
return (
<>
<AIChatCard
key={`chat-${index}`}
role={chat.role}
content={chat.content}
html={chat.html}
/>
{chat.isDefault && (
<div className="mb-1 mt-0.5">
<div className="grid grid-cols-2 gap-2">
{capabilities.map((capability, index) => (
<CapabilityCard
key={`capability-${index}`}
{...capability}
/>
))}
</div>
</div>
)}
</>
);
})}
{isStreamingMessage && !streamedMessage && (
<AIChatCard role="assistant" content="Thinking..." />
)}
{streamedMessage && (
<AIChatCard role="assistant" content={streamedMessage} />
)}
</div>
</div>
</div>
</div>
<form
className="relative flex items-start border-t border-gray-200 text-sm"
onSubmit={handleChatSubmit}
>
{isLimitExceeded && (
<div className="absolute inset-0 flex items-center justify-center gap-2 bg-black text-white">
<LockIcon className="size-4 cursor-not-allowed" strokeWidth={2.5} />
<p className="cursor-not-allowed">Limit reached for today</p>
<button
onClick={() => {
onUpgradeClick();
}}
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
>
Upgrade for more
</button>
</div>
)}
<TextareaAutosize
className="h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-none"
placeholder="Ask AI anything about the lesson..."
value={message}
onChange={(e) => setMessage(e.target.value)}
autoFocus={true}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
handleChatSubmit(e as unknown as FormEvent<HTMLFormElement>);
}
}}
/>
<button
type="submit"
disabled={isStreamingMessage || isLimitExceeded}
className="flex aspect-square size-[41px] items-center justify-center text-zinc-500 hover:text-black"
>
<Send className="size-4 stroke-[2.5]" />
</button>
</form>
</div>
);
}
type AIChatCardProps = {
role: AllowedAIChatRole;
content: string;
html?: string;
};
function AIChatCard(props: AIChatCardProps) {
const { role, content, html: defaultHtml } = props;
const html = useMemo(() => {
if (defaultHtml) {
return defaultHtml;
}
return markdownToHtml(content, false);
}, [content, defaultHtml]);
return (
<div
className={cn(
'flex flex-col rounded-lg',
role === 'user' ? 'bg-gray-300/30' : 'bg-yellow-500/30',
)}
>
<div className="flex items-start gap-2.5 p-3">
<div
className={cn(
'flex size-6 shrink-0 items-center justify-center rounded-full',
role === 'user'
? 'bg-gray-200 text-black'
: 'bg-yellow-400 text-black',
)}
>
<Bot className="size-4 stroke-[2.5]" />
</div>
<div
className="course-content course-ai-content prose prose-sm mt-0.5 max-w-full overflow-hidden text-sm"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
);
}
type CapabilityCardProps = {
icon: React.ReactNode;
title: string;
description: string;
className?: string;
};
function CapabilityCard({
icon,
title,
description,
className,
}: CapabilityCardProps) {
return (
<div
className={cn(
'flex flex-col gap-2 rounded-lg bg-yellow-500/10 p-3',
className,
)}
>
<div className="flex items-center gap-2">
{icon}
<span className="text-[13px] font-medium leading-none text-black">
{title}
</span>
</div>
<p className="text-[12px] leading-normal text-gray-600">{description}</p>
</div>
);
}
const capabilities = [
{
icon: (
<HelpCircle
className="size-4 shrink-0 text-yellow-600"
strokeWidth={2.5}
/>
),
title: 'Clarify Concepts',
description: "If you don't understand a concept, ask me to clarify it",
},
{
icon: (
<BookOpen className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
),
title: 'More Details',
description: 'Get deeper insights about topics covered in the lesson',
},
{
icon: (
<Hammer className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
),
title: 'Real-world Examples',
description: 'Ask for real-world examples to understand better',
},
{
icon: <Bot className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />,
title: 'Best Practices',
description: 'Learn about best practices and common pitfalls',
},
] as const;

@ -0,0 +1,387 @@
import { useMutation } from '@tanstack/react-query';
import {
CheckIcon,
ChevronLeft,
ChevronRight,
Loader2Icon,
LockIcon,
XIcon,
} from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import type { AICourseDocument } from '../../api/ai-roadmap';
import { readStream } from '../../lib/ai';
import { cn } from '../../lib/classname';
import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
import {
markdownToHtml,
markdownToHtmlWithHighlighting,
} from '../../lib/markdown';
import { httpPatch } from '../../lib/query-http';
import { slugify } from '../../lib/slugger';
import {
getAiCourseLimitOptions,
getAiCourseOptions,
} from '../../queries/ai-course';
import { useIsPaidUser } from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
import { AICourseFollowUp } from './AICourseFollowUp';
import './AICourseFollowUp.css';
import { RegenerateLesson } from './RegenerateLesson';
type AICourseLessonProps = {
courseSlug: string;
progress: string[];
activeModuleIndex: number;
totalModules: number;
currentModuleTitle: string;
activeLessonIndex: number;
totalLessons: number;
currentLessonTitle: string;
onGoToPrevLesson: () => void;
onGoToNextLesson: () => void;
onUpgrade: () => void;
};
export function AICourseLesson(props: AICourseLessonProps) {
const {
courseSlug,
progress = [],
activeModuleIndex,
totalModules,
currentModuleTitle,
activeLessonIndex,
totalLessons,
currentLessonTitle,
onGoToPrevLesson,
onGoToNextLesson,
onUpgrade,
} = props;
const [isLoading, setIsLoading] = useState(true);
const [isGenerating, setIsGenerating] = useState(false);
const [error, setError] = useState('');
const [lessonHtml, setLessonHtml] = useState('');
const lessonId = `${slugify(String(activeModuleIndex))}-${slugify(String(activeLessonIndex))}`;
const isLessonDone = progress?.includes(lessonId);
const { isPaidUser } = useIsPaidUser();
const abortController = useMemo(
() => new AbortController(),
[activeModuleIndex, activeLessonIndex],
);
const generateAiCourseContent = async (
isForce?: boolean,
customPrompt?: string,
) => {
setIsLoading(true);
setError('');
setLessonHtml('');
if (!isLoggedIn()) {
setIsLoading(false);
setError('Please login to generate course content');
return;
}
if (!currentModuleTitle || !currentLessonTitle) {
setIsLoading(false);
setError('Invalid module title or lesson title');
return;
}
const response = await fetch(
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course-lesson/${courseSlug}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
signal: abortController.signal,
credentials: 'include',
body: JSON.stringify({
moduleIndex: activeModuleIndex,
lessonIndex: activeLessonIndex,
isForce,
customPrompt,
}),
},
);
if (!response.ok) {
const data = await response.json();
setError(data?.message || 'Something went wrong');
setIsLoading(false);
// Logout user if token is invalid
if (data.status === 401) {
removeAuthToken();
window.location.reload();
}
return;
}
if (!response.body) {
setIsLoading(false);
setError('No response body received');
return;
}
try {
const reader = response.body.getReader();
setIsLoading(false);
setIsGenerating(true);
await readStream(reader, {
onStream: async (result) => {
if (abortController.signal.aborted) {
return;
}
setLessonHtml(markdownToHtml(result, false));
},
onStreamEnd: async (result) => {
if (abortController.signal.aborted) {
return;
}
setLessonHtml(await markdownToHtmlWithHighlighting(result));
queryClient.invalidateQueries(getAiCourseLimitOptions());
setIsGenerating(false);
},
});
} catch (e) {
setError(e instanceof Error ? e.message : 'Something went wrong');
setIsLoading(false);
}
};
const { mutate: toggleDone, isPending: isTogglingDone } = useMutation(
{
mutationFn: () => {
return httpPatch<AICourseDocument>(
`/v1-toggle-done-ai-lesson/${courseSlug}`,
{
moduleIndex: activeModuleIndex,
lessonIndex: activeLessonIndex,
},
);
},
onSuccess: (data) => {
queryClient.setQueryData(
getAiCourseOptions({ aiCourseSlug: courseSlug }).queryKey,
data,
);
},
},
queryClient,
);
useEffect(() => {
generateAiCourseContent();
}, [currentModuleTitle, currentLessonTitle]);
useEffect(() => {
return () => {
abortController.abort();
};
}, [abortController]);
const cantGoForward =
(activeModuleIndex === totalModules - 1 &&
activeLessonIndex === totalLessons - 1) ||
isGenerating ||
isLoading;
const cantGoBack =
(activeModuleIndex === 0 && activeLessonIndex === 0) || isGenerating || isLoading;
return (
<div className="mx-auto max-w-4xl">
<div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm max-lg:px-4 max-lg:pb-4 max-lg:pt-3">
{(isGenerating || isLoading) && (
<div className="absolute right-3 top-3 flex items-center justify-center">
<Loader2Icon
size={18}
strokeWidth={3}
className="animate-spin text-gray-400/70"
/>
</div>
)}
<div className="mb-4 flex items-center justify-between">
<div className="text-sm text-gray-500">
Lesson {activeLessonIndex + 1} of {totalLessons}
</div>
{!isGenerating && !isLoading && (
<div className="absolute right-3 top-3 flex items-center justify-between gap-2">
<RegenerateLesson
onRegenerateLesson={(prompt) => {
generateAiCourseContent(true, prompt);
}}
/>
<button
disabled={isLoading || isTogglingDone}
className={cn(
'flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50 max-lg:text-xs',
isLessonDone
? 'bg-red-500 hover:bg-red-600'
: 'bg-green-500 hover:bg-green-600',
)}
onClick={() => toggleDone()}
>
{isTogglingDone ? (
<>
<Loader2Icon
size={16}
strokeWidth={3}
className="animate-spin text-white"
/>
Please wait ...
</>
) : (
<>
{isLessonDone ? (
<>
<XIcon size={16} />
Mark as Undone
</>
) : (
<>
<CheckIcon size={16} />
Mark as Done
</>
)}
</>
)}
</button>
</div>
)}
</div>
<h1 className="mb-6 text-balance text-3xl font-semibold max-lg:mb-3 max-lg:text-xl">
{currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</h1>
{!error && isLoggedIn() && (
<div
className="course-content prose prose-lg mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800 max-lg:mt-4 max-lg:text-base max-lg:prose-h2:mt-3 max-lg:prose-h2:text-lg max-lg:prose-h3:text-base max-lg:prose-pre:px-3 max-lg:prose-pre:text-sm"
dangerouslySetInnerHTML={{ __html: lessonHtml }}
/>
)}
{error && isLoggedIn() && (
<div className="mt-8 flex min-h-[300px] items-center justify-center rounded-xl bg-red-50/80">
{error.includes('reached the limit') ? (
<div className="flex max-w-sm flex-col items-center text-center">
<h2 className="text-xl font-semibold text-red-600">
Limit reached
</h2>
<p className="my-3 text-red-600">
You have reached the AI usage limit for today.
{!isPaidUser && <>Please upgrade your account to continue.</>}
{isPaidUser && <>Please wait until tomorrow to continue.</>}
</p>
{!isPaidUser && (
<button
onClick={() => {
onUpgrade();
}}
className="rounded-full bg-red-600 px-4 py-1 text-white hover:bg-red-700"
>
Upgrade Account
</button>
)}
</div>
) : (
<p className="text-red-600">{error}</p>
)}
</div>
)}
{!isLoggedIn() && (
<div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
<LockIcon className="size-7 stroke-[2] text-gray-400/90" />
<p className="text-sm text-gray-500">
Please login to generate course content
</p>
</div>
)}
<div className="mt-8 flex items-center justify-between">
<button
onClick={onGoToPrevLesson}
disabled={cantGoBack}
className={cn(
'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
cantGoBack
? 'cursor-not-allowed text-gray-400'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200',
)}
>
<ChevronLeft size={16} className="mr-2" />
Previous <span className="hidden lg:inline">&nbsp;Lesson</span>
</button>
<div>
<button
onClick={() => {
if (!isLessonDone) {
toggleDone(undefined, {
onSuccess: () => {
onGoToNextLesson();
},
});
} else {
onGoToNextLesson();
}
}}
disabled={cantGoForward || isTogglingDone}
className={cn(
'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
cantGoForward
? 'cursor-not-allowed text-gray-400'
: 'bg-gray-800 text-white hover:bg-gray-700',
)}
>
{isTogglingDone ? (
<>
<Loader2Icon
size={16}
strokeWidth={3}
className="animate-spin text-white"
/>
Please wait ...
</>
) : (
<>
Next <span className="hidden lg:inline">&nbsp;Lesson</span>
<ChevronRight size={16} className="ml-2" />
</>
)}
</button>
</div>
</div>
</div>
{!isGenerating && !isLoading && (
<AICourseFollowUp
courseSlug={courseSlug}
moduleTitle={currentModuleTitle}
lessonTitle={currentLessonTitle}
/>
)}
</div>
);
}

@ -0,0 +1,81 @@
import { useQuery } from '@tanstack/react-query';
import { Gift, Info } from 'lucide-react';
import { getPercentage } from '../../lib/number';
import { getAiCourseLimitOptions } from '../../queries/ai-course';
import { billingDetailsOptions } from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
type AICourseLimitProps = {
onUpgrade: () => void;
onShowLimits: () => void;
};
export function AICourseLimit(props: AICourseLimitProps) {
const { onUpgrade, onShowLimits } = props;
const { data: limits, isLoading } = useQuery(
getAiCourseLimitOptions(),
queryClient,
);
const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
useQuery(billingDetailsOptions(), queryClient);
if (isLoading || !limits || isBillingDetailsLoading || !userBillingDetails) {
return (
<div className="hidden h-[38px] w-[208.09px] animate-pulse rounded-lg border border-gray-200 bg-gray-200 lg:block"></div>
);
}
const { used, limit } = limits;
const totalPercentage = getPercentage(used, limit);
// has consumed 85% of the limit
const isNearLimit = used >= limit * 0.85;
const isPaidUser = userBillingDetails.status === 'active';
return (
<>
{!isPaidUser ||
(isNearLimit && (
<button
className="mr-1 flex items-center gap-1 text-sm font-medium underline underline-offset-2 lg:hidden"
onClick={() => onShowLimits()}
>
<Info className="size-4" />
{totalPercentage}% limit used
</button>
))}
{(!isPaidUser || isNearLimit) && (
<button
onClick={() => {
onShowLimits();
}}
className="relative hidden h-full min-h-[38px] cursor-pointer items-center overflow-hidden rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 lg:flex"
>
<span className="relative z-10">
{totalPercentage}% of the daily limit used
</span>
<div
className="absolute inset-0 h-full bg-gray-200/80"
style={{
width: `${totalPercentage}%`,
}}
></div>
</button>
)}
{!isPaidUser && (
<button
className="hidden items-center justify-center gap-1 rounded-md bg-yellow-400 px-4 py-1 text-sm font-medium underline-offset-2 hover:bg-yellow-500 lg:flex"
onClick={() => onUpgrade()}
>
<Gift className="size-4" />
Upgrade
</button>
)}
</>
);
}

@ -0,0 +1,46 @@
import { SearchIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { useDebounceValue } from '../../hooks/use-debounce';
type AICourseSearchProps = {
value: string;
onChange: (value: string) => void;
};
export function AICourseSearch(props: AICourseSearchProps) {
const { value: defaultValue, onChange } = props;
const [searchTerm, setSearchTerm] = useState(defaultValue);
const debouncedSearchTerm = useDebounceValue(searchTerm, 500);
useEffect(() => {
setSearchTerm(defaultValue);
}, [defaultValue]);
useEffect(() => {
if (debouncedSearchTerm && debouncedSearchTerm.length < 3) {
return;
}
if (debouncedSearchTerm === defaultValue) {
return;
}
onChange(debouncedSearchTerm);
}, [debouncedSearchTerm]);
return (
<div className="relative w-64 max-sm:hidden">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<SearchIcon className="h-4 w-4 text-gray-400" />
</div>
<input
type="text"
className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pl-10 pr-3 leading-5 placeholder-gray-500 focus:border-gray-300 focus:outline-none focus:ring-blue-500 disabled:opacity-70 sm:text-sm"
placeholder="Search your courses..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
);
}

@ -0,0 +1,204 @@
import { type Dispatch, type SetStateAction } from 'react';
import type { AiCourse } from '../../lib/ai';
import { Check, ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
import { cn } from '../../lib/classname';
import { slugify } from '../../lib/slugger';
import { CheckIcon } from '../ReactIcons/CheckIcon';
import { CircularProgress } from './CircularProgress';
type AICourseModuleListProps = {
course: AiCourse;
courseSlug?: string;
activeModuleIndex: number | undefined;
setActiveModuleIndex: (index: number) => void;
activeLessonIndex: number | undefined;
setActiveLessonIndex: (index: number) => void;
setSidebarOpen: (open: boolean) => void;
viewMode: 'module' | 'outline';
setViewMode: (mode: 'module' | 'outline') => void;
expandedModules: Record<number, boolean>;
setExpandedModules: Dispatch<SetStateAction<Record<number, boolean>>>;
isLoading: boolean;
};
export function AICourseSidebarModuleList(props: AICourseModuleListProps) {
const {
course,
courseSlug,
activeModuleIndex,
setActiveModuleIndex,
activeLessonIndex,
setActiveLessonIndex,
setSidebarOpen,
setViewMode,
expandedModules,
setExpandedModules,
isLoading,
} = props;
const aiCourseProgress = course.done || [];
const toggleModule = (index: number) => {
setExpandedModules((prev) => {
// If this module is already expanded, collapse it
if (prev[index]) {
return {
...prev,
[index]: false,
};
}
// Otherwise, collapse all modules and expand only this one
const newState: Record<number, boolean> = {};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
// Expand only the clicked module
newState[index] = true;
return newState;
});
};
const done = aiCourseProgress || [];
return (
<nav className="bg-gray-100">
{course.modules.map((courseModule, moduleIdx) => {
const totalLessons = courseModule.lessons.length;
const completedLessons = courseModule.lessons.filter(
(lesson, lessonIdx) => {
const key = `${slugify(String(moduleIdx))}-${slugify(String(lessonIdx))}`;
return done.includes(key);
},
).length;
const percentage = Math.round((completedLessons / totalLessons) * 100);
const isActive = expandedModules[moduleIdx];
const isModuleCompleted = completedLessons === totalLessons;
return (
<div key={moduleIdx} className="rounded-md">
<button
onClick={() => toggleModule(moduleIdx)}
className={cn(
'relative z-10 flex w-full cursor-pointer flex-row items-center gap-2 border-b border-b-gray-200 bg-white px-2 py-3 text-base text-gray-600 hover:bg-gray-100',
activeModuleIndex === moduleIdx
? 'text-gray-900'
: 'text-gray-700',
moduleIdx === 0 && 'pt-4',
)}
>
<div className="flex min-w-0 flex-1 items-center gap-2">
<div className="flex-shrink-0">
<CircularProgress
percentage={percentage}
isVisible={!isModuleCompleted}
isActive={isActive}
isLoading={isLoading}
>
<span
className={cn(
'flex size-[21px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs font-semibold text-white',
{
'bg-black': isActive,
'bg-green-600': isModuleCompleted,
},
)}
>
{!isModuleCompleted && moduleIdx + 1}
{isModuleCompleted && (
<Check className="size-3 stroke-[3] text-white" />
)}
</span>
</CircularProgress>
</div>
<span className="flex flex-1 items-center break-words text-left text-sm leading-relaxed">
{courseModule.title?.replace(/^Module\s*?\d+[\.:]\s*/, '')}
</span>
</div>
<div className="ml-auto self-center">
{expandedModules[moduleIdx] ? (
<ChevronDownIcon size={16} className="flex-shrink-0" />
) : (
<ChevronRightIcon size={16} className="flex-shrink-0" />
)}
</div>
</button>
{/* Lessons */}
{expandedModules[moduleIdx] && (
<div className="flex flex-col border-b border-b-gray-200 bg-gray-100">
{courseModule.lessons.map((lesson, lessonIdx) => {
const key = `${slugify(String(moduleIdx))}-${slugify(String(lessonIdx))}`;
const isCompleted = done.includes(key);
return (
<button
key={key}
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
newState[moduleIdx] = true;
return newState;
});
setSidebarOpen(false);
setViewMode('module');
}}
className={cn(
'flex w-full cursor-pointer items-center gap-2.5 py-3 pl-3.5 pr-2 text-left text-sm leading-normal',
activeModuleIndex === moduleIdx &&
activeLessonIndex === lessonIdx
? 'bg-gray-200 text-black'
: 'text-gray-600 hover:bg-gray-200/70',
)}
>
{isCompleted ? (
<CheckIcon
additionalClasses={cn(
'size-[18px] relative bg-white rounded-full top-[2px] flex-shrink-0 text-green-600',
{
'text-black':
activeModuleIndex === moduleIdx &&
activeLessonIndex === lessonIdx,
},
)}
/>
) : (
<span
className={cn(
'flex size-[18px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs font-semibold text-white',
{
'bg-black':
activeModuleIndex === moduleIdx &&
activeLessonIndex === lessonIdx,
},
)}
>
{lessonIdx + 1}
</span>
)}
<span className="break-words">
{lesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</span>
</button>
);
})}
</div>
)}
</div>
);
})}
</nav>
);
}

@ -0,0 +1,103 @@
import { Gift } from 'lucide-react';
import { Modal } from '../Modal';
import { formatCommaNumber } from '../../lib/number';
import { billingDetailsOptions } from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
import { useQuery } from '@tanstack/react-query';
import { getAiCourseLimitOptions } from '../../queries/ai-course';
type AILimitsPopupProps = {
onClose: () => void;
onUpgrade: () => void;
};
export function AILimitsPopup(props: AILimitsPopupProps) {
const { onClose, onUpgrade } = props;
const { data: limits, isLoading } = useQuery(
getAiCourseLimitOptions(),
queryClient,
);
const { used, limit } = limits ?? { used: 0, limit: 0 };
const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
useQuery(billingDetailsOptions(), queryClient);
const isPaidUser = userBillingDetails?.status === 'active';
return (
<Modal
onClose={onClose}
wrapperClassName="rounded-xl max-w-xl w-full h-auto"
bodyClassName="p-6"
overlayClassName="items-start md:items-center"
>
<h2 className="mb-8 text-center text-xl font-semibold">
Daily AI Limits
</h2>
{/* Usage Progress Bar */}
<div className="mb-6">
<div className="mb-2 flex justify-between">
<span className="text-sm font-medium">
Usage: {formatCommaNumber(used)}&nbsp;/&nbsp;
{formatCommaNumber(limit)} tokens
</span>
<span className="text-sm font-medium">
{Math.round((used / limit) * 100)}%
</span>
</div>
<div className="h-2.5 w-full rounded-full bg-gray-200">
<div
className="h-2.5 rounded-full bg-yellow-500"
style={{ width: `${Math.min(100, (used / limit) * 100)}%` }}
></div>
</div>
</div>
{/* Usage Stats */}
<div className="rounded-lg bg-gray-50 p-4">
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Used Today</p>
<p className="text-2xl font-bold">{formatCommaNumber(used)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Daily Limit</p>
<p className="text-2xl font-bold">{formatCommaNumber(limit)}</p>
</div>
</div>
</div>
{/* Explanation */}
<div className="mt-2">
<div className="space-y-3 text-gray-600">
<p className="text-sm">
Limit resets every 24 hours.{' '}
{!isPaidUser && 'Consider upgrading for more tokens.'}
</p>
</div>
</div>
{/* Action Button */}
<div className="mt-auto flex flex-col gap-2 pt-4">
{!isPaidUser && (
<button
onClick={onUpgrade}
className="flex w-full items-center justify-center gap-2 rounded-lg bg-yellow-400 px-4 py-2.5 text-sm font-medium text-black transition-colors hover:bg-yellow-500"
>
<Gift className="size-4" />
Upgrade to Unlimited
</button>
)}
<button
onClick={onClose}
className="w-full rounded-lg bg-gray-200 px-4 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-300"
>
Close
</button>
</div>
</Modal>
);
}

@ -0,0 +1,57 @@
import { cn } from '../../lib/classname';
export function ChapterNumberSkeleton() {
return (
<div className="h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200" />
);
}
type CircularProgressProps = {
percentage: number;
children: React.ReactNode;
isVisible?: boolean;
isActive?: boolean;
isLoading?: boolean;
};
export function CircularProgress(props: CircularProgressProps) {
const {
percentage,
children,
isVisible = true,
isActive = false,
isLoading = false,
} = props;
const circumference = 2 * Math.PI * 13;
const strokeDasharray = `${circumference}`;
const strokeDashoffset = circumference - (percentage / 100) * circumference;
return (
<div className="relative flex h-[28px] w-[28px] flex-shrink-0 items-center justify-center">
{isVisible && !isLoading && (
<svg className="absolute h-full w-full -rotate-90">
<circle
cx="14"
cy="14"
r="13"
stroke="currentColor"
strokeWidth="1.75"
fill="none"
className={cn('text-gray-400/70', {
'text-black': isActive,
})}
style={{
strokeDasharray,
strokeDashoffset,
transition: 'stroke-dashoffset 0.3s ease',
}}
/>
</svg>
)}
{!isLoading && children}
{isLoading && <ChapterNumberSkeleton />}
</div>
);
}

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save