Merge branch 'kamranahmedse:master' into master

pull/7761/head
Hang 1 month ago committed by GitHub
commit 59a6e690c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 2
      .astro/settings.json
  2. 52
      package.json
  3. 901
      pnpm-lock.yaml
  4. BIN
      public/images/gifs/party-popper.gif
  5. 0
      public/images/gifs/rocket.gif
  6. BIN
      public/images/gifs/star.gif
  7. BIN
      public/images/gifs/starstruck.gif
  8. BIN
      public/images/gifs/sunglasses.gif
  9. BIN
      public/pdfs/roadmaps/ai-engineer.pdf
  10. 20
      public/roadmap-content/ai-data-scientist.json
  11. 609
      public/roadmap-content/ai-engineer.json
  12. 1062
      public/roadmap-content/android.json
  13. 10
      public/roadmap-content/api-design.json
  14. 171
      public/roadmap-content/backend.json
  15. 32
      public/roadmap-content/computer-science.json
  16. 4
      public/roadmap-content/cyber-security.json
  17. 44
      public/roadmap-content/devops.json
  18. 270
      public/roadmap-content/frontend.json
  19. 54
      public/roadmap-content/full-stack.json
  20. 10
      public/roadmap-content/game-developer.json
  21. 5
      public/roadmap-content/git-github.json
  22. 35
      public/roadmap-content/ios.json
  23. 24
      public/roadmap-content/postgresql-dba.json
  24. 332
      public/roadmap-content/python.json
  25. 149
      public/roadmap-content/react.json
  26. 1638
      public/roadmap-content/redis.json
  27. 61
      public/roadmap-content/software-architect.json
  28. 4
      public/roadmap-content/typescript.json
  29. 2
      public/roadmap-content/vue.json
  30. BIN
      public/roadmaps/ai-engineer.png
  31. 17
      src/api/leaderboard.ts
  32. 22
      src/components/AccountStreak/AccountStreak.tsx
  33. 88
      src/components/AccountStreak/InviteFriends.tsx
  34. 8
      src/components/Activity/ActivityStream.tsx
  35. 2
      src/components/Activity/EmptyActivity.tsx
  36. 21
      src/components/Activity/EmptyStream.tsx
  37. 19
      src/components/AuthenticationFlow/EmailSignupForm.tsx
  38. 2
      src/components/Changelog/ChangelogLaunch.astro
  39. 2
      src/components/ChangelogBanner.astro
  40. 4
      src/components/CreateTeam/RoadmapSelector.tsx
  41. 22
      src/components/CreateTeam/SelectRoadmapModal.tsx
  42. 42
      src/components/Dashboard/DashboardPage.tsx
  43. 303
      src/components/Dashboard/DashboardTeamRoadmaps.tsx
  44. 15
      src/components/Dashboard/PersonalDashboard.tsx
  45. 116
      src/components/Dashboard/TeamDashboard.tsx
  46. 177
      src/components/Leaderboard/LeaderboardPage.tsx
  47. 16
      src/components/Navigation/Navigation.astro
  48. 20
      src/components/NavigationDropdown.tsx
  49. 50
      src/components/Projects/ProjectCard.tsx
  50. 51
      src/components/Projects/ProjectsList.tsx
  51. 1
      src/components/Projects/ProjectsPage.tsx
  52. 33
      src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx
  53. 5
      src/components/Roadmaps/RoadmapsPage.tsx
  54. 4
      src/components/TeamActivity/TeamActivityItem.tsx
  55. 61
      src/components/TeamActivity/TeamActivityPage.tsx
  56. 2
      src/components/TeamActivity/TeamEmptyStream.tsx
  57. 11
      src/components/TeamMemberDetails/TeamMemberEmptyPage.tsx
  58. 9
      src/components/TeamMembers/InviteMemberPopup.tsx
  59. 8
      src/components/TeamRoadmapsList/TeamRoadmaps.tsx
  60. 1
      src/components/TopicDetail/TopicDetail.tsx
  61. 13
      src/components/TopicDetail/TopicDetailLink.tsx
  62. 4
      src/data/best-practices/api-security/api-security.json
  63. 2
      src/data/best-practices/api-security/content/jwt-algorithm.md
  64. 2
      src/data/best-practices/api-security/content/jwt-payload.md
  65. 2
      src/data/best-practices/api-security/content/payload-size.md
  66. 25
      src/data/changelogs/ai-engineer-roadmap.md
  67. 2
      src/data/changelogs/redis-roadmap.md
  68. 2
      src/data/guides/backend-frameworks.md
  69. 4
      src/data/guides/backend-project-ideas.md
  70. 2
      src/data/guides/backend-technologies.md
  71. 2
      src/data/guides/devops-career-path.md
  72. 2
      src/data/guides/devops-engineer.md
  73. 6
      src/data/guides/devops-principles.md
  74. 2
      src/data/guides/devops-skills.md
  75. 2
      src/data/guides/frontend-frameworks.md
  76. 46
      src/data/projects/automated-backups.md
  77. 44
      src/data/projects/basic-dns.md
  78. 5
      src/data/projects/basic-dockerfile.md
  79. 37
      src/data/projects/blue-green-deployment.md
  80. 54
      src/data/projects/configuration-management.md
  81. 64
      src/data/projects/dockerized-service-deployment.md
  82. 56
      src/data/projects/dummy-systemd-service.md
  83. 67
      src/data/projects/ec2-instance.md
  84. 2
      src/data/projects/expense-tracker-api.md
  85. 2
      src/data/projects/fitness-workout-tracker.md
  86. 47
      src/data/projects/github-actions-deployment-workflow.md
  87. 39
      src/data/projects/iac-digitalocean.md
  88. 8
      src/data/projects/image-processing-service.md
  89. 6
      src/data/projects/log-archive-tool.md
  90. 70
      src/data/projects/monitoring.md
  91. 56
      src/data/projects/multi-container-service.md
  92. 47
      src/data/projects/multiservice-docker.md
  93. 68
      src/data/projects/nginx-log-analyser.md
  94. 63
      src/data/projects/nodejs-service-deployment.md
  95. 38
      src/data/projects/server-stats.md
  96. 49
      src/data/projects/service-discovery.md
  97. 49
      src/data/projects/simple-monitoring-dashboard.md
  98. 56
      src/data/projects/ssh-remote-server-setup.md
  99. 45
      src/data/projects/static-site-server.md
  100. 2
      src/data/projects/todo-list-api.md
  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": 1727095669945
"lastUpdateCheck": 1728296475293
}
}

@ -29,56 +29,56 @@
"test:e2e": "playwright test"
},
"dependencies": {
"@astrojs/node": "^8.3.3",
"@astrojs/node": "^8.3.4",
"@astrojs/react": "^3.6.2",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@fingerprintjs/fingerprintjs": "^4.4.3",
"@nanostores/react": "^0.7.2",
"@astrojs/sitemap": "^3.2.0",
"@astrojs/tailwind": "^5.1.2",
"@fingerprintjs/fingerprintjs": "^4.5.0",
"@nanostores/react": "^0.8.0",
"@napi-rs/image": "^1.9.2",
"@resvg/resvg-js": "^2.6.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"astro": "^4.15.4",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"astro": "^4.16.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.12",
"dayjs": "^1.11.13",
"dom-to-image": "^2.6.0",
"dracula-prism": "^2.1.16",
"gray-matter": "^4.0.3",
"htm": "^3.1.1",
"image-size": "^1.1.1",
"jose": "^5.6.3",
"jose": "^5.9.4",
"js-cookie": "^3.0.5",
"lucide-react": "^0.419.0",
"lucide-react": "^0.452.0",
"luxon": "^3.5.0",
"nanoid": "^5.0.7",
"nanostores": "^0.10.3",
"nanostores": "^0.11.3",
"node-html-parser": "^6.1.13",
"npm-check-updates": "^17.0.0",
"playwright": "^1.47.1",
"npm-check-updates": "^17.1.3",
"playwright": "^1.48.0",
"prismjs": "^1.29.0",
"react": "^18.3.1",
"react-calendar-heatmap": "^1.9.0",
"react-confetti": "^6.1.0",
"react-dom": "^18.3.1",
"react-tooltip": "^5.27.1",
"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",
"satori": "^0.10.14",
"satori": "^0.11.2",
"satori-html": "^0.3.2",
"sharp": "^0.33.4",
"sharp": "^0.33.5",
"slugify": "^1.6.6",
"tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.7",
"tailwind-merge": "^2.5.3",
"tailwindcss": "^3.4.13",
"turndown": "^7.2.0",
"unified": "^11.0.5",
"zustand": "^4.5.4"
"zustand": "^4.5.5"
},
"devDependencies": {
"@playwright/test": "^1.45.3",
"@tailwindcss/typography": "^0.5.13",
"@playwright/test": "^1.48.0",
"@tailwindcss/typography": "^0.5.15",
"@types/dom-to-image": "^2.6.7",
"@types/js-cookie": "^3.0.6",
"@types/luxon": "^3.4.2",
@ -87,13 +87,13 @@
"@types/react-slick": "^0.23.13",
"@types/turndown": "^5.0.5",
"csv-parser": "^3.0.0",
"gh-pages": "^6.1.1",
"gh-pages": "^6.2.0",
"js-yaml": "^4.1.0",
"markdown-it": "^14.1.0",
"openai": "^4.53.2",
"openai": "^4.67.3",
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.6.5",
"tsx": "^4.16.5"
"prettier-plugin-tailwindcss": "^0.6.8",
"tsx": "^4.19.1"
}
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

Before

Width:  |  Height:  |  Size: 256 KiB

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1013 KiB

@ -326,8 +326,24 @@
},
"kBdt_t2SvVsY3blfubWIz": {
"title": "Machine Learning",
"description": "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to \"learn\" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.",
"links": []
"description": "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to \"learn\" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.\n\nLearn more from the following resources:",
"links": [
{
"title": "Advantages and Disadvantages of AI",
"url": "https://towardsdatascience.com/advantages-and-disadvantages-of-artificial-intelligence-182a5ef6588c",
"type": "article"
},
{
"title": "Reinforcement Learning 101",
"url": "https://towardsdatascience.com/reinforcement-learning-101-e24b50e1d292",
"type": "article"
},
{
"title": "Understanding AUC-ROC Curve",
"url": "https://towardsdatascience.com/understanding-auc-roc-curve-68b2303cc9c5",
"type": "article"
}
]
},
"FdBih8tlGPPy97YWq463y": {
"title": "Classic ML (Sup., Unsup.), Advanced ML (Ensembles, NNs)",

@ -0,0 +1,609 @@
{
"_hYN0gEi9BL24nptEtXWU": {
"title": "Introduction",
"description": "",
"links": []
},
"GN6SnI7RXIeW8JeD-qORW": {
"title": "What is an AI Engineer?",
"description": "",
"links": []
},
"jSZ1LhPdhlkW-9QJhIvFs": {
"title": "AI Engineer vs ML Engineer",
"description": "",
"links": []
},
"wf2BSyUekr1S1q6l8kyq6": {
"title": "LLMs",
"description": "",
"links": []
},
"KWjD4xEPhOOYS51dvRLd2": {
"title": "Inference",
"description": "",
"links": []
},
"xostGgoaYkqMO28iN2gx8": {
"title": "Training",
"description": "",
"links": []
},
"XyEp6jnBSpCxMGwALnYfT": {
"title": "Embeddings",
"description": "",
"links": []
},
"LnQ2AatMWpExUHcZhDIPd": {
"title": "Vector Databases",
"description": "",
"links": []
},
"9JwWIK0Z2MK8-6EQQJsCO": {
"title": "RAG",
"description": "",
"links": []
},
"Dc15ayFlzqMF24RqIF_-X": {
"title": "Prompt Engineering",
"description": "",
"links": []
},
"9XCxilAQ7FRet7lHQr1gE": {
"title": "AI Agents",
"description": "In AI engineering, \"agents\" refer to autonomous systems or components that can perceive their environment, make decisions, and take actions to achieve specific goals. Agents often interact with external systems, users, or other agents to carry out complex tasks. They can vary in complexity, from simple rule-based bots to sophisticated AI-powered agents that leverage machine learning models, natural language processing, and reinforcement learning.\n\nVisit the following resources to learn more:\n\n\\-[@article@Building an AI Agent Tutorial - LangChain](https://python.langchain.com/docs/tutorials/agents/) -[@article@Ai agents and their types](https://play.ht/blog/ai-agents-use-cases/) -[@video@The Complete Guide to Building AI Agents for Beginners](https://youtu.be/MOyl58VF2ak?si=-QjRD_5y3iViprJX)",
"links": []
},
"5QdihE1lLpMc3DFrGy46M": {
"title": "AI vs AGI",
"description": "",
"links": []
},
"qJVgKe9uBvXc-YPfvX_Y7": {
"title": "Impact on Product Development",
"description": "",
"links": []
},
"K9EiuFgPBFgeRxY4wxAmb": {
"title": "Roles and Responsiblities",
"description": "",
"links": []
},
"d7fzv_ft12EopsQdmEsel": {
"title": "Pre-trained Models",
"description": "Pre-trained models are Machine Learning (ML) models that have been previously trained on a large dataset to solve a specific task or set of tasks. These models learn patterns, features, and representations from the training data, which can then be fine-tuned or adapted for other related tasks. Pre-training provides a good starting point, reducing the amount of data and computation required to train a new model from scratch.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Pre-trained models: Past, present and future",
"url": "https://www.sciencedirect.com/science/article/pii/S2666651021000231",
"type": "article"
}
]
},
"1Ga6DbOPc6Crz7ilsZMYy": {
"title": "Benefits of Pre-trained Models",
"description": "",
"links": []
},
"MXqbQGhNM3xpXlMC2ib_6": {
"title": "Limitations and Considerations",
"description": "",
"links": []
},
"2WbVpRLqwi3Oeqk1JPui4": {
"title": "Open AI Models",
"description": "",
"links": []
},
"vvpYkmycH0_W030E-L12f": {
"title": "Capabilities / Context Length",
"description": "",
"links": []
},
"LbB2PeytxRSuU07Bk0KlJ": {
"title": "Cut-off Dates / Knowledge",
"description": "",
"links": []
},
"hy6EyKiNxk1x84J63dhez": {
"title": "Anthropic's Claude",
"description": "",
"links": []
},
"oe8E6ZIQWuYvHVbYJHUc1": {
"title": "Google's Gemini",
"description": "",
"links": []
},
"3PQVZbcr4neNMRr6CuNzS": {
"title": "Azure AI",
"description": "",
"links": []
},
"OkYO-aSPiuVYuLXHswBCn": {
"title": "AWS Sagemaker",
"description": "",
"links": []
},
"8XjkRqHOdyH-DbXHYiBEt": {
"title": "Hugging Face Models",
"description": "",
"links": []
},
"n-Ud2dXkqIzK37jlKItN4": {
"title": "Mistral AI",
"description": "",
"links": []
},
"a7qsvoauFe5u953I699ps": {
"title": "Cohere",
"description": "",
"links": []
},
"5ShWZl1QUqPwO-NRGN85V": {
"title": "OpenAI Models",
"description": "",
"links": []
},
"zdeuA4GbdBl2DwKgiOA4G": {
"title": "OpenAI API",
"description": "",
"links": []
},
"_bPTciEA1GT1JwfXim19z": {
"title": "Chat Completions API",
"description": "",
"links": []
},
"9-5DYeOnKJq9XvEMWP45A": {
"title": "Writing Prompts",
"description": "",
"links": []
},
"nyBgEHvUhwF-NANMwkRJW": {
"title": "Open AI Playground",
"description": "",
"links": []
},
"15XOFdVp0IC-kLYPXUJWh": {
"title": "Fine-tuning",
"description": "",
"links": []
},
"qzvp6YxWDiGakA2mtspfh": {
"title": "Maximum Tokens",
"description": "",
"links": []
},
"FjV3oD7G2Ocq5HhUC17iH": {
"title": "Token Counting",
"description": "",
"links": []
},
"DZPM9zjCbYYWBPLmQImxQ": {
"title": "Pricing Considerations",
"description": "",
"links": []
},
"8ndKHDJgL_gYwaXC7XMer": {
"title": "AI Safety and Ethics",
"description": "",
"links": []
},
"cUyLT6ctYQ1pgmodCKREq": {
"title": "Prompt Injection Attacks",
"description": "",
"links": []
},
"lhIU0ulpvDAn1Xc3ooYz_": {
"title": "Bias and Fareness",
"description": "",
"links": []
},
"sWBT-j2cRuFqRFYtV_5TK": {
"title": "Security and Privacy Concerns",
"description": "",
"links": []
},
"Pt-AJmSJrOxKvolb5_HEv": {
"title": "Conducting adversarial testing",
"description": "",
"links": []
},
"ljZLa3yjQpegiZWwtnn_q": {
"title": "OpenAI Moderation API",
"description": "",
"links": []
},
"4Q5x2VCXedAWISBXUIyin": {
"title": "Adding end-user IDs in prompts",
"description": "Sending end-user IDs in your requests can be a useful tool to help OpenAI monitor and detect abuse. This allows OpenAI to provide your team with more actionable feedback in the event that we detect any policy violations in your application.\n\nVisit the following resources to learn more:\n\n\\-[@official@Sending end-user IDs - OpenAi](https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids)",
"links": []
},
"qmx6OHqx4_0JXVIv8dASp": {
"title": "Robust prompt engineering",
"description": "",
"links": []
},
"t1SObMWkDZ1cKqNNlcd9L": {
"title": "Know your Customers / Usecases",
"description": "",
"links": []
},
"ONLDyczNacGVZGojYyJrU": {
"title": "Constraining outputs and inputs",
"description": "",
"links": []
},
"a_3SabylVqzzOyw3tZN5f": {
"title": "OpenSource AI",
"description": "",
"links": []
},
"RBwGsq9DngUsl8PrrCbqx": {
"title": "Open vs Closed Source Models",
"description": "",
"links": []
},
"97eu-XxYUH9pYbD_KjAtA": {
"title": "Popular Open Source Models",
"description": "",
"links": []
},
"v99C5Bml2a6148LCJ9gy9": {
"title": "Hugging Face",
"description": "",
"links": []
},
"YLOdOvLXa5Fa7_mmuvKEi": {
"title": "Hugging Face Hub",
"description": "",
"links": []
},
"YKIPOiSj_FNtg0h8uaSMq": {
"title": "Hugging Face Tasks",
"description": "",
"links": []
},
"3kRTzlLNBnXdTsAEXVu_M": {
"title": "Inference SDK",
"description": "",
"links": []
},
"bGLrbpxKgENe2xS1eQtdh": {
"title": "Transformers.js",
"description": "",
"links": []
},
"rTT2UnvqFO3GH6ThPLEjO": {
"title": "Ollama",
"description": "",
"links": []
},
"ro3vY_sp6xMQ-hfzO-rc1": {
"title": "Ollama Models",
"description": "",
"links": []
},
"TsG_I7FL-cOCSw8gvZH3r": {
"title": "Ollama SDK",
"description": "",
"links": []
},
"--ig0Ume_BnXb9K2U7HJN": {
"title": "What are Embeddings",
"description": "",
"links": []
},
"eMfcyBxnMY_l_5-8eg6sD": {
"title": "Semantic Search",
"description": "",
"links": []
},
"HQe9GKy3p0kTUPxojIfSF": {
"title": "Recommendation Systems",
"description": "",
"links": []
},
"AglWJ7gb9rTT2rMkstxtk": {
"title": "Anomaly Detection",
"description": "",
"links": []
},
"06Xta-OqSci05nV2QMFdF": {
"title": "Data Classification",
"description": "",
"links": []
},
"l6priWeJhbdUD5tJ7uHyG": {
"title": "Open AI Embeddings API",
"description": "",
"links": []
},
"y0qD5Kb4Pf-ymIwW-tvhX": {
"title": "Open AI Embedding Models",
"description": "",
"links": []
},
"4GArjDYipit4SLqKZAWDf": {
"title": "Pricing Considerations",
"description": "",
"links": []
},
"apVYIV4EyejPft25oAvdI": {
"title": "Open-Source Embeddings",
"description": "",
"links": []
},
"ZV_V6sqOnRodgaw4mzokC": {
"title": "Sentence Transformers",
"description": "",
"links": []
},
"dLEg4IA3F5jgc44Bst9if": {
"title": "Models on Hugging Face",
"description": "",
"links": []
},
"tt9u3oFlsjEMfPyojuqpc": {
"title": "Vector Databases",
"description": "",
"links": []
},
"WcjX6p-V-Rdd77EL8Ega9": {
"title": "Purpose and Functionality",
"description": "",
"links": []
},
"dSd2C9lNl-ymmCRT9_ZC3": {
"title": "Chroma",
"description": "Chroma is an open-source vector database and AI-native embedding database designed to handle and store large-scale embeddings and semantic vectors. It is used in applications that require fast, efficient similarity searches, such as natural language processing (NLP), machine learning (ML), and AI systems dealing with text, images, and other high-dimensional data.\n\nVisit the following resources to learn more:\n\n\\-[@official@Chroma](https://www.trychroma.com/) -[@article@Chroma Tutorials](https://lablab.ai/tech/chroma) -[@video@Chroma - Chroma - Vector Database for LLM Applications](https://youtu.be/Qs_y0lTJAp0?si=Z2-eSmhf6PKrEKCW)",
"links": []
},
"_Cf7S1DCvX7p1_3-tP3C3": {
"title": "Pinecone",
"description": "",
"links": []
},
"VgUnrZGKVjAAO4n_llq5-": {
"title": "Weaviate",
"description": "",
"links": []
},
"JurLbOO1Z8r6C3yUqRNwf": {
"title": "FAISS",
"description": "",
"links": []
},
"rjaCNT3Li45kwu2gXckke": {
"title": "LanceDB",
"description": "",
"links": []
},
"DwOAL5mOBgBiw-EQpAzQl": {
"title": "Qdrant",
"description": "",
"links": []
},
"9kT7EEQsbeD2WDdN9ADx7": {
"title": "Supabase",
"description": "",
"links": []
},
"j6bkm0VUgLkHdMDDJFiMC": {
"title": "MongoDB Atlas",
"description": "",
"links": []
},
"5TQnO9B4_LTHwqjI7iHB1": {
"title": "Indexing Embeddings",
"description": "",
"links": []
},
"ZcbRPtgaptqKqWBgRrEBU": {
"title": "Performing Similarity Search",
"description": "",
"links": []
},
"lVhWhZGR558O-ljHobxIi": {
"title": "RAG & Implementation",
"description": "",
"links": []
},
"GCn4LGNEtPI0NWYAZCRE-": {
"title": "RAG Usecases",
"description": "",
"links": []
},
"qlBEXrbV88e_wAGRwO9hW": {
"title": "RAG vs Fine-tuning",
"description": "",
"links": []
},
"mX987wiZF7p3V_gExrPeX": {
"title": "Chunking",
"description": "",
"links": []
},
"grTcbzT7jKk_sIUwOTZTD": {
"title": "Embedding",
"description": "",
"links": []
},
"zZA1FBhf1y4kCoUZ-hM4H": {
"title": "Vector Database",
"description": "",
"links": []
},
"OCGCzHQM2LQyUWmiqe6E0": {
"title": "Retrieval Process",
"description": "",
"links": []
},
"2jJnS9vRYhaS69d6OxrMh": {
"title": "Generation",
"description": "",
"links": []
},
"WZVW8FQu6LyspSKm1C_sl": {
"title": "Using SDKs Directly",
"description": "",
"links": []
},
"ebXXEhNRROjbbof-Gym4p": {
"title": "Langchain",
"description": "",
"links": []
},
"d0ontCII8KI8wfP-8Y45R": {
"title": "Llama Index",
"description": "",
"links": []
},
"eOqCBgBTKM8CmY3nsWjre": {
"title": "Open AI Assistant API",
"description": "",
"links": []
},
"c0RPhpD00VIUgF4HJgN2T": {
"title": "Replicate",
"description": "",
"links": []
},
"AeHkNU-uJ_gBdo5-xdpEu": {
"title": "AI Agents",
"description": "",
"links": []
},
"778HsQzTuJ_3c9OSn5DmH": {
"title": "Agents Usecases",
"description": "AI Agents have a variety of usecases ranging from customer support, workflow automation, cybersecurity, finance, marketing and sales, and more.\n\nVisit the following resources to learn more:\n\n* [@article@Top 15 Use Cases Of AI Agents In Business](https://www.ampcome.com/post/15-use-cases-of-ai-agents-in-business) -[@article@A Brief Guide on AI Agents: Benefits and Use Cases](https://www.codica.com/blog/brief-guide-on-ai-agents/) -[@video@The Complete Guide to Building AI Agents for Beginners](https://youtu.be/MOyl58VF2ak?si=-QjRD_5y3iViprJX)",
"links": []
},
"voDKcKvXtyLzeZdx2g3Qn": {
"title": "ReAct Prompting",
"description": "",
"links": []
},
"6xaRB34_g0HGt-y1dGYXR": {
"title": "Manual Implementation",
"description": "",
"links": []
},
"Sm0Ne5Nx72hcZCdAcC0C2": {
"title": "OpenAI Functions / Tools",
"description": "",
"links": []
},
"mbp2NoL-VZ5hZIIblNBXt": {
"title": "OpenAI Assistant API",
"description": "",
"links": []
},
"W7cKPt_UxcUgwp8J6hS4p": {
"title": "Multimodal AI",
"description": "",
"links": []
},
"sGR9qcro68KrzM8qWxcH8": {
"title": "Multimodal AI Usecases",
"description": "",
"links": []
},
"fzVq4hGoa2gdbIzoyY1Zp": {
"title": "Image Understanding",
"description": "",
"links": []
},
"49BWxYVFpIgZCCqsikH7l": {
"title": "Image Generation",
"description": "",
"links": []
},
"TxaZCtTCTUfwCxAJ2pmND": {
"title": "Video Understanding",
"description": "",
"links": []
},
"mxQYB820447DC6kogyZIL": {
"title": "Audio Processing",
"description": "",
"links": []
},
"GCERpLz5BcRtWPpv-asUz": {
"title": "Text-to-Speech",
"description": "",
"links": []
},
"jQX10XKd_QM5wdQweEkVJ": {
"title": "Speech-to-Text",
"description": "",
"links": []
},
"CRrqa-dBw1LlOwVbrZhjK": {
"title": "OpenAI Vision API",
"description": "",
"links": []
},
"LKFwwjtcawJ4Z12X102Cb": {
"title": "DALL-E API",
"description": "",
"links": []
},
"OTBd6cPUayKaAM-fLWdSt": {
"title": "Whisper API",
"description": "",
"links": []
},
"EIDbwbdolR_qsNKVDla6V": {
"title": "Hugging Face Models",
"description": "",
"links": []
},
"j9zD3pHysB1CBhLfLjhpD": {
"title": "LangChain for Multimodal Apps",
"description": "",
"links": []
},
"akQTCKuPRRelj2GORqvsh": {
"title": "LlamaIndex for Multimodal Apps",
"description": "",
"links": []
},
"NYge7PNtfI-y6QWefXJ4d": {
"title": "Development Tools",
"description": "",
"links": []
},
"XcKeQfpTA5ITgdX51I4y-": {
"title": "AI Code Editors",
"description": "AI code editors are development tools that leverage artificial intelligence to assist software developers in writing, debugging, and optimizing code. These editors go beyond traditional syntax highlighting and code completion by incorporating machine learning models, natural language processing, and data analysis to understand code context, generate suggestions, and even automate portions of the software development process.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Cursor - The AI Code Editor",
"url": "https://www.cursor.com/",
"type": "website"
},
{
"title": "Bolt - Prompt, run, edit, and deploy full-stack web apps",
"url": "https://bolt.new",
"type": "website"
},
{
"title": "Replit - Build Apps using AI",
"url": "https://replit.com/ai",
"type": "website"
},
{
"title": "v0 - Build Apps with AI",
"url": "https://v0.dev",
"type": "website"
}
]
},
"TifVhqFm1zXNssA8QR3SM": {
"title": "Code Completion Tools",
"description": "",
"links": []
}
}

File diff suppressed because it is too large Load Diff

@ -244,6 +244,11 @@
"url": "https://aws.amazon.com/route53/what-is-dns/",
"type": "article"
},
{
"title": "DNS Record Crash Course for Web Developers",
"url": "https://dev.to/chrisachard/dns-record-crash-course-for-web-developers-35hn",
"type": "article"
},
{
"title": "DNS explained in 100 seconds",
"url": "https://www.youtube.com/watch?v=UVR9lhUGAyU",
@ -269,6 +274,11 @@
"title": "What is a RESTul API?",
"url": "https://aws.amazon.com/what-is/restful-api/",
"type": "article"
},
{
"title": "Understanding RESTful APIs",
"url": "https://www.youtube.com/watch?v=lsMQRaeKNDk",
"type": "video"
}
]
},

