feat: add hover color

Add Zustand links & Higher Order videos.

---------

Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1719080230711
+		"lastUpdateCheck": 1720119515249
 	}
 }

contributing.md

@@ -50,7 +50,6 @@ Visit the following resources to learn more:
 - `@opensource@`
 - `@article@`
 - `@course@`
-- `@opensource@`
 - `@podcast@`
 - `@video@`
 
@@ -98,4 +97,4 @@ It's important to add a valid type, this will help us categorize the content and
   - Rewriting content in a way that doesn't add any value.
   - None English content.
   - PR's that don't follow our style guide, have no description and a default title.
-  - Links to your own blog articles.
+  - Links to your own blog articles.

readme.md

@@ -42,6 +42,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
 - [AWS Roadmap](https://roadmap.sh/aws)
 - [Linux Roadmap](https://roadmap.sh/linux)
+- [Terraform Roadmap](https://roadmap.sh/terraform)
 - [Data Analyst Roadmap](https://roadmap.sh/data-analyst)
 - [MLOps Roadmap](https://roadmap.sh/mlops)
 - [Product Manager Roadmap](https://roadmap.sh/product-manager)
@@ -79,6 +80,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
 - [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
+- [DevRel Engineer Roadmap](https://roadmap.sh/devrel)
 
 There are also interactive best practices:
 

src/api/user.ts

@@ -44,6 +44,7 @@ export interface UserDocument {
     github?: string;
     linkedin?: string;
     twitter?: string;
+    dailydev?: string;
     website?: string;
   };
   username?: string;

src/components/DailyDevIcon.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react';
+
+export function DailyDevIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 32 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="currentColor" fillRule="nonzero">
+        <path
+          d="M26.633 8.69l-3.424-3.431 1.711-3.43 5.563 5.575c.709.71.709 1.861 0 2.572l-6.847 6.86c-.709.711-1.858.711-2.567 0a1.821 1.821 0 010-2.571l5.564-5.575z"
+          fillOpacity="0.64"
+        ></path>
+        <path d="M21.07.536a1.813 1.813 0 012.568 0l1.283 1.286L9.945 16.83c-.709.71-1.858.71-2.567 0l-1.284-1.287L21.071.536zm-6.418 4.717l-2.567 2.572-3.424-3.43-4.28 4.288 3.424 3.43-1.71 3.43L.531 9.97a1.821 1.821 0 010-2.572L7.378.537A1.813 1.813 0 019.945.535l4.707 4.717z"></path>
+      </g>
+    </svg>
+  );
+}

src/components/EditorRoadmap/EditorRoadmapRenderer.css

@@ -7,21 +7,24 @@ svg text tspan {
 svg > g[data-type='topic'],
 svg > g[data-type='subtopic'],
 svg g[data-type='link-item'],
-svg > g[data-type='button'] {
+svg > g[data-type='button'],
+svg > g[data-type='resourceButton'],
+svg > g[data-type='todo-checkbox'],
+svg > g[data-type='todo'] {
   cursor: pointer;
 }
 
 svg > g[data-type='topic']:hover > rect {
-  fill: #d6d700;
+  fill: var(--hover-color);
 }
 
 svg > g[data-type='subtopic']:hover > rect {
-  fill: #f3c950;
+  fill: var(--hover-color);
 }
-svg > g[data-type='button']:hover {
-  opacity: 0.8;
-}
-svg g[data-type='link-item']:hover {
+svg g[data-type='button']:hover,
+svg g[data-type='link-item']:hover,
+svg g[data-type='resourceButton']:hover,
+svg g[data-type='todo-checkbox']:hover {
   opacity: 0.8;
 }
 

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

@@ -45,7 +45,15 @@ function getNodeDetails(svgElement: SVGElement): RoadmapNodeDetails | null {
   return { nodeId, nodeType, targetGroup, title };
 }
 
-const allowedNodeTypes = ['topic', 'subtopic', 'button', 'link-item'];
+const allowedNodeTypes = [
+  'topic',
+  'subtopic',
+  'button',
+  'link-item',
+  'resourceButton',
+  'todo',
+  'todo-checkbox',
+];
 
 export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
   const { resourceId, nodes = [], edges = [] } = props;
@@ -90,7 +98,11 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
       return;
     }
 
-    if (nodeType === 'button' || nodeType === 'link-item') {
+    if (
+      nodeType === 'button' ||
+      nodeType === 'link-item' ||
+      nodeType === 'resourceButton'
+    ) {
       const link = targetGroup?.dataset?.link || '';
       const isExternalLink = link.startsWith('http');
       if (isExternalLink) {
@@ -104,6 +116,20 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
     const isCurrentStatusLearning = targetGroup?.classList.contains('learning');
     const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped');
 
+    if (nodeType === 'todo-checkbox') {
+      e.preventDefault();
+      if (!isLoggedIn()) {
+        showLoginPopup();
+        return;
+      }
+
+      const newStatus = targetGroup?.classList.contains('done')
+        ? 'pending'
+        : 'done';
+      updateTopicStatus(nodeId, newStatus);
+      return;
+    }
+
     if (e.shiftKey) {
       e.preventDefault();
       if (!isLoggedIn()) {

src/components/OpenSourceBanner.astro

@@ -24,7 +24,7 @@ const discordInfo = await getDiscordInfo();
       class='mt-5 grid grid-cols-1 justify-between gap-2 divide-x-0 sm:my-11 sm:grid-cols-3 sm:gap-0 sm:divide-x mb-4 sm:mb-0'
     >
       <OpenSourceStat text='GitHub Stars' value={starCount} />
-      <OpenSourceStat text='Registered Users' value={'850k'} />
+      <OpenSourceStat text='Registered Users' value={'+1M'} />
       <OpenSourceStat
         text='Discord Members'
         value={discordInfo.totalFormatted}

src/components/OpenSourceStat.astro

@@ -28,7 +28,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isRegistered && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+75k</span>
         every month
       </p>
     )
@@ -44,7 +44,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   }
   <div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
     <p
-      class='relative my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold lowercase sm:w-auto sm:text-5xl'
+      class='relative my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold sm:w-auto sm:text-5xl'
     >
       {value}
     </p>

src/components/RelatedRoadmaps.astro

@@ -24,9 +24,6 @@ const relatedQuestionDetails = await getQuestionGroupsByIds(relatedQuestions);
           <span class='text-md flex items-center rounded-md border bg-white px-3 py-1 font-medium'>
             <Clipboard className='mr-1.5 text-black' size='17px' />
             Test your Knowledge
-            <span class='ml-2 rounded-md border border-yellow-300 bg-yellow-100 px-1 py-0.5 text-xs uppercase'>
-              New
-            </span>
           </span>
           <a
             href='/questions'

src/components/Roadmaps/RoadmapsPage.tsx

@@ -222,6 +222,12 @@ const groups: GroupType[] = [
         type: 'skill',
         otherGroups: ['Web Development'],
       },
+      {
+        title: 'Terraform',
+        link: '/terraform',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
     ],
   },
   {
@@ -315,6 +321,11 @@ const groups: GroupType[] = [
         link: '/product-manager',
         type: 'role',
       },
+      {
+        title: 'DevRel Engineer',
+        link: '/devrel',
+        type: 'role',
+      },
     ],
   },
   {

src/components/TopicDetail/TopicDetail.tsx

@@ -421,7 +421,7 @@ export function TopicDetail(props: TopicDetailProps) {
               )}
 
               {/* Contribution */}
-              {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
+              {canSubmitContribution && !hasEnoughLinks && contributionUrl && hasContent && (
                 <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
                   <div className="mb-4 mt-3">
                     <p className="">

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -9,7 +9,8 @@ import type {
 } from '../../api/user';
 import { SelectionButton } from '../RoadCard/SelectionButton';
 import {
-  ArrowUpRight, Check,
+  ArrowUpRight,
+  Check,
   CheckCircle,
   Copy,
   Eye,
@@ -64,6 +65,7 @@ export function UpdatePublicProfileForm() {
   const [github, setGithub] = useState('');
   const [twitter, setTwitter] = useState('');
   const [linkedin, setLinkedin] = useState('');
+  const [dailydev, setDailydev] = useState('');
   const [website, setWebsite] = useState('');
 
   const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]);
@@ -94,6 +96,7 @@ export function UpdatePublicProfileForm() {
         website,
         name,
         email,
+        dailydev,
       },
     );
 
@@ -141,6 +144,7 @@ export function UpdatePublicProfileForm() {
     setGithub(links?.github || '');
     setTwitter(links?.twitter || '');
     setLinkedin(links?.linkedin || '');
+    setDailydev(links?.dailydev || '');
     setWebsite(links?.website || '');
     setProfileVisibility(defaultProfileVisibility || 'public');
     setHeadline(publicConfig?.headline || '');
@@ -528,6 +532,23 @@ export function UpdatePublicProfileForm() {
             onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
           />
         </div>
+        <div className="flex w-full flex-col">
+          <label
+            htmlFor="dailydev"
+            className="text-sm leading-none text-slate-500"
+          >
+            daily.dev
+          </label>
+          <input
+            type="text"
+            name="dailydev"
+            id="dailydev"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="https://app.daily.dev/username"
+            value={dailydev}
+            onChange={(e) => setDailydev((e.target as HTMLInputElement).value)}
+          />
+        </div>
 
         <div className="flex w-full flex-col">
           <label

src/components/UserPublicProfile/UserPublicProfileHeader.tsx

@@ -1,5 +1,12 @@
-import { Github, Globe, LinkedinIcon, Mail, Twitter } from 'lucide-react';
+import {
+  Github,
+  Globe,
+  LinkedinIcon,
+  Mail,
+  Twitter,
+} from 'lucide-react';
 import type { GetPublicProfileResponse } from '../../api/user';
+import { DailyDevIcon } from '../DailyDevIcon';
 
 type UserPublicProfileHeaderProps = {
   userDetails: GetPublicProfileResponse;
@@ -12,7 +19,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
   const { headline, isAvailableForHire, isEmailVisible } = publicConfig!;
 
   return (
-    <div className="flex items-center gap-6 container bg-white border p-8 rounded-xl">
+    <div className="container flex items-center gap-6 rounded-xl border bg-white p-8">
       <img
         src={
           avatar
@@ -37,6 +44,9 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
             <UserLink href={links?.linkedin} icon={LinkedinIcon} />
           )}
           {links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
+          {links?.dailydev && (
+            <UserLink href={links?.dailydev} icon={DailyDevIcon} />
+          )}
           {links?.website && <UserLink href={links?.website} icon={Globe} />}
           {isEmailVisible && <UserLink href={`mailto:${email}`} icon={Mail} />}
         </div>
@@ -47,7 +57,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
 
 type UserLinkProps = {
   href: string;
-  icon: typeof Github;
+  icon: ((props: React.SVGProps<SVGSVGElement>) => JSX.Element) | typeof Globe;
 };
 
 export function UserLink(props: UserLinkProps) {

src/data/question-groups/react/react.md

@@ -35,7 +35,7 @@ questions:
       - 'Beginner'
   - question: What is the difference between Real DOM and Virtual DOM?
     answer: |
-      Virtual DOM is the representation of a UI in the form of a plain javascript object. It is a node tree that lists the elements, their attributes and content as Objects and their properties. Real DOM is the real representation of a UI which can be seen and inspected in the browser.
+      Virtual DOM is the representation of a UI in the form of a plain JavaScript object. It is a node tree that lists the elements, their attributes and content as Objects and their properties. Real DOM is the real representation of a UI which can be seen and inspected in the browser.
       Manipulating the virtual DOM is much faster than real DOM, because nothing gets drawn on the screen. React uses this virtual DOM to figure out the most efficient way to update the browser DOM.
     topics:
       - 'Core'
@@ -80,7 +80,7 @@ questions:
   - question: What are refs in React?
     answer: |
       Refs are used to get reference to a DOM node or an instance of a component. They help to access the DOM nodes or React elements created in the render method.
-      You can also use refs When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.
+      You can also use refs when you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.
     topics:
       - 'Core'
       - 'Intermediate'
@@ -98,7 +98,7 @@ questions:
       - 'Advanced'
   - question: What is the difference between react and react-dom packages?
     answer: |
-      React is a library for building user interfaces. The package `react` contains only the renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI and other helpers. . The package `react-dom` contains the code specific to the DOM rendering of React components.
+      React is a library for building user interfaces. The package `react` contains only the renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI and other helpers. The package `react-dom` contains the code specific to the DOM rendering of React components.
     topics:
       - 'Core'
       - 'Beginner'
@@ -224,7 +224,7 @@ questions:
     topics:
       - 'UX'
       - 'Intermediate'
-  - question: How React Virtual DOM works?
+  - question: How does React Virtual DOM work?
     answer: virtual-dom.md
     topics:
       - 'Core'

src/data/roadmaps/angular/content/101-rxjs-basics/104-operators/103-combination.md

@@ -26,4 +26,4 @@ Further documentation can be found in the official RxJS documentation:
 
 - WithLatestFrom: https://rxjs.dev/api/operators/withLatestFrom
 
-- ForkJoin: https://rxjs.dev/api/operators/forkJoin
+- ForkJoin: https://rxjs.dev/api/index/function/forkJoin

src/data/roadmaps/angular/content/102-angular-basics/100-angularjs-vs-angular.md

@@ -5,5 +5,5 @@ AngularJS was the older version of Angular, whose support officially ended in Ja
 Visit the following resources to learn more:
 
 - [@official@AngularJS Website](https://angularjs.org/)
-- [@official@Official - Getting started with Angular](https://angular.io/start)
+- [@official@Official - Welcome to the Angular tutorial](https://angular.dev/tutorials/learn-angular)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/102-angular-basics/101-angular-components.md

@@ -9,7 +9,6 @@ Components are the main building block for Angular applications. Each component
 
 Visit the following resources to learn more:
 
-- [@official@Angular Components Overview](https://angular.io/guide/component-overview)
 - [@official@Anatomy of a component](https://angular.dev/guide/components)
 - [@official@Composing with Components in Angular](https://angular.dev/essentials/components)
 - [@video@Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)

src/data/roadmaps/angular/content/102-angular-basics/102-angular-templates.md

@@ -4,6 +4,5 @@ A Template is a form of HTML which tells Angular to go towards another component
 
 Visit the following resources to learn more:
 
-- [@official@Understanding Templates](https://angular.io/guide/template-overview)
-- [@official@Template Syntax](https://angular.io/guide/template-syntax)
+- [@official@Template Syntax](https://angular.dev/guide/templates)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/102-angular-basics/103-angular-modules.md

@@ -4,5 +4,6 @@ Modules in Angular act like a container where we can group the components, direc
 
 Visit the following resources to learn more:
 
-- [@official@Introduction to Modules](https://angular.io/guide/architecture-modules)
+- [@official@Importing and using components](https://angular.dev/guide/components/importing)
+- [@official@Introduction to Modules](https://angular.dev/guide/ngmodules)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/102-angular-basics/104-dependency-injection.md

@@ -4,6 +4,6 @@ Dependency Injection is one of the fundamental concepts in Angular. DI is wired
 
 Visit the following resources to learn more:
 
-- [@official@Understanding Dependency Injection](https://angular.io/guide/dependency-injection)
-- [@official@Dependency Injection in Action](https://angular.io/guide/dependency-injection-in-action)
+- [@official@Understanding Dependency Injection](https://angular.dev/guide/di/dependency-injection)
+- [@official@DI in Action](https://angular.dev/guide/di/di-in-action)
 - [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh)

src/data/roadmaps/angular/content/102-angular-basics/105-services.md

@@ -4,7 +4,7 @@ Services let you define code or functionalities that are then accessible and reu
 
 Visit the following resources to learn more:
 
-- [@official@Services](https://angular.io/tutorial/toh-pt4)
+- [@official@Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service)
 - [@article@What is an Angular Service](https://www.javatpoint.com/what-is-an-angular-service)
 - [@article@Service for API Calls](https://www.knowledgehut.com/blog/web-development/make-api-calls-angular)
 - [@article@Service Tutorial with Example](https://www.positronx.io/angular-service-tutorial-with-example/)

src/data/roadmaps/angular/content/102-angular-basics/106-routing.md

@@ -4,5 +4,5 @@ Routing in Angular allows the users to create a single-page application with mul
 
 Visit the following resources to learn more:
 
-- [@official@Angular Routing](https://angular.io/guide/routing-overview)
-- [@official@Common Routing Tasks](https://angular.io/guide/router)
+- [@official@Angular Routing](https://angular.dev/guide/routing)
+- [@official@Common Routing Tasks](https://angular.dev/guide/routing/common-router-tasks)

src/data/roadmaps/angular/content/103-angular-cli/100-ng-build.md

@@ -4,5 +4,5 @@ The command can be used to build a project of type "application" or "library". W
 
 Visit the following resources to learn more:
 
-- [@official@Ng Build - Angular.io](https://angular.io/cli/build)
+- [@official@Angular CLI - ng build](https://angular.dev/cli/build)
 - [@video@Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0)

src/data/roadmaps/angular/content/103-angular-cli/101-ng-serve.md

@@ -4,5 +4,5 @@ ng serve — This command builds, deploy, serves and every time watches your cod
 
 Visit the following resources to learn more:
 
-- [@official@Ng serve - Angular.io](https://angular.io/cli/serve)
+- [@official@Angular CLI - ng serve](https://angular.dev/cli/serve)
 - [@video@Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U)

src/data/roadmaps/angular/content/103-angular-cli/102-ng-generate.md

@@ -4,5 +4,5 @@ ng generate is used to create the component in angular project. These are the tw
 
 Visit the following resources to learn more:
 
-- [@official@Ng generate - Angular.io](https://angular.io/cli/generate)
+- [@official@Angular CLI - ng generate](https://angular.dev/cli/generate)
 - [@video@Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4)

src/data/roadmaps/angular/content/103-angular-cli/103-ng-test.md

@@ -6,5 +6,5 @@ ng test is used to runs unit tests in angular project.
 
 Visit the following resources to learn more:
 
-- [@official@Ng test - Angular.io](https://angular.io/cli/test)
+- [@official@Angular CLI - ng test](https://angular.dev/cli/test)
 - [@video@Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA)

src/data/roadmaps/angular/content/103-angular-cli/104-ng-e2e.md

@@ -4,6 +4,6 @@ End-to-end testing (E2E) of Angular applications is performed using the Protract
 
 Visit the following resources to learn more:
 
-- [@official@Ng e2e - Angular.io](https://angular.io/cli/e2e)
+- [@official@Angular CLI - ng e2e](https://angular.dev/cli/e2e)
 - [@video@Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/103-angular-cli/105-ng-new.md

@@ -8,5 +8,5 @@ The default Angular project, All dependencies installed in node_modules folder ,
 
 Visit the following resources to learn more:
 
-- [@official@Ng New - Angular.io](https://angular.io/cli/new)
+- [@official@Angular CLI - ng new](https://angular.dev/cli/new)
 - [@video@ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ)

src/data/roadmaps/angular/content/103-angular-cli/106-schematics.md

@@ -4,5 +4,5 @@ A schematic is a template-based code generator that supports complex logic. It i
 
 Visit the following resources to learn more:
 
-- [@official@Angular Website](https://angular.io/guide/schematics)
+- [@official@Generating code using schematics](https://angular.dev/tools/cli/schematics)
 - [@article@Angular Blog](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944)

src/data/roadmaps/angular/content/103-angular-cli/index.md

@@ -6,6 +6,7 @@ The Angular CLI is a command-line interface tool that you use to initialize, dev
 
 Visit the following resources to learn more:
 
-- [@official@Angular CLI - Angular.io](https://angular.io/cli)
+- [@official@CLI Reference](https://angular.dev/cli)
+- [@official@The Angular CLI](https://angular.dev/tools/cli)
 - [@video@Angular CLI - setup](https://www.youtube.com/watch?v=mZnzX3J5XKI)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/104-templates/100-interpolation.md

@@ -4,5 +4,5 @@ Interpolation refers to embedding expressions into marked up text. By default, i
 
 Visit the following resources to learn more:
 
-- [@official@Angular Official Website](https://angular.io/guide/interpolation)
+- [@official@Angular Official Website](https://angular.dev/guide/templates/interpolation)
 - [@official@Displaying values with interpolation](https://angular.dev/guide/templates/interpolation)

src/data/roadmaps/angular/content/104-templates/102-template-statements.md

@@ -4,5 +4,5 @@ Template statements are methods or properties that you can use in your HTML to r
 
 Visit the following resources to learn more:
 
-- [@official@Angular Official Website](https://angular.io/guide/template-statements)
+- [@official@Angular Official Website](https://angular.dev/guide/templates/template-statements)
 - [@official@Understanding Template Statements](https://angular.dev/guide/templates/template-statements#)

src/data/roadmaps/angular/content/104-templates/103-binding-data-props-attrs-events.md

@@ -9,4 +9,4 @@ In an Angular template, a binding creates a live connection between view and the
 
 Visit the following resources to learn more:
 
-- [@official@Angular Official Website](https://angular.io/guide/binding-overview)
+- [@official@Angular Official Website](https://angular.dev/guide/templates/binding)

src/data/roadmaps/angular/content/104-templates/105-input-output.md

@@ -4,4 +4,5 @@
 
 Visit the following resources to learn more:
 
-- [@official@Angular Official Website](https://angular.io/guide/inputs-outputs)
+- [@official@Angular Official Website - inputs](https://angular.dev/guide/components/inputs)
+- [@official@Angular Official Website - outputs](https://angular.dev/guide/components/outputs)

src/data/roadmaps/angular/content/104-templates/index.md

@@ -4,4 +4,4 @@ A template is a form of HTML that tells Angular how to render the component.
 
 Visit the following resources to learn more:
 
-- [@official@Introduction to Components and Templates](https://angular.io/guide/architecture-components)
+- [@official@Anatomy of a component](https://angular.dev/guide/components)

src/data/roadmaps/angular/content/105-rendering-topics/100-builtin-directives.md

@@ -6,5 +6,5 @@ SKDirectives are classes that add additional behavior to elements in your Angula
 
 Visit the following resources to learn more:
 
-- [@official@Understanding BuiltIn Directives](https://angular.io/guide/built-in-directives)
+- [@official@Built-in directives](https://angular.dev/guide/directives/)
 - [@article@BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)

src/data/roadmaps/angular/content/105-rendering-topics/101-builtin-pipes.md

@@ -6,5 +6,5 @@ Use pipes to transform strings, currency amounts, dates, and other data for disp
 
 Visit the following resources to learn more:
 
-- [@official@Understanding BuiltIn Pipes](https://angular.io/guide/pipes)
+- [@official@Understanding Pipes](https://angular.dev/guide/pipes)
 - [@article@BuiltIn Pipes - examples](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)

src/data/roadmaps/angular/content/105-rendering-topics/102-change-detection.md

@@ -4,5 +4,6 @@ Change detection is the process through which Angular checks to see whether your
 
 Visit the following resources to learn more:
 
-- [@official@Understanding Change detection](https://angular.io/guide/change-detection)
+- [@official@Runtime performance optimization](https://angular.dev/best-practices/runtime-performance)
+- [@official@ChangeDetectionStrategy](https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy)
 - [@video@4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)

src/data/roadmaps/angular/content/106-forms/100-reactive-forms.md

@@ -4,7 +4,7 @@ Reactive Forms in angular are those which used to handle the inputs coming from
 
 Visit the following resources to learn more:
 
-- [@official@Reactive forms - Angular](https://angular.io/guide/reactive-forms)
+- [@official@Reactive forms - Angular](https://angular.dev/guide/forms/reactive-forms)
 - [@article@Angular Reactive Forms](https://www.javatpoint.com/angular-reactive-forms)
 - [@article@How To Use Reactive Forms in Angular](https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction)
 - [@video@Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w)

src/data/roadmaps/angular/content/106-forms/101-template-driven-forms.md

@@ -6,7 +6,7 @@ It uses two-way data-binding (ngModel) to create and handle the form components.
 
 Visit the following resources to learn more:
 
-- [@official@Building a template-driven form](https://angular.io/guide/forms)
+- [@official@Building a template-driven form](https://angular.dev/guide/forms/template-driven-forms)
 - [@article@Template-Driven Forms](https://codecraft.tv/courses/angular/forms/template-driven/)
 - [@video@Template driven form](https://www.youtube.com/watch?v=whr14XxB8-M)
 - [@video@Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)

src/data/roadmaps/angular/content/106-forms/index.md

@@ -6,7 +6,7 @@ Angular provides two approaches to handle user inputs trough forms: reactive and
 
 Visit the following resources to learn more:
 
-- [@official@Introduction to forms in Angular](https://angular.io/guide/forms-overview)
+- [@official@Forms in Angular](https://angular.dev/guide/forms)
 - [@article@Angular Forms](https://www.w3schools.com/angular/angular_forms.asp)
 - [@video@Angular Forms Tutorial](https://www.youtube.com/watch?v=-bGgjgx3fGs)
 - [@video@Building Forms in Angular Apps](https://www.youtube.com/watch?v=hAaoPOx_oIw)

src/data/roadmaps/angular/content/107-routing/101-router-outlets.md

@@ -6,4 +6,4 @@ Thanks to the router outlet, your app will have multiple views/pages and the app
 
 Visit the following resources to learn more:
 
-- [@official@Understanding Router Outlets](https://angular.io/api/router/RouterOutlet)
+- [@official@Understanding Router Outlets](https://angular.dev/api/router/RouterOutlet)

src/data/roadmaps/angular/content/107-routing/102-router-links.md

@@ -4,5 +4,5 @@ In Angular, routerLink when applied to an element in a template, makes that elem
 
 Visit the following resources to learn more:
 
-- [@official@Understanding Router Links](https://angular.io/api/router/RouterLink)
+- [@official@RouterLink](https://angular.dev/api/router/RouterLink)
 - [@article@Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl](https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl)

src/data/roadmaps/angular/content/107-routing/103-router-events.md

@@ -2,4 +2,4 @@
 
 The Angular Router raises events when it navigates from one route to another route. It raises several events such as `NavigationStart`, `NavigationEnd`, `NavigationCancel`, `NavigationError`, `ResolveStart`, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start (NavigationStart) and route change end (NavigationEnd).
 
-- [@official@Angular Official Website](https://angular.io/api/router/RouterEvent)
+- [@official@Angular Official Website](https://angular.dev/api/router/RouterEvent)

src/data/roadmaps/angular/content/107-routing/104-guards.md

@@ -6,10 +6,6 @@ Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `
 
 Visit the following resources to learn more:
 
-- [@official@Angular Official Website](https://angular.io/api/router)
-- [@official@Can Activate Guard](https://angular.io/api/router/CanActivate)
-- [@official@Can Activate Child](https://angular.io/api/router/CanActivateChild)
-- [@official@Can Deactivate](https://angular.io/api/router/CanDeactivate)
-- [@official@Angular Can Load](https://angular.io/api/router/CanLoad)
-- [@official@Can Match](https://angular.io/api/router/CanMatch)
-- [@official@Resolve](https://angular.io/api/router/Resolve)
+- [@official@Angular Official Website](https://angular.dev/guide/routing)
+- [@official@Preventing unauthorized access](https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access)
+- [@official@Resolve](https://angular.dev/api/router/Resolve)

src/data/roadmaps/angular/content/107-routing/105-lazy-loading.md

@@ -4,5 +4,5 @@ Lazy loading is a technique in Angular that allows you to load JavaScript compon
 
 Visit the following resources to learn more:
 
-- [@official@What is Lazy loading ? - Angular.io ](https://angular.io/guide/lazy-loading-ngmodules)
+- [@official@Lazy-loading feature modules](https://angular.dev/guide/ngmodules/lazy-loading)
 - [@video@Angular Tutorial - Lazy Loading](https://www.youtube.com/watch?v=JjIQq9lh-Bw)

src/data/roadmaps/angular/content/107-routing/index.md

@@ -4,5 +4,5 @@ Routing in Angular allows the users to create a single-page application with mul
 
 Visit the following resources to learn more:
 
-- [@official@Explanation of Routing ? - Angular.io ](https://angular.io/guide/router)
+- [@official@Angular Routing](https://angular.dev/guide/routing)
 - [@video@Angular Tutorial - Routing and Navigation](https://www.youtube.com/watch?v=Nehk4tBxD4o)

src/data/roadmaps/angular/content/108-services-remote-data/100-dependency-injection.md

@@ -4,6 +4,6 @@ Dependency Injection (DI) is a design pattern that creates the dependencies of a
 
 Visit the following resources to learn more:
 
-- [@official@What is Dependency Injection ? - angular.io ](https://angular.io/guide/dependency-injection)
+- [@official@Understanding dependency injection](https://angular.dev/guide/di/dependency-injection)
 - [@video@Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0)
 - [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh)

src/data/roadmaps/angular/content/108-services-remote-data/index.md

@@ -4,5 +4,5 @@ Components shouldn't fetch or save data directly and shouldn't knowingly present
 
 Visit the following resources to learn more:
 
-- [@official@Adding Services in Angular](https://angular.io/tutorial/toh-pt4)
-- [@official@Get Data from Server](https://angular.io/tutorial/toh-pt6)
+- [@official@Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service)
+- [@official@Understanding communicating with backend services using HTTP](https://angular.dev/guide/http)

src/data/roadmaps/angular/content/109-lifecycle-hooks.md

@@ -10,6 +10,6 @@ The following life cycle hooks of angular are :
 
 Visit the following resources to learn more:
 
-- [@official@What is Life Cycle Hooks? - Angular.io ](https://angular.io/guide/lifecycle-hooks)
+- [@official@Component Lifecycle](https://angular.dev/guide/components/lifecycle)
 - [@article@The life cycle hooks of angular - Blog ](https://blog.logrocket.com/angular-lifecycle-hooks/)
 - [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh)

src/data/roadmaps/angular/content/111-zones.md

@@ -1,3 +1,3 @@
 # Zones
 
-- [@official@Angular - NgZone](https://angular.io/guide/zone)
+- [@official@Angular - NgZone](https://angular.dev/api/core/NgZone)

src/data/roadmaps/angular/content/112-creating-a-custom-x/101-pipe.md

@@ -4,5 +4,5 @@ Pipes to transform strings, currency amounts, dates, and other data for display.
 
 Visit the following resources to learn more:
 
-- [@official@Create a custom pipe - angular.io](https://angular.io/guide/pipes-custom-data-trans)
+- [@official@Custom pipes for new transforms](https://angular.dev/guide/pipes/transform-data)
 - [@video@Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)

src/data/roadmaps/angular/content/112-creating-a-custom-x/102-library.md

@@ -4,4 +4,4 @@ Use the Angular CLI and the npm package manager to build and publish your librar
 
 Visit the following resources to learn more:
 
-- [@official@Angular Website](https://angular.io/guide/creating-libraries)
+- [@official@Angular Website](https://angular.dev/tools/libraries/creating-libraries)

src/data/roadmaps/angular/content/112-creating-a-custom-x/103-standalone-component.md

@@ -4,4 +4,4 @@ Standalone components provide a simplified way to build Angular applications. St
 
 Visit the following resources to learn more:
 
-- [@official@Angular Website](https://angular.io/guide/standalone-components)
+- [@official@Angular Website](https://angular.dev/guide/components/importing)

src/data/roadmaps/angular/content/113-angular-ssr/100-angular-universal.md

@@ -4,6 +4,6 @@ Angular Universal also known as server-side rendering is tool which allows serve
 
 Visit the following resources to learn more:
 
-- [@official@Angular Website](https://angular.io/guide/universal)
+- [@official@Angular Website](https://angular.dev/guide/ssr)
 - [@opensource@Github Repository](https://github.com/angular/universal)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/113-angular-ssr/index.md

@@ -4,6 +4,6 @@ A normal Angular application executes in the browser, rendering pages in the DOM
 
 Visit the following resources to learn more:
 
-- [@official@Angular Universal](https://angular.io/guide/universal)
+- [@official@Server-side rendering](https://angular.dev/guide/ssr)
 - [@article@Rendering on the Web](https://web.dev/rendering-on-the-web/)
 - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/115-testing-angular-apps/100-testing-pipes.md

@@ -4,6 +4,6 @@ An Angular Pipe is a special function that is called from a Component template.
 
 Visit the following resources to learn more:
 
-- [@official@Angular.io Website](https://angular.io/guide/testing-pipes)
+- [@official@Angular Website]https://angular.dev/guide/testing/pipes)
 - [@article@Testing-Angular.com](https://testing-angular.com/testing-pipes/)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/115-testing-angular-apps/101-testing-services.md

@@ -4,6 +4,6 @@ In an Angular application, Services are responsible for fetching, storing and pr
 
 Visit the following resources to learn more:
 
-- [@official@Angular.io Website](https://angular.io/guide/testing-services)
+- [@official@Angular Website](https://angular.dev/guide/testing/services)
 - [@article@Testing-Angular.com](https://testing-angular.com/testing-services/)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/115-testing-angular-apps/102-testing-component-bindings.md

@@ -4,5 +4,5 @@ Angular processes all data bindings once for each JavaScript event cycle, from t
 
 Visit the following resources to learn more:
 
-- [@official@Angular.io Website](https://angular.io/guide/architecture-components)
+- [@official@Angular Website](https://angular.dev/guide/components)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/115-testing-angular-apps/103-testing-directives.md

@@ -4,6 +4,6 @@ Directives are classes that add new behavior or modify the existing behavior to
 
 Visit the following resources to learn more:
 
-- [@official@Angular.io Website](https://angular.io/guide/testing-attribute-directives)
+- [@official@Angular Website](https://angular.dev/guide/testing/attribute-directives)
 - [@article@tesing-angular Website](https://testing-angular.com/testing-directives/)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/115-testing-angular-apps/104-testing-component-templates.md

@@ -4,5 +4,5 @@ With a component template , you can save and reuse component processes and prope
 
 Visit the following resources to learn more:
 
-- [@official@Angular.io Website](https://angular.io/guide/architecture-components)
+- [@official@Component testing scenarios](https://angular.dev/guide/testing/components-scenarios)
 - [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/api-design/api-design.json

@@ -1406,7 +1406,7 @@
         }
       },
       "zIndex": 999,
-      "width": 366,
+      "width": 370,
       "height": 69,
       "dragging": false,
       "positionAbsolute": {
@@ -1416,7 +1416,7 @@
       "selectable": true,
       "focusable": true,
       "style": {
-        "width": 366,
+        "width": 370,
         "height": 69
       },
       "resizing": false

src/data/roadmaps/api-design/content/api-documentation-tools@5R9yKfN1vItuv__HgCwP7.md

@@ -1,3 +1,9 @@
 # API Documentation Tools
 
-API Documentation Tools are instrumental in conveying the intricacies of API design to both technical developers and non-technical stakeholders. These tools help in creating comprehensive, easy-to-understand, and searchable documentation encompassing all the elements of an API such as its functions, classes, return types, arguments, and more. Thorough documentation is central in API design as it fosters seamless adoption, effective implementation, and efficient troubleshooting of APIs. Various tools exist including Swagger, DapperDox, and ReDoc, each with unique functionalities to suit different API documentation requirements.
+API Documentation Tools are instrumental in conveying the intricacies of API design to both technical developers and non-technical stakeholders. These tools help in creating comprehensive, easy-to-understand, and searchable documentation encompassing all the elements of an API such as its functions, classes, return types, arguments, and more. Thorough documentation is central in API design as it fosters seamless adoption, effective implementation, and efficient troubleshooting of APIs. Various tools exist including Swagger, DapperDox, and ReDoc, each with unique functionalities to suit different API documentation requirements.
+
+Visit the following resources to learn more:
+
+- [@website@Swagger's Official Website](https://swagger.io/)
+- [@website@DapperDox's Official Website](http://dapperdox.io/)
+- [@website@ReDoc Documentation](https://github.com/Redocly/redoc)

src/data/roadmaps/api-design/content/api-security@qIJ6dUppjAjOTA8eQbp0n.md

@@ -6,3 +6,4 @@ Have a look at the following resources to understand API security and vulnerabil
 
 - [@article@OWASP Project API Security](https://owasp.org/API-Security/editions/2023/en/0x00-toc/)
 - [@feed@Explore top posts about Security](https://app.daily.dev/tags/security?ref=roadmapsh)
+- [@article@How to Protect Data in Transit using HMAC and Diffie-Hellman in Node.js](https://www.freecodecamp.org/news/hmac-diffie-hellman-in-node/)

src/data/roadmaps/api-design/content/http-versions@ACALE93mL4gnX5ThRIdRp.md

@@ -1,3 +1,8 @@
 # HTTP Versions in API Design
 
-HTTP or Hypertext Transfer Protocol is pivotal in the world of API design. HTTP versions specify how data should be packaged and transported, as well as how web servers and browsers should respond to commands. Understanding different HTTP versions and their features is essential for API designers as it directly impacts how well an API can communicate with other software and systems. From HTTP/1.0, the initial version of HTTP to HTTP/2 and the latest version HTTP/3, each version brings in improvements in speed, data transmission capabilities, and security. Selecting an appropriate HTTP version is crucial for API efficiency and performance.
+HTTP or Hypertext Transfer Protocol is pivotal in the world of API design. HTTP versions specify how data should be packaged and transported, as well as how web servers and browsers should respond to commands. Understanding different HTTP versions and their features is essential for API designers as it directly impacts how well an API can communicate with other software and systems. From HTTP/1.0, the initial version of HTTP to HTTP/2 and the latest version HTTP/3, each version brings in improvements in speed, data transmission capabilities, and security. Selecting an appropriate HTTP version is crucial for API efficiency and performance.
+
+Visit the following resources to learn more:
+
+- [@article@Evolution of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
+- [@article@HTTP: 1.0 vs. 1.1 vs 2.0 vs. 3.0](https://www.baeldung.com/cs/http-versions)

src/data/roadmaps/api-design/content/http@2HdKzAIQi15pr3YHHrbPp.md

@@ -1,3 +1,11 @@
 # HTTP in API Design
 
-HTTP, or Hypertext Transfer Protocol, is a fundamental piece of any API design. It is the protocol used for transmitting hypermedia data on the web, such as HTML webpages or JSON from a web API. Understanding HTTP is crucial in API design as it provides the structure for how requests and responses should be constructed and handled. It dictates how endpoints are defined, how data should be transferred, and what status codes should be used to convey specific scenarios. A solid grounding in HTTP principles allows for more robust, efficient and secure API designs.
+HTTP, or Hypertext Transfer Protocol, is a fundamental piece of any API design. It is the protocol used for transmitting hypermedia data on the web, such as HTML webpages or JSON from a web API. Understanding HTTP is crucial in API design as it provides the structure for how requests and responses should be constructed and handled. It dictates how endpoints are defined, how data should be transferred, and what status codes should be used to convey specific scenarios. A solid grounding in HTTP principles allows for more robust, efficient and secure API designs.
+
+Visit the following resources to learn more:
+
+- [@article@Everything you need to know about HTTP](https://cs.fyi/guide/http-in-depth)
+- [@article@What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/)
+- [@article@An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
+- [@article@HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/)
+- [@video@HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0)

src/data/roadmaps/api-design/content/what-are-apis@r8M3quACGO2piu0u_R4hO.md

@@ -1,3 +1,8 @@
 # What are APIs
 
-APIs, or Application Programming Interfaces, provide a manner in which software applications communicate with each other. They abstract the complexity of applications to allow developers to use only the essentials of the software they are working with. They define the methods and data formats an application should use in order to perform tasks, like sending, retrieving, or modifying data. Understanding APIs is integral to mastering modern software development, primarily because they allow applications to exchange data and functionality with ease, thus enabling integration and convergence of technological services. Therefore, a solid understanding of what APIs are forms the basic cornerstone of API design.
+APIs, or Application Programming Interfaces, provide a manner in which software applications communicate with each other. They abstract the complexity of applications to allow developers to use only the essentials of the software they are working with. They define the methods and data formats an application should use in order to perform tasks, like sending, retrieving, or modifying data. Understanding APIs is integral to mastering modern software development, primarily because they allow applications to exchange data and functionality with ease, thus enabling integration and convergence of technological services. Therefore, a solid understanding of what APIs are forms the basic cornerstone of API design.
+
+Visit the following resources to learn more:
+
+- [@article@What is an API?](https://aws.amazon.com/what-is/api/)
+- [@video@What is an API?](https://www.youtube.com/watch?v=s7wmiS2mSXY)

src/data/roadmaps/aws/content/100-introduction/101-iaas-paas-saas.md

@@ -1,3 +1,7 @@
 # IaaS vs PaaS vs SaaS
 
-"IaaS, PaaS, and SaaS are three types of cloud service models. **IaaS** or Infrastructure as a Service provides users with a resource-based service via virtualization technology, offering computing infrastructure, physical or (more often) virtual machines and other resources. **PaaS** or Platform as a Service provides runtime environments for developing, testing, and managing applications, it is utilized for software development and offers a platform to developers to build applications and services over the internet. **SaaS** or Software as a Service provides on-demand software accessed via the internet, it delivers a complete software solution which you purchase on a pay-as-you-go basis from a cloud service provider."
+IaaS, PaaS, and SaaS are three types of cloud service models. **IaaS** or Infrastructure as a Service provides users with a resource-based service via virtualization technology, offering computing infrastructure, physical or (more often) virtual machines and other resources. **PaaS** or Platform as a Service provides runtime environments for developing, testing, and managing applications, it is utilized for software development and offers a platform to developers to build applications and services over the internet. **SaaS** or Software as a Service provides on-demand software accessed via the internet, it delivers a complete software solution that you purchase on a pay-as-you-go basis from a cloud service provider.
+
+Learn more from the following resources:
+
+- [@video@IaaS vs PaaS vs SaaS cloud service models](https://youtu.be/9CVBohl6w0Q?si=cEDnXpd1sGkpf0K2)

src/data/roadmaps/backend/content/javascript@8-lO-v6jCYYoklEJXULxN.md

@@ -12,6 +12,7 @@ Visit the following resources to learn more:
 - [@article@Eloquent Javascript - Book](https://eloquentjavascript.net/)
 - [@opensource@You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS)
 - [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)
+- [@roadmap@Visit Dedicated Node.js Roadmap](/nodejs)
 - [@video@Node.js Crash Course](https://www.youtube.com/watch?v=fBNz5xF-Kx4)
 - [@video@Node.js Tutorial for Beginners](https://www.youtube.com/watch?v=TlB_eWDSMt4)
 - [@official@Official JavaScript Documentation](https://www.javascript.com/)

src/data/roadmaps/backend/content/server-security@TZ0BWOENPv6pQm8qYB8Ow.md

@@ -11,3 +11,7 @@ Learn about the security of your server and how to secure it. Here are some of t
 - Enable two-factor authentication: Two-factor authentication adds an extra layer of security to your accounts by requiring a second form of authentication, such as a code sent to your phone, in addition to your password.
 
 Also learn about OpenSSL and creating your own PKI as well as managing certs, renewals, and mutual client auth with x509 certs
+
+Learn more from the following resources:
+
+- [@article@How to Defend Against Server-Side Request Forgery](https://www.freecodecamp.org/news/defending-against-ssrf-attacks/)

src/data/roadmaps/blockchain/content/109-dapps/108-client-libraries/index.md

@@ -1,3 +1,7 @@
 # Client libraries
 
 You don't need to write every smart contract in your project from scratch. There are many open source smart contract libraries available that provide reusable building blocks for your project that can save you from having to reinvent the wheel.
+
+Visit the following resources to learn more:
+
+- [@official@Viem library with great TypeScript support](https://viem.sh)

src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md

@@ -4,9 +4,10 @@ C++ is a powerful general-purpose programming language. It can be used to develo
 
 Visit the following resources to learn more:
 
-- [@article@Learn Cpp](https://learncpp.com/)
-- [@article@C++ Reference](https://en.cppreference.com/)
+- [@article@Learn C++](https://learncpp.com/)
+- [@article@Cpp Reference](https://en.cppreference.com/)
+- [@article@CPlusPlus](https://cplusplus.com/)
 - [@article@C++ TutorialsPoint](https://www.tutorialspoint.com/cplusplus/index.htm)
 - [@article@W3Schools C++](https://www.w3schools.com/cpp/default.asp)
 - [@roadmap.sh@C++ Roadmap](https://roadmap.sh/cpp)
-- [@feed@Explore top posts about C Programming](https://app.daily.dev/tags/c?ref=roadmapsh)
+- [@feed@Explore top posts about C++ Programming](https://app.daily.dev/tags/c++?ref=roadmapsh)

src/data/roadmaps/computer-science/content/101-pick-a-language/105-c-sharp.md

@@ -8,4 +8,4 @@ Visit the following resources to learn more:
 - [@article@C# on W3 schools](https://www.w3schools.com/cs/index.php)
 - [@article@Introduction to C#](https://docs.microsoft.com/en-us/shows/CSharp-101/?WT.mc_id=Educationalcsharp-c9-scottha)
 - [@video@C# tutorials](https://www.youtube.com/watch?v=gfkTfcpWqAY\&list=PLTjRvDozrdlz3_FPXwb6lX_HoGXa09Yef)
-- [@feed@Explore top posts about C Programming](https://app.daily.dev/tags/c?ref=roadmapsh)
+- [@feed@Explore top posts about C# Programming](https://app.daily.dev/tags/csharp?ref=roadmapsh)

src/data/roadmaps/computer-science/content/102-data-structures/100-array.md

@@ -6,6 +6,8 @@ Visit the following resources to learn more:
 
 - [@video@Array Data Structure | Illustrated Data Structures](https://www.youtube.com/watch?v=QJNwK2uJyGs)
 - [@course@Array Data Structure - Coursera](https://www.coursera.org/lecture/data-structures/arrays-OsBSF)
-- [@article@UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)](https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE)
 - [@course@Dynamic Arrays - Coursera](https://www.coursera.org/lecture/data-structures/dynamic-arrays-EwbnV)
+- [@article@UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)](https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE)
+- [@video@Dynamic and Static Arrays](https://www.youtube.com/watch?v=PEnFFiQe1pM&list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu&index=6)
+- [@video@Dynamic Array Code](https://www.youtube.com/watch?v=tvw4v7FEF1w&list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu&index=5)
 - [@video@Jagged Arrays](https://www.youtube.com/watch?v=1jtrQqYpt7g)

src/data/roadmaps/computer-science/content/102-data-structures/index.md

@@ -6,5 +6,7 @@ Visit the following resources to learn more:
 
 - [@article@What are Data Structures?](https://www.geeksforgeeks.org/data-structures)
 - [@article@ Data Structures and Algorithms](https://www.javatpoint.com/data-structure-tutorial)
+- [@course@ Data Structures and Algorithms By Google](https://techdevguide.withgoogle.com/paths/data-structures-and-algorithms/)
 - [@video@Data Structures Illustrated](https://www.youtube.com/watch?v=9rhT3P1MDHk\&list=PLkZYeFmDuaN2-KUIv-mvbjfKszIGJ4FaY)
+- [@video@Data Structures playlist](https://youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu&si=_EEf7x58G6lUcMGG)
 - [@feed@Explore top posts about Data Structures](https://app.daily.dev/tags/data-structures?ref=roadmapsh)

src/data/roadmaps/cpp/content/100-introduction/100-what-is-cpp.md

@@ -45,6 +45,8 @@ int main() {
 
 In the above program, we define a simple function `add` and a class `Calculator` with a member function `multiply`. The `main` function demonstrates how to use these to perform basic arithmetic.
 
+Learn more from the following resources:
+
 - [@video@C++ Tutorial for Beginners - Full Course](https://youtu.be/vLnPwxZdW4Y)
 - [@article@w3schools C++ tutorial](https://www.w3schools.com/cpp/)
 - [@article@Learn C++](https://www.learncpp.com/)

src/data/roadmaps/cpp/content/100-introduction/index.md

@@ -131,5 +131,7 @@ int main() {
 
 This basic introduction to C++ should provide you with a good foundation for further learning. Explore more topics such as classes, objects, inheritance, polymorphism, templates, and the Standard Template Library (STL) to deepen your understanding of C++ and start writing more advanced programs.
 
+Learn more from the following resources:
+
 - [@article@LearnC++](https://www.learncpp.com/)
 - [@video@C++ Full Course by freeCodeCamp](https://youtu.be/vLnPwxZdW4Y)

src/data/roadmaps/cpp/content/101-setting-up/100-installing.md

@@ -2,9 +2,9 @@
 Before you can start programming in C++, you will need to have a compiler installed on your system. A compiler is a program that converts the C++ code you write into an executable file that your computer can run. There are several popular C++ compilers to choose from, depending on your operating system and preference.
 
 ### Windows
-For Windows, one popular option is to install the [Microsoft Visual Studio IDE](https://visualstudio.microsoft.com/vs/), which includes the Microsoft Visual C++ compiler.
+For Windows, one popular option is to install the [Microsoft Visual Studio IDE](https://visualstudio.microsoft.com/vs/), which includes the Microsoft Visual C++ compiler (MSVC).
 
-Alternatively, you can also install the [MinGW-w64](https://mingw-w64.org/) compiler, which is a Windows port of the GNU Compiler Collection (GCC). To install MinGW-w64, follow these steps:
+Alternatively, you can also install the [MinGW-w64](https://mingw-w64.org/) compiler system, which is a Windows port of the GNU Compiler Collection (GCC). To install MinGW-w64, follow these steps:
 
 - Download the installer from [here](https://sourceforge.net/projects/mingw-w64/files/).
 - Run the installer and select your desired architecture, version, and install location.

src/data/roadmaps/cpp/content/101-setting-up/101-code-editors.md

@@ -1,8 +1,10 @@
 # Code Editors
 
-Code editors are programs specifically designed for editing, managing and writing source code. They offer a wide range of features that make the development process easier and faster. Here's a brief introduction to some of the most popular code editors for C++:
+Code editors and IDEs are programs specifically designed for editing, managing and writing source code. They offer a wide range of features that make the development process easier and faster. Here's a brief introduction to some of the most popular code editors and IDEs for C++:
 
-- **Visual Studio Code (VSCode)**: Visual Studio Code is a popular, free, open-source, and lightweight code editor developed by Microsoft. It has built-in support for C++, along with an extensive library of extensions and plugins.
+- **Visual Studio**: Visual Studio is an Integrated Development Environment (IDE) for Windows, developed by Microsoft. It includes its own integrated compiler known as Microsoft Visual C++ (MSVC).
+
+- **Visual Studio Code (VSCode)**: Visual Studio Code is a popular, free, open-source, and lightweight code editor developed by Microsoft. It offers an extensive library of extensions that enhance functionality for C++ development.
 
 - **Sublime Text**: Sublime Text is a cross-platform text editor that is quite popular among developers due to its speed and minimalist design. It supports C++ with the help of plugins and has a variety of themes and packages available for customization.
 
@@ -12,5 +14,7 @@ These are just a few examples, and there are many other code editors available,
 
 To work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided in the editor's documentation to set up C++ correctly.
 
+Learn more from the following resources:
+
 - [@article@Using C++ on Linux in VSCode](https://code.visualstudio.com/docs/cpp/config-linux)
 - [@feed@Explore top posts about General Programming](https://app.daily.dev/tags/general-programming?ref=roadmapsh)

src/data/roadmaps/cpp/content/101-setting-up/index.md

@@ -6,9 +6,8 @@ Setting up C++ requires a few steps, including installing a compiler, configurin
 
 A compiler is required to convert C++ code into machine language. Some popular C++ compilers include:
 
-- GCC (GNU Compiler Collection) for Linux and macOS
-- MinGW (Minimalist GNU for Windows) for Windows
-- Microsoft Visual C++ for Windows
+- GCC (GNU Compiler Collection) for Linux and macOS, but can also be used on Windows through MinGW
+- MSVC (Microsoft Visual C++) for Windows
 
 To install a compiler, simply follow the instructions provided by the respective websites.
 
@@ -54,4 +53,4 @@ Setting up C++ involves:
 - Configuring an IDE (e.g. Visual Studio, Eclipse, or Code::Blocks)
 - Creating a new C++ project and writing code
 
-By following these steps, you'll be ready to start developing C++ applications!
+By following these steps, you'll be ready to start developing C++ applications!

src/data/roadmaps/cpp/content/102-basic-operations/101-logical-operators.md

@@ -13,7 +13,7 @@ C++ provides the following logical operators:
    ```cpp
    int a = 5, b = 10;
    if (a > 0 && b > 0) {
-       cout << "Both values are positive." << endl;
+       std::cout << "Both values are positive." << std::endl;
    }
    ```
 - **OR Operator (||)**
@@ -25,7 +25,7 @@ C++ provides the following logical operators:
    ```cpp
    int a = 5, b = -10;
    if (a > 0 || b > 0) {
-       cout << "At least one value is positive." << endl;
+       std::cout << "At least one value is positive." << std::endl;
    }
    ```
 
@@ -38,7 +38,7 @@ C++ provides the following logical operators:
    ```cpp
    int a = 5;
    if (!(a < 0)) {
-       cout << "The value is not negative." << endl;
+       std::cout << "The value is not negative." << std::endl;
    }
    ```
 
@@ -48,8 +48,8 @@ Using these operators, you can create more complex logical expressions, for exam
 int a = 5, b = -10, c = 15;
 
 if (a > 0 && (b > 0 || c > 0)) {
-    cout << "At least two values are positive." << endl;
+    std::cout << "At least two values are positive." << std::endl;
 }
 ```
 
-This covers the essential information about logical operators in C++.
+This covers the essential information about logical operators in C++.

src/data/roadmaps/cpp/content/102-basic-operations/102-loops.md

@@ -18,11 +18,10 @@ For example:
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 int main() {
     for (int i = 0; i < 5; i++) {
-        cout << "Iteration: " << i << endl;
+        std::cout << "Iteration: " << i << std::endl;
     }
     return 0;
 }
@@ -44,12 +43,11 @@ For example:
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 int main() {
     int i = 0;
     while (i < 5) {
-        cout << "Iteration: " << i << endl;
+        std::cout << "Iteration: " << i << std::endl;
         i++;
     }
     return 0;
@@ -72,12 +70,11 @@ For example:
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 int main() {
     int i = 0;
     do {
-        cout << "Iteration: " << i << endl;
+        std::cout << "Iteration: " << i << std::endl;
         i++;
     } while (i < 5);
     return 0;
@@ -86,4 +83,6 @@ int main() {
 
 In summary, loops are an integral part of C++ programming that allow you to execute a block of code multiple times. The three types of loops in C++ are `for`, `while`, and `do-while`. Each type has its own specific use case and can be chosen depending on the desired behavior.
 
+Learn more from the following resources:
+
 - [@article@C++ For Loop](https://www.w3schools.com/cpp/cpp_for_loop.asp)

src/data/roadmaps/cpp/content/102-basic-operations/103-bitwise.md

@@ -65,5 +65,8 @@ int result = 5 >> 1; // result will be 2 (0000 0101 >> 1 = 0000 0010)
 ```
 
 These were the most common bitwise operations in C++. Remember to use them carefully and understand their behavior when applied to specific data types and scenarios.
+
+Learn more from the following resources:
+
 - [@video@Intro to Binary and Bitwise Operators in C++](https://youtu.be/KXwRt7og0gI)
 - [@video@Bitwise AND (&), OR (|), XOR (^) and NOT (~) in C++](https://youtu.be/HoQhw6_1NAA)

src/data/roadmaps/cpp/content/103-functions/100-lambda.md

@@ -61,6 +61,8 @@ updateDays(30); // expiresInDays = 30
 
 Note that, when using the capture by reference, any change made to the captured variable _inside_ the lambda function will affect its value in the surrounding scope.
 
+Learn more from the following resources:
+
 - [@video@Lambdas in C++](https://youtu.be/MH8mLFqj-n8)
 - [@article@Lambda Expressions](https://en.cppreference.com/w/cpp/language/lambda)
 - [@feed@Explore top posts about AWS Lambda](https://app.daily.dev/tags/aws-lambda?ref=roadmapsh)

src/data/roadmaps/cpp/content/103-functions/index.md

@@ -4,7 +4,7 @@ A **function** is a group of statements that perform a specific task, organized
 
 There are mainly two types of functions in C++:
 
-- **Standard library functions**: Pre-defined functions available in the C++ standard library, such as `printf()`, `scanf()`, `sqrt()`, and many more. These functions are part of the standard library, so you need to include the appropriate header file to use them.
+- **Standard library functions**: Pre-defined functions available in the C++ standard library, such as `sort()`, `strlen()`, `sqrt()`, and many more. These functions are part of the standard library, so you need to include the appropriate header file to use them.
 
 - **User-defined functions**: Functions created by the programmer to perform a specific task. To create a user-defined function, you need to define the function and call it in your code.
 
@@ -20,13 +20,12 @@ return_type function_name(parameter list) {
 
 - `return_type`: Data type of the output produced by the function. It can be `void`, indicating that the function doesn't return any value.
 - `function_name`: Name given to the function, following C++ naming conventions.
-- `parameter list`: List of input parameters/arguments that are needed to perform the task. It is optional, and when no parameters are needed, you can leave it blank or use the keyword `void`.
+- `parameter list`: List of input parameters/arguments that are needed to perform the task. It is optional, you can leave it blank when no parameters are needed.
 
 ## Example
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 // Function to add two numbers
 int addNumbers(int a, int b) {
@@ -37,7 +36,7 @@ int addNumbers(int a, int b) {
 int main() {
     int num1 = 5, num2 = 10;
     int result = addNumbers(num1, num2); // Calling the function
-    cout << "The sum is: " << result << endl;
+    std::cout << "The sum is: " << result << std::endl;
     return 0;
 }
 ```
@@ -52,7 +51,6 @@ A function prototype is a declaration of the function without its body, and it i
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 // Function prototype
 int multiplyNumbers(int x, int y);
@@ -60,7 +58,7 @@ int multiplyNumbers(int x, int y);
 int main() {
     int num1 = 3, num2 = 7;
     int result = multiplyNumbers(num1, num2); // Calling the function
-    cout << "The product is: " << result << endl;
+    std::cout << "The product is: " << result << std::endl;
     return 0;
 }
 
@@ -73,4 +71,6 @@ int multiplyNumbers(int x, int y) {
 
 In this example, we use a function prototype for `multiplyNumbers()` before defining it. This way, we can call the function from the `main()` function even though it hasn't been defined yet in the code.
 
-- [@article@introduction to functions in c++](https://www.learncpp.com/cpp-tutorial/introduction-to-functions/)
+Learn more from the following resources:
+
+- [@article@introduction to functions in c++](https://www.learncpp.com/cpp-tutorial/introduction-to-functions/)

src/data/roadmaps/cpp/content/104-data-types/100-static-typing.md

@@ -26,5 +26,7 @@ int main() {
 
 In the code above, the variable `num` is statically typed as an `int`, `pi` is statically typed as a `double`, and `c` is statically typed as a `char`. If you attempt to assign the value of `pi` to `num`, the value `3.14159` will be converted to the integer `3` and assigned to `num`. Similarly, when the value of `num` is assigned to `c`, the compiler will convert the value `65` to its corresponding [ASCII](https://www.ascii-code.com) code, which is `A`.
 
+Learn more from the following resources:
+
 - [@article@Type-Coversion](https://www.programiz.com/cpp-programming/type-conversion)
 - [@article@Static Vs Dynamic](https://www.techtarget.com/searchapparchitecture/tip/Static-vs-dynamic-typing-The-details-and-differences)

src/data/roadmaps/cpp/content/104-data-types/index.md

@@ -90,7 +90,7 @@ Structures are used to store different data types under a single variable and ac
 Example:
 ```cpp
 struct Person {
-    string name;
+    std::string name;
     int age;
     float height;
 };
@@ -105,11 +105,11 @@ Example:
 ```cpp
 class Person {
 public:
-    string name;
+    std::string name;
     int age;
 
     void printInfo() {
-        cout << "Name: " << name << ", Age: " << age << endl;
+        std::cout << "Name: " << name << ", Age: " << age << std::endl;
     };
 };
 

src/data/roadmaps/cpp/content/105-pointers-and-references/100-references.md

@@ -14,10 +14,10 @@ You can use the reference just like you'd use the original variable. When you ch
 
 ```cpp
 var = 20;            // Sets the value of var to 20
-cout << ref << endl; // Outputs 20
+std::cout << ref << std::endl; // Outputs 20
 
 ref = 30;            // Sets the value of ref to 30
-cout << var << endl; // Outputs 30
+std::cout << var << std::endl; // Outputs 30
 ```
 
 ## Function Parameters
@@ -31,9 +31,9 @@ void swap(int& a, int& b) {
 
 int main() {
    int x = 5, y = 10;
-   cout << "Before Swap: x = " << x << " y = " << y << endl; // Outputs 5 10
+   std::cout << "Before Swap: x = " << x << " y = " << y << std::endl; // Outputs 5 10
    
    swap(x, y);
-   cout << "After Swap: x = " << x << " y = " << y << endl;  // Outputs 10 5
+   std::cout << "After Swap: x = " << x << " y = " << y << std::endl;  // Outputs 10 5
 }
-```
+```

src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md

@@ -47,4 +47,6 @@ int main() {
 
 In this example, we create a `shared_ptr` named `shared` that manages a `MyClass` object. By assigning it to a `weak_ptr` named `weak`, we store a non-owning reference to the object. Inside the inner scope, we create a new `shared_ptr` named `sharedFromWeak` using `weak.lock()` to safely use the object. After the inner scope, the `MyClass` object is destroyed since `shared` goes out of scope, and any further attempt to create a `shared_ptr` from `weak` will fail as the object is already destroyed.
 
+Learn more from the following resources:
+
 - [@article@CPP Reference](https://en.cppreference.com/w/cpp/memory/weak_ptr)

src/data/roadmaps/cpp/content/107-structures-and-classes/101-oop/100-static-polymorphism/overloading-functions.md

@@ -10,18 +10,17 @@ Here's an example illustrating function overloading:
 
 ```cpp
 #include <iostream>
-using namespace std;
 
 void print(int num) {
-    cout << "Printing int: " << num << endl;
+    std::cout << "Printing int: " << num << std::endl;
 }
 
 void print(double num) {
-    cout << "Printing double: " << num << endl;
+    std::cout << "Printing double: " << num << std::endl;
 }
 
 void print(char const *str) {
-    cout << "Printing string: " << str << endl;
+    std::cout << "Printing string: " << str << std::endl;
 }
 
 int main() {
@@ -43,4 +42,4 @@ Printing double: 3.14
 Printing string: Hello, world!
 ```
 
-Keep in mind that the number of parameters and their types should be different for two functions to be overloaded.
+Keep in mind that the number of parameters and their types should be different for two functions to be overloaded.

src/data/roadmaps/cpp/content/108-exception-handling/100-exceptions/index.md

@@ -39,12 +39,12 @@ try {
     throw "Division by zero not allowed!";
   } else {
     int result = num1 / num2;
-    cout << "Result: " << result << endl;
+    std::cout << "Result: " << result << std::endl;
   }
 }
 catch (const char* e) {
-  cout << "Error: " << e << endl;
+  std::cout << "Error: " << e << std::endl;
 }
 ```
 
-In summary, exception handling in C++ is a technique to handle runtime errors while maintaining the normal flow of the program. The `try`, `catch`, and `throw` keywords are used together to create the structure to deal with exceptions as they occur.
+In summary, exception handling in C++ is a technique to handle runtime errors while maintaining the normal flow of the program. The `try`, `catch`, and `throw` keywords are used together to create the structure to deal with exceptions as they occur.

src/data/roadmaps/cpp/content/109-language-concepts/101-type-casting/index.md

@@ -43,4 +43,6 @@ Type casting is the process of converting a value from one data type to another.
 
 Remember to use the right type of casting based on the specific situation and follow good programming practices in order to ensure a safe and efficient code.
 
+Learn more from the following resources:
+
 - [@video@Casting in C++](https://youtu.be/pWZS1MtxI-A)

src/data/roadmaps/cpp/content/109-language-concepts/index.md

@@ -25,14 +25,14 @@ Example:
 ```cpp
 // If-else statement
 if (age > 18) {
-    cout << "You are eligible to vote.";
+    std::cout << "You are eligible to vote.";
 } else {
-    cout << "You are not eligible to vote.";
+    std::cout << "You are not eligible to vote.";
 }
 
 // For loop
 for (int i = 0; i < 5; i++) {
-    cout << "Hello World!";
+    std::cout << "Hello World!";
 }
 ```
 
@@ -47,7 +47,7 @@ int add(int a, int b) {
 
 int main() {
     int sum = add(10, 20);
-    cout << "The sum is: " << sum;
+    std::cout << "The sum is: " << sum;
     return 0;
 }
 ```
@@ -61,7 +61,7 @@ Example:
 int marks[] = {90, 80, 95, 85};
 
 // Vector
-vector<int> scores = {10, 20, 30, 40};
+std::vector<int> scores = {10, 20, 30, 40};
 ```
 
 ## Pointers
@@ -80,17 +80,17 @@ Example:
 ```cpp
 // Structure
 struct Student {
-    string name;
+    std::string name;
     int age;
 };
 
 // Class
 class Employee {
 public:
-    string name;
+    std::string name;
     int age;
     void displayInfo() {
-        cout << "Name: " << name << "\nAge: " << age;
+        std::cout << "Name: " << name << "\nAge: " << age;
     }
 };
 ```
@@ -103,14 +103,14 @@ Example:
 class Base {
 public:
     void display() {
-        cout << "This is the base class.";
+        std::cout << "This is the base class.";
     }
 };
 
 class Derived : public Base {
 public:
     void display() {
-        cout << "This is the derived class.";
+        std::cout << "This is the derived class.";
     }
 };
 ```
@@ -124,8 +124,8 @@ try {
     // Code that might throw an exception
     int result = a / b;
 } catch (const exception &e) {
-    cout << "Caught an exception: " << e.what();
+    std::cout << "Caught an exception: " << e.what();
 }
 ```
 
-These are some of the key language concepts in C++, which will help you to understand the language better and develop efficient and maintainable applications.
+These are some of the key language concepts in C++, which will help you to understand the language better and develop efficient and maintainable applications.

src/data/roadmaps/cpp/content/114-debuggers/100-debugger-messages.md

@@ -45,14 +45,13 @@ Example using GDB:
 // test.cpp
 
 #include <iostream>
-using namespace std;
 
 int main() {
     int num1 = 10;
     int num2 = 0;
     int result = num1 / num2;
 
-    cout << "Result: " << result << endl;
+    std::cout << "Result: " << result << std::endl;
 
     return 0;
 }
@@ -72,4 +71,4 @@ Program received signal SIGFPE, Arithmetic exception.
 7       int result = num1 / num2;
 ```
 
-Now you can make appropriate changes to fix the issue in your C++ code.
+Now you can make appropriate changes to fix the issue in your C++ code.

src/data/roadmaps/cpp/content/libraries/102-poco.md

@@ -28,7 +28,6 @@ Here's an example demonstrating an HTTP client using the Poco library:
 
 using namespace Poco::Net;
 using namespace Poco;
-using namespace std;
 
 int main()
 {
@@ -45,22 +44,24 @@ int main()
 
     // Process the response
     HTTPResponse response;
-    istream& responseStream = session.receiveResponse(response);
+    std::istream& responseStream = session.receiveResponse(response);
     if (response.getStatus() == HTTPResponse::HTTP_OK)
     {
       // Successful
+      std::string responseBody;
       StreamCopier::copyToString(responseStream, responseBody);
-      cout << "Response: " << responseBody << endl;
+
+      std::cout << "Response: " << responseBody << std::endl;
     }
     else
     {
       // Error
-      cout << "Error: " << response.getStatus() << " " << response.getReason() << endl;
+      std::cout << "Error: " << response.getStatus() << " " << response.getReason() << std::endl;
     }
   }
   catch(const Exception& e)
   {
-    cerr << "Error: " << e.displayText() << endl;
+    std::cerr << "Error: " << e.displayText() << std::endl;
     return -1;
   }
 
@@ -70,4 +71,6 @@ int main()
 
 In the above example, Poco is used to send an HTTP GET request and process the response. It manages tasks like connecting to the server, handling exceptions, and managing HTTP headers.
 
+Learn more from the following resources:
+
 - [@article@Official Docs for Poco Library](https://docs.pocoproject.org/)

src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/100-cryptography/index.md

@@ -33,4 +33,5 @@ Cryptanalysis is the process of attempting to break cryptographic systems, often
 In conclusion, cryptography is a fundamental aspect of cyber security, offering a layer of protection for sensitive data in digital networks. To effectively implement cryptography in your organization, you should be familiar with the various types of cryptography, cryptographic protocols, and key management best practices, and understand the potential threats posed by cryptanalysis.
 
 - [@article@Cryptography for Dummies (TryHackMe)](https://tryhackme.com/room/cryptographyfordummies)
+- [@article@How to Protect Data in Transit using HMAC and Diffie-Hellman in Node.js](https://www.freecodecamp.org/news/hmac-diffie-hellman-in-node/)
 - [@feed@Explore top posts about Cryptography](https://app.daily.dev/tags/cryptography?ref=roadmapsh)

src/data/roadmaps/data-analyst/content/101-excel/100-basic-functions/index.md

@@ -1,3 +0,0 @@
-# Understanding Basic Functions 
-
-As a Data Analyst, Excel is an extremely powerful tool that you will interact with on a daily basis. From organizing data into spreadsheets, performing calculations with complex formulas, to creating graphs and visual aids in presenting the data, the basic functions of Excel are crucial in your role. Excel’s plethora of complex and simple functions make it a unique, versatile, and accessible tool for data analysis. Understanding these basic functions not only elevates the expertise in handling and interpreting data but also increases efficiency and productivity in your line of work. Whether you're calculating, extracting or merging data, Excel’s basic functions can make these tasks more straightforward ensuring the necessary accuracy of the data insights you provide.