Fix progress modal

.gitignore

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

package.json

@@ -22,48 +22,48 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.9",
-    "@astrojs/sitemap": "^3.0.5",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.2.1",
+    "@astrojs/react": "^3.0.4",
+    "@astrojs/sitemap": "^3.0.3",
+    "@astrojs/tailwind": "^5.0.2",
+    "@fingerprintjs/fingerprintjs": "^4.1.0",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "astro": "^4.2.1",
-    "astro-compress": "^2.2.8",
-    "clsx": "^2.1.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "astro": "^3.5.0",
+    "astro-compress": "^2.2.3",
+    "clsx": "^2.0.0",
     "dracula-prism": "^2.1.13",
-    "jose": "^5.2.0",
+    "jose": "^5.1.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.300.0",
-    "nanoid": "^5.0.4",
-    "nanostores": "^0.9.5",
-    "node-html-parser": "^6.1.12",
-    "npm-check-updates": "^16.14.12",
+    "lucide-react": "^0.292.0",
+    "nanoid": "^5.0.3",
+    "nanostores": "^0.9.4",
+    "node-html-parser": "^6.1.11",
+    "npm-check-updates": "^16.14.6",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
-    "reactflow": "^11.10.2",
+    "reactflow": "^11.9.4",
     "rehype-external-links": "^3.0.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
-    "zustand": "^4.5.0"
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^3.3.5",
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.1",
+    "@playwright/test": "^1.39.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/js-cookie": "^3.0.6",
     "@types/prismjs": "^1.26.3",
     "csv-parser": "^3.0.0",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^6.0.0",
     "js-yaml": "^4.1.0",
-    "markdown-it": "^14.0.0",
-    "openai": "^4.25.0",
-    "prettier": "^3.2.4",
-    "prettier-plugin-astro": "^0.12.3",
-    "prettier-plugin-tailwindcss": "^0.5.11"
+    "markdown-it": "^13.0.2",
+    "openai": "^4.17.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-astro": "^0.12.1",
+    "prettier-plugin-tailwindcss": "^0.5.7"
   }
 }

readme.md

@@ -53,7 +53,6 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Android Roadmap](https://roadmap.sh/android)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
 - [Go Roadmap](https://roadmap.sh/golang)
-- [Rust Roadmap](https://roadmap.sh/rust)
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)

scripts/roadmap-content.cjs

@@ -59,9 +59,9 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);

src/components/AppChecklist.tsx

@@ -1,15 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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,14 +4,7 @@ import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-type EmailLoginFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailLoginForm(props: EmailLoginFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+export function EmailLoginForm() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
@@ -21,7 +14,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ token: string }>(
@@ -53,7 +45,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
     }
 
     setIsLoading(false);
-    setIsDisabled?.(false);
     setError(error?.message || 'Something went wrong. Please try again later.');
   };
 
@@ -101,7 +92,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         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,14 +1,7 @@
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
-type EmailSignupFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailSignupForm(props: EmailSignupFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+export function EmailSignupForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -20,7 +13,6 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
     e.preventDefault();
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
@@ -29,21 +21,20 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         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
     )}`;
   };
 
@@ -99,7 +90,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         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,17 +5,12 @@ import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 
-type GitHubButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GitHubButtonProps = {};
 
 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('');
 
@@ -30,7 +25,6 @@ export function GitHubButton(props: GitHubButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
         window.location.search
@@ -41,7 +35,6 @@ export function GitHubButton(props: GitHubButtonProps) {
           const errMessage = error?.message || 'Something went wrong.';
           setError(errMessage);
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -80,13 +73,11 @@ 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`,
@@ -98,7 +89,6 @@ export function GitHubButton(props: GitHubButtonProps) {
       );
 
       setIsLoading(false);
-      setIsDisabled?.(false);
       return;
     }
 
@@ -122,7 +112,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 || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -5,17 +5,12 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 
-type GoogleButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GoogleButtonProps = {};
 
 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('');
 