@ -1,13 +1,30 @@
{
"gKTSe9yQFVbPVlLzWB0hC": {
"title": "Search Engines",
"description": "Search engines like Elasticsearch are specialized tools designed for fast, scalable, and flexible searching and analyzing of large volumes of data. Elasticsearch is an open-source, distributed search and analytics engine built on Apache Lucene, offering full-text search capabilities, real-time indexing, and advanced querying features. Key characteristics of search engines like Elasticsearch include:\n\n1. **Full-Text Search**: Support for complex search queries, including relevance scoring and text analysis.\n2. **Distributed Architecture**: Scalability through horizontal distribution across multiple nodes or servers.\n3. **Real-Time Indexing**: Ability to index and search data almost instantaneously.\n4. **Powerful Query DSL**: A domain-specific language for constructing and executing sophisticated queries.\n5. **Analytics**: Capabilities for aggregating and analyzing data, often used for log and event data analysis.\n\nElasticsearch is commonly used in applications requiring advanced search functionality, such as search engines, data analytics platforms, and real-time monitoring systems.",
"links": []
"description": "Search engines like Elasticsearch are specialized tools designed for fast, scalable, and flexible searching and analyzing of large volumes of data. Elasticsearch is an open-source, distributed search and analytics engine built on Apache Lucene, offering full-text search capabilities, real-time indexing, and advanced querying features. Key characteristics of search engines like Elasticsearch include:\n\n1. **Full-Text Search**: Support for complex search queries, including relevance scoring and text analysis.\n2. **Distributed Architecture**: Scalability through horizontal distribution across multiple nodes or servers.\n3. **Real-Time Indexing**: Ability to index and search data almost instantaneously.\n4. **Powerful Query DSL**: A domain-specific language for constructing and executing sophisticated queries.\n5. **Analytics**: Capabilities for aggregating and analyzing data, often used for log and event data analysis.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Elasticsearch",
"url": "https://www.elastic.co/elasticsearch/",
"type": "article"
}
]
},
"9Fpoor-Os_9lvrwu5Zjh-": {
"title": "Design and Development Principles",
"description": "Design and Development Principles are fundamental guidelines that inform the creation of software systems. Key principles include:\n\n1. SOLID (Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation, Dependency Inversion)\n2. DRY (Don't Repeat Yourself)\n3. KISS (Keep It Simple, Stupid)\n4. YAGNI (You Aren't Gonna Need It)\n5. Separation of Concerns\n6. Modularity\n7. Encapsulation\n8. Composition over Inheritance\n9. Loose Coupling and High Cohesion\n10. Principle of Least Astonishment\n\nThese principles aim to create more maintainable, scalable, and robust software. They encourage clean code, promote reusability, reduce complexity, and enhance flexibility. While not rigid rules, these principles guide developers in making design decisions that lead to better software architecture and easier long-term maintenance. Applying these principles helps in creating systems that are easier to understand, modify, and extend over time.",
"links": []
"description": "Design and Development Principles are fundamental guidelines that inform the creation of software systems. Key principles include:\n\n* SOLID (Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation, Dependency Inversion)\n* DRY (Don't Repeat Yourself)\n* KISS (Keep It Simple, Stupid)\n* YAGNI (You Aren't Gonna Need It)\n* Separation of Concerns\n* Modularity\n* Encapsulation\n* Composition over Inheritance\n* Loose Coupling and High Cohesion\n* Principle of Least Astonishment\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Design Principles - Wikipedia",
"url": "https://en.wikipedia.org/wiki/Design_principles",
"type": "article"
},
{
"title": "Design Principles - Microsoft",
"url": "https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/index",
"type": "article"
}
]
},
"EwvLPSI6AlZ4TnNIJTZA4": {
"title": "Learn about APIs",
@ -71,7 +88,7 @@
"description": "Rust is a systems programming language known for its focus on safety, performance, and concurrency. It provides fine-grained control over system resources while ensuring memory safety without needing a garbage collector. Rust's ownership model enforces strict rules on how data is accessed and managed, preventing common issues like null pointer dereferences and data races. Its strong type system and modern features, such as pattern matching and concurrency support, make it suitable for a wide range of applications, from low-level systems programming to high-performance web servers and tools. Rust is gaining traction in both industry and open source for its reliability and efficiency.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The Rust Programming Language - online book",
"title": "The Rust Programming Language - Book",
"url": "https://doc.rust-lang.org/book/",
"type": "article"
},
@ -334,8 +351,8 @@
"type": "article"
},
{
"title": "Learn Git with Tutorials, News and Tips - Atlassian",
"url": "https://www.atlassian.com/git",
"title": "Git Documentation",
"url": "https://git-scm.com/doc",
"type": "article"
},
{
@ -370,8 +387,8 @@
"type": "article"
},
{
"title": "Git",
"url": "https://git-scm.com/",
"title": "Git Documentation",
"url": "https://git-scm.com/doc",
"type": "article"
},
{
@ -396,7 +413,7 @@
"type": "article"
},
{
"title": "GitHub Website",
"title": "GitHub",
"url": "https://github.com",
"type": "article"
},
@ -424,7 +441,7 @@
},
"Ry_5Y-BK7HrkIc6X0JG1m": {
"title": "Bitbucket",
"description": "Bitbucket is a web-based version control repository hosting service owned by Atlassian. It primarily uses Git version control systems, offering both cloud-hosted and self-hosted options. Bitbucket provides features such as pull requests for code review, branch permissions, and inline commenting on code. It integrates seamlessly with other Atlassian products like Jira and Trello, making it popular among teams already using Atlassian tools. Bitbucket supports continuous integration and deployment through Bitbucket Pipelines. It offers unlimited private repositories for small teams, making it cost-effective for smaller organizations. While similar to GitHub in many aspects, Bitbucket's integration with Atlassian's ecosystem and its pricing model for private repositories are key differentiators. It's widely used for collaborative software development, particularly in enterprise environments already invested in Atlassian's suite of products.\n\nVisit the following resources to learn more:",
"description": "Bitbucket is a web-based version control repository hosting service owned by Atlassian. It primarily uses Git version control systems, offering both cloud-hosted and self-hosted options. Bitbucket provides features such as pull requests for code review, branch permissions, and inline commenting on code. It integrates seamlessly with other Atlassian products like Jira and Trello, making it popular among teams already using Atlassian tools. Bitbucket supports continuous integration and deployment through Bitbucket Pipelines. It offers unlimited private repositories for small teams, making it cost-effective for smaller organizations.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Bitbucket Website",
@ -453,9 +470,9 @@
"description": "GitLab is a web-based DevOps platform that provides a complete solution for the software development lifecycle. It offers source code management, continuous integration/continuous deployment (CI/CD), issue tracking, and more, all integrated into a single application. GitLab supports Git repositories and includes features like merge requests (similar to GitHub's pull requests), wiki pages, and issue boards. It emphasizes DevOps practices, providing built-in CI/CD pipelines, container registry, and Kubernetes integration. GitLab offers both cloud-hosted and self-hosted options, giving organizations flexibility in deployment. Its all-in-one approach differentiates it from competitors, as it includes features that might require multiple tools in other ecosystems. GitLab's focus on the entire DevOps lifecycle, from planning to monitoring, makes it popular among enterprises and teams seeking a unified platform for their development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GitLab Website",
"title": "GitLab",
"url": "https://gitlab.com/",
"type": "opensource"
"type": "article"
},
{
"title": "GitLab Documentation",
@ -546,7 +563,7 @@
"type": "article"
},
{
"title": "MS SQL website",
"title": "MS SQL",
"url": "https://www.microsoft.com/en-ca/sql-server/",
"type": "article"
},
@ -567,12 +584,12 @@
"description": "MySQL is an open-source relational database management system (RDBMS) known for its speed, reliability, and ease of use. It uses SQL (Structured Query Language) for database interactions and supports a range of features for data management, including transactions, indexing, and stored procedures. MySQL is widely used for web applications, data warehousing, and various other applications due to its scalability and flexibility. It integrates well with many programming languages and platforms, and is often employed in conjunction with web servers and frameworks in popular software stacks like LAMP (Linux, Apache, MySQL, PHP/Python/Perl). MySQL is maintained by Oracle Corporation and has a large community and ecosystem supporting its development and use.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "MySQL website",
"title": "MySQL",
"url": "https://www.mysql.com/",
"type": "article"
},
{
"title": "W3Schools - MySQL tutorial ",
"title": "W3Schools - MySQL Tutorial",
"url": "https://www.w3schools.com/mySQl/default.asp",
"type": "article"
},
@ -603,12 +620,12 @@
"description": "Oracle Database is a highly robust, enterprise-grade relational database management system (RDBMS) developed by Oracle Corporation. Known for its scalability, reliability, and comprehensive features, Oracle Database supports complex data management tasks and mission-critical applications. It provides advanced functionalities like SQL querying, transaction management, high availability through clustering, and data warehousing. Oracle's database solutions include support for various data models, such as relational, spatial, and graph, and offer tools for security, performance optimization, and data integration. It is widely used in industries requiring large-scale, secure, and high-performance data processing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Oracle Website",
"url": "https://www.oracle.com/database/",
"type": "article"
},
{
"title": "Official Docs",
"title": "Oracle Docs",
"url": "https://docs.oracle.com/en/database/index.html",
"type": "article"
},
@ -626,10 +643,10 @@
},
"tD3i-8gBpMKCHB-ITyDiU": {
"title": "MariaDB",
"description": "MariaDB server is a community developed fork of MySQL server. Started by core members of the original MySQL team, MariaDB actively works with outside developers to deliver the most featureful, stable, and sanely licensed open SQL server in the industry. MariaDB was created with the intention of being a more versatile, drop-in replacement version of MySQL\n\nVisit the following resources to learn more:",
"description": "MariaDB server is a community developed fork of MySQL server. Started by core members of the original MySQL team, MariaDB actively works with outside developers to deliver the most feature rich, stable, and sanely licensed open SQL server in the industry. MariaDB was created with the intention of being a more versatile, drop-in replacement version of MySQL\n\nVisit the following resources to learn more:",
"links": [
{
"title": "MariaDB website",
"title": "MariaDB",
"url": "https://mariadb.org/",
"type": "article"
},
@ -782,8 +799,14 @@
},
"GwApfL4Yx-b5Y8dB9Vy__": {
"title": "Failure Modes",
"description": "Database failure modes refer to the various ways in which a database system can malfunction or cease to operate correctly. These include hardware failures (like disk crashes or network outages), software bugs, data corruption, performance degradation due to overload, and inconsistencies in distributed systems. Common failure modes involve data loss, system unavailability, replication lag in distributed databases, and deadlocks. To mitigate these, databases employ strategies such as redundancy, regular backups, transaction logging, and failover mechanisms. Understanding potential failure modes is crucial for designing robust database systems with high availability and data integrity. It informs the implementation of fault tolerance measures, recovery procedures, and monitoring systems to ensure database reliability and minimize downtime in critical applications.",
"links": []
"description": "Database failure modes refer to the various ways in which a database system can malfunction or cease to operate correctly. These include hardware failures (like disk crashes or network outages), software bugs, data corruption, performance degradation due to overload, and inconsistencies in distributed systems. Common failure modes involve data loss, system unavailability, replication lag in distributed databases, and deadlocks. To mitigate these, databases employ strategies such as redundancy, regular backups, transaction logging, and failover mechanisms. Understanding potential failure modes is crucial for designing robust database systems with high availability and data integrity. It informs the implementation of fault tolerance measures, recovery procedures, and monitoring systems to ensure database reliability and minimize downtime in critical applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Database Failure Modes",
"url": "https://ieeexplore.ieee.org/document/7107294/",
"type": "article"
}
]
},
"rq_y_OBMD9AH_4aoecvAi": {
"title": "Transactions",
@ -921,7 +944,7 @@
"description": "Data replication is the process of creating and maintaining multiple copies of the same data across different locations or nodes in a distributed system. It enhances data availability, reliability, and performance by ensuring that data remains accessible even if one or more nodes fail. Replication can be synchronous (changes are applied to all copies simultaneously) or asynchronous (changes are propagated after being applied to the primary copy). It's widely used in database systems, content delivery networks, and distributed file systems. Replication strategies include master-slave, multi-master, and peer-to-peer models. While improving fault tolerance and read performance, replication introduces challenges in maintaining data consistency across copies and managing potential conflicts. Effective replication strategies must balance consistency, availability, and partition tolerance, often in line with the principles of the CAP theorem.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is data replication?",
"title": "Data Replication? - IBM",
"url": "https://www.ibm.com/topics/data-replication",
"type": "article"
},
@ -984,7 +1007,7 @@
"description": "JSON or JavaScript Object Notation is an encoding scheme that is designed to eliminate the need for an ad-hoc code for each application to communicate with servers that communicate in a defined way. JSON API module exposes an implementation for data stores and data structures, such as entity types, bundles, and fields.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "JSON API",
"url": "https://jsonapi.org/",
"type": "article"
},
@ -1014,15 +1037,15 @@
"url": "https://swagger.io/tools/swagger-editor/",
"type": "article"
},
{
"title": " REST API and OpenAPI: It’s Not an Either/Or Question ",
"url": "https://www.youtube.com/watch?v=pRS9LRBgjYg",
"type": "article"
},
{
"title": "OpenAPI 3.0: How to Design and Document APIs with the Latest OpenAPI Specification 3.0",
"url": "https://www.youtube.com/watch?v=6kwmW_p_Tig",
"type": "video"
},
{
"title": " REST API and OpenAPI: It’s Not an Either/Or Question",
"url": "https://www.youtube.com/watch?v=pRS9LRBgjYg",
"type": "video"
}
]
},
@ -1109,7 +1132,7 @@
"type": "article"
},
{
"title": "GraphQL Official Website",
"title": "GraphQL",
"url": "https://graphql.org/",
"type": "article"
},
@ -1130,7 +1153,7 @@
"description": "Client-side caching is a technique where web browsers or applications store data locally on the user's device to improve performance and reduce server load. It involves saving copies of web pages, images, scripts, and other resources on the client's system for faster access on subsequent visits. Modern browsers implement various caching mechanisms, including HTTP caching (using headers like Cache-Control and ETag), service workers for offline functionality, and local storage APIs. Client-side caching significantly reduces network traffic and load times, enhancing user experience, especially on slower connections. However, it requires careful management to balance improved performance with the need for up-to-date content. Developers must implement appropriate cache invalidation strategies and consider cache-busting techniques for critical updates. Effective client-side caching is crucial for creating responsive, efficient web applications while minimizing server resource usage.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Client-side Caching",
"title": "Client Side Caching",
"url": "https://redis.io/docs/latest/develop/use/client-side-caching/",
"type": "article"
},
@ -1143,13 +1166,18 @@
},
"Nq2BO53bHJdFT1rGZPjYx": {
"title": "CDN",
"description": "A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests. Traditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose. Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well\n\nVisit the following resources to learn more:",
"description": "A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests.\n\nTraditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose. Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well\n\nVisit the following resources to learn more:",
"links": [
{
"title": "CloudFlare - What is a CDN? | How do CDNs work?",
"url": "https://www.cloudflare.com/en-ca/learning/cdn/what-is-a-cdn/",
"type": "article"
},
{
"title": "AWS - CDN",
"url": "https://aws.amazon.com/what-is/cdn/",
"type": "article"
},
{
"title": "What is Cloud CDN?",
"url": "https://www.youtube.com/watch?v=841kyd_mfH0",
@ -1190,8 +1218,19 @@
},
"ELj8af7Mi38kUbaPJfCUR": {
"title": "Caching",
"description": "Caching is a technique used in computing to store and retrieve frequently accessed data quickly, reducing the need to fetch it from the original, slower source repeatedly. It involves keeping a copy of data in a location that's faster to access than its primary storage. Caching can occur at various levels, including browser caching, application-level caching, and database caching. It significantly improves performance by reducing latency, decreasing network traffic, and lowering the load on servers or databases. Common caching strategies include time-based expiration, least recently used (LRU) algorithms, and write-through or write-back policies. While caching enhances speed and efficiency, it also introduces challenges in maintaining data consistency and freshness. Effective cache management is crucial in balancing performance gains with the need for up-to-date information in dynamic systems.",
"links": []
"description": "Caching is a technique used in computing to store and retrieve frequently accessed data quickly, reducing the need to fetch it from the original, slower source repeatedly. It involves keeping a copy of data in a location that's faster to access than its primary storage. Caching can occur at various levels, including browser caching, application-level caching, and database caching. It significantly improves performance by reducing latency, decreasing network traffic, and lowering the load on servers or databases. Common caching strategies include time-based expiration, least recently used (LRU) algorithms, and write-through or write-back policies. While caching enhances speed and efficiency, it also introduces challenges in maintaining data consistency and freshness. Effective cache management is crucial in balancing performance gains with the need for up-to-date information in dynamic systems.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is Caching - AWS",
"url": "https://aws.amazon.com/caching/",
"type": "article"
},
{
"title": "Caching - Cloudflare",
"url": "https://www.cloudflare.com/learning/cdn/what-is-caching/",
"type": "article"
}
]
},
"RBrIP5KbVQ2F0ly7kMfTo": {
"title": "Web Security",
@ -1333,7 +1372,7 @@
"type": "article"
},
{
"title": "DevOps CI/CD Explained in 100 Seconds by Fireship",
"title": "DevOps CI/CD Explained in 100 Seconds",
"url": "https://www.youtube.com/watch?v=scEDHsr3APg",
"type": "video"
},
@ -1581,7 +1620,7 @@
},
"8DmabQJXlrT__COZrDVTV": {
"title": "Twelve Factor Apps",
"description": "The Twelve-Factor App methodology is a set of principles for building modern, scalable, and maintainable web applications, particularly suited for cloud environments. It emphasizes best practices for developing applications in a way that facilitates portability, scalability, and ease of deployment. Key principles include:\n\n1. **Codebase**: One codebase tracked in version control, with many deploys.\n2. **Dependencies**: Explicitly declare and isolate dependencies.\n3. **Config**: Store configuration in the environment.\n4. **Backing Services**: Treat backing services as attached resources.\n5. **Build, Release, Run**: Separate build and run stages.\n6. **Processes**: Execute the app as one or more stateless processes.\n7. **Port Binding**: Export services via port binding.\n8. **Concurrency**: Scale out via the process model.\n9. **Disposability**: Maximize robustness with fast startup and graceful shutdown.\n10. **Dev/Prod Parity**: Keep development, staging, and production environments as similar as possible.\n11. **Logs**: Treat logs as streams of events.\n12. **Admin Processes**: Run administrative or management tasks as one-off processes.\n\nThese principles help create applications that are easy to deploy, manage, and scale in cloud environments, promoting operational simplicity and consistency.\n\nVisit the following resources to learn more:",
"description": "The Twelve-Factor App methodology is a set of principles for building modern, scalable, and maintainable web applications, particularly suited for cloud environments. It emphasizes best practices for developing applications in a way that facilitates portability, scalability, and ease of deployment. Key principles include:\n\n1. **Codebase**: One codebase tracked in version control, with many deploys.\n2. **Dependencies**: Explicitly declare and isolate dependencies.\n3. **Config**: Store configuration in the environment.\n4. **Backing Services**: Treat backing services as attached resources.\n5. **Build, Release, Run**: Separate build and run stages.\n6. **Processes**: Execute the app as one or more stateless processes.\n7. **Port Binding**: Export services via port binding.\n8. **Concurrency**: Scale out via the process model.\n9. **Disposability**: Maximize robustness with fast startup and graceful shutdown.\n10. **Dev/Prod Parity**: Keep development, staging, and production environments as similar as possible.\n11. **Logs**: Treat logs as streams of events.\n12. **Admin Processes**: Run administrative or management tasks as one-off processes.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The Twelve-Factor App",
@ -1647,7 +1686,7 @@
"description": "Apache Kafka is a distributed event streaming platform designed for high-throughput, fault-tolerant data processing. It acts as a message broker, allowing systems to publish and subscribe to streams of records, similar to a distributed commit log. Kafka is highly scalable and can handle large volumes of data with low latency, making it ideal for real-time analytics, log aggregation, and data integration. It features topics for organizing data streams, partitions for parallel processing, and replication for fault tolerance, enabling reliable and efficient handling of large-scale data flows across distributed systems.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Apache Kafka quickstart",
"title": "Apache Kafka",
"url": "https://kafka.apache.org/quickstart",
"type": "article"
},
@ -1704,12 +1743,12 @@
"type": "article"
},
{
"title": "Getting started with LXD Containerization",
"title": "Getting Started with LXD Containerization",
"url": "https://www.youtube.com/watch?v=aIwgPKkVj8s",
"type": "video"
},
{
"title": "Getting started with LXC containers",
"title": "Getting Started with LXC containers",
"url": "https://youtu.be/CWmkSj_B-wo",
"type": "video"
}
@ -1767,7 +1806,7 @@
"description": "Server-Sent Events (SSE) is a technology for sending real-time updates from a server to a web client over a single, persistent HTTP connection. It enables servers to push updates to clients efficiently and automatically reconnects if the connection is lost. SSE is ideal for applications needing one-way communication, such as live notifications or real-time data feeds, and uses a simple text-based format for transmitting event data, which can be easily handled by clients using the `EventSource` API in JavaScript.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Server-Sent Events - MDN",
"title": "Server Sent Events - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events",
"type": "article"
},
@ -1783,7 +1822,7 @@
"description": "Nginx is a high-performance, open-source web server and reverse proxy server known for its efficiency, scalability, and low resource consumption. Originally developed as a web server, Nginx is also commonly used as a load balancer, HTTP cache, and mail proxy. It excels at handling a large number of concurrent connections due to its asynchronous, event-driven architecture. Nginx's features include support for serving static content, handling dynamic content through proxying to application servers, and providing SSL/TLS termination. Its modular design allows for extensive customization and integration with various applications and services, making it a popular choice for modern web infrastructures.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Nginx Website",
"url": "https://nginx.org/",
"type": "article"
},
@ -1809,7 +1848,7 @@
"description": "Caddy is a modern, open-source web server written in Go. It's known for its simplicity, automatic HTTPS encryption, and HTTP/2 support out of the box. Caddy stands out for its ease of use, with a simple configuration syntax and the ability to serve static files with zero configuration. It automatically obtains and renews SSL/TLS certificates from Let's Encrypt, making secure deployments straightforward. Caddy supports various plugins and modules for extended functionality, including reverse proxying, load balancing, and dynamic virtual hosting. It's designed with security in mind, implementing modern web standards by default. While it may not match the raw performance of servers like Nginx in extremely high-load scenarios, Caddy's simplicity, built-in security features, and low resource usage make it an attractive choice for many web hosting needs, particularly for smaller to medium-sized projects or developers seeking a hassle-free server setup.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "caddyserver/caddy",
"title": "caddyserver/caddy - Caddy on GitHub",
"url": "https://github.com/caddyserver/caddy",
"type": "opensource"
},
@ -1856,7 +1895,7 @@
"description": "Microsoft Internet Information Services (IIS) is a flexible, secure, and high-performance web server developed by Microsoft for hosting and managing web applications and services on Windows Server. IIS supports a variety of web technologies, including [ASP.NET](http://ASP.NET), PHP, and static content. It provides features such as request handling, authentication, SSL/TLS encryption, and URL rewriting. IIS also offers robust management tools, including a graphical user interface and command-line options, for configuring and monitoring web sites and applications. It is commonly used for deploying enterprise web applications and services in a Windows-based environment, offering integration with other Microsoft technologies and services.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Microsoft -IIS",
"url": "https://www.iis.net/",
"type": "article"
},
@ -1942,7 +1981,7 @@
},
"xPvVwGQw28uMeLYIWn8yn": {
"title": "Memcached",
"description": "Memcached (pronounced variously mem-cash-dee or mem-cashed) is a general-purpose distributed memory-caching system. It is often used to speed up dynamic database-driven websites by caching data and objects in RAM to reduce the number of times an external data source (such as a database or API) must be read. Memcached is free and open-source software, licensed under the Revised BSD license. Memcached runs on Unix-like operating systems (Linux and macOS) and on Microsoft Windows. It depends on the `libevent` library. Memcached's APIs provide a very large hash table distributed across multiple machines. When the table is full, subsequent inserts cause older data to be purged in the least recently used (LRU) order. Applications using Memcached typically layer requests and additions into RAM before falling back on a slower backing store, such as a database.\n\nMemcached has no internal mechanism to track misses which may happen. However, some third-party utilities provide this functionality.\n\nVisit the following resources to learn more:",
"description": "Memcached (pronounced variously mem-cash-dee or mem-cashed) is a general-purpose distributed memory-caching system. It is often used to speed up dynamic database-driven websites by caching data and objects in RAM to reduce the number of times an external data source (such as a database or API) must be read. Memcached is free and open-source software, licensed under the Revised BSD license. Memcached runs on Unix-like operating systems (Linux and macOS) and on Microsoft Windows. It depends on the `libevent` library. Memcached's APIs provide a very large hash table distributed across multiple machines. When the table is full, subsequent inserts cause older data to be purged in the least recently used (LRU) order. Applications using Memcached typically layer requests and additions into RAM before falling back on a slower backing store, such as a database.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "memcached/memcached",
@ -2091,7 +2130,7 @@
"type": "article"
},
{
"title": "Backpressure explained — the resisted flow of data through software",
"title": "Backpressure explained — The Resisted Flow of Data through Software",
"url": "https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7",
"type": "article"
},
@ -2136,7 +2175,7 @@
},
"f7iWBkC0X7yyCoP_YubVd": {
"title": "Migration Strategies",
"description": "Migration strategies involve planning and executing the transition of applications, data, or infrastructure from one environment to another, such as from on-premises systems to the cloud or between different cloud providers. Key strategies include:\n\n1. **Rehost (Lift and Shift)**: Moving applications as-is to the new environment with minimal changes, which is often the quickest but may not fully leverage new platform benefits.\n2. **Replatform**: Making some optimizations or changes to adapt applications for the new environment, enhancing performance or scalability while retaining most of the existing architecture.\n3. **Refactor**: Redesigning and modifying applications to optimize for the new environment, often taking advantage of new features and improving functionality or performance.\n4. **Repurchase**: Replacing existing applications with new, often cloud-based, solutions that better meet current needs.\n5. **Retain**: Keeping certain applications or systems in their current environment due to specific constraints or requirements.\n6. **Retire**: Decommissioning applications that are no longer needed or are redundant.\n\nEach strategy has its own trade-offs in terms of cost, complexity, and benefits, and the choice depends on factors like the application’s architecture, business needs, and resource availability.\n\nVisit the following resources to learn more:",
"description": "Migration strategies involve planning and executing the transition of applications, data, or infrastructure from one environment to another, such as from on-premises systems to the cloud or between different cloud providers. Key strategies include:\n\n1. **Rehost (Lift and Shift)**: Moving applications as-is to the new environment with minimal changes, which is often the quickest but may not fully leverage new platform benefits.\n2. **Replatform**: Making some optimizations or changes to adapt applications for the new environment, enhancing performance or scalability while retaining most of the existing architecture.\n3. **Refactor**: Redesigning and modifying applications to optimize for the new environment, often taking advantage of new features and improving functionality or performance.\n4. **Repurchase**: Replacing existing applications with new, often cloud-based, solutions that better meet current needs.\n5. **Retain**: Keeping certain applications or systems in their current environment due to specific constraints or requirements.\n6. **Retire**: Decommissioning applications that are no longer needed or are redundant.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Databases as a Challenge for Continuous Delivery",
@ -2152,7 +2191,7 @@
},
"osQlGGy38xMcKLtgZtWaZ": {
"title": "Types of Scaling",
"description": "Horizontal scaling (scaling out/in) involves adding or removing instances of resources, such as servers or containers, to handle increased or decreased loads. It distributes the workload across multiple instances to improve performance and redundancy. This method enhances the system's capacity by expanding the number of nodes in a distributed system.\n\nVertical scaling (scaling up/down) involves increasing or decreasing the resources (CPU, memory, storage) of a single instance or server to handle more load or reduce capacity. This method improves performance by upgrading the existing hardware or virtual machine but has limits based on the maximum capacity of the individual resource.\n\nBoth approaches have their advantages: horizontal scaling offers better fault tolerance and flexibility, while vertical scaling is often simpler to implement but can be limited by the hardware constraints of a single machine.\n\nVisit the following resources to learn more:",
"description": "Horizontal scaling (scaling out/in) involves adding or removing instances of resources, such as servers or containers, to handle increased or decreased loads. It distributes the workload across multiple instances to improve performance and redundancy. This method enhances the system's capacity by expanding the number of nodes in a distributed system.\n\nVertical scaling (scaling up/down) involves increasing or decreasing the resources (CPU, memory, storage) of a single instance or server to handle more load or reduce capacity. This method improves performance by upgrading the existing hardware or virtual machine but has limits based on the maximum capacity of the individual resource.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Horizontal vs Vertical Scaling",
@ -2207,7 +2246,7 @@
"description": "Monitoring involves continuously observing and tracking the performance, availability, and health of systems, applications, and infrastructure. It typically includes collecting and analyzing metrics, logs, and events to ensure systems are operating within desired parameters. Monitoring helps detect anomalies, identify potential issues before they escalate, and provides insights into system behavior. It often involves tools and platforms that offer dashboards, alerts, and reporting features to facilitate real-time visibility and proactive management. Effective monitoring is crucial for maintaining system reliability, performance, and for supporting incident response and troubleshooting.\n\nA few popular tools are Grafana, Sentry, Mixpanel, NewRelic.",
"links": [
{
"title": "Top monitoring tools 2024",
"title": "Top Monitoring Tools",
"url": "https://thectoclub.com/tools/best-application-monitoring-software/",
"type": "article"
},
@ -2307,9 +2346,9 @@
"description": "Bcrypt is a password-hashing function designed to securely hash passwords for storage in databases. Created by Niels Provos and David Mazières, it's based on the Blowfish cipher and incorporates a salt to protect against rainbow table attacks. Bcrypt's key feature is its adaptive nature, allowing for the adjustment of its cost factor to make it slower as computational power increases, thus maintaining resistance against brute-force attacks over time. It produces a fixed-size hash output, typically 60 characters long, which includes the salt and cost factor. Bcrypt is widely used in many programming languages and frameworks due to its security strength and relative ease of implementation. Its deliberate slowness in processing makes it particularly effective for password storage, where speed is not a priority but security is paramount.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "bcrypts npm package",
"url": "https://www.npmjs.com/package/bcrypt",
"type": "article"
"title": "bcrypt",
"url": "https://github.com/kelektiv/node.bcrypt.js",
"type": "opensource"
},
{
"title": "Understanding bcrypt",
@ -2429,7 +2468,7 @@
},
"TZ0BWOENPv6pQm8qYB8Ow": {
"title": "Server Security",
"description": "Server security involves protecting servers from threats and vulnerabilities to ensure the confidentiality, integrity, and availability of the data and services they manage. Key practices include:\n\n1. **Patch Management**: Regularly updating software and operating systems to fix vulnerabilities.\n2. **Access Control**: Implementing strong authentication mechanisms and restricting access to authorized users only.\n3. **Firewalls and Intrusion Detection**: Using firewalls to block unauthorized access and intrusion detection systems to monitor and respond to suspicious activities.\n4. **Encryption**: Encrypting data both in transit and at rest to protect sensitive information from unauthorized access.\n5. **Security Hardening**: Configuring servers with minimal services and features, applying security best practices to reduce the attack surface.\n6. **Regular Backups**: Performing regular backups to ensure data can be restored in case of loss or corruption.\n7. **Monitoring and Logging**: Continuously monitoring server activity and maintaining logs for auditing and detecting potential security incidents.\n\nEffective server security is crucial for safeguarding against attacks, maintaining system stability, and protecting sensitive data.\n\nLearn more from the following resources:",
"description": "Server security involves protecting servers from threats and vulnerabilities to ensure the confidentiality, integrity, and availability of the data and services they manage. Key practices include:\n\n1. **Patch Management**: Regularly updating software and operating systems to fix vulnerabilities.\n2. **Access Control**: Implementing strong authentication mechanisms and restricting access to authorized users only.\n3. **Firewalls and Intrusion Detection**: Using firewalls to block unauthorized access and intrusion detection systems to monitor and respond to suspicious activities.\n4. **Encryption**: Encrypting data both in transit and at rest to protect sensitive information from unauthorized access.\n5. **Security Hardening**: Configuring servers with minimal services and features, applying security best practices to reduce the attack surface.\n6. **Regular Backups**: Performing regular backups to ensure data can be restored in case of loss or corruption.\n7. **Monitoring and Logging**: Continuously monitoring server activity and maintaining logs for auditing and detecting potential security incidents.\n\nLearn more from the following resources:",
"links": [
{
"title": "What is a hardened server?",
@ -2600,7 +2639,7 @@
},
"hkxw9jPGYphmjhTjw8766": {
"title": "DNS and how it works?",
"description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like [www.example.com](http://www.example.com)) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. It also supports email routing, service discovery, and other network protocols.\n\nVisit the following resources to learn more:",
"description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like `www.example.com`) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. It also supports email routing, service discovery, and other network protocols.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is DNS?",
@ -2811,7 +2850,7 @@
"description": "OpenID is an open standard for decentralized authentication that allows users to log in to multiple websites and applications using a single set of credentials, managed by an identity provider (IdP). It enables users to authenticate their identity through an external service, simplifying the login process and reducing the need for multiple usernames and passwords. OpenID typically works in conjunction with OAuth 2.0 for authorization, allowing users to grant access to their data while maintaining security. This approach enhances user convenience and streamlines identity management across various platforms.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "OpenID Website",
"url": "https://openid.net/",
"type": "article"
},
@ -2839,7 +2878,7 @@
},
"UCHtaePVxS-0kpqlYxbfC": {
"title": "SAML",
"description": "Security Assertion Markup Language (SAML)\n-----------------------------------------\n\nSecurity Assertion Markup Language (SAML) is an XML-based framework used for single sign-on (SSO) and identity federation, enabling users to authenticate once and gain access to multiple applications or services. It allows for the exchange of authentication and authorization data between an identity provider (IdP) and a service provider (SP). SAML assertions are XML documents that contain user identity information and attributes, and are used to convey authentication credentials and permissions. By implementing SAML, organizations can streamline user management, enhance security through centralized authentication, and simplify the user experience by reducing the need for multiple logins across different systems.\n\nLearn more from the following resources:",
"description": "Security Assertion Markup Language (SAML) is an XML-based framework used for single sign-on (SSO) and identity federation, enabling users to authenticate once and gain access to multiple applications or services. It allows for the exchange of authentication and authorization data between an identity provider (IdP) and a service provider (SP). SAML assertions are XML documents that contain user identity information and attributes, and are used to convey authentication credentials and permissions. By implementing SAML, organizations can streamline user management, enhance security through centralized authentication, and simplify the user experience by reducing the need for multiple logins across different systems.\n\nLearn more from the following resources:",
"links": [
{
"title": "SAML Explained in Plain English",
@ -2884,17 +2923,17 @@
"description": "Solr is an open-source, highly scalable search platform built on Apache Lucene, designed for full-text search, faceted search, and real-time indexing. It provides powerful features for indexing and querying large volumes of data with high performance and relevance. Solr supports complex queries, distributed searching, and advanced text analysis, including tokenization and stemming. It offers features such as faceted search, highlighting, and geographic search, and is commonly used for building search engines and data retrieval systems in various applications, from e-commerce to content management.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "apache/solr",
"title": "Solr on Github",
"url": "https://github.com/apache/solr",
"type": "opensource"
},
{
"title": "Official Website",
"title": "Solr Website",
"url": "https://solr.apache.org/",
"type": "article"
},
{
"title": "Official Documentation",
"title": "Solr Documentation",
"url": "https://solr.apache.org/resources.html#documentation",
"type": "article"
},
@ -2910,7 +2949,7 @@
"description": "Real-time data refers to information that is processed and made available immediately or with minimal delay, allowing users or systems to react promptly to current conditions. This type of data is essential in applications requiring immediate updates and responses, such as financial trading platforms, online gaming, real-time analytics, and monitoring systems. Real-time data processing involves capturing, analyzing, and delivering information as it is generated, often using technologies like stream processing frameworks (e.g., Apache Kafka, Apache Flink) and low-latency databases. Effective real-time data systems can handle high-speed data flows, ensuring timely and accurate decision-making.\n\nLearn more from the following resources:",
"links": [
{
"title": "Real-time data - Wiki",
"title": "Real-time Data - Wiki",
"url": "https://en.wikipedia.org/wiki/Real-time_data",
"type": "article"
},
@ -2942,7 +2981,7 @@
"description": "Short polling is a technique where a client periodically sends requests to a server at regular intervals to check for updates or new data. The server responds with the current state or any changes since the last request. While simple to implement and compatible with most HTTP infrastructures, short polling can be inefficient due to the frequent network requests and potential for increased latency in delivering updates. It contrasts with long polling and WebSockets, which offer more efficient mechanisms for real-time communication. Short polling is often used when real-time requirements are less stringent and ease of implementation is a priority.\n\nLearn more from the following resources:",
"links": [
{
"title": "Amazon SQS short and long polling",
"title": "Amazon SQS Short and Long Polling",
"url": "https://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSDeveloperGuide/sqs-short-and-long-polling.html",
"type": "article"
},
@ -2984,7 +3023,7 @@
"description": "Amazon DynamoDB is a fully managed, serverless NoSQL database service provided by Amazon Web Services (AWS). It offers high-performance, scalable, and flexible data storage for applications of any scale. DynamoDB supports both key-value and document data models, providing fast and predictable performance with seamless scalability. It features automatic scaling, built-in security, backup and restore options, and global tables for multi-region deployment. DynamoDB excels in handling high-traffic web applications, gaming backends, mobile apps, and IoT solutions. It offers consistent single-digit millisecond latency at any scale and supports both strongly consistent and eventually consistent read models. With its integration into the AWS ecosystem, on-demand capacity mode, and support for transactions, DynamoDB is widely used for building highly responsive and scalable applications, particularly those with unpredictable workloads or requiring low-latency data access.\n\nLearn more from the following resources:",
"links": [
{
"title": "AWS DynamoDB Website",
"title": "AWS DynamoDB",
"url": "https://aws.amazon.com/dynamodb/",
"type": "article"
},
@ -3002,10 +3041,10 @@
},
"RyJFLLGieJ8Xjt-DlIayM": {
"title": "Firebase",
"description": "Firebase is a comprehensive mobile and web application development platform owned by Google. It provides a suite of cloud-based services that simplify app development, hosting, and scaling. Key features include real-time database, cloud storage, authentication, hosting, cloud functions, and analytics. Firebase offers real-time synchronization, allowing data to be updated across clients instantly. Its authentication service supports multiple providers, including email/password, social media logins, and phone authentication. The platform's serverless architecture enables developers to focus on front-end development without managing backend infrastructure. Firebase also provides tools for app testing, crash reporting, and performance monitoring. While it excels in rapid prototyping and building real-time applications, its proprietary nature and potential for vendor lock-in are considerations for large-scale or complex applications. Firebase's ease of use and integration with Google Cloud Platform make it popular for startups and projects requiring quick deployment.\n\nLearn more from the following resources:",
"description": "Firebase is a comprehensive mobile and web application development platform owned by Google. It provides a suite of cloud-based services that simplify app development, hosting, and scaling. Key features include real-time database, cloud storage, authentication, hosting, cloud functions, and analytics. Firebase offers real-time synchronization, allowing data to be updated across clients instantly. Its authentication service supports multiple providers, including email/password, social media logins, and phone authentication. The platform's serverless architecture enables developers to focus on front-end development without managing backend infrastructure. Firebase also provides tools for app testing, crash reporting, and performance monitoring.\n\nLearn more from the following resources:",
"links": [
{
"title": "The ultimate guide to Firebase",
"title": "The Ultimate Guide to Firebase",
"url": "https://fireship.io/lessons/the-ultimate-beginners-guide-to-firebase/",
"type": "course"
},
@ -3042,7 +3081,7 @@
"description": "SQLite is a lightweight, serverless, self-contained SQL database engine that is designed for simplicity and efficiency. It is widely used in embedded systems and applications where a full-featured database server is not required, such as mobile apps, desktop applications, and small to medium-sized websites. SQLite stores data in a single file, which makes it easy to deploy and manage. It supports standard SQL queries and provides ACID (Atomicity, Consistency, Isolation, Durability) compliance to ensure data integrity. SQLite’s small footprint, minimal configuration, and ease of use make it a popular choice for applications needing a compact, high-performance database solution.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "SQLite website",
"title": "SQLite",
"url": "https://www.sqlite.org/index.html",
"type": "article"
},
@ -3104,7 +3143,7 @@
"type": "video"
},
{
"title": "What is time series data?",
"title": "What is Time Series Data?",
"url": "https://www.youtube.com/watch?v=Se5ipte9DMY",
"type": "video"
}
@ -3209,7 +3248,7 @@
"description": "Database migrations are a version-controlled way to manage and apply incremental changes to a database schema over time, allowing developers to modify the database structure (e.g., adding tables, altering columns) without affecting existing data. They ensure that the database evolves alongside application code in a consistent, repeatable manner across environments (e.g., development, testing, production), while maintaining compatibility with older versions of the schema. Migrations are typically written in SQL or a database-agnostic language, and are executed using migration tools like Liquibase, Flyway, or built-in ORM features such as Django or Rails migrations.\n\nLearn more from the following resources:",
"links": [
{
"title": "What are database migrations?",
"title": "What are Database Migrations?",
"url": "https://www.prisma.io/dataguide/types/relational/what-are-database-migrations",
"type": "article"
},

@ -372,16 +372,6 @@
"url": "https://www.coursera.org/lecture/data-structures/doubly-linked-lists-jpGKD",
"type": "course"
},
{
"title": "CS 61B Lecture 7: Linked Lists I",
"url": "https://archive.org/details/ucberkeley_webcast_htzJdKoEmO0",
"type": "article"
},
{
"title": "CS 61B Lecture 7: Linked Lists II",
"url": "https://archive.org/details/ucberkeley_webcast_-c4I3gFYe3w",
"type": "article"
},
{
"title": "Linked List Data Structure | Illustrated Data Structures",
"url": "https://www.youtube.com/watch?v=odW9FU8jPRQ",
@ -392,6 +382,16 @@
"url": "https://www.youtube.com/watch?v=F8AbOfQwl1c",
"type": "video"
},
{
"title": "CS 61B Lecture 7: Linked Lists I",
"url": "https://archive.org/details/ucberkeley_webcast_htzJdKoEmO0",
"type": "video"
},
{
"title": "CS 61B Lecture 7: Linked Lists II",
"url": "https://archive.org/details/ucberkeley_webcast_-c4I3gFYe3w",
"type": "video"
},
{
"title": "Why you should avoid Linked Lists?",
"url": "https://www.youtube.com/watch?v=YQs6IC-vgmo",
@ -511,16 +511,16 @@
"url": "https://www.coursera.org/lecture/data-structures/dynamic-arrays-EwbnV",
"type": "course"
},
{
"title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
"url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
"type": "article"
},
{
"title": "Array Data Structure | Illustrated Data Structures",
"url": "https://www.youtube.com/watch?v=QJNwK2uJyGs",
"type": "video"
},
{
"title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
"url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
"type": "video"
},
{
"title": "Dynamic and Static Arrays",
"url": "https://www.youtube.com/watch?v=PEnFFiQe1pM&list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu&index=6",
@ -3786,7 +3786,7 @@
},
"7r7o8pYhFHVAJIv0wNT6X": {
"title": "Hashing / Encryption / Encoding",
"description": "Hashing is a one-way function that takes an input and produces a fixed-length output. The output is called a hash. The hash is a unique representation of the input. The hash is deterministic, meaning that the same input will always produce the same hash. The hash is irreversible, meaning that it is impossible to go from the hash back to the original input. The hash is collision-resistant, meaning that it is impossible to find two different inputs that produce the same hash.\n\nEncryption is a two-way function that takes an input and produces an output. The output is called ciphertext. The ciphertext is a unique representation of the input. The ciphertext is deterministic, meaning that the same input will always produce the same ciphertext. The ciphertext is reversible, meaning that it is possible to go from the ciphertext back to the original input. The ciphertext is collision-resistant, meaning that it is impossible to find two different inputs that produce the same ciphertext.\n\nEncoding is a two-way function that takes an input and produces an output. The output is called encoded text. The encoded text is a unique representation of the input. The encoded text is deterministic, meaning that the same input will always produce the same encoded text. The encoded text is reversible, meaning that it is possible to go from the encoded text back to the original input. The encoded text is not collision-resistant, meaning that it is possible to find two different inputs that produce the same encoded text.\n\nVisit the following resources to learn more:",
"description": "Hashing is a one-way function that takes an input and produces a fixed-length output. The output is called a hash. The hash is a unique representation of the input. The hash is deterministic, meaning that the same input will always produce the same hash. The hash is irreversible, meaning that it is impossible to go from the hash back to the original input. The hash is not collision-resistant, meaning that it is possible to find two different inputs that produce the same hash.\n\nEncryption is a two-way function that takes an input and produces an output. The output is called ciphertext. The ciphertext is a unique representation of the input. The ciphertext is deterministic, meaning that the same input will always produce the same ciphertext. The ciphertext is reversible, meaning that it is possible to go from the ciphertext back to the original input. The ciphertext is collision-resistant, meaning that it is impossible to find two different inputs that produce the same ciphertext.\n\nEncoding is a two-way function that takes an input and produces an output. The output is called encoded text. The encoded text is a unique representation of the input. The encoded text is deterministic, meaning that the same input will always produce the same encoded text. The encoded text is reversible, meaning that it is possible to go from the encoded text back to the original input. The encoded text is collision-resistant, meaning that it is impossible to find two different inputs that produce the same encoded text.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Explore top posts about Encryption",

@ -766,7 +766,7 @@
},
"dJ0NUsODFhk52W2zZxoPh": {
"title": "SSL and TLS Basics",
"description": "Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or systems with one set of login credentials. It enables users to log in once and gain access to various connected systems without re-entering credentials. SSO enhances user experience by reducing password fatigue, streamlines access management for IT departments, and can improve security by centralizing authentication controls. It typically uses protocols like SAML, OAuth, or OpenID Connect to securely share authentication information across different domains. While SSO offers convenience and can strengthen security when implemented correctly, it also presents a single point of failure if compromised, making robust security measures for the SSO system critical.\n\nLearn more from the following resources:",
"description": "Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols used to provide security in internet communications. These protocols encrypt the data that is transmitted over the web, so anyone who tries to intercept packets will not be able to interpret the data. One difference that is important to know is that SSL is now deprecated due to security flaws, and most modern web browsers no longer support it. But TLS is still secure and widely supported, so preferably use TLS.\n\nLearn more from the following resources:",
"links": [
{
"title": "What’s the Difference Between SSL and TLS?",
@ -3223,7 +3223,7 @@
},
"6ILPXeUDDmmYRiA_gNTSr": {
"title": "SSL vs TLS",
"description": "Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or systems with one set of login credentials. It enables users to log in once and gain access to various connected systems without re-entering credentials. SSO enhances user experience by reducing password fatigue, streamlines access management for IT departments, and can improve security by centralizing authentication controls. It typically uses protocols like SAML, OAuth, or OpenID Connect to securely share authentication information across different domains. While SSO offers convenience and can strengthen security when implemented correctly, it also presents a single point of failure if compromised, making robust security measures for the SSO system critical.\n\nLearn more from the following resources:",
"description": "**SSL (Secure Sockets Layer)** is a cryptographic protocol used to secure communications by encrypting data transmitted between clients and servers. SSL establishes a secure connection through a process known as the handshake, during which the client and server agree on cryptographic algorithms, exchange keys, and authenticate the server with a digital certificate. SSL’s security is considered weaker compared to its successor, TLS, due to vulnerabilities in its older encryption methods and lack of modern cryptographic techniques.\n\n**TLS (Transport Layer Security)** improves upon SSL by using stronger encryption algorithms, more secure key exchange mechanisms, and enhanced certificate validation. Like SSL, TLS begins with a handshake where the client and server agree on a protocol version and cipher suite, exchange keys, and verify certificates. However, TLS incorporates additional features like Perfect Forward Secrecy (PFS) and more secure hashing algorithms, making it significantly more secure than SSL for modern communications.\n\nLearn more from the following resources:",
"links": [
{
"title": "What’s the Difference Between SSL and TLS?",

@ -117,6 +117,11 @@
"title": "Rust",
"description": "Rust is a systems programming language that focuses on safety, concurrency, and performance. Developed by Mozilla Research, Rust combines low-level control over system resources with high-level abstractions, preventing common programming errors like null or dangling pointer references at compile-time. It features a borrow checker for managing memory and preventing data races, making it ideal for building reliable and efficient software. Rust's zero-cost abstractions, pattern matching, and trait-based generics offer powerful tools for expressing complex ideas clearly. While primarily used for systems programming, web assembly, and game development, Rust's growing ecosystem supports various domains. Its emphasis on memory safety without sacrificing performance makes it increasingly popular for developing secure, high-performance applications in fields ranging from operating systems to web services.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Rust by Practice - Interactive Rust Course",
"url": "https://practice.course.rs/",
"type": "course"
},
{
"title": "The Rust Programming Language - online book",
"url": "https://doc.rust-lang.org/book/",
@ -189,9 +194,14 @@
"title": "Operating System",
"description": "Operating systems (OS) are fundamental software that manage computer hardware and software resources, providing common services for computer programs. They act as an intermediary between applications and hardware, handling tasks like memory management, process scheduling, file system management, and device control. Common desktop operating systems include Microsoft Windows, macOS, and various Linux distributions. Mobile devices typically run iOS or Android. Server environments often use Linux distributions like Ubuntu Server, Red Hat Enterprise Linux, or Windows Server. Each OS type offers distinct features, user interfaces, and compatibility with different software and hardware. Operating systems play a crucial role in system security, performance optimization, and providing a consistent user experience across diverse computing devices and environments.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Operating Systems - Wiki",
"url": "https://en.wikipedia.org/wiki/Operating_system",
"type": "article"
},
{
"title": "All you need to know about OS.",
"url": "https://www.javatpoint.com/os-tutorial",
"url": "https://www.javatpoint.com/operating-system",
"type": "article"
},
{
@ -205,7 +215,7 @@
"type": "video"
},
{
"title": "Operating Systems!",
"title": "Operating Systems",
"url": "https://www.youtube.com/watch?v=vBURTt97EkA&list=PLBlnK6fEyqRiVhbXDGLXDk_OQAeuVcp2O",
"type": "video"
}
@ -636,6 +646,11 @@
"title": "Git",
"description": "Git is a distributed version control system designed to track changes in source code during software development. It allows multiple developers to work on the same project simultaneously, maintaining a complete history of modifications. Git features local repositories on each developer's machine, enabling offline work and fast operations. It supports non-linear development through branching and merging, facilitating parallel work streams. Git's distributed nature enhances collaboration, backup, and experimentation. Key concepts include commits, branches, merges, and remote repositories. With its speed, flexibility, and robust branching and merging capabilities, Git has become the standard for version control in modern software development, powering platforms like GitHub and GitLab.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Git by Example - Learn Version Control with Bite-sized Lessons",
"url": "https://antonz.org/git-by-example/",
"type": "course"
},
{
"title": "Learn Git & GitHub",
"url": "https://roadmap.sh/git-github",
@ -812,6 +827,11 @@
"url": "https://www.cisco.com/c/en_in/products/security/firewalls/what-is-a-firewall.html",
"type": "article"
},
{
"title": "Uncomplicated Firewall (UFW)",
"url": "https://dev.to/coder7475/uncomplicated-firewall-ufw-1638",
"type": "article"
},
{
"title": "Why do we need Firewalls?",
"url": "https://www.tutorialspoint.com/what-is-a-firewall-and-why-do-you-need-one",
@ -838,6 +858,11 @@
"url": "https://nginx.org/",
"type": "article"
},
{
"title": "Basic NGINX Setup on Ubuntu: Guide to a Functional and Secure Website Serving",
"url": "https://swissmade.host/en/blog/basic-nginx-setup-ubuntu-guide-to-a-functional-and-secure-website-serving",
"type": "article"
},
{
"title": "Explore top posts about Nginx",
"url": "https://app.daily.dev/tags/nginx?ref=roadmapsh",
@ -979,6 +1004,11 @@
"url": "https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/",
"type": "article"
},
{
"title": "NGINX Reverse Proxy and Load Balancing",
"url": "https://dzone.com/articles/nginx-reverse-proxy-and-load-balancing",
"type": "article"
},
{
"title": "What is a Load Balancer?",
"url": "https://www.youtube.com/watch?v=sCR3SAVdyCc",
@ -1000,6 +1030,11 @@
"url": "https://www.nginx.com/resources/glossary/reverse-proxy-server/",
"type": "article"
},
{
"title": "Understanding NGINX as a Reverse Proxy",
"url": "https://medium.com/globant/understanding-nginx-as-a-reverse-proxy-564f76e856b2",
"type": "article"
},
{
"title": "Proxy vs Reverse Proxy (Real-world Examples)",
"url": "https://www.youtube.com/watch?v=4NB0NDtOwIQ",
@ -2084,6 +2119,11 @@
"title": "GitHub Actions",
"description": "GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform integrated directly into GitHub repositories. It allows developers to automate software workflows, including building, testing, and deploying applications. Actions are defined in YAML files and triggered by various GitHub events such as pushes, pull requests, or scheduled tasks. The platform provides a marketplace of pre-built actions and supports custom actions. GitHub Actions offers matrix builds, parallel job execution, and supports multiple operating systems and languages. It integrates seamlessly with GitHub's ecosystem, facilitating automated code review, issue tracking, and project management. This tool enables developers to implement DevOps practices efficiently within their GitHub workflow, enhancing productivity and code quality.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GitHub Actions Certification – Full Course to PASS the Exam",
"url": "https://www.youtube.com/watch?v=Tz7FsunBbfQ",
"type": "course"
},
{
"title": "Learn Git & GitHub",
"url": "https://roadmap.sh/git-github",

@ -1,13 +1,29 @@
{
"VlNNwIEDWqQXtqkHWJYzC": {
"title": "Internet",
"description": "The Internet is a global network of interconnected computer networks that use the Internet Protocol Suite (TCP/IP) to communicate. It enables the exchange of data, information, and services across the world, connecting billions of devices and users. The Internet has revolutionized communication, commerce, education, and entertainment, becoming an integral part of modern society. It supports various applications and services, from web browsing and instant messaging to streaming media and online gaming. While offering unprecedented access to information and connectivity, the Internet also raises concerns about privacy, security, and digital divide issues.",
"links": []
"description": "The Internet is a global network of interconnected computer networks that use the Internet Protocol Suite (TCP/IP) to communicate. It enables the exchange of data, information, and services across the world, connecting billions of devices and users. The Internet has revolutionized communication, commerce, education, and entertainment, becoming an integral part of modern society. It supports various applications and services, from web browsing and instant messaging to streaming media and online gaming. While offering unprecedented access to information and connectivity, the Internet also raises concerns about privacy, security, and digital divide issues.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Introduction to Internet",
"url": "https://roadmap.sh/guides/what-is-internet",
"type": "article"
},
{
"title": "The Internet",
"url": "https://en.wikipedia.org/wiki/Internet",
"type": "article"
}
]
},
"yCnn-NfSxIybUQ2iTuUGq": {
"title": "How does the internet work?",
"description": "The Internet works through a global network of interconnected computers and servers, communicating via standardized protocols. Data is broken into packets and routed through various network nodes using the Internet Protocol (IP). These packets travel across different physical infrastructures, including fiber optic cables, satellites, and wireless networks. The Transmission Control Protocol (TCP) ensures reliable delivery and reassembly of packets at their destination. Domain Name System (DNS) servers translate human-readable website names into IP addresses. When you access a website, your device sends a request to the appropriate server, which responds with the requested data. This process, facilitated by routers, switches, and other networking equipment, enables the seamless exchange of information across vast distances, forming the backbone of our digital communications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Introduction to Internet",
"url": "https://roadmap.sh/guides/what-is-internet",
"type": "article"
},
{
"title": "How does the Internet Work?",
"url": "https://cs.fyi/guide/how-does-internet-work",
@ -18,11 +34,6 @@
"url": "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work",
"type": "article"
},
{
"title": "Introduction to Internet",
"url": "/guides/what-is-internet",
"type": "article"
},
{
"title": "How the Internet Works in 5 Minutes",
"url": "https://www.youtube.com/watch?v=7_LPdttKXPc",
@ -34,11 +45,6 @@
"title": "What is HTTP?",
"description": "HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the World Wide Web. It's an application-layer protocol that defines how messages are formatted and transmitted between web browsers and servers. HTTP operates on a request-response model: clients (usually web browsers) send requests to servers, which then respond with the requested data. The protocol is stateless, meaning each request is independent of any previous requests. HTTP supports various methods (GET, POST, PUT, DELETE, etc.) for different types of interactions with resources. HTTPS is the secure version of HTTP, using encryption to protect data in transit. HTTP/2 and HTTP/3 are more recent versions, offering improved performance through features like multiplexing and header compression. Understanding HTTP is crucial for web development, as it underpins how web applications communicate and function.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "HTTP Crash Course",
"url": "https://www.youtube.com/watch?v=qgZiUvV41TI",
"type": "course"
},
{
"title": "Everything you need to know about HTTP",
"url": "https://cs.fyi/guide/http-in-depth",
@ -87,7 +93,7 @@
"description": "Web hosting is a service that allows individuals and organizations to make their websites accessible on the internet. It involves storing website files on powerful computers called servers, which are connected to a high-speed network. When users enter a domain name in their browser, the web host serves the website's content. Hosting services range from shared hosting (where multiple websites share server resources) to dedicated hosting (where a server is exclusively used by one client). Other types include VPS (Virtual Private Server) hosting, cloud hosting, and managed WordPress hosting. Web hosts typically provide additional services such as email hosting, domain registration, SSL certificates, and technical support. The choice of web hosting impacts a website's performance, security, and scalability, making it a crucial decision for any online presence.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is web hosting?",
"title": "What is Web Hosting?",
"url": "https://www.namecheap.com/hosting/what-is-web-hosting-definition/",
"type": "article"
},
@ -209,7 +215,7 @@
},
"z8-556o-PaHXjlytrawaF": {
"title": "Writing Semantic HTML",
"description": "Semantic HTML refers to the use of HTML markup to reinforce the meaning of web content, rather than merely defining its appearance. It involves using HTML elements that clearly describe their purpose and content. Semantic HTML improves accessibility, SEO, and code readability. Key elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. It also encompasses using appropriate heading levels (`<h1>` to `<h6>`), lists (`<ul>`, `<ol>`, `<li>`), and data tables (`<table>`, `<th>`, `<td>`). Semantic HTML helps screen readers interpret page content, enables better browser rendering, and provides clearer structure for developers. By using semantically correct elements, developers create more meaningful, accessible, and maintainable web documents that are easier for both humans and machines to understand and process.\n\nVisit the following resources to learn more:",
"description": "Semantic HTML refers to the use of HTML markup to reinforce the meaning of web content, rather than merely defining its appearance. It involves using HTML elements that clearly describe their purpose and content. Semantic HTML improves accessibility, SEO, and code readability. Key elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. It also encompasses using appropriate heading levels (`<h1>` to `<h6>`), lists (`<ul>`, `<ol>`,`<li>`), and data tables (`<table>`, `<th>`, `<td>`). Semantic HTML helps screen readers interpret page content, enables better browser rendering, and provides clearer structure for developers. By using semantically correct elements, developers create more meaningful, accessible, and maintainable web documents that are easier for both humans and machines to understand and process.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Guide to Writing Semantic HTML",
@ -227,7 +233,7 @@
"type": "article"
},
{
"title": "Why & When to Use Semantic HTML Elements over Divs",
"title": "Why & When to Use Semantic HTML Elements over Div(s)",
"url": "https://www.youtube.com/watch?v=bOUhq46fd5g",
"type": "video"
}
@ -515,7 +521,7 @@
"links": [
{
"title": "Learn Git & Github",
"url": "/git-github",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
@ -530,7 +536,7 @@
},
{
"title": "GitLab Website",
"url": "https://gitlab.com",
"url": "https://about.gitlab.com",
"type": "article"
},
{
@ -545,8 +551,8 @@
"description": "Version Control Systems (VCS) are tools that help developers track and manage changes to code over time. They allow multiple people to work on a project simultaneously, maintaining a history of modifications. Git is the most popular VCS, known for its distributed nature and branching model. Other systems include Subversion (SVN) and Mercurial. VCS enables features like branching for parallel development, merging to combine changes, and reverting to previous states. They facilitate collaboration through remote repositories, pull requests, and code reviews. VCS also provides backup and recovery capabilities, conflict resolution, and the ability to tag specific points in history. By maintaining a detailed record of changes and supporting non-linear development, VCS has become an essential tool in modern software development, enhancing productivity, code quality, and team collaboration.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn Git and GitHub",
"url": "/git-github",
"title": "Learn Git & Github",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
@ -571,8 +577,8 @@
"description": "Git is a distributed version control system designed to handle projects of any size with speed and efficiency. Created by Linus Torvalds in 2005, Git tracks changes in source code during software development, allowing multiple developers to work together on non-linear development. It provides strong support for branching, merging, and distributed development workflows. Git maintains a complete history of all changes, enabling easy rollbacks and comparisons between versions. Its distributed nature means each developer has a full copy of the repository, allowing for offline work and backup. Git's speed, flexibility, and robust branching and merging capabilities have made it the most widely used version control system in software development, particularly for open-source projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn Git & GitHub",
"url": "/git-github",
"title": "Visit Dedicated Git & Github Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
@ -602,8 +608,8 @@
"description": "Package managers are tools that automate the process of installing, updating, configuring, and removing software packages in a consistent manner. They handle dependency resolution, version management, and package distribution for programming languages and operating systems. Popular package managers include npm for JavaScript, pip for Python, and apt for Debian-based Linux distributions. These tools maintain a centralized repository of packages, allowing developers to easily share and reuse code. Package managers simplify project setup, ensure consistency across development environments, and help manage complex dependency trees. They play a crucial role in modern software development by streamlining workflow, enhancing collaboration, and improving code reusability.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "An Absolute Beginners Guide to Using npm",
"url": "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/",
"title": "PNPM: The Faster, More Performant NPM",
"url": "https://pnpm.io/",
"type": "article"
},
{
@ -611,6 +617,11 @@
"url": "https://yarnpkg.com/en/docs/getting-started",
"type": "article"
},
{
"title": "An Absolute Beginners Guide to Using npm",
"url": "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/",
"type": "article"
},
{
"title": "NPM Crash Course",
"url": "https://www.youtube.com/watch?v=jHDhaSSKmB0",
@ -628,8 +639,8 @@
"description": "GitHub has become a central hub for open-source projects and is widely used by developers, companies, and organizations for both private and public repositories. It was acquired by Microsoft in 2018 but continues to operate as a relatively independent entity. GitHub's popularity has made it an essential tool in modern software development workflows and a key platform for showcasing coding projects and contributing to open-source software.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn Git & GitHub",
"url": "/git-github",
"title": "Visit Dedicated Git & Github Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
@ -659,13 +670,13 @@
"description": "GitLab is a web-based DevOps platform that provides a complete solution for the software development lifecycle. GitLab emphasizes an all-in-one approach, integrating various development tools into a single platform. It's available as both a cloud-hosted service and a self-hosted solution, giving organizations flexibility in deployment. GitLab's focus on DevOps practices and its comprehensive feature set make it popular among enterprises and teams seeking a unified platform for their entire development workflow. While similar to GitHub in many respects, GitLab's integrated CI/CD capabilities and self-hosting options are often cited as key differentiators.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GitLab Documentation",
"url": "https://docs.gitlab.com/",
"title": "GitLab Website",
"url": "https://gitlab.com/",
"type": "article"
},
{
"title": "GitLab Website",
"url": "https://gitlab.com/",
"title": "GitLab Documentation",
"url": "https://docs.gitlab.com/",
"type": "article"
},
{
@ -727,7 +738,7 @@
"description": "pnpm (performant npm) is a fast, disk-space efficient package manager for JavaScript and Node.js projects. It addresses inefficiencies in npm and Yarn by using a unique approach to storing and linking dependencies. pnpm creates a single, global store for all packages and uses hard links to reference them in project node\\_modules, significantly reducing disk space usage and installation time. It strictly adheres to package.json specifications, ensuring consistent installs across environments. pnpm offers features like workspace support for monorepos, side-by-side versioning, and improved security through better isolation of dependencies. While less widely adopted than npm or Yarn, pnpm's performance benefits and efficient disk usage are attracting increasing attention in the JavaScript community.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "PNPM Website",
"url": "https://pnpm.io",
"type": "article"
},
@ -752,6 +763,11 @@
"url": "https://github.com/workshopper/how-to-npm",
"type": "opensource"
},
{
"title": "NPM Website",
"url": "https://www.npmjs.com/https://www.npmjs.com/",
"type": "article"
},
{
"title": "Modern JavaScript for Dinosaurs",
"url": "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html",
@ -774,12 +790,12 @@
"description": "Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "15 crazy new JS framework features you don’t know yet",
"title": "15 Crazy New JS Framework Features You Don’t Know Yet",
"url": "https://www.youtube.com/watch?v=466U-2D86bc",
"type": "video"
},
{
"title": "Which JS Framework is best?",
"title": "Which JS Framework is Best?",
"url": "https://www.youtube.com/watch?v=cuHDQhDhvPE",
"type": "video"
}
@ -795,7 +811,7 @@
"type": "article"
},
{
"title": "Official - Getting started with Angular",
"title": "Getting started with Angular",
"url": "https://angular.io/start",
"type": "article"
},
@ -899,7 +915,7 @@
"description": "SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses a fine-grained reactivity system that updates only what changes, resulting in high performance. SolidJS compiles templates to real DOM nodes and updates them in-place, avoiding the overhead of a virtual DOM. It offers a syntax similar to React, making it familiar to many developers, but with a different underlying mechanism. SolidJS supports JSX, provides built-in state management, and emphasizes composition over inheritance. Its small size and lack of runtime overhead make it particularly suitable for applications requiring high performance. While newer compared to some frameworks, SolidJS is gaining popularity for its simplicity, performance, and developer-friendly approach to reactive programming.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website - SolidJS",
"title": "SolidJS Website",
"url": "https://www.solidjs.com/",
"type": "article"
},
@ -930,7 +946,7 @@
"type": "article"
},
{
"title": "Qwik… the world's first O(1) JavaScript framework?",
"title": "Qwik - The world's first O(1) JavaScript Framework?",
"url": "https://www.youtube.com/watch?v=x2eF3YLiNhY",
"type": "video"
}
@ -938,8 +954,24 @@
},
"XDTD8el6OwuQ55wC-X4iV": {
"title": "Writing CSS",
"description": "Modern CSS emphasizes responsive design with techniques like media queries and fluid typography. It also includes methodologies like CSS-in-JS and utility-first frameworks (e.g., Tailwind CSS). Features such as CSS Logical Properties improve internationalization, while CSS Houdini allows for more powerful custom styling. Modern CSS focuses on performance optimization, maintainability, and creating adaptive, accessible designs across various devices and screen sizes, significantly improving the capabilities and efficiency of web styling.",
"links": []
"description": "Modern CSS emphasizes responsive design with techniques like media queries and fluid typography. It also includes methodologies like CSS-in-JS and utility-first frameworks (e.g., Tailwind CSS). Features such as CSS Logical Properties improve internationalization, while CSS Houdini allows for more powerful custom styling. Modern CSS focuses on performance optimization, maintainability, and creating adaptive, accessible designs across various devices and screen sizes, significantly improving the capabilities and efficiency of web styling.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Modern CSS: A Comprehensive Guide",
"url": "https://moderncss.dev/",
"type": "article"
},
{
"title": "CSS-Tricks: Modern CSS",
"url": "https://css-tricks.com/modern-css/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
}
]
},
"eghnfG4p7i-EDWfp3CQXC": {
"title": "Tailwind",
@ -955,6 +987,11 @@
"url": "https://tailwindcss.com",
"type": "article"
},
{
"title": "Online Playground",
"url": "https://play.tailwindcss.com",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
@ -997,6 +1034,26 @@
"title": "CSS Preprocessors",
"description": "CSS preprocessors are scripting languages that extend the capabilities of standard CSS, allowing developers to write more maintainable and efficient stylesheets. They introduce features like variables, nesting, mixins, functions, and mathematical operations, which are then compiled into standard CSS. Popular preprocessors include Sass, Less, and Stylus. These tools enable developers to organize styles more logically, reuse code more effectively, and create complex CSS structures with less repetition. Preprocessors often support features like partials for modular stylesheets and built-in color manipulation functions. By using a preprocessor, developers can write more DRY (Don't Repeat Yourself) code, manage large-scale projects more easily, and potentially improve the performance of their stylesheets through optimization during the compilation process.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Sass Website",
"url": "https://sass-lang.com/",
"type": "article"
},
{
"title": "Less Website",
"url": "https://lesscss.org/",
"type": "article"
},
{
"title": "Stylus Website",
"url": "https://stylus-lang.com/",
"type": "article"
},
{
"title": "PostCSS Website",
"url": "https://postcss.org/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
@ -1051,7 +1108,7 @@
"description": "PostCSS is a tool for transforming CSS with JavaScript plugins. It allows developers to enhance their CSS workflow by automating repetitive tasks, adding vendor prefixes, and implementing future CSS features. PostCSS works as a preprocessor, but unlike Sass or Less, it's highly modular and customizable. Users can choose from a wide range of plugins or create their own to suit specific needs. Popular plugins include Autoprefixer for adding vendor prefixes, cssnext for using future CSS features, and cssnano for minification. PostCSS integrates well with various build tools and can be used alongside traditional CSS preprocessors. Its flexibility and performance make it a popular choice for optimizing CSS in modern web development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "PostCSS Website",
"url": "https://postcss.org/",
"type": "article"
},
@ -1135,7 +1192,7 @@
"description": "Parcel is a zero-configuration web application bundler that simplifies the process of building and deploying web projects. It supports multiple programming languages and file types out of the box, including JavaScript, CSS, HTML, and various image formats. Parcel automatically analyzes dependencies, transforms code, and optimizes assets without requiring a complex configuration file. It offers features like hot module replacement, code splitting, and tree shaking by default. Parcel's main selling point is its ease of use and fast build times, achieved through parallel processing and caching. While it may lack some advanced features of more established bundlers like Webpack, Parcel's simplicity and performance make it an attractive option for rapid prototyping and smaller projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website and Docs",
"title": "Parcel Website",
"url": "https://parceljs.org/plugin-system/bundler/",
"type": "article"
},
@ -1156,7 +1213,7 @@
"description": "Rollup is a module bundler for JavaScript that compiles small pieces of code into larger, more complex structures. It specializes in producing smaller, more efficient bundles for ES modules. Rollup excels at tree-shaking, eliminating unused code for leaner outputs. It's particularly well-suited for libraries and applications using the ES module format. Rollup supports various output formats, including UMD and CommonJS, making it versatile for different deployment scenarios. While it may require more configuration than some alternatives, Rollup's focus on ES modules and its efficient bundling make it popular for projects prioritizing small bundle sizes and modern JavaScript practices.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website and Docs",
"title": "Rollup Website and Docs",
"url": "https://rollupjs.org/",
"type": "article"
},
@ -1177,7 +1234,7 @@
"description": "Webpack is a popular open-source JavaScript module bundler that transforms, bundles, or packages resources for the web. It takes modules with dependencies and generates static assets representing those modules. Webpack can handle not just JavaScript, but also other assets like CSS, images, and fonts. It uses loaders to preprocess files and plugins to perform a wider range of tasks like bundle optimization. Webpack's key features include code splitting, lazy loading, and a rich ecosystem of extensions. It supports hot module replacement for faster development and tree shaking to eliminate unused code. While it has a steeper learning curve compared to some alternatives, Webpack's flexibility and powerful features make it a standard tool in many modern JavaScript development workflows, especially for complex applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Webpack Official Website",
"title": "Webpack Website",
"url": "https://webpack.js.org/",
"type": "article"
},
@ -1203,7 +1260,7 @@
"type": "course"
},
{
"title": "Esbuild Official Website",
"title": "Esbuild Website",
"url": "https://esbuild.github.io/",
"type": "article"
},
@ -1224,10 +1281,15 @@
"description": "Vite is a modern build tool and development server designed for fast and lean development of web applications. Created by Evan You, the author of Vue.js, Vite leverages native ES modules in the browser to enable near-instantaneous server start and lightning-fast hot module replacement (HMR). It supports various frameworks including Vue, React, and Svelte out of the box. Vite uses Rollup for production builds, resulting in highly optimized bundles. It offers features like CSS pre-processor support, TypeScript integration, and plugin extensibility. Vite's architecture, which separates dev and build concerns, allows for faster development cycles and improved developer experience, particularly for large-scale projects where traditional bundlers might struggle with performance.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vite Website",
"title": "Vite - The Build Tool for the Web",
"url": "https://vitejs.dev",
"type": "article"
},
{
"title": "Vite Documentation",
"url": "https://vitejs.dev/guide/",
"type": "article"
},
{
"title": "Explore top posts about Vite",
"url": "https://app.daily.dev/tags/vite?ref=roadmapsh",
@ -1271,7 +1333,7 @@
"description": "ESLint is a popular open-source static code analysis tool for identifying and fixing problems in JavaScript code. It enforces coding standards, detects potential errors, and promotes consistent coding practices across projects. ESLint is highly configurable, allowing developers to define custom rules or use preset configurations. It supports modern JavaScript features, JSX, and TypeScript through plugins. ESLint can be integrated into development workflows through IDE extensions, build processes, or git hooks, providing real-time feedback to developers. Its ability to automatically fix many issues it detects makes it a valuable tool for maintaining code quality and consistency, especially in large teams or projects. ESLint's extensibility and wide adoption in the JavaScript ecosystem have made it a standard tool in modern JavaScript development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "ESLint Official Website",
"title": "ESLint Website",
"url": "https://eslint.org/",
"type": "article"
},
@ -1297,12 +1359,7 @@
"description": "Testing apps involves systematically evaluating software to ensure it meets requirements, functions correctly, and maintains quality. Key testing types include:\n\n1. Unit testing: Verifying individual components or functions\n2. Integration testing: Checking interactions between different parts of the app\n3. Functional testing: Ensuring the app meets specified requirements\n4. UI/UX testing: Evaluating the user interface and experience\n5. Performance testing: Assessing app speed, responsiveness, and stability\n6. Security testing: Identifying vulnerabilities and ensuring data protection\n7. Accessibility testing: Verifying usability for people with disabilities\n8. Compatibility testing: Checking functionality across different devices and platforms\n\nModern testing often incorporates automated testing tools and continuous integration/continuous deployment (CI/CD) pipelines. Test-driven development (TDD) and behavior-driven development (BDD) are popular methodologies that emphasize writing tests before or alongside code. Effective testing strategies help identify bugs early, improve code quality, and ensure a reliable user experience.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "A comprehensive dive into software testing.",
"url": "https://www.softwaretestingmaterial.com/software-testing/",
"type": "article"
},
{
"title": "The different types of software tests",
"title": "The Different Types of Software Tests",
"url": "https://www.atlassian.com/continuous-delivery/software-testing/types-of-software-testing",
"type": "article"
},
@ -1312,7 +1369,7 @@
"type": "article"
},
{
"title": "How to test web applications - dotJS 2024",
"title": "How to Test Web Applications - dotJS 2024",
"url": "https://www.youtube.com/watch?v=l3qjQpYBR8c",
"type": "video"
}
@ -1323,12 +1380,17 @@
"description": "Vitest is a fast and lightweight testing framework for JavaScript and TypeScript projects, designed as a Vite-native alternative to Jest. It leverages Vite's transformation pipeline and config resolution, offering near-instant test execution and hot module replacement (HMR) for tests. Vitest provides a Jest-compatible API, making migration easier for projects already using Jest. It supports features like snapshot testing, mocking, and code coverage out of the box. Vitest's architecture allows for parallel test execution and watch mode, significantly speeding up the testing process. Its integration with Vite's ecosystem makes it particularly well-suited for projects already using Vite, but it can be used in any JavaScript project. Vitest's focus on speed and developer experience has made it an increasingly popular choice for modern web development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vitest Website",
"title": "Vitest - Next Generation Testing Framework",
"url": "https://vitest.dev/",
"type": "article"
},
{
"title": "Vitets simplified",
"title": "Vitest Documentation",
"url": "https://vitest.dev/guide/",
"type": "article"
},
{
"title": "Vitest Simplified",
"url": "https://www.youtube.com/watch?v=snCLQmINqCU",
"type": "video"
}
@ -1381,13 +1443,13 @@
"description": "Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Cypress Website",
"url": "https://www.cypress.io/",
"type": "article"
},
{
"title": "Official Documentation",
"url": "https://docs.cypress.io/guides/overview/why-cypress#Other",
"title": "Cypress Documentation",
"url": "https://docs.cypress.io/",
"type": "article"
},
{
@ -1606,15 +1668,31 @@
},
"hwPOGT0-duy3KfI8QaEwF": {
"title": "Type Checkers",
"description": "Type checkers are tools that analyze code to detect and prevent type-related errors without executing the program. They enforce type consistency, helping developers catch mistakes early in the development process. Popular type checkers include TypeScript for JavaScript, Flow for JavaScript, and mypy for Python. These tools add static typing to dynamically typed languages, offering benefits like improved code reliability, better documentation, and enhanced developer tooling support. Type checkers can infer types in many cases and allow for gradual adoption in existing projects. They help prevent common runtime errors, facilitate refactoring, and improve code maintainability. While adding some overhead to the development process, type checkers are widely adopted in large-scale applications for their ability to catch errors before runtime and improve overall code quality.",
"links": []
"description": "Type checkers are tools that analyze code to detect and prevent type-related errors without executing the program. They enforce type consistency, helping developers catch mistakes early in the development process. Popular type checkers include TypeScript for JavaScript, Flow for JavaScript, and mypy for Python. These tools add static typing to dynamically typed languages, offering benefits like improved code reliability, better documentation, and enhanced developer tooling support. Type checkers can infer types in many cases and allow for gradual adoption in existing projects. They help prevent common runtime errors, facilitate refactoring, and improve code maintainability. While adding some overhead to the development process, type checkers are widely adopted in large-scale applications for their ability to catch errors before runtime and improve overall code quality.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Flow - Static Type Checker for JavaScript",
"url": "https://flow.org/",
"type": "article"
},
{
"title": "TypeScript",
"url": "https://www.typescriptlang.org/",
"type": "article"
},
{
"title": "Mypy - Static Type Checker for Python",
"url": "https://mypy.readthedocs.io/en/stable/",
"type": "article"
}
]
},
"VxiQPgcYDFAT6WgSRWpIA": {
"title": "Custom Elements",
"description": "One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Using custom elements | MDN web docs",
"title": "Using Custom Elements - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements",
"type": "article"
},
@ -1635,12 +1713,12 @@
"description": "The `<template>` HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Using templates and slots | MDN web docs",
"title": "Using Templates and Slots - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots",
"type": "article"
},
{
"title": "HTML Template tag",
"title": "HTML Template Tag",
"url": "https://www.w3schools.com/tags/tag_template.asp",
"type": "article"
},
@ -1678,14 +1756,19 @@
"links": [
{
"title": "TypeScript Roadmap",
"url": "/typescript",
"url": "https://roadmap.sh/typescript",
"type": "article"
},
{
"title": "Official Website",
"title": "TypeScript Website",
"url": "https://www.typescriptlang.org/",
"type": "article"
},
{
"title": "TypeScript Playground",
"url": "https://www.typescriptlang.org/play",
"type": "article"
},
{
"title": "The TypeScript Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/intro.html",
@ -1838,17 +1921,17 @@
"description": "React Router is a popular routing library for React applications that enables dynamic, client-side routing. It allows developers to create single-page applications with multiple views, managing the URL and history of the browser while keeping the UI in sync with the URL. React Router provides a declarative way to define routes, supporting nested routes, route parameters, and programmatic navigation. It offers components like BrowserRouter, Route, and Link to handle routing logic and navigation. The library also supports features such as lazy loading of components, route guards, and custom history management. React Router's integration with React's component model makes it a go-to solution for managing navigation and creating complex, multi-view applications in React ecosystems.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "React Router Website",
"url": "https://reactrouter.com/en/main",
"type": "article"
},
{
"title": "A complete guide to routing in react",
"title": "A Complete Guide to Routing in React",
"url": "https://hygraph.com/blog/routing-in-react",
"type": "article"
},
{
"title": "React router - Complete tutorial",
"title": "React Router - Complete tutorial",
"url": "https://www.youtube.com/watch?v=oTIJunBa6MA",
"type": "video"
}
@ -1906,7 +1989,7 @@
"description": "SvelteKit is a framework for building web applications using Svelte, a component-based JavaScript framework. It provides a full-stack development experience, handling both server-side and client-side rendering. SvelteKit offers features like file-based routing, code-splitting, and server-side rendering out of the box. It supports both static site generation and server-side rendering, allowing developers to choose the most appropriate approach for each page. SvelteKit emphasizes simplicity and performance, leveraging Svelte's compile-time approach to generate highly optimized JavaScript. It includes built-in development tools, easy deployment options, and integrates well with various backend services. SvelteKit's efficient development experience and flexibility make it an attractive option for building modern, performant web applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Svelte Kit Official Website",
"title": "Svelte Kit Website",
"url": "https://kit.svelte.dev/",
"type": "article"
},
@ -1932,8 +2015,8 @@
"description": "GraphQL is a query language and runtime for APIs, developed by Facebook. GraphQL's flexibility and efficiency make it popular for building complex applications, especially those with diverse client requirements. It's particularly useful for mobile applications where bandwidth efficiency is crucial. While it requires a paradigm shift from REST, many developers and organizations find GraphQL's benefits outweigh the learning curve, especially for large-scale or rapidly evolving APIs.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GraphQL Roadmap",
"url": "/graphql",
"title": "visit Dedicated GraphQL Roadmap",
"url": "https://roadmap.sh/graphql",
"type": "article"
},
{
@ -1973,12 +2056,12 @@
"type": "article"
},
{
"title": "Official Docs",
"title": "Apollo Docs",
"url": "https://www.apollographql.com/docs/",
"type": "article"
},
{
"title": "",
"title": "Visit Dedicated GraphQL Roadmap",
"url": "https://roadmap.sh/graphql",
"type": "article"
},
@ -1999,7 +2082,7 @@
"type": "opensource"
},
{
"title": "Official Website",
"title": "Relay Website",
"url": "https://relay.dev/",
"type": "article"
},
@ -2015,7 +2098,7 @@
"description": "Static site generators (SSGs) are tools that create HTML websites from raw data and templates, producing pre-rendered pages at build time rather than at runtime. They combine the benefits of static websites (speed, security, simplicity) with the flexibility of dynamic sites. SSGs typically use markup languages like Markdown for content, templating engines for layouts, and generate a fully static website that can be hosted on simple web servers or content delivery networks. Popular SSGs include Jekyll, Hugo, Gatsby, and Eleventy. They're well-suited for blogs, documentation sites, and content-focused websites. SSGs offer advantages in performance, version control integration, and reduced server-side complexity, making them increasingly popular for a wide range of web projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is a static site generator?",
"title": "What is a Static Site Generator?",
"url": "https://www.cloudflare.com/learning/performance/static-site-generator/",
"type": "article"
},
@ -2097,6 +2180,11 @@
"url": "https://astro.build/",
"type": "article"
},
{
"title": "Getting Started with Astro",
"url": "https://docs.astro.build/en/getting-started/",
"type": "article"
},
{
"title": "What is Astro?",
"url": "https://www.contentful.com/blog/what-is-astro/",
@ -2130,7 +2218,7 @@
"description": "Next.js is a React-based open-source framework for building server-side rendered and statically generated web applications. It provides features like automatic code splitting, optimized performance, and simplified routing out of the box. Next.js supports both static site generation (SSG) and server-side rendering (SSR), allowing developers to choose the most appropriate rendering method for each page. The framework offers built-in CSS support, API routes for backend functionality, and easy deployment options. Next.js is known for its developer-friendly experience, with features like hot module replacement and automatic prefetching. Its ability to create hybrid apps that combine static and server-rendered pages makes it popular for building scalable, SEO-friendly web applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Next.js Website",
"url": "https://nextjs.org/",
"type": "article"
},
@ -2156,7 +2244,7 @@
"type": "article"
},
{
"title": "MDN Web Docs: Progressive Web Apps ",
"title": "MDN - Progressive Web Apps",
"url": "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/",
"type": "article"
},
@ -2208,12 +2296,12 @@
"description": "React Native is an open-source mobile application development framework created by Facebook. It allows developers to build native mobile apps for iOS and Android using JavaScript and React. React Native translates JavaScript code into native components, providing near-native performance and a genuine native user interface. It enables code reuse across platforms, speeding up development and reducing costs. The framework offers hot reloading for quick iterations, access to native APIs, and a large ecosystem of third-party plugins. React Native's \"learn once, write anywhere\" philosophy and its ability to bridge web and mobile development make it popular for creating cross-platform mobile applications, especially among teams already familiar with React for web development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "React Native Roadmap",
"url": "/react-native",
"title": "Visit Dedicated React Roadmap",
"url": "https://roadmap.sh/react-native",
"type": "article"
},
{
"title": "Official Website",
"title": "React Native Website",
"url": "https://reactnative.dev/",
"type": "article"
},
@ -2270,12 +2358,12 @@
"type": "opensource"
},
{
"title": "Official Website",
"title": "Ionic Framework Website",
"url": "https://ionicframework.com/",
"type": "article"
},
{
"title": "Ionic 8 Announcment",
"title": "Ionic 8 Announcement",
"url": "https://ionic.io/blog/ionic-8-is-here",
"type": "article"
},
@ -2288,8 +2376,24 @@
},
"KMA7NkxFbPoUDtFnGBFnj": {
"title": "Desktop Apps",
"description": "Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses.",
"links": []
"description": "Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Electron Website",
"url": "https://www.electronjs.org/",
"type": "article"
},
{
"title": "NW.js Website",
"url": "https://nwjs.io/",
"type": "article"
},
{
"title": "Tauri Website",
"url": "https://tauri.app/",
"type": "article"
}
]
},
"mQHpSyMR4Rra4mqAslgiS": {
"title": "Electron",
@ -2408,7 +2512,7 @@
},
"X0Y3-IpPiFUCsNDK4RFxw": {
"title": "Performance Metrics",
"description": "Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include:\n\n* Load time: The time it takes for a web page to fully load and become interactive.\n* First contentful paint (FCP): The time it takes for the first content to appear on the page.\n* Time to interactive (TTI): The time it takes for the page to become fully interactive.\n* First input delay (FID): The time it takes for the page to respond to the first user input.\n* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread.\n\nThere are many tools and techniques available for measuring web performance metrics, including browser dev tools, performance monitoring tools, and web performance APIs. By tracking these metrics and analyzing the results, web developers can identify areas for improvement and optimize the performance of their web pages.\n\nVisit the following resources to learn more:",
"description": "Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include:\n\n* Load time: The time it takes for a web page to fully load and become interactive.\n* First contentful paint (FCP): The time it takes for the first content to appear on the page.\n* Time to interactive (TTI): The time it takes for the page to become fully interactive.\n* First input delay (FID): The time it takes for the page to respond to the first user input.\n* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Web Performance Metrics - Google Developers",

@ -137,6 +137,11 @@
"title": "Git",
"description": "[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Git & Github Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "Learn Git with Tutorials, News and Tips - Atlassian",
"url": "https://www.atlassian.com/git",
@ -220,7 +225,7 @@
"description": "CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Tailwind Website",
"title": "Tailwind CSS Website",
"url": "https://tailwindcss.com",
"type": "article"
},
@ -262,12 +267,12 @@
},
{
"title": "React Website",
"url": "https://reactjs.org/",
"url": "https://react.dev/",
"type": "article"
},
{
"title": "Official Getting Started",
"url": "https://reactjs.org/tutorial/tutorial.html",
"url": "https://react.dev/learn/tutorial-tic-tac-toe",
"type": "article"
},
{
@ -307,7 +312,12 @@
"description": "Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project! Node.js runs the V8 JavaScript engine, Google Chrome's core, outside the browser. This allows Node.js to be very performant. A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"title": "Visit Dedicated Node.js Roadmap",
"url": "https://roadmap.sh/nodejs",
"type": "article"
},
{
"title": "Node.js Website",
"url": "https://nodejs.org/en/about/",
"type": "article"
},
@ -356,6 +366,11 @@
"title": "Learn REST: A RESTful Tutorial",
"url": "https://restapitutorial.com/",
"type": "article"
},
{
"title": "What Is A RESTful API? Explanation of REST & HTTP",
"url": "https://www.youtube.com/watch?v=Q-BpqyOT3a8",
"type": "video"
}
]
},
@ -366,7 +381,7 @@
},
"vHojhJYjiN0IwruEqi1Dv": {
"title": "JWT Auth",
"description": "JWT stands for JSON Web Token is a token-based encryption open standard/methodology that is used to transfer information securely as a JSON object. Clients and Servers use JWT to securely share information, with the JWT containing encoded JSON objects and claims. JWT tokens are designed to be compact, safe to use within URLs, and ideal for SSO contexts.\n\nVisit the following resources to learn more:",
"description": "JWT stands for JSON Web Token is a token-based encryption open standard/methodology that is used to transfer information securely as a JSON object. Clients and Servers use JWT to securely share information, with the JWT containing encoded JSON objects and claims. JWTs are designed to be compact, safe to use within URLs, and ideal for SSO contexts.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "jwt.io Website",
@ -409,11 +424,21 @@
"title": "Redis",
"description": "Redis is an open source (BSD licensed), in-memory **data structure store** used as a database, cache, message broker, and streaming engine. Redis provides data structures such as [strings](https://redis.io/topics/data-types-intro#strings), [hashes](https://redis.io/topics/data-types-intro#hashes), [lists](https://redis.io/topics/data-types-intro#lists), [sets](https://redis.io/topics/data-types-intro#sets), [sorted sets](https://redis.io/topics/data-types-intro#sorted-sets) with range queries, [bitmaps](https://redis.io/topics/data-types-intro#bitmaps), [hyperloglogs](https://redis.io/topics/data-types-intro#hyperloglogs), [geospatial indexes](https://redis.io/commands/geoadd), and [streams](https://redis.io/topics/streams-intro). Redis has built-in [replication](https://redis.io/topics/replication), [Lua scripting](https://redis.io/commands/eval), [LRU eviction](https://redis.io/topics/lru-cache), [transactions](https://redis.io/topics/transactions), and different levels of [on-disk persistence](https://redis.io/topics/persistence), and provides high availability via [Redis Sentinel](https://redis.io/topics/sentinel) and automatic partitioning with [Redis Cluster](https://redis.io/topics/cluster-tutorial).\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Redis Roadmap",
"url": "https://roadmap.sh/redis",
"type": "article"
},
{
"title": "Redis Website",
"url": "https://redis.io/",
"type": "article"
},
{
"title": "Redis Documentation",
"url": "https://redis.io/docs/latest/",
"type": "article"
},
{
"title": "Explore top posts about Redis",
"url": "https://app.daily.dev/tags/redis?ref=roadmapsh",
@ -632,6 +657,11 @@
"title": "Monit",
"description": "When it comes to monitoring the health of your applications, there are several different options available. My favorite monitoring stack is Prometheus and Grafana, but it can be a bit overwhelming to set up and configure. If you're looking for a simpler solution, **Monit** is a great alternative that can be utilized to monitor and manage system resources such as services, processes, files, directories, devices, and network connections, making your application more reliable and resilient to issues like crashes, unresponsiveness, or resource exhaustion.\n\nSome of the key features of Monit are:\n\n* **Automatic Recovery:** Monit can automatically restart a service or process if it fails, making your application more resistant to unexpected issues.\n* **Alert Notifications:** Monit can send email notifications when a problem is detected or when a certain condition is met, keeping you informed about the health of your application.\n* **Event Logging:** All events detected by Monit are stored in a log for easy troubleshooting and analysis.\n* **Resource Limit Monitoring:** Monit can monitor the resource utilization (CPU, memory, network, etc.) of a process or service and take action if a specific limit is exceeded.\n* **Flexible Configuration:** Monit uses a simple, human-readable configuration syntax that allows you to tailor its behavior to your needs.\n* **Web Interface:** Monit provides a built-in web interface for remotely monitoring your application's status and manage services.\n\nHave a look at the following resources to learn more about Monit:",
"links": [
{
"title": "Monit Website",
"url": "https://mmonit.com/monit/",
"type": "article"
},
{
"title": "Monit documentation",
"url": "https://mmonit.com/monit/documentation/",
@ -654,7 +684,7 @@
"type": "article"
},
{
"title": "Official Website",
"title": "PostgreSQL Website",
"url": "https://www.postgresql.org/",
"type": "article"
},
@ -705,6 +735,11 @@
"url": "https://github.com/features/actions",
"type": "opensource"
},
{
"title": "Visit Dedicated Git & Github Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "Github Actions Documentation",
"url": "https://docs.github.com/en/actions",
@ -712,7 +747,7 @@
},
{
"title": "Explore top posts about GitHub",
"url": "https://app.daily.dev/tags/github?ref=roadmapsh",
"url": "https://app.daily.dev/tags/github-actions?ref=roadmapsh",
"type": "article"
},
{
@ -772,6 +807,11 @@
"title": "Terraform",
"description": "Terraform is an extremely popular open source Infrastructure as Code (IaC) tool that can be used with many different cloud and service provider APIs. Terraform focuses on an immutable approach to infrastructure, with a terraform state file center to tracking the status of your real world infrastructure.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Terraform Roadmap",
"url": "https://roadmap.sh/terraform",
"type": "article"
},
{
"title": "Terraform Website",
"url": "https://www.terraform.io/",

@ -6,8 +6,14 @@
},
"m1wX27XBWKXZcTMH2U1xp": {
"title": "Game Mathematics",
"description": "\"Game Mathematics\" is a critical aspect of game development that deals with the use of mathematical concepts to create and control game mechanics. This involves areas such as geometry for 3D modelling, logic for game rules, algebra for scoring systems, and trigonometry for movements or trajectories. Understanding game mathematics enables developers to implement features like physics simulation, AI behaviours, and procedural generation. Advanced topics include complex calculations for graphics (e.g., shaders, lighting) and calculus for continuous animation or advanced physics. The mathematical complexity depends on the game's demands, but a solid foundation is crucial for any game developer.",
"links": []
"description": "\"Game Mathematics\" is a critical aspect of game development that deals with the use of mathematical concepts to create and control game mechanics. This involves areas such as geometry for 3D modelling, logic for game rules, algebra for scoring systems, and trigonometry for movements or trajectories. Understanding game mathematics enables developers to implement features like physics simulation, AI behaviours, and procedural generation. Advanced topics include complex calculations for graphics (e.g., shaders, lighting) and calculus for continuous animation or advanced physics. The mathematical complexity depends on the game's demands, but a solid foundation is crucial for any game developer.\n\nLearn more from the following resources:",
"links": [
{
"title": "Game Math",
"url": "https://gamemath.com/book/intro.html",
"type": "article"
}
]
},
"grRf-MmaXimDB4iODOV47": {
"title": "Linear Algebra",

@ -267,6 +267,11 @@
"url": "https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging",
"type": "article"
},
{
"title": "Learn Git Branching",
"url": "https://learngitbranching.js.org/",
"type": "article"
},
{
"title": "Git Branches Tutorial",
"url": "https://www.youtube.com/watch?v=e2IbNHi4uCI",

@ -3,6 +3,16 @@
"title": "Swift (Recommended)",
"description": "Swift is a powerful and intuitive programming language developed by Apple for building iOS, macOS, watchOS, and tvOS applications. It combines modern language features like type safety, concise syntax, and performance optimizations, making it easy to write and maintain.\n\nSwift is designed to be safe, fast, and interactive, offering a more productive coding experience compared to Objective-C.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Programiz - Swift Programming Tutorials",
"url": "https://www.programiz.com/swift-programming",
"type": "course"
},
{
"title": "HackingWithSwift - 100 Days of Swift",
"url": "https://www.hackingwithswift.com/100",
"type": "course"
},
{
"title": "Swift Documentation",
"url": "https://www.swift.org/documentation/",
@ -112,8 +122,29 @@
},
"IduGSdUa2Fi7VFMLKgmsS": {
"title": "iOS Architecture",
"description": "",
"links": []
"description": "iOS architecture refers to the design principles and patterns used to build iOS applications. It focuses on how to structure code, manage data, and ensure a smooth user experience. These architectural patterns help developers create maintainable, scalable, and testable applications while following best practices specific to iOS development. Use cases of these architectures may vary according to the requirements of the application. For example, MVC is used for simple apps, while MVVM is considered when the app is large and complex.\n\nLearn more from the following resources:",
"links": [
{
"title": "Model-View-Controller Pattern in swift (MVC) for Beginners",
"url": "https://ahmedaminhassanismail.medium.com/model-view-controller-pattern-in-swift-mvc-for-beginners-35db8d479832",
"type": "article"
},
{
"title": "MVVM in iOS Swift",
"url": "https://medium.com/@zebayasmeen76/mvvm-in-ios-swift-6afb150458fd",
"type": "article"
},
{
"title": "MVC Design Pattern Explained with Example",
"url": "https://youtu.be/sbYaWJEAYIY?t=2",
"type": "video"
},
{
"title": "MVVM Design Pattern Explained with Example",
"url": "https://www.youtube.com/watch?v=sLHVxnRS75w",
"type": "video"
}
]
},
"IdGdLNgJI3WmONEFsMq-d": {
"title": "Core OS",

@ -20,8 +20,8 @@
"type": "article"
},
{
"title": "Explore top posts about Backend Development",
"url": "https://app.daily.dev/tags/backend?ref=roadmapsh",
"title": "Explore top posts about Relational Databases",
"url": "https://app.daily.dev/tags/relational-databases?ref=roadmapsh",
"type": "article"
}
]
@ -505,8 +505,14 @@
},
"ANUgfkADLI_du7iRvnUdi": {
"title": "Learn SQL",
"description": "SQL stands for Structured Query Language. It is a standardized programming language designed to manage and interact with relational database management systems (RDBMS). SQL allows you to create, read, edit, and delete data stored in database tables by writing specific queries.",
"links": []
"description": "SQL stands for Structured Query Language. It is a standardized programming language designed to manage and interact with relational database management systems (RDBMS). SQL allows you to create, read, edit, and delete data stored in database tables by writing specific queries.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated SQL Roadmap",
"url": "https://roadmap.sh/sql",
"type": "article"
}
]
},
"KMdF9efNGULualk5o1W0_": {
"title": "For Schemas",
@ -702,6 +708,11 @@
"title": "Grouping",
"description": "Grouping is a powerful technique in SQL that allows you to organize and aggregate data based on common values in one or more columns. The `GROUP BY` clause is used to create groups, and the `HAVING` clause is used to filter the group based on certain conditions.\n\nLearn more from the following resources:",
"links": [
{
"title": "PostgreSQL GROUP BY CLAUSE",
"url": "https://www.postgresql.org/docs/current/sql-select.html#SQL-GROUPBY",
"type": "article"
},
{
"title": "PostgreSQL GROUP BY",
"url": "https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-group-by/",
@ -716,6 +727,11 @@
"title": "PostgreSQL - HAVING",
"url": "https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-having/",
"type": "article"
},
{
"title": "PostgreSQL Group BY",
"url": "https://www.youtube.com/watch?v=SI-bPx4jaGc",
"type": "video"
}
]
},

@ -32,7 +32,7 @@
},
"dEFLBGpiH6nbSMeR7ecaT": {
"title": "Variables and Data Types",
"description": "Variables\n---------\n\nVariables are used to store information to be referenced and manipulated in a computer program. They also provide a way of labeling data with a descriptive name, so our programs can be understood more clearly by the reader and ourselves. It is helpful to think of variables as containers that hold information. Their sole purpose is to label and store data in memory. This data can then be used throughout your program.\n\nVisit the following resources to learn more:",
"description": "Variables are used to store information to be referenced and manipulated in a computer program. They also provide a way of labeling data with a descriptive name, so our programs can be understood more clearly by the reader and ourselves. It is helpful to think of variables as containers that hold information. Their sole purpose is to label and store data in memory. This data can then be used throughout your program.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Variables in Python",
@ -49,47 +49,42 @@
"url": "https://www.w3schools.com/python/python_datatypes.asp",
"type": "article"
},
{
"title": "Basic Data Types in Python",
"url": "https://realpython.com/python-data-types/",
"type": "article"
},
{
"title": "Python for Beginners: Data Types",
"url": "https://thenewstack.io/python-for-beginners-data-types/",
"type": "article"
},
{
"title": "Python Variables and Data Types",
"url": "https://www.youtube.com/playlist?list=PLBlnK6fEyqRhN-sfWgCU1z_Qhakc1AGOn",
"type": "video"
}
]
},
"NP1kjSk0ujU0Gx-ajNHlR": {
"title": "Conditionals",
"description": "Conditional Statements in Python perform different actions depending on whether a specific condition evaluates to true or false. Conditional Statements are handled by IF-ELIF-ELSE statements and MATCH-CASE statements in Python.\n\nVisit the following resources to learn more:",
"description": "Conditional Statements in Python perform different actions depending on whether a specific condition evaluates to true or false. Conditional Statements are handled by _if-elif-else_ statements and MATCH-CASE statements in Python.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Conditional Statements: IF…Else, ELIF & Switch Case",
"url": "https://www.guru99.com/if-loop-python-conditional-structures.html",
"type": "article"
},
{
"title": "Conditional Statements in Python",
"url": "https://realpython.com/python-conditional-statements/",
"type": "article"
},
{
"title": "How to use a match statement in Python",
"url": "https://learnpython.com/blog/python-match-case-statement/",
"title": "Python Conditional Statements",
"url": "https://www.guru99.com/if-loop-python-conditional-structures.html",
"type": "article"
},
{
"title": "W3Schools - Python Conditions and If statements",
"url": "https://www.w3schools.com/python/python_conditions.asp",
"title": "How to Use a Match Statement in Python",
"url": "https://learnpython.com/blog/python-match-case-statement/",
"type": "article"
}
]
},
"R9DQNc0AyAQ2HLpP4HOk6": {
"title": "Type Casting",
"description": "Typecasting\n-----------\n\nThe process of converting the value of one data type (integer, string, float, etc.) to another data type is called type conversion. Python has two types of type conversion: Implicit and Explicit.\n\nVisit the following resources to learn more:",
"description": "The process of converting the value of one data type (integer, string, float, etc.) to another data type is called type conversion. Python has two types of type conversion: Implicit and Explicit.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Type Conversion and Casting",
@ -122,11 +117,6 @@
"url": "https://www.programiz.com/python-programming/exception-handling",
"type": "article"
},
{
"title": "Python Try Except",
"url": "https://www.w3schools.com/python/python_try_except.asp",
"type": "article"
},
{
"title": "Exception Handling in Python",
"url": "https://www.youtube.com/watch?v=V_NXT2-QIlE",
@ -136,23 +126,23 @@
},
"-DJgS6l2qngfwurExlmmT": {
"title": "Functions, Builtin Functions",
"description": "In programming, a function is a reusable block of code that executes a certain functionality when it is called. Functions are integral parts of every programming language because they help make your code more modular and reusable.\n\nIn Python, you define a function with the `def` keyword, then write the function identifier (name) followed by parentheses and a colon.\n\nVisit the following resources to learn more:",
"description": "In programming, a function is a reusable block of code that executes a certain functionality when it is called. Functions are integral parts of every programming language because they help make your code more modular and reusable. In Python, we define a function with the `def` keyword, then write the function identifier (name) followed by parentheses and a colon.\n\nExample\n-------\n\n def greet(name):\n print(f\"Hello, {name}!\")\n \n greet(\"Roadmap.sh\") \n \n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Functions - W3Schools",
"url": "https://www.w3schools.com/python/python_functions.asp",
"title": "Built-in Functions in Python",
"url": "https://docs.python.org/3/library/functions.html",
"type": "article"
},
{
"title": "Built-in Functions in Python",
"url": "https://docs.python.org/3/library/functions.html",
"title": "Python Functions - W3Schools",
"url": "https://www.w3schools.com/python/python_functions.asp",
"type": "article"
}
]
},
"UT_SR7G-LYtzqooWrEtF1": {
"title": "Lists",
"description": "**Lists:** are just like dynamic sized arrays, declared in other languages (vector in C++ and ArrayList in Java). Lists need not be homogeneous always which makes it the most powerful tool in Python.\n\n**Tuple:** A Tuple is a collection of Python objects separated by commas. In some ways, a tuple is similar to a list in terms of indexing, nested objects, and repetition but a tuple is immutable, unlike lists that are mutable.\n\n**Set:** A Set is an unordered collection data type that is iterable, mutable, and has no duplicate elements. Python’s set class represents the mathematical notion of a set.\n\n**Dictionary:** In python, Dictionary is an ordered (since Py 3.7) \\[unordered (Py 3.6 & prior)\\] collection of data values, used to store data values like a map, which, unlike other Data Types that hold only a single value as an element, Dictionary holds key:value pair. Key-value is provided in the dictionary to make it more optimized.\n\nVisit the following resources to learn more:",
"description": "**Lists:** A list is just like dynamic sized arrays, declared in other languages (vector in C++ and ArrayList in Java). Lists need not be homogeneous always which makes it the most powerful tool in Python.\n\n**Tuple:** A Tuple is a collection of Python objects separated by commas. In some ways, a tuple is similar to a list in terms of indexing, nested objects, and repetition but a tuple is immutable, unlike lists that are mutable.\n\n**Set:** A Set is an unordered collection data type that is iterable, mutable, and has no duplicate elements. Python’s set class represents the mathematical notion of a set.\n\n**Dictionary:** In python, Dictionary is an ordered (since Py 3.7) \\[unordered (Py 3.6 & prior)\\] collection of data values, used to store data values like a map, which, unlike other Data Types that hold only a single value as an element, Dictionary holds key:value pair. Key-value is provided in the dictionary to make it more optimized.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Tuples vs. Lists vs. Sets in Python",
@ -192,13 +182,13 @@
"description": "Python Set is an unordered collection of data types that is iterable, mutable, and has no duplicate elements. The order of elements in a set is undefined though it may consist of various elements. The major advantage of using a set, as opposed to a list, is that it has a highly optimized method for checking whether a specific element is contained in the set.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "An W3Schools - Python Sets",
"url": "https://www.w3schools.com/python/python_sets.asp",
"title": "An In-Depth Guide to Working with Python Sets",
"url": "https://learnpython.com/blog/python-sets/",
"type": "article"
},
{
"title": "An In-Depth Guide to Working with Python Sets",
"url": "https://learnpython.com/blog/python-sets/",
"title": "An W3Schools - Python Sets",
"url": "https://www.w3schools.com/python/python_sets.asp",
"type": "article"
},
{
@ -212,6 +202,11 @@
"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:",
"links": [
{
"title": "Dictionaries in Python",
"url": "https://docs.python.org/3/tutorial/datastructures.html#dictionaries",
"type": "article"
},
{
"title": "W3 Schools - Dictionaries",
"url": "https://www.w3schools.com/python/python_dictionaries.asp",
@ -237,6 +232,11 @@
"title": "Python \"for\" Loops (Definite Iteration)",
"url": "https://realpython.com/python-for-loop/#the-guts-of-the-python-for-loop",
"type": "article"
},
{
"title": "Python For Loops",
"url": "https://www.youtube.com/watch?v=KWgYha0clzw",
"type": "video"
}
]
},
@ -291,22 +291,22 @@
"description": "Python is a high-level, interpreted, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Python is dynamically-typed and garbage-collected.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website: Python",
"title": "Python Website",
"url": "https://www.python.org/",
"type": "article"
},
{
"title": "Tutorial Series: How to Code in Python",
"url": "https://www.digitalocean.com/community/tutorials/how-to-write-your-first-python-3-program",
"title": "Python - Wiki",
"url": "https://en.wikipedia.org/wiki/Python_(programming_language)",
"type": "article"
},
{
"title": "Python Wikipedia",
"url": "https://en.wikipedia.org/wiki/Python_(programming_language)",
"title": "Tutorial Series: How to Code in Python",
"url": "https://www.digitalocean.com/community/tutorials/how-to-write-your-first-python-3-program",
"type": "article"
},
{
"title": "Googles Python Class",
"title": "Google's Python Class",
"url": "https://developers.google.com/edu/python",
"type": "article"
},
@ -315,11 +315,6 @@
"url": "https://www.w3schools.com/python",
"type": "article"
},
{
"title": "Python",
"url": "https://www.kaggle.com/learn/python",
"type": "article"
},
{
"title": "Explore top posts about Python",
"url": "https://app.daily.dev/tags/python?ref=roadmapsh",
@ -331,6 +326,11 @@
"title": "Data Structures & Algorithms",
"description": "A data structure is a named location that can be used to store and organize data. And, an algorithm is a collection of steps to solve a particular problem. Learning data structures and algorithms allow us to write efficient and optimized computer programs.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated DSA Roadmap",
"url": "https://roadmap.sh/data-structures-and-algorithms",
"type": "article"
},
{
"title": "Learn DS & Algorithms",
"url": "https://www.programiz.com/dsa",
@ -415,13 +415,13 @@
"description": "Hash Table, Map, HashMap, Dictionary or Associative are all the names of the same data structure. It is a data structure that implements a set abstract data type, a structure that can map keys to values.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Hash Tables and Hashmaps in Python",
"url": "https://www.edureka.co/blog/hash-tables-and-hashmaps-in-python/",
"title": "Build a Hash Table in Python",
"url": "https://realpython.com/python-hash-table/",
"type": "article"
},
{
"title": "Build a Hash Table in Python",
"url": "https://realpython.com/python-hash-table/",
"title": "Hash Tables and Hashmaps in Python",
"url": "https://www.edureka.co/blog/hash-tables-and-hashmaps-in-python/",
"type": "article"
},
{
@ -470,7 +470,7 @@
},
"YNptpfK9qv2ovmkUXLkJT": {
"title": "Sorting Algorithms",
"description": "Sorting refers to arranging data in a particular format. Sorting algorithm specifies the way to arrange data in a particular order. Most common orders are in numerical or lexicographical order.\n\nThe importance of sorting lies in the fact that data searching can be optimized to a very high level, if data is stored in a sorted manner.\n\nVisit the following resources to learn more:",
"description": "Sorting refers to arranging data in a particular format. Sorting algorithm specifies the way to arrange data in a particular order. Most common orders are in numerical or lexicographical order. The importance of sorting lies in the fact that data searching can be optimized to a very high level, if data is stored in a sorted manner.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Sorting Algorithms in Python",
@ -493,6 +493,11 @@
"title": "Builtin",
"description": "Python has a rich standard library of built-in modules that provide a wide range of functionality. Some of the most commonly used built-in modules include: sys, os, math, datetime, random, re, itertools, etc.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Module Index",
"url": "https://docs.python.org/3/py-modindex.html",
"type": "article"
},
{
"title": "Python Modules",
"url": "https://www.digitalocean.com/community/tutorials/python-modules",
@ -544,8 +549,13 @@
},
"pIluLJkySqn_gI_GykV6G": {
"title": "Decorators",
"description": "decorator is a design pattern in Python that allows a user to add new functionality to an existing object without modifying its structure. Decorators are usually called before the definition of a function you want to decorate.\n\nVisit the following resources to learn more:",
"description": "Decorator is a design pattern in Python that allows a user to add new functionality to an existing object without modifying its structure. Decorators are usually called before the definition of a function you want to decorate.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn Decorators in Python",
"url": "https://pythonbasics.org/decorators/",
"type": "article"
},
{
"title": "Python Decorators",
"url": "https://www.datacamp.com/tutorial/decorators-python",
@ -618,6 +628,11 @@
"title": "OOP in Python One Shot",
"url": "https://www.youtube.com/watch?v=Ej_02ICOIgs",
"type": "video"
},
{
"title": "Python OOP Tutorial",
"url": "https://www.youtube.com/watch?v=IbMDCwVm63M",
"type": "video"
}
]
},
@ -644,7 +659,7 @@
},
"S0FLE70szSVUPI0CDEQK7": {
"title": "Inheritance",
"description": "Inheritance allows us to define a class that inherits all the methods and properties from another class.\n\nVisit the following resources to learn more:",
"description": "Inheritance is a fundamental concept in object-oriented programming (OOP) that allows one class to inherit the properties and behavior of another class.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Inheritance",
@ -676,10 +691,10 @@
},
"qeCMw-sJ2FR4UxvU9DDzv": {
"title": "Package Managers",
"description": "Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.\n\n`PyPI` and `Pip` are the most common contenders but here are some other options available as well:",
"description": "Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.\n\n`PyPI` and `Pip` are the most common contenders but there are some other options available as well.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PIPX",
"title": "pypa/pipx",
"url": "https://github.com/pypa/pipx",
"type": "opensource"
},
@ -695,7 +710,7 @@
"description": "PyPI, typically pronounced pie-pee-eye, is a repository containing several hundred thousand packages. These range from trivial Hello, World implementations to advanced deep learning libraries.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PyPI Official Website",
"title": "PyPI Website",
"url": "https://pypi.org/",
"type": "article"
},
@ -720,6 +735,11 @@
"title": "Pip",
"description": "The standard package manager for Python is pip. It allows you to install and manage packages that aren’t part of the Python standard library.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "pip Documentation",
"url": "https://pip.pypa.io/en/stable/installation/",
"type": "article"
},
{
"title": "Using Pythons pip to Manage Your Projects Dependencies",
"url": "https://realpython.com/what-is-pip/",
@ -739,10 +759,10 @@
},
"uh67D1u-Iv5cZamRgFEJg": {
"title": "Conda",
"description": "Conda is an open source package management system and environment management system that runs on Windows, macOS, and Linux. Conda quickly installs, runs and updates packages and their dependencies. Conda easily creates, saves, loads and switches between environments on your local computer. It was created for Python programs, but it can package and distribute software for any language.\n\nConda as a package manager helps you find and install packages. If you need a package that requires a different version of Python, you do not need to switch to a different environment manager, because conda is also an environment manager. With just a few commands, you can set up a totally separate environment to run that different version of Python, while continuing to run your usual version of Python in your normal environment.\n\nVisit the following resources to learn more:",
"description": "Conda is an open source package management system and environment management system that runs on Windows, macOS, and Linux. Conda quickly installs, runs and updates packages and their dependencies. Conda easily creates, saves, loads and switches between environments on your local computer. It was created for Python programs, but it can package and distribute software for any language.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Conda Docs",
"title": "Conda Documentation",
"url": "https://docs.conda.io/en/latest/",
"type": "article"
}
@ -763,6 +783,11 @@
"title": "List Comprehensions",
"description": "List comprehensions are a concise way to create a list using a single line of code in Python. They are a powerful tool for creating and manipulating lists, and they can be used to simplify and shorten code.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python List Comprehensions",
"url": "https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions",
"type": "article"
},
{
"title": "Python - List Comprehension",
"url": "https://www.w3schools.com/python/python_lists_comprehension.asp",
@ -777,17 +802,12 @@
"title": "Python List Comprehensions Quiz - CodeGuage",
"url": "https://www.codeguage.com/courses/python/lists-list-comprehensions-quiz",
"type": "article"
},
{
"title": "Python List Comprehensions",
"url": "https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions",
"type": "article"
}
]
},
"jnLIVRrWxcX3yq3Op91Vr": {
"title": "Generator Expressions",
"description": "Generator expressions are a concise way to create a generator using a single line of code in Python. They are similar to list comprehensions, but instead of creating a list, they create a generator object that produces the values on-demand, as they are needed.\n\nGenerator expressions are a useful tool for efficiently producing large sequence of values, as they allow you to create the generator without creating the entire sequence in memory at once. This tends to use less memory, especially for large sequences.\n\nVisit the following resources to learn more:",
"description": "Generator expressions are a concise way to create a generator using a single line of code in Python. They are similar to list comprehensions, but instead of creating a list, they create a generator object that produces the values on-demand, as they are needed. Generator expressions are a useful tool for efficiently producing large sequence of values, as they allow you to create the generator without creating the entire sequence in memory at once. This tends to use less memory, especially for large sequences.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Generator Expressions",
@ -803,20 +823,31 @@
},
"4GU5HNi3W8yFkImVY9ZpW": {
"title": "Paradigms",
"description": "Python is a multi-paradigm programming language, which means that it supports several programming paradigms. Some of the main paradigms supported by Python are:\n\n* Imperative programming: This paradigm focuses on telling the computer what to do, step by step. Python supports imperative programming with features such as variables, loops, and control structures.\n* Object-oriented programming (OOP): This paradigm is based on the idea of objects and their interactions. Python supports OOP with features such as classes, inheritance, and polymorphism.\n* Functional programming: This paradigm is based on the idea of functions as first-class citizens, and it emphasizes the use of pure functions and immutable data. Python supports functional programming with features such as higher-order functions, lambda expressions, and generators.\n* Aspect-oriented programming: This paradigm is based on the idea of separating cross-cutting concerns from the main functionality of a program. Python does not have built-in support for aspect-oriented programming, but it can be achieved using libraries or language extensions.\n\nPython's support for multiple paradigms makes it a versatile and flexible language, and it allows developers to choose the paradigm that best fits their needs.",
"links": []
"description": "Python is a multi-paradigm programming language, which means that it supports several programming paradigms. Some of the main paradigms supported by Python are:\n\n* Imperative programming: This paradigm focuses on telling the computer what to do, step by step. Python supports imperative programming with features such as variables, loops, and control structures.\n* Object-oriented programming (OOP): This paradigm is based on the idea of objects and their interactions. Python supports OOP with features such as classes, inheritance, and polymorphism.\n* Functional programming: This paradigm is based on the idea of functions as first-class citizens, and it emphasizes the use of pure functions and immutable data. Python supports functional programming with features such as higher-order functions, lambda expressions, and generators.\n* Aspect-oriented programming: This paradigm is based on the idea of separating cross-cutting concerns from the main functionality of a program. Python does not have built-in support for aspect-oriented programming, but it can be achieved using libraries or language extensions.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Python Paradigms",
"url": "https://opensource.com/article/19/10/python-programming-paradigms",
"type": "article"
}
]
},
"KAXF2kUAOvtBZhY8G9rkI": {
"title": "Context Manager",
"description": "Context managers are a contruct in Python that allows you to set up context for a block of code, and then automatically clean up or relase resources when the block is exited. It is most commonly used with the `with` statement.\n\nVisit the following resources to learn more:",
"description": "Context Managers are a construct in Python that allows you to set up context for a block of code, and then automatically clean up or release resources when the block is exited. It is most commonly used with the `with` statement.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Context managers in Python",
"title": "Context Libraries",
"url": "https://docs.python.org/3/library/contextlib.html",
"type": "article"
},
{
"title": "Context Managers in Python",
"url": "https://www.freecodecamp.org/news/context-managers-in-python/",
"type": "article"
},
{
"title": "Context managers",
"title": "Context Managers",
"url": "https://book.pythontips.com/en/latest/context_managers.html",
"type": "article"
}
@ -824,10 +855,10 @@
},
"0-ShORjGnQlAdcwjtxdEB": {
"title": "Learn a Framework",
"description": "Frameworks automate the common implementation of common solutions which gives the flexibility to the users to focus on the application logic instead of the basic routine processes.\n\nFrameworks make the life of web developers easier by giving them a structure for app development. They provide common patterns in a web application that are fast, reliable and easily maintainable. Visit the following resources to learn more:",
"description": "Frameworks automate the common implementation of common solutions which gives the flexibility to the users to focus on the application logic instead of the basic routine processes. Frameworks make the life of web developers easier by giving them a structure for app development. They provide common patterns in a web application that are fast, reliable and easily maintainable.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Pyscript: A Browser-Based Python Framework for the 99%",
"title": "Pyscript: A Browser-Based Python Framework",
"url": "https://thenewstack.io/pyscript-a-browser-based-python-framework/",
"type": "article"
},
@ -843,7 +874,7 @@
"description": "Pyramid is a general, open source, web application development framework built in python. It allows python developer to create web applications with ease. Pyramid is backed by the enterprise knowledge Management System KARL (a George Soros project).\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Pyramid - Official Website",
"title": "Pyramid Website",
"url": "https://trypyramid.com/",
"type": "article"
},
@ -861,20 +892,31 @@
},
"7zcpXN3krnS3tMRWVNIVe": {
"title": "Plotly Dash",
"description": "",
"links": []
"description": "Plotly Dash is a Python framework that allows you to build analytical web applications. It's a high-level library that enables you to create interactive, web-based data visualization dashboards without requiring extensive knowledge of web development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Plotly Dash Documentation",
"url": "https://dash.plotly.com/",
"type": "article"
},
{
"title": "20 Minutes Tutorial",
"url": "http://dash.plotly.com/tutorial",
"type": "article"
}
]
},
"InUJIGmTnf0X4cSoLuCEQ": {
"title": "gevent",
"description": "gevent is a Python library that provides a high-level interface to the event loop. It is based on non-blocking IO (libevent/libev) and lightweight greenlets. Non-blocking IO means requests waiting for network IO won't block other requests; greenlets mean we can continue to write code in synchronous style.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GitHub Repository",
"title": "gevent/gevent",
"url": "https://github.com/gevent/gevent",
"type": "opensource"
},
{
"title": "gevent — Official Website",
"title": "gevent Website",
"url": "http://www.gevent.org/",
"type": "article"
},
@ -890,7 +932,7 @@
"description": "aiohttp is a Python 3.5+ library that provides a simple and powerful asynchronous HTTP client and server implementation.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Docs",
"title": "aiohttp docs",
"url": "https://docs.aiohttp.org/en/stable/",
"type": "article"
},
@ -911,7 +953,7 @@
"description": "Tornado is a scalable, non-blocking web server and web application framework written in Python. It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Tornado — Official Website",
"title": "Tornado Website",
"url": "https://www.tornadoweb.org/",
"type": "article"
},
@ -932,7 +974,7 @@
"description": "Sanic is a Python 3.7+ web server and web framework that's written to go fast. It allows the usage of the async/await syntax added in Python 3.5, which makes your code non-blocking and speedy.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Sanic Official Website",
"title": "Sanic Website",
"url": "https://sanic.dev/en/",
"type": "article"
}
@ -943,7 +985,7 @@
"description": "FastAPI is a Web framework for developing RESTful APIs in Python. FastAPI is based on Pydantic and type hints to validate, serialize, and deserialize data and automatically auto-generate OpenAPI documents.",
"links": [
{
"title": "Official Documentation",
"title": "FastAPI Documentation",
"url": "https://fastapi.tiangolo.com/",
"type": "article"
},
@ -964,17 +1006,17 @@
"description": "Django is a free and open-source, Python-based web framework that follows the model–template–views architectural pattern. It is maintained by the Django Software Foundation, an independent organization established in the US as a 501 non-profit\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Django Official Website",
"title": "Django Website",
"url": "https://www.djangoproject.com/",
"type": "article"
},
{
"title": "Official Getting Started Guide",
"title": "Getting Started",
"url": "https://www.djangoproject.com/start/",
"type": "article"
},
{
"title": "Is Django synchronous or asynchronous?",
"title": "Is Django Synchronous or Asynchronous?",
"url": "https://stackoverflow.com/questions/58548089/django-is-synchronous-or-asynchronous",
"type": "article"
},
@ -995,12 +1037,12 @@
"description": "Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions. Instead, it provides flexibility by requiring you to choose and integrate the best libraries for your project's needs.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Flask - Official Website",
"title": "Flask Website",
"url": "https://flask.palletsprojects.com/",
"type": "article"
},
{
"title": "Flask - Official Tutorial",
"title": "Flask Tutorial",
"url": "https://flask.palletsprojects.com/en/3.0.x/tutorial/",
"type": "article"
},
@ -1015,6 +1057,11 @@
"title": "Concurrency",
"description": "Concurrency in Python allows multiple tasks to be executed simultaneously using different approaches. GIL (Global Interpreter Lock) limits thread execution, making multithreading less efficient for computational tasks, but suitable for I/O. Multiprocessing, using the multiprocessing module, allows multiple cores to be utilized, providing true parallelism. Asynchrony via asyncio is optimal for I/O operations, allowing thousands of connections to be processed simultaneously without blocking. The choice of approach depends on the nature of the task.\n\nLearn more about concurrency using the following resources:",
"links": [
{
"title": "Concurrent Execution",
"url": "https://docs.python.org/3/library/concurrency.html",
"type": "article"
},
{
"title": "Python Concurrency",
"url": "https://realpython.com/python-concurrency/",
@ -1035,7 +1082,7 @@
},
"UIx0XYaOgXXlYbbQtjiPq": {
"title": "Threading",
"description": "Multithreading allows multiple threads within a single process. However, because of GIL, threads cannot run in parallel on different cores, which makes multithreading suitable for I/O tasks (e.g., network requests) but not for computational tasks.\n\nLearn more about it from the following resources:",
"description": "Multithreading allows multiple threads within a single process. However, because of GIL, threads cannot run in parallel on different cores, which makes multithreading suitable for I/O tasks (e.g., network requests) but not for computational tasks.\n\nLearn more from the following resources:",
"links": [
{
"title": "Python Threading Library",
@ -1054,7 +1101,7 @@
"description": "Multiprocessing utilizes multiple processes, each with its own GIL. This allows full utilization of multiple processor cores, which is effective for computationally intensive tasks. Python's multiprocessing module supports creating processes and exchanging data between them.\n\nLearn more about multiprocessing with the following resources:",
"links": [
{
"title": "Official Documentation",
"title": "Python Documentation",
"url": "https://docs.python.org/3/library/multiprocessing.html",
"type": "article"
},
@ -1072,7 +1119,7 @@
},
"Mow7RvropbC4ZGDpcGZmw": {
"title": "Asynchrony",
"description": "Asynchronous programming, supported by asyncio, allows code to be executed without blocking, using async and await. This is especially useful for I/O tasks such as networking or file manipulation, allowing thousands of connections to be handled without blocking the main thread.\n\nLearn more about asynchronous programming in Python with the following resources:",
"description": "Asynchronous programming, supported by asyncio, allows code to be executed without blocking, using async and await. This is especially useful for I/O tasks such as networking or file manipulation, allowing thousands of connections to be handled without blocking the main thread.\n\nLearn more from the following resources:",
"links": [
{
"title": "Python AsyncIO library",
@ -1088,18 +1135,18 @@
},
"p3Frfs6oxpuciUzeCEsvb": {
"title": "uv",
"description": "uv is an \"extremely fast\" python package installer and resolver.\n\nLearn more about it using the following resources:",
"description": "uv is an \"extremely fast\" python package installer and resolver.\n\nLearn more from the following resources:",
"links": [
{
"title": "uv GitHub Repository",
"title": "astral-sh/uv",
"url": "https://github.com/astral-sh/uv",
"type": "article"
"type": "opensource"
}
]
},
"GHKAY9gOykEbxkEeR30wL": {
"title": "pyproject.toml",
"description": "This file is used to define the project configuration and dependencies. It is a configuration file that contains metadata about the project, such as its name, version, dependencies, and build settings. The `pyproject.toml` file is used by tools like `poetry` and `flit` to manage Python projects and their dependencies.\n\nLearn more about `pyproject.toml` by visiting the following resources:",
"description": "This file is used to define the project configuration and dependencies. It is a configuration file that contains metadata about the project, such as its name, version, dependencies, and build settings. The `pyproject.toml` file is used by tools like `poetry` and `flit` to manage Python projects and their dependencies.\n\nLearn more from the following resources:",
"links": [
{
"title": "Writing pyproject.toml files",
@ -1110,7 +1157,7 @@
},
"IWq-tfkz-pSC1ztZl60vM": {
"title": "Pipenv",
"description": "Pipeline Environment (pipenv) is a tool that aims to bring the best of all packaging worlds (bundled, requirements.txt, [setup.py](http://setup.py), setup.cfg, etc.) to the Python world. It automatically creates and manages a virtualenv for your projects, as well as adds/removes packages from your Pipfile as you install/uninstall packages. It also generates the ever-important Pipfile.lock, which is used to produce deterministic builds.\n\nLearn more about Pipenv by visiting the following resources:",
"description": "Pipeline Environment (pipenv) is a tool that aims to bring the best of all packaging worlds (bundled, requirements.txt, [setup.py](http://setup.py), setup.cfg, etc.) to the Python world. It automatically creates and manages a virtualenv for your projects, as well as adds/removes packages from your Pipfile as you install/uninstall packages. It also generates the ever-important Pipfile.lock, which is used to produce deterministic builds.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pipenv Documentation",
@ -1126,21 +1173,21 @@
},
"N5VaKMbgQ0V_BC5tadV65": {
"title": "pyenv",
"description": "pyenv is a tool for managing multiple versions of the Python programming language on Unix-like systems. It works by setting environment variables to point to the directory where the desired version of Python is installed. This allows you to switch between different versions of Python without having to modify your system's default Python installation.\n\nLearn more about pyenv by exploring the following resources:",
"description": "pyenv is a tool for managing multiple versions of the Python programming language on Unix-like systems. It works by setting environment variables to point to the directory where the desired version of Python is installed. This allows you to switch between different versions of Python without having to modify your system's default Python installation.\n\nLearn more from the following resources:",
"links": [
{
"title": "@Official@pyenv GitHub Repository",
"title": "pyenv/pyenv",
"url": "https://github.com/pyenv/pyenv",
"type": "article"
"type": "opensource"
}
]
},
"1PXApuUpPmJjgi12cmWo4": {
"title": "Static Typing",
"description": "Static typing can be a powerful tool to help you catch bugs before they happen. It can also help you understand the code you're working with, and make it easier to maintain and refactor.\n\nLearn more about static typing with the following resources:",
"description": "Static typing can be a powerful tool to help you catch bugs before they happen. It can also help you understand the code you're working with, and make it easier to maintain and refactor.\n\nLearn more from the following resources:",
"links": [
{
"title": "Static typing in Python",
"title": "Static Typing in Python",
"url": "https://typing.readthedocs.io/en/latest/index.html",
"type": "article"
}
@ -1151,7 +1198,7 @@
"description": "Pydantic is a python library for data validation and settings management using python type annotations.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pydantic documentation",
"title": "Pydantic Documentation",
"url": "https://docs.pydantic.dev/latest/",
"type": "article"
}
@ -1159,8 +1206,13 @@
},
"gIcJ3bUVQXqO1Wx4gUKd5": {
"title": "mypy",
"description": "mypy is an optional static type checker for Python that aims to combine the benefits of dynamic (or \"duck\") typing and static typing. Mypy combines the expressive power and convenience of Python with a powerful type system and compile-time type checking. Mypy type checks standard Python programs; run them using any Python VM with basically no runtime overhead.",
"description": "mypy is an optional static type checker for Python that aims to combine the benefits of dynamic (or \"duck\") typing and static typing. Mypy combines the expressive power and convenience of Python with a powerful type system and compile-time type checking. Mypy type checks standard Python programs; run them using any Python VM with basically no runtime overhead.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "python/mypy",
"url": "https://github.com/python/mypy",
"type": "opensource"
},
{
"title": "mypy documentation",
"url": "https://mypy-lang.org/",
@ -1170,7 +1222,7 @@
},
"1q9HWgu9jDTK757hTNOmE": {
"title": "pyright",
"description": "pyright is a static type checker for Python. It is a Microsoft product and is written in TypeScript. It is a language server that uses the Language Server Protocol (LSP) to communicate with the editor. It is a good alternative to mypy and pytype.\n\nLearn more about pyright from the following resources:",
"description": "pyright is a static type checker for Python. It is a Microsoft product and is written in TypeScript. It is a language server that uses the Language Server Protocol (LSP) to communicate with the editor. It is a good alternative to mypy and pytype.\n\nLearn more from the following resources:",
"links": [
{
"title": "Pyright Documentation",
@ -1181,10 +1233,10 @@
},
"9mFR_ueXbIB2IrkqU2s85": {
"title": "pyre",
"description": "pyre is a static type checker for Python. It is a tool that helps you find type errors in your Python code. Pyre is designed to be fast, scalable, and easy to use. It is used at Facebook to help developers catch type errors before they make it to production.\n\nLearn more about pyre from the following resources:",
"description": "pyre is a static type checker for Python. It is a tool that helps you find type errors in your Python code. Pyre is designed to be fast, scalable, and easy to use. It is used at Facebook to help developers catch type errors before they make it to production.\n\nLearn more from the following resources:",
"links": [
{
"title": "pyre documentation",
"title": "pyre Documentation",
"url": "https://pyre-check.org/",
"type": "article"
}
@ -1192,8 +1244,19 @@
},
"0F0ppU_ClIUKZ23Q6BVZp": {
"title": "Code Formatting",
"description": "",
"links": []
"description": "Python code formatting is crucial for maintaining readability, consistency, and reducing errors. Black is a code formatter for Python. It is a tool that automatically formats Python code to adhere to the PEP 8 style guide. It is a great tool to use in your Python projects to ensure that your code is formatted consistently and correctly.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Pylint for Python",
"url": "https://www.pylint.org/",
"type": "article"
},
{
"title": "Black Documentation",
"url": "https://black.readthedocs.io/en/stable/",
"type": "article"
}
]
},
"6cB0pvUO1-gvCtgqozP-Q": {
"title": "ruff",
@ -1211,7 +1274,12 @@
"description": "black is a code formatter for Python. It is a tool that automatically formats Python code to adhere to the PEP 8 style guide. It is a great tool to use in your Python projects to ensure that your code is formatted consistently and correctly.",
"links": [
{
"title": "black documentation",
"title": "Getting Started with Black",
"url": "https://black.readthedocs.io/en/stable/getting_started.html",
"type": "article"
},
{
"title": "Black Documentation",
"url": "https://black.readthedocs.io/en/stable/",
"type": "article"
}
@ -1219,23 +1287,29 @@
},
"tsh_vbhzKz1-H9Vh69tsK": {
"title": "yapf",
"description": "yapf is a formatter for Python files. It is a tool that automatically formats Python code to conform to the PEP 8 style guide. It is similar to black but has more configuration options.\n\nLearn more about yapf and how to use it effectively in your Python projects.",
"description": "yapf is a formatter for Python files. It is a tool that automatically formats Python code to conform to the PEP 8 style guide. It is similar to black but has more configuration options.\n\nLearn more from the following resources:",
"links": [
{
"title": "yapf Documentation",
"title": "google/yapf",
"url": "https://github.com/google/yapf",
"type": "article"
"type": "opensource"
}
]
},
"maYNuTKYyZndxk1z29-UY": {
"title": "Sphinx",
"description": "Sphinx is a tool that makes it easy to create intelligent and beautiful documentation, written by Georg Brandl and licensed under the BSD license.\n\nLearn more about Sphinx by visiting the [official website](https://www.sphinx-doc.org/en/master/).",
"links": []
"description": "Sphinx is a tool that makes it easy to create intelligent and beautiful documentation, written by Georg Brandl and licensed under the BSD license.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Shpinx Website",
"url": "https://www.sphinx-doc.org/en/master/",
"type": "article"
}
]
},
"_94NrQ3quc4t_PPOsFSN0": {
"title": "Common Packages",
"description": "Python has a rich ecosystem of packages and modules that can be used to get the most out of the language.\n\nHere are some common Python packages that are widely used in various domains:",
"description": "Python has a rich ecosystem of packages and modules that can be used to get the most out of the language. A package is essentially a directory that contains multiple modules and subpackages. A module is a single file that contains a collection of related functions, classes, and variables. Modules are the basic building blocks of Python code organization. A module can be thought of as a container that holds a set of related code.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "requests",
@ -1271,25 +1345,31 @@
"title": "pandas",
"url": "https://pandas.pydata.org/docs/",
"type": "article"
},
{
"title": "polars",
"url": "https://github.com/pola-rs/polars",
"type": "article"
}
]
},
"WQOYjuwKIWB2meea4JnsV": {
"title": "Testing",
"description": "",
"links": []
"description": "Testing in programming means checking if your code works as expected. It's a systematic way to find and fix errors (bugs) before your code goes live. Imagine building a beautiful house without checking if the walls are straight or the roof doesn't leak—that's what coding without testing can feel like!\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Unit Testing in Python",
"url": "https://docs.python.org/3/library/unittest.html",
"type": "article"
},
{
"title": "Python Testing Tutorial",
"url": "https://realpython.com/python-testing/",
"type": "article"
}
]
},
"aVclygxoA9ePU5IxaORSH": {
"title": "doctest",
"description": "Python’s standard library comes equipped with a test framework module called doctest. The doctest module programmatically searches Python code for pieces of text within comments that look like interactive Python sessions. Then, the module executes those sessions to confirm that the code referenced by a doctest runs as expected.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Doctest module reference",
"title": "Doctest Module",
"url": "https://docs.python.org/3/library/doctest.html",
"type": "article"
},
@ -1321,7 +1401,7 @@
"description": "pytest is a mature full-featured Python testing tool that helps you write better programs.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Docs",
"title": "Pytest Docs",
"url": "https://docs.pytest.org/",
"type": "article"
},
@ -1347,13 +1427,13 @@
"description": "PyUnit is an easy way to create unit testing programs and UnitTests with Python. (Note that [docs.python.org](http://docs.python.org) uses the name \"unittest\", which is also the module name.)\n\nVisit the following resources to learn more:",
"links": [
{
"title": "How To Use unittest to Write a Test Case for a Function in Python",
"url": "https://www.digitalocean.com/community/tutorials/how-to-use-unittest-to-write-a-test-case-for-a-function-in-python",
"title": "PyUnit Docs",
"url": "https://wiki.python.org/moin/PyUnit%C2%A0",
"type": "article"
},
{
"title": "PyUnit Docs",
"url": "https://wiki.python.org/moin/PyUnit%C2%A0",
"title": "How To Use unittest to Write a Test Case for a Function in Python",
"url": "https://www.digitalocean.com/community/tutorials/how-to-use-unittest-to-write-a-test-case-for-a-function-in-python",
"type": "article"
},
{
@ -1365,10 +1445,10 @@
},
"o1wi39VnjnFfWIC8XcuAK": {
"title": "typing",
"description": "typing is a module in Python that provides runtime support for type hints. The typing module defines a standard set of names that can be used to describe types in the Python language. The typing module was added to the standard library in Python 3.5.",
"description": "Typing is a module in Python that provides runtime support for type hints. The typing module defines a standard set of names that can be used to describe types in the Python language. The typing module was added to the standard library in Python 3.5.",
"links": [
{
"title": "typing python",
"title": "Typing Module",
"url": "https://docs.python.org/3/library/typing.html",
"type": "article"
}
@ -1376,10 +1456,10 @@
},
"jPFOiwbqfaGshaGDBWb5x": {
"title": "tox",
"description": "tox is a tool for automating test environment management and testing against multiple interpreter configurations. It is particularly useful for Python codebases that need to support multiple versions of Python.\n\nLearn more about tox from the following resources:",
"description": "Tox is a tool for automating test environment management and testing against multiple interpreter configurations. It is particularly useful for Python codebase that need to support multiple versions of Python.\n\nLearn more about tox from the following resources:",
"links": [
{
"title": "tox documentation",
"title": "Tox Documentation",
"url": "https://tox.wiki/en/",
"type": "article"
}

@ -240,16 +240,36 @@
},
"8OBlgDRUg-CTgDXY-QHyO": {
"title": "Component Lifecycle",
"description": "React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting along with several “lifecycle methods” that you can override to run code at particular times in the process. You can use this [lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.\n\nIt is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components.\n\nVisit the following resources to learn more:",
"description": "React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting along with several “lifecycle methods” that you can override to run code at particular times in the process.\n\nIt is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Lifecycle of Reactive Effects",
"url": "https://react.dev/learn/lifecycle-of-reactive-effects",
"type": "article"
},
{
"title": "Class Component",
"url": "https://react.dev/reference/react/Component",
"type": "article"
},
{
"title": "Lifecycle of Reactive Effects",
"url": "https://react.dev/learn/lifecycle-of-reactive-effects",
"title": "React component lifecycle: React lifecycle methods & hooks",
"url": "https://tsh.io/blog/react-component-lifecycle-methods-vs-hooks/",
"type": "article"
},
{
"title": "The React lifecycle: methods and hooks explained",
"url": "https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained#react-hooks-and-the-component-lifecycle",
"type": "article"
},
{
"title": "React Lifecycle: Methods & Hooks In Detail",
"url": "https://www.bairesdev.com/blog/react-lifecycle-methods-hooks/",
"type": "article"
},
{
"title": "lifecycle diagram",
"url": "https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/",
"type": "article"
}
]
@ -459,112 +479,22 @@
},
"dgoDNDtW2_q9R9yhkXrcz": {
"title": "useCallback",
"description": "React also has a lot of hooks that allow you to write more efficient React code.\n\nVisit the following resources to learn more:",
"description": "`useCallback` is a React hook that returns a memoized version of a callback function. It's used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven't changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "useCallback",
"title": "React Documentation on useCallback",
"url": "https://react.dev/reference/react/useCallback",
"type": "article"
},
{
"title": "useContext",
"url": "https://react.dev/reference/react/useContext",
"type": "article"
},
{
"title": "useDebugValue",
"url": "https://react.dev/reference/react/useDebugValue",
"type": "article"
},
{
"title": "useDeferredValue",
"url": "https://react.dev/reference/react/useDeferredValue",
"type": "article"
},
{
"title": "useEffect",
"url": "https://react.dev/reference/react/useEffect",
"type": "article"
},
{
"title": "useId",
"url": "https://react.dev/reference/react/useId",
"type": "article"
},
{
"title": "useImperativeHandle",
"url": "https://react.dev/reference/react/useImperativeHandle",
"type": "article"
},
{
"title": "useInsertionEffect",
"url": "https://react.dev/reference/react/useInsertionEffect",
"type": "article"
},
{
"title": "useLayoutEffect",
"url": "https://react.dev/reference/react/useLayoutEffect",
"type": "article"
},
{
"title": "useReducer",
"url": "https://react.dev/reference/react/useReducer",
"type": "article"
},
{
"title": "useRef",
"url": "https://react.dev/reference/react/useRef",
"type": "article"
},
{
"title": "useState",
"url": "https://react.dev/reference/react/useState",
"type": "article"
},
{
"title": "useSyncExternalStore",
"url": "https://react.dev/reference/react/useSyncExternalStore",
"type": "article"
},
{
"title": "useTransition",
"url": "https://react.dev/reference/react/useTransition",
"type": "article"
},
{
"title": "useCallback Hook by Example",
"url": "https://www.robinwieruch.de/react-usecallback-hook/",
"type": "article"
},
{
"title": "useMemo Hook by Example",
"url": "https://www.robinwieruch.de/react-usememo-hook/",
"type": "article"
},
{
"title": "useContext Hook by Example",
"url": "https://www.robinwieruch.de/react-usecontext-hook/",
"type": "article"
},
{
"title": "useReducer Hook by Example",
"url": "https://www.robinwieruch.de/react-usereducer-hook/",
"type": "article"
},
{
"title": "useReducer vs useState Hook",
"url": "https://www.robinwieruch.de/react-usereducer-vs-usestate/",
"title": "useCallback Explained in Depth",
"url": "https://kentcdodds.com/blog/usememo-and-usecallback",
"type": "article"
},
{
"title": "Explore top posts about React Hooks",
"url": "https://app.daily.dev/tags/react-hooks?ref=roadmapsh",
"title": "useCallback Hook: An Introductory Guide",
"url": "https://dmitripavlutin.com/dont-overuse-react-usecallback/",
"type": "article"
},
{
"title": "useDefferedValue Hook video",
"url": "https://www.youtube.com/watch?v=jCGMedd6IWA",
"type": "video"
}
]
},
@ -652,27 +582,6 @@
}
]
},
"2zrN65JZhCyNimi33g78f": {
"title": "useCallback",
"description": "`useCallback` is a React hook that returns a memoized version of a callback function. It's used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven't changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "React Documentation on useCallback",
"url": "https://reactjs.org/docs/hooks-reference.html#usecallback",
"type": "article"
},
{
"title": "useCallback Explained in Depth",
"url": "https://kentcdodds.com/blog/usememo-and-usecallback",
"type": "article"
},
{
"title": "useCallback Hook: An Introductory Guide",
"url": "https://dmitripavlutin.com/dont-overuse-react-usecallback/",
"type": "article"
}
]
},
"FK59Zsm5ENA9g11XWCan_": {
"title": "useState",
"description": "`useState` hook is used to manage the state of a component in functional components. Calling `useState` returns an array with two elements: the current state value and a function to update the state.\n\nVisit the following resources to learn more:",

File diff suppressed because it is too large Load Diff

@ -10,7 +10,7 @@
"links": [
{
"title": "What is Software Architecture in Software Engineering?",
"url": "https://webcache.googleusercontent.com/search?q=cache:ya4xvYaEckQJ:https://www.future-processing.com/blog/what-is-software-architecture-in-software-engineering/&cd=1&hl=es-419&ct=clnk&gl=ar",
"url": "https://www.computer.org/resources/software-architecture",
"type": "article"
},
{
@ -1182,17 +1182,12 @@
},
{
"title": "React Website",
"url": "https://reactjs.org/",
"url": "https://react.dev/",
"type": "article"
},
{
"title": "Official Getting Started",
"url": "https://reactjs.org/tutorial/tutorial.html",
"type": "article"
},
{
"title": "Beta React Docs",
"url": "https://reactjs.org/",
"url": "https://react.dev/learn/tutorial-tic-tac-toe",
"type": "article"
},
{
@ -1397,8 +1392,14 @@
},
"hRug9yJKYacB9X_2cUalR": {
"title": "PMI",
"description": "",
"links": []
"description": "The PMI certification (Project Management Institute) is an internationally recognized credential in project management. The most well-known is the PMP® (Project Management Professional), which validates the skills and knowledge of professionals to manage projects effectively by applying best practices and standards defined in the PMBOK® (Project Management Body of Knowledge) guide.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Project Managment Institute",
"url": "https://www.pmi.org/",
"type": "article"
}
]
},
"Rq1Wi-cHjS54SYo-Btp-e": {
"title": "ITIL",
@ -1423,18 +1424,46 @@
},
"7rudOREGG-TTkCosU0hNw": {
"title": "RUP",
"description": "",
"links": []
"description": "The RUP (**Rational Unified Process**) is not a widely recognized certification like PMP or Scrum, but rather a software development framework created by Rational Software (now IBM). It follows an iterative and incremental approach to project development, based on best practices for delivering high-quality software on time and within budget.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "IBM certified solution designer RUP",
"url": "https://www.ibm.com/training/certification/ibm-certified-solution-designer-ibm-rational-unified-process-v70-38008003",
"type": "article"
}
]
},
"qwpsGRFgzAYstM7bJA2ZJ": {
"title": "LeSS",
"description": "",
"links": []
"description": "**LeSS** (Large-Scale-Scrum) is an agile framework designed to scale Scrum across multiple teams working on a single product. It adheres to Scrum's principles, emphasizing simplicity and continuous improvement. LeSS encourages coordination between teams by using a single backlog and a common Product Owner. Each team is responsible for parts of the product, but they collaborate in its joint development, with frequent feedback loops to adjust project direction. Its goal is to minimize bureaucracy and maximize value delivery in an agile and efficient way.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "LeSS Framework",
"url": "https://less.works/less/framework",
"type": "article"
},
{
"title": "Introductio to LeSS",
"url": "https://www.youtube.com/watch?v=1BZf_Oa7W94",
"type": "video"
}
]
},
"Bg7ru1q1j6pNB43HGxnHT": {
"title": "SaFE",
"description": "",
"links": []
"description": "**SAFe** is an agile framework designed to scale agile practices in large and complex organizations. Unlike LeSS, SAFe is more structured and provides a formal approach to coordinating multiple teams, programs, and portfolios. It incorporates elements of `Lean`, `DevOps`, and `agile principles`, and defines additional roles, ceremonies, and artifacts to align teams' goals with the business strategy. SAFe enables **large-scale planning**, **continuous delivery**, and **improvement of organizational efficiency**, offering a comprehensive framework for agile transformation at the corporate level.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "SAFe 6.0",
"url": "https://scaledagileframework.com/SAFE",
"type": "article"
},
{
"title": "SAFe explained in five minutes",
"url": "https://www.youtube.com/watch?v=aW2m-BtCJyE&t=2s",
"type": "video"
}
]
},
"O7H6dt3Z7EKohxfJzwbPM": {
"title": "Kanban",

@ -10,7 +10,7 @@
},
{
"title": "TypeScript Official Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html",
"url": "https://www.typescriptlang.org/docs/handbook/intro.html",
"type": "article"
},
{
@ -401,7 +401,7 @@
},
"HD1UGOidp7JGKdW6CEdQ_": {
"title": "satisfies keyword",
"description": "TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.\n\nFor example:\n\n // Each property can be a string or an RGB tuple.\n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ^^^^ sacrebleu - we've made a typo!\n };\n \n // We want to be able to use array methods on 'red'...\n const redComponent = palette.red.at(0);\n \n // or string methods on 'green'...\n const greenNormalized = palette.green.toUpperCase();\n \n\nNotice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property.\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette: Record<Colors, string | RGB> = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now correctly detected\n };\n // But we now have an undesirable error here - 'palette.red' \"could\" be a string.\n const redComponent = palette.red.at(0);\n \n\nThe `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`:\n\n type Colors = 'red' | 'green' | 'blue';\n type RGB = [red: number, green: number, blue: number];\n \n const palette = {\n red: [255, 0, 0],\n green: '#00ff00',\n bleu: [0, 0, 255],\n // ~~~~ The typo is now caught!\n } satisfies Record<Colors, string | RGB>;\n \n // Both of these methods are still accessible!\n const redComponent = palette.red.at(0);\n const greenNormalized = palette.green.toUpperCase();\n \n\nLearn more from the following resources:",
"description": "The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.\n\nLearn more from the following resources:",
"links": [
{
"title": "satisfies Keyword",

@ -253,7 +253,7 @@
},
"bZxtIBeIfeUcR32LZWrPW": {
"title": "v-html",
"description": "The `v-thml` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTMl, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.\n\nExample:\n\n <template>\n <p v-html=\"'<h1>Text</h1>'\"></p>\n </template>\n \n\nVisit the following resources to learn more:",
"description": "The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.\n\nExample:\n\n <template>\n <p v-html=\"'<h1>Text</h1>'\"></p>\n </template>\n \n\nVisit the following resources to learn more:",
"links": [
{
"title": "v-html documentation",

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

@ -1,7 +1,7 @@
import { type APIContext } from 'astro';
import { api } from './api.ts';
export type LeadeboardUserDetails = {
export type LeaderboardUserDetails = {
id: string;
name: string;
avatar?: string;
@ -10,12 +10,19 @@ export type LeadeboardUserDetails = {
export type ListLeaderboardStatsResponse = {
streaks: {
active: LeadeboardUserDetails[];
lifetime: LeadeboardUserDetails[];
active: LeaderboardUserDetails[];
lifetime: LeaderboardUserDetails[];
};
projectSubmissions: {
currentMonth: LeadeboardUserDetails[];
lifetime: LeadeboardUserDetails[];
currentMonth: LeaderboardUserDetails[];
lifetime: LeaderboardUserDetails[];
};
githubContributors: {
currentMonth: LeaderboardUserDetails[];
};
referrals: {
currentMonth: LeaderboardUserDetails[];
lifetime: LeaderboardUserDetails[];
};
};

@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
import { isLoggedIn } from '../../lib/jwt';
import { httpGet } from '../../lib/http';
import { useToast } from '../../hooks/use-toast';
import { Flame, X, Zap, ZapOff } from 'lucide-react';
import { Zap, ZapOff } from 'lucide-react';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { StreakDay } from './StreakDay';
import {
@ -11,15 +11,8 @@ import {
} from '../../stores/page.ts';
import { useStore } from '@nanostores/react';
import { cn } from '../../lib/classname.ts';
import { $accountStreak } from '../../stores/streak.ts';
type StreakResponse = {
count: number;
longestCount: number;
previousCount?: number | null;
firstVisitAt: Date;
lastVisitAt: Date;
};
import { $accountStreak, type StreakResponse } from '../../stores/streak.ts';
import { InviteFriends } from './InviteFriends.tsx';
type AccountStreakProps = {};
@ -184,11 +177,10 @@ export function AccountStreak(props: AccountStreakProps) {
<p className="-mt-[0px] mb-[1.5px] text-center text-xs tracking-wide text-slate-500">
Visit every day to keep your streak going!
</p>
<p className='text-xs mt-1.5 text-center'>
<a href="/leaderboard" className="text-purple-400 hover:underline underline-offset-2">
See how you compare to others
</a>
</p>
<InviteFriends
refByUserCount={accountStreak?.refByUserCount || 0}
/>
</div>
</div>
)}

@ -0,0 +1,88 @@
import { Copy, Heart } from 'lucide-react';
import { useAuth } from '../../hooks/use-auth';
import { useCopyText } from '../../hooks/use-copy-text';
import { cn } from '../../lib/classname';
import { CheckIcon } from '../ReactIcons/CheckIcon';
import { TrophyEmoji } from '../ReactIcons/TrophyEmoji.tsx';
type InviteFriendsProps = {
refByUserCount: number;
};
export function InviteFriends(props: InviteFriendsProps) {
const { refByUserCount } = props;
const user = useAuth();
const { copyText, isCopied } = useCopyText();
const referralLink = new URL(
`/signup?rc=${user?.id}`,
import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh',
).toString();
return (
<div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-600 px-4 pt-5 text-center text-sm">
<p className="text-slate-500">Invite people to join roadmap.sh</p>
<div className="flex flex-col items-center rounded-lg bg-slate-900/40 pb-4 pt-5 my-4">
<p className="text-xs text-slate-500">
{refByUserCount === 0 && <>You haven't invited anyone yet.</>}
{refByUserCount > 0 && refByUserCount < 10 && (
<>{refByUserCount} of 10 users joined</>
)}
</p>
{refByUserCount >= 10 && <>🎉 You've invited {refByUserCount} users</>}
<div className="my-3 flex flex-row items-center justify-center gap-1">
{Array.from({ length: 10 }).map((_, index) => (
<Heart
key={index}
className={cn(
'size-[23px] fill-current',
index < refByUserCount ? 'text-yellow-300' : 'text-slate-700',
)}
/>
))}
</div>
<p className={'mb-3 text-xs text-slate-500'}>
Share the link below with anyone you think would benefit from using
roadmap.sh
</p>
<p className="text-slate-500">
<button
onClick={() => {
copyText(referralLink);
}}
className={cn(
'rounded-md hover:bg-slate-500/80 hover:text-slate-100 px-3 py-1 text-xs text-slate-300 bg-slate-600',
{
'bg-green-500 text-black hover:text-black hover:bg-green-500': isCopied,
},
)}
>
{!isCopied ? 'Copy Invite Link' : 'Invite Link Copied'}{' '}
{!isCopied && (
<Copy
className="relative -top-[1.25px] ml-1.5 inline-block size-3"
strokeWidth={3}
/>
)}
{isCopied && (
<CheckIcon additionalClasses="relative ml-1.5 -top-[1.25px] inline-block size-3" />
)}
</button>
</p>
</div>
<p className="text-center text-xs">
<a
href="/leaderboard"
className="text-purple-400 underline-offset-2 hover:underline"
>
See how you rank on the leaderboard
</a>
</p>
</div>
);
}

@ -56,9 +56,11 @@ export function ActivityStream(props: ActivityStreamProps) {
return (
<div className={cn('mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8', className)}>
<h2 className="mb-3 text-xs uppercase text-gray-400">
Learning Activity
</h2>
{activities.length > 0 && (
<h2 className="mb-3 text-xs uppercase text-gray-400">
Learning Activity
</h2>
)}
{selectedActivity && (
<ActivityTopicsModal

@ -4,7 +4,7 @@ export function EmptyActivity() {
return (
<div className="rounded-md">
<div className="flex flex-col items-center p-7 text-center">
<RoadmapIcon className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10" />
<RoadmapIcon className="mb-2 h-14 w-14 opacity-10" />
<h2 className="text-lg sm:text-xl font-bold">No Progress</h2>
<p className="my-1 sm:my-2 max-w-[400px] text-gray-500 text-sm sm:text-base">

@ -4,26 +4,11 @@ export function EmptyStream() {
return (
<div className="rounded-md">
<div className="flex flex-col items-center p-7 text-center">
<List className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" />
<List className="mb-4 h-14 w-14 opacity-10" />
<h2 className="text-lg font-bold sm:text-xl">No Activities</h2>
<h2 className="text-lg font-bold sm:text-xl">No Activity</h2>
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">
Activities will appear here as you start tracking your&nbsp;
<a href="/roadmaps" className="mt-4 text-blue-500 hover:underline">
Roadmaps
</a>
,&nbsp;
<a
href="/best-practices"
className="mt-4 text-blue-500 hover:underline"
>
Best Practices
</a>
&nbsp;or&nbsp;
<a href="/questions" className="mt-4 text-blue-500 hover:underline">
Questions
</a>
&nbsp;progress.
Activities will appear here as you start tracking your progress.
</p>
</div>
</div>

@ -1,5 +1,7 @@
import { type FormEvent, useState } from 'react';
import { type FormEvent, useEffect, useState } from 'react';
import { httpPost } from '../../lib/http';
import { deleteUrlParam, getUrlParams } from '../../lib/browser';
import { isLoggedIn, setAIReferralCode } from '../../lib/jwt';
type EmailSignupFormProps = {
isDisabled?: boolean;
@ -9,6 +11,9 @@ type EmailSignupFormProps = {
export function EmailSignupForm(props: EmailSignupFormProps) {
const { isDisabled, setIsDisabled } = props;
const { rc: referralCode } = getUrlParams() as {
rc?: string;
};
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
@ -47,6 +52,16 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
)}`;
};
useEffect(() => {
if (!referralCode || isLoggedIn()) {
deleteUrlParam('rc');
return;
}
setAIReferralCode(referralCode);
deleteUrlParam('rc');
}, []);
return (
<form className="flex w-full flex-col gap-2" onSubmit={onSubmit}>
<label htmlFor="name" className="sr-only">
@ -72,7 +87,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
type="email"
autoComplete="email"
required
className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="Email Address"
value={email}
onInput={(e) => setEmail(String((e.target as any).value))}

@ -23,7 +23,7 @@ const formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');
<div
class='flex flex-col items-center justify-center gap-2 sm:gap-2 rounded-xl border bg-white px-8 py-12 text-center'
>
<img src='/images/rocket.gif' class='w-[70px] mb-4' />
<img src='/images/gifs/rocket.gif' class='w-[70px] mb-4' />
<h2 class='text-balance text-xl font-medium'>Changelog page is launched</h2>
<p class='font-normal text-balance text-gray-400 text-sm sm:text-base'>
We will be sharing a selected list of updates, improvements, and fixes made to

@ -10,7 +10,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
<div class='container !max-w-[650px]'>
<p class='text-2xl font-bold sm:text-5xl'>
<img
src='/images/rocket.gif'
src='/images/gifs/rocket.gif'
alt='Rocket'
class='mr-2 hidden sm:inline h-12 w-12'
/>

@ -166,8 +166,8 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
{showSelectRoadmapModal && (
<SelectRoadmapModal
onClose={() => setShowSelectRoadmapModal(false)}
teamResourceConfig={teamResources}
allRoadmaps={allRoadmaps.filter(r => r.renderer === 'editor')}
teamResourceConfig={teamResources.map((r) => r.resourceId)}
allRoadmaps={allRoadmaps.filter((r) => r.renderer === 'editor')}
teamId={teamId}
onRoadmapAdd={(roadmapId) => {
addTeamResource(roadmapId).finally(() => {

@ -10,7 +10,7 @@ export type SelectRoadmapModalProps = {
teamId: string;
allRoadmaps: PageType[];
onClose: () => void;
teamResourceConfig: TeamResourceConfig;
teamResourceConfig: string[];
onRoadmapAdd: (roadmapId: string) => void;
onRoadmapRemove: (roadmapId: string) => void;
};
@ -100,9 +100,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
{roleBasedRoadmaps.length > 0 && (
<div className="mb-5 flex flex-wrap items-center gap-2">
{roleBasedRoadmaps.map((roadmap) => {
const isSelected = !!teamResourceConfig?.find(
(r) => r.resourceId === roadmap.id,
);
const isSelected = teamResourceConfig.includes(roadmap.id);
return (
<SelectRoadmapModalItem
@ -126,9 +124,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
</span>
<div className="flex flex-wrap items-center gap-2">
{skillBasedRoadmaps.map((roadmap) => {
const isSelected = !!teamResourceConfig.find(
(r) => r.resourceId === roadmap.id,
);
const isSelected = teamResourceConfig.includes(roadmap.id);
return (
<SelectRoadmapModalItem
@ -148,12 +144,14 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
</div>
</div>
<div className="border-t border-t-yellow-300 text-yellow-900 bg-yellow-100 px-4 py-3 text-sm">
<h2 className='font-medium text-base text-yellow-900 mb-1'>More Official Roadmaps Coming Soon</h2>
<div className="border-t border-t-yellow-300 bg-yellow-100 px-4 py-3 text-sm text-yellow-900">
<h2 className="mb-1 text-base font-medium text-yellow-900">
More Official Roadmaps Coming Soon
</h2>
<p>
We are currently adding more of our official
roadmaps to this list. If you don't see the roadmap you are
looking for, please check back later.
We are currently adding more of our official roadmaps to this
list. If you don't see the roadmap you are looking for, please
check back later.
</p>
</div>
</div>

@ -8,21 +8,29 @@ import { DashboardTab } from './DashboardTab';
import { PersonalDashboard, type BuiltInRoadmap } from './PersonalDashboard';
import { TeamDashboard } from './TeamDashboard';
import { getUser } from '../../lib/jwt';
import { useParams } from '../../hooks/use-params';
type DashboardPageProps = {
builtInRoleRoadmaps?: BuiltInRoadmap[];
builtInSkillRoadmaps?: BuiltInRoadmap[];
builtInBestPractices?: BuiltInRoadmap[];
isTeamPage?: boolean;
};
export function DashboardPage(props: DashboardPageProps) {
const { builtInRoleRoadmaps, builtInBestPractices, builtInSkillRoadmaps } =
props;
const {
builtInRoleRoadmaps,
builtInBestPractices,
builtInSkillRoadmaps,
isTeamPage = false,
} = props;
const currentUser = getUser();
const toast = useToast();
const teamList = useStore($teamList);
const { t: currTeamId } = useParams();
const [isLoading, setIsLoading] = useState(true);
const [selectedTeamId, setSelectedTeamId] = useState<string>();
@ -43,8 +51,14 @@ export function DashboardPage(props: DashboardPageProps) {
}
useEffect(() => {
getAllTeams().finally(() => setIsLoading(false));
}, []);
getAllTeams().finally(() => {
if (currTeamId) {
setSelectedTeamId(currTeamId);
}
setIsLoading(false);
});
}, [currTeamId]);
const userAvatar =
currentUser?.avatar && !isLoading
@ -57,8 +71,8 @@ export function DashboardPage(props: DashboardPageProps) {
<div className="mb-6 flex flex-wrap items-center gap-1.5 sm:mb-8">
<DashboardTab
label="Personal"
isActive={!selectedTeamId}
onClick={() => setSelectedTeamId(undefined)}
isActive={!selectedTeamId && !isTeamPage}
href="/dashboard"
avatar={userAvatar}
/>
@ -86,10 +100,7 @@ export function DashboardPage(props: DashboardPageProps) {
href: `/respond-invite?i=${team.memberId}`,
}
: {
href: `/team/activity?t=${team._id}`,
// onClick: () => {
// setSelectedTeamId(team._id);
// },
href: `/team?t=${team._id}`,
})}
avatar={avatarUrl}
/>
@ -105,14 +116,21 @@ export function DashboardPage(props: DashboardPageProps) {
)}
</div>
{!selectedTeamId && (
{!selectedTeamId && !isTeamPage && (
<PersonalDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps}
builtInSkillRoadmaps={builtInSkillRoadmaps}
builtInBestPractices={builtInBestPractices}
/>
)}
{selectedTeamId && <TeamDashboard teamId={selectedTeamId} />}
{(selectedTeamId || isTeamPage) && (
<TeamDashboard
builtInRoleRoadmaps={builtInRoleRoadmaps!}
builtInSkillRoadmaps={builtInSkillRoadmaps!}
teamId={selectedTeamId!}
/>
)}
</div>
</div>
);

@ -0,0 +1,303 @@
import { useEffect, useMemo, useState } from 'react';
import { ResourceProgress } from '../Activity/ResourceProgress';
import { RoadmapIcon } from '../ReactIcons/RoadmapIcon';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';
import { LoadingProgress } from './LoadingProgress';
import { PickRoadmapOptionModal } from '../TeamRoadmaps/PickRoadmapOptionModal';
import { SelectRoadmapModal } from '../CreateTeam/SelectRoadmapModal';
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
import { ContentConfirmationModal } from '../CreateTeam/ContentConfirmationModal';
import { httpGet, httpPut } from '../../lib/http';
import type { PageType } from '../CommandMenu/CommandMenu';
import { useToast } from '../../hooks/use-toast';
import type { TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
import { pageProgressMessage } from '../../stores/page';
import type { BuiltInRoadmap } from './PersonalDashboard';
import { MapIcon, Users2 } from 'lucide-react';
type DashboardTeamRoadmapsProps = {
isLoading: boolean;
teamId: string;
learningRoadmapsToShow: (UserProgress & {
defaultRoadmapId?: string;
})[];
canManageCurrentTeam: boolean;
onUpdate: () => void;
builtInRoleRoadmaps: BuiltInRoadmap[];
builtInSkillRoadmaps: BuiltInRoadmap[];
};
export function DashboardTeamRoadmaps(props: DashboardTeamRoadmapsProps) {
const {
isLoading,
teamId,
learningRoadmapsToShow,
canManageCurrentTeam,
onUpdate,
builtInRoleRoadmaps,
builtInSkillRoadmaps,
} = props;
const toast = useToast();
const [isPickingOptions, setIsPickingOptions] = useState(false);
const [isAddingRoadmap, setIsAddingRoadmap] = useState(false);
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
const [confirmationContentId, setConfirmationContentId] = useState<string>();
const allRoadmaps = useMemo(
() =>
builtInRoleRoadmaps.concat(builtInSkillRoadmaps).map((r) => {
return {
id: r.id,
title: r.title,
url: r.url,
group: 'Roadmaps',
renderer: r.renderer || 'balsamiq',
metadata: r.metadata,
};
}),
[builtInRoleRoadmaps, builtInSkillRoadmaps],
);
async function onAdd(roadmapId: string, shouldCopyContent = false) {
if (!teamId) {
return;
}
toast.loading('Adding roadmap');
pageProgressMessage.set('Adding roadmap');
const roadmap = allRoadmaps.find((r) => r.id === roadmapId);
const { error, response } = await httpPut<TeamResourceConfig>(
`${
import.meta.env.PUBLIC_API_URL
}/v1-update-team-resource-config/${teamId}`,
{
teamId: teamId,
resourceId: roadmapId,
resourceType: 'roadmap',
removed: [],
renderer: roadmap?.renderer || 'balsamiq',
shouldCopyContent,
},
);
if (error || !response) {
toast.error(error?.message || 'Error adding roadmap');
return;
}
onUpdate();
toast.success('Roadmap added');
if (roadmap?.renderer === 'editor') {
setIsAddingRoadmap(false);
}
}
async function deleteResource(roadmapId: string) {
if (!teamId) {
return;
}
toast.loading('Deleting roadmap');
pageProgressMessage.set(`Deleting roadmap from team`);
const { error, response } = await httpPut<TeamResourceConfig>(
`${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${
teamId
}`,
{
resourceId: roadmapId,
resourceType: 'roadmap',
},
);
if (error || !response) {
toast.error(error?.message || 'Something went wrong');
return;
}
toast.success('Roadmap removed');
onUpdate();
}
async function onRemove(resourceId: string) {
pageProgressMessage.set('Removing roadmap');
deleteResource(resourceId).finally(() => {
pageProgressMessage.set('');
});
}
const pickRoadmapOptionModal = isPickingOptions && (
<PickRoadmapOptionModal
onClose={() => setIsPickingOptions(false)}
showDefaultRoadmapsModal={() => {
setIsAddingRoadmap(true);
setIsPickingOptions(false);
}}
showCreateCustomRoadmapModal={() => {
setIsCreatingRoadmap(true);
setIsPickingOptions(false);
}}
/>
);
const filteredAllRoadmaps = allRoadmaps.filter(
(r) => !learningRoadmapsToShow.find((c) => c?.defaultRoadmapId === r.id),
);
const addRoadmapModal = isAddingRoadmap && (
<SelectRoadmapModal
onClose={() => setIsAddingRoadmap(false)}
teamResourceConfig={learningRoadmapsToShow.map((r) => r.resourceId)}
allRoadmaps={filteredAllRoadmaps.filter((r) => r.renderer === 'editor')}
teamId={teamId}
onRoadmapAdd={(roadmapId: string) => {
const isEditorRoadmap = allRoadmaps.find(
(r) => r.id === roadmapId && r.renderer === 'editor',
);
if (!isEditorRoadmap) {
onAdd(roadmapId).finally(() => {
pageProgressMessage.set('');
});
return;
}
setIsAddingRoadmap(false);
setConfirmationContentId(roadmapId);
}}
onRoadmapRemove={(roadmapId: string) => {
if (confirm('Are you sure you want to remove this roadmap?')) {
onRemove(roadmapId).finally(() => {});
}
}}
/>
);
const confirmationContentIdModal = confirmationContentId && (
<ContentConfirmationModal
onClose={() => {
setConfirmationContentId('');
}}
onClick={(shouldCopy) => {
onAdd(confirmationContentId, shouldCopy).finally(() => {
pageProgressMessage.set('');
setConfirmationContentId('');
});
}}
/>
);
const createRoadmapModal = isCreatingRoadmap && (
<CreateRoadmapModal
teamId={teamId}
onClose={() => {
setIsCreatingRoadmap(false);
}}
onCreated={() => {
setIsCreatingRoadmap(false);
}}
/>
);
const roadmapHeading = (
<div className="mb-3 flex h-[20px] items-center justify-between gap-2 text-xs">
<h2 className="uppercase text-gray-400">Roadmaps</h2>
<span className="mx-3 h-[1px] flex-grow bg-gray-200" />
{canManageCurrentTeam && (
<a
href={`/team/roadmaps?t=${teamId}`}
className="flex flex-row items-center rounded-full bg-gray-400 px-2.5 py-0.5 text-xs text-white transition-colors hover:bg-black"
>
<MapIcon className="mr-1.5 size-3" strokeWidth={2.5} />
Roadmaps
</a>
)}
</div>
);
if (!isLoading && learningRoadmapsToShow.length === 0) {
return (
<>
{roadmapHeading}
<div className="flex flex-col items-center rounded-md border bg-white p-4 py-10">
{pickRoadmapOptionModal}
{addRoadmapModal}
{createRoadmapModal}
{confirmationContentIdModal}
<RoadmapIcon className="mb-4 h-14 w-14 opacity-10" />
<h2 className="text-lg font-semibold sm:text-lg">No roadmaps</h2>
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">
{canManageCurrentTeam
? 'Add a roadmap to start tracking your team'
: 'Ask your team admin to add some roadmaps'}
</p>
{canManageCurrentTeam && (
<button
className="mt-1 rounded-lg bg-black px-3 py-1 text-sm font-medium text-white hover:bg-gray-900"
onClick={() => setIsPickingOptions(true)}
>
Add roadmap
</button>
)}
</div>
</>
);
}
return (
<>
{pickRoadmapOptionModal}
{addRoadmapModal}
{createRoadmapModal}
{confirmationContentIdModal}
{roadmapHeading}
{isLoading && <LoadingProgress />}
{!isLoading && learningRoadmapsToShow.length > 0 && (
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-3">
{learningRoadmapsToShow.map((roadmap) => {
const learningCount = roadmap.learning || 0;
const doneCount = roadmap.done || 0;
const totalCount = roadmap.total || 0;
const skippedCount = roadmap.skipped || 0;
return (
<ResourceProgress
key={roadmap.resourceId}
isCustomResource={roadmap?.isCustomResource || false}
doneCount={doneCount > totalCount ? totalCount : doneCount}
learningCount={
learningCount > totalCount ? totalCount : learningCount
}
totalCount={totalCount}
skippedCount={skippedCount}
resourceId={roadmap.resourceId}
resourceType="roadmap"
updatedAt={roadmap.updatedAt}
title={roadmap.resourceTitle}
showActions={false}
roadmapSlug={roadmap.roadmapSlug}
/>
);
})}
{canManageCurrentTeam && (
<button
onClick={() => setIsPickingOptions(true)}
className="group relative flex w-full items-center justify-center overflow-hidden rounded-md border border-dashed border-gray-300 bg-white px-3 py-2 text-center text-sm text-gray-500 transition-all hover:border-gray-400 hover:text-black"
>
+ Add Roadmap
</button>
)}
</div>
)}
</>
);
}

@ -17,6 +17,7 @@ import { DashboardAiRoadmaps } from './DashboardAiRoadmaps.tsx';
import type { AllowedProfileVisibility } from '../../api/user.ts';
import { PencilIcon, type LucideIcon } from 'lucide-react';
import { cn } from '../../lib/classname.ts';
import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
type UserDashboardResponse = {
name: string;
@ -42,6 +43,8 @@ export type BuiltInRoadmap = {
description: string;
isFavorite?: boolean;
relatedRoadmapIds?: string[];
renderer?: AllowedRoadmapRenderer;
metadata?: Record<string, any>;
};
type PersonalDashboardProps = {
@ -350,13 +353,11 @@ function DashboardCard(props: DashboardCardProps) {
} = props;
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">
<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" />

@ -3,29 +3,35 @@ import type { TeamMember } from '../TeamProgress/TeamProgressPage';
import { httpGet } from '../../lib/http';
import { useToast } from '../../hooks/use-toast';
import { getUser } from '../../lib/jwt';
import { LoadingProgress } from './LoadingProgress';
import { ResourceProgress } from '../Activity/ResourceProgress';
import { TeamActivityPage } from '../TeamActivity/TeamActivityPage';
import { cn } from '../../lib/classname';
import { Tooltip } from '../Tooltip';
import { DashboardTeamRoadmaps } from './DashboardTeamRoadmaps';
import type { BuiltInRoadmap } from './PersonalDashboard';
import { InviteMemberPopup } from '../TeamMembers/InviteMemberPopup';
import { Users, Users2 } from 'lucide-react';
type TeamDashboardProps = {
builtInRoleRoadmaps: BuiltInRoadmap[];
builtInSkillRoadmaps: BuiltInRoadmap[];
teamId: string;
};
export function TeamDashboard(props: TeamDashboardProps) {
const { teamId } = props;
const { teamId, builtInRoleRoadmaps, builtInSkillRoadmaps } = props;
const toast = useToast();
const currentUser = getUser();
const [isLoading, setIsLoading] = useState(true);
const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
const [isInvitingMember, setIsInvitingMember] = useState(false);
async function getTeamProgress() {
const { response, error } = await httpGet<TeamMember[]>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-progress/${teamId}`,
);
if (error || !response) {
toast.error(error?.message || 'Failed to get team progress');
return;
@ -54,12 +60,8 @@ export function TeamDashboard(props: TeamDashboardProps) {
getTeamProgress().finally(() => setIsLoading(false));
}, [teamId]);
if (!currentUser) {
return null;
}
const currentMember = teamMembers.find(
(member) => member.email === currentUser.email,
(member) => member.email === currentUser?.email,
);
const learningRoadmapsToShow =
currentMember?.progress?.filter(
@ -67,53 +69,58 @@ export function TeamDashboard(props: TeamDashboardProps) {
) || [];
const allMembersWithoutCurrentUser = teamMembers.sort((a, b) => {
if (a.email === currentUser.email) {
if (a.email === currentUser?.email) {
return -1;
}
if (b.email === currentUser.email) {
if (b.email === currentUser?.email) {
return 1;
}
return 0;
});
const canManageCurrentTeam = ['admin', 'manager'].includes(
currentMember?.role!,
);
return (
<section className="mt-8">
<h2 className="mb-3 text-xs uppercase text-gray-400">Roadmaps</h2>
{isLoading && <LoadingProgress />}
{!isLoading && learningRoadmapsToShow.length > 0 && (
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-3">
{learningRoadmapsToShow.map((roadmap) => {
const learningCount = roadmap.learning || 0;
const doneCount = roadmap.done || 0;
const totalCount = roadmap.total || 0;
const skippedCount = roadmap.skipped || 0;
return (
<ResourceProgress
key={roadmap.resourceId}
isCustomResource={roadmap?.isCustomResource || false}
doneCount={doneCount > totalCount ? totalCount : doneCount}
learningCount={
learningCount > totalCount ? totalCount : learningCount
}
totalCount={totalCount}
skippedCount={skippedCount}
resourceId={roadmap.resourceId}
resourceType="roadmap"
updatedAt={roadmap.updatedAt}
title={roadmap.resourceTitle}
showActions={false}
roadmapSlug={roadmap.roadmapSlug}
/>
);
})}
</div>
{isInvitingMember && (
<InviteMemberPopup
onInvited={() => {
toast.success('Invite sent');
getTeamProgress().finally(() => null);
setIsInvitingMember(false);
}}
onClose={() => {
setIsInvitingMember(false);
}}
/>
)}
<h2 className="mb-3 mt-6 text-xs uppercase text-gray-400">
<DashboardTeamRoadmaps
isLoading={isLoading}
teamId={teamId}
learningRoadmapsToShow={learningRoadmapsToShow}
canManageCurrentTeam={canManageCurrentTeam}
onUpdate={getTeamProgress}
builtInRoleRoadmaps={builtInRoleRoadmaps}
builtInSkillRoadmaps={builtInSkillRoadmaps}
/>
<h2 className="mb-3 mt-6 flex h-[20px] items-center justify-between text-xs uppercase text-gray-400">
Team Members
<span className="flex-grow h-[1px] bg-gray-200 mx-3" />
{canManageCurrentTeam && (
<a
href={`/team/members?t=${teamId}`}
className="flex flex-row items-center rounded-full bg-gray-400 px-2.5 py-0.5 text-xs text-white transition-colors hover:bg-black"
>
<Users2 className="mr-1.5 size-3" strokeWidth={2.5} />
Members
</a>
)}
</h2>
{isLoading && <TeamMemberLoading className="mb-6" />}
{!isLoading && (
@ -123,7 +130,11 @@ export function TeamDashboard(props: TeamDashboardProps) {
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
: '/images/default-avatar.png';
return (
<span className="group relative" key={member.email}>
<a
className="group relative"
key={member.email}
href={`/team/member?t=${teamId}&m=${member._id}`}
>
<figure className="relative aspect-square size-8 overflow-hidden rounded-md bg-gray-100">
<img
src={avatar}
@ -134,13 +145,30 @@ export function TeamDashboard(props: TeamDashboardProps) {
<Tooltip position="top-center" additionalClass="text-sm">
{member.name}
</Tooltip>
</span>
</a>
);
})}
{canManageCurrentTeam && (
<button
className="group relative"
onClick={() => setIsInvitingMember(true)}
>
<span className="relative flex aspect-square size-8 items-center justify-center overflow-hidden rounded-md border border-dashed bg-gray-100">
+
</span>
<Tooltip position="top-center" additionalClass="text-sm">
Add Member
</Tooltip>
</button>
)}
</div>
)}
<TeamActivityPage teamId={teamId} />
<TeamActivityPage
teamId={teamId}
canManageCurrentTeam={canManageCurrentTeam}
/>
</section>
);
}

@ -1,11 +1,10 @@
import { useState, type ReactNode } from 'react';
import { type ReactNode, useState } from 'react';
import type {
LeadeboardUserDetails,
LeaderboardUserDetails,
ListLeaderboardStatsResponse,
} from '../../api/leaderboard';
import { cn } from '../../lib/classname';
import { FolderKanban, Zap, Trophy } from 'lucide-react';
import { RankBadgeIcon } from '../ReactIcons/RankBadgeIcon';
import { FolderKanban, GitPullRequest, Users, Users2, Zap } from 'lucide-react';
import { TrophyEmoji } from '../ReactIcons/TrophyEmoji';
import { SecondPlaceMedalEmoji } from '../ReactIcons/SecondPlaceMedalEmoji';
import { ThirdPlaceMedalEmoji } from '../ReactIcons/ThirdPlaceMedalEmoji';
@ -18,53 +17,77 @@ export function LeaderboardPage(props: LeaderboardPageProps) {
const { stats } = props;
return (
<div className="min-h-screen bg-gray-50">
<div className="container py-10">
<div className="mb-8 text-center">
<div className="mb-2 flex items-center justify-center gap-3">
<Trophy className="size-8 text-yellow-500" />
<h2 className="text-2xl font-bold sm:text-3xl">Leaderboard</h2>
</div>
<p className="mx-auto max-w-2xl text-balance text-sm text-gray-500 sm:text-base">
Top users based on their activity on roadmap.sh
</p>
<div className="mt-8 grid gap-2 md:grid-cols-2">
<LeaderboardLane
title="Longest Visit Streak"
tabs={[
{
title: 'Active',
users: stats.streaks?.active || [],
emptyIcon: <Zap className="size-16 text-gray-300" />,
emptyText: 'No users with streaks yet',
},
{
title: 'Lifetime',
users: stats.streaks?.lifetime || [],
emptyIcon: <Zap className="size-16 text-gray-300" />,
emptyText: 'No users with streaks yet',
},
]}
/>
<LeaderboardLane
title="Projects Completed"
tabs={[
{
title: 'This Month',
users: stats.projectSubmissions.currentMonth,
emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
emptyText: 'No projects submitted this month',
},
{
title: 'Lifetime',
users: stats.projectSubmissions.lifetime,
emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
emptyText: 'No projects submitted yet',
},
]}
/>
</div>
<div className="min-h-screen bg-gray-100">
<div className="container pb-5 sm:pb-8">
<h1 className="my-5 flex items-center text-lg font-medium text-black sm:mb-4 sm:mt-8">
<Users2 className="mr-2 size-5 text-black" />
Leaderboard
</h1>
<div className="grid gap-2 sm:gap-3 md:grid-cols-2">
<LeaderboardLane
title="Longest Visit Streak"
tabs={[
{
title: 'Active',
users: stats.streaks?.active || [],
emptyIcon: <Zap className="size-16 text-gray-300" />,
emptyText: 'No users with streaks yet',
},
{
title: 'Lifetime',
users: stats.streaks?.lifetime || [],
emptyIcon: <Zap className="size-16 text-gray-300" />,
emptyText: 'No users with streaks yet',
},
]}
/>
<LeaderboardLane
title="Projects Completed"
tabs={[
{
title: 'This Month',
users: stats.projectSubmissions.currentMonth,
emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
emptyText: 'No projects submitted this month',
},
{
title: 'Lifetime',
users: stats.projectSubmissions.lifetime,
emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
emptyText: 'No projects submitted yet',
},
]}
/>
<LeaderboardLane
title="Most Referrals"
tabs={[
{
title: 'This Month',
users: stats.referrals.currentMonth,
emptyIcon: <Users className="size-16 text-gray-300" />,
emptyText: 'No referrals this month',
},
{
title: 'Lifetime',
users: stats.referrals.lifetime,
emptyIcon: <Users className="size-16 text-gray-300" />,
emptyText: 'No referrals yet',
},
]}
/>
<LeaderboardLane
title="Top Contributors"
subtitle="Past 2 weeks"
tabs={[
{
title: 'This Month',
users: stats.githubContributors.currentMonth,
emptyIcon: <GitPullRequest className="size-16 text-gray-300" />,
emptyText: 'No contributors this month',
},
]}
/>
</div>
</div>
</div>
@ -73,27 +96,35 @@ export function LeaderboardPage(props: LeaderboardPageProps) {
type LeaderboardLaneProps = {
title: string;
subtitle?: string;
tabs: {
title: string;
users: LeadeboardUserDetails[];
users: LeaderboardUserDetails[];
emptyIcon?: ReactNode;
emptyText?: string;
}[];
};
function LeaderboardLane(props: LeaderboardLaneProps) {
const { title, tabs } = props;
const { title, subtitle, tabs } = props;
const [activeTab, setActiveTab] = useState(tabs[0]);
const { users: usersToShow, emptyIcon, emptyText } = activeTab;
return (
<div className="overflow-hidden rounded-md border bg-white shadow-sm">
<div className="flex items-center justify-between gap-2 bg-gray-100 px-3 py-3 mb-3">
<h3 className="text-base font-medium">{title}</h3>
<div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-sm">
<div className="mb-3 flex items-center justify-between gap-2 px-3 py-3">
<h3 className="text-sm font-medium">
{title}{' '}
{subtitle && (
<span className="ml-1 text-sm font-normal text-gray-400">
{subtitle}
</span>
)}
</h3>
{tabs.length > 1 && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{tabs.map((tab) => {
const isActive = tab === activeTab;
@ -102,10 +133,10 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
key={tab.title}
onClick={() => setActiveTab(tab)}
className={cn(
'text-sm font-medium underline-offset-2 transition-colors',
'text-xs transition-colors py-0.5 px-2 rounded-full',
{
'text-black underline': isActive,
'text-gray-400 hover:text-gray-600': !isActive,
'text-white bg-black': isActive,
'hover:bg-gray-200': !isActive,
},
)}
>
@ -118,7 +149,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
</div>
{usersToShow.length === 0 && emptyText && (
<div className="flex flex-col items-center justify-center p-8">
<div className="flex flex-grow flex-col items-center justify-center p-8">
{emptyIcon}
<p className="mt-4 text-sm text-gray-500">{emptyText}</p>
</div>
@ -128,19 +159,23 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
<ul className="divide-y divide-gray-100 pb-4">
{usersToShow.map((user, counter) => {
const avatar = user?.avatar
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
? user?.avatar?.startsWith('http')
? user?.avatar
: `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
: '/images/default-avatar.png';
const rank = counter + 1;
const isGitHubUser = avatar?.indexOf('github') > -1;
return (
<li
key={user.id}
className="flex items-center justify-between gap-1 pl-2 pr-5 py-2.5 hover:bg-gray-50"
className="flex items-center justify-between gap-1 py-2.5 pl-2 pr-5"
>
<div className="flex min-w-0 items-center gap-2">
<span
className={cn(
'relative text-xs mr-1 flex size-6 shrink-0 items-center justify-center rounded-full tabular-nums',
'relative mr-1 flex size-6 shrink-0 items-center justify-center rounded-full text-xs tabular-nums',
{
'text-black': rank <= 3,
'text-gray-400': rank > 3,
@ -153,9 +188,19 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
<img
src={avatar}
alt={user.name}
className="size-7 shrink-0 rounded-full"
className="mr-1 size-7 shrink-0 rounded-full"
/>
<span className="truncate">{user.name}</span>
{isGitHubUser ? (
<a
href={`https://github.com/kamranahmedse/developer-roadmap/pulls?q=is%3Apr+is%3Aclosed+author%3A${user.name}`}
target="_blank"
className="truncate font-medium underline underline-offset-2"
>
{user.name}
</a>
) : (
<span className="truncate">{user.name}</span>
)}
{rank === 1 ? (
<TrophyEmoji className="size-5" />
) : rank === 2 ? (

@ -46,6 +46,22 @@ import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu'
<a href='/teams' class='group relative text-gray-400 hover:text-white'>
Teams
</a>
<a
href='/changelog'
class='group relative text-blue-300 hover:text-white hidden md:block ml-0.5'
>
Changelog
<span class='absolute -right-[11px] top-0'>
<span class='relative flex h-2 w-2'>
<span
class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
></span>
<span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
></span>
</span>
</span>
</a>
</div>
</div>

@ -6,7 +6,7 @@ import {
Menu,
Shirt,
Video,
Waypoints,
Map,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { cn } from '../lib/classname.ts';
@ -22,31 +22,36 @@ const links = [
link: '/roadmaps',
label: 'Official Roadmaps',
description: 'Made by subject matter experts',
Icon: Waypoints,
Icon: Map,
isHighlighted: true,
},
{
link: '/projects',
label: 'Projects',
description: 'Skill-up with real-world projects',
Icon: FolderKanban,
isHighlighted: false,
},
{
link: '/best-practices',
label: 'Best Practices',
description: "Do's and don'ts",
Icon: CheckSquare,
isHighlighted: false,
},
{
link: '/questions',
label: 'Questions',
description: 'Test and Practice your knowledge',
Icon: FileQuestion,
isHighlighted: false,
},
{
link: '/guides',
label: 'Guides',
description: 'In-depth articles and tutorials',
Icon: BookOpenText,
isHighlighted: false,
},
{
link: 'https://youtube.com/@roadmapsh',
@ -54,6 +59,7 @@ const links = [
description: 'Animated and interactive content',
Icon: Video,
isExternal: true,
isHighlighted: false,
},
{
link: 'https://cottonbureau.com/people/roadmapsh',
@ -61,12 +67,14 @@ const links = [
description: 'Get some cool swag',
Icon: Shirt,
isExternal: true,
isHighlighted: false,
},
{
link: '/advertise',
label: 'Advertise',
description: 'Promote your product or service',
Icon: Menu,
isHighlighted: false,
},
];
@ -115,7 +123,13 @@ export function NavigationDropdown() {
target={link.isExternal ? '_blank' : undefined}
rel={link.isExternal ? 'noopener noreferrer' : undefined}
key={link.link}
className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
className={cn(
'group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700',
{
'mx-2 mb-1 rounded-md border border-slate-600 bg-slate-700 pl-2.5 text-gray-200 hover:bg-slate-600':
link.isHighlighted,
},
)}
role="menuitem"
>
<span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">

@ -5,10 +5,13 @@ import type {
} from '../../lib/project.ts';
import { Users } from 'lucide-react';
import { formatCommaNumber } from '../../lib/number.ts';
import { cn } from '../../lib/classname.ts';
import { isLoggedIn } from '../../lib/jwt.ts';
type ProjectCardProps = {
project: ProjectFileType;
userCount?: number;
status?: 'completed' | 'started' | 'none';
};
const badgeVariants: Record<ProjectDifficultyType, string> = {
@ -18,10 +21,12 @@ const badgeVariants: Record<ProjectDifficultyType, string> = {
};
export function ProjectCard(props: ProjectCardProps) {
const { project, userCount = 0 } = props;
const { project, userCount = 0, status } = props;
const { frontmatter, id } = project;
const isLoadingStatus = status === undefined;
const userStartedCount = status !== 'none' && userCount === 0 ? userCount + 1 : userCount;
return (
<a
href={`/projects/${id}`}
@ -34,16 +39,45 @@ export function ProjectCard(props: ProjectCardProps) {
/>
<Badge variant={'grey'} text={frontmatter.nature} />
</span>
<span className="my-3 flex flex-col">
<span className="my-3 flex min-h-[100px] flex-col">
<span className="mb-1 font-medium">{frontmatter.title}</span>
<span className="text-sm text-gray-500">{frontmatter.description}</span>
</span>
<span className="flex items-center gap-2 text-xs text-gray-400">
<Users className="inline-block size-3.5" />
{userCount > 0 ? (
<>{formatCommaNumber(userCount)} Started</>
<span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
{isLoadingStatus ? (
<>
<span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
<span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
</>
) : (
<>Be the first to solve!</>
<>
<span className="flex items-center gap-1.5">
<Users className="size-3.5" />
{userStartedCount > 0 ? (
<>{formatCommaNumber(userStartedCount)} Started</>
) : (
<>Be the first to solve!</>
)}
</span>
{status !== 'none' && (
<span
className={cn(
'flex items-center gap-1.5 rounded-full border border-current px-2 py-0.5 capitalize',
status === 'completed' && 'text-green-500',
status === 'started' && 'text-yellow-500',
)}
>
<span
className={cn('inline-block h-2 w-2 rounded-full', {
'bg-green-500': status === 'completed',
'bg-yellow-500': status === 'started',
})}
/>
{status}
</span>
)}
</>
)}
</span>
</a>

@ -1,7 +1,7 @@
import { ProjectCard } from './ProjectCard.tsx';
import { HeartHandshake, Trash2 } from 'lucide-react';
import { cn } from '../../lib/classname.ts';
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import {
projectDifficulties,
type ProjectDifficultyType,
@ -12,6 +12,8 @@ import {
getUrlParams,
setUrlParams,
} from '../../lib/browser.ts';
import { httpPost } from '../../lib/http.ts';
import { isLoggedIn } from '../../lib/jwt.ts';
type DifficultyButtonProps = {
difficulty: ProjectDifficultyType;
@ -38,6 +40,11 @@ function DifficultyButton(props: DifficultyButtonProps) {
);
}
export type ListProjectStatusesResponse = Record<
string,
'completed' | 'started'
>;
type ProjectsListProps = {
projects: ProjectFileType[];
userCounts: Record<string, number>;
@ -50,6 +57,30 @@ export function ProjectsList(props: ProjectsListProps) {
const [difficulty, setDifficulty] = useState<
ProjectDifficultyType | undefined
>(urlDifficulty);
const [projectStatuses, setProjectStatuses] =
useState<ListProjectStatusesResponse>();
const loadProjectStatuses = async () => {
if (!isLoggedIn()) {
setProjectStatuses({});
return;
}
const projectIds = projects.map((project) => project.id);
const { response, error } = await httpPost(
`${import.meta.env.PUBLIC_API_URL}/v1-list-project-statuses`,
{
projectIds,
},
);
if (error || !response) {
console.error(error);
return;
}
setProjectStatuses(response);
};
const projectsByDifficulty: Map<ProjectDifficultyType, ProjectFileType[]> =
useMemo(() => {
@ -72,12 +103,17 @@ export function ProjectsList(props: ProjectsListProps) {
? projectsByDifficulty.get(difficulty) || []
: projects;
useEffect(() => {
loadProjectStatuses().finally();
}, []);
return (
<div className="flex flex-col">
<div className="my-2.5 flex items-center justify-between">
<div className="flex flex-wrap gap-1">
{projectDifficulties.map((projectDifficulty) => (
<DifficultyButton
key={projectDifficulty}
onClick={() => {
setDifficulty(projectDifficulty);
setUrlParams({ difficulty: projectDifficulty });
@ -130,7 +166,18 @@ export function ProjectsList(props: ProjectsListProps) {
})
.map((matchingProject) => {
const count = userCounts[matchingProject?.id] || 0;
return <ProjectCard project={matchingProject} userCount={count} />;
return (
<ProjectCard
key={matchingProject.id}
project={matchingProject}
userCount={count}
status={
projectStatuses
? (projectStatuses?.[matchingProject.id] || 'none')
: undefined
}
/>
);
})}
</div>
</div>

@ -190,6 +190,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
key={project.id}
project={project}
userCount={userCounts[project.id] || 0}
status={'none'}
/>
))}
</div>

@ -1,4 +1,4 @@
import { ChevronDown, Globe, Menu, Sparkles, Waypoints } from 'lucide-react';
import { ChevronDown, Globe, Menu, Sparkles, Map } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { cn } from '../../lib/classname';
@ -13,19 +13,22 @@ const links = [
link: '/roadmaps',
label: 'Official Roadmaps',
description: 'Made by subject matter experts',
Icon: Waypoints,
Icon: Map,
isHighlighted: true,
},
{
link: '/ai/explore',
label: 'AI Roadmaps',
description: 'Generate roadmaps with AI',
Icon: Sparkles,
isHighlighted: false,
},
{
link: '/community',
label: 'Community Roadmaps',
description: 'Made by community members',
Icon: Globe,
isHighlighted: false,
},
];
@ -73,14 +76,34 @@ export function RoadmapDropdownMenu() {
<a
href={link.link}
key={link.link}
className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
className={cn(
'group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700',
{
'mx-2 mb-1 rounded-md border border-slate-600 bg-slate-700 text-gray-200 hover:bg-slate-600':
link.isHighlighted,
},
)}
role="menuitem"
>
<span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
<span
className={cn(
'flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100',
{
'bg-slate-500 text-slate-100': link.isHighlighted,
},
)}
>
<link.Icon className="inline-block h-5 w-5" />
</span>
<span className="flex flex-col">
<span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
<span
className={cn(
'font-medium text-slate-300 transition-colors group-hover:text-slate-100',
{
'text-white': link.isHighlighted,
},
)}
>
{link.label}
</span>
<span className="text-sm">{link.description}</span>

@ -357,6 +357,11 @@ const groups: GroupType[] = [
link: '/ai-data-scientist',
type: 'role',
},
{
title: 'AI Engineer',
link: '/ai-engineer',
type: 'role',
},
{
title: 'Data Analyst',
link: '/data-analyst',

@ -102,7 +102,7 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
return (
<li
key={user._id}
className="flex flex-wrap items-center gap-1 rounded-md border px-2 py-2.5 text-sm"
className="flex flex-wrap items-center gap-1 rounded-md border px-2 py-2.5 text-sm bg-white"
>
{actionType === 'in_progress' && (
<>
@ -158,7 +158,7 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
const activityLimit = showAll ? activities.length : 5;
return (
<li key={user._id} className="overflow-hidden rounded-md border">
<li key={user._id} className="overflow-hidden bg-white rounded-md border">
<h3 className="flex flex-wrap items-center gap-1 bg-gray-100 px-2 py-2.5 text-sm">
{username} has {activities.length} updates in {uniqueResourcesCount}
&nbsp;resource(s)

@ -9,6 +9,12 @@ import { TeamActivityItem } from './TeamActivityItem';
import { TeamActivityTopicsModal } from './TeamActivityTopicsModal';
import { TeamEmptyStream } from './TeamEmptyStream';
import { Pagination } from '../Pagination/Pagination';
import {
ChartNoAxesGantt,
CircleDashed,
Flag,
LoaderCircle,
} from 'lucide-react';
export type TeamStreamActivity = {
_id?: string;
@ -51,10 +57,11 @@ type GetTeamActivityResponse = {
type TeamActivityPageProps = {
teamId?: string;
canManageCurrentTeam?: boolean;
};
export function TeamActivityPage(props: TeamActivityPageProps) {
const { teamId: defaultTeamId } = props;
const { teamId: defaultTeamId, canManageCurrentTeam = false } = props;
const { t: teamId = defaultTeamId } = getUrlParams();
const toast = useToast();
@ -182,13 +189,44 @@ export function TeamActivityPage(props: TeamActivityPageProps) {
return enrichedUsers;
}, [users, activities]);
if (!teamId) {
window.location.href = '/';
return;
}
const sectionHeading = (
<h3 className="mb-3 flex h-[20px] w-full items-center justify-between text-xs uppercase text-gray-400">
Team Activity
<span className="mx-3 h-[1px] flex-grow bg-gray-200" />
{canManageCurrentTeam && (
<a
href={`/team/progress?t=${teamId}`}
className="flex flex-row items-center rounded-full bg-gray-400 px-2.5 py-0.5 text-xs text-white transition-colors hover:bg-black"
>
<ChartNoAxesGantt className="mr-1.5 size-3" strokeWidth={2.5} />
Progresses
</a>
)}
</h3>
);
if (isLoading) {
return null;
return (
<>
{sectionHeading}
<div className="flex flex-col gap-2">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
className="h-[70px] w-full animate-pulse rounded-lg border bg-gray-100"
/>
))}
</div>
</>
);
}
if (!teamId) {
if (typeof window !== 'undefined') {
window.location.href = '/';
} else {
return null;
}
}
return (
@ -202,9 +240,7 @@ export function TeamActivityPage(props: TeamActivityPageProps) {
{usersWithActivities.length > 0 ? (
<>
<h3 className="mb-4 flex w-full items-center justify-between text-xs uppercase text-gray-400">
Team Activity
</h3>
{sectionHeading}
<ul className="mb-4 mt-2 flex flex-col gap-3">
{usersWithActivities.map((user, index) => {
return (
@ -233,7 +269,12 @@ export function TeamActivityPage(props: TeamActivityPageProps) {
/>
</>
) : (
<TeamEmptyStream teamId={teamId} />
<>
{sectionHeading}
<div className="rounded-lg border bg-white p-4">
<TeamEmptyStream teamId={teamId} />
</div>
</>
)}
</>
);

@ -10,7 +10,7 @@ export function TeamEmptyStream(props: TeamActivityItemProps) {
return (
<div className="rounded-md">
<div className="flex flex-col items-center p-7 text-center sm:p-14">
<ListTodo className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" />
<ListTodo className="mb-4 h-14 w-14 opacity-10" />
<h2 className="text-lg font-semibold sm:text-lg">No Activity</h2>
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">

@ -10,18 +10,11 @@ export function TeamMemberEmptyPage(props: TeamMemberEmptyPageProps) {
return (
<div className="rounded-md">
<div className="flex flex-col items-center p-7 text-center">
<RoadmapIcon className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" />
<RoadmapIcon className="mb-2 h-14 w-14 opacity-10" />
<h2 className="text-lg font-bold sm:text-xl">No Progress</h2>
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">
Progress will appear here as they start tracking their{' '}
<a
href={`/team/roadmaps?t=${teamId}`}
className="mt-4 text-blue-500 hover:underline"
>
Roadmaps
</a>{' '}
progress.
Progress will appear here as they start tracking their roadmaps.
</p>
</div>
</div>

@ -7,10 +7,11 @@ import { type AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
type InviteMemberPopupProps = {
onInvited: () => void;
onClose: () => void;
teamId?: string;
};
export function InviteMemberPopup(props: InviteMemberPopupProps) {
const { onClose, onInvited } = props;
const { onClose, onInvited, teamId: defaultTeamId } = props;
const popupBodyRef = useRef<HTMLDivElement>(null);
const emailRef = useRef<HTMLInputElement>(null);
@ -18,7 +19,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const { teamId } = useTeamId();
const { teamId = defaultTeamId } = useTeamId();
useEffect(() => {
emailRef?.current?.focus();
@ -31,7 +32,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
const { response, error } = await httpPost(
`${import.meta.env.PUBLIC_API_URL}/v1-invite-member/${teamId}`,
{ email, role: selectedRole }
{ email, role: selectedRole },
);
if (error || !response) {
@ -92,7 +93,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
</div>
{error && (
<p className=" rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
<p className="rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
{error}
</p>
)}

@ -233,7 +233,7 @@ export function TeamRoadmaps() {
const addRoadmapModal = isAddingRoadmap && (
<SelectRoadmapModal
onClose={() => setIsAddingRoadmap(false)}
teamResourceConfig={teamResources}
teamResourceConfig={teamResources.map((c) => c.resourceId)}
allRoadmaps={filteredAllRoadmaps.filter((r) => r.renderer === 'editor')}
teamId={teamId}
onRoadmapAdd={(roadmapId: string) => {
@ -309,9 +309,9 @@ export function TeamRoadmaps() {
{createRoadmapModal}
{confirmationContentIdModal}
<RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
<RoadmapIcon className="mb-3 h-14 w-14 opacity-10" />
<h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
<h3 className="mb-1 text-xl font-bold text-gray-900">No roadmaps</h3>
<p className="text-base text-gray-500">
{canManageCurrentTeam
? 'Add a roadmap to start tracking your team'
@ -320,7 +320,7 @@ export function TeamRoadmaps() {
{canManageCurrentTeam && (
<button
className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900"
className="mt-3 rounded-md bg-black px-3 py-1.5 font-medium text-white hover:bg-gray-900 text-sm"
onClick={() => setIsPickingOptions(true)}
>
Add roadmap

@ -175,7 +175,6 @@ export function TopicDetail(props: TopicDetailProps) {
setError('');
setIsLoading(true);
setIsActive(true);
sponsorHidden.set(true);
setTopicId(topicId);
setResourceType(resourceType);

@ -29,6 +29,8 @@ type TopicDetailLinkProps = {
export function TopicDetailLink(props: TopicDetailLinkProps) {
const { url, onClick, type, title, isPaid = false } = props;
const linkType = type === 'opensource' ? 'OpenSource' : type;
return (
<a
href={url}
@ -38,18 +40,11 @@ export function TopicDetailLink(props: TopicDetailLinkProps) {
>
<span
className={cn(
'mr-2 inline-block rounded px-1.5 py-0.5 text-xs uppercase no-underline',
'mr-2 inline-block rounded px-1.5 py-0.5 text-xs capitalize no-underline',
(isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200',
)}
>
{type === 'opensource' ? (
<>
{url.includes('github') && 'GitHub'}
{url.includes('gitlab') && 'GitLab'}
</>
) : (
type
)}
{linkType}
</span>
{title}
</a>

@ -1368,7 +1368,7 @@
"y": "0",
"properties": {
"size": "20",
"text": "Keep the payload small to reduce the size of the JWT token"
"text": "Keep the payload small to reduce the size of the JWT"
}
}
]
@ -4374,4 +4374,4 @@
},
"dependencies": [],
"projectID": "file:///Users/dan/Library/Application%20Support/Balsamiq%20Wireframes/UnsavedFiles/New%20Project%201.bmpr"
}
}

@ -2,4 +2,4 @@
> Do not extract the algorithm from the header, use backend.
Extracting the algorithm from the header of a JWT token can pose a security risk, as an attacker could modify the algorithm and potentially gain unauthorized access. It is therefore recommended to verify the algorithm on the backend rather than extracting it from the header. This can help ensure that the algorithm used to sign and verify the token is secure and has not been tampered with.
Extracting the algorithm from the header of a JWT can pose a security risk, as an attacker could modify the algorithm and potentially gain unauthorized access. It is therefore recommended to verify the algorithm on the backend rather than extracting it from the header. This can help ensure that the algorithm used to sign and verify the token is secure and has not been tampered with.

@ -2,4 +2,4 @@
> Avoid storing sensitive data in JWT payload
Storing sensitive data in a JWT token payload can increase the risk of data breaches and other security incidents. If an attacker is able to obtain or tamper with the token, they could potentially access the sensitive data stored in the payload.
Storing sensitive data in a JWT payload can increase the risk of data breaches and other security incidents. If an attacker is able to obtain or tamper with the token, they could potentially access the sensitive data stored in the payload.

@ -1,5 +1,5 @@
# JWT Payload Size
> Avoid storing large payloads in JWT tokens
> Avoid storing large payloads in JWTs
A smaller payload can reduce network overhead, improve processing speed, and decrease the risk of attacks aimed at overloading the system.

@ -0,0 +1,25 @@
---
title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
description: 'New AI Engineer Roadmap, New Leaderboards, AI Integration in Editor, and more'
images:
"AI Engineer Roadmap": "https://assets.roadmap.sh/guest/ai-engineer-roadmap.png"
"Refer Others": "https://assets.roadmap.sh/guest/invite-users.png"
"Editor AI Integration": "https://assets.roadmap.sh/guest/editor-ai-integration.png"
"Project Status": "https://assets.roadmap.sh/guest/project-status.png"
"Leaderboards": "https://assets.roadmap.sh/guest/new-leaderboards.png"
seo:
title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
description: ''
date: 2024-10-04
---
We have a new AI Engineer roadmap, Contributor leaderboards, AI integration in the editor, and more.
- [AI Engineer Roadmap](https://roadmap.sh/ai-engineer) is now live
- You can now refer others to join roadmap.sh
- AI integration [in the editor](https://draw.roadmap.sh) to help you create and edit roadmaps faster
- New [Leaderboards](/leaderboard) for contributors and people who refer others
- [Projects pages](/frontend/projects) now show the status of each project
- Bug fixes and performance improvements
ML Engineer roadmap and team dashboards are coming up next. Stay tuned!

@ -22,4 +22,4 @@ We have a new roadmap, some improvements to dashboard, bookmarks and more.
- [Cyber Security roadmap](/cyber-security) is now filled with new content and resources.
- Buf fixes and improvements to some team features.
Next up, we are working on a new Data Engineering roadmap and teams dashboards.
Next up, we are working on a new AI Engineer roadmap and teams dashboards.

@ -7,7 +7,7 @@ seo:
title: 'Top 7 Backend Frameworks to Use in 2024: Pro Advice'
description: 'Get expert advice on backend frameworks for 2024. Learn about the top 7 frameworks that can elevate your development process.'
ogImageUrl: 'https://assets.roadmap.sh/guest/top-backend-frameworks-jfpux.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-09-27
sitemap:

@ -104,7 +104,7 @@ At the same time, when you “set” the value in the cache, you can also give i
For the last of our “easy” backend projects, let’s cover one more API, an expense tracker API. This API should let you:
- Sign up as a new user.
- Generate and validate JWT tokens for handling authentication and user session.
- Generate and validate JWTs for handling authentication and user session.
- List and filter your past expenses. You can add the following filters:
- Past week.
- Last month.
@ -205,7 +205,7 @@ For this one, you’ll have to keep in mind everything we’ve been covering so
With that in mind, let’s take a look at the responsibilities of this system:
- JWT token creation and validation to handle authorization.
- JWT creation and validation to handle authorization.
- Ability to create new users.
- Shopping cart management, which involves payment gateway integration as well.
- Product listings.

@ -7,7 +7,7 @@ seo:
title: 'Top 10+ Backend Technologies to Use in @currentYear@: Expert Advice'
description: 'Looking for the best backend technologies in @currentYear@? Check out our expert list of top tools for developers.'
ogImageUrl: 'https://assets.roadmap.sh/guest/backend-technologies-pnof4.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-08-27
sitemap:

@ -7,7 +7,7 @@ seo:
title: 'Is DevOps engineering a good career path in @currentYear@?'
description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.'
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-career-path-2h4r7.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-08-20
sitemap:

@ -7,7 +7,7 @@ seo:
title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@'
description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.'
ogImageUrl: 'https://assets.roadmap.sh/guest/what-is-devops-engineer-jort4.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-08-15
sitemap:

@ -7,7 +7,7 @@ seo:
title: '11 DevOps Principles and Practices to Master: Pro Advice'
description: 'Elevate your game by understanding this set of key DevOps principles and practices. Gain pro insights for a more efficient, collaborative workflow!'
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-skills-tlace.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-09-24
sitemap:
@ -147,7 +147,7 @@ So to keep up, DevOps engineers and teams need to be committed to learning and i
Encouraging a culture of continuous learning within your team can help keep everyone up-to-date with the latest DevOps trends and tools. This can include participating in conferences, attending workshops, and enrolling in online courses. Reading books like "The Phoenix Project," "The Unicorn Project," and "The DevOps Handbook" can provide valuable insights and inspiration.
If you’re not into books, then websites like [12factor.net](http://12factor.net), [OpenGitOps.dev](http://OpenGitOps.dev), and [CNCF.](http://CNCF.)io are also great resources for staying current with industry best practices.
If you’re not into books, then websites like [12factor.net](http://12factor.net), [OpenGitOps.dev](http://OpenGitOps.dev), and [CNCF.io](http://CNCF.io) are also great resources for staying current with industry best practices.
Continuous improvement goes hand-in-hand with continuous learning. It's about regularly reviewing and refining your processes, identifying areas for improvement after failing and experimenting with new approaches. This iterative approach helps you optimize the development process, improve collaboration between devs and operations, and deliver better software.
@ -183,4 +183,4 @@ And there you have it—the core principles and practices of DevOps in a nutshel
Whether you're just starting out or looking to level up your DevOps game, there's always something new to learn and explore. So keep experimenting, keep learning, and most importantly, keep having fun\!
After all, DevOps isn't just about making systems run smoothly—it's about building a culture that encourages innovation, collaboration, and growth. As you dive deeper into the DevOps practice, you'll not only become more skilled but also contribute to creating better software and more agile teams.
After all, DevOps isn't just about making systems run smoothly—it's about building a culture that encourages innovation, collaboration, and growth. As you dive deeper into the DevOps practice, you'll not only become more skilled but also contribute to creating better software and more agile teams.

@ -7,7 +7,7 @@ seo:
title: '10+ In-Demand DevOps Engineer Skills to Master'
description: 'Find out exactly what it takes to be a successful DevOps engineer with my recommendations for essential DevOps skills'
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-skills-tlace.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-09-12
sitemap:

@ -7,7 +7,7 @@ seo:
title: 'Top 7 Frontend Frameworks to Use in 2024: Pro Advice'
description: 'Get expert advice on frontend frameworks for 2024. Elevate your web development process with these top picks.'
ogImageUrl: 'https://assets.roadmap.sh/guest/top-frontend-frameworks-wmqwc.jpg'
isNew: true
isNew: false
type: 'textual'
date: 2024-09-26
sitemap:

@ -0,0 +1,46 @@
---
title: 'Automated DB Backups'
description: 'Setup a scheduled workflow to backup a Database every 12 hours'
isNew: false
sort: 1600
difficulty: 'intermediate'
nature: 'Backups'
skills:
- 'bash'
- 'devops'
seo:
title: 'Automated DB Backups'
description: 'Setup a scheduled workflow to backup a Database every 12 hours'
keywords:
- 'Backup'
- 'Database'
- 'MongoDB'
roadmapIds:
- 'devops'
---
The goal of this project is to setup a scheduled workflow to backup a Database every 12 hours and upload the backup to [Cloudflare R2](https://developers.cloudflare.com/r2/) which has a free tier for storage.
## Requirements
The pre-requisite for this project is to have a server setup and a database ready to backup. You can use one of the projects did in [the other project](/projects/multi-container-service). Alternatively:
- Setup a server on [Digital Ocean](https://m.do.co/c/b29aa8845df8) or any other provider
- Run a MongoDB instance on the server
- Seed some data to the database
Once you have a server and a database ready, you can proceed to the next step.
### Scheduled Backups
You can do this bit either by setting up a cron job on the server or alternatively setup a [scheduled workflow in Github Actions](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows#schedule) that runs every 12 hours and execute the backup from there. Database should be backedup up into a tarball and uploaded to [Clouodflare R2](https://developers.cloudflare.com/r2/).
Hint: You can use the `mongodump` to dump the database and then use `aws cli` to upload the file to R2.
### Stretch Goal
Write a script to download the latest backup from R2 and restore the database.
<hr />
Database backups are essential to ensure that you can restore your data in case of a disaster. This project will give you hands on experience on how to setup a scheduled workflow to backup a database and how to restore it from a backup.

@ -0,0 +1,44 @@
---
title: 'Basic DNS Setup'
description: 'Purchase a custom domain and set up basic DNS records.'
isNew: false
sort: 700
difficulty: 'beginner'
nature: 'DNS'
skills:
- 'devops'
- 'dns'
seo:
title: 'Basic DNS Setup'
description: 'Purchase a custom domain and set up basic DNS records.'
keywords:
- 'basic dns'
- 'dns'
- 'domain'
roadmapIds:
- 'devops'
---
The goal of this project is to learn and practice the basics of DNS. You are required to purchase a custom domain name and setup the basic DNS records.
## Requirements
You are required to have a custom domain name to complete this project. You can use the domain name you already own or purchase a new domain name from any provider such as Cloudflare, Namecheap, Godaddy etc. Once you have a domain name, you can proceed to the next step.
### Task #1 - Custom Domain for GitHub Pages
If you have not completed the [GitHub pages project](/projects/github-actions-deployment-workflow), go ahead and complete that project first. Once you have a github pages site setup, set up your custom domain name to point to your github pages site.
### Task #2 - Custom Domain for DigitalOcean Droplet
If you have not completed the [Static Site Server project](/projects/static-site-server), go ahead and complete that project first so you have a basic static site to serve. Once you have a digital ocean droplet setup serving a static site, set up your DNS records to point to your droplet.
<hr />
### Submission Guidelines
Output for this project is the steps you took to setup the custom domain name for both GitHub Pages and a DigitalOcean Droplet. You can write a simple markdown file in tutorial format, add screenshots and any other relevant information to help you remember the steps.
<hr />
Once you have completed the project, you should have a basic understanding of how to setup a custom domain name for both GitHub Pages and a DigitalOcean Droplet.

@ -2,9 +2,9 @@
title: 'Basic Dockerfile'
description: 'Build a basic Dockerfile to create a Docker image.'
isNew: false
sort: 1
sort: 1000
difficulty: 'beginner'
nature: 'CLI'
nature: 'Docker'
skills:
- 'docker'
- 'dockerfile'
@ -19,7 +19,6 @@ seo:
- 'docker'
roadmapIds:
- 'devops'
- 'docker'
---
In this project, you will write a basic Dockerfile to create a Docker image. When this Docker image is run, it should print "Hello, Captain!" to the console before exiting.

@ -0,0 +1,37 @@
---
title: 'Blue-Green Deployment'
description: 'Setup a blue-green deployment strategy for your application.'
isNew: false
sort: 1700
difficulty: 'advanced'
nature: 'DevOps'
skills:
- 'bash'
- 'devops'
- 'monitoring'
seo:
title: 'Blue-Green Deployment'
description: 'Setup a blue-green deployment strategy for your application.'
keywords:
- 'Blue-Green Deployment'
- 'Deployment Strategy'
- 'DevOps'
- 'Server Metrics'
roadmapIds:
- 'devops'
---
The goal of this project is to practice setting up a blue-green deployment strategy for a simple web application. This will allow you to deploy your application in a more efficient and reliable way.
## Requirement
You are required to take an existing application (e.g. the one you built in [multi-container service project](/projects/multi-container-service)) and setup a blue-green deployment strategy for it. The goal is to deploy the next version of the application in a separate container and switch the traffic to the new container only when the new version is ready.
## Bonus
- Setup a CI/CD pipeline to automatically deploy the application to the server when the code is pushed to the repository.
- Setup a monitoring system to monitor the application and the deployment process.
<hr />
After finishing this project you will have a good understanding of how to deploy a containerized application in a more efficient way without downtime and with zero data loss.

@ -0,0 +1,54 @@
---
title: 'Configuration Management'
description: 'Write an Ansible playbook to configure a Linux server.'
isNew: false
sort: 1100
difficulty: 'intermediate'
nature: 'Ansible'
skills:
- 'ansible'
- 'linux'
- 'devops'
seo:
title: 'Configuration Management'
description: 'Write an Ansible playbook to configure a Linux server.'
keywords:
- 'Configuration Management'
- 'Ansible'
- 'Linux'
roadmapIds:
- 'devops'
---
The goal of this project is to introduce you to the basics of configuration management using Ansible. You will write an Ansible playbook to configure a Linux server.
## Requirements
If you have been doing the previous projects, you should already have a Linux server running. If not, setup a Linux server on [DigitalOcean](https://m.do.co/c/b29aa8845df8), AWS or another cloud provider.
You are required to write an Ansible playbook called `setup.yml` and create the following roles:
- `base` — basic server setup (installs utilities, updates the server, installs `fail2ban`, etc.)
- `nginx` — installs and configures `nginx`
- `app` — uploads the given tarball of a static HTML website to the server and unzips it.
- `ssh` - adds the given public key to the server
Set up the inventory file `inventory.ini` to include the server you are going to configure When you run the playbook, it should run the roles above in sequence. You should also assign proper tags to the roles so that you can run only specific roles.
Example:
```bash
# Run all the roles
ansible-playbook setup.yml
# Run only the app role
ansible-playbook setup.yml --tags "app"
```
### Stretch goal
Modify the `app` role to pull the repository from GitHub and deploy it.
<hr />
Once you are done with the project, you should have a basic understanding of how Ansible works and how it can be used to manage server configuration.

@ -0,0 +1,64 @@
---
title: 'Dockerized Service'
description: 'Use GitHub Actions to Deploy a Dockerized Node.js Service'
isNew: false
sort: 1400
difficulty: 'intermediate'
nature: 'Docker'
skills:
- 'nodejs'
- 'docker'
- 'devops'
seo:
title: 'Dockerized Service Deployment'
description: 'Use GitHub Actions to Deploy a Dockerized Node.js Service to a remote server'
keywords:
- 'Docker'
- 'DigitalOcean'
- 'Node.js'
- 'GitHub Actions'
roadmapIds:
- 'devops'
---
The goal of this project is to dockerize a simple Node.js service and deploy it to a remote server using GitHub Actions. You will also practice secrets management.
## Requirements
There are 4 parts to this project:
- **Step 1** — Creating a Node.js service
- **Step 2** — Dockerizing the Node.js service
- **Step 3** — Setup a remote Linux Server
- **Step 4** — Deploying the Dockerized Node.js service to a remote server using GitHub Actions
### Part 1: Creating a Node.js service
You are required to create a simple Node.js service with two routes:
- `/` route - which simply returns `Hello, world!`
- `/secret` route - protected by Basic Auth
Project should have a `.env` file with the following variables:
- `SECRET_MESSAGE` - the secret message that the `/secret` route should return
- `USERNAME` - the username for the Basic Auth
- `PASSWORD` - the password for the Basic Auth
When user visits the `/secret` route, they should be prompted for the username and password. If the username and password are correct, they should be able to see the secret message. If the username and password are incorrect, they should see an error message.
### Part 2: Dockerizing the Node.js service
Create a Dockerfile for the Node.js service that will build a Docker image. You should be able to run the Docker image locally. Make sure that the `.env` file is not included in the Docker image.
### Part 3: Setup a remote Linux Server
Setup a remote Linux server on either [DigitalOcean](https://m.do.co/c/b29aa8845df8), AWS, or any other provider. You can either set it up manually by using SSH or use a mix of Ansible or Terraform from previous projects.
### Part 4: Deploy the Dockerized Node.js service
Create a workflow that will build a Docker image and push it to the container registry. The workflow should then deploy the Docker image to the remote server. Feel free to explore secrets management in GitHub Actions. I will leave the implementation details to you.
<hr />
Once you are done with the project, you will have practiced dockerizing applications, setting up remote servers, implementing CI/CD workflows and secrets management.

@ -0,0 +1,56 @@
---
title: 'Dummy Systemd Service'
description: 'Create a long-running systemd service that logs to a file.'
isNew: false
sort: 900
difficulty: 'beginner'
nature: 'Systemd'
skills:
- 'Linux'
- 'DevOps'
- 'Systemd'
seo:
title: 'Dummy Systemd Service'
description: 'Create a long-running Systemd service that autorestarts and logs to a file.'
keywords:
- 'Dummy Systemd Service'
- 'Systemd Service'
- 'Systemd'
roadmapIds:
- 'devops'
---
The goal of this project is to get familiar with `systemd`; creating and enabling a service, checking the status, keeping an eye on the logs, starting and stopping the service, etc.
## Requirements
Create a script called `dummy.sh` that keeps running forever and writes a message to the log file every 10 seconds simulating an application running in the background. Here is an example script:
```bash
#!/bin/bash
while true; do
echo "Dummy service is running..." >> /var/log/dummy-service.log
sleep 10
done
```
Create a systemd service `dummy.service` that should start the app automatically on boot and keep it running in the background. If the service fails for any reason, it should automatically restart.
You should be able to `start`, `stop`, `enable`, `disable`, check the `status` of the service, and check the logs i.e. following commands should be available for the service:
```bash
# Interacting with the service
sudo systemctl start dummy
sudo systemctl stop dummy
sudo systemctl enable dummy
sudo systemctl disable dummy
sudo systemctl status dummy
# Check the logs
sudo journalctl -u dummy -f
```
<hr />
After completing this project, you will have a good understanding of systemd, creating custom services, managing existing services, debugging issues, and more.

@ -0,0 +1,67 @@
---
title: 'EC2 Instance'
description: 'Create an EC2 instance on AWS and connect to it using SSH.'
isNew: false
sort: 1001
difficulty: 'beginner'
nature: 'AWS'
skills:
- 'aws'
- 'ec2'
- 'linux'
- 'devops'
seo:
title: 'EC2 Instance'
description: 'Create an EC2 instance on AWS and connect to it using SSH.'
keywords:
- 'ec2'
- 'aws'
- 'linux'
roadmapIds:
- 'devops'
---
The goal of this project is to create an AWS account, set up a Linux server on AWS EC2, and deploy a simple static website. This project will help you gain hands-on experience with cloud computing, specifically with Amazon Web Services (AWS).
## Requirements
You are required to complete the following tasks:
- Create an AWS account if you don't have one already.
- Familiarize yourself with the AWS Management Console.
- Launch an EC2 instance with the following specifications:
- Use Ubuntu Server AMI.
- Choose a `t2.micro` instance type (eligible for AWS Free Tier).
- Use the default VPC and subnet for your region.
- Configure the security group to allow inbound traffic on ports `22` (SSH) and `80` (HTTP).
- Create a new key pair or use an existing one for SSH access.
- Assign a public IP address to your instance.
- Connect to your EC2 instance using SSH and the private key.
- Update the system packages and install a web server (e.g., Nginx).
- Create a simple HTML file for your static website.
- Deploy the static website to your EC2 instance.
- Access your website using the public IP address of your EC2 instance.
## Stretch Goals
If you want to challenge yourself further, try these additional tasks:
- Set up a custom domain name for your website using Amazon Route 53.
- Implement HTTPS using a free SSL/TLS certificate from Let's Encrypt.
- Create a simple CI/CD pipeline using AWS CodePipeline to automatically deploy changes to your website.
## Learning Outcomes
After completing this project, you will have gained practical experience in:
- Creating basic AWS resources
- Learn about [AWS instances, types and differences](https://kamranahmed.info/posts/up-and-running-with-aws-ec2)
- Launching and configuring EC2 instances
- Connecting to Linux servers using SSH
- Basic server administration and web server setup
- Deploying static websites to cloud infrastructure
<hr />
After finishing this project you should have a good understanding of launching and connecting to EC2 isntances, basic knowledge of security groups, and be able to deploy any of the projects from previous tasks using AWS EC2. Future project ideas will be based on these concepts.

@ -32,7 +32,7 @@ Build an API for an expense tracker application. This API should allow users to
Here are the features that you should implement in your Expense Tracker API:
- Sign up as a new user.
- Generate and validate JWT tokens for handling authentication and user session.
- Generate and validate JWTs for handling authentication and user session.
- List and filter your past expenses. You can add the following filters:
- Past week
- Past month

@ -37,7 +37,7 @@ You should write a data seeder to populate the database with a list of exercises
### User Authentication and Authorization
Users will be able to sign up, log in, and log out of the application. You should use JWT tokens for authentication and authorization. Only authenticated users should be able to create, update, and delete workout plans. Needless to say, users should only be able to access their own workout plans.
Users will be able to sign up, log in, and log out of the application. You should use JWTs for authentication and authorization. Only authenticated users should be able to create, update, and delete workout plans. Needless to say, users should only be able to access their own workout plans.
- **Sign-Up**: Allow users to create an account.
- **Login**: Allow users to log in to their account.

@ -0,0 +1,47 @@
---
title: 'GitHub Pages Deployment'
description: 'Write a simple GitHub Actions workflow to deploy a static website to GitHub Pages.'
isNew: true
sort: 400
difficulty: 'beginner'
nature: 'CI / CD'
skills:
- 'github actions'
- 'ci/cd'
seo:
title: 'GitHub Actions Deployment Workflow'
description: 'Write a simple GitHub Actions workflow to deploy a static website to GitHub Pages.'
keywords:
- 'GitHub Actions Deployment Workflow'
- 'devops project idea'
roadmapIds:
- 'devops'
---
The goal of this project is to help you learn the notion of continuous integration and continuous deployment. You will write a simple GitHub Actions workflow to deploy a static website to GitHub Pages.
## Requirements
You are required to write a GitHub action that deploys any changes made to the `index.html` file to GitHub Pages. It should only deploy the file when the `index.html` file is changed.
Here are the steps to get you started:
- Create a GitHub repository for the project called `gh-deployment-workflow` for example.
- Repository should contain a simple `index.html` file saying "Hello, GitHub Actions!"
- It should also have a `README.md` file explaining the project.
- There should also be a `deploy.yml` file in the `.github/workflows` directory which contains the GitHub Actions workflow to deploy the website to GitHub Pages.
- Every push to the `main` branch that changes the `index.html` file should trigger the workflow to run and deploy the website to [GitHub Pages](https://docs.github.com/en/pages).
- Website and any changes you make should be accessible at the GitHub pages URL for the repository e.g. `https://<username>.github.io/gh-deployment-workflow/`.
Stretch goal: You can also make this project more practical e.g. use some sort of a static site generator such as [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Astro](https://astro.build/) or similar generator to create a more complex website e.g. your own personal portfolio.
<hr />
After finishing this project, you will have a good understanding of the following concepts:
- GitHub Actions
- GitHub Pages
- Continuous Integration and Continuous Deployment
- Writing GitHub Actions workflows
Continue solving more projects for advanced CI/CD concepts.

@ -0,0 +1,39 @@
---
title: 'IaC on DigitalOcean'
description: 'Write Terraform code to create a Droplet on DigitalOcean'
isNew: false
sort: 1200
difficulty: 'intermediate'
nature: 'Terraform'
skills:
- 'terraform'
- 'linux'
- 'devops'
seo:
title: 'IaC on DigitalOcean'
description: 'Write Terraform code to create a Droplet on DigitalOcean'
keywords:
- 'IaC'
- 'Terraform'
- 'DigitalOcean'
roadmapIds:
- 'devops'
---
The goal of this project is to introduce you to the basics of IaC using Terraform. You will create a DigitalOcean Droplet and configure it using Terraform.
## Requirements
If you have been doing the previous projects, you should already have a Linux server running. If not, setup a Linux server on [DigitalOcean](https://m.do.co/c/b29aa8845df8), AWS or another cloud provider.
You are required to write a Terraform script that will create a Droplet on DigitalOcean. The Droplet should have a public IP address, and SSH access. You should also be able to SSH into the Droplet using the private key.
You can use [this guide from Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-use-terraform-with-digitalocean) and [Digital Ocean provider documentation](https://registry.terraform.io/providers/digitalocean/digitalocean/latest/docs) to get started.
## Stretch goal
Write Ansible playbook that will configure the server. You can use the same playbook from [the previous project](/projects/configuration-management).
<hr />
Once you are done with the project, you should have a good understanding of setting up a basic infrastructure on DigitalOcean using Terraform and configuring it using Ansible.

@ -35,7 +35,7 @@ Here is the list of features that you should implement in this project:
- **Sign-Up**: Allow users to create an account.
- **Log-In**: Allow users to log into their account.
- **JWT Authentication**: Secure endpoints using JWT tokens for authenticated access.
- **JWT Authentication**: Secure endpoints using JWTs for authenticated access.
### Image Management
@ -75,7 +75,7 @@ POST /register
"password": "password123"
}
```
Response should be the user object with a JWT token.
Response should be the user object with a JWT.
Log in an existing user:
@ -86,7 +86,7 @@ POST /login
"password": "password123"
}
```
Response should be the user object with a JWT token.
Response should be the user object with a JWT.
### Image Management Endpoints
@ -149,4 +149,4 @@ GET /images?page=1&limit=10
<hr />
This project will help you understand how to build a scalable image processing service with user authentication and image transformation capabilities. You can use this project to showcase your backend development skills and learn about image processing techniques.
This project will help you understand how to build a scalable image processing service with user authentication and image transformation capabilities. You can use this project to showcase your backend development skills and learn about image processing techniques.

@ -1,8 +1,8 @@
---
title: 'Log Archive Tool'
description: 'Build a tool to archive logs from the CLI.'
description: 'Build a tool to archive logs from the CLI with the date and time.'
isNew: false
sort: 2
sort: 200
difficulty: 'beginner'
nature: 'CLI'
skills:
@ -11,7 +11,7 @@ skills:
- 'shell scripting'
seo:
title: 'Log Archive Tool'
description: 'Build a tool to archive logs from the CLI.'
description: 'Build a tool to archive logs from the CLI with the date and time.'
keywords:
- 'log archive tool'
- 'devops project idea'

@ -0,0 +1,70 @@
---
title: 'Prometheus and Grafana'
description: 'Setup monitoring using Prometheus and visualize metrics in Grafana.'
isNew: false
sort: 1800
difficulty: 'advanced'
nature: 'Monitoring'
skills:
- 'bash'
- 'devops'
- 'monitoring'
seo:
title: 'Monitoring with Prometheus and Grafana'
description: 'Setup monitoring using Prometheus and visualize metrics in Grafana.'
keywords:
- 'Prometheus'
- 'Grafana'
- 'Monitoring'
- 'Server Metrics'
roadmapIds:
- 'devops'
---
The goal of this project is to implement a comprehensive monitoring system for your server infrastructure using Prometheus for metric collection and Grafana for visualization. This setup will provide real-time insights into your server's performance, resource utilization, and overall health.
## Requirements
To begin this project, you'll need:
- A running server to monitor. You can use an existing server from a previous project or setup a new server on [Digital Ocean](https://m.do.co/c/b29aa8845df8) or another cloud provider
- An application running on the server using some dependencies e.g., Nginx, Node.js, or others.
Once your server is operational, you'll proceed with setting up Prometheus and Grafana.
### Prometheus Setup
Prometheus is a powerful, open-source monitoring and alerting toolkit. Follow these steps to set it up:
- Install Prometheus on your server
- Configure prometheus for scarping intervals, endpoints and retention policies
- Install and configure exporters for System metrics (CPU, memory, disk, network). Also setup additional exporters for services like Nginx, MySQL, MongoDB, etc.
- Implement custom exporters or instrumentation for application-specific metrics
Prometheus offers extensive data collection capabilities and a flexible query language (PromQL) for data analysis.
### Grafana Configuration
Grafana provides customizable dashboards for your metrics. You can setup a dashboard for system metrics and another for application metrics. Follow these steps:
- Install Grafana on your server
- Connect Grafana to Prometheus as a data source
- Create dashboards for various metrics:
- System overview (CPU, memory, disk, network)
- Application-specific metrics
- Custom panels using PromQL queries
- Set up user authentication and authorization for your Grafana instance
### Advanced Goals
For those looking to expand their skills and create a more robust monitoring system, consider implementing these advanced features:
- Set up alerting rules in Prometheus and configure notification channels in Grafana (e.g., email, Slack)
- Implement Prometheus recording rules to optimize query performance
- Use Prometheus service discovery for automatic monitoring of dynamic environments
- Integrate log aggregation using Loki and correlate logs with metrics in Grafana
- Create a custom exporter for a specific application or service you're running
<hr />
This project will provide you with hands-on experience in setting up a production-grade monitoring system. You'll gain valuable skills in metric collection, data visualization, and system observability, which are crucial for maintaining reliable and performant infrastructure.

@ -0,0 +1,56 @@
---
title: 'Multi-Container Application'
description: 'Use Docker Compose to run a multi-container application'
isNew: false
sort: 1500
difficulty: 'intermediate'
nature: 'Docker Compose'
skills:
- 'nodejs'
- 'docker'
- 'devops'
seo:
title: 'Multi-Container Application'
description: 'Use Docker Compose to run a multi-container application'
keywords:
- 'Docker'
- 'Docker Compose'
- 'Node.js'
- 'MongoDB'
roadmapIds:
- 'devops'
---
The goal of this project is to practice using Docker Compose to run a multi-container application in production. You will use Docker Compose to run a Node.js application and a MongoDB database.
## Requirements
Create a simple unauthenticated Node.js API service for creating a simple todo list. The API should have the following endpoints:
- `GET /todos` — get all todos
- `POST /todos` — create a new todo
- `GET /todos/:id` — get a single todo by id
- `PUT /todos/:id` — update a single todo by id
- `DELETE /todos/:id` — delete a single todo by id
The API should connect to MongoDB to store the todo items. You can use [Express](https://expressjs.com/) for the API and [Mongoose](https://mongoosejs.com/) to connect to MongoDB. You can use `nodemon` to automatically restart the server when the source code changes.
### Requirement #1 - Dockerize the API
You are required to dockerize the API and have a `docker-compose.yml` file which will spin up a [MongoDB container](https://hub.docker.com/_/mongo) and the API container. If everything works, you should be able to access the API via `http://localhost:3000` and the todos should be saved to the MongoDB container. Data should be persisted when the containers are stopped and started.
### Requirement #2 - Setup a remote server
Setup a remote server on [Digital Ocean](https://m.do.co/c/b29aa8845df8), AWS or any other cloud provider. You should use terraform to create the server and Ansible to configure it properly i.e. setup docker, docker-compose, pulling the image from Docker Hub and running the containers.
### Requirement #3 - Setup a CI/CD pipeline
Once you have everything working locally, push your code to GitHub and setup a CI/CD pipeline to deploy the application to the remote server. You can use [GitHub Actions](https://github.com/features/actions) to setup the pipeline. Make sure to use `docker-compose` to run the application in the production environment.
### Bonus - Setup a reverse proxy
Setup a reverse proxy using Nginx to allow you to access the application via `http://your_domain.com`. You should use `docker-compose` to setup the reverse proxy.
<hr />
After completing this project, you will have a good understanding of Docker Compose, multi-container applications, CI/CD pipelines, and more.

@ -0,0 +1,47 @@
---
title: 'Multi-Service Application'
description: 'Setup a multi-service optimized docker implementation'
isNew: false
sort: 1900
difficulty: 'advanced'
nature: 'Docker'
skills:
- 'docker'
- 'docker-compose'
seo:
title: 'Multi-Service Docker'
description: 'Setup a multi-service optimized docker implementation'
keywords:
- 'Multi-Service Docker'
- 'Docker'
roadmapIds:
- 'devops'
---
The goal of this project is to help you practice a more advanced docker setup involving multiple services, volumes, networks, custom base images, multi-stage builds, secrets and more. The project will simulate a real-world scenario with multiple interconnected services, each with its own build requirements and optimizations.
## Requirements
Create a multi-service application using Docker that consists of the following components:
- **Web Application**: A basic react-based frontend application.
- **API Service**: A Node.js Express backend API.
- **Database**: A MongoDB instance for storing application data.
- **Cache**: A Redis cache for improving performance.
- **Reverse Proxy**: An Nginx reverse proxy to handle incoming requests.
Implement the following Docker features and best practices:
- Use Docker Compose to define and run the multi-container application.
- Create custom base images for the web application and API service.
- Implement multi-stage builds for the web application to optimize the final image size.
- Set up a Docker network to allow communication between services.
- Use Docker volumes for persistent data storage (database and cache).
- Implement Docker secrets for sensitive information (e.g., database passwords).
- Configure health checks for each service.
- Optimize Dockerfiles for each service to reduce image sizes and improve build times.
- Implement logging and log rotation for all services.
<hr />
By completing this project, you'll gain hands-on experience with advanced Docker concepts and best practices in a realistic, multi-service environment. This will prepare you for working with complex containerized applications in production scenarios.

@ -0,0 +1,68 @@
---
title: 'Nginx Log Analyser'
description: 'Write a simple tool to analyze logs from the command line.'
isNew: true
sort: 300
difficulty: 'beginner'
nature: 'CLI'
skills:
- 'linux'
- 'bash'
- 'shell scripting'
seo:
title: 'Nginx Log Analyser'
description: 'Build a simple CLI tool to analyze logs from the command line.'
keywords:
- 'Nginx Log Analyser'
- 'devops project idea'
roadmapIds:
- 'devops'
---
The goal of this project is to help you practice some basic shell scripting skills. You will write a simple tool to analyze logs from the command line.
## Requirements
Download the sample nginx access log file from [here](https://gist.githubusercontent.com/kamranahmedse/e66c3b9ea89a1a030d3b739eeeef22d0/raw/77fb3ac837a73c4f0206e78a236d885590b7ae35/nginx-access.log). The log file contains the following fields:
- IP address
- Date and time
- Request method and path
- Response status code
- Response size
- Referrer
- User agent
You are required to create a shell script that reads the log file and provides the following information:
1. Top 5 IP addresses with the most requests
2. Top 5 most requested paths
3. Top 5 response status codes
4. Top 5 user agents
Here is an example of what the output should look like:
```text
Top 5 IP addresses with the most requests:
45.76.135.253 - 1000 requests
142.93.143.8 - 600 requests
178.128.94.113 - 50 requests
43.224.43.187 - 30 requests
178.128.94.113 - 20 requests
Top 5 most requested paths:
/api/v1/users - 1000 requests
/api/v1/products - 600 requests
/api/v1/orders - 50 requests
/api/v1/payments - 30 requests
/api/v1/reviews - 20 requests
Top 5 response status codes:
200 - 1000 requests
404 - 600 requests
500 - 50 requests
401 - 30 requests
304 - 20 requests
```
There are multiple ways to solve this challenge. Do some research on `awk`, `sort`, `uniq`, `head`, `grep`, and `sed` commands. Stretch goal is to come up with multiple solutions for the above problem. For example, instead of using `awk`, you can use `grep` and `sed` to filter and count the requests.

@ -0,0 +1,63 @@
---
title: 'Node.js Service Deployment'
description: 'Use GitHub Actions to Deploy a Node.js Service to a remote server'
isNew: false
sort: 1300
difficulty: 'intermediate'
nature: 'CI/CD'
skills:
- 'nodejs'
- 'docker'
- 'devops'
seo:
title: 'Node.js Service Deployment'
description: 'Use GitHub Actions to Deploy a Node.js Service to a remote server'
keywords:
- 'Node.js'
- 'DigitalOcean'
- 'Docker'
roadmapIds:
- 'devops'
---
The goal of this project is to practice setting up a CI/CD pipeline for a Node.js service using GitHub Actions. You will practice using GitHub Actions for deployment (including Secrets and environment variables), Terraform to provision a server, Ansible to configure the server, and SSH to deploy the application.
## Requirements
If you haven't completed the previous projects for [Configuration Management](/projects/configuration-management) and [IaC](/projects/iac-digitalocean), you should do that first. You will be able to reuse the Ansible and Terraform code from those projects.
You are required to have the following setup:
- Setup a [DigitalOcean droplet using Terraform](/projects/iac-digitalocean)
- Setup the server using [Ansible](/projects/configuration-management) including installing Node.js and `npm`
- Create a simple Node.js service that just has a `/` route which returns `Hello, world!`
- Push the codebase to GitHub repository
Once you have the above setup, you are required to implement the following:
### Task #1: Manual Ansible Deployment
- Setup a role in ansible called `app` that will connect to the server, clone the repository, install the dependencies, build the application, and start the application.
- You should be able to run the playbook using the following command and the application should be up and running on port `80`:
```bash
ansible-playbook node_service.yml --tags app
```
- You should be able to access the application using the public IP address of the server.
### Task #2: Automate Deployment using GitHub Actions
Write a GitHub Action workflow that will deploy the application to the server using one of the following methods. You are welcome to try both options, but you are not required to do that. You are also welcome to use any other method to accomplish the same result.
#### Option #1: Run the playbook in GitHub Actions
Use the `ansible-playbook` command to run the playbook and deploy the application
#### Option #2: Use SSH to connect and deploy the application
Use SSH to connect and deploy the application. Look into [rsync](https://linux.die.net/man/1/rsync) and these GitHub Actions to accomplish this: [web-factory/ssh-agent](https://github.com/webfactory/ssh-agent), [appleboy/ssh-action](https://github.com/appleboy/ssh-action).
<hr />
Once you have the application deployed, you should have a good understanding of automating the process of setting up a server and deploying an application to it.

@ -0,0 +1,38 @@
---
title: 'Server Performance Stats'
description: 'Write a script to analyse basic server performance stats.'
isNew: true
sort: 100
difficulty: 'beginner'
nature: 'CLI'
skills:
- 'linux'
- 'bash'
- 'shell scripting'
seo:
title: 'Server Performance Stats'
description: 'Write a script to analyse server performance stats.'
keywords:
- 'Server Stats'
- 'Server Performance Stats'
roadmapIds:
- 'devops'
---
Goal of this project is to write a script to analyse server performance stats.
## Requirements
You are required to write a script `server-stats.sh` that can analyse basic server performance stats. You should be able to run the script on any Linux server and it should give you the following stats:
- Total CPU usage
- Total memory usage (Free vs Used including percentage)
- Total disk usage (Free vs Used including percentage)
- Top 5 processes by CPU usage
- Top 5 processes by memory usage
Stretch goal: Feel free to optionally add more stats such as os version, uptime, load average, logged in users, failed login attempts etc.
<hr />
Once you have completed this project, you will have some basic knowledge on how to analyse server performance stats in order to debug and get a better understanding of the server's performance.

@ -0,0 +1,49 @@
---
title: 'Service Discovery'
description: 'Setup service discovery with dummy services and Consul'
isNew: false
sort: 2000
difficulty: 'advanced'
nature: 'DevOps'
skills:
- 'devops'
- 'consul'
- 'api-gateway'
- 'monitoring'
seo:
title: 'Service Discovery'
description: 'Setup service discovery with dummy services and Consul'
keywords:
- 'Service Discovery'
- 'DevOps'
- 'Consul'
roadmapIds:
- 'devops'
---
The goal of this project is to help you understand how service discovery works and how to setup Consul to manage your services. The learning objectives are:
- Understand how services register with Consul
- Learn how to query Consul for service information
- Implement a basic service discovery mechanism
- Understand service-to-service communication in a microservices architecture
## Requirements
The project has multiple parts:
### Dummy Services
You are required to create 3 dummy services, each service will just have a dummy endpoint (e.g. `/info`) that returns the current timestamp and the service name (e.g. Service A, Service B and Service C). Services should register themselves with Consul on startup.
### API Gateway
API gateway acts as a single point of entry for the application. It will be responsible for discovering the services using Consul's DNS interface or the API. The API gateway should be able to route requests to the appropriate service.
### Consul
Consul will be used to store the service information and to provide a single point of contact for the API gateway to discover the services.
<hr />
Once you have completed the project, you should have a basic understanding of how service discovery works and how to setup Consul to manage your services.

@ -0,0 +1,49 @@
---
title: 'Simple Monitoring'
description: 'Set up a basic monitoring dashboard using Netdata.'
isNew: false
sort: 800
difficulty: 'beginner'
nature: 'Monitoring'
skills:
- 'monitoring'
- 'netdata'
- 'linux'
- 'devops'
seo:
title: 'Simple Monitoring'
description: 'Learn how to set up a basic monitoring dashboard using Netdata.'
keywords:
- 'monitoring dashboard'
- 'netdata'
- 'system monitoring'
- 'devops'
roadmapIds:
- 'devops'
---
The goal of this project is to learn the basics of monitoring. It is to help you understand how to monitor the health of a system and how to set up a basic monitoring dashboard.
## Requirements
In this project, you will set up a basic monitoring dashboard using [Netdata](https://github.com/netdata/netdata). Netdata is a powerful, real-time performance and health monitoring tool for systems and applications.
- Install Netdata on a Linux system.
- Configure Netdata to monitor basic system metrics such as CPU, memory usage, and disk I/O.
- Access the Netdata dashboard through a web browser.
- Customize at least one aspect of the dashboard (e.g., add a new chart or modify an existing one).
- Set up an alert for a specific metric (e.g., CPU usage above 80%).
You can learn more about installing and configuring Netdata [here](https://learn.netdata.cloud/docs/agent/packaging/installer).
You can follow the above steps manually to get the understanding of the project. Once you have a working setup, create a few shell scripts to automate the setup and test the monitoring dashboard.
- `setup.sh`: A shell script to install Netdata on a new system.
- `test_dashboard.sh`: Script to put some load on the system and test the monitoring dashboard.
- `cleanup.sh`: Script to clean up the system and remove the Netdata agent.
The goal with this automation is to slowly get accustomed to DevOps practices and CI/CD pipelines.
<hr />
Once you have finished this project, you will have a basic understanding of how to set up a monitoring dashboard and how to automate the setup and testing processes. We will revisit the topic of monitoring and look at more advanced tools and techniques in later projects.

@ -0,0 +1,56 @@
---
title: 'SSH Remote Server Setup'
description: 'Setup a basic remote linux server and configure it to allow SSH.'
isNew: false
sort: 500
difficulty: 'beginner'
nature: 'SSH'
skills:
- 'devops'
- 'linux'
seo:
title: 'SSH Remote Server Setup'
description: 'Setup a remote linux server and configure it to allow SSH.'
keywords:
- 'ssh'
- 'linux'
- 'server'
roadmapIds:
- 'devops'
---
The goal of this project is to learn and practice the basics of Linux. You are required to setup a remote linux server and configure it to allow SSH connections.
## Requirements
You are required to setup a remote linux server and configure it to allow SSH connections.
- Register and setup a remote linux server on any provider e.g. a simple droplet on [DigitalOcean](https://m.do.co/c/b29aa8845df8) which gives you $200 in free credits with the link. Alternatively, use AWS or any other provider.
- Create **two new SSH key pairs** and add them to your server.
- You should be able to connect to your server using both SSH keys.
You should be able to use the following command to connect to your server using both SSH keys.
```bash
ssh -i <path-to-private-key> user@server-ip
```
Also, look into setting up the configuration in `~/.ssh/config` to allow you to connect to your server using the following command.
```bash
ssh <alias>
```
The only outcome of this project is that you should be able to SSH into your server using both SSH keys. Future projects will cover other aspects of server setup and configuration.
Stretch goal: install and configure `fail2ban` to prevent brute force attacks.
<hr />
## Important Note for Solution Submission
**Do not push your private key to any public repository.** The solution to this project should just contain one `README.md` file with the steps you took to complete the project.
<hr />
After completing this project, you will have a basic understanding of how to setup a remote linux server and configure it to allow SSH connections. Future projects will cover other aspects of server setup.

@ -0,0 +1,45 @@
---
title: 'Static Site Server'
description: 'Setup a basic linux server and configure it to serve a static site.'
isNew: false
sort: 600
difficulty: 'beginner'
nature: 'Nginx'
skills:
- 'nginx'
- 'SSH'
- 'linux'
- 'devops'
- 'rsync'
seo:
title: 'Static Site Server'
description: 'Setup a basic linux server and configure it to serve a static site.'
keywords:
- 'static site server'
- 'nginx'
- 'SSH'
- 'linux'
- 'devops'
- 'rsync'
roadmapIds:
- 'devops'
---
The goal of this project is to help you understand the basics of setting up a web server using a basic static site served using Nginx. You will also learn how to use `rsync` to deploy your changes to the server.
## Requirements
Here are the requirements for this project:
- Register and setup a remote linux server on any provider e.g. a simple droplet on [DigitalOcean](https://m.do.co/c/b29aa8845df8) which gives you $200 in free credits with the link. Alternatively, use AWS or any other provider.
- Make sure that you can connect to your server using SSH.
- Install and configure `nginx` to serve a static site.
- Create a simple webpage with basic HTML, CSS and image files.
- Use `rsync` to update a remote server with a local static site.
- If you have a domain name, point it to your server and serve your static site from there. Alternatively, set up your nginx server to serve the static site from the server's IP address.
You can write a script `deploy.sh` which when you run will use `rsync` to sync your static site to the server.
<hr />
Once you have completed the project, you should have a basic understanding of how to setup a web server using a basic static site served using Nginx. You should also have a basic understanding of how to use `rsync` to deploy your changes to the server.

@ -77,7 +77,7 @@ This will validate the given details, make sure the email is unique and store th
}
```
The token can either be a JWT token or a random string that can be used for authentication. We leave it up to you to decide the implementation details.
The token can either be a JWT or a random string that can be used for authentication. We leave it up to you to decide the implementation details.
### User Login

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

Loading…
Cancel
Save