fix: topic id

* feat: implement todo and resource button

* feat: add hover color

.astro/settings.json

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

contributing.md

@@ -41,11 +41,26 @@ Please adhere to the following style when adding content to a topic:
 
 Visit the following resources to learn more:
 
-- [Description of link](Link)
+- [@type@Description of link](Link)
 ```
 
+`@type@` must be one of the following and describes the type of content you are adding:
+
+- `@official@`
+- `@opensource@`
+- `@article@`
+- `@course@`
+- `@podcast@`
+- `@video@`
+
+It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap.
+
 ## Guidelines
 
+- <p><strong>Please don't use the project for self-promotion!</strong><br />
+
+  We believe this project is a valuable asset to the developer community and it includes numerous helpful resources. We kindly ask you to avoid submitting pull requests for the sole purpose of self-promotion. We appreciate contributions that genuinely add value, such as guides from maintainers of well-known frameworks, and will consider accepting these even if they're self authored. Thank you for your understanding and cooperation!
+
 - <p><strong>Adding everything available out there is not the goal!</strong><br />
 
   The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn? There might be things that are of-course being used today but prioritize the things that are most in demand today, e.g., agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
@@ -80,5 +95,6 @@ Visit the following resources to learn more:
 
   - Adding whitespace that doesn't add to the readability of the content.
   - Rewriting content in a way that doesn't add any value.
-  - None English content.
-  - PR's that don't follow our style guide, have no description and a default title.
+  - Non-English content.
+  - PR's that don't follow our style guide, have no description and a default title.
+  - Links to your own blog articles.

readme.md

@@ -42,8 +42,10 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
 - [AWS Roadmap](https://roadmap.sh/aws)
 - [Linux Roadmap](https://roadmap.sh/linux)
+- [Terraform Roadmap](https://roadmap.sh/terraform)
 - [Data Analyst Roadmap](https://roadmap.sh/data-analyst)
 - [MLOps Roadmap](https://roadmap.sh/mlops)
+- [Product Manager Roadmap](https://roadmap.sh/product-manager)
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Python Roadmap](https://roadmap.sh/python)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
@@ -78,6 +80,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
 - [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
+- [DevRel Engineer Roadmap](https://roadmap.sh/devrel)
 
 There are also interactive best practices:
 
@@ -93,6 +96,7 @@ There are also interactive best practices:
 - [Node.js Questions](https://roadmap.sh/questions/nodejs)
 - [React Questions](https://roadmap.sh/questions/react)
 - [Backend Questions](https://roadmap.sh/questions/backend)
+- [Frontend Questions](https://roadmap.sh/questions/frontend)
 
 ![](https://i.imgur.com/waxVImv.png)
 

scripts/assign-label-types.cjs

@@ -0,0 +1,189 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+const allRoadmapDirs = fs.readdirSync(
+  path.join(__dirname, '../src/data/roadmaps'),
+);
+
+allRoadmapDirs.forEach((roadmapId) => {
+  const roadmapDir = path.join(
+    __dirname,
+    `../src/data/roadmaps/${roadmapId}/content`,
+  );
+
+  function getHostNameWithoutTld(hostname) {
+    const parts = hostname.split('.');
+    return parts.slice(0, parts.length - 1).join('.');
+  }
+
+  function isOfficialWebsite(hostname, fileName, roadmapId) {
+    fileName = fileName.replace('/index.md', '').replace('.md', '');
+
+    const parts = fileName.split('/');
+    const lastPart = parts[parts.length - 1];
+
+    const normalizedFilename = lastPart.replace(/\d+/g, '').replace(/-/g, '');
+    const normalizedHostname = getHostNameWithoutTld(hostname);
+
+    if (normalizedFilename === normalizedHostname) {
+      return true;
+    }
+
+    if (normalizedFilename.includes(normalizedHostname)) {
+      return true;
+    }
+
+    return !!roadmapId.includes(normalizedHostname);
+  }
+
+  // websites are educational websites that are of following types:
+  // - @official@
+  // - @article@
+  // - @course@
+  // - @opensource@
+  // - @podcast@
+  // - @video@
+  // - @website@
+  // content is only educational websites
+  function getTypeFromHostname(hostname, fileName, roadmapId) {
+    hostname = hostname.replace('www.', '');
+
+    const videoHostnames = ['youtube.com', 'vimeo.com', 'youtu.be'];
+    const courseHostnames = ['coursera.org', 'udemy.com', 'edx.org'];
+    const podcastHostnames = ['spotify.com', 'apple.com'];
+    const opensourceHostnames = ['github.com', 'gitlab.com'];
+    const articleHostnames = [
+      'neilpatel.com',
+      'learningseo.io',
+      'htmlreference.io',
+      'docs.gitlab.com',
+      'docs.github.com',
+      'skills.github.com',
+      'cloudflare.com',
+      'w3schools.com',
+      'medium.com',
+      'dev.to',
+      'web.dev',
+      'css-tricks.com',
+      'developer.mozilla.org',
+      'smashingmagazine.com',
+      'freecodecamp.org',
+      'cs.fyi',
+      'thenewstack.io',
+      'html5rocks.com',
+      'html.com',
+      'javascript.info',
+      'css-tricks.com',
+      'developer.apple.com',
+    ];
+
+    if (articleHostnames.includes(hostname)) {
+      return 'article';
+    }
+
+    if (videoHostnames.includes(hostname)) {
+      return 'video';
+    }
+
+    if (courseHostnames.includes(hostname)) {
+      return 'course';
+    }
+
+    if (podcastHostnames.includes(hostname)) {
+      return 'podcast';
+    }
+
+    if (opensourceHostnames.includes(hostname)) {
+      return 'opensource';
+    }
+
+    if (hostname === 'roadmap.sh') {
+      return 'roadmap.sh';
+    }
+
+    if (isOfficialWebsite(hostname, fileName, roadmapId)) {
+      return 'official';
+    }
+
+    return 'article';
+  }
+
+  function readNestedMarkdownFiles(dir, files = []) {
+    const dirEnts = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const dirent of dirEnts) {
+      const fullPath = path.join(dir, dirent.name);
+      if (dirent.isDirectory()) {
+        readNestedMarkdownFiles(fullPath, files);
+      } else {
+        if (path.extname(fullPath) === '.md') {
+          files.push(fullPath);
+        }
+      }
+    }
+
+    return files;
+  }
+
+  const files = readNestedMarkdownFiles(roadmapDir);
+
+  // for each of the files, assign the type of link to the beginning of each markdown link
+  // i.e. - [@article@abc](xyz) where @article@ is the type of link. Possible types:
+  // - @official@
+  // - @opensource@
+  // - @article@
+  // - @course@
+  // - @opensource@
+  // - @podcast@
+  // - @video@
+  files.forEach((file) => {
+    const content = fs.readFileSync(file, 'utf-8');
+    const lines = content.split('\n');
+
+    const newContent = lines
+      .map((line) => {
+        if (line.startsWith('- [') && !line.startsWith('- [@')) {
+          const type = line.match(/@(\w+)@/);
+          if (type) {
+            return line;
+          }
+
+          let urlMatches = line.match(/\((https?:\/\/[^)]+)\)/);
+          let fullUrl = urlMatches?.[1];
+
+          if (!fullUrl) {
+            // is it slashed URL i.e. - [abc](/xyz)
+            fullUrl = line.match(/\((\/[^)]+)\)/)?.[1];
+            if (fullUrl) {
+              fullUrl = `https://roadmap.sh${fullUrl}`;
+            }
+
+            if (!fullUrl) {
+              console.error('Invalid URL found in:', file);
+              return line;
+            }
+          }
+
+          const url = new URL(fullUrl);
+          const hostname = url.hostname;
+
+          let urlType = getTypeFromHostname(hostname, file, roadmapId);
+          const linkText = line.match(/\[([^\]]+)\]/)[1];
+
+          if (
+            linkText.toLowerCase().startsWith('visit dedicated') &&
+            linkText.toLowerCase().endsWith('roadmap')
+          ) {
+            urlType = 'roadmap';
+          }
+
+          return line.replace('- [', `- [@${urlType}@`).replace('](', '](');
+        }
+
+        return line;
+      })
+      .join('\n');
+
+    fs.writeFileSync(file, newContent);
+  });
+});

scripts/editor-roadmap-assets.ts

@@ -56,6 +56,7 @@ const pageUrl = `http://localhost:3000/${roadmapId}/svg`;
 console.log(`Opening page ${pageUrl}`);
 await page.goto(pageUrl);
 await page.waitForSelector('#resource-svg-wrap');
+await page.waitForTimeout(5000);
 console.log(`Generating PDF ${pageUrl}`);
 await page.pdf({
   path: `./public/pdfs/roadmaps/${roadmapId}.pdf`,

scripts/editor-roadmap-content.ts

@@ -104,9 +104,9 @@ function writeTopicContent(
 ) {
   let prompt = `I will give you a topic and you need to write a brief introduction for that with regards to "${roadmapTitle}". Your format should be as follows and be in strictly markdown format:
 
-# (Put a heading for the topic without adding parent "Subtopic in Topic" or "Topic in Roadmap" etc.)
+# (Put a heading for the topic without adding parent "Subtopic in Topic" or "Topic in Roadmap" or "Subtopic under XYZ" etc.)
 
-(Write me a brief introduction for the topic with regards to "${roadmapTitle}")
+(Briefly explain the topic in one paragraph using simple english with regards to "${roadmapTitle}". Don't start with explaining how important the topic is with regard to "${roadmapTitle}". Don't say something along the lines of "XYZ plays a crucial role in ${roadmapTitle}". Don't include anything saying "In the context of ${roadmapTitle}". Instead, start with a simple explanation of the topic itself. For example, if the topic is "React", you can start with "React is a JavaScript library for building user interfaces." and then you can explain how it is used in "${roadmapTitle}".)
 `;
 
   if (!parentTopic) {

src/api/user.ts

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

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -15,6 +15,10 @@ export const allowedLinkTypes = [
   'course',
   'website',
   'podcast',
+  'roadmap.sh',
+  'official',
+  'roadmap',
+  'feed'
 ] as const;
 
 export type AllowedLinkTypes = (typeof allowedLinkTypes)[number];

src/components/DailyDevIcon.tsx

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

src/components/EditorRoadmap/EditorRoadmap.tsx

@@ -4,9 +4,15 @@ import {
   type RoadmapRendererProps,
 } from './EditorRoadmapRenderer';
 import { Spinner } from '../ReactIcons/Spinner';
-import type { ResourceType } from '../../lib/resource-progress';
+import {
+  clearMigratedRoadmapProgress,
+  type ResourceType,
+} from '../../lib/resource-progress';
 import { httpGet } from '../../lib/http';
 import { ProgressNudge } from '../FrameRenderer/ProgressNudge';
+import { getUrlParams } from '../../lib/browser.ts';
+import { cn } from '../../lib/classname.ts';
+import { getUser } from '../../lib/jwt.ts';
 
 type EditorRoadmapProps = {
   resourceId: string;
@@ -20,6 +26,7 @@ type EditorRoadmapProps = {
 export function EditorRoadmap(props: EditorRoadmapProps) {
   const { resourceId, resourceType = 'roadmap', dimensions } = props;
 
+  const [hasSwitchedRoadmap, setHasSwitchedRoadmap] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [roadmapData, setRoadmapData] = useState<
     Omit<RoadmapRendererProps, 'resourceId'> | undefined
@@ -27,9 +34,11 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
 
   const loadRoadmapData = async () => {
     setIsLoading(true);
+    const { r: switchRoadmapId } = getUrlParams();
+
     const { response, error } = await httpGet<
       Omit<RoadmapRendererProps, 'resourceId'>
-    >(`/${resourceId}.json`);
+    >(`/${switchRoadmapId || resourceId}.json`);
 
     if (error) {
       console.error(error);
@@ -38,21 +47,29 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
 
     setRoadmapData(response);
     setIsLoading(false);
+    setHasSwitchedRoadmap(!!switchRoadmapId);
   };
 
   useEffect(() => {
+    clearMigratedRoadmapProgress(resourceType, resourceId);
     loadRoadmapData().finally();
   }, [resourceId]);
 
+  const aspectRatio = dimensions.width / dimensions.height;
+
   if (!roadmapData || isLoading) {
     return (
       <div
         style={
-          {
-            '--aspect-ratio': dimensions.width / dimensions.height,
-          } as CSSProperties
+          !hasSwitchedRoadmap
+            ? ({
+                '--aspect-ratio': aspectRatio,
+              } as CSSProperties)
+            : undefined
+        }
+        className={
+          'flex aspect-[var(--aspect-ratio)] w-full flex-col justify-center'
         }
-        className="flex aspect-[var(--aspect-ratio)] w-full justify-center"
       >
         <div className="flex w-full justify-center">
           <Spinner
@@ -68,11 +85,15 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
   return (
     <div
       style={
-        {
-          '--aspect-ratio': dimensions.width / dimensions.height,
-        } as CSSProperties
+        !hasSwitchedRoadmap
+          ? ({
+              '--aspect-ratio': aspectRatio,
+            } as CSSProperties)
+          : undefined
+      }
+      className={
+        'flex aspect-[var(--aspect-ratio)] w-full flex-col justify-center'
       }
-      className="flex aspect-[var(--aspect-ratio)] w-full justify-center"
     >
       <EditorRoadmapRenderer
         {...roadmapData}

src/components/EditorRoadmap/EditorRoadmapRenderer.css

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

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

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

src/components/FrameRenderer/ProgressNudge.tsx

@@ -51,7 +51,7 @@ export function ProgressNudge(props: ProgressNudgeProps) {
         <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
           Progress
         </span>
-        <span>{done}</span> of <span>{$totalRoadmapNodes}</span> Done
+        <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span> of <span>{$totalRoadmapNodes}</span> Done
       </span>
 
       <span

src/components/FrameRenderer/renderer.ts

@@ -152,6 +152,10 @@ export class Renderer {
       return;
     }
 
+    if (/^check:/.test(topicId)) {
+      topicId = topicId.replace('check:', '');
+    }
+
     pageProgressMessage.set('Updating progress');
     updateResourceProgress(
       {

src/components/OpenSourceBanner.astro

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

src/components/OpenSourceStat.astro

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

src/components/PageSponsor.tsx

@@ -5,6 +5,7 @@ import { useStore } from '@nanostores/react';
 import { X } from 'lucide-react';
 import { setViewSponsorCookie } from '../lib/jwt';
 import { isMobile } from '../lib/is-mobile';
+import Cookies from 'js-cookie';
 
 export type PageSponsorType = {
   company: string;
@@ -26,6 +27,22 @@ type PageSponsorProps = {
   gaPageIdentifier?: string;
 };
 
+const CLOSE_SPONSOR_KEY = 'sponsorClosed';
+
+function markSponsorHidden(sponsorId: string) {
+  Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', {
+    path: '/',
+    expires: 1,
+    sameSite: 'lax',
+    secure: true,
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}
+
+function isSponsorMarkedHidden(sponsorId: string) {
+  return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1';
+}
+
 export function PageSponsor(props: PageSponsorProps) {
   const { gaPageIdentifier } = props;
   const $isSponsorHidden = useStore(sponsorHidden);
@@ -60,12 +77,16 @@ export function PageSponsor(props: PageSponsorProps) {
       return;
     }
 
-    if (!response?.sponsor) {
+    if (
+      !response?.sponsor ||
+      !response.id ||
+      isSponsorMarkedHidden(response.id)
+    ) {
       return;
     }
 
     setSponsor(response.sponsor);
-    setSponsorId(response?.id || null);
+    setSponsorId(response.id);
 
     window.fireEvent({
       category: 'SponsorImpression',
@@ -84,7 +105,7 @@ export function PageSponsor(props: PageSponsorProps) {
     const { response, error } = await httpPatch<{ status: 'ok' }>(
       clickUrl.toString(),
       {
-        mobile: isMobile() ? true : false,
+        mobile: isMobile(),
       },
     );
 
@@ -111,7 +132,7 @@ export function PageSponsor(props: PageSponsorProps) {
       href={url}
       target="_blank"
       rel="noopener sponsored nofollow"
-      className="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
+      className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]"
       onClick={async () => {
         window.fireEvent({
           category: 'SponsorClick',
@@ -122,26 +143,32 @@ export function PageSponsor(props: PageSponsorProps) {
       }}
     >
       <span
-        className="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
+        className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300"
         aria-label="Close"
         onClick={(e) => {
           e.preventDefault();
+          markSponsorHidden(sponsorId || '');
           sponsorHidden.set(true);
         }}
       >
-        <X className="h-4 w-4" />
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
       </span>
-      <img
-        src={imageUrl}
-        className="block h-[150px] object-cover lg:h-[169px] lg:w-[118.18px]"
-        alt="Sponsor Banner"
-      />
-      <span className="flex flex-1 flex-col justify-between text-sm">
+      <span>
+        <img
+          src={imageUrl}
+          className="block h-[106px] object-cover sm:h-[169px] sm:w-[118.18px]"
+          alt="Sponsor Banner"
+        />
+      </span>
+      <span className="flex flex-1 flex-col justify-between text-xs sm:text-sm">
         <span className="p-[10px]">
           <span className="mb-0.5 block font-semibold">{title}</span>
           <span className="block text-gray-500">{description}</span>
         </span>
-        <span className="sponsor-footer">Partner Content</span>
+        <span className="sponsor-footer hidden sm:block">Partner Content</span>
+        <span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden">
+          Partner Content
+        </span>
       </span>
     </a>
   );

src/components/RelatedRoadmaps.astro

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

src/components/Roadmaps/RoadmapsPage.tsx

@@ -222,6 +222,12 @@ const groups: GroupType[] = [
         type: 'skill',
         otherGroups: ['Web Development'],
       },
+      {
+        title: 'Terraform',
+        link: '/terraform',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
     ],
   },
   {
@@ -310,6 +316,16 @@ const groups: GroupType[] = [
         link: '/technical-writer',
         type: 'role',
       },
+      {
+        title: 'Product Manager',
+        link: '/product-manager',
+        type: 'role',
+      },
+      {
+        title: 'DevRel Engineer',
+        link: '/devrel',
+        type: 'role',
+      },
     ],
   },
   {

src/components/TopicDetail/TopicDetail.tsx

@@ -24,7 +24,7 @@ import type {
 import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown';
 import { cn } from '../../lib/classname';
 import { Ban, FileText, HeartHandshake, X } from 'lucide-react';
-import { getUrlParams } from '../../lib/browser';
+import { getUrlParams, parseUrl } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
@@ -40,12 +40,16 @@ type TopicDetailProps = {
 };
 
 const linkTypes: Record<AllowedLinkTypes, string> = {
-  article: 'bg-yellow-200',
-  course: 'bg-green-200',
-  opensource: 'bg-black-200 text-white',
-  podcast: 'bg-purple-200',
-  video: 'bg-pink-300',
+  article: 'bg-yellow-300',
+  course: 'bg-green-400',
+  opensource: 'bg-black text-white',
+  'roadmap.sh': 'bg-black text-white',
+  roadmap: 'bg-black text-white',
+  podcast: 'bg-purple-300',
+  video: 'bg-purple-300',
   website: 'bg-blue-300',
+  official: 'bg-blue-600 text-white',
+  feed: "bg-[#ce3df3] text-white"
 };
 
 export function TopicDetail(props: TopicDetailProps) {
@@ -176,29 +180,56 @@ export function TopicDetail(props: TopicDetailProps) {
           const contributionUrl = urlElem?.dataset?.githubUrl || '';
 
           const titleElem: HTMLElement = topicDom.querySelector('h1')!;
-
           const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)');
 
-          const listLinks = Array.from(
-            topicDom.querySelectorAll('ul > li > a'),
-          ).map((link, counter) => {
-            const typePattern = /@([a-z]+)@/;
-            let linkText = link.textContent || '';
-            const linkHref = link.getAttribute('href') || '';
-            const linkType = linkText.match(typePattern)?.[1] || 'article';
-            linkText = linkText.replace(typePattern, '');
+          let ulWithLinks: HTMLUListElement = document.createElement('ul');
 
-            return {
-              id: `link-${linkHref}-${counter}`,
-              title: linkText,
-              url: linkHref,
-              type: linkType as AllowedLinkTypes,
-            };
+          // we need to remove the `ul` with just links (i.e. resource links)
+          // and show them separately.
+          topicDom.querySelectorAll('ul').forEach((ul) => {
+            const lisWithJustLinks = Array.from(
+              ul.querySelectorAll('li'),
+            ).filter((li) => {
+              return (
+                li.children.length === 1 &&
+                li.children[0].tagName === 'A' &&
+                li.children[0].textContent === li.textContent
+              );
+            });
+
+            if (lisWithJustLinks.length > 0) {
+              ulWithLinks = ul;
+            }
           });
 
-          const lastUl = topicDom.querySelector('ul:last-child');
-          if (lastUl) {
-            lastUl.remove();
+          const listLinks = Array.from(ulWithLinks.querySelectorAll('li > a'))
+            .map((link, counter) => {
+              const typePattern = /@([a-z.]+)@/;
+              let linkText = link.textContent || '';
+              const linkHref = link.getAttribute('href') || '';
+              const linkType = linkText.match(typePattern)?.[1] || 'article';
+
+              linkText = linkText.replace(typePattern, '');
+
+              return {
+                id: `link-${linkHref}-${counter}`,
+                title: linkText,
+                url: linkHref,
+                type: linkType as AllowedLinkTypes,
+              };
+            })
+            .sort((a, b) => {
+              // official at the top
+              // opensource at second
+              // article at third
+              // videos at fourth
+              // rest at last
+              const order = ['official', 'opensource', 'article', 'video', 'feed'];
+              return order.indexOf(a.type) - order.indexOf(b.type);
+            });
+
+          if (ulWithLinks) {
+            ulWithLinks.remove();
           }
 
           topicHtml = topicDom.body.innerHTML;
@@ -335,7 +366,7 @@ export function TopicDetail(props: TopicDetailProps) {
                         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"
                       >
                         <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                        Edit this Content
+                        Add Learning Resources
                       </a>
                     </div>
                   )}
@@ -350,18 +381,36 @@ export function TopicDetail(props: TopicDetailProps) {
                         <a
                           href={link.url}
                           target="_blank"
-                          className="font-medium underline"
+                          className="group font-medium text-gray-800 underline underline-offset-1 hover:text-black"
+                          onClick={() => {
+                            // if it is one of our roadmaps, we want to track the click
+                            if (canSubmitContribution) {
+                              const parsedUrl = parseUrl(link.url);
+
+                              window.fireEvent({
+                                category: 'TopicResourceClick',
+                                action: `Click: ${parsedUrl.hostname}`,
+                                label: `${resourceType} / ${resourceId} / ${topicId} / ${link.url}`,
+                              });
+                            }
+                          }}
                         >
                           <span
                             className={cn(
-                              'mr-2 inline-block rounded px-1.5 py-1 text-xs uppercase no-underline',
+                              'mr-2 inline-block rounded px-1.5 py-0.5 text-xs uppercase no-underline',
                               link.type in linkTypes
                                 ? linkTypes[link.type]
                                 : 'bg-gray-200',
                             )}
                           >
-                            {link.type.charAt(0).toUpperCase() +
-                              link.type.slice(1)}
+                            {link.type === 'opensource' ? (
+                              <>
+                                {link.url.includes('github') && 'GitHub'}
+                                {link.url.includes('gitlab') && 'GitLab'}
+                              </>
+                            ) : (
+                              link.type
+                            )}
                           </span>
                           {link.title}
                         </a>
@@ -372,8 +421,8 @@ export function TopicDetail(props: TopicDetailProps) {
               )}
 
               {/* Contribution */}
-              {canSubmitContribution && !hasEnoughLinks && contributionUrl && (
-                <div className="mb-12 mt-3 border-t text-sm text-gray-400">
+              {canSubmitContribution && !hasEnoughLinks && contributionUrl && hasContent && (
+                <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
                   <div className="mb-4 mt-3">
                     <p className="">
                       Find more resources using these pre-filled search queries:
@@ -409,7 +458,7 @@ export function TopicDetail(props: TopicDetailProps) {
                     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"
                   >
                     <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                    Edit this Content
+                    Add Learning Resources
                   </a>
                 </div>
               )}

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

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

src/components/UserPublicProfile/UserPublicProfileHeader.tsx

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

src/data/authors/ekene.md

@@ -0,0 +1,13 @@
+---
+name: 'Ekene Eze'
+imageUrl: '/authors/ekene-eze.jpg'
+employment:
+  title: 'Author'
+  company: 'roadmap.sh'
+social:
+  linkedin: 'https://www.linkedin.com/in/ekeneeze/'
+  twitter: 'https://x.com/kenny_io'
+  website: 'https://kenny.engineer/'
+---
+
+Kenny is a Software Engineer and Developer Advocate with over 5 years experience working in DevRel across different functions. Recently as a Senior Developer Experience Engineer at Netlify and leading DevRel teams in others.

src/data/authors/william.md

@@ -0,0 +1,12 @@
+---
+name: 'William Imoh'
+imageUrl: '/authors/william-imoh.jpg'
+employment:
+  title: 'Author'
+  company: 'roadmap.sh'
+social:
+  linkedin: 'https://www.linkedin.com/in/william-imoh/'
+  twitter: 'https://x.com/iChuloo'
+---
+
+William is a Software Engineer, Developer Advocate and Product Manager turned Entrepreneur. He leads the team at **Hackmamba** and occasionally talks about building performant web experiences.

src/data/guides/backend-project-ideas.md

@@ -7,7 +7,7 @@ seo:
   title: '20 Backend Project Ideas to take you from Beginner to Pro'
   description: 'Seeking backend projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-project-ideas-ovr48.jpg'
-isNew: true
+isNew: false
 type: 'textual'
 date: 2024-05-09
 sitemap:

src/data/guides/devops-vs-sre.md

@@ -0,0 +1,166 @@
+---
+title: 'DevOps vs SRE: Key Differences Explained'
+description: 'DevOps vs SRE: Discover which role suits your career best. Learn key differences, skills required, and career prospects in our detailed guide.'
+authorId: william
+excludedBySlug: '/devops/devops-vs-sre'
+seo:
+  title: 'DevOps vs SRE: Key Differences Explained'
+  description: 'DevOps vs SRE: Discover which role suits your career best. Learn key differences, skills required, and career prospects in our detailed guide.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-vs-sre-ofdcy.jpg'
+isNew: true
+type: 'textual'
+date: 2024-06-13
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+When it comes to managing and enhancing software development and operations, companies often adopt sets of practices and processes such as Development Operations (DevOps) or Site Reliability Engineering (SRE). These approaches increase their ability to deliver applications scalably and maintain a fast pace.
+
+In fact, companies and individuals seeking to deliver applications and services at a higher velocity are increasingly moving away from traditional software development and infrastructure management. They achieve this by either combining selected DevOps and SRE practices or opting for one over the other.
+
+Despite their shared goal of improving the software delivery process, some nuances set DevOps and SRE apart.
+
+This article provides an in-depth discussion of the key differences between each approach, what they entail, similarities, and the tools and technologies involved. Finally, it offers roadmaps for your DevOps or SRE journey.
+
+## Differences between DevOps and SRE
+
+The main difference between [DevOps](https://roadmap.sh/devops) and SRE lies in their primary **goals**. DevOps aims to improve the software development lifecycle (SDLC), while SRE **focuses** on maintaining stability and resilience after application deployment. In addition, they also differ in **scope**, **metrics**, and **team structure**. 
+
+Let’s look at these points in detail:
+
+1. **Goals:** DevOps' primary goal is to improve the (SDLC) through process automation, enhance collaboration, and promote continuous improvement. SRE aims to create easily maintained systems by automating repetitive and manual tasks, implementing monitoring and alerting systems, and designing for scale and resilience.
+
+2. **Roles and ownership:**  In DevOps, developers, and other related stakeholders are often involved in operational tasks, sharing ownership of the entire software delivery process from development through to production. In contrast, the SRE model promotes a clear separation between development and operations. The development team is focused on building and maintaining features, while the SRE team is responsible for the reliability and availability of services.
+
+3. **Scope and mindset:** DevOps is typically applied to self-contained applications or services, encouraging experimentation and innovation with opportunities to learn from failures. In contrast, SRE is applied to entire systems and platforms, primarily focusing on minimizing human errors and downtime.
+
+4. **Metrics:** In measuring success, DevOps tracks metrics such as the time from code commit to deployment, deployment frequency, failure rate, and overall system performance. On the other hand, SRE focuses on metrics related to service level objectives like Mean Time to Recover (MTTR), Mean Time Between Failures (MTBF), latency, traffic, and the frequency of errors occurring in the system.
+
+5. **Team structure and processes:** DevOps teams work more like an Agile development team, collaborating with members across development and operations. They often break projects into smaller features and use [continuous integration(CI) and continuous delivery (CD)](https://roadmap.sh/guides/ci-cd) to prioritize delivery based on business needs.
+
+    In contrast, SRE teams are highly specialized teams as compared to DevOps. They see the production environment as a highly available service and implement measures to address threats and failures that may arise from deployed features and integrations.
+
+Both DevOps and SRE aim to enhance software development and operations. DevOps primarily focuses on software development and delivery, while SRE concentrates on software operations and maintenance after deployment, emphasizing reliability and scalability strongly.
+
+## Key components of DevOps
+
+According to [Statista](https://www.statista.com/statistics/1234098/software-development-process-changes/), DevOps adoption is expected to grow, with **21% of respondents having integrated it into their source code management**. Recruiters are also actively hiring for DevOps roles, [**with demand currently at 35.5%**](https://www.statista.com/statistics/1296668/top-in-demand-tech-skills-worldwide/)**.**
+
+One core principle of DevOps is automating manual processes within the SDLC, focusing on reducing costs and minimizing errors. In addition, DevOps embraces continuous integration, enabling companies to adapt and accommodate changes to end-users' needs or business expansions.
+
+The following are key aspects of DevOps:
+
+### CI and CD
+
+One of the fundamental principles of DevOps is to facilitate faster release cycles for software. This is achieved by continuously integrating code into a repository and automatically deploying it to the required environment.
+
+### Automation
+
+Development processes such as testing, deployment, and infrastructural provisioning can be tedious, error-prone, and manual. DevOps addresses these challenges through automation.
+
+### Monitoring
+
+Monitoring application performance, health, availability, and customer experience are some of the key principles of DevOps. With this capability, companies can identify issues quickly, iterate on solutions, and continuously improve.
+
+### Collaboration and communication
+
+The overall goal of shipping secure and reliable software involves stakeholders like the developments, operations, and other relevant teams to adhere to DevOps practices of collaborating and actively communicating throughout the SDLC.
+
+### Infrastructure as Code
+
+Using scripts or declarative definitions to provision and configure infrastructure is a key component in DevOps. This approach enables teams to be consistent, efficiently manage resources, and reproduce environment-specific bugs.
+
+### Continuous learning and improvement
+
+In DevOps, teams are encouraged to share knowledge across teams, conduct service failure postmortem, and experiment with new ideas and potential solutions.
+
+## Key components of SRE
+
+SRE can function as a tool, a set of best practices, or a strategy to automate IT operations tasks such as production system management, change management, and incident response. It empowers system administrators to manage large systems using code rather than manual methods.
+
+The following are the key aspects of SRE:
+
+### Automation
+
+One key principle followed by SRE is establishing a workflow to reduce manual and repetitive work related to operational tasks.
+
+### Monitoring and alerting
+
+A core principle of SRE is using real-time monitored metrics and alerts to detect and respond to issues promptly. With these systems in place, SRE teams can diagnose and resolve potential issues before they impact the system.
+
+### Forecast and planning
+
+Due to user traffic and workload, systems can experience increased demand and heavy resource usage. SRE implements measures to ensure that such demand is properly handled by forecasting resources and managing related infrastructure.
+
+### Incident management
+
+SRE teams define clear processes for detecting, diagnosing, and resolving incidents. When incidents occur, postmortems are conducted to identify root causes and prevent similar issues from recurring.
+
+### Service Level Objectives (SLOs)
+
+SRE aims to deliver higher availability percentages, uptime, and other metrics such as error rates and response time to system customers or users.
+
+## Similarities between DevOps and SRE
+
+DevOps and SRE principles have become popular and widely adopted by organizations because they create robust and bug-free systems with continuous improvement in mind. Below are some key similarities between DevOps and SRE:
+
+- Both advocate automating repetitive tasks like testing, deployment, monitoring, etc.
+- They promote the use of CI and CD for software releases
+- There is a strong emphasis on real-time monitoring and collection of metrics for diagnosis and performance monitoring
+- Both focus on collaboration and encourage a culture of continuous learning and improvement
+- They prioritize building systems with a great user experience, quick recovery from disruptions, and reliability.
+
+## What is the role of a DevOps engineer?
+
+[DevOps engineers](https://roadmap.sh/devops) are integral to any organization looking to bridge the gap between development and operations. They collaborate closely with developers, quality assurance teams, and other stakeholders to achieve this goal.  Here are some key responsibilities of a DevOps engineer:
+
+- Adopts the agile methodology and automation to remove bottlenecks in the SDLC
+- Set up monitoring and logging mechanisms to track the performance, availability, and health of systems
+- Provision resources, deploy, and manage applications on cloud platforms like [AWS](https://roadmap.sh/aws), Azure, Google Cloud, etc
+- Creates standards and manages configuration to enforce and maintain system integrity across multiple environments
+- Creates a plan to optimize system performance and resource utilization
+- Promotes knowledge sharing by carefully documenting processes, procedures, and best practices 
+
+To perform these responsibilities, the DevOps team uses many tools to automate and improve their workflow. Here are some of the tools commonly used:
+
+- **Docker:** [Docker](https://roadmap.sh/docker) is an open-source platform that enables developers to build, deploy, and run containerized applications.
+- **Kubernetes:** [Kubernetes](https://roadmap.sh/kubernetes) is an open-source orchestration platform for automating the deployment, scaling, and managing containerized applications
+- **Jenkins:** Jenkins is an automation server used for performing CI and CD in a software project
+- **Git:** Git is a distributed version control system for tracking changes in source code during development
+- **Prometheus:** Prometheus is an open-source application for event monitoring and alerting.
+- **Grafana:** Grafana is an open-source analytics and visualization application
+- **Ansible:** Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks
+
+## What is the role of an SRE engineer?
+
+Similar to the DevOps team, SRE engineers are also an integral part of any organization looking to build systems and services that are reliable, available, scalable, and performant.  Here are some key responsibilities of an SRE engineer:
+
+- Responsible for maintaining and ensuring system reliability and uptime
+- Collaborate with the development team to design and architect applications
+- Automate tasks by developing tools and scripts for deployment, alerting, and incident response
+- Analyze and plan resources to cater for future growth and scale
+- Creates plans to mitigate or eliminate events or system failures
+- Promotes knowledge sharing by documenting system configuration, procedures, and best practices
+
+To perform these responsibilities, the SRE team uses various tools to tackle infrastructure and operational problems. Here are some of the tools commonly used:
+
+- **Kibana:** Kibana is an open-source data visualization platform for monitoring metrics and events
+- **Datadog:** Datadog is a cloud monitoring tool for events, infrastructure hosts, and much more
+- **NetApp Cloud Insights:** NetApp Cloud Insights is a tool used to monitor IT infrastructure 
+- **Terraform:** Terraform is an infrastructure as code tool used to automate infrastructure tasks
+- **Ansible:** Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks
+- **New Relic:** New Relic is a cloud-based full-stack observability platform for monitoring and analyzing metrics
+- **Opsgenie:** Opsgenie is an incident response solution with functionalities like on-call scheduling, reporting, analytics, and alerting
+
+In summary, DevOps focuses on developing and delivering software, and SRE works on the deployed software to ensure it functions as intended and is reliable. They both have similarities and differences that organizations actively adopt when building and maintaining scalable applications.
+
+Whether you're an experienced developer aiming to improve your skills or a beginner exploring a career as a DevOps or SRE engineer, you might have seen tons of resources available online and maybe get overwhelmed without a clear path on the way to go. Well, not anymore, roadmap.sh provides a comprehensive guide on any of the career paths you choose to follow. You will be able to:
+
+- Stay updated with a new roadmap, track your progress, and share it on your roadmap.sh profile
+- Learn with like-minded individuals by joining a supportive community when you [sign up](https://roadmap.sh/signup) on roadmap.sh platform
+- [Generate a new roadmap](https://roadmap.sh/ai) with AI.

src/data/guides/frontend-languages.md

@@ -1,13 +1,13 @@
 ---
 title: 'What Front End Programming Languages Should You Learn?'
 description: 'Get ahead in web development. Discover the essential frontend languages every pro developer uses!'
-authorId: kamran
+authorId: william
 excludedBySlug: '/frontend/languages'
 seo:
   title: 'What Front End Programming Languages Should You Learn?'
   description: 'Get ahead in web development. Discover the essential frontend languages every pro developer uses!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/best-front-end-languages-exm6g.jpg'
-isNew: true
+isNew: false
 type: 'textual'
 date: 2024-05-02
 sitemap:

src/data/guides/full-stack-vs-software-engineer.md

@@ -1,13 +1,13 @@
 ---
 title: 'Full Stack Developer or Software Engineer – Which Way to Go?'
 description: 'Unsure about your dev career path? Compare full stack developer and software engineer roles to make an informed decision.'
-authorId: kamran
+authorId: william
 excludedBySlug: '/full-stack/vs-software-engineer'
 seo:
   title: 'Full Stack Developer or Software Engineer – Which Way to Go?'
   description: 'Unsure about your dev career path? Compare full stack developer and software engineer roles to make an informed decision.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-vs-software-engineer-yy0dk.jpg'
-isNew: true
+isNew: false
 type: 'textual'
 date: 2024-05-02
 sitemap:

src/data/guides/how-to-become-devops-engineer.md

@@ -0,0 +1,178 @@
+---
+title: 'How to become a DevOps Engineer in @currentYear@'
+description: 'Want to become a DevOps engineer? Our @currentYear@ guide covers skills, certifications, and expert career advice. Start your journey today!'
+authorId: william
+excludedBySlug: '/devops/how-to-become-devops-engineer'
+seo:
+  title: 'How to become a DevOps Engineer in @currentYear@'
+  description: 'Want to become a DevOps engineer? Our @currentYear@ guide covers skills, certifications, and expert career advice. Start your journey today!'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-devops-engineer-3opju.jpg'
+isNew: true
+type: 'textual'
+date: 2024-06-11
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+If you are trying to get into tech or are already in tech and have been exploring roles across the industry, you must have come across Development and Operations (DevOps). In fact, DevOps is one of the highest-paying roles in the tech industry. But **what is DevOps, and how is it different from other roles?**
+
+**DevOps is a software engineering approach that combines development (Dev) and operations (Ops) to shorten the software development lifecycle** (feature development, bug fixes, updates) by embracing automation. It is a bridge between the development and the operations team. While the primary goal of a software engineer is to design and build software solutions, a DevOps engineer has a key role in streamlining the software delivery pipeline, automating infrastructure provisioning, and enhancing the deployment process.
+
+This article provides in-depth knowledge on how to become a DevOps engineer, highlighting the mindset and technical skills(including DevOps tools) required to become one.
+
+**TL;DR:** DevOps combines development and operations to automate software delivery. To become a DevOps engineer, you should adopt a mindset of automation, risk awareness, systems thinking, and continuous learning. In addition to the mindset, follow the steps below:
+
+- Step 1: Learn a programming language
+- Step 2: Get comfortable with Linux and terminal
+- Step 3: Version control and code hosting platforms
+- Step 4: Networking fundamentals
+- Step 5: Containerization
+- Step 6: Cloud platform
+- Step 7: Continuous integration and delivery
+
+Let’s dive into the essential skills required for a [DevOps engineer](https://roadmap.sh/devops).
+
+## Skills required to become a DevOps Engineer
+
+### Operating system
+
+A DevOps engineer should understand the operating system, especially Linux (distribution or any variant). This is because most of the servers in use are Linux-based, so having a solid foundation in the Linux OS is imperative for infrastructure management and troubleshooting.
+
+### Solid programming fundamentals
+
+As a DevOps engineer, you will use your knowledge of programming and scripting language to:
+
+- Automate frequent and boring tasks
+- Patch a security bug exposing your internal application to outside users 
+- Create automation tools, monitoring tools, and logging tools
+
+Hence, hands-on experience with programming is crucial. 
+
+### Version control
+
+Knowledge of version control is essential in all software engineering roles. As a DevOps engineer, you will likely work in a team rather than alone. Version control systems like Git facilitate collaboration in a team while providing a centralized repository for the code.
+
+### Networking fundamentals
+
+Many modern-day applications are distributed systems that rely on networking. For instance, a single application could be composed of a frontend, backend, database, file server, etc., each residing on a separate server. For a seamless user experience, these separate entities should be able to communicate smoothly.
+
+### Containerization and orchestration
+
+[Containerization](https://roadmap.sh/docker) and [orchestration](https://roadmap.sh/kubernetes) help solve the issues of software deployment and resource utilization. Knowledge of containerization and orchestration helps reduce deployment time and allows you to scale applications quickly without downtime, resulting in a better user experience.
+
+### Cloud platforms
+
+Procuring hardware to deploy the software is not always feasible and beneficial. Furthermore, once you purchase the hardware, you need more time and resources to manage the new hardware. Depending upon the complexity of the application, choosing cloud platforms instead of on-premise hardware can significantly reduce deployment time and cost.
+
+### Infrastructure as Code (IaC)
+
+IaC can be seen as a superior form of automation for a DevOps engineer. IaC tools like Terraform and Amazon Cloud CDK allow the operations team to set up and manage infrastructure by simply changing a configuration file. This makes it easier to manage and scale the application.
+
+So, how do you learn these essential skills? In what sequence do you acquire these skills? The following section presents a complete roadmap on how you can learn these skills and become a DevOps engineer.
+
+## How to become a DevOps Engineer
+
+The internet is full of resources for learning DevOps and DevOps tools. Many of these guides lack structure and organization, resulting in a dilemma of where to start. To help beginners learn DevOps in a structured manner, [roadmap.sh](https://roadmap.sh) has a beginner-friendly [DevOps roadmap](https://roadmap.sh/devops?r=devops-beginner). 
+
+This section presents a concise version of the DevOps roadmap. It is recommended that you implement real-world projects recommended in each stage of the roadmap. In the end, you can publish these DevOps projects to GitHub as an open-source project repository, and the repository will act as your portfolio.
+
+### Step 1: Learn a programming language
+
+Programming language is essential to a DevOps engineer. I recommend you start with either Python or Go. [Python](https://roadmap.sh/python) is a popular programming language that is easier to learn and used in various projects involving [backend](https://roadmap.sh/backend) development, writing machine learning algorithms, automating everyday tasks, etc. 
+
+[Automate the Boring Stuff with Python](https://automatetheboringstuff.com/) is an excellent resource for learning Python and basic programming concepts. It will also come in handy when building automation tools. To demonstrate your understanding of Python, you can create a web scraper that extracts a list of hotels, their address, prices, reviews, and locations from a site like [booking.com](http://booking.com/).
+
+### Step 2: Get comfortable with Linux and the terminal
+
+According to [Gitnux](https://gitnux.org/linux-statistics/), 92.4% of the world’s top 1 million servers run on Linux, and about 96.3% of the world’s top 1 million websites are powered by Unix-like operating systems, with Linux being the most popular. This makes Linux a popular tool for all software engineers.
+
+Furthermore, you should make the terminal your best friend. Some programs and packages may not have a GUI counterpart, and even when they exist, using the CLI(Command Line Interface) alternative is faster and easier to automate. 
+
+An excellent way to practice Linux is to install it on a thumb drive and try to do everyday tasks like changing the directory, creating new files and folders, editing files, searching for files and folders, etc., using Linux commands instead of using the GUI interface.
+
+### Step 3: Version control and code hosting platforms
+
+Version control systems like Git make it easier for developers to track changes in their source code by maintaining a history of the changes. Combined with platforms like GitHub or Bitbucket, Git can facilitate developers to work collaboratively with each other.
+
+[This tutorial](https://www.atlassian.com/git) will help you learn Git basics and how to use Git for collaboration using Bitbucket, a code hosting platform. For advanced concepts on git branching, [refer this site.](https://learngitbranching.js.org) Once you go through the tutorial, you can easily switch from Bitbucket to GitHub and GitLab, which are more popular among developers.
+
+### Step 4: Networking fundamentals
+
+Learning networking fundamentals becomes vital to the DevOps team when working with software components constantly communicating with other services. Knowledge of networks comes in handy when setting up resources in the public cloud. At a minimum, you should clearly understand standard protocols(TCP/IP, UDP), routing, IP addressing, subnetting, and ports. 
+
+A DevOps engineer should have a sound knowledge of web servers like Nginx. Nginx allows you to serve your application on the web while handling reverse proxy and load balancing. [Apache](https://httpd.apache.org) is another web server that provides similar features.
+
+For your practice, you can create a simple frontend (or clone it from GitHub) and deploy it using Nginx or Apache.
+
+### Step 5: Containerization
+
+An application developed by one developer may not work on other machines due to the difference in environment. To eliminate this issue, DevOps engineers use containerization tools like Docker. Docker allows engineers to create consistent development, testing, and production environments. It also ensures the developed application is portable across different platforms. 
+
+Applications rely on multiple containers that communicate with each other. To facilitate the orchestration of these containers, you can use container orchestration tools like [Kubernetes](https://roadmap.sh/kubernetes). The [Docker Roadmap](https://roadmap.sh/docker) provides essential resources to help you master Docker and Kubernetes. 
+
+You can demonstrate your understanding of containerization tools by creating a simple project with frontend and back deployed as two separate containers. If you have already developed these components in the previous stages of the roadmap, re-use them to save time.
+
+### Step 6: Cloud platform
+
+Cloud platforms like [AWS](https://roadmap.sh/aws), Azure, and Google Cloud Platform are some popular cloud providers that allow you to deploy your projects without investing in expensive hardware. Many cloud services across these cloud platforms are analogous. So, if you are a beginner, start with AWS, as it is the most widely used cloud platform. Once you are comfortable with AWS’s services and key concepts, you can deploy the application created in earlier stages to the AWS. 
+
+Alternatively, you could demonstrate your understanding by taking the [certification exam from AWS](https://aws.amazon.com/certification/).
+
+Once comfortable launching your infrastructure using the GUI, you should learn about Infrastructure as Code(IaC). I recommend using [Terraform](https://www.terraform.io/) for IaC as it is cloud-agnostic. Terraform allows you to set up and make changes to infrastructure resources by editing a configuration file.
+
+### Step 7: Continuous integration and delivery
+
+[Continuous Integration and Continuous Delivery](https://www.youtube.com/watch?v=nyKZTKQS_EQ) (or Continuous Deployment) (CI/CD) is a set of practices aimed at automating and streamlining software changes from development to production. Today, in practice, when you commit and push your changes to the remote repository (say GitHub), the tests kick off; if the tests pass successfully, your changes are merged and then deployed to the staging and production server.
+
+CI/CD is a combination of three skills: programming, writing configuration files, and Git. As such, you don’t need to learn new skills to implement CI/CD. However, some organizations use tools like CircleCI and Jenkins to simplify the process.
+
+You can practice CI/CD using GitHub actions. [GitHub provides a set of tutorials](https://docs.github.com/en/actions/learn-github-actions) for the same. You can follow along those tutorials to get a good grasp of Continuous Integration and Continuous Deployment. Then, you can implement CICD in one of your projects created while learning previous skills in this roadmap.
+
+Next, let’s discuss the mindset needed to become a DevOps engineer.
+
+## DevOps Engineer’s mindset
+
+To become a successful DevOps engineer, you must orient your thoughts around the following:
+
+### Automation
+
+Software products or systems are prone to various errors, including human errors. Stress during work and the race against deadlines can increase the frequency of these errors. Automation helps reduce human error and eliminate boring tasks.
+
+### Risk awareness
+
+DevOps engineers must understand the risks entangled with changes to a software system and deployment infrastructures. The risk should be minimized by utilizing automated testing, monitoring, and incremental changes.
+
+### Systems thinking
+
+DevOps engineers must understand how different components within a system communicate and interact with each other to deliver the desired solution. A graphical representation of the system can come in handy when fixing issues or knowledge transfer.
+
+### Continuous learning
+
+A continuous learning and continuous improvement mindset is essential across all roles in software engineering, but its importance is amplified for a DevOps engineer. A DevOps engineer must continually learn about new technologies, tools, and best practices and implement the ones best suited to the project.
+
+You may not have the DevOps mindset, but that is okay. You can build this mindset as you learn and grow into the role. Let us look at some technical skills required to become a DevOps engineer.
+
+## Who can become a DevOps Engineer?
+
+Anyone with the right skillset can become a DevOps engineer. Typically, it is easier to transition into a DevOps role if you are a,
+
+- Systems Engineer
+- Backend Engineer
+- Infrastructure Engineer
+
+If you are a newbie in software engineering, you are encouraged to learn the above skills and concepts. You can then apply for a DevOps intern position. You may look for vacancies in local companies or remote job boards.
+
+Depending on your current skill set and practical experience, the time to transition into a DevOps role will vary. However, following a structured learning path will help you speed up and ease the process.
+
+## What next?
+
+The [roadmap](https://roadmap.sh) simplifies the [DevOps](https://roadmap.sh/devops) journey by breaking it into learnable skills via the DevOps roadmap. To effectively use the site, I encourage you to [sign up](https://roadmap.sh/signup) on the platform and learn the desired skill by following the structured roadmap. You could explore additional roadmaps and advanced topics utilizing the search bar on the platform. The platform also allows you to:
+
+- Keep track of your journey as you progress through a roadmap
+- Draw your own roadmap or generate one using AI
+- Create and share a roadmap for [your team](https://roadmap.sh/teams)

src/data/guides/java-developer-skills.md

@@ -1,13 +1,13 @@
 ---
 title: 'Must-Have Java Full-stack Developer Skills in @currentYear@'
 description: 'Master the essential skills every Java full stack developer needs. Boost your career with our expert tips!'
-authorId: kamran
+authorId: william
 excludedBySlug: '/java/developer-skills'
 seo:
   title: 'Must-Have Java Full-stack Developer Skills in @currentYear@'
   description: 'Master the essential skills every Java full stack developer needs. Boost your career with our expert tips!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/java-full-stack-developer-skills-sjzbd.png'
-isNew: true
+isNew: false
 type: 'textual'
 date: 2024-05-01
 sitemap:

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

@@ -5,7 +5,7 @@ briefDescription: 'Test, rate and improve your Backend knowledge with these ques
 title: '50 Popular Backend Developer Interview Questions and Answers'
 description: 'Test, rate and improve your Backend knowledge with these questions.'
 authorId: 'fernando'
-isNew: true
+isNew: false
 date: 2024-05-24
 seo:
   title: '50 Popular Backend Developer Interview Questions and Answers'
@@ -61,7 +61,7 @@ questions:
     topics:
       - 'Beginner'
   - question: What is containerization, and how does it benefit backend development?
-    answer: statelessness-http.md
+    answer: containerization.md
     topics:
       - 'Beginner'
   - question: What measures would you take to secure a newly developed API?
@@ -141,7 +141,7 @@ questions:
     topics:
       - 'Intermediate'
   - question: Describe the concept of eventual consistency and its implications in backend systems
-    answer: api-dependencies.md
+    answer: eventual-consistency.md
     topics:
       - 'Intermediate'
   - question: What is a reverse proxy, and how is it useful in backend development?

src/data/question-groups/frontend/content/async-ops-js.md

@@ -0,0 +1,6 @@
+There are 4 main ways in which JavaScript allows developers to handle asynchronous calls. In the end, the result is always the same, but the final structure of the code and the way to reason about it is considerably different.
+
+- **Callbacks**. They allow you to set up a function to be called directly once the asynchronous operation is done.
+- **Promises**. Promises represent the eventual completion of an asynchronous operation, and they provide a simpler and more intuitive syntax to specify callbacks to be called on success and failure of the operation.
+- **Async/Await**. The final evolution of the promises syntax. It’s mainly syntactic sugar, but it makes asynchronous code look synchronous, which in turn makes it a lot easier to read and reason about.
+- **Event listeners**. Event listeners are callbacks that get triggered when specific events are fired (usually due to user interactions).

src/data/question-groups/frontend/content/block-inline-elems.md

@@ -0,0 +1,5 @@
+In CSS, the difference between **inline**, **inline-block**, and **block** elements is on the way they’re rendered in the web page:
+
+- **Inline**: Inline elements don’t have a width or height. Instead, they don’t start on a new line and take up only the width that’s required (based on their content). Examples: <span>, <a>.
+- **Inline-block**: Just like inline elements, here the DOM elements do not start on a new line, however, they do allow you to set a height and width on them. Example: <img>.
+- **Block**: Elements start on a new line, taking up the full width available by default. Their width and height can be set by you. Examples: <div>, <p>.

src/data/question-groups/frontend/content/box-model.md

@@ -0,0 +1,8 @@
+The CSS box model describes the rectangular boxes generated for elements in the DOM. The box model is composed of the following layers:
+
+1. **Content**: The innermost part, where text and images appear.
+2. **Padding**: The space between the content and the border.
+3. **Border**: The outer edge of the padding, surrounding the element.
+4. **Margin:** The space outside the border, separating the element from others.
+
+By controlling each layer individually, you can define the look of each element in the user interface.

src/data/question-groups/frontend/content/browser-render.md

@@ -0,0 +1,9 @@
+The process of rendering a web page in the browser involves several steps:
+
+1. Parsing the HTML.
+2. Parsing the CSS and applying styles.
+3. Calculating the position of each element in the layout of the page.
+4. Painting the actual pixels in the screen, while at the same time sorting them into layers.
+5. Composing all layers together, to render the website on screen. This step is taking into account z-index values, opacity values and more.
+6. Running JavaScript code.
+7. Loading the asynchronous resources.

src/data/question-groups/frontend/content/client-storage.md

@@ -0,0 +1,5 @@
+**Cookies** are small pieces of data stored in web browsers. They are mainly used for keeping information between HTTP requests, such as user authentication, session management, and tracking user behavior
+
+On the other hand, **sessionStorage** is designed for temporary storage and is accessible only within the same session (i.e.., while the browser window or tab is open). Data stored in sessionStorage is lost when the browser window is closed.
+
+Finally, **localStorage** is similar to **sessionStorage** but persists even when the browser window or tab is closed and reopened. It provides long-term storage for web applications. They are very similar to cookies, however, the size limitations on localStorage are quite big compared to cookies, making it a much better alternative when storing large datasets.

src/data/question-groups/frontend/content/closures.md

@@ -0,0 +1,3 @@
+When a function is defined within another function, it retains access to the variables and parameters of the outer function, even after the outer function has finished executing. That link, between the inner function and its scope inside the outer function is known as “closure”
+
+You can use them to create private variables that can only be accessed by the inner function, you can even use them to create complex objects with access to a rich context that is only available globally to them.

src/data/question-groups/frontend/content/critical-css.md

@@ -0,0 +1,3 @@
+Remove the CSS rules from the CSS files and inline them into the main “<head>” element of your website.
+
+By doing it like this, you remove the loading time of that code, as it loads immediately once the main file loads. The rest, the non-critical rules, can be loaded once the main resource loads (the main CSS file).

src/data/question-groups/frontend/content/csp.md

@@ -0,0 +1,7 @@
+Content Security Policy (CSP) is a security standard that helps to avoid cross-site scripting (XSS) attacks and other code injection attacks by defining and enforcing a whitelist of approved sources, such as scripts, stylesheets, images, and other resources.
+
+The main benefits are:
+
+- **Better Security**: CSP helps protect websites and web apps against various types of attacks, including XSS and data injection.
+- **More Contro**l: Developers can define fine-grained policies to control the sources from which content can be loaded.
+- **Improved Compliance**: Helps meet security compliance requirements, such as those outlined in OWASP Top 10.

src/data/question-groups/frontend/content/css-grid.md

@@ -0,0 +1,3 @@
+To create a grid layout, you have to first specify the “display:grid” property on the containing element, and then define the structure of the grid, by using the “grid-template-rows” and “grid-template-columns” properties.
+
+Now simply place the elements inside the grid container and specify the “grid-column” or “grid-row” properties.

src/data/question-groups/frontend/content/css-specificity.md

@@ -0,0 +1,8 @@
+CSS specificity is used to determine which set of styles to apply on any given element when there are overlapping styles (like several rules setting the font-size of the same element).
+
+The way it works is by applying the following order of precedence:
+
+1. First, any inline style will override any other style.
+2. Second, any ID-based style will override anything but inline styles.
+3. Third, class-based selectors will override anything but inline and ID-based styles.
+4. Finally, type selectors can be overridden by any other type of selectors.

src/data/question-groups/frontend/content/css-variables.md

@@ -0,0 +1,3 @@
+Just like variables in programming languages, CSS variables can be set by developers and reused across the entire CSS stylesheets. They’re great for centralizing global values that are used throughout the web site’s code.
+
+They’re also heavily used by CSS frameworks to set constants such as the value of colors (i.e. “black” being “#222” instead of “000”.-

src/data/question-groups/frontend/content/dom.md

@@ -0,0 +1 @@
+The Document Object Model (DOM) is an API for web documents. It represents the structure of an HTML web page as a tree of nodes, where each node corresponds to a part of the document (i.e. an element, an attribute, or text).

src/data/question-groups/frontend/content/em-vs-rem.md

@@ -0,0 +1,6 @@
+![EM vs REM in CSS](https://assets.roadmap.sh/guest/em-vs-rem-css-jwgx8.png)
+
+They’re both relative units of measurement, however, they’re relative to different things:
+
+1. **“em”** units are relative to the font size of their parent element. So if the parent element has a font size of 20px, then setting a “2em” font size, would equal to 40px.
+2. **“rem”** units are “root em”, which means they’re relative to the web page’s root element (the “<html>” element).

src/data/question-groups/frontend/content/event-delegation.md

@@ -0,0 +1,5 @@
+Event delegation is a technique where you define an event handler for a particular event as part of the parent element that contains the elements that will actually trigger the event.
+
+![Event Delegation in JavaScript](https://assets.roadmap.sh/guest/event-delegation-explained-5e2vt.png)
+
+When the event is triggered, it’ll bubble up in the DOM hierarchy until it reaches the parent’s event handler.

src/data/question-groups/frontend/content/event-listeners.md

@@ -0,0 +1,3 @@
+To add an event listener on an element, you have to first “get” that element through one of the many methods of the document object (i.e. getElementById, etc) and then use the addEventListener method of the obtained object.
+
+The method will receive the event name (i.e. ‘click’, ‘keyup’, ‘mouseup’, etc), the event handler function and, optionally, a boolean indicating whether the event should be captured during the capturing phase.

src/data/question-groups/frontend/content/event-loop-js.md

@@ -0,0 +1,10 @@
+The event loop is a core concept in JavaScript, and it allows for the execution of asynchronous code.
+
+![Event loop in JavaScript](https://assets.roadmap.sh/guest/javascript-event-loop-explained-d92hx.png)
+
+The way it works, is as follows:
+
+1. **Call Stack**: JavaScript executes your code on a single thread using a call stack, where function calls are added and executed one by one. When a function ends, it's removed from the stack.
+2. **Async calls**: For asynchronous operations, JavaScript uses Web APIs provided by the browser. These operations are offloaded from the call stack and handled separately.
+3. **Tasks Queue**: Once an asynchronous call is done, its callback is placed in the task queue.
+4. **Event Loop**: The event loop constantly checks the call stack and the task queue. If the call stack is empty, it takes the first task from the queue and pushes it onto the call stack for execution. This cycle repeats indefinitely.

src/data/question-groups/frontend/content/flexbox-layout.md

@@ -0,0 +1,4 @@
+To create a flexbox layout, you have to take care of 2 main steps:
+
+1. Set up the container element by applying the “display:flexbox” CSS property to it.
+2. Set up the flexbox properties for each element inside the container (something like “flex:1” would suffice).

src/data/question-groups/frontend/content/id-vs-class.md

@@ -0,0 +1,10 @@
+An **id** is a unique identifier for a single HTML element. A **class** is a reusable identifier that can be applied to multiple elements.
+
+![ID vs Class in HTML](https://assets.roadmap.sh/guest/css-classes-vs-id-example-9ufsl.png)
+
+You’d want to use an **id** when you need to address a single element either through CSS or JavaScript. And you’ll want to use a **class** when you need to address a group of DOM elements.
+
+In CSS:
+
+- **#id** selects a specific element with that id.
+- **.class** selects all elements with that class.

src/data/question-groups/frontend/content/improve-web-perf.md

@@ -0,0 +1,7 @@
+The main set of metrics to monitor for web apps are:
+
+1. First Contentful Paint (FCP): Time until the first piece of content is rendered.
+2. Largest Contentful Paint (LCP): Time until the largest content element is rendered.
+3. Time to Interactive (TTI): Time until the page is fully interactive.
+4. Total Blocking Time (TBT): Total time during which the main thread is blocked.
+5. Cumulative Layout Shift (CLS): Measures visual stability.

src/data/question-groups/frontend/content/js-promises.md

@@ -0,0 +1 @@
+Promises are JavaScript objects that represent the eventual completion of an asynchronous call. Through promises you’re able to handle the successful or failed execution of the asynchronous call.

src/data/question-groups/frontend/content/media-queries.md

@@ -0,0 +1,3 @@
+Media queries are a feature in CSS that allow Front End developers to apply different styles to a document based on various characteristics of the device or viewport. For example, you can set different styles based on the device’s width, height, orientation, or type.
+
+Through media queries we can achieve responsive design allowing styles to adapt to different screen sizes and device capabilities.

src/data/question-groups/frontend/content/null-vs-undefined.md

@@ -0,0 +1,3 @@
+In JavaScript, “undefined” is the default value new variables take, and it means the variable has been defined but it hasn’t been assigned any value just yet.
+
+And “null” is actually a value that signals “no value” or “no object”, it is specifically assigned to the variable by the developer.

src/data/question-groups/frontend/content/optimize-assets.md

@@ -0,0 +1,4 @@
+There are different techniques to improve loading times, depending on the asset type, for example:
+
+- CSS & JavaScript files should be minimized and compressed.
+- Images can be compressed when you’re saving them or through the use of specialized software, like [JPEGOptim](https://github.com/tjko/jpegoptim) or [ImageOptim](https://imageoptim.com/mac). Just make sure you don’t lose any quality during the process.

src/data/question-groups/frontend/content/same-origin-policy.md

@@ -0,0 +1,5 @@
+The same-origin policy is a security feature in browsers designed to prevent a web site from accessing data (like importing a script, or sending a request to an API) from another site.
+
+This policy helps protect users from malicious scripts that try to steal sensitive data from other websites, such as cookies, local storage, or content
+
+A way to overcome this limitation is through CORS (Cross-Origin Resource Sharing). As long as the server specifies which domain it can receive requests from, and the client app sends the right headers, they will be able to interact with each other, even if they’re not in the same domain.

src/data/question-groups/frontend/content/seo-best-practices.md

@@ -0,0 +1,12 @@
+Purely from the HTML side:
+
+- **Use Semantic HTML**: Use tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide meaningful structure.
+- **Proper Heading Hierarchy**: Use headings (<h1> to <h6>) correctly, making sure <h1> is used once per page for the main title, followed by <h2>, <h3>, etc.
+- **Meta Tags**: Include relevant <meta> tags, such as description, keywords, and viewport, to provide metadata about the website.
+- **Alt Attributes on images**: Use alt attributes for images to describe the content, improving accessibility and search engine understanding.
+
+On top of that:
+
+- **Internal Linking**: Make sure to use internal links to connect content within your web site, helping search engines crawl and understand the site structure.
+- **Mobile-Friendly Design**: Code your site and CSS with a mobile-first mindset. Ensuring the site is responsive and mobile-friendly to improve user experience and ranking on search engines.
+- **Fast Loading Times**: Try to optimize images, use efficient code, and leverage caching to improve page load speeds. The faster the page loads, the bigger the advantage it’ll have against other similar results on the SERP.

src/data/question-groups/frontend/content/service-workers.md

@@ -0,0 +1 @@
+Service workers are scripts that run in the background of a web application, separate from the web page’s main thread, and provide features like offline caching, push notifications, and background synchronization.

src/data/question-groups/frontend/content/ssr-when.md

@@ -0,0 +1,7 @@
+Server-side rendering (SSR) is a technique in which a web server generates the HTML content of a web page and sends it to the client (usually a web browser) as a fully rendered document. This is the opposite of what naturally happens with client-side rendering (CSR), where the browser downloads a minimal HTML page and then uses JavaScript to render the content dynamically.
+
+There are several ideal use cases for SSR:
+
+- **Content-rich websites**. For example, news sites, blogs, etc.
+- **SEO-heavy applications**. When the success of the web app relies on SEO, this approach can greatly improve the performance of the site (and because of that, the SEO performance).
+- **Progressive web applications**. When the application needs to render fast to provide a fast and performance user experience, the application can initially be rendered on the server, and then hydrated on the client for subsequent integrations.

src/data/question-groups/frontend/content/state-mgmt-spa.md

@@ -0,0 +1,8 @@
+Without a full framework or library like React or Vue.js, properly handling state management is not a trivial task.
+
+Some options available through the language itself are:
+
+- **Global Variables**: You can use global variables, or perhaps a global object to centralize state. The problem with this approach is that it can become quite unmanageable for large applications. It’s also a lot harder to maintain local state inside single components.
+- **Module Pattern**: You can use this pattern to encapsulate state and provide a clear API to manage it. You would have to instantiate local instances of these modules for individual components.
+- **Pub/Sub Pattern**: This option is more sophisticated, and it decouples state changes using event-driven architecture. It’s a more complex solution, but it provides a bigger flexibility.
+- **State Management Libraries**: You can always use something like [Redux](https://redux.js.org/) or similar libraries without frameworks.

src/data/question-groups/frontend/content/tree-shaking.md

@@ -0,0 +1,7 @@
+Tree shaking is a technique used in JavaScript module bundlers, like Webpack or Vite, to remove unused code from the final bundled output.
+
+Main benefits include:
+
+1. **Reduced Bundle Size:** Removing unused code reduces the size of the JavaScript bundle sent to the client, improving load times and reducing bandwidth usage.
+2. **Improved Performance:** Smaller bundle sizes can lead to faster parsing and execution times, resulting in improved performance and responsiveness of the web application.
+3. **Better Resource Utilization:** Developers can write modular code without worrying about unused dependencies bloating the final bundle size.

src/data/question-groups/frontend/content/vdom.md

@@ -0,0 +1,14 @@
+![Virtual DOM](https://assets.roadmap.sh/guest/virtual-dom-example-7ynkg.png)
+
+The way the virtual DOM works is the following:
+
+1. The entire user interface is copied into an in-memory structure called “virtual DOM”, which is a lightweight version of the actual DOM.
+2. When state changes and the UI needs to be updated, a new virtual DOM is created with the updated state.
+3. Then a diff is made between the new virtual DOM and the previous version.
+4. The system will then calculate the least amount of changes required to achieve the new state, and it’ll apply those changes. Only the nodes that need to be updated are touched, which minimizes direct manipulation of the real DOM.
+
+As for advantages:
+
+- **Performance optimization**: By only updating specific nodes within the real DOM, this technique reduces the number of updates, reflows and repaints on the UI. Directly affecting the performance of the app.
+- **Cross-platform**. The virtual DOM provides a layer of abstraction between the application and the actual API that renders the UI. This means the app can be ported into other platforms as long as there is a virtual DOM implementation for that platform.
+- **Consistency**. This technique keeps the UI in sync with the internal state, reducing bugs and inconsistencies.

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

@@ -0,0 +1,164 @@
+---
+order: 5
+briefTitle: 'Frontend'
+briefDescription: 'Test, rate and improve your Frontend knowledge with these questions.'
+title: 'Top 30 Popular Front End Developer Interview Questions'
+description: 'Test, rate and improve your Frontend knowledge with these questions.'
+authorId: 'fernando'
+isNew: false
+date: 2024-05-24
+seo:
+  title: 'Top 30 Popular Front End Developer Interview Questions'
+  description: 'Nail your frontend developer interview with these 30 popularly asked questions and answers. Test your knowledge with our quiz cards!'
+  keywords:
+    - 'frontend quiz'
+    - 'frontend questions'
+    - 'frontend interview questions'
+    - 'frontend interview'
+    - 'frontend test'
+sitemap:
+  priority: 1
+  changefreq: 'monthly'
+questions:
+  - question: What is the difference between an id and a class in HTML/CSS?
+    answer: id-vs-class.md
+    topics:
+      - 'Beginner'
+  - question: Can you explain the box model in CSS?
+    answer: box-model.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between inline, inline-block, and block elements?
+    answer: block-inline-elems.md
+    topics:
+      - 'Beginner'
+  - question: What are some SEO best practices when structuring an HTML document?
+    answer: seo-best-practices.md
+    topics:
+      - 'Beginner'
+  - question: What is the Document Object Model (DOM)?
+    answer: dom.md
+    topics:
+      - 'Beginner'
+  - question: How do you add an event listener to an element?
+    answer: event-listeners.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between null and undefined?
+    answer: null-vs-undefined.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between cookies, sessionStorage, and localStorage?
+    answer: client-storage.md
+    topics:
+      - 'Beginner'
+  - question: How does the browser render a website?
+    answer: browser-render.md
+    topics:
+      - 'Beginner'
+  - question: What are media queries?
+    answer: media-queries.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between the em and rem units?
+    answer: em-vs-rem.md
+    topics:
+      - 'Intermediate'
+  - question: How do you create a flexbox layout?
+    answer: flexbox-layout.md
+    topics:
+      - 'Intermediate'
+  - question: Can you explain CSS specificity and how it works?
+    answer: css-specificity.md
+    topics:
+      - 'Intermediate'
+  - question: How can you create a CSS grid layout?
+    answer: css-grid.md
+    topics:
+      - 'Intermediate'
+  - question: What are closures, and how/why would you use them?
+    answer: closures.md
+    topics:
+      - 'Intermediate'
+  - question: Can you explain what event delegation is in JavaScript?
+    answer: event-delegation.md
+    topics:
+      - 'Intermediate'
+  - question: What are promises, and how do they work?
+    answer: js-promises.md
+    topics:
+      - 'Intermediate'
+  - question: How do you optimize website assets for better loading times?
+    answer: optimize-assets.md
+    topics:
+      - 'Intermediate'
+  - question: What are service workers, and what are they used for?
+    answer: service-workers.md
+    topics:
+      - 'Intermediate'
+  - question: What is the Same-Origin Policy in web development?
+    answer: same-origin-policy.md
+    topics:
+      - 'Intermediate'
+  - question: What are CSS variables, and when would you use them?
+    answer: css-variables.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement critical CSS to improve the perceived load time of your web pages?
+    answer: critical-css.md
+    topics:
+      - 'Advanced'
+  - question: How does the event loop work in JavaScript?
+    answer: event-loop-js.md
+    topics:
+      - 'Advanced'
+  - question: What are the different ways to handle asynchronous operations in JavaScript?
+    answer: async-ops-js.md
+    topics:
+      - 'Advanced'
+  - question: How do you handle state management in single-page applications?
+    answer: state-mgmt-spa.md
+    topics:
+      - 'Advanced'
+  - question: How does virtual DOM work, and what are its advantages?
+    answer: vdom.md
+    topics:
+      - 'Advanced'
+  - question: What is server-side rendering, and when might you use it?
+    answer: ssr-when.md
+    topics:
+      - 'Advanced'
+  - question: How do you analyze and improve the performance of a web application?
+    answer: improve-web-perf.md
+    topics:
+      - 'Advanced'
+  - question: What is Content Security Policy (CSP), and how does it improve the security of web applications?
+    answer: csp.md
+    topics:
+      - 'Advanced'
+  - question: What is tree shaking, and how does it help with the performance of a web application?
+    answer: tree-shaking.md
+    topics:
+      - 'Advanced'
+---
+
+Preparing for your front end web development interview is key to achieving a successful outcome, but understanding what kind of questions or topics are going to be asked is not easy.
+
+So to help you get ready for your upcoming front end developer interview, here are 30 technical interview questions about web development with a focus on the front end, in other words, about JavaScript, HTML, and CSS.
+
+Keep in mind that they’re grouped by difficulty into three categories: beginners, intermediate and advanced. Ideally, you should aim to understand all of them, and if you find yourself not able to continue, consider checking out the [Frontend roadmap](https://roadmap.sh/frontend) to figure out what to focus your studies on.
+
+## Preparing for your Front End interview
+
+Before jumping straight into front end interview prep, here are some key points to keep in mind:
+
+1. **Master the Fundamentals**: Before you start to solve complex problems, you need to make sure you have a solid understanding of front end development basics. This includes HTML, CSS, and JavaScript, as well as how they work together to create responsive, interactive web pages. Remember that you have the [Front End roadmap](https://roadmap.sh/frontend) available if you feel you still need to learn more about any of these topics.
+2. **Practice Coding**: You can improve your coding skills through mini-projects or by solving problems on platforms like [LeetCode](https://leetcode.com/) and [HackerRank](https://www.hackerrank.com/). Focus on challenges related to front end development.
+3. **Learn Modern Frameworks and Libraries**: Get to know popular frameworks and libraries such as React, Angular, or Vue.js. Understanding these tools is often crucial for modern front end roles.
+4. **Tackle the foundational tools of your dev workflow**: Make sure you’re comfortable with essential tools and practices such as version control (e.g., Git), testing (unit and integration testing), and build tools (e.g., Vite). These are crucial for any front end role.
+5. **Understand UI/UX Principles**: Understanding basic concepts of design and user experience can set you apart as a front end developer. Try to learn about accessibility, responsive design, and how to create intuitive interfaces.
+6. **Research the Company**: Show some interest in the company you’re interviewing with by learning about their business and products. Prepare some questions to ask during the interview to show you care about the role.
+7. **Improve your communication skills**. This one is not front end-specific, however, it’s always a good idea to invest in your future.
+
+With these tips out of the way, let's now get into some of the most common Front End interview questions that you’ll encounter!
+

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

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

src/data/roadmaps/ai-data-scientist/content/ab-testing.md

@@ -1,4 +1,5 @@
 # AB Testing
 
-- [Practitioner’s Guide to Statistical Tests](https://vkteam.medium.com/practitioners-guide-to-statistical-tests-ed2d580ef04f#1e3b)
-- [Step by Step Process for Planning an A/B Test](https://towardsdatascience.com/step-by-step-for-planning-an-a-b-test-ef3c93143c0b)
+- [@article@Practitioner’s Guide to Statistical Tests](https://vkteam.medium.com/practitioners-guide-to-statistical-tests-ed2d580ef04f#1e3b)
+- [@article@Step by Step Process for Planning an A/B Test](https://towardsdatascience.com/step-by-step-for-planning-an-a-b-test-ef3c93143c0b)
+- [@feed@Explore top posts about A/B Testing](https://app.daily.dev/tags/ab-testing?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/classic-advanced-ml.md

@@ -1,7 +1,7 @@
 # Classic/Advanced ML
 
-- [Open Machine Learning Course](https://mlcourse.ai/book/topic01/topic01_intro.html)
-- [Coursera: Machine Learning Specialization](https://imp.i384100.net/oqGkrg)
-- [Pattern Recognition and Machine Learning by Christopher Bishop](https://www.microsoft.com/en-us/research/uploads/prod/2006/01/Bishop-Pattern-Recognition-and-Machine-Learning-2006.pdf)
-- [Repository of notes, code and notebooks in Python for the book Pattern Recognition and Machine Learning by Christopher Bishop](https://github.com/gerdm/prml)
-
+- [@article@Open Machine Learning Course](https://mlcourse.ai/book/topic01/topic01_intro.html)
+- [@article@Coursera: Machine Learning Specialization](https://imp.i384100.net/oqGkrg)
+- [@article@Pattern Recognition and Machine Learning by Christopher Bishop](https://www.microsoft.com/en-us/research/uploads/prod/2006/01/Bishop-Pattern-Recognition-and-Machine-Learning-2006.pdf)
+- [@opensource@Repository of notes, code and notebooks in Python for the book Pattern Recognition and Machine Learning by Christopher Bishop](https://github.com/gerdm/prml)
+- [@feed@Explore top posts about Machine Learning](https://app.daily.dev/tags/machine-learning?ref=roadmapsh)

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

@@ -1,6 +1,6 @@
 # Data Understanding, Analysis and Visualization
 
-- [Exploratory Data Analysis With Python and Pandas](https://imp.i384100.net/AWAv4R)
-- [Exploratory Data Analysis for Machine Learning](https://imp.i384100.net/GmQMLE)
-- [Exploratory Data Analysis with Seaborn](https://imp.i384100.net/ZQmMgR)
+- [@article@Exploratory Data Analysis With Python and Pandas](https://imp.i384100.net/AWAv4R)
+- [@article@Exploratory Data Analysis for Machine Learning](https://imp.i384100.net/GmQMLE)
+- [@article@Exploratory Data Analysis with Seaborn](https://imp.i384100.net/ZQmMgR)
 

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

@@ -1,5 +1,5 @@
 # MLOps
 
-- [Machine Learning Engineering for Production (MLOps) Specialization](https://imp.i384100.net/nLA5mx)
-- [Full Stack Deep Learning](https://fullstackdeeplearning.com/course/2022/)
-
+- [@article@Machine Learning Engineering for Production (MLOps) Specialization](https://imp.i384100.net/nLA5mx)
+- [@article@Full Stack Deep Learning](https://fullstackdeeplearning.com/course/2022/)
+- [@feed@Explore top posts about CI/CD](https://app.daily.dev/tags/cicd?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/diff-calculus.md

@@ -1,4 +1,4 @@
 # Differential Calculus
 
-- [Algebra and Differential Calculus for Data Science](https://imp.i384100.net/LX5M7M)
+- [@article@Algebra and Differential Calculus for Data Science](https://imp.i384100.net/LX5M7M)
 

src/data/roadmaps/ai-data-scientist/content/econometrics-pre-req.md

@@ -1,4 +1,4 @@
 # Econometrics Pre-requisites
 
-- [10 Fundamental Theorems for Econometrics](https://bookdown.org/ts_robinson1994/10EconometricTheorems/)
+- [@article@10 Fundamental Theorems for Econometrics](https://bookdown.org/ts_robinson1994/10EconometricTheorems/)
 

src/data/roadmaps/ai-data-scientist/content/fully-connected-nn.md

@@ -1,7 +1,7 @@
 # Fully Connected NN, CNN, RNN, LSTM, Transformers, Transfer Learning
 
-- [The Illustrated Transformer](https://jalammar.github.io/illustrated-transformer/)
-- [Attention is All you Need](https://arxiv.org/pdf/1706.03762.pdf)
-- [Deep Learning Book](https://www.deeplearningbook.org/)
-- [Deep Learning Specialization](https://imp.i384100.net/Wq9MV3)
+- [@article@The Illustrated Transformer](https://jalammar.github.io/illustrated-transformer/)
+- [@article@Attention is All you Need](https://arxiv.org/pdf/1706.03762.pdf)
+- [@article@Deep Learning Book](https://www.deeplearningbook.org/)
+- [@article@Deep Learning Specialization](https://imp.i384100.net/Wq9MV3)
 

src/data/roadmaps/ai-data-scientist/content/hypothesis-testing.md

@@ -1,4 +1,4 @@
 # Hypothesis Testing
 
-- [Introduction to Statistical Analysis: Hypothesis Testing](https://imp.i384100.net/vN0JAA)
-
+- [@article@Introduction to Statistical Analysis: Hypothesis Testing](https://imp.i384100.net/vN0JAA)
+- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/increasing-test-sensitivity.md

@@ -1,9 +1,9 @@
 # Increasing Test Sensitivity
 
-- [Minimum Detectable Effect (MDE)](https://splitmetrics.com/resources/minimum-detectable-effect-mde/)
-- [Improving the Sensitivity of Online Controlled Experiments: Case Studies at Netflix](https://kdd.org/kdd2016/papers/files/adp0945-xieA.pdf)
-- [Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-Experiment Data](https://exp-platform.com/Documents/2013-02-CUPED-ImprovingSensitivityOfControlledExperiments.pdf)
-- [How Booking.com increases the power of online experiments with CUPED](https://booking.ai/how-booking-com-increases-the-power-of-online-experiments-with-cuped-995d186fff1d)
-- [Improving Experimental Power through Control Using Predictions as Covariate — CUPAC](https://doordash.engineering/2020/06/08/improving-experimental-power-through-control-using-predictions-as-covariate-cupac/)
-- [Improving the Sensitivity of Online Controlled Experiments: Case Studies at Netflix](https://www.researchgate.net/publication/305997925_Improving_the_Sensitivity_of_Online_Controlled_Experiments_Case_Studies_at_Netflix)
+- [@article@Minimum Detectable Effect (MDE)](https://splitmetrics.com/resources/minimum-detectable-effect-mde/)
+- [@article@Improving the Sensitivity of Online Controlled Experiments: Case Studies at Netflix](https://kdd.org/kdd2016/papers/files/adp0945-xieA.pdf)
+- [@article@Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-Experiment Data](https://exp-platform.com/Documents/2013-02-CUPED-ImprovingSensitivityOfControlledExperiments.pdf)
+- [@article@How Booking.com increases the power of online experiments with CUPED](https://booking.ai/how-booking-com-increases-the-power-of-online-experiments-with-cuped-995d186fff1d)
+- [@article@Improving Experimental Power through Control Using Predictions as Covariate — CUPAC](https://doordash.engineering/2020/06/08/improving-experimental-power-through-control-using-predictions-as-covariate-cupac/)
+- [@article@Improving the Sensitivity of Online Controlled Experiments: Case Studies at Netflix](https://www.researchgate.net/publication/305997925_Improving_the_Sensitivity_of_Online_Controlled_Experiments_Case_Studies_at_Netflix)
 

src/data/roadmaps/ai-data-scientist/content/learn-dsa.md

@@ -1,5 +1,5 @@
 # Data Structures and Algorithms
 
-- [Learn Algorithms](https://leetcode.com/explore/learn/)
-- [Leetcode - Study Plans](https://leetcode.com/studyplan/)
-- [Algorithms Specialization](https://imp.i384100.net/5gqv4n)
+- [@article@Learn Algorithms](https://leetcode.com/explore/learn/)
+- [@article@Leetcode - Study Plans](https://leetcode.com/studyplan/)
+- [@article@Algorithms Specialization](https://imp.i384100.net/5gqv4n)

src/data/roadmaps/ai-data-scientist/content/learn-python.md

@@ -1,5 +1,5 @@
 # Python
 
-- [Kaggle — Python](https://www.kaggle.com/learn/python)
-- [Google's Python Class](https://developers.google.com/edu/python)
-
+- [@article@Kaggle — Python](https://www.kaggle.com/learn/python)
+- [@article@Google's Python Class](https://developers.google.com/edu/python)
+- [@feed@Explore top posts about Python](https://app.daily.dev/tags/python?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/learn-sql.md

@@ -1,4 +1,4 @@
 # SQL
 
-- [SQL Tutorial](https://www.sqltutorial.org/)
-
+- [@article@SQL Tutorial](https://www.sqltutorial.org/)
+- [@feed@Explore top posts about SQL](https://app.daily.dev/tags/sql?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/linear-algebra-calc-mathana.md

@@ -1,4 +1,5 @@
 # Learn Algebra, Calculus, Mathematical Analysis
 
-- [Mathematics for Machine Learning Specialization](https://imp.i384100.net/baqMYv)
-- [Linear Algebra Youtube Course](https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab)
+- [@article@Mathematics for Machine Learning Specialization](https://imp.i384100.net/baqMYv)
+- [@video@Linear Algebra Youtube Course](https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab)
+- [@feed@Explore top posts about Math](https://app.daily.dev/tags/math?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/probability-sampling.md

@@ -1,4 +1,4 @@
 # Probability and Sampling
 
-- [Probability and Statistics: To p or not to p?](https://imp.i384100.net/daDM6Q)
-
+- [@article@Probability and Statistics: To p or not to p?](https://imp.i384100.net/daDM6Q)
+- [@feed@Explore top posts about Statistics](https://app.daily.dev/tags/statistics?ref=roadmapsh)

src/data/roadmaps/ai-data-scientist/content/ratio-metrics.md

@@ -1,5 +1,5 @@
 # Ratio Metrics
 
-- [Applying the Delta Method in Metric Analytics: A Practical Guide with Novel Ideas](https://arxiv.org/pdf/1803.06336.pdf)
-- [Approximations for Mean and Variance of a Ratio](https://www.stat.cmu.edu/~hseltman/files/ratio.pdf)
+- [@article@Applying the Delta Method in Metric Analytics: A Practical Guide with Novel Ideas](https://arxiv.org/pdf/1803.06336.pdf)
+- [@article@Approximations for Mean and Variance of a Ratio](https://www.stat.cmu.edu/~hseltman/files/ratio.pdf)
 

src/data/roadmaps/ai-data-scientist/content/regression-time-series-fitting-distr.md

@@ -1,12 +1,12 @@
 # Regressions, Time series, Fitting Distributions
 
-- [10 Fundamental Theorems for Econometrics](https://bookdown.org/ts_robinson1994/10EconometricTheorems/)
-- [Dougherty Intro to Econometrics 4th edition](https://www.academia.edu/33062577/Dougherty_Intro_to_Econometrics_4th_ed_small)
-- [Econometrics: Methods and Applications](https://imp.i384100.net/k0krYL)
-- [Kaggle - Learn Time Series](https://www.kaggle.com/learn/time-series)
-- [Time series Basics : Exploring traditional TS](https://www.kaggle.com/code/jagangupta/time-series-basics-exploring-traditional-ts#Hierarchical-time-series)
-- [How to Create an ARIMA Model for Time Series Forecasting in Python](https://machinelearningmastery.com/arima-for-time-series-forecasting-with-python)
-- [11 Classical Time Series Forecasting Methods in Python](https://machinelearningmastery.com/time-series-forecasting-methods-in-python-cheat-sheet/)
-- [Blockchain.com Data Scientist TakeHome Test](https://github.com/stalkermustang/bcdc_ds_takehome)
-- [Linear Regression for Business Statistics](https://imp.i384100.net/9g97Ke)
+- [@article@10 Fundamental Theorems for Econometrics](https://bookdown.org/ts_robinson1994/10EconometricTheorems/)
+- [@article@Dougherty Intro to Econometrics 4th edition](https://www.academia.edu/33062577/Dougherty_Intro_to_Econometrics_4th_ed_small)
+- [@article@Econometrics: Methods and Applications](https://imp.i384100.net/k0krYL)
+- [@article@Kaggle - Learn Time Series](https://www.kaggle.com/learn/time-series)
+- [@article@Time series Basics : Exploring traditional TS](https://www.kaggle.com/code/jagangupta/time-series-basics-exploring-traditional-ts#Hierarchical-time-series)
+- [@article@How to Create an ARIMA Model for Time Series Forecasting in Python](https://machinelearningmastery.com/arima-for-time-series-forecasting-with-python)
+- [@article@11 Classical Time Series Forecasting Methods in Python](https://machinelearningmastery.com/time-series-forecasting-methods-in-python-cheat-sheet/)
+- [@opensource@Blockchain.com Data Scientist TakeHome Test](https://github.com/stalkermustang/bcdc_ds_takehome)
+- [@article@Linear Regression for Business Statistics](https://imp.i384100.net/9g97Ke)
 

src/data/roadmaps/ai-data-scientist/content/stats-clt.md

@@ -1,4 +1,4 @@
 # Statistics, CLT
 
-- [Introduction to Statistics](https://imp.i384100.net/3eRv4v)
+- [@article@Introduction to Statistics](https://imp.i384100.net/3eRv4v)
 

src/data/roadmaps/android/android.md

@@ -1,5 +1,6 @@
 ---
 pdfUrl: '/pdfs/roadmaps/android.pdf'
+renderer: 'editor'
 order: 5
 briefTitle: 'Android'
 briefDescription: 'Step by step guide to becoming an Android Developer in 2024'
@@ -9,7 +10,7 @@ hasTopics: true
 isNew: false
 dimensions:
   width: 968
-  height: 2197.76
+  height: 2070
 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.'

src/data/roadmaps/android/content/104-interface-and-navigation/elements/100-text-view.md

@@ -1,3 +0,0 @@
-# TextView
-
-`TextView` in Android is a UI (User Interface) element that allows you to display text to the user. You can set the text to be displayed by declaring it in XML or introducing it programmatically. This element supports various attributes such as `android:textAllCaps`, `android:textAppearance`, `android:textColor`, etc., to customize its appearance. Each `TextView` corresponds to an `android.widget.TextView` object. You can also react to user interaction events such as touch or click with the help of listeners (like `View.onClickListener` or `View.onTouchListener`). Manipulating with `TextView` is common when creating Android apps as they form the basic building block for user interface components.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/101-edit-text.md

@@ -1,3 +0,0 @@
-# EditText
-
-`EditText` is a common element used in Android development. It's a fundamental component for accepting user input in simple form or dialog. It allows users to modify text within its bounding box, much like what a TextField does in more general programming languages. If you have used a form or a webpage that allows you to input text, it was probably created with an EditText or similar control. You can customize an `EditText` in various ways including size, color, initial text, and hint text. You can also listen for changes in the text in an EditText, apply filters, specify input types, and more. The `android:text` attribute lets you pre-fill the EditText with text, and `android:hint` provides hint text when the EditText is empty.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/102-buttons.md

@@ -1,3 +0,0 @@
-# Buttons
-
-Buttons in Android are user interactions that trigger certain programmable actions. They are part of the `View` class in Android, making them an essential part of user interfaces. Android provides different types of buttons such as `Button`, `ToggleButton`, `RadioButton`, `CheckBox`, `Switch`, `ImageButton`, and `FloatingActionButton`. Each of these serves a different purpose and provides varied interactivity options. Their behavior and appearance can be customized in terms of different properties such as text, ID, color, etc. They can be programmed in the XML layout files or dynamically in the Java/Kotlin code.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/103-image-view.md

@@ -1,3 +0,0 @@
-# ImageView
-
-An `ImageView` is a class used in Android for displaying an image file. It inherits from 'View' class and extends the ability of views to show images. Images can be loaded from various sources such as a resource file, drawable, or a URL, with varying scale types. This class also provides methods to manage the image scale type, define padding, set tint, and manipulate the color filter. It's important to note that `ImageView` should be used in moderation as it is resource-intensive and could degrade app performance if used excessively.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/104-list-view.md

@@ -1,3 +0,0 @@
-# ListView
-
-`ListView` in Android is a view which groups several items and displays them in vertical scrollable list. The list items are automatically inserted to the list using an `Adapter` that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list. It is widely used in android apps as it offers an easy way to display a list of data in an organized manner. Functions such as `setAdapter(Adapter)` to specify data source, `setOnItemClickListener(OnItemClickListener)` to listen for click events on items, and `setOnScrollListener(OnScrollListener)` to listen for scroll events, provide further control over the list behavior.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/105-tabs.md

@@ -1,3 +0,0 @@
-# Tabs
-
-Tabs are commonly used in Android for switching between different views within the same activity. Some instances may make use of a `TabLayout` located within a `ViewPager` to create swipeable tabs. Each tab is usually associated with a fragment. To create tabs in Android, you need to use the `TabLayout` component that is available in the Material Design library. A typical `TabLayout` contains multiple `TabItem`, each representing a tab in the interface. The `TabLayout` works with a `ViewPager` to provide a consistent swipeable interface. Users can approach tabs differently depending on whether they are coded for manual or automatic filling. Manual tab creation and addition require explicit defining of each tab and adding them to the `TabLayout`, while in automatic filling tabs are generated from the `PagerAdaptor`'s page title.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/106-fragments.md

@@ -1,3 +0,0 @@
-# Fragments
-
-In Android, **Fragments** represent a behavior or a part of the user interface in an Activity. They are modular sections of an activity, which are reusable in different activities. They contribute to making an application adaptive to different devices with varied screen sizes. A fragment has its own lifecycle, receives its own input events, and can be added or removed while the activity is running. While they exist within the context of an activity, they can also be used independently to encapsulate functionality for easier development and reuse. Multiple fragments can combine in a single activity to build a multi-pane UI.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/107-dialogs.md

@@ -1,5 +0,0 @@
-# Dialogs
-
-Dialogs in Android are small windows that prompt users to make a decision or enter additional information. They don't fill the screen and are normally used for modal events that require users to take action before they can proceed. In Android, `Dialog` is actually an abstract class directly subclassed from `Object`. `AlertDialog` is the subclass that you will most commonly use, which contains a number of methods as compared to `Dialog` to support features like lists, checkboxes, radio buttons, and a custom layout design. They are typically used for user interactions such as warnings, notifications, and menus. 
-
-To create a dialog, you must use the `Dialog` class or one of its subclasses, such as `DialogFragment` or `AlertDialog`. For a more detailed explanation on implementing dialogs in Android, you can refer to the official Android Developer's Guide.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/108-toast.md

@@ -1,3 +0,0 @@
-# Toast
-
-`Toast` in Android is a simple message that appears on the screen for a short period of time then disappears automatically. It is generally used to provide feedback to the user about an operation in a small popup without requiring any user interaction. This feedback could be an error message or simply information that a process completed successfully. You can configure the toast to appear anywhere on the screen and specify how long it stays up. In order to use a toast, you have to import the `android.widget.Toast` package and instantiate a Toast object. Here's an example of creating a simple toast: `Toast.makeText(context, text, duration).show()`, where context is your application context, text is the message to display, and duration is either `Toast.LENGTH_SHORT` or `Toast.LENGTH_LONG`.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/109-bottom-sheet.md

@@ -1,3 +0,0 @@
-# Bottom Sheet
-
-The **Bottom Sheet** is a popular UI component within the Android development environment. This interface element acts like a drawer that slides up from the bottom of the screen to reveal more content or options. There are two types of bottom sheets in Android: "persistent" and "modal". The persistent bottom sheet shows in-app content that supplements the primary screen content, remaining visible even when the user interacts with the primary surface. On the other hand, the modal bottom sheet is a simple menu presenting a list of options, often used for sharing content, navigating, or for user-editable content. It can be dismissed by the user and does not remain visible when the user interacts with the primary surface.