@@ -30,7 +25,6 @@ export function GoogleButton(props: GoogleButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
         window.location.search
@@ -40,7 +34,6 @@ export function GoogleButton(props: GoogleButtonProps) {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -79,13 +72,11 @@ 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`,
     )
@@ -93,7 +84,6 @@ export function GoogleButton(props: GoogleButtonProps) {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -116,7 +106,6 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,7 +113,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 || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -5,17 +5,12 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 
-type LinkedInButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type LinkedInButtonProps = {};
 
 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('');
 
@@ -30,7 +25,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
         window.location.search
@@ -40,7 +34,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -79,13 +72,11 @@ 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`,
     )
@@ -93,7 +84,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -116,7 +106,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,7 +113,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 || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
         {isLoading ? (

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,10 +1,14 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import { AuthenticationForm } from './AuthenticationForm';
+import { EmailLoginForm } from './EmailLoginForm';
+import Divider from './Divider.astro';
+import { GitHubButton } from './GitHubButton';
+import { GoogleButton } from './GoogleButton';
+import { LinkedInButton } from './LinkedInButton';
 ---
 
 <Popup id='login-popup' title='' subtitle=''>
-  <div class='mb-7 text-center'>
+  <div class='text-center'>
     <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
       Login to your account
     </p>
@@ -12,9 +16,19 @@ import { AuthenticationForm } from './AuthenticationForm';
       You must be logged in to perform this action.
     </p>
   </div>
-  <AuthenticationForm client:load />
+
+  <div class='mt-7 flex flex-col gap-2'>
+    <GitHubButton client:load />
+    <GoogleButton client:load />
+    <LinkedInButton client:load />
+  </div>
+
+  <Divider />
+
+  <EmailLoginForm 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

@@ -53,20 +53,14 @@ export type GetRoadmapResponse = RoadmapDocument & {
 
 export function hideRoadmapLoader() {
   const loaderEl = document.querySelector(
-    '[data-roadmap-loader]',
+    '[data-roadmap-loader]'
   ) as HTMLElement;
   if (loaderEl) {
     loaderEl.remove();
   }
 }
 
-type CustomRoadmapProps = {
-  isEmbed?: boolean;
-};
-
-export function CustomRoadmap(props: CustomRoadmapProps) {
-  const { isEmbed = false } = props;
-
+export function CustomRoadmap() {
   const { id, secret } = getUrlParams() as { id: string; secret: string };
 
   const [isLoading, setIsLoading] = useState(true);
@@ -77,15 +71,14 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(true);
 
     const roadmapUrl = new URL(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`
     );
-
     if (secret) {
       roadmapUrl.searchParams.set('secret', secret);
     }
 
     const { response, error } = await httpGet<GetRoadmapResponse>(
-      roadmapUrl.toString(),
+      roadmapUrl.toString()
     );
 
     if (error || !response) {
@@ -101,10 +94,19 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(false);
   }
 
+  async function trackVisit() {
+    if (!isLoggedIn()) return;
+    await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+      resourceId: id,
+      resourceType: 'roadmap',
+    });
+  }
+
   useEffect(() => {
     getRoadmap().finally(() => {
       hideRoadmapLoader();
     });
+    trackVisit().then();
   }, []);
 
   if (isLoading) {
@@ -117,9 +119,9 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
 
   return (
     <>
-      {!isEmbed && <RoadmapHeader />}
-      <FlowRoadmapRenderer isEmbed={isEmbed} roadmap={roadmap!} />
-      <TopicDetail isEmbed={isEmbed} canSubmitContribution={false} />
+      <RoadmapHeader />
+      <FlowRoadmapRenderer roadmap={roadmap!} />
+      <TopicDetail canSubmitContribution={false} />
     </>
   );
 }

src/components/CustomRoadmap/EmbedRoadmapModal.tsx

@@ -1,81 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { Check, Copy } from 'lucide-react';
-
-import { Modal } from '../Modal';
-import { useToast } from '../../hooks/use-toast';
-import { useCopyText } from '../../hooks/use-copy-text';
-import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';
-import { cn } from '../../lib/classname.ts';
-
-type ShareRoadmapModalProps = {
-  onClose: () => void;
-};
-
-export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
-  const { onClose } = props;
-
-  const toast = useToast();
-  const $currentRoadmap = useStore(currentRoadmap);
-  const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);
-  const roadmapId = $currentRoadmap?._id!;
-
-  const { copyText, isCopied } = useCopyText();
-
-  const isDev = import.meta.env.DEV;
-  const baseUrl = isDev ? 'http://localhost:3000' : 'https://roadmap.sh';
-
-  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
-  return (
-    <Modal onClose={onClose} wrapperClassName={'max-w-[500px]'}>
-      <div className="p-4 pb-0">
-        <h1 className="text-xl font-semibold leading-5 text-gray-900">
-          Embed Roadmap
-        </h1>
-      </div>
-
-      <div className="px-4 pt-3">
-        <p className={'mb-2 text-sm text-gray-500'}>
-          Copy the following HTML code and paste it into your website.
-        </p>
-        <input
-          type="text"
-          value={embedHtml}
-          readOnly={true}
-          onClick={(e) => {
-            e.currentTarget.select();
-            copyText(embedHtml);
-          }}
-          className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
-        />
-      </div>
-
-      <div className="flex items-center justify-between px-4 pb-4 pt-2">
-        <button
-          className={cn(
-            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
-            {
-              'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
-              'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,
-            },
-          )}
-          onClick={() => {
-            copyText(embedHtml);
-          }}
-        >
-          {isCopied ? (
-            <>
-              <Check size={14} className="mr-2 stroke-[2.5]" />
-              Copied
-            </>
-          ) : (
-            <>
-              <Copy size={14} className="mr-2 stroke-[2.5]" />
-              Copy Link
-            </>
-          )}
-        </button>
-      </div>
-    </Modal>
-  );
-}

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -1,27 +1,26 @@
 import { ReadonlyEditor } from '../../../editor/readonly-editor';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import {
-  refreshProgressCounters,
   renderResourceProgress,
-  renderTopicProgress,
-  type ResourceProgressType,
   updateResourceProgress,
+  type ResourceProgressType,
+  renderTopicProgress,
+  refreshProgressCounters,
 } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
 import type { Node } from 'reactflow';
-import { type MouseEvent, useCallback, useRef, useState } from 'react';
+import { useCallback, type MouseEvent, useMemo, useState, useRef } from 'react';
 import { EmptyRoadmap } from './EmptyRoadmap';
 import { cn } from '../../lib/classname';
 import { totalRoadmapNodes } from '../../stores/roadmap.ts';
 
 type FlowRoadmapRendererProps = {
-  isEmbed?: boolean;
   roadmap: RoadmapDocument;
 };
 
 export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
-  const { roadmap, isEmbed = false } = props;
+  const { roadmap } = props;
   const roadmapId = String(roadmap._id!);
 
   const [hideRenderer, setHideRenderer] = useState(false);
@@ -33,10 +32,6 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
     topicId: string,
     newStatus: ResourceProgressType,
   ) {
-    if (isEmbed) {
-      return;
-    }
-
     pageProgressMessage.set('Updating progress');
     updateResourceProgress(
       {

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -11,7 +11,6 @@ import { RoadmapActionButton } from './RoadmapActionButton';
 import { Lock, Shapes } from 'lucide-react';
 import { Modal } from '../Modal';
 import { ShareSuccess } from '../ShareOptions/ShareSuccess';
-import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -45,11 +44,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         {
           resourceId: roadmapId,
           resourceType: 'roadmap',
-        },
+        }
       ));
     } else {
       ({ error, response } = await httpDelete<TeamResourceConfig>(
-        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`,
+        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`
       ));
     }
 
@@ -120,7 +119,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="flex justify-stretch gap-1 sm:gap-2">
+          <div className="flex gap-1 sm:gap-2">
             <a
               href="/roadmaps"
               className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
@@ -129,12 +128,14 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
             </a>
 
-            <ShareRoadmapButton
-              roadmapId={roadmapId!}
-              description={description!}
-              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
-              allowEmbed={true}
-            />
+            <button
+              data-guest-required
+              data-popup="login-popup"
+              className="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              aria-label="Subscribe for Updates"
+            >
+              <span className="ml-2">Subscribe</span>
+            </button>
           </div>
           <div className="flex items-center gap-2">
             {$canManageCurrentRoadmap && (
@@ -161,9 +162,9 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 )}
 
                 <a
-                  href={`${
-                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }/${$currentRoadmap?._id}`}
+                  href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+                    $currentRoadmap?._id
+                  }`}
                   target="_blank"
                   className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
                 >
@@ -182,7 +183,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 <RoadmapActionButton
                   onDelete={() => {
                     const confirmation = window.confirm(
-                      'Are you sure you want to delete this roadmap?',
+                      'Are you sure you want to delete this roadmap?'
                     );
 
                     if (!confirmation) {

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -12,10 +12,7 @@ export function SkeletonRoadmapHeader() {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className='flex gap-1 sm:gap-2'>
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
-          </div>
+          <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
           <div className="flex items-center gap-2">
             <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
             <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />

src/components/FrameRenderer/renderer.ts

@@ -117,6 +117,19 @@ 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;
@@ -125,6 +138,8 @@ 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/Friends/FriendsPage.tsx

@@ -10,7 +10,7 @@ import { FriendProgressItem } from './FriendProgressItem';
 import { UserProgressModal } from '../UserProgress/UserProgressModal';
 import { InviteFriendPopup } from './InviteFriendPopup';
 import { UserCustomProgressModal } from '../UserProgress/UserCustomProgressModal';
-import { UserIcon } from 'lucide-react';
+import { UserIcon } from '../ReactIcons/UserIcon.tsx';
 
 type FriendResourceProgress = {
   updatedAt: string;
@@ -203,7 +203,7 @@ export function FriendsPage() {
 
       {filteredFriends.length === 0 && (
         <div className="flex flex-col items-center justify-center py-12">
-          <UserIcon size={'60px'} className="mb-3 w-12 opacity-20" />
+          <UserIcon className="mb-3 w-12 opacity-20" />
 
           <h2 className="text-lg font-semibold">
             {selectedGrouping === 'active' && 'No friends yet'}

src/components/GetStarted/RoadmapCard.tsx

@@ -1,78 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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={frontmatter.excludedBySlug ? frontmatter.excludedBySlug : `/guides/${id}`}
+  href={`/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.resourceType}-${resource.resourceId}`}
+            key={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-h5:font-medium 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-h3:mt-2 prose-img:mt-1'
 >
   <slot />
 </div>

src/components/Navigation/Navigation.astro

@@ -1,38 +1,61 @@
 ---
-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'>
-    <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>
+    <a
+      class='flex items-center text-lg font-medium text-white'
+      href='/'
+      aria-label='roadmap.sh'
+    >
+      <Icon icon='logo' />
+    </a>
 
-      <!-- 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>
-        <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.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+    <!-- 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
         >
-          <Icon icon='search' class='h-3 w-3' />
-          <span class='ml-2'>Search</span>
-        </button>
-      </div>
-    </div>
+      </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>
+        </a>
+      </li>
+      <li>
+        <kbd
+          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'
+        >
+          <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>
     <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

@@ -1,105 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/Popup/Popup.astro

@@ -15,7 +15,7 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
     <div class='relative bg-white rounded-lg shadow popup-body'>

src/components/ReactIcons/GitHubIcon.tsx

@@ -13,7 +13,7 @@ export function GitHubIcon(props: GitHubIconProps) {
       <path
         fillRule="evenodd"
         d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362l-.08-9.127c-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126l-.08 13.526c0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-        fill={ className?.indexOf('text-') !== -1 ? 'currentColor' : '#24292f' }
+        fill="#24292f"
       />
     </svg>
   );

src/components/ShareOptions/ShareSuccess.tsx

@@ -45,8 +45,6 @@ export function ShareSuccess(props: ShareSuccessProps) {
     },
   ];
 
-  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
   return (
     <div className="flex grow flex-col justify-center">
       <div className="mt-5 flex grow flex-col items-center justify-center gap-1.5">
@@ -78,23 +76,6 @@ export function ShareSuccess(props: ShareSuccessProps) {
         </p>
       )}
 
-      <div className="mt-2 border-t pt-2">
-        <p className="text-sm text-gray-400">
-          You can also embed this roadmap on your website.
-        </p>
-        <div className="mt-2">
-          <input
-              onClick={(e) => {
-                e.currentTarget.select();
-                copyText(embedHtml);
-              }}
-              readOnly={true}
-              className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
-              value={embedHtml}
-          />
-        </div>
-      </div>
-
       {visibility === 'public' && (
         <>
           <div className="-mx-4 mt-4 flex items-center gap-1.5">

src/components/ShareRoadmapButton.tsx

@@ -1,25 +1,20 @@
-import { Check, Code2, Copy, Facebook, Linkedin, Share2 } from 'lucide-react';
+import { Check, Copy, Facebook, Linkedin, Share2, Twitter } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../hooks/use-outside-click.ts';
 import { useCopyText } from '../hooks/use-copy-text.ts';
 import { cn } from '../lib/classname.ts';
 import { TwitterIcon } from './ReactIcons/TwitterIcon.tsx';
-import { EmbedRoadmapModal } from './CustomRoadmap/EmbedRoadmapModal.tsx';
 
 type ShareRoadmapButtonProps = {
-  roadmapId?: string;
   description: string;
   pageUrl: string;
-  allowEmbed?: boolean;
 };
 
 export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
-  const { description, pageUrl, allowEmbed = false, roadmapId } = props;
+  const { description, pageUrl } = props;
 
   const { isCopied, copyText } = useCopyText();
 
-  const [isEmbedModalOpen, setIsEmbedModalOpen] = useState(false);
-
   const containerRef = useRef<HTMLDivElement>(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
@@ -33,21 +28,12 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
     setIsDropdownOpen(false);
   });
 
-  const embedHtml = `<iframe src="https://roadmap.sh/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
   return (
     <div className="relative" ref={containerRef}>
-      {isEmbedModalOpen && (
-        <EmbedRoadmapModal
-          onClose={() => {
-            setIsEmbedModalOpen(false);
-          }}
-        />
-      )}
       <button
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         className={cn(
-          'inline-flex h-full items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm',
+          'inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm',
           {
             'bg-yellow-500': isDropdownOpen,
             'bg-green-400': isCopied,
@@ -70,7 +56,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
       </button>
 
       {isDropdownOpen && (
-        <div className="absolute left-0 z-[999] mt-1 w-48 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div className="absolute left-0 z-50 mt-1 w-44 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
           <div className="flex flex-col px-1 py-1">
             <button
               onClick={() => {
@@ -84,20 +70,6 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
               </div>
               Copy Link
             </button>
-            {allowEmbed && roadmapId && (
-              <button
-                onClick={() => {
-                  setIsDropdownOpen(false);
-                  setIsEmbedModalOpen(true);
-                }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
-              >
-                <div className="flex w-[20px] items-center justify-center">
-                  <Code2 size="15px" className="text-slate-400" />
-                </div>
-                Embed Roadmap
-              </button>
-            )}
             <a
               href={twitterUrl}
               target={'_blank'}

src/components/TeamMarketing/TeamTools.tsx

@@ -1,33 +1,31 @@
-import {AlertTriangle, Barcode, BookOpenIcon, PieChart, Shrub, SquareIcon, UserRoundPlus} from "lucide-react";
-
 const toolsList = [
   {
-    icon: Shrub,
+    imageUrl: '/images/team-promo/growth-plans.png',
     title: 'Growth plans',
     description: 'Prepare shared or individual growth plans for members.',
   },
   {
-    icon: Barcode,
+    imageUrl: '/images/team-promo/progress-tracking.png',
     title: 'Progress tracking',
     description: 'Track and compare the progress of team members.',
   },
   {
-    icon: UserRoundPlus,
+    imageUrl: '/images/team-promo/onboarding.png',
     title: 'Onboarding',
     description: 'Prepare onboarding plans for new team members.',
   },
   {
-    icon: PieChart,
+    imageUrl: '/images/team-promo/team-insights.png',
     title: 'Team insights',
     description: 'Get insights about your team skills, progress and more.',
   },
   {
-    icon: AlertTriangle,
+    imageUrl: '/images/team-promo/skill-gap.png',
     title: 'Skill gap analysis',
     description: 'Understand the skills of your team and identify gaps.',
   },
   {
-    icon: BookOpenIcon,
+    imageUrl: '/images/team-promo/documentation.png',
     title: 'Documentation',
     description: 'Create and share visual team documentation.',
   },
@@ -46,9 +44,11 @@ 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">
-                <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>
+                <img
+                  alt={tool.title}
+                  src={tool.imageUrl}
+                  className="mb-5 h-48 hidden sm:block mx-auto md:mx-0"
+                />
                 <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/components/TopicDetail/TopicDetail.tsx

@@ -15,21 +15,20 @@ import {
 } from '../../lib/resource-progress';
 import { pageProgressMessage, sponsorHidden } from '../../stores/page';
 import { TopicProgressButton } from './TopicProgressButton';
+import { ContributionForm } from './ContributionForm';
 import { showLoginPopup } from '../../lib/popup';
 import { useToast } from '../../hooks/use-toast';
 import type {
   AllowedLinkTypes,
   RoadmapContentDocument,
 } from '../CustomRoadmap/CustomRoadmap';
-import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown';
+import { markdownToHtml } from '../../lib/markdown';
 import { cn } from '../../lib/classname';
 import { Ban, FileText, X } from 'lucide-react';
 import { getUrlParams } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
-import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 
 type TopicDetailProps = {
-  isEmbed?: boolean;
   canSubmitContribution: boolean;
 };
 
@@ -43,10 +42,9 @@ const linkTypes: Record<AllowedLinkTypes, string> = {
 };
 
 export function TopicDetail(props: TopicDetailProps) {
-  const { canSubmitContribution, isEmbed = false } = props;
+  const { canSubmitContribution } = props;
 
-  const [hasEnoughLinks, setHasEnoughLinks] = useState(false);
-  const [contributionUrl, setContributionUrl] = useState('');
+  const [contributionAlertMessage, setContributionAlertMessage] = useState('');
   const [isActive, setIsActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isContributing, setIsContributing] = useState(false);
@@ -68,10 +66,12 @@ export function TopicDetail(props: TopicDetailProps) {
   // Close the topic detail when user clicks outside the topic detail
   useOutsideClick(topicRef, () => {
     setIsActive(false);
+    setIsContributing(false);
   });
 
   useKeydown('Escape', () => {
     setIsActive(false);
+    setIsContributing(false);
   });
 
   // Toggle topic is available even if the component UI is not active
@@ -120,6 +120,7 @@ export function TopicDetail(props: TopicDetailProps) {
     setIsActive(true);
     sponsorHidden.set(true);
 
+    setContributionAlertMessage('');
     setTopicId(topicId);
     setResourceType(resourceType);
     setResourceId(resourceId);
@@ -157,27 +158,20 @@ export function TopicDetail(props: TopicDetailProps) {
         }
         let topicHtml = '';
         if (!isCustomResource) {
-          topicHtml = response as string;
-          const topicDom = new DOMParser().parseFromString(
-            topicHtml,
+          // It's full HTML with page body, head etc.
+          // We only need the inner HTML of the #main-content
+          const node = new DOMParser().parseFromString(
+            response as string,
             'text/html',
           );
-
-          const links = topicDom.querySelectorAll('a');
-          const urlElem: HTMLElement =
-            topicDom.querySelector('[data-github-url]')!;
-          const contributionUrl = urlElem?.dataset?.githubUrl || '';
-
-          setContributionUrl(contributionUrl);
-          setHasEnoughLinks(links.length >= 3);
+          topicHtml = node?.getElementById('main-content')?.outerHTML || '';
         } else {
           setLinks((response as RoadmapContentDocument)?.links || []);
           setTopicTitle((response as RoadmapContentDocument)?.title || '');
-
-          const sanitizedMarkdown = sanitizeMarkdown(
-            (response as RoadmapContentDocument).description || '',
+          topicHtml = markdownToHtml(
+            (response as RoadmapContentDocument)?.description || '',
+            false,
           );
-          topicHtml = markdownToHtml(sanitizedMarkdown, false);
         }
 
         setIsLoading(false);
@@ -216,20 +210,34 @@ export function TopicDetail(props: TopicDetailProps) {
           </div>
         )}
 
+        {!isLoading && isContributing && (
+          <ContributionForm
+            resourceType={resourceType}
+            resourceId={resourceId}
+            topicId={topicId}
+            onClose={(message?: string) => {
+              if (message) {
+                setContributionAlertMessage(message);
+              }
+
+              setIsContributing(false);
+            }}
+          />
+        )}
+
         {!isContributing && !isLoading && !error && (
           <>
             {/* Actions for the topic */}
             <div className="mb-2">
-              {!isEmbed && (
-                <TopicProgressButton
-                  topicId={topicId}
-                  resourceId={resourceId}
-                  resourceType={resourceType}
-                  onClose={() => {
-                    setIsActive(false);
-                  }}
-                />
-              )}
+              <TopicProgressButton
+                topicId={topicId}
+                resourceId={resourceId}
+                resourceType={resourceType}
+                onClose={() => {
+                  setIsActive(false);
+                  setIsContributing(false);
+                }}
+              />
 
               <button
                 type="button"
@@ -237,6 +245,7 @@ export function TopicDetail(props: TopicDetailProps) {
                 className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
                 onClick={() => {
                   setIsActive(false);
+                  setIsContributing(false);
                 }}
               >
                 <X className="h-5 w-5" />
@@ -289,21 +298,29 @@ export function TopicDetail(props: TopicDetailProps) {
             )}
 
             {/* Contribution */}
-            {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
+            {canSubmitContribution && (
               <div className="mt-8 flex-1 border-t">
                 <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
-                  Help us improve this introduction and submit a link to a good
-                  article, podcast, video, or any other resource that helped you
-                  understand this topic better.
+                  Help others learn by submitting links to learn more about this
+                  topic{' '}
                 </p>
-                <a
-                  href={contributionUrl}
-                  target={'_blank'}
-                  className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
+                <button
+                  onClick={() => {
+                    if (isGuest) {
+                      setIsActive(false);
+                      showLoginPopup();
+                      return;
+                    }
+
+                    setIsContributing(true);
+                  }}
+                  disabled={!!contributionAlertMessage}
+                  className="block w-full rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
                 >
-                  <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                  Edit this Content
-                </a>
+                  {contributionAlertMessage
+                    ? contributionAlertMessage
+                    : 'Submit a Link'}
+                </button>
               </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](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.
+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.

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.harrytheo.com/blog/2021/09/dom-reflow-and-layout-thrashing/)
+- [Minimising Layout and Layout thrashing for 60 FPS](https://www.charistheo.io/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.jameslmilner.com/posts/web-worker-performance)
+- [Examining Web Worker Performance](https://www.loxodrome.io/post/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

@@ -1,394 +0,0 @@
----
-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/guides/introduction-to-llms.md

@@ -49,7 +49,7 @@ On a high level, LLMs can be categorized into two types i.e. Base LLMs and Instr
 
 ### Base LLMs
 
-Base LLMs are the LLMs which are designed to predict the next word based on the training data. They are not designed to answer questions, carry out conversations or help solve problems. For example, if you give a base LLM the sentence "In this book about LLMs, we will discuss", it might complete this sentence and give you "In this book about LLMs, we will discuss **what LLMs are, how they work, and how you can leverage them in your applications.**." Or if you give it "What are some famous social networks?", instead of answering it might give back "Why do people use social networks?" or "What are some of the benefits of social networks?". As you can see, it is giving us relevant text but it is not answering the question. This is where the Instruction tuned LLMs come in to the picture.
+Base LLMs are the LLMs which are designed to predict the next word based on the training data. They are not designed to answer questions, carry out conversations or help solve problems. For example, if you give a base LLM the sentence "In this book about LLMs, we will discuss", it might complete this sentence and give you "In this book about LLMs, we will discsus **what LLMs are, how they work, and how you can leverage them in your applications.**." Or if you give it "What are some famous social networks?", instead of answering it might give back "Why do people use social networks?" or "What are some of the benefits of social networks?". As you can see, it is giving us relevant text but it is not answering the question. This is where the Instruction tuned LLMs come in to the picture.
 
 ### Instruction tuned LLMs
 

src/data/guides/session-based-authentication.md

@@ -96,7 +96,7 @@ app.listen(3000, () => {
 });
 ```
 
-The important piece to note here is the `express-session` middleware registration which automatically handles the session initialization, cookie parsing and session data retrieval, and so on. In our example here, we are passing the following configuration options:
+The important piece to note here is the `express-session` middleware registration which automatically handles the session initialization, cooking parsing and session data retrieval, and so on. In our example here, we are passing the following configuration options:
 
 - `secret`: This is used to sign the session ID cookie. Using a secret that cannot be guessed will reduce the ability to hijack a session.
 - `cookie`: Object containing the configuration for session id cookie.
@@ -176,7 +176,7 @@ Next, we have to implement the functionality to process the login form submissio
 ```javascript
 module.exports = function processLogin(req, res) {
   if (req.body.username !== 'admin' || req.body.password !== 'admin') {
-    return res.send('Invalid username or password');
+    return res.send('Invalid username or password);
   }
 
   req.session.userid = req.body.username;

src/data/question-groups/javascript/content/heap-and-stack.md

@@ -1,4 +1,4 @@
-The Heap and Stack in JavaScript Engine are two different data structures that store data in different ways.
+The Head and Stack in JavaScript Engine are two different data structures that store data in different ways.
 
 ## Stack
 

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: false
+isNew: true
 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

@@ -1,17 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,15 +0,0 @@
-`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

@@ -1,9 +0,0 @@
-`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

@@ -1,14 +0,0 @@
-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

@@ -1,227 +0,0 @@
----
-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: false
+isNew: true
 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 2024'
+briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2023'
 title: 'AI and Data Scientist Roadmap'
-description: 'Step by step guide to becoming an AI and Data Scientist in 2024'
+description: 'Step by step guide to becoming an AI and Data Scientist in 2023'
 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 2024'
-    - 'ai and data scientist roadmap 2024'
+    - 'ai and data scientist roadmap 2023'
+    - 'ai and data scientist roadmap 2023'
     - 'guide to becoming an ai and data scientist'
     - 'ai and data scientist roadmap'
     - 'ai scientist'

src/data/roadmaps/ai-data-scientist/content/deployment-models.md

@@ -1,5 +1,4 @@
 # MLOps
 
 - [Machine Learning Engineering for Production (MLOps) Specialization](https://imp.i384100.net/nLA5mx)
-- [Full Stack Deep Learning](https://fullstackdeeplearning.com/course/2022/)
 

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 2024'
+briefDescription: 'Step by step guide to becoming an Android Developer in 2023'
 title: 'Android Developer'
-description: 'Step by step guide to becoming an Android developer in 2024'
+description: 'Step by step guide to becoming an Android developer in 2023'
 hasTopics: true
-isNew: false
+isNew: true
 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 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.'
+  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.'
   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,9 +1,3 @@
 # 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 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)
-
+**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. 

src/data/roadmaps/android/content/104-interface-and-navigation/101-app-shortcuts.md

@@ -1,3 +1,7 @@
 # App Shortcuts
 
-App shortcuts in Android are designed to provide quick and convenient routes to specific actions or functions within your app from the device home screen. To use them, long-press an app's icon and a pop-up menu will appear with the available shortcuts. Depending on the app, you might be able to send a message, make a booking, navigate home, or perform some other specific task without having to first open the app and navigate to the desired function. These shortcuts can also be moved and placed individually on the home screen for even faster access.
+Sure, I can provide information about "app shortcuts" feature in Android. 
+
+### App Shortcuts
+
+App shortcuts in Android are designed to provide quick and convenient routes to specific actions or functions within your app from the device home screen. To use them, long-press an app's icon and a pop-up menu will appear with the available shortcuts. Depending on the app, you might be able to send a message, make a booking, navigate home, or perform some other specific task without having to first open the app and navigate to the desired function. These shortcuts can also be moved and placed individually on the home screen for even faster access.

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 2024'
+briefDescription: 'Step by step guide to become a Angular Developer in 2023'
 title: 'Angular Developer'
-description: 'Everything that is there to learn about Angular and the ecosystem in 2024.'
+description: 'Everything that is there to learn about Angular and the ecosystem in 2023.'
 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 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.'
+  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.'
   imageUrl: 'https://roadmap.sh/roadmaps/angular.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/angular/content/100-typescript-basics/106-type-guard.md

@@ -9,4 +9,4 @@ Type guards are typically used for narrowing a type and are pretty similar to fe
 Visit the following resources to learn more:
 
 - [Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/)
-- [TypeScript Type Guards Explained](https://www.youtube.com/watch?v=FEeEItMtDwg)
+- [TypeScript Type Guards Explained](https://www.youtube.com/watch?v=feeeitmtdwg)

src/data/roadmaps/angular/content/101-rxjs-basics/102-marble-diagrams.md

@@ -4,5 +4,6 @@ Marble testing allows you to test asynchronous RxJS code synchronously and step-
 
 Visit the following resources to learn more:
 
-- [Understanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5)
+- [Angular Marble Testing: A Brief Introduction](https://www.altamira.ai/blog/angular-marble-testing-a-brief-introduction/)
+- [IUnderstanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5)
 - [Interactive Diagrams](https://rxmarbles.com/#from)

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 2024'
+briefDescription: 'Step by step guide to becoming an ASP.NET Core Developer in 2023'
 title: 'ASP.NET Core Developer'
-description: 'Step by step guide to becoming an ASP.NET core developer in 2024'
+description: 'Step by step guide to becoming an ASP.NET core developer in 2023'
 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 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.'
+  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.'
   imageUrl: 'https://roadmap.sh/roadmaps/aspnet-core.png'
   datePublished: '2023-01-05'
   dateModified: '2023-01-20'

src/data/roadmaps/aws/aws.md

@@ -1,58 +0,0 @@
----
-jsonUrl: '/jsons/roadmaps/aws.json'
-pdfUrl: '/pdfs/roadmaps/aws.pdf'
-order: 14
-briefTitle: 'AWS'
-briefDescription: 'Step by step guide to learning AWS in 2024'
-title: 'AWS Roadmap'
-description: 'Step by step guide to learning AWS in 2024'
-isNew: true
-hasTopics: true
-dimensions:
-  width: 968
-  height: 2183.87
-schema:
-  headline: 'AWS Roadmap'
-  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 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 2024'
-    - 'guide to learning aws'
-    - 'aws roadmap'
-    - 'aws learning path'
-    - 'aws learning roadmap'
-    - 'container roadmap'
-    - 'aws'
-    - 'aws learning guide'
-    - 'aws skills'
-    - 'aws for development'
-    - 'aws for development skills'
-    - 'aws for development skills test'
-    - 'aws learning guide'
-    - 'become a aws expert'
-    - 'aws career path'
-    - 'learn aws for development'
-    - 'what is aws'
-    - 'aws quiz'
-    - 'aws interview questions'
-relatedRoadmaps:
-  - 'devops'
-  - 'backend'
-sitemap:
-  priority: 1
-  changefreq: 'monthly'
-tags:
-  - 'roadmap'
-  - 'main-sitemap'
-  - 'skill-roadmap'
----

src/data/roadmaps/aws/content/100-introduction/100-cloud-computing.md

@@ -1,3 +0,0 @@
-# What is Cloud Computing?
-
-Cloud Computing refers to the delivery of computing services over the internet instead of using local servers. It offers reliable, scalable, and inexpensive cloud computing services which include data storage, databases, applications, analytics, machine learning, and even setting up virtual servers. The biggest names providing cloud computing services are Amazon Web Services (AWS), Microsoft Azure, Google Cloud, and others. The main selling point is that you only pay for the services you use, helping you manage your expenses more effectively.

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

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

src/data/roadmaps/aws/content/100-introduction/102-public-private-hybrid.md

@@ -1,3 +0,0 @@
-# Public vs Private vs Hybrid Cloud
-
-Amazon Web Services (AWS) offers various cloud-based deployment models to cater to varying business needs, including Public, Private, and Hybrid clouds. A **Public Cloud** is a model where the service provider offers resources, such as applications and storage, available to the general public over the internet. Resources may be free, or sold on a pay-per-usage model. On the other hand, a **Private Cloud** is a type of cloud computing that delivers similar advantages to public cloud, including scalability and self-service, but through a proprietary architecture dedicated to a single organization. Unlike public clouds, which deliver services to multiple organizations, a private cloud is dedicated to the needs and goals of a single entity. Lastly, a **Hybrid Cloud** is a solution that combines a private cloud with one or more public cloud services, with proprietary software enabling communication between each distinct service.

src/data/roadmaps/aws/content/100-introduction/103-aws/100-global-infra.md

@@ -1,3 +0,0 @@
-# AWS Global Infrastructure
-
-AWS Global Infrastructure refers to the layout of AWS regions and availability zones around the world. A region is a geographical area, each consisting of two or more availability zones (AZs) which are engineered to be isolated from failures in other AZs. AZs provide inexpensive, low-latency network connectivity to other AZs in the same region. In addition to the regions and AZs, AWS also includes edge locations for content delivery and regional edge caches, enhancing user experience by reducing latency. AWS currently operates in many geographic regions around the world.

src/data/roadmaps/aws/content/100-introduction/103-aws/101-shared-respons.md

@@ -1,3 +0,0 @@
-# Shared Responsibility Model
-
-In Amazon Web Services (AWS), the concept of 'Shared Responsibility' pertains to the distribution of security and compliance responsibilities between AWS and the user/client. Under this model, AWS is responsible for the security "of" the cloud — including the infrastructure, hardware, software, networking, and facilities that run AWS cloud services. On the other hand, the user is responsible for security "in" the cloud — this includes managing and configuring the customer-controlled services, protecting account credentials, and securing customer data. This shared model aims to lessen operational burden for users and provide flexible security controls.

src/data/roadmaps/aws/content/100-introduction/103-aws/102-well-architected.md

@@ -1,3 +0,0 @@
-# Well Architected Framework
-
-AWS Well-Architected Framework is a set of strategic guidelines provided by Amazon Web Services. It is designed to provide high-performing and resilient systems while maintaining cost efficiency. The framework divides the architectural best practices across five pillars which include operational excellence, security, reliability, performance efficiency, and cost optimization. With this framework, you can assess and improve your cloud-based architectures and applications by leveraging AWS technologies.

src/data/roadmaps/aws/content/100-introduction/103-aws/index.md

@@ -1,9 +0,0 @@
-# Introduction to AWS
-
-AWS (Amazon Web Services) offers a broad set of global cloud-based products including compute, storage, databases, analytics, networking, mobile, developer tools, management tools, IoT, security, and enterprise applications: on-demand, available in seconds, with pay-as-you-go pricing. From data warehousing to deployment tools, directories to content delivery, over 200 AWS services are available. New services can be provisioned quickly, without the upfront fixed expense. This allows enterprises, start-ups, small and medium-sized businesses, and customers in the public sector to access the building blocks they need to respond quickly to changing business requirements. This whitepaper provides you with an overview of the benefits of the AWS Cloud and introduces you to the services that make up the platform.
-
-Learn more from the following links:
-
-- [AWS Documentation](https://docs.aws.amazon.com/)
-- [Introduction of AWS](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/introduction.html)
-- [AWS Tutorial for Beginners](https://www.youtube.com/watch?v=zA8guDqfv40)

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

@@ -1,9 +0,0 @@
-# Introduction
-
-AWS (Amazon Web Services) offers a broad set of global cloud-based products including compute, storage, databases, analytics, networking, mobile, developer tools, management tools, IoT, security, and enterprise applications: on-demand, available in seconds, with pay-as-you-go pricing. From data warehousing to deployment tools, directories to content delivery, over 200 AWS services are available. New services can be provisioned quickly, without the upfront fixed expense. This allows enterprises, start-ups, small and medium-sized businesses, and customers in the public sector to access the building blocks they need to respond quickly to changing business requirements. This whitepaper provides you with an overview of the benefits of the AWS Cloud and introduces you to the services that make up the platform.
-
-Learn more from the following links:
-
-- [AWS Documentation](https://docs.aws.amazon.com/)
-- [Introduction of AWS](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/introduction.html)
-- [AWS Tutorial for Beginners](https://www.youtube.com/watch?v=zA8guDqfv40)

src/data/roadmaps/aws/content/101-ec2/100-instance-types.md

@@ -1,3 +0,0 @@
-# Instance Types
-
-AWS EC2 instances come in a variety of types optimized to fit different use cases. They are grouped into categories depending on their performance capacity and pricing structure. There are five categories of instance types including General Purpose, Compute Optimized, Memory Optimized, Storage Optimized, and Accelerated Computing instances. Each category is suited best for specific workloads and they consist of different instance types each given a specific name, for example, 't2.micro'. Each instance type has a specific amount of CPU, memory, storage, and network capacity. Understanding the workloads of your applications can help you determine which instance type would be best suited to your needs.

src/data/roadmaps/aws/content/101-ec2/101-cpu-credits.md

@@ -1,3 +0,0 @@
-# CPU Credits
-
-AWS EC2 instances earn CPU Credits when they are idle and consume CPU credits when they are active. A CPU credit provides the performance of a full CPU core for one minute. T2 and T3 instances accrue CPU Credits and use them to burst beyond their baseline performance. For example, a t2.micro instance receives credits continuously at a rate of 6 CPU Credits per hour. The credit balance of an instance can be saved for up to 7 days. When the instance does not have any CPU credits, it performs at the baseline. It's important to note that CPU credit pricing is different and additional to the instance pricing. AWS also offers Unlimited mode for instances that need to burst beyond the baseline performance for extended periods.

src/data/roadmaps/aws/content/101-ec2/102-storage-volume.md

@@ -1,3 +0,0 @@
-# Storage / Volumes
-
-In AWS, an `Amazon EBS` (Elastic Block Store) is the storage volume used by EC2 (Elastic Compute Cloud) instances. It is designed for data durability, and Amazon EBS volumes automatically replicate within their Availability Zone to prevent data loss due to failure of any individual component. EBS volumes are attached to an EC2 instance, and appear as a network drive that you can mount and format using the file system of your choice. You can use Amazon EBS as the primary storage for data that requires frequent updates, such as a system drive for an instance or storage for a database application.

src/data/roadmaps/aws/content/101-ec2/103-keypairs.md

@@ -1,3 +0,0 @@
-# Keypairs
-
-Key pairs are part of Amazon EC2 and are used to securely log into your instances. A key pair consists of a public key and a private key. Amazon EC2 generates the key pair and gives you the private key, whereas the public key is stored with AWS. When you launch an EC2 instance, you specify the name of the key pair. You can then use the private key to securely connect to your instance. Key pairs are region-specific, meaning you need to create separate key pairs for each region in which you operate your instances.

src/data/roadmaps/aws/content/101-ec2/104-elastic-ip.md

@@ -1,3 +0,0 @@
-# Elastic IP
-
-"Elastic IP" in AWS EC2 is a static IPv4 address designed for dynamic cloud computing. An Elastic IP address is associated with your AWS account not a particular instance, and you control that address until you choose to explicitly release it. Unlike traditional static IP addresses, however, Elastic IP addresses allow you to mask the failure of an instance or software by rapidly remapping the address to another instance in your account.

src/data/roadmaps/aws/content/101-ec2/105-user-data-scripts.md

@@ -1,3 +0,0 @@
-# User Data Scripts
-
-"User Data Scripts" in EC2 instances are used to perform common automated configuration tasks and even run scripts after the instance starts. These scripts run as the root user, and can be used to install software or download files from an S3 bucket. You can pass up to 16 KB of data to an instance, either as plain text or base64-encoded. The User Data script is executed only one time when the instance is first launched. If you stop and start the instance, the script does not run again. However, it will run on every boot if the instance reboots.

src/data/roadmaps/aws/content/101-ec2/106-purchasing-options.md

@@ -1,3 +0,0 @@
-# Purchasing Options
-
-Amazon EC2 provides several purchasing options to fit different workload needs. The **On-Demand** option allows clients to pay for compute capacity per hour with no long-term commitments. **Reserved Instances** provide a significant discount compared to On-Demand pricing and are ideal for applications required steady state usage. **Spot Instances** allow clients to bid for unused Amazon EC2 capacity and can provide significant savings if flexibility is possible in starting and stopping times. **Dedicated Hosts** are physical EC2 servers dedicated to specific clients, suitable for regulatory requirements and licenses which do not support multi-tenant virtualization, and **Savings Plans** offer reduced rates for committing to a consistent amount of usage for 1 or 3 years.