fix: add signup form

* Getting Started - Frontend Type Fix

* Remove package-lock.json from .gitignore

* Update .gitignore

* Delete package-lock.json

---------

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

.gitignore

@@ -30,4 +30,4 @@ tests-examples
 *.csv
 
 /editor/*
-!/editor/readonly-editor.tsx
+!/editor/readonly-editor.tsx

package.json

@@ -22,38 +22,38 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.8",
-    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/tailwind": "^5.0.4",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/sitemap": "^3.0.5",
+    "@astrojs/tailwind": "^5.1.0",
     "@fingerprintjs/fingerprintjs": "^4.2.1",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.45",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "astro": "^4.0.7",
-    "astro-compress": "^2.2.3",
-    "clsx": "^2.0.0",
+    "astro": "^4.2.1",
+    "astro-compress": "^2.2.8",
+    "clsx": "^2.1.0",
     "dracula-prism": "^2.1.13",
-    "jose": "^5.1.3",
+    "jose": "^5.2.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.300.0",
     "nanoid": "^5.0.4",
     "nanostores": "^0.9.5",
-    "node-html-parser": "^6.1.11",
+    "node-html-parser": "^6.1.12",
     "npm-check-updates": "^16.14.12",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
-    "reactflow": "^11.10.1",
+    "reactflow": "^11.10.2",
     "rehype-external-links": "^3.0.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.4.0",
-    "zustand": "^4.4.7"
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "^1.41.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/js-cookie": "^3.0.6",
     "@types/prismjs": "^1.26.3",
@@ -61,9 +61,9 @@
     "gh-pages": "^6.1.1",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.0.0",
-    "openai": "^4.24.1",
-    "prettier": "^3.1.1",
-    "prettier-plugin-astro": "^0.12.2",
-    "prettier-plugin-tailwindcss": "^0.5.9"
+    "openai": "^4.25.0",
+    "prettier": "^3.2.4",
+    "prettier-plugin-astro": "^0.12.3",
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }

src/components/AppChecklist.tsx

@@ -0,0 +1,15 @@
+import { PartyPopper } from 'lucide-react';
+
+export function AppChecklist() {
+  return (
+    <div className="fixed bottom-6 right-3">
+      <a
+        href="/get-started"
+        className="flex items-center gap-2 rounded-full border border-slate-900 bg-white py-2 pl-3 pr-4 text-sm font-medium hover:bg-zinc-200"
+      >
+        <PartyPopper className="relative -top-[2px] h-[20px] w-[20px] text-purple-600" />
+        Welcome! Start here
+      </a>
+    </div>
+  );
+}

src/components/AuthenticationFlow/AuthenticationForm.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { GitHubButton } from './GitHubButton';
+import { GoogleButton } from './GoogleButton';
+import { LinkedInButton } from './LinkedInButton';
+import { EmailLoginForm } from './EmailLoginForm';
+import { EmailSignupForm } from './EmailSignupForm';
+
+type AuthenticationFormProps = {
+  type?: 'login' | 'signup';
+};
+
+export function AuthenticationForm(props: AuthenticationFormProps) {
+  const { type = 'login' } = props;
+
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-2">
+        <GitHubButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+        <GoogleButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+        <LinkedInButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+      </div>
+
+      <div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
+        <div className="h-px w-full bg-slate-200" />
+        OR
+        <div className="h-px w-full bg-slate-200" />
+      </div>
+
+      {type === 'login' ? (
+        <EmailLoginForm isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+      ) : (
+        <EmailSignupForm
+          isDisabled={isDisabled}
+          setIsDisabled={setIsDisabled}
+        />
+      )}
+    </>
+  );
+}

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -4,7 +4,14 @@ import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-export function EmailLoginForm() {
+type EmailLoginFormProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
+
+export function EmailLoginForm(props: EmailLoginFormProps) {
+  const { isDisabled, setIsDisabled } = props;
+
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
@@ -14,6 +21,7 @@ export function EmailLoginForm() {
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
+    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ token: string }>(
@@ -45,6 +53,7 @@ export function EmailLoginForm() {
     }
 
     setIsLoading(false);
+    setIsDisabled?.(false);
     setError(error?.message || 'Something went wrong. Please try again later.');
   };
 
@@ -92,7 +101,7 @@ export function EmailLoginForm() {
 
       <button
         type="submit"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
         className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -1,7 +1,14 @@
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
-export function EmailSignupForm() {
+type EmailSignupFormProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
+
+export function EmailSignupForm(props: EmailSignupFormProps) {
+  const { isDisabled, setIsDisabled } = props;
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -13,6 +20,7 @@ export function EmailSignupForm() {
     e.preventDefault();
 
     setIsLoading(true);
+    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
@@ -21,20 +29,21 @@ export function EmailSignupForm() {
         email,
         password,
         name,
-      }
+      },
     );
 
     if (error || response?.status !== 'ok') {
       setIsLoading(false);
+      setIsDisabled?.(false);
       setError(
-        error?.message || 'Something went wrong. Please try again later.'
+        error?.message || 'Something went wrong. Please try again later.',
       );
 
       return;
     }
 
     window.location.href = `/verification-pending?email=${encodeURIComponent(
-      email
+      email,
     )}`;
   };
 
@@ -90,7 +99,7 @@ export function EmailSignupForm() {
 
       <button
         type="submit"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
         className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue to Verify Email'}

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -5,12 +5,17 @@ import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 
-type GitHubButtonProps = {};
+type GitHubButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
 
 const GITHUB_REDIRECT_AT = 'githubRedirectAt';
 const GITHUB_LAST_PAGE = 'githubLastPage';
 
 export function GitHubButton(props: GitHubButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
@@ -25,6 +30,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     }
 
     setIsLoading(true);
+    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
         window.location.search
@@ -35,6 +41,7 @@ export function GitHubButton(props: GitHubButtonProps) {
           const errMessage = error?.message || 'Something went wrong.';
           setError(errMessage);
           setIsLoading(false);
+          setIsDisabled?.(false);
 
           return;
         }
@@ -73,11 +80,13 @@ export function GitHubButton(props: GitHubButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
+        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = async () => {
     setIsLoading(true);
+    setIsDisabled?.(true);
 
     const { response, error } = await httpGet<{ loginUrl: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,
@@ -89,6 +98,7 @@ export function GitHubButton(props: GitHubButtonProps) {
       );
 
       setIsLoading(false);
+      setIsDisabled?.(false);
       return;
     }
 
@@ -112,7 +122,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -5,12 +5,17 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 
-type GoogleButtonProps = {};
+type GoogleButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
 
 const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
 const GOOGLE_LAST_PAGE = 'googleLastPage';
 
 export function GoogleButton(props: GoogleButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
@@ -25,6 +30,7 @@ export function GoogleButton(props: GoogleButtonProps) {
     }
 
     setIsLoading(true);
+    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
         window.location.search
@@ -34,6 +40,7 @@ export function GoogleButton(props: GoogleButtonProps) {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
+          setIsDisabled?.(false);
 
           return;
         }
@@ -72,11 +79,13 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
+        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
+    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,
     )
@@ -84,6 +93,7 @@ export function GoogleButton(props: GoogleButtonProps) {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
+          setIsDisabled?.(false);
 
           return;
         }
@@ -106,6 +116,7 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
+        setIsDisabled?.(false);
       });
   };
 
@@ -113,7 +124,7 @@ export function GoogleButton(props: GoogleButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -5,12 +5,17 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 
-type LinkedInButtonProps = {};
+type LinkedInButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
 
 const LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';
 const LINKEDIN_LAST_PAGE = 'linkedInLastPage';
 
 export function LinkedInButton(props: LinkedInButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
@@ -25,6 +30,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     }
 
     setIsLoading(true);
+    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
         window.location.search
@@ -34,6 +40,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
+          setIsDisabled?.(false);
 
           return;
         }
@@ -72,11 +79,13 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
+        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
+    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,
     )
@@ -84,6 +93,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
+          setIsDisabled?.(false);
 
           return;
         }
@@ -106,6 +116,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
+        setIsDisabled?.(false);
       });
   };
 
@@ -113,7 +124,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,14 +1,10 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import { EmailLoginForm } from './EmailLoginForm';
-import Divider from './Divider.astro';
-import { GitHubButton } from './GitHubButton';
-import { GoogleButton } from './GoogleButton';
-import { LinkedInButton } from './LinkedInButton';
+import { AuthenticationForm } from './AuthenticationForm';
 ---
 
 <Popup id='login-popup' title='' subtitle=''>
-  <div class='text-center'>
+  <div class='mb-7 text-center'>
     <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
       Login to your account
     </p>
@@ -16,19 +12,9 @@ import { LinkedInButton } from './LinkedInButton';
       You must be logged in to perform this action.
     </p>
   </div>
-
-  <div class='mt-7 flex flex-col gap-2'>
-    <GitHubButton client:load />
-    <GoogleButton client:load />
-    <LinkedInButton client:load />
-  </div>
-
-  <Divider />
-
-  <EmailLoginForm client:load />
-
+  <AuthenticationForm client:load />
   <div class='mt-6 text-center text-sm text-slate-600'>
     Don't have an account?{' '}
-    <a href='/signup' class='font-medium text-[#4285f4]'>Sign up</a>
+    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
   </div>
 </Popup>

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -101,22 +101,10 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(false);
   }
 
-  async function trackVisit() {
-    if (!isLoggedIn() || isEmbed) {
-      return;
-    }
-
-    await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
-      resourceId: id,
-      resourceType: 'roadmap',
-    });
-  }
-
   useEffect(() => {
     getRoadmap().finally(() => {
       hideRoadmapLoader();
     });
-    trackVisit().then();
   }, []);
 
   if (isLoading) {

src/components/FrameRenderer/renderer.ts

@@ -117,19 +117,6 @@ export class Renderer {
       });
   }
 
-  trackVisit() {
-    if (!isLoggedIn()) {
-      return;
-    }
-
-    window.setTimeout(() => {
-      httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
-        resourceId: this.resourceId,
-        resourceType: this.resourceType,
-      }).then(() => null);
-    }, 0);
-  }
-
   onDOMLoaded() {
     if (!this.prepareConfig()) {
       return;
@@ -138,8 +125,6 @@ export class Renderer {
     const urlParams = new URLSearchParams(window.location.search);
     const roadmapType = urlParams.get('r');
 
-    this.trackVisit();
-
     if (roadmapType) {
       this.switchRoadmap(`/${roadmapType}.json`);
     } else {

src/components/GetStarted/RoadmapCard.tsx

@@ -0,0 +1,78 @@
+import { ExternalLink, Globe2, type LucideIcon } from 'lucide-react';
+
+type RoadmapCardProps = {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  icon2?: LucideIcon;
+  link: string;
+  isUpcoming?: boolean;
+};
+export function RoadmapCard(props: RoadmapCardProps) {
+  const {
+    isUpcoming,
+    link,
+    title,
+    description,
+    icon: Icon,
+    icon2: Icon2,
+  } = props;
+
+  if (isUpcoming) {
+    return (
+      <div className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
+        <div className="mb-2 sm:mb-5 flex flex-row items-center">
+          <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
+            <Icon className="h-3 sm:h-5" />
+          </div>
+          {Icon2 && (
+              <>
+                <span className="mx-2 text-gray-400">+</span>
+                <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
+                  <Icon2 className="h-3 sm:h-5" />
+                </div>
+              </>
+          )}
+        </div>
+        <span className="mb-0.5 block text-lg sm:text-xl font-semibold sm:mb-2">
+          {title}
+        </span>
+        <span className="text-sm text-gray-500">{description}</span>
+
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100/70">
+          <span className="text-sm bg-black rounded-lg text-white font-semibold py-1 px-2 -rotate-45 transform">
+            Coming soon
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={link}
+      target={'_blank'}
+      className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50
+       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-sm"
+    >
+      <div className="mb-2 sm:mb-5 flex flex-row items-center">
+        <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
+          <Icon className="h-4 sm:h-5" />
+        </div>
+        {Icon2 && (
+          <>
+            <span className="mx-2 text-gray-400">+</span>
+            <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
+              <Icon2 className="h-4 sm:h-5" />
+            </div>
+          </>
+        )}
+      </div>
+      <ExternalLink className="lucide lucide-external-link absolute right-2 top-2 h-4 text-gray-300 transition group-hover:text-gray-700" />
+      <span className="mb-0 block text-lg sm:text-xl font-semibold sm:mb-2">
+        {title}
+      </span>
+      <span className="text-sm text-gray-500">{description}</span>
+    </a>
+  );
+}

src/components/GetStarted/RoadmapMultiCard.tsx

@@ -0,0 +1,63 @@
+import { ExternalLink } from 'lucide-react';
+
+type RoadmapMultiCardProps = {
+  roadmaps: {
+    title: string;
+    link: string;
+  }[];
+  description: string;
+  secondaryRoadmaps?: {
+    title: string;
+    link: string;
+  }[];
+  secondaryDescription?: string;
+};
+export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
+  const { roadmaps, description, secondaryRoadmaps, secondaryDescription } = props;
+  return (
+    <div
+      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100
+       to-gray-50 ease-in-out"
+    >
+      <div className="flex flex-col divide-y">
+        {roadmaps.map((roadmap, index) => (
+          <a
+            target={'_blank'}
+            key={index}
+            href={roadmap.link}
+            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
+          >
+            {roadmap.title}
+            <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
+          </a>
+        ))}
+      </div>
+
+      <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+        {description}
+      </p>
+
+      {secondaryRoadmaps && (
+        <div className="flex flex-col divide-y">
+          {secondaryRoadmaps.map((roadmap, index) => (
+            <a
+              target={'_blank'}
+              key={index}
+              href={roadmap.link}
+              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
+            >
+              {roadmap.title}
+              <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
+            </a>
+          ))}
+        </div>
+      )}
+
+      {secondaryDescription && (
+        <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+          {secondaryDescription}
+        </p>
+      )}
+    </div>
+  );
+}

src/components/GetStarted/RoleRoadmaps.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { SectionBadge } from './SectionBadge.tsx';
+
+type RoleRoadmapsProps = {
+  badge: string;
+  title: string;
+  description: string;
+  children: ReactNode;
+};
+
+export function RoleRoadmaps(props: RoleRoadmapsProps) {
+  const { badge, title, description, children } = props;
+
+  return (
+    <div className="bg-gradient-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
+      <div className="container">
+        <div className="text-left">
+          <SectionBadge title={badge} />
+        </div>
+        <div className="my-4 sm:my-7 text-left">
+          <h2 className="mb-1 text-xl sm:text-3xl font-semibold">{title}</h2>
+          <p className="text-sm sm:text-base text-gray-500">{description}</p>
+
+          <div className="mt-4 sm:mt-7 grid sm:grid-cols-2 md:grid-cols-3 gap-3">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/GetStarted/SectionBadge.tsx

@@ -0,0 +1,12 @@
+type SectionBadgeProps = {
+  title: string;
+};
+export function SectionBadge(props: SectionBadgeProps) {
+  const { title } = props;
+
+  return (
+    <span className="rounded-full bg-black px-3 py-1 text-sm text-white">
+      {title}
+    </span>
+  );
+}

src/components/GetStarted/TipItem.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+type TipItemProps = {
+  title: string;
+  description: string;
+};
+export function TipItem(props: TipItemProps) {
+  const { title, description } = props;
+
+  const [isToggled, setIsToggled] = useState(false);
+
+  return (
+    <div className="flex flex-col">
+      {!isToggled && (
+        <div
+          onClick={() => setIsToggled(true)}
+          className="cursor-pointer rounded-lg sm:rounded-xl bg-black px-3 py-2 text-sm sm:text-base text-white"
+        >
+          {title}
+        </div>
+      )}
+      {isToggled && (
+        <p
+          className="rounded-lg sm:rounded-xl bg-gray-200 px-3 py-2 text-black text-sm sm:text-base"
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}

src/components/GuideListItem.astro

@@ -13,7 +13,7 @@ const { frontmatter, id } = guide;
   class:list={[
     "block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b",
   ]}
-  href={`/guides/${id}`}
+  href={frontmatter.excludedBySlug ? frontmatter.excludedBySlug : `/guides/${id}`}
 >
   <span class="group-hover:translate-x-2 transition-transform">
     {frontmatter.title}

src/components/HeroSection/HeroRoadmaps.tsx

@@ -121,7 +121,7 @@ export function HeroRoadmaps(props: ProgressListProps) {
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
         {progress.map((resource) => (
           <HeroRoadmap
-            key={resource.resourceId}
+            key={`${resource.resourceType}-${resource.resourceId}`}
             resourceId={resource.resourceId}
             resourceType={resource.resourceType}
             resourceTitle={resource.resourceTitle}

src/components/MarkdownFile.astro

@@ -1,5 +1,5 @@
 <div
-  class='prose-xl prose-blockquote:font-normal prose container prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-10 prose-h2:mb-3 prose-h3:mt-2 prose-img:mt-1'
+  class='prose-xl prose-blockquote:font-normal prose container prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-10 prose-h2:mb-3 prose-h5:font-medium prose-h3:mt-2 prose-img:mt-1'
 >
   <slot />
 </div>

src/components/Navigation/Navigation.astro

@@ -1,61 +1,38 @@
 ---
+import { Menu } from 'lucide-react';
 import Icon from '../AstroIcon.astro';
+import { NavigationDropdown } from '../NavigationDropdown';
 import { AccountDropdown } from './AccountDropdown';
 ---
+
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
-    <a
-      class='flex items-center text-lg font-medium text-white'
-      href='/'
-      aria-label='roadmap.sh'
-    >
-      <Icon icon='logo' />
-    </a>
+    <div class='flex items-center gap-5'>
+      <a
+        class='flex items-center text-lg font-medium text-white'
+        href='/'
+        aria-label='roadmap.sh'
+      >
+        <Icon icon='logo' />
+      </a>
 
-    <!-- Desktop navigation items -->
-    <ul class='hidden space-x-5 sm:flex sm:items-center'>
-      <li>
-        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
-      </li>
-      <li>
-        <a href='/best-practices' class='text-gray-400 hover:text-white'
-          >Best Practices</a
-        >
-      </li>
-      <li class='hidden xl:inline'>
-        <a href='/questions' class='text-gray-400 hover:text-white'>Questions</a
-        >
-      </li>
-      <li>
-        <a href='/teams' class='group relative text-blue-300 hover:text-white'>
-          Teams
-          <span
-            class='ml-0.5 hidden rounded-sm border-black bg-blue-300 px-1 py-0.5 text-xs font-semibold uppercase text-black group-hover:bg-white md:inline'
-          >
-            New
-          </span>
-
-          <span class='inline md:hidden 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>
+      <!-- Desktop navigation items -->
+      <div class='hidden space-x-5 sm:flex sm:items-center'>
+        <NavigationDropdown client:load />
+        <a href='/get-started' class='text-gray-400 hover:text-white'>
+          Start Here
         </a>
-      </li>
-      <li>
-        <kbd
+        <a href='/teams' class='text-gray-400 hover:text-white'> Teams</a>
+        <button
           data-command-menu
-          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
         >
-          <Icon icon='search' class='mr-2 h-3 w-3' />
-          <kbd class='mr-1 font-sans'>⌘</kbd><kbd class='font-sans'>K</kbd>
-        </kbd>
-      </li>
-    </ul>
+          <Icon icon='search' class='h-3 w-3' />
+          <span class='ml-2'>Search</span>
+        </button>
+      </div>
+    </div>
+
     <ul class='hidden h-8 w-[172px] items-center justify-end gap-5 sm:flex'>
       <li data-guest-required class='hidden'>
         <a href='/login' class='text-gray-400 hover:text-white'>Login</a>

src/components/NavigationDropdown.tsx

@@ -0,0 +1,105 @@
+import {
+  BookOpen,
+  BookOpenText,
+  CheckSquare,
+  FileQuestion,
+  Menu,
+  Shirt,
+  Video,
+  Waypoints,
+} from 'lucide-react';
+import { useRef, useState } from 'react';
+import { cn } from '../lib/classname.ts';
+import { useOutsideClick } from '../hooks/use-outside-click.ts';
+
+const links = [
+  {
+    link: '/roadmaps',
+    label: 'Roadmaps',
+    description: 'Step by step learning paths',
+    Icon: Waypoints,
+  },
+  {
+    link: '/best-practices',
+    label: 'Best Practices',
+    description: "Do's and don'ts",
+    Icon: CheckSquare,
+  },
+  {
+    link: '/questions',
+    label: 'Questions',
+    description: 'Test and Practice your knowledge',
+    Icon: FileQuestion,
+  },
+  {
+    link: '/guides',
+    label: 'Guides',
+    description: 'In-depth articles and tutorials',
+    Icon: BookOpenText,
+  },
+  {
+    link: 'https://youtube.com/@roadmapsh',
+    label: 'Videos',
+    description: 'Animated and interactive content',
+    Icon: Video,
+    isExternal: true,
+  },
+  {
+    link: 'https://cottonbureau.com/people/roadmapsh',
+    label: 'Shop',
+    description: 'Get some cool swag',
+    Icon: Shirt,
+    isExternal: true,
+  },
+];
+
+export function NavigationDropdown() {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div className="relative flex items-center" ref={dropdownRef}>
+      <button
+        className={cn('text-gray-400 hover:text-white', {
+          'text-white': isOpen,
+        })}
+        onClick={() => setIsOpen(true)}
+        onMouseOver={() => setIsOpen(true)}
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+      <div
+        className={cn(
+          'absolute pointer-events-none left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
+          {
+            'pointer-events-auto translate-y-2.5 opacity-100': isOpen,
+          },
+        )}
+      >
+        {links.map((link) => (
+          <a
+            href={link.link}
+            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"
+          >
+            <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">
+              <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">
+                {link.label}
+              </span>
+              <span className="text-sm">{link.description}</span>
+            </span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/PageVisit/PageVisit.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { isLoggedIn } from '../../lib/jwt';
+import { httpPost } from '../../lib/http';
+import type { ResourceType } from '../../lib/resource-progress';
+
+type PageVisitProps = {
+  resourceId?: string;
+  resourceType?: ResourceType;
+};
+
+export function PageVisit(props: PageVisitProps) {
+  const { resourceId, resourceType } = props;
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+      ...(resourceType && { resourceType, resourceId }),
+    }).finally(() => {});
+  }, []);
+
+  return null;
+}

src/components/TeamMarketing/TeamTools.tsx

@@ -1,31 +1,33 @@
+import {AlertTriangle, Barcode, BookOpenIcon, PieChart, Shrub, SquareIcon, UserRoundPlus} from "lucide-react";
+
 const toolsList = [
   {
-    imageUrl: '/images/team-promo/growth-plans.png',
+    icon: Shrub,
     title: 'Growth plans',
     description: 'Prepare shared or individual growth plans for members.',
   },
   {
-    imageUrl: '/images/team-promo/progress-tracking.png',
+    icon: Barcode,
     title: 'Progress tracking',
     description: 'Track and compare the progress of team members.',
   },
   {
-    imageUrl: '/images/team-promo/onboarding.png',
+    icon: UserRoundPlus,
     title: 'Onboarding',
     description: 'Prepare onboarding plans for new team members.',
   },
   {
-    imageUrl: '/images/team-promo/team-insights.png',
+    icon: PieChart,
     title: 'Team insights',
     description: 'Get insights about your team skills, progress and more.',
   },
   {
-    imageUrl: '/images/team-promo/skill-gap.png',
+    icon: AlertTriangle,
     title: 'Skill gap analysis',
     description: 'Understand the skills of your team and identify gaps.',
   },
   {
-    imageUrl: '/images/team-promo/documentation.png',
+    icon: BookOpenIcon,
     title: 'Documentation',
     description: 'Create and share visual team documentation.',
   },
@@ -44,11 +46,9 @@ export function TeamTools() {
           {toolsList.map((tool) => {
             return (
               <div className="rounded-md sm:rounded-xl border p-2 sm:p-5 text-left sm:text-center md:text-left">
-                <img
-                  alt={tool.title}
-                  src={tool.imageUrl}
-                  className="mb-5 h-48 hidden sm:block mx-auto md:mx-0"
-                />
+                <div className='mb-5 flex h-9 w-9 items-center justify-center rounded-full bg-gray-900 text-white'>
+                  {tool.icon ? <tool.icon size={23} /> : <SquareIcon size={24} /> }
+                </div>
                 <h3 className="mb-0.5 sm:mb-2 text-lg sm:text-2xl font-bold">{tool.title}</h3>
                 <p className='text-sm sm:text-base'>{tool.description}</p>
               </div>

src/data/best-practices/aws/content/service-over-servers.md

@@ -2,4 +2,4 @@
 
 > Servers are ephemeral, you don't care about them. You only care about the service as a whole.
 
-If a single server dies, it should be of no big concern to you. This is where the real benefit of AWS comes in compared to using physical servers yourself. Normally if a physical server dies, there's panic. With AWS, you don't care, because auto-scaling will give you a fresh new instance soon anyway. Netflix have taken this several steps further with their [simian army](http://techblog.netflix.com/2011/07/netflix-simian-army.html), where they have things like [Chaos Monkey](http://techblog.netflix.com/2012/07/chaos-monkey-released-into-wild.html), which will kill random instances in production (they also have Chaos Gorilla to kill AZs and I've heard rumour of a Chaos Kong to kill regions...). The point is that servers will fail, but this shouldn't matter in your application.
+If a single server dies, it should be of no big concern to you. This is where the real benefit of AWS comes in compared to using physical servers yourself. Normally if a physical server dies, there's panic. With AWS, you don't care, because auto-scaling will give you a fresh new instance soon anyway. Netflix have taken this several steps further with their [simian army](http://techblog.netflix.com/2011/07/netflix-simian-army.html), where they have things like [Chaos Monkey](https://github.com/netflix/chaosmonkey), which will kill random instances in production (they also have Chaos Gorilla to kill AZs and I've heard rumour of a Chaos Kong to kill regions...). The point is that servers will fail, but this shouldn't matter in your application.

src/data/best-practices/frontend-performance/content/recommended-guides.md

@@ -37,11 +37,11 @@
 - [The Web Performance impact of jQuery](https://twitter.com/TheRealNooshu/status/1509487050122276864)
 - [Have Single-Page Apps Ruined the Web? | Transitional Apps](https://www.youtube.com/watch?v=860d8usGC0o)
 - [Improve how you architect webapps](https://www.patterns.dev/)
-- [Nuxt SSR Optimizing Tips](https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/, Filip Rakowski
+- [Nuxt SSR Optimizing Tips](https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/), Filip Rakowski
 - [GPU accelerated JavaScript](https://gpu.rocks/#/)
 - [Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp)
 - [Astro: Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.](https://docs.astro.build/getting-started/)
-- [Minimising Layout and Layout thrashing for 60 FPS](https://www.charistheo.io/blog/2021/09/dom-reflow-and-layout-thrashing/)
+- [Minimising Layout and Layout thrashing for 60 FPS](https://www.harrytheo.com/blog/2021/09/dom-reflow-and-layout-thrashing/)
 - [Does shadow DOM improve style performance?](https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/)
 - [Debugging memory leaks - HTTP 203](https://www.youtube.com/watch?v=YDU_3WdfkxA)
 - [Explore JavaScript Dependencies With Lighthouse Treemap](https://sia.codes/posts/lighthouse-treemap/)
@@ -71,7 +71,7 @@
 - [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/)
 - [Browser painting and considerations for web performance](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/)
 - [The Cost Of JavaScript In 2018](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) ([Video](https://www.youtube.com/watch?v=i5R7giitymk))
-- [Examining Web Worker Performance](https://www.loxodrome.io/post/web-worker-performance/)
+- [Examining Web Worker Performance](https://www.jameslmilner.com/posts/web-worker-performance)
 - [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist)
 - [jankfree](http://jankfree.org/)
 - [What forces layout/reflow?](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

src/data/guides/backend-languages.md

@@ -0,0 +1,394 @@
+---
+title: 'The 5 Best Backend Development Languages to Master (2024)'
+description: 'Discover the best backend development languages to master in 2024.'
+author:
+  name: 'Fernando Doglio'
+  url: 'https://twitter.com/deleteman123'
+  imageUrl: '/authors/fernando.jpeg'
+excludedBySlug: '/backend/languages'
+seo:
+  title: 'The 5 Best Backend Development Languages to Master (2024)'
+  description: 'Discover the best backend development languages to learn right now for career development, with practical tips from an experienced developer.'
+isNew: true
+type: 'textual'
+date: 2024-01-18
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+Web development is typically divided into two main categories: [backend development](https://roadmap.sh/backend) and [frontend development](https://roadmap.sh/frontend). Frontend development focuses on the visible part of the application for end-users, i.e. the part that users interact with, while backend development involves writing code that remains unseen but is essential for the functioning of all applications—the business logic.
+
+Two of the key components when it comes to backend development are the programming language that you are going to code in and the database. In this article, we will be looking into a subset of programming languages that could be used for backend development. We will be discussing the pros and cons of each and the community to help you pick the best programming language for backend development.
+
+Without further ado, let’s get started!
+
+## What are backend languages?
+
+When it comes to web development, there is a very clear distinction between frontend and backend technologies.
+
+While the frontend ecosystem is quite limited to JavaScript (and other JavaScript-based languages, like TypeScript) due to Browser compatibility, the backend (A.K.A server-side) is a very different scenario.
+
+![Backend Languages](/guides/backend-languages/back-vs-front.png)
+
+Please note that neither of those lists is extensive, as they’re both constantly growing.
+
+You can think of a backend language as one that “runs on the server side”. That said, by that definition, any language is a backend language because even JavaScript nowadays can be used on the backend as well (thanks to Node, Bun, and Deno).
+
+However, we can go one step further and say:
+
+> “A backend language is a server side programming language that has the tools and frameworks required to build web backends”
+
+That will narrow down the list a little bit. But essentially, we can think of backend languages as anything that fits the following list:
+
+- Is able to listen for incoming HTTP/S connections.
+- Can access databases.
+- Can send HTTP/S requests.
+- Can access the filesystem.
+- Has a rich ecosystem of tools and frameworks to build web applications.
+
+With those features and a rich ecosystem of libraries and frameworks, a language can definitely be considered “backend-ready”.
+
+## Why learn a backend programming language?
+
+If you’re already a backend developer, then the main reason would be to become a more versatile developer. The more languages you know, the better code you’ll write. Either because you’ve learned different ways of solving the same problem, or simply because you’ll be able to contribute to more projects.
+
+If, on the other hand, you’re just getting started, the main reason would be that you’re entering an industry that’s always looking for people.
+
+## Is the market in demand for backend developers?
+
+One thing to keep in mind right now is that the software development market is always in demand for devs. For example, the [U.S. Bureau of Labor Statistics gives our industry a 25% growth rate](https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm) (demand-wise) from 2022 to 2023, whereas the mean for other industries is 3%.
+
+According to [JetBrains, during 2022, 75% of developers were involved with web development](https://www.jetbrains.com/lp/devecosystem-2022/) in one fashion or another, so whether you’re backend devs or frontend devs, there is always someone looking for you.
+
+That said, we also have to consider that this industry is becoming a global industry. While some countries might still be fighting that process back, most developers can directly access the global market and work for any company in the world.
+
+That is a great opportunity for a backend developer who lives in an area where there isn’t a big IT industry; however, it also means competing with every other developer in the world. That might cause the illusion that the IT industry is in recession or that there are no job opportunities for developers.
+
+There are always opportunities; it’s just that you're now after the same job that many others from around the world are after as well.
+
+That said, backend devs are always in high demand because they’re the bread and butter of any web application. They’re always required to create the underlying platform that will power most systems, so the key to standing out here is to stay up-to-date with the industry’s trends and technologies.
+
+Don’t get me wrong. You can’t possibly be expected to keep up with every single programming language that is released or with all the new frameworks that are created every month. However, keeping an eye on the industry and understanding what survives long enough to become a new industry standard is important. You have to keep updating yourself and learning new technologies/skills constantly; that way, you’ll stay relevant.
+
+## Is learning a backend language good for your career?
+
+Whether you’re a frontend developer looking to become full-stack (someone who can code both the backend and the frontend of an application), or if you’re new to the industry and you’re thinking if this might be the best place for you, the answer is “yes”.
+
+Backend developers are always in demand, so adding a new tool to your already existing toolbelt (if you’re already a dev) will only make you more flexible in the eyes of your employer.
+
+But remember, a language is just a language until you give it context. If you’re wondering whether or not one of the backend languages in this article might be for you, the answer will always be “yes”. However, understand that if backend development is new to you, you will also need to pick up other skills and backend technologies around the language, such as:
+
+- Understanding HTTP.
+- Learning Structured Query Language (SQL) to query your databases.
+- Understanding how APIs work.
+- What server side rendering means and how to take advantage of it.
+- What web servers are and how to use them/build them.
+
+Otherwise, you’ll understand the language, but you won’t know how to use it for the role of backend development.
+
+## Top 5 Backend Languages to Learn for Web Development
+
+With that introduction out of the way, let’s see the top 5 backend programming languages that you might want to learn if you’re looking to broaden your horizons in the server-side world.
+The languages we’ll cover are:
+
+- Python
+- Java
+- JavaScript
+- PHP
+- Go
+
+Why these languages specifically?
+
+They’re some of the most known and used languages in the industry right now (see [StackOverflow’s 2023 Developer Survey](https://survey.stackoverflow.co/2023/#most-popular-technologies-language-prof)). That said, keep in mind that these are all great options, and they’re not presented here in any particular order.
+
+### Python
+
+Python has been around for decades already and while it’s never been the most popular option, it has always managed to stay within the top 5 choices. People love it for being easy to read, straightforward, and able to handle all sorts of tasks, making it a top pick for developers globally. Sure, Python's got a big name in data processing and machine learning, but let's not forget its solid impact on web development!.
+
+What makes Python extra appealing, especially for beginners, is the fact that reading and writing it feels very much like English (or at least, as pseudo code). This makes it a top choice for folks just starting out in coding.
+
+#### Beginner Accessibility and Learning Resources
+
+One of Python's standout features is its beginner-friendly syntax, making it an ideal language for those new to programming. The emphasis on readability and the absence of complex syntax (for the most part), eases the learning curve, enabling new developers to quickly grasp fundamental concepts.
+
+Python's community plays a critical role in its accessibility. Abundant learning resources, tutorials, and documentation are readily available, empowering beginners to progress from basic programming principles to advanced backend development seamlessly. Online platforms like Codecademy, Coursera,  realpython.com, and even Google offer comprehensive courses tailored to all skill levels.
+
+#### Practical Applications and Popular Frameworks 
+
+Python's versatility is evident in its applicability across a spectrum of industries, from web development and data science to artificial intelligence and automation. In the context of backend development, Python shines brightly with its two standout frameworks: [Django](https://www.djangoproject.com/) and [Flask](https://github.com/pallets/flask).
+
+##### Django
+
+So, let's talk about Django – it's like the superhero of web frameworks, at least in the world of Python. This high-level powerhouse is all about that "batteries-included" style, giving you a whole package of tools and features that make development lightning-fast. It follows the [Model-View-Controller](https://www.crio.do/blog/understand-mvc-architecture/) (MVC) architecture that gives your web applications a solid structure, making them scalable and easy to keep up.
+
+Part of that whole “batteries-included” motto means that it comes with an admin panel, an [ORM](https://www.freecodecamp.org/news/what-is-an-orm-the-meaning-of-object-relational-mapping-database-tools/) (Object-Relational Mapping) for smooth data handling, and security features that make sure your project is secured out-of-the-box. All these goodies work together, making Django a top choice for projects, whether they're a walk in the park or a brain-bending challenge.
+
+##### Flask
+
+On the other hand, Flask, a micro-framework, takes a minimalist approach, providing developers with the flexibility to choose components as needed. While Flask may be lighter than Django, it doesn't compromise on functionality. Its simplicity and modularity make it an excellent choice for small to medium-sized projects, allowing developers to tailor the framework to meet specific project requirements.
+
+Both Django and Flask underscore Python's suitability for backend development, offering developers frameworks that cater to diverse project needs while maintaining Python's hallmark readability and efficiency.
+
+#### Pros and Cons of Python
+
+As with all other backend languages in this article, Python has some pros and cons you should consider before picking it as your first backend language.
+
+##### Pros
+
+- The syntax is very easy to learn because it’s very much like writing English.
+- The ecosystem is quite mature and has some nice frameworks that will contain all the tools you need to get started
+
+##### Cons
+
+- It’s not the most popular backend language, so while the frameworks available are constantly updated, they aren’t necessarily using the latest technology trends.
+- The GIL (Global Interpreter Lock) limits Python’s performance in multi-threaded applications.
+
+### Java
+
+Java has a massive presence and for good reason (according to [JetBrain’s survey in 2022, Java was used by 48% of developers](https://w3techs.com/technologies/details/pl-php)).It's the kind of programming language that's everywhere – serving up websites, running your favorite apps, and even powering big-scale enterprise systems.
+
+#### Is it worth learning Java?
+
+Now, learning Java, (a strongly typed, object oriented programming language (OOP),  is a journey worth taking, but it's not a walk in the park. It's a bit like climbing a mountain – you start at the bottom with the basics, and as you ascend, you get into the nitty-gritty of things like object-oriented programming. The process will force you to learn a lot, which is a great thing, by the end you’ll have a lot of understanding of mechanics and concepts around OOP that can be extrapolated into other languages. However, that can also be overwhelming to some developers who just want to learn by building mini-projects. In those situations, the learning curve of Java might be too long (not steep, but long because there is a lot more to cover than with alternatives such as Python or JavaScript).
+
+That said, the community is big and there are tons of resources, from online courses to forums, helping you navigate the Java landscape. And good reason, considering Java has been around for quite a while.
+
+#### Use Cases and Robust Ecosystem
+
+Java's everywhere. From web development to mobile apps, and even diving into the world of big data, Java's got its fingerprints all over. And if it’s not the language itself, it’s the Java Virtual Machine (JVM) powering some other language, like Spark.
+
+Java’s the language of choice for many big enterprises given its innate robustness (the first version of the language was released in 1995, it’s had quite a long time to evolve), and its robust ecosystem of libraries and frameworks makes it a go-to for developers.
+
+#### Pros and Cons of Java
+
+For all its power and robustness, there are some negative (and positive) aspects to picking Java as your first backend language.
+
+##### Pros
+
+- Java has a mature ecosystem with a varied array of libraries and frameworks for you to try. The community has been working on them and evolving them for years in many cases, so they’re quite ready to develop enterprise-ready solutions.
+- Java’s multithreading support makes it ideal for some processing-heavy tasks in the backend of big applications.
+- Java’s heavy focus on object oriented programming makes it a great option for developers who enjoy that paradigm.
+
+##### Cons
+
+- Java’s verbose syntax might be a problem for some people. While you can still code without an issue, it all comes down to personal preference. If you like to write less and do more with your code, Java might not be the ideal pick for you. It’s verbosity can increase development time in some situations.
+- Java applications can have higher memory consumption than others, especially compared to others like PHP. While the reason for this is their entire architecture, the fact remains.
+
+### JavaScript (Node.js)
+
+With Node.js in the mix, JavaScript becomes a lingua franca in web development. In other words, you can use the same language both for the frontend (client side) and for the backend (server side) of your application.
+
+That said, keep in mind that depending on the framework you’re using, while it might be JavaScript on both sides, the code and logic you use can be considerably different.
+
+Remember that frontend code is often confused with framework code (as in React, Angular, Vue, etc) by some developers, simply because it’s all JavaScript. But don’t be confused, the backend lacks a lot of the extra “juice” added by the browser (like the DOM API and others).
+
+#### Learning Advantages of Node.js
+
+If you've got the basics of JavaScript down, even if your experience has only been on the frontend, diving into Node.js is like leveling up. It lets you use the same language for both frontend and backend, which means less time juggling languages and more time building cool stuff.
+
+The event-driven, non-blocking architecture is one of the main features that make the language so special – it makes your web apps fast and efficient without you having to learn more complex concepts such as multi-threading. Plus, the community is constantly growing and there are tutorials everywhere to guide you through the Node.js universe.
+
+If you were to rank languages based on the amount of content out there to learn them, JavaScript would be one of the first ones (if not the first one) on the list.
+
+#### Key Frameworks and Development Tools
+
+Now, let's talk about frameworks. In the case of JavaScript, this topic is so varied that recommending a single option for someone just getting started is really hard. 
+
+For example, if you want to go frontend agnostic, or in other words, you don’t care about the technology being used to develop the client side of your app, then a good starting option would be [Express.js](https://expressjs.com/). This framework used to be the industry standard. And while that’s no longer the case, it’s still a perfect first choice if you’re looking for something with the required functionality to make your life a lot easier.
+
+Now, if on the other hand, you’re looking to build the frontend and the backend at the same time, then I would recommend going with [Next.js](https://nextjs.org/) if you’re already familiar with React. Or if on the other hand, you prefer Vue.js, then definitely try [Nuxt](https://nuxt.com/). Either one of those will help you get the job done with all the bells and whistles you can think of.
+
+#### Does it make sense to pick up JavaScript as a backend language?
+
+The answer to this question is always going to be “yes”, whether you’re coming from the frontend and you already have JS experience or if you’re picking it up from scratch.  In fact, according to [StackOverflow’s 2023 survey, JavaScript is the most used language by professionals](https://survey.stackoverflow.co/2023/#most-popular-technologies-language-prof) (with 65.85% of the votes).
+
+![JavaScript Interest](/guides/backend-languages/javascript-interest.png)
+
+If you’re coming from the client side, then adopting JS for your backend will let you start working in minutes. You’ll probably spend more time learning the backend-specific concepts than the language itself.
+
+On the other hand, if you’re coming from zero, or from other programming languages, JS has some quirks, for sure, but if you go the JS route, you’re already making way for a potential switch into the frontend in the future. Who knows, maybe in a few months you’ll also want to start working on the frontend, and by having picked up JS as your main backend language, you have 90% of the work already cut for you.
+
+There is really no downside to picking JS as your first backend language.
+
+#### Pros and Cons of JavaScript
+
+While there might not be a downside to picking JS, there is no perfect language out there, so let’s take a look at some of the pros and cons before moving on to the next one.
+
+##### Pros
+
+- Going with JavaScript, you’re using the same language on the backend and on the frontend. There is less cognitive load while switching environments if you’re the one coding both sides of the app.
+- The ecosystem around JavaScript is one of the richest ones you can find. The community is constantly pushing the limits of the language and coming up with new solutions to everyday problems.
+- The simple syntax allows you to reduce development time because you don’t have to write as much code to achieve good results.
+
+##### Cons
+
+- Asynchronous programming can be hard for some developers coming from other languages, like Python for example.
+- The lack of strong types in JavaScript can cause some problems for big codebases.
+- The single-thread nature of the language makes it really hard to implement CPU-intensive tasks. While there is support for multi-threading, it’s not extensive nor commonly used.
+- Debugging asynchronous code can be difficult for new developers given the non-linear nature of it.
+
+### PHP
+
+Now, if you’re looking for something very well established in the web development industry, just like Java but with a shorter learning curve, then you’re probably looking for PHP. 
+
+> As a note about PHP’s relevancy, while many developers might claim that PHP is a dying tech, according to [W3Techs, over 75% of websites with a backend use PHP](https://w3techs.com/technologies/details/pl-php).
+
+It's the glue that holds a ton of websites together, and its longevity in the web development scene is no accident.
+
+#### Ease of Mastery and Vast Library Support
+
+If you're diving into PHP, you wouldn’t be so wrong (no matter what others might tell you). It's got a gentle learning curve, which means you can start building things pretty quickly. Getting everything set up and working will probably take you 10 minutes, and you’ll be writing your first “hello world” 5 minutes after that. 
+
+The vast community support and an ocean of online resources make mastering PHP a breeze. Plus, its library support is like having a toolkit that's always expanding – you'll find what you need, whether you're wrangling databases, handling forms, or making your website dance with dynamic content.
+
+If you’re looking to pick up PHP, look for the LAMP stack, which stands for **L**inux, **A**pache, **M**ySQL, and **P**HP. With that tech stack, you’ll have everything you need to start creating websites in no time.
+
+#### Modern PHP Frameworks and Their Impact
+
+If we’re talking about PHP frameworks, then we gotta talk about [Laravel](https://laravel.com/) and [Symfony](https://symfony.com/). They are like the rockstars of the modern PHP world. 
+
+Laravel comes with a lot of tools and features that help you speed up your development process. On the other side, Symfony has a modular architecture, making it a solid choice for projects of all sizes. 
+
+These frameworks showcase how PHP has evolved, staying relevant and powerful in the ever-changing landscape of web development.
+
+#### Pros and Cons of PHP
+
+Let’s take a look at some of the most common advantages of going with PHP for the backend and some cons to discuss why it might not be the best choice for you.
+
+##### Pros
+
+- PHP is designed for web development, which still makes it a very popular choice for a backend language.
+- PHP’s community is quite big, considering how old the language is, so if you need help, chances are, someone has the answer you’re looking for.
+
+##### Cons
+
+- One of the major complaints developers have about the language is its inconsistent function naming convention. While not a huge problem, it makes it very hard for developers to intuitively find the right function by name. This causes you to constantly verify your code against the documentation to make sure you’re not making mistakes.
+
+### Go
+
+Now, let's close in on Go, the programming language born at Google that's all about simplicity and efficiency. Go embraces a clean and straightforward syntax. Despite its simplicity, it focuses heavily on performance, making it an excellent choice for building modern, scalable applications.
+
+According to the [PYPL index](https://pypl.github.io/PYPL.html) (using Google searches to weigh interest of developers in a particular language), we can see a clear worldwide growing interest in Go from the development community:
+
+![Go Interest](/guides/backend-languages/pypl-go-index.png)
+
+#### Concurrency and Scalability
+
+Go stands out in the crowd, especially when it comes to handling concurrency and scalability. Its built-in support for concurrent programming, through goroutines and channels, makes it a standout choice for applications that need to juggle multiple tasks simultaneously. This makes Go particularly adept at handling the demands of today's highly concurrent and distributed systems. In other words, Go is a great choice for building microservices, a type of system that is very commonly used as the backend for complex web applications.
+
+So yes, very relevant.
+
+#### Learning Curve and Developer Productivity
+
+Learning Go is a smooth ride, thanks to its simplicity and extensive documentation. Developers often find themselves quickly transitioning from understanding the basics to building robust applications.
+
+The language's focus on developer productivity is evident in its quick compilation times and the absence of excessive boilerplate code, allowing developers to concentrate on building features rather than wrestling with the language itself.
+
+#### Pros and Cons of Go
+
+Let’s take a look at some pros and cons for the last programming language on our list.
+
+##### Pros
+
+- Go code compiles quickly, which in turn leads to very fast development cycles. This is a big plus if you’re developing a big application with a large codebase because other options might slow down your process with their compilation times.
+- Go's syntax is simple enough to make it easy to learn and understand for new developers.
+
+##### Cons
+
+- Go’s ecosystem is quite young when compared to the other alternatives here, so the maturity of the tools available might not be the same as, for example, Java or JavaScript tooling.
+
+### Choosing the Ideal Backend Language
+
+So, are these the best backend programming languages out there? Is there an absolute “best” backend programming language?
+
+As you’ve probably seen by now, there is no “perfect” or “ideal” backend language. When it comes to picking one out of the huge number of alternatives, you have to consider other aspects outside of the language itself:
+
+- What’s the size of your project? Are you building a large-scale platform? Or just a basic static website?
+- Do you mind spending more time learning or do you need to be efficient and start coding right away?
+- Do you already have some programming knowledge and would like to pick something that resembles what you already know? Or would you like to pick up something that’s entirely different?
+- Are you alone? Or are you part of a team?
+
+Once you’ve answered those questions, you’ll probably have some idea of where to go, but then you should look into the language itself, specifically into:
+
+- Does it have enough learning resources for you?
+- How big and active is the community around it?
+- Are the main frameworks still under development? Or have they been parked for a while?
+
+In the end, you’re evaluating the language and its ecosystem, making sure they’re both evolving right along the web industry. If you find that there are aspects that are falling behind, then it probably isn’t a good choice.
+
+A handy tool when trying to evaluate a language like that is [roadmap.sh](https://roadmap.sh).
+
+[![Roadmap.sh](/guides/backend-languages/backend-roadmap-part.png)](https://roadmap.sh/backend)
+
+<p align="center" style="font-size: 14px; margin-top: -10px; text-align: center">Small section of the full backend roadmap available on <a href="https://roadmap.sh/backend">roadmap.sh</a></p>
+
+There you’ll find community-maintained roadmaps for many career paths within software development. In particular, for this article, the [backend roadmap](https://roadmap.sh/backend) is a great place to start, because while picking a backend language is important, you’ll see there that it’s not just about the language. In fact, there is a lot of tech around the language that is also required (I’m referring to databases, git, understanding how client-server communication works, and a big “etc).
+
+### Jumpstarting Your Backend Development Journey
+
+To get started with your backend development journey, it's crucial to have a roadmap that guides you through the learning process and equips you with the skills to build robust and scalable backend systems.
+
+Lucky for you, if you’re reading this, that means you’ve found the most complete and comprehensive roadmap online: [roadmap.sh](https://roadmap.sh), the current [backend roadmap](https://roadmap.sh/backend) is filled with details of everything you should and could (optionally) learn in your journey to becoming a backend developer.
+
+### Guided Learning: From Online Courses to Bootcamps
+
+Online courses and bootcamps serve as invaluable companions on your learning expedition. Platforms like Udemy, Coursera, and freeCodeCamp offer comprehensive backend development courses. 
+
+These resources not only cover programming languages like Python, Java, or JavaScript but also dive deep into frameworks like Django, Express.js, or Laravel. For those seeking a more immersive experience, coding bootcamps provide intensive, hands-on training to fast-track your backend development skills.
+
+Whatever choice you go for, make sure you’re not following trends or just copying the learning methods of others. Learning is a very personal experience and what works for others might not work for you, and vice versa. So make sure to do the proper research and figure out what option works best for you.
+
+### Building Community Connections for Learning Support
+
+Joining developer communities (there are several on Twitter for example), forums like Stack Overflow, or participating in social media groups dedicated to backend development creates a network of support. 
+
+Engaging with experienced developers, sharing challenges, and seeking advice fosters a collaborative learning environment. Attend local meetups or virtual events if you can to connect with professionals in the field, gaining insights and building relationships that can prove invaluable throughout your journey.
+
+### Think about you and your project
+
+There are many ways to go about picking the ideal backend language for you. If there is anything you should take home with you after reading this article, it is that most languages are equivalent in the sense that you’ll be able to do pretty much everything with any of them.
+
+So what criteria can you use to pick the “right one” for you?
+
+The questions you should also be asking yourself are:
+
+- What’s your preference for a language? Do you like Object Oriented Programming (OOP) or are you more of a functional programming type of dev? Do you like statically typed programming languages or loosely typed ones? Personal preferences should also play an important role at the time of picking your ideal programming language.
+- What does my project need? After all, project requirements sometimes dictate technology. Keep that in mind, check if the project’s needs and your personal preferences align, and try to weigh in pros and cons if they don’t.
+
+In the end, personal preference and actual project requirements (if you have any) are very important, because both will influence how much you enjoy (or don’t enjoy) the learning process.
+
+### Crafting a Portfolio to Display Your Backend Skills:
+
+As you accumulate skills and knowledge, showcase your journey through a well-crafted portfolio. Include projects that highlight your backend skills, demonstrating your ability to - design databases, implement server-side logic, and integrate with client side technologies. Whether it's a dynamic web application, a RESTful API, or a data-driven project, your portfolio becomes a tangible representation of your backend development capabilities for potential employers or collaborators.
+
+When it comes to deciding where to publish this portfolio, you have some options, such as directly on your GitHub profile (if you have one), or perhaps on your own personal website where you can share some design thoughts about each project along with the code.
+
+In the end, the important thing is that you should be sharing your experience somewhere, especially when you don’t have working experience in the field. 
+
+### Conclusion
+
+In the end, there are many backend programming languages to choose from, and what language you go for, is up to you and your particular context/needs. All I can do is guide you to the door, but you have to cross it yourself. Some interesting options are:
+
+- Python with its English-like syntax.
+- Java with its formal syntax and enterprise support.
+- JavaScript with its flexibility and ability to jump between frontend and backend.
+- PHP with its proven record of success.
+- And Go, with its performance and scalability focus.
+
+You’re the one who gets to decide, but just know that no matter what you choose, getting started in backend development is a one-way street. You’ll be learning from this moment on, and you’ll be jumping from one language to the other as the field evolves.
+
+Remember that there is a very detailed version of a [backend roadmap here](https://roadmap.sh/backend), it might be a great place to get started! And if you’re also interested in frontend development, there is an [equally handy roadmap](https://roadmap.sh/frontend) here as well!
+
+
+
+
+
+
+
+
+

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

@@ -4,7 +4,7 @@ briefTitle: 'JavaScript'
 briefDescription: 'Test, rate and improve your JavaScript knowledge with these questions.'
 title: 'JavaScript Questions'
 description: 'Test, rate and improve your JavaScript knowledge with these questions.'
-isNew: true
+isNew: false
 seo:
   title: 'JavaScript Questions'
   description: 'Curated list of JavaScript questions to test, rate and improve your knowledge. Questions are based on real world experience and knowledge.'

src/data/question-groups/nodejs/content/commonjs-vs-esm.md

@@ -0,0 +1,17 @@
+CommonJS and ES Modules are two different module systems in JavaScript. CommonJS is the module system used in Node.js, while ES Modules are the module system used in browsers and TypeScript.
+
+## CommonJS
+
+```js
+const fs = require('fs');
+```
+
+CommonJS modules are loaded synchronously. This means that the module is loaded and evaluated before the code using the module is executed. It uses `require()` to load modules and `module.exports` to export modules.
+
+## ES Modules
+
+```js
+import fs from 'fs';
+```
+
+ES Modules are loaded asynchronously. This means that the module is loaded and evaluated when the module is used. It uses `import` to load modules and `export` to export modules.

src/data/question-groups/nodejs/content/error-handling.md

@@ -0,0 +1,66 @@
+There are four fundamental strategies to report errors in Node.js:
+
+## `try...catch` blocks
+
+`try...catch` blocks are the most basic way to handle errors in JavaScript. They are synchronous and can only be used to handle errors in synchronous code. They are not suitable for asynchronous code, such as callbacks and promises.
+
+```js
+import fs from 'node:fs';
+
+try {
+  const data = fs.readFileSync('file.md', 'utf-8');
+  console.log(data);
+} catch (err) {
+  console.error(err);
+}
+```
+
+## Callbacks
+
+Callbacks are the most common way to handle errors in asynchronous code. They are passed as the last argument to a function and are called when the function completes or fails.
+
+```js
+import fs from 'node:fs';
+
+fs.readFile('file.md', 'utf-8', (err, data) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+
+  console.log(data);
+});
+```
+
+## Promises
+
+Promises are a more modern way to handle errors in asynchronous code. They are returned by functions and can be chained together. They are resolved when the function completes and rejected when it fails.
+
+```js
+import fs from 'node:fs/promises';
+
+fs.readFile('file.md', 'utf-8')
+  .then((data) => {
+    console.log(data);
+  })
+  .catch((err) => {
+    console.error(err);
+  });
+```
+
+## Event emitters
+
+Event emitters are a more advanced way to handle errors in asynchronous code. They are returned by functions and emit an `error` event when they fail. They are resolved when the function completes and rejected when it fails.
+
+```js
+import fs from 'node:fs';
+
+const reader = fs.createReadStream('file.md', 'utf-8');
+reader.on('data', (data) => {
+  console.log(data);
+});
+
+reader.on('error', (err) => {
+  console.error(err);
+});
+```

src/data/question-groups/nodejs/content/exit-codes.md

@@ -0,0 +1,18 @@
+The following exit codes are used in Node.js:
+
+- `0`: Success
+- `1`: Uncaught Fatal Exception
+- `2`: Unused
+- `3`: Internal JavaScript Parse Error
+- `4`: Internal JavaScript Evaluation Failure
+- `5`: Fatal Error
+- `6`: Non-function Internal Exception Handler
+- `7`: Internal Exception Handler Run-Time Failure
+- `8`: Unused
+- `9`: Invalid Argument
+- `10`: Internal JavaScript Run-Time Failure
+- `12`: Invalid Debug Argument
+- `13`: Uncaught Exception
+- `14`: Unhandled Promise Rejection
+- `15`: Fatal Exception
+- `16`: Signal Exits

src/data/question-groups/nodejs/content/input-from-command-line.md

@@ -0,0 +1,18 @@
+In order to take user input from the command line, you can use the `readline` module. It provides an interface for reading data from a Readable stream (such as `process.stdin`) one line at a time.
+
+```js
+import readline from 'node:readline';
+import { stdin as input, stdout as output } from 'node:process';
+
+const rl = readline.createInterface({ input, output });
+
+rl.question('What do you think of Node.js? ', (answer) => {
+  console.log(`Thank you for your valuable feedback: ${answer}`);
+  rl.close();
+});
+
+rl.on('close', () => {
+  console.log('\nBYE BYE !!!');
+  process.exit(0);
+});
+```

src/data/question-groups/nodejs/content/order-priority.md

@@ -0,0 +1,25 @@
+Order priorities of `process.nextTick`, `Promise`, `setTimeout` and `setImmediate` are as follows:
+
+1. `process.nextTick`: Highest priority, executed immediately after the current event loop cycle, before any other I/O events or timers.
+2. `Promise`: Executed in the microtask queue, after the current event loop cycle, but before the next one.
+3. `setTimeout`: Executed in the timer queue, after the current event loop cycle, with a minimum delay specified in milliseconds.
+4. `setImmediate`: Executed in the check queue, but its order may vary based on the system and load. It generally runs in the next iteration of the event loop after I/O events.
+
+```js
+console.log('start');
+Promise.resolve().then(() => console.log('Promise'));
+setTimeout(() => console.log('setTimeout'), 0);
+process.nextTick(() => console.log('process.nextTick'));
+setImmediate(() => console.log('setImmediate'));
+console.log('end');
+
+// Output:
+// start
+// end
+// process.nextTick
+// Promise
+// setTimeout
+// setImmediate
+```
+
+In summary, the order of execution is generally `process.nextTick` > `Promise` > `setTimeout` > `setImmediate`. However, keep in mind that the behavior may vary in specific situations, and the order might be influenced by factors such as system load and other concurrent operations.

src/data/question-groups/nodejs/content/process-argv.md

@@ -0,0 +1,15 @@
+`process.argv` is an array containing the command-line arguments passed when the Node.js process was launched. The first element is the path to the Node.js executable, the second element is the path to the JavaScript file being executed, and the remaining elements are the command-line arguments.
+
+```js
+node index.js hello world
+```
+
+```js
+console.log(process.argv);
+// [
+//   '/usr/local/bin/node', -> path to the Node.js executable
+//   '/Users/username/projects/nodejs/index.js', -> path to the JavaScript file being executed
+//   'hello', -> command-line argument
+//   'world' -> command-line argument
+// ]
+```

src/data/question-groups/nodejs/content/process-cwd-vs-dirname.md

@@ -0,0 +1,9 @@
+`process.cwd()` returns the current working directory of the Node.js process, while `__dirname` returns the directory name of the current module.
+
+```js
+console.log(process.cwd());
+// /Users/username/projects/nodejs
+
+console.log(__dirname);
+// /Users/username/projects/nodejs/src
+```

src/data/question-groups/nodejs/content/web-server.md

@@ -0,0 +1,14 @@
+To create a minimal `Hello, World!` HTTP server in Node.js, you can use the `http` module. It provides an HTTP server, and the createServer() method sets up a server instance with a callback function to handle incoming requests
+
+```js
+import http from 'node:http';
+
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('Hello World\n');
+});
+
+server.listen(3000, () => {
+  console.log('Server running at http://localhost:3000/');
+});
+```

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

@@ -0,0 +1,227 @@
+---
+order: 1
+briefTitle: 'Node.js'
+briefDescription: 'Test, rate and improve your Node.js knowledge with these questions.'
+title: 'Node.js Questions'
+description: 'Test, rate and improve your Node.js knowledge with these questions.'
+isNew: true
+seo:
+  title: 'Node.js Questions'
+  description: 'Curated list of Node.js questions to test, rate and improve your knowledge. Questions are based on real world experience and knowledge.'
+  keywords:
+    - 'node.js quiz'
+    - 'node.js questions'
+    - 'node.js interview questions'
+    - 'node.js interview'
+    - 'node.js test'
+sitemap:
+  priority: 1
+  changefreq: 'monthly'
+questions:
+  - question: What is Node.js?
+    answer: Node.js is an open-source and cross-platform JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is REPL in Node.js?
+    answer: |
+      REPL stands for Read-Eval-Print-Loop. It is an interactive shell that allows you to execute JavaScript code and view the output immediately. It is useful for testing small snippets of code and experimenting with the Node.js API.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is the difference between Node.js and JavaScript?
+    answer: Node.js is a runtime environment for JavaScript. JavaScript is a programming language used to create web applications. Node.js is a runtime environment that can execute JavaScript code outside of a web browser.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is Event Loop in Node.js?
+    answer: |
+      The event loop is a single-threaded loop responsible for handling all asynchronous tasks in Node.js. It continuously checks for events and executes associated callback functions, allowing Node.js to handle asynchronous tasks efficiently. Its non-blocking I/O model ensures that it can process multiple operations simultaneously without waiting for one to complete before moving on to the next, contributing to its scalability and performance. [Watch this video](https://www.youtube.com/watch?v=8aGhZQkoFbQ) to learn more about the topic.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the difference between Node.js and AJAX?
+    answer: |
+      Node.js is a server-side runtime for JavaScript, while AJAX is a client-side technique for asynchronous communication with the server.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What are modules in Node.js?
+    answer: |
+      Modules are reusable blocks of code that can be imported into other files. They are used to encapsulate related code into a single unit of code that can be used in other parts of the program. It allow us to split our code into multiple files and reuse it across multiple files. Some built-in modules include `fs`, `http`, `path`, `url`, `util`, etc.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: Difference between CommonJS and ESM?
+    answer: commonjs-vs-esm.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the `global` object in Node.js?
+    answer: |
+      The `global` object is a global namespace object that contains all global variables, functions, and objects. It is similar to the `window` object in the browser. It can be accessed from anywhere in the program without importing it.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the difference between `process.nextTick()` and `setImmediate()`?
+    answer: |
+      `process.nextTick()` and `setImmediate()` are both used to schedule a callback function to be executed in the next iteration of the event loop. The difference is that `process.nextTick()` executes the callback at the end of the current iteration of the event loop, while `setImmediate()` executes the callback at the beginning of the next iteration of the event loop.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `setInterval()`?
+    answer: |
+      `setInterval()` is a global function that helps you execute a function repeatedly at a fixed delay. It returns an interval ID that uniquely identifies the interval, which can be used to cancel the interval using the `clearInterval()` function.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is `setTimeout()`?
+    answer: |
+      `setTimeout()` is a global function that helps you execute a function after a specified delay. It returns a timeout ID that uniquely identifies the timeout, which can be used to cancel the timeout using the `clearTimeout()` function.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What are Event Emitters in Node.js?
+    answer: |
+      Event Emitters is a class that can be used to emit named events and register listeners for those events. It is used to handle asynchronous events in Node.js.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `npm`?
+    answer: |
+      `npm` is a package manager for Node.js. It is used to install, update, and remove packages from the Node.js ecosystem. It is also used to manage dependencies for Node.js projects.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is the full form of `npm`?
+    answer: |
+      `npm` stands for Node Package Manager.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is `npx`?
+    answer: |
+      `npx` is a tool that allows you to run Node.js packages without installing them. It is used to execute Node.js packages that are not installed globally.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is `process.cwd()`?
+    answer: |
+      `process.cwd()` returns the current working directory of the Node.js process. It is similar to `pwd` in Unix.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the difference between `process.cwd()` and `__dirname`?
+    answer: process-cwd-vs-dirname.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `__filename`?
+    answer: |
+      `__filename` is a global variable that contains the absolute path of the current file.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `process.argv`?
+    answer: process-argv.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the purpose of `fs` module?
+    answer: |
+      The File System (fs) module is used to perform file operations such as reading, writing, and deleting files. All file system operations have synchronous and asynchronous forms.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What is the purpose of `path` module?
+    answer: |
+      The Path module is used to perform operations on file and directory paths. It provides methods for resolving and normalizing paths, joining paths, and extracting file and directory names.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to read a file in Node.js?
+    answer: |
+      The `fs.readFile()` method is used to read the contents of a file asynchronously. It takes the path of the file to be read and a callback function as arguments. The callback function is called with two arguments, `err` and `data`. If an error occurs while reading the file, the `err` argument will contain the error object. Otherwise, the `data` argument will contain the contents of the file.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to load environment variables from a `.env` file in Node.js?
+    answer: |
+      The `dotenv` package is used to load environment variables from a `.env` file into `process.env`. It is used to store sensitive information such as API keys, database credentials, etc. in a `.env` file instead of hardcoding them in the source code.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to access environment variables in Node.js?
+    answer: |
+      Environment variables can be accessed using the `process.env` object. It is an object that contains all the environment variables defined in the current process.
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to take user input from the command line in Node.js?
+    answer: input-from-command-line.md
+    topics:
+      - 'CLI'
+      - 'Beginner'
+  - question: How to create a web server in Node.js?
+    answer: web-server.md
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: What are streams in Node.js?
+    answer: |
+      Streams are objects that allow you to read data from a source or write data to a destination in a continuous manner. They are used to handle large amounts of data efficiently.
+    topics:
+      - 'Core'
+      - 'Advanced'
+  - question: What is difference between `fork` and `spawn` methods of `child_process` module?
+    answer: |
+      The `fork` method is used when you want to run another JavaScript file in a separate worker. It's like having a friend with a specific task. You can communicate with them via messages and they can send messages back to you. The `spawn` method is used when you want to run a command in a separate process. It's like asking someone to do a specific. You can communicate with them via stdin/stdout/stderr, but it's more like giving orders and getting results.
+    topics:
+      - 'Core'
+      - 'Advanced'
+  - question: What is the `os` module?
+    answer: |
+      The `os` module provides methods for interacting with the operating system. It can be used to get information about the operating system, such as the hostname, platform, architecture, etc.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: Can you access the DOM in Node.js?
+    answer: |
+      No, you cannot access the DOM in Node.js because it does not have a DOM. It is a server-side runtime for JavaScript, so it does not have access to the browser's DOM.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is Clustering in Node.js?
+    answer: |
+      Clustering is a technique used to distribute the load across multiple processes. It is used to improve the performance and scalability of Node.js applications.
+    topics:
+      - 'Core'
+      - 'Advanced'
+  - question: How can memory leaks happen in Node.js?
+    answer: |
+      Memory leaks happen when a program allocates memory but does not release it when it is no longer needed. This can happen due to bugs in the program or due to the way the program is designed. In Node.js, memory leaks can happen due to the use of closures, circular references, and global variables.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is the order priority of `process.nextTick`, `Promise`, `setTimeout`, and `setImmediate`?
+    answer: order-priority.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `process.exit()`?
+    answer: |
+      `process.exit()` is a method that can be used to exit the current process. It takes an optional exit code as an argument. If no exit code is specified, it defaults to 0.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: Different exit codes in Node.js?
+    answer: exit-codes.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: How Node.js handle errors?
+    answer: error-handling.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+---

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

@@ -4,7 +4,7 @@ briefTitle: 'React'
 briefDescription: 'Test, rate and improve your React knowledge with these questions.'
 title: 'React Questions'
 description: 'Test, rate and improve your React knowledge with these questions.'
-isNew: true
+isNew: false
 seo:
   title: 'React Questions'
   description: 'Curated list of React questions to test, rate and improve your knowledge. Questions are based on real world experience and knowledge.'

src/data/roadmaps/ai-data-scientist/ai-data-scientist.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/ai-data-scientist.json'
 pdfUrl: '/pdfs/roadmaps/ai-data-scientist.pdf'
 order: 6
 briefTitle: 'AI and Data Scientist'
-briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2023'
+briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 title: 'AI and Data Scientist Roadmap'
-description: 'Step by step guide to becoming an AI and Data Scientist in 2023'
+description: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 hasTopics: true
 isNew: true
 dimensions:
@@ -21,8 +21,8 @@ seo:
   title: 'AI and Data Scientist Roadmap'
   description: 'Learn to become an AI and Data Scientist using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.'
   keywords:
-    - 'ai and data scientist roadmap 2023'
-    - 'ai and data scientist roadmap 2023'
+    - 'ai and data scientist roadmap 2024'
+    - 'ai and data scientist roadmap 2024'
     - 'guide to becoming an ai and data scientist'
     - 'ai and data scientist roadmap'
     - 'ai scientist'

src/data/roadmaps/android/android.md

@@ -2,17 +2,17 @@
 pdfUrl: '/pdfs/roadmaps/android.pdf'
 order: 4
 briefTitle: 'Android'
-briefDescription: 'Step by step guide to becoming an Android Developer in 2023'
+briefDescription: 'Step by step guide to becoming an Android Developer in 2024'
 title: 'Android Developer'
-description: 'Step by step guide to becoming an Android developer in 2023'
+description: 'Step by step guide to becoming an Android developer in 2024'
 hasTopics: true
-isNew: true
+isNew: false
 dimensions:
   width: 968
   height: 2197.76
 schema:
   headline: 'Android Developer Roadmap'
-  description: 'Learn how to become a Android Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Android Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/android.png'
   datePublished: '2023-01-24'
   dateModified: '2023-10-24'

src/data/roadmaps/android/content/101-the-fundamentals/104-using-gradle.md

@@ -1,3 +1,9 @@
 # What is and how to use Gradle?
 
-**Using Gradle**: Gradle is a powerful build system used in Android development that allows you to define your project and dependencies, and distinguish between different build types and flavors. Gradle uses a domain-specific language (DSL) which gives developers almost complete control over the build process. When you trigger a build in Android Studio, Gradle is the tool working behind the scenes to compile and package your app. It looks at the dependencies you declared in your build.gradle files and creates a build script accordingly. Using Gradle in android development requires continuous editing of the build.gradle files to manage app dependencies, build variants, signing configurations and other essential aspects related to building your app. 
+**Using Gradle**: Gradle is a powerful build system used in Android development that allows you to define your project and dependencies, and distinguish between different build types and flavors. Gradle uses a domain-specific language (DSL) which gives developers almost complete control over the build process. When you trigger a build in Android Studio, Gradle is the tool working behind the scenes to compile and package your app. It looks at the dependencies you declared in your build.gradle files and create a build script accordingly. Using Gradle in Android development requires continuous editing of the build.gradle files to manage app dependencies, build variants, signing configurations, and other essential aspects related to building your app. 
+
+Visit the following resources to learn more:
+
+- [Introduction to Gradle for Complete Beginners - 25minutes](https://youtu.be/-dtcEMLNmn0?si=NuIP-3wNpUrxfTxA)
+- [Gradle Course for Beginners - 55minutes](https://www.youtube.com/watch?v=R6Z-Sxb837I)
+

src/data/roadmaps/angular/angular.md

@@ -3,16 +3,16 @@ jsonUrl: '/jsons/roadmaps/angular.json'
 pdfUrl: '/pdfs/roadmaps/angular.pdf'
 order: 3
 briefTitle: 'Angular'
-briefDescription: 'Step by step guide to become a Angular Developer in 2023'
+briefDescription: 'Step by step guide to become a Angular Developer in 2024'
 title: 'Angular Developer'
-description: 'Everything that is there to learn about Angular and the ecosystem in 2023.'
+description: 'Everything that is there to learn about Angular and the ecosystem in 2024.'
 hasTopics: true
 dimensions:
   width: 968
   height: 2277.8
 schema:
   headline: 'Angular Developer Roadmap'
-  description: 'Learn how to become a Angular Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Angular Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/angular.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/aspnet-core/aspnet-core.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/aspnet-core.json'
 pdfUrl: '/pdfs/roadmaps/aspnet-core.pdf'
 order: 9
 briefTitle: 'ASP.NET Core'
-briefDescription: 'Step by step guide to becoming an ASP.NET Core Developer in 2023'
+briefDescription: 'Step by step guide to becoming an ASP.NET Core Developer in 2024'
 title: 'ASP.NET Core Developer'
-description: 'Step by step guide to becoming an ASP.NET core developer in 2023'
+description: 'Step by step guide to becoming an ASP.NET core developer in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 2773.45
 schema:
   headline: 'ASP.NET Core Developer Roadmap'
-  description: 'Learn how to become a ASP.NET Core Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a ASP.NET Core Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/aspnet-core.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/aws/aws.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/aws.json'
 pdfUrl: '/pdfs/roadmaps/aws.pdf'
 order: 14
 briefTitle: 'AWS'
-briefDescription: 'Step by step guide to learning AWS in 2023'
+briefDescription: 'Step by step guide to learning AWS in 2024'
 title: 'AWS Roadmap'
-description: 'Step by step guide to learning AWS in 2023'
+description: 'Step by step guide to learning AWS in 2024'
 isNew: true
 hasTopics: true
 dimensions:
@@ -13,20 +13,20 @@ dimensions:
   height: 2183.87
 schema:
   headline: 'AWS Roadmap'
-  description: 'Learn how to use AWS with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to use AWS with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/aws.png'
   datePublished: '2023-11-29'
   dateModified: '2023-11-29'
 seo:
   title: 'AWS Roadmap - roadmap.sh'
-  description: 'Step by step guide to learn AWS in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Step by step guide to learn AWS in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   keywords:
     - 'aws tutorial'
     - 'step by step guide for aws'
     - 'aws for beginners'
     - 'how to learn aws'
     - 'use aws in production'
-    - 'aws roadmap 2023'
+    - 'aws roadmap 2024'
     - 'guide to learning aws'
     - 'aws roadmap'
     - 'aws learning path'

src/data/roadmaps/backend/backend.md

@@ -3,16 +3,16 @@ jsonUrl: '/jsons/roadmaps/backend.json'
 pdfUrl: '/pdfs/roadmaps/backend.pdf'
 order: 2
 briefTitle: 'Backend'
-briefDescription: 'Step by step guide to becoming a backend developer in 2023'
+briefDescription: 'Step by step guide to becoming a backend developer in 2024'
 title: 'Backend Developer'
-description: 'Step by step guide to becoming a modern backend developer in 2023'
+description: 'Step by step guide to becoming a modern backend developer in 2024'
 hasTopics: true
 isForkable: true
 tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
 question:
   title: 'What is Backend Development?'
   description: |
-    Backend web development is the part of web development that deals with the server-side of a web application. This includes creating and managing the server-side logic, connecting the application to a database, creating server-side APIs, handling user authentication and authorization, and processing and responding to user requests. It often involves the use of programming languages such as Python, Java, Ruby, PHP, JavaScript (Node.js), and .NET languages.
+    Backend web development is the part of web development that deals with the server-side of a web application. This includes creating and managing the server-side logic, connecting the application to a database, creating server-side APIs, handling user authentication and authorization, and processing and responding to user requests. It often involves the use of [backend development languages](https://roadmap.sh/backend/languages) such as Python, Java, Ruby, PHP, JavaScript (Node.js), and .NET languages.
 
     ## What does a Backend Developer do?
     A backend developer is responsible for the development of server-side components of a web application i.e. working with databases, handling requests, creating server-side APIs that can be consumed by frontend developers to retrieve and manipulate data, ensuring the scalability of the systems i.e. making sure that the backend can handle a high volume of traffic and is performant, integrating external services like payment gateways, message queues, cloud services, etc.
@@ -29,8 +29,8 @@ seo:
   title: 'Backend Developer Roadmap: What is Backend Development?'
   description: 'Learn what backend development is, what backend developers do and how to become one using our community-driven roadmap.'
   keywords:
-    - 'backend roadmap 2023'
-    - 'backend developer roadmap 2023'
+    - 'backend roadmap 2024'
+    - 'backend developer roadmap 2024'
     - 'guide to becoming a developer'
     - 'guide to becoming a backend developer'
     - 'backend roadmap'

src/data/roadmaps/backend/content/103-learn-a-language/100-go.md

@@ -7,7 +7,6 @@ Visit the following resources to learn more:
 - [Visit Dedicated Go Roadmap](/golang)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
-- [Learn Go | Boot.dev](https://boot.dev/learn/learn-golang)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
 - [Learn Go | Codecademy](https://www.codecademy.com/learn/learn-go)
 - [W3Schools Go Tutorial ](https://www.w3schools.com/go/)

src/data/roadmaps/backend/content/103-learn-a-language/102-java.md

@@ -10,4 +10,4 @@ Visit the following resources to learn more:
 - [Codeacademy - Free Course](https://www.codecademy.com/learn/learn-java)
 - [W3 Schools Tutorials](https://www.w3schools.com/java/)
 - [Java Crash Course](https://www.youtube.com/watch?v=eIrMbAQSU34)
-- [Complete Java course](https://www.youtube.com/watch?v=xk4_1vdrzzo)
+- [Complete Java course](https://www.youtube.com/watch?v=xk4_1vDrzzo)

src/data/roadmaps/backend/content/111-web-security-knowledge/105-https.md

@@ -10,7 +10,7 @@ Visit the following resources to learn more:
 
 - [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
 - [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
-- [Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)
+- [Enabling HTTPS on Your Servers](https://web.dev/articles/enable-https)
 - [How HTTPS works (comic)](https://howhttps.works/)
 - [SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig)
 - [HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)

src/data/roadmaps/blockchain/blockchain.json

@@ -8137,7 +8137,7 @@
           "x": "426",
           "y": "1521",
           "properties": {
-            "controlName": "103-smart-contract-frameworks:dapp-tools"
+            "controlName": "103-smart-contract-frameworks:foundry"
           },
           "children": {
             "controls": {

src/data/roadmaps/blockchain/blockchain.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/blockchain.json'
 pdfUrl: '/pdfs/roadmaps/blockchain.pdf'
 order: 6
 briefTitle: 'Blockchain'
-briefDescription: 'Step by step guide to becoming a blockchain developer in 2023'
+briefDescription: 'Step by step guide to becoming a blockchain developer in 2024'
 title: 'Blockchain Developer'
-description: 'Step by step guide to becoming a blockchain developer in 2023.'
+description: 'Step by step guide to becoming a blockchain developer in 2024.'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 2173.87
 schema:
   headline: 'Blockchain Developer Roadmap'
-  description: 'Learn how to become a Blockchain Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Blockchain Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/blockchain.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'
@@ -21,11 +21,11 @@ seo:
   title: 'Blockchain Developer Roadmap: Learn to become a blockchain developer'
   description: 'Learn to become a blockchain developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.'
   keywords:
-    - 'blockchain roadmap 2023'
+    - 'blockchain roadmap 2024'
     - 'web3 developer roadmap'
-    - 'web3 developer roadmap 2023'
+    - 'web3 developer roadmap 2024'
     - 'web3 roadmap'
-    - 'blockchain developer roadmap 2023'
+    - 'blockchain developer roadmap 2024'
     - 'guide to becoming a blockchain developer'
     - 'guide to becoming a blockchain developer'
     - 'blockchain roadmap'

src/data/roadmaps/blockchain/content/100-blockchain-basics/102-why-blockchain-matters.md

@@ -6,7 +6,7 @@ This decentralization enables use-cases that were previously impossible, such as
 
 Visit the following resources to learn more:
 
-- [Why Blockchain?](https://www.blockchain.education/blockchain101/blockchain)
+- [Why Blockchain?](https://chain.link/education-hub/blockchain)
 - [What Is The Blockchain And Why Does It Matter?](https://www.forbes.com/sites/theyec/2020/05/18/what-is-the-blockchain-and-why-does-it-matter/)
 - [Web3/Crypto: Why Bother?](https://continuations.com/post/671863718643105792/web3crypto-why-bother)
 - [Why is Blockchain Important and Why Does it Matter](https://www.simplilearn.com/tutorials/blockchain-tutorial/why-is-blockchain-important)

src/data/roadmaps/blockchain/content/100-blockchain-basics/index.md

@@ -4,7 +4,7 @@ A blockchain is a decentralized, distributed, and oftentimes public, digital led
 
 Visit the following resources to learn more:
 
-- [Introduction to Blockchain](https://www.blockchain.education/blockchain101/blockchain)
+- [Introduction to Blockchain](https://chain.link/education-hub/blockchain)
 - [Blockchain Explained](https://www.investopedia.com/terms/b/blockchain.asp)
 - [How does a blockchain work?](https://youtu.be/SSo_EIwHSd4)
 - [What Is a Blockchain? | Blockchain Basics for Developers](https://youtu.be/4ff9esY_4aU)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/106-cryptography.md

@@ -8,4 +8,3 @@ Visit the following resources to learn more:
 - [What is Cryptography](https://www.synopsys.com/glossary/what-is-cryptography.html)
 - [Asymmetric Encryption - Simply explained](https://youtu.be/AQDCe585Lnc)
 - [What is Cryptography?](https://www.youtube.com/watch?v=6_Cxj5WKpIw)
-- [Learn Cryptography](https://www.youtube.com/watch?v=trHox1bN5es)

src/data/roadmaps/blockchain/content/102-blockchain-oracles/index.md

@@ -1,6 +1,6 @@
 # Blockchain Oracles
 
-A blockchain oracle is a third-party service that connects smart contracts with the outside world, primarily to feed information in from the world, but also the reverse. Information from the world encapsulates multiple sources so that decentralised knowledge is obtained.
+A blockchain oracle is a third-party service that connects smart contracts with the outside world, primarily to feed information in from the world, but also the reverse. Information from the world encapsulates multiple sources so that decentralized knowledge is obtained.
 
 Visit the following resources to learn more:
 

src/data/roadmaps/blockchain/content/103-smart-contracts/index.md

@@ -4,6 +4,6 @@ A smart contract is a computer program or a transaction protocol that is intende
 
 Visit the following resources to learn more:
 
-- [Smart Contracts Introduction](https://www.blockchain.education/blockchain101/smart-contracts)
+- [Smart Contracts Introduction](https://chain.link/education/smart-contracts)
 - [What Is a Smart Contract?](https://chain.link/education/smart-contracts)
 - [Smart contracts - Simply Explained](https://youtu.be/ZE2HxTmxfrI)

src/data/roadmaps/blockchain/content/109-dapps/107-supporting-languages/102-go.md

@@ -7,7 +7,6 @@ Visit the following resources to learn more:
 - [Visit Dedicated Go Roadmap](/golang)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
-- [Learn Go | Boot.dev](https://boot.dev/learn/learn-golang)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
 - [Learn Go | Codecademy](https://www.codecademy.com/learn/learn-go)
 - [W3Schools Go Tutorial ](https://www.w3schools.com/go/)

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

@@ -1,6 +1,6 @@
 # dApps
 
-A decentralised application (dApp) is an application that can operate autonomously, through the use of smart contracts that run on a blockchain. Like traditional applications, dApps provide some function or utility to its users.
+A decentralized application (dApp) is an application that can operate autonomously, through the use of smart contracts that run on a blockchain. Like traditional applications, dApps provide some function or utility to its users.
 
 Visit the following resources to learn more:
 

src/data/roadmaps/code-review/code-review.md

@@ -26,7 +26,7 @@ seo:
     - 'code review for beginners'
     - 'code reviews'
     - 'code review best practices'
-    - 'code review roadmap 2023'
+    - 'code review roadmap 2024'
     - 'guide to learning code review'
     - 'code review roadmap'
     - 'code review learning path'

src/data/roadmaps/code-review/content/103-implementation-semantics.md

@@ -3,8 +3,8 @@
 - Does it satisfy the original requirements?
 - Is it logically correct?
 - Is there no unnecessary complexity?
-- Is it robust (no concurrency issues, proper error handling, etc.)?
+- Is it robust (i.e., no concurrency issues, proper error handling, etc.)?
 - Is it performant?
-- Is it secure e.g., no SQL injections, etc?
-- Is it observable e.g., metrics, logging, tracing, etc.?
+- Is it secure (i.e., no SQL injections, etc.)?
+- Is it observable (i.e., metrics, logging, tracing, etc.)?
 - Do newly added dependencies pull their weight? Is their license acceptable?

src/data/roadmaps/computer-science/computer-science.md

@@ -23,10 +23,10 @@ seo:
   keywords:
     - 'computer science roadmap'
     - 'computer science'
-    - 'computer science roadmap 2023'
+    - 'computer science roadmap 2024'
     - 'guide to computer science'
     - 'software engineer roadmap'
-    - 'software engineer roadmap 2023'
+    - 'software engineer roadmap 2024'
     - 'self-taught computer science roadmap'
     - 'computer science skills'
     - 'computer science skills test'

src/data/roadmaps/computer-science/content/101-pick-a-language/104-go.md

@@ -8,7 +8,6 @@ Visit the following resources to learn more:
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
-- [Learn Go | Boot.dev](https://boot.dev/learn/learn-golang)
 - [Learn Go | Codecademy](https://www.codecademy.com/learn/learn-go)
 - [W3Schools Go Tutorial ](https://www.w3schools.com/go/)
 - [Making a RESTful JSON API in Go](https://thenewstack.io/make-a-restful-json-api-go/)

src/data/roadmaps/cpp/cpp.md

@@ -3,17 +3,17 @@ jsonUrl: '/jsons/roadmaps/cpp.json'
 pdfUrl: '/pdfs/roadmaps/cpp.pdf'
 order: 10
 briefTitle: 'C++'
-briefDescription: 'Step by step guide to becoming a C++ Developer in 2023'
+briefDescription: 'Step by step guide to becoming a C++ Developer in 2024'
 title: 'C++ Developer Roadmap'
-description: 'Step by step guide to becoming a C++ developer in 2023'
-isNew: true
+description: 'Step by step guide to becoming a C++ developer in 2024'
+isNew: false
 hasTopics: true
 dimensions:
   width: 1000
   height: 2639.34
 schema:
   headline: 'C++ Developer Roadmap'
-  description: 'Learn how to become a C++ Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a C++ Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/cpp.png'
   datePublished: '2023-06-01'
   dateModified: '2023-06-01'

src/data/roadmaps/cyber-security/cyber-security.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/cyber-security.json'
 pdfUrl: '/pdfs/roadmaps/cyber-security.pdf'
 order: 11
 briefTitle: 'Cyber Security'
-briefDescription: 'Step by step guide to becoming a Cyber Security Expert in 2023'
+briefDescription: 'Step by step guide to becoming a Cyber Security Expert in 2024'
 title: 'Cyber Security Expert'
-description: 'Step by step guide to becoming a Cyber Security Expert in 2023'
+description: 'Step by step guide to becoming a Cyber Security Expert in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 3316.15
 schema:
   headline: 'Cyber Security Roadmap: Learn to become a Cyber Security Expert'
-  description: 'Learn how to become a Cyber Security expert with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Cyber Security expert with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/cyber-security.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/design-system/design-system.md

@@ -14,7 +14,7 @@ dimensions:
   height: 2309.7
 schema:
   headline: 'Design System Roadmap'
-  description: 'Learn how to create a Design System with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to create a Design System with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/design-system.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-19'

src/data/roadmaps/devops/content/100-language/102-javascript.md

@@ -13,4 +13,4 @@ Visit the following resources to learn more:
 - [Node.js Tutorial for Beginners](https://www.youtube.com/watch?v=TlB_eWDSMt4)
 - [W3Schools – Node.js Tutorial](https://www.w3schools.com/nodejs/)
 - [What is NPM?](https://www.w3schools.com/nodejs/nodejs_npm.asp)
-- [Official Documentation](https://nodejs.dev/en/learn/)
+- [Official Documentation](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs)

src/data/roadmaps/devops/content/100-language/103-go.md

@@ -7,7 +7,6 @@ Visit the following resources to learn more:
 - [Visit Dedicated Go Roadmap](/golang)
 - [A Tour of Go – Go Basics](https://go.dev/tour/welcome/1)
 - [Go Reference Documentation](https://go.dev/doc/)
-- [Learn Go | Boot.dev](https://boot.dev/learn/learn-golang)
 - [Go by Example - annotated example programs](https://gobyexample.com/)
 - [Learn Go | Codecademy](https://www.codecademy.com/learn/learn-go)
 - [W3Schools Go Tutorial ](https://www.w3schools.com/go/)

src/data/roadmaps/devops/content/107-cloud-providers/100-aws.md

@@ -8,6 +8,8 @@ Visit the following resources to learn more:
 
 - [AWS Website](https://aws.amazon.com/)
 - [AWS Documentation](https://docs.aws.amazon.com/)
+- [AWS Cloud Essentials](https://aws.amazon.com/getting-started/cloud-essentials/)
+- [Overview of Amazon Web Services](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/introduction.html)
 - [Sign up for AWS](https://portal.aws.amazon.com/billing/signup)
 - [How to learn AWS](https://cs.fyi/guide/how-to-learn-aws/)
 - [AWS Ramp Up Guide](https://d1.awsstatic.com/training-and-certification/ramp-up_guides/Ramp-Up_Guide_CloudPractitioner.pdf)
@@ -16,4 +18,4 @@ Visit the following resources to learn more:
 - [AWS Tutorial for Beginners](https://www.youtube.com/watch?v=k1RI5locZE4&t=129s)
 - [AWS Course for Beginners](https://www.coursera.org/learn/aws-cloud-technical-essentials?specialization=aws-devops)
 - [DevOps on AWS Course ](https://www.coursera.org/specializations/aws-devops?#courses)
-- [AWS Practitioner ](https://youtu.be/SOTamWNgDKc)
+- [AWS Practitioner ](https://youtu.be/SOTamWNgDKc)

src/data/roadmaps/devops/content/119-gitops/100-argo-cd.md

@@ -8,5 +8,5 @@ Argo CD is designed to be a simple and efficient way to manage cloud-native appl
 
 Visit the following resources to learn more:
 
-- [Argo CD - Argo Project](https://argoproj.github.io/docs/argo-cd/)
+- [Argo CD - Argo Project](https://argo-cd.readthedocs.io/en/stable/)
 - [ArgoCD Tutorial for Beginners](https://www.youtube.com/watch?v=MeU5_k9ssrs)

src/data/roadmaps/devops/devops.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/devops.json'
 pdfUrl: '/pdfs/roadmaps/devops.pdf'
 order: 3
 briefTitle: 'DevOps'
-briefDescription: 'Step by step guide for DevOps or operations role in 2023'
+briefDescription: 'Step by step guide for DevOps or operations role in 2024'
 title: 'DevOps Roadmap'
-description: 'Step by step guide for DevOps, SRE or any other Operations Role in 2023'
+description: 'Step by step guide for DevOps, SRE or any other Operations Role in 2024'
 hasTopics: true
 isForkable: true
 tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
@@ -31,9 +31,9 @@ seo:
   title: 'DevOps Roadmap: Learn to become a DevOps Engineer or SRE'
   description: 'Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in our community-driven roadmap.'
   keywords:
-    - 'devops roadmap 2023'
-    - 'sre roadmap 2023'
-    - 'operations roadmap 2023'
+    - 'devops roadmap 2024'
+    - 'sre roadmap 2024'
+    - 'operations roadmap 2024'
     - 'guide to becoming a devops engineer'
     - 'devops roadmap'
     - 'sre roadmap'

src/data/roadmaps/docker/docker.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/docker.json'
 pdfUrl: '/pdfs/roadmaps/docker.pdf'
 order: 14
 briefTitle: 'Docker'
-briefDescription: 'Step by step guide to learning Docker in 2023'
+briefDescription: 'Step by step guide to learning Docker in 2024'
 title: 'Docker Roadmap'
-description: 'Step by step guide to learning Docker in 2023'
+description: 'Step by step guide to learning Docker in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,13 +13,13 @@ dimensions:
   height: 1808.98
 schema:
   headline: 'Docker Roadmap'
-  description: 'Learn how to use Docker with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to use Docker with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/docker.png'
   datePublished: '2023-05-10'
   dateModified: '2023-05-10'
 seo:
   title: 'Docker Roadmap - roadmap.sh'
-  description: 'Step by step guide to learn Docker in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Step by step guide to learn Docker in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   keywords:
     - 'docker tutorial'
     - 'step by step guide for docker'

src/data/roadmaps/flutter/flutter.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/flutter.json'
 pdfUrl: '/pdfs/roadmaps/flutter.pdf'
 order: 10
 briefTitle: 'Flutter'
-briefDescription: 'Step by step guide to becoming a Flutter Developer in 2023'
+briefDescription: 'Step by step guide to becoming a Flutter Developer in 2024'
 title: 'Flutter Developer'
-description: 'Step by step guide to becoming a Flutter developer in 2023'
+description: 'Step by step guide to becoming a Flutter developer in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 2042.2
 schema:
   headline: 'Flutter Developer Roadmap'
-  description: 'Learn how to become a Flutter Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Flutter Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/flutter.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md

@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [Esbuild Official Website](https://esbuild.github.io/)
 - [Esbuild Documentation](https://esbuild.github.io/api/)
 - [Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU)
-- [What Is ESBuild?](https://www.youtube.com/watch?v=zy8vu8cbwf0)
+- [What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0)

src/data/roadmaps/frontend/content/115-testing-your-apps/100-jest.md

@@ -6,3 +6,4 @@ It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and m
 Visit the following resources to learn more:
 
 - [Jest Website](https://jestjs.io/)
+- [JavaScript Testing With Jest](https://youtu.be/IPiUDhwnZxA?si=2_lE2bDo2fRuo2CU)

src/data/roadmaps/frontend/frontend.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/frontend.json'
 pdfUrl: '/pdfs/roadmaps/frontend.pdf'
 order: 1
 briefTitle: 'Frontend'
-briefDescription: 'Step by step guide to becoming a frontend developer in 2023'
+briefDescription: 'Step by step guide to becoming a frontend developer in 2024'
 title: 'Frontend Developer'
-description: 'Step by step guide to becoming a modern frontend developer in 2023'
+description: 'Step by step guide to becoming a modern frontend developer in 2024'
 hasTopics: true
 isForkable: true
 tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
@@ -29,9 +29,9 @@ seo:
   title: 'Frontend Developer Roadmap: What is Frontend Development?'
   description: 'Learn what Frontend Development is, what frontend developers do and how to become a modern frontend developer using our community-driven roadmap.'
   keywords:
-    - 'javascript roadmap 2023'
-    - 'frontend roadmap 2023'
-    - 'frontend developer roadmap 2023'
+    - 'javascript roadmap 2024'
+    - 'frontend roadmap 2024'
+    - 'frontend developer roadmap 2024'
     - 'guide to becoming a developer'
     - 'guide to becoming a frontend developer'
     - 'frontend developer'

src/data/roadmaps/full-stack/content/113-nodejs.md

@@ -5,6 +5,6 @@ Node.js is an open-source and cross-platform JavaScript runtime environment. It
 Visit the following resources to learn more:
 
 - [Official Website](https://nodejs.org/en/about/)
-- [Learn Node.js Official Website](https://nodejs.dev/en/learn/)
+- [Learn Node.js Official Website](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs)
 - [Node.JS Introduction](https://www.w3schools.com/nodejs/nodejs_intro.asp)
 - [Node.js and Express.js Full Course](https://www.youtube.com/watch?v=Oe421EPjeBE)

src/data/roadmaps/full-stack/full-stack.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/full-stack.json'
 pdfUrl: '/pdfs/roadmaps/full-stack.pdf'
 order: 3
 briefTitle: 'Full Stack'
-briefDescription: 'Step by step guide to becoming a full stack developer in 2023'
+briefDescription: 'Step by step guide to becoming a full stack developer in 2024'
 title: 'Full Stack Developer'
-description: 'Step by step guide to becoming a modern full stack developer in 2023'
+description: 'Step by step guide to becoming a modern full stack developer in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -17,7 +17,7 @@ question:
     Full stack development is the practice of being proficient in both the front-end and back-end aspects of web application development. A full stack developer is capable of working on all layers of a software application, from the user interface and user experience (front-end) to the server, database, and server-side logic (back-end). This versatility allows them to create and maintain complete web applications independently or as part of a development team.
 schema:
   headline: 'Full Stack Developer Roadmap'
-  description: 'Learn how to become a Full Stack Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Full Stack Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/full-stack.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'
@@ -25,9 +25,9 @@ seo:
   title: 'Full Stack Developer Roadmap'
   description: 'Learn to become a modern full stack developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern full stack development.'
   keywords:
-    - 'javascript roadmap 2023'
-    - 'full stack roadmap 2023'
-    - 'full stack developer roadmap 2023'
+    - 'javascript roadmap 2024'
+    - 'full stack roadmap 2024'
+    - 'full stack developer roadmap 2024'
     - 'guide to becoming a developer'
     - 'guide to becoming a full stack developer'
     - 'full stack developer'

src/data/roadmaps/game-developer/game-developer.md

@@ -2,9 +2,9 @@
 pdfUrl: '/pdfs/roadmaps/game-developer.pdf'
 order: 17
 briefTitle: 'Game Developer'
-briefDescription: 'Roadmap to becoming a Game Developer in 2023'
+briefDescription: 'Roadmap to becoming a Game Developer in 2024'
 title: 'Game Developer'
-description: 'Roadmap to becoming a Game Developer in 2023'
+description: 'Roadmap to becoming a Game Developer in 2024'
 hasTopics: true
 isNew: true
 dimensions:
@@ -20,8 +20,8 @@ seo:
   title: 'Game Developer Roadmap'
   description: 'Learn what game development is, what game developers do and how to become one using our community-driven roadmap.'
   keywords:
-    - 'game developer roadmap 2023'
-    - 'game developer roadmap 2023'
+    - 'game developer roadmap 2024'
+    - 'game developer roadmap 2024'
     - 'guide to becoming a developer'
     - 'guide to becoming a game developer'
     - 'game developer roadmap'

src/data/roadmaps/golang/golang.md

@@ -3,16 +3,16 @@ jsonUrl: '/jsons/roadmaps/golang.json'
 pdfUrl: '/pdfs/roadmaps/golang.pdf'
 order: 11
 briefTitle: 'Go'
-briefDescription: 'Step by step guide to becoming a Go developer in 2023'
+briefDescription: 'Step by step guide to becoming a Go developer in 2024'
 title: 'Go Developer'
-description: 'Step by step guide to becoming a Go developer in 2023'
+description: 'Step by step guide to becoming a Go developer in 2024'
 hasTopics: true
 dimensions:
   width: 968
   height: 1495.21
 schema:
   headline: 'Go Developer Roadmap'
-  description: 'Learn how to become a Go Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Go Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/golang.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/graphql/graphql.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/graphql.json'
 pdfUrl: '/pdfs/roadmaps/graphql.pdf'
 order: 12
 briefTitle: 'GraphQL'
-briefDescription: 'Step by Step guide to learn GraphQL in 2023'
+briefDescription: 'Step by Step guide to learn GraphQL in 2024'
 title: 'GraphQL'
-description: 'Step by step guide to learn GraphQL in 2023'
+description: 'Step by step guide to learn GraphQL in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 1669.8
 schema:
   headline: 'GraphQL Roadmap'
-  description: 'Learn how to use GraphQL with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to use GraphQL with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/graphql.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/java/java.md

@@ -3,16 +3,16 @@ jsonUrl: '/jsons/roadmaps/java.json'
 pdfUrl: '/pdfs/roadmaps/java.pdf'
 order: 9
 briefTitle: 'Java'
-briefDescription: 'Step by step guide to becoming a Java Developer in 2023'
+briefDescription: 'Step by step guide to becoming a Java Developer in 2024'
 title: 'Java Developer'
-description: 'Step by step guide to becoming a Java developer in 2023'
+description: 'Step by step guide to becoming a Java developer in 2024'
 hasTopics: true
 dimensions:
   width: 968
   height: 1167.29
 schema:
   headline: 'Java Developer Roadmap'
-  description: 'Learn how to become a Java Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to become a Java Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/java.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/javascript/content/100-javascript-introduction/102-javascript-versions.md

@@ -1,8 +1,9 @@
 # Javascript Versions
 
-JavaScript was invented by Brendan Eich, and in 1997 it became an ECMA standard. ECMAScript is the official language name. ECMAScript versions include ES1, ES2, ES3, ES5, and ES6
+JavaScript, invented by Brendan Eich, achieved the status of an ECMA standard in 1997 and adopted the official name ECMAScript. This language has evolved through several versions, namely ES1, ES2, ES3, ES5, and the transformative ES6. These updates have played a crucial role in improving and standardizing JavaScript, making it widely used and valuable in the ever-changing field of web development.
 
 Visit the following resources to learn more:
 
 - [JavaScript Versions: How JavaScript has changed over the years](https://www.educative.io/blog/javascript-versions-history)
 - [Brief History of JavaScript](https://roadmap.sh/guides/history-of-javascript)
+- [JavaScript Version](https://www.w3schools.com/js/js_versions.asp)

src/data/roadmaps/javascript/content/107-javascript-control-flow/100-exception-handling/index.md

@@ -5,4 +5,4 @@ In JavaScript, all exceptions are simply objects. While the majority of exceptio
 Visit the following resources to learn more:
 
 - [Throwing Exceptions in JavaScript](https://rollbar.com/guides/javascript/how-to-throw-exceptions-in-javascript)
-- [try, catch, finally, throw (video)](https://youtu.be/cftftueq-10)
+- [try, catch, finally, throw (video)](https://youtu.be/cFTFtuEQ-10)

src/data/roadmaps/javascript/content/108-javascript-expressions-and-operators/index.md

@@ -1,6 +1,6 @@
 # Expressions and Operators
 
-At a high level, an expression is a valid unit of code that resolves to a value. There are two types of expressions: those that have side effects (such as assigning values) and those that purely evaluate. The expression `x = 7` is an example of the first type. This expression uses the `=` operator to assign the value seven to the variable x. The expression itself evaluates to 7. The expression `3 + 4` is an example of the second type. This expression uses the `+` operator to add `3` and `4` together and produces a value, `7`. However, if it's not eventually part of a bigger construct (for example, a variable declaration like const `z = 3 + 4`), its result will be immediately discarded `—` this is usually a programmer mistake because the evaluation doesn't produce any effects. As the examples above also illustrate, all complex expressions are joined by operators, such as `=` and `+`.
+At a high level, an expression is a valid unit of code that resolves to a value. There are two types of expressions: those that have side effects (such as assigning values) and those that purely evaluate. The expression `x = 7` is an example of the first type. This expression uses the `=` operator to assign the value seven to the variable x. The expression itself evaluates to 7. The expression `3 + 4` is an example of the second type. This expression uses the `+` operator to add `3` and `4` together and produces a value, `7`. However, if it's not eventually part of a bigger construct (for example, a variable declaration like `const z = 3 + 4`), its result will be immediately discarded `—` this is usually a programmer mistake because the evaluation doesn't produce any effects. As the examples above also illustrate, all complex expressions are joined by operators, such as `=` and `+`.
 
 Visit the following resources to learn more:
 

src/data/roadmaps/javascript/javascript.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/javascript.json'
 pdfUrl: '/pdfs/roadmaps/javascript.pdf'
 order: 5
 briefTitle: 'JavaScript'
-briefDescription: 'Step by step guide to learn JavaScript in 2023'
+briefDescription: 'Step by step guide to learn JavaScript in 2024'
 title: 'JavaScript Roadmap'
-description: 'Step by step guide to learn JavaScript in 2023'
+description: 'Step by step guide to learn JavaScript in 2024'
 isNew: false
 hasTopics: true
 dimensions:
@@ -13,7 +13,7 @@ dimensions:
   height: 2438.9
 schema:
   headline: 'JavaScript Roadmap'
-  description: 'Learn JavaScript with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn JavaScript with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/javascript.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'
@@ -21,11 +21,11 @@ seo:
   title: 'JavaScript Developer Roadmap: Step by step guide to learn JavaScript'
   description: 'Community driven, articles, resources, guides, interview questions, quizzes for javascript development. Learn to become a modern JavaScript developer by following the steps, skills, resources and guides listed in this roadmap.'
   keywords:
-    - 'javascript guide 2023'
+    - 'javascript guide 2024'
     - 'learn javascript'
     - 'step by step javascript guide'
-    - 'javascript roadmap 2023'
-    - 'javascript developer roadmap 2023'
+    - 'javascript roadmap 2024'
+    - 'javascript developer roadmap 2024'
     - 'guide to becoming a javascript developer'
     - 'javascript developer roadmap'
     - 'javascript roadmap'

src/data/roadmaps/kubernetes/kubernetes.md

@@ -3,9 +3,9 @@ jsonUrl: '/jsons/roadmaps/kubernetes.json'
 pdfUrl: '/pdfs/roadmaps/kubernetes.pdf'
 order: 14
 briefTitle: 'Kubernetes'
-briefDescription: 'Step by step guide to learning Kubernetes in 2023'
+briefDescription: 'Step by step guide to learning Kubernetes in 2024'
 title: 'Kubernetes Roadmap'
-description: 'Step by step guide to learning Kubernetes in 2023'
+description: 'Step by step guide to learning Kubernetes in 2024'
 isNew: false
 hasTopics: true
 tnsBannerLink: 'https://thenewstack.io/kubernetes?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
@@ -14,17 +14,17 @@ dimensions:
   height: 1785.73
 schema:
   headline: 'Kubernetes Roadmap'
-  description: 'Learn how to use Kubernetes with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Learn how to use Kubernetes with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/kubernetes.png'
   datePublished: '2023-05-04'
   dateModified: '2023-05-04'
 seo:
   title: 'Kubernetes Roadmap - roadmap.sh'
-  description: 'Step by step guide to learn Kubernetes in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  description: 'Step by step guide to learn Kubernetes in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   keywords:
     - 'kubernetes tutorial'
     - 'step by step kubernetes'
-    - 'kubernetes roadmap 2023'
+    - 'kubernetes roadmap 2024'
     - 'guide to learning kubernetes'
     - 'kubernetes roadmap'
     - 'kubernetes'

src/data/roadmaps/mlops/content/100-programming-fundamentals/100-python.md

@@ -0,0 +1,12 @@
+# Python
+
+Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its significant use of indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects. Python is dynamically-typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural), object-oriented and functional programming. Python is often described as a "batteries included" language due to its comprehensive standard library.
+
+To start learning Python, here are some useful resources:
+
+- [Python.org](https://www.python.org/) - The official website offers extensive documentation and tutorials for beginners as well as advanced users.
+- [Codecademy's Python Course](https://www.codecademy.com/learn/learn-python) - A comprehensive, interactive course covering a wide range of Python topics.
+- [Real Python](https://realpython.com/) - Offers a variety of Python tutorials, articles, and courses that cater to different experience levels.
+- [Automate the Boring Stuff with Python](https://automatetheboringstuff.com/) - A beginner-friendly book that teaches Python by guiding you through practical tasks and automation examples.
+
+Remember, practice is key, and the more you work with Python, the more you'll appreciate its utility in the world of cyber security.

src/data/roadmaps/mlops/content/100-programming-fundamentals/101-bash.md

@@ -0,0 +1,6 @@
+# Bash
+
+Understanding bash is essential for MLOps tasks.
+
+- **Book Suggestion:** _The Linux Command Line, 2nd Edition_ by William E. Shotts
+- [Bash Scripting Tutorial](https://www.freecodecamp.org/news/bash-scripting-tutorial-linux-shell-script-and-command-line-for-beginners/)

src/data/roadmaps/mlops/content/100-programming-fundamentals/index.md

@@ -0,0 +1,3 @@
+# Programming Fundamentals
+
+Programming is the key requirement for MLOps. You need to be proficient in atleast one programming language. Python is the most popular language for MLOps.