fix: username input

Updated markdown with up to date resources

.astro/settings.json

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

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.

package.json

@@ -28,17 +28,17 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.4.0",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/node": "^8.3.2",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.3.0",
+    "@fingerprintjs/fingerprintjs": "^4.4.1",
     "@nanostores/react": "^0.7.2",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.9.1",
+    "astro": "^4.11.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "dom-to-image": "^2.6.0",
@@ -46,21 +46,21 @@
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
     "image-size": "^1.1.1",
-    "jose": "^5.3.0",
+    "jose": "^5.6.2",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.399.0",
     "nanoid": "^5.0.7",
     "nanostores": "^0.10.3",
     "node-html-parser": "^6.1.13",
     "npm-check-updates": "^16.14.20",
-    "playwright": "^1.44.0",
+    "playwright": "^1.45.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-calendar-heatmap": "^1.9.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
-    "react-tooltip": "^5.26.4",
-    "reactflow": "^11.11.3",
+    "react-tooltip": "^5.27.0",
+    "reactflow": "^11.11.4",
     "rehype-external-links": "^3.0.0",
     "remark-parse": "^11.0.0",
     "roadmap-renderer": "^1.0.6",
@@ -69,12 +69,12 @@
     "sharp": "^0.33.4",
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "unified": "^11.0.4",
-    "zustand": "^4.5.2"
+    "tailwindcss": "^3.4.4",
+    "unified": "^11.0.5",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.45.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
@@ -84,10 +84,10 @@
     "gh-pages": "^6.1.1",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "openai": "^4.47.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tsx": "^4.10.5"
+    "openai": "^4.52.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-astro": "^0.14.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tsx": "^4.16.0"
   }
 }

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/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -62,7 +62,10 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
   }
 
   const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }

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;
 }
 
@@ -39,6 +42,10 @@ svg > g[data-type='topic'].done > rect + text {
   fill: black;
 }
 
+svg .done text[fill='#ffffff'] {
+  fill: black;
+}
+
 svg > g[data-type='subtipic'].done > rect + text,
 svg > g[data-type='subtipic'].learning > rect + text {
   fill: #cbcbcb;

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

@@ -4,6 +4,8 @@ import { sponsorHidden } from '../stores/page';
 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;
@@ -25,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);
@@ -50,6 +68,7 @@ export function PageSponsor(props: PageSponsorProps) {
       `${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`,
       {
         href: window.location.pathname,
+        mobile: isMobile() ? 'true' : 'false',
       },
     );
 
@@ -58,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',
@@ -75,9 +98,15 @@ export function PageSponsor(props: PageSponsorProps) {
   };
 
   const clickSponsor = async (sponsorId: string) => {
-    const { response, error } = await httpPatch<{ status: 'ok' }>(
+    const clickUrl = new URL(
       `${import.meta.env.PUBLIC_API_URL}/v1-view-sponsor/${sponsorId}`,
-      {},
+    );
+
+    const { response, error } = await httpPatch<{ status: 'ok' }>(
+      clickUrl.toString(),
+      {
+        mobile: isMobile(),
+      },
     );
 
     if (error || !response) {
@@ -103,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',
@@ -114,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/TeamProgress/MemberCustomProgressModal.tsx

@@ -161,7 +161,10 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
       return;
     }
 
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }
@@ -237,7 +240,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
             <div className="px-4 pb-2">
               <ReadonlyEditor
                 variant="modal"
-                hasMinimap={false}
                 roadmap={roadmap!}
                 className="min-h-[400px]"
                 onRendered={() => {

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/ProfileUsername.tsx

@@ -57,6 +57,8 @@ export function ProfileUsername(props: ProfileUsernameProps) {
     setIsLoading(false);
   };
 
+  const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
+
   return (
     <div className="flex w-full flex-col">
       <label
@@ -88,7 +90,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                   href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`}
                   target="_blank"
                   className={
-                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-purple-800 hover:text-white'
+                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-white'
                   }
                 >
                   roadmap.sh/u/{username}
@@ -117,7 +119,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
               // only allow letters, numbers
               const keyCode = e.key;
               const validKey =
-                /^[a-zA-Z0-9]*$/.test(keyCode) && username.length < 10;
+                USERNAME_REGEX.test(keyCode) && username.length <= 10;
               if (
                 !validKey &&
                 !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
@@ -127,7 +129,13 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                 e.preventDefault();
               }
             }}
-            onChange={(e) => {
+            onInput={(e) => {
+              const value = (e.target as HTMLInputElement).value?.trim();
+              const isValid = USERNAME_REGEX.test(value) && value.length <= 10;
+              if (!isValid) {
+                return;
+              }
+
               setUsername((e.target as HTMLInputElement).value.toLowerCase());
             }}
             required={profileVisibility === 'public'}

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-developer-skills.md

@@ -0,0 +1,261 @@
+---
+title: '12 In-Demand Front End Developer Skills to Master'
+description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+authorId: fernando
+excludedBySlug: '/frontend/developer-skills'
+seo:
+  title: '12 In-Demand Front End Developer Skills to Master'
+  description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-04
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![12 In-Demand Front End Developer Skills to Master](https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg)
+
+Front end development is probably one of the most dynamic fields in our industry, it’s constantly forcing developers to stay up-to-date with the latest trends and technologies. Either by learning about new frameworks or libraries, or simply by making them choose between their current stack and the hot new framework released every other month.
+
+While working as a front end developer can be headache-inducing sometimes, it’s also a great field for those who love to constantly learn new technologies. Given how active and dynamic the frontend community is.
+
+In this article, we’ll try to help guide you through the constantly growing front end ecosystem and we’re going to cover 12 essential front end development skills that every front end dev should master to remain competitive and effective in their role.
+
+## Understanding Front End Development
+
+But before we move forward, let’s first understand what front end development is.
+
+Front end development involves creating the parts of a website or application that users interact with directly. This includes designing layouts, implementing visual elements, and ensuring a seamless user experience by coding the interactions through the use of three basic technologies: HTML, CSS, and JavaScript.
+
+Unlike backend development, which deals with server-side logic, front end development focuses exclusively on client-side logic.
+
+With that said, HTML, CSS, and JavaScript aren’t the only three front end developer skills you should be focusing on, in fact, there are many others that are just as important, so let’s take a quick look at them.
+
+## 1. HTML/CSS/JavaScript
+
+![html css and javascript layers](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+HTML, CSS, and JavaScript are the foundational technologies for front end development. Mind you, they’re not the only skills that matter, but they’re definitely the three skills you should focus on first.
+
+### HTML (HyperText Markup Language):
+
+- **Role**: HTML is the backbone of any web page, providing the basic structure and content. It defines elements like headings, paragraphs, links, images, and other multimedia.
+- **Key Features**: Semantic HTML5 elements (like `<header>`, `<footer>`, `<article>`, and `<section>`) improve accessibility and SEO. Proper use of these elements makes the content more understandable for both users, search engines and even accessibility devices (like screen readers).
+
+### CSS (Cascading Style Sheets):
+
+- **Role**: CSS is responsible for the visual presentation of the web page. It controls the layout, colors, fonts, and overall style. While HTML lays out the foundational work for the page, CSS is a big component in making it look “good” for the users.
+- **Key Features**: CSS3 introduces features like Flexbox, Grid Layout, animations, and transitions, which enable complex designs with less code. While trying to build responsive designs (which everyone should be doing by now), media queries, flexbox and grid are your friends, making web pages look good on all devices.                                                                                            
+### JavaScript:
+
+- **Role**: JavaScript adds interactivity and dynamic behavior to web pages. It enables features like form validation, content updates without page reloads, and interactive elements like sliders and carousels. In other words, while CSS makes it look “good”, JavaScript makes it interactive and reactive to the user’s actions.
+- **Key Features**: Modern JavaScript (ES6+) introduces features like arrow functions, template literals, destructuring, modules, and promises. These features make the code more concise and readable. Whether you’re an old developer looking to become a front end developer, or a new one just getting started, adopting these features is key to your success as a JavaScript developer.
+
+Mastering these three key front end developer skills is not just about knowing the syntax but also understanding how to use these technologies together to create responsive, interactive, and accessible web pages. 
+
+## 2. Accessibility
+
+Accessibility ensures that websites are usable by people with various disabilities (from being sight-challenged to having other types of mobility-related disabilities).
+
+In the end, the web should be accessible to everyone, and knowing and understanding about accessibility allows you to make your web-based products something that everyone can use.
+
+This practice includes practices that range from implementing proper HTML tags, ARIA roles, all the way up to proper keyboard navigations. Accessible websites are not only compliant with legal standards but also offer a better user experience for a broader audience. Tools like screen readers and voice recognition software rely on well-structured, accessible content to function correctly.
+
+You can read more about Accessibility in the web space by [listening to this interview I did](https://www.youtube.com/watch?v=chEEnz0MJ10) with an accessibility expert.
+
+## 3. Version Control
+
+![git flow](https://assets.roadmap.sh/guest/gitflow-example-j1iu3.png)
+
+Version control is an essential skill for any front end developer, as it allows you to manage and track changes to your codebase efficiently. It provides a structured way to collaborate with other developers, maintain a history of changes, and ensure the integrity of your code. Here’s a more detailed look at why this skill is crucial and how to use it effectively:
+
+- **Collaboration**: When working on a project with a team, version control systems (VCS) enable multiple developers to work on the same codebase without conflicts. Each developer can create their own branches, make changes, and then merge their work into the main codebase.
+- **History and Documentation**: These systems maintain a history of all changes made to the code. This is invaluable for tracking when and why changes were made, which helps in debugging and understanding the evolution of the project.
+- **Backup and Recovery**: Version control acts as a backup system. If something goes wrong with the current code, developers can revert to previous versions without losing their work. This is a massive benefit for teams and honestly, for solo developers as well.
+
+### Popular Version Control Systems
+
+While the de-facto standard is Git, it’s also interesting to learn that Git is not the only VCS option out there (even though it’s the recommended option):
+
+- **Git**: The most widely used version control system. Git is a distributed VCS, meaning every developer has a complete copy of the repository. This allows for offline work and provides redundancy.
+- **Subversion (SVN)**: A centralized VCS where the repository is stored on a server, and developers check out the latest version to work on. This option is slowly fading out, and is mostly in use only by teams that inherit it as a company-wide standard.
+
+### Best Practices
+
+Regardless of the solution you use for this, try to keep in mind these best practices that will make your life (and your teammate’s life) a lot easier:
+
+- **Frequent Commits**: Make small, frequent commits with clear, descriptive messages. This makes it easier to track changes and debug issues.
+- **Branching Strategy**: Use a branching strategy that fits your workflow. Common strategies include [Git Flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) and [GitHub Flow](https://docs.github.com/en/get-started/using-github/github-flow).
+- **Code Reviews**: Use pull requests to facilitate code reviews. This helps maintain code quality and fosters collaboration.
+
+## 4. Responsive Web Design
+
+![responsive design example](https://assets.roadmap.sh/guest/responsive-design-example-6j7wq.png)
+
+Responsive web design ensures that a website looks and functions well on different devices and screen sizes.  With the increasing use of mobile devices, responsive design is key for providing a consistent user experience across desktops, tablets, and smartphones.
+
+From the implementation side, one of the key elements to achieve responsive web design, are media queries. Through the use of media queries, developers can test for multiple screens and viewport sizes and style different sections of the page accordingly.
+
+That said, if media queries sound too complex or just not flexible enough (given that testing for every screen size can be too much nowadays), the alternative is to create a “flexible grid”, in other words, a layout that by definition, can adapt to the current screen size automatically.
+
+The main responsive design techniques to use for these flexible grids are: [multi-column layouts, flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) and [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids). Either way, whatever you decide to go with, they will all provide you with a flexible layout right off the bat.
+
+## 5. Basics of UX
+
+As a front end developer, you are not strictly in charge of designing and defining the user experience standards, however, in some team compositions (especially when they work for smaller companies), the front end developers are also in charge of defining aspects of the user experience.
+
+Understanding the basics of user experience (UX) design helps developers create websites that are not only functional but also intuitive and enjoyable to use. This includes, in theory,  knowledge of design principles, user research, and usability testing. However,  front end developers, given their partial contact and responsibility over the UX, don’t usually go deep into UX, but rather, take a more practical approach, learning from experts or from their own past experience.
+
+A solid grasp of UX principles allows developers to build interfaces that meet users' needs and expectations, leading to higher satisfaction and engagement.
+
+- **Enhanced User Satisfaction**: Good UX design leads to higher user satisfaction by making interfaces intuitive and enjoyable to use. Users are more likely to return to and recommend a product that provides a positive experience.
+- **Improved Engagement and Retention**: A well-designed UX keeps users engaged and encourages them to spend more time on a site or app. This can lead to higher retention rates and better overall performance metrics.
+- **Competitive Advantage**: In a crowded market, products with superior UX stand out. Investing in UX design can provide a competitive edge by attracting and retaining more users compared to products with poor UX.
+- **Alignment with Business Goals**: Good UX design aligns with business objectives by enhancing user satisfaction, which can lead to increased conversions, sales, and customer loyalty. It ensures that the product meets both user needs and business goals effectively.
+
+## 6. Basics of SEO
+
+![SERP results](https://assets.roadmap.sh/guest/serp-results-rny9a.jpg)
+
+Search Engine Optimization (SEO) is essential for ensuring that a website is discoverable by search engines. This involves optimizing the site's content, structure, and performance to rank higher in search engine results.
+
+Key aspects of SEO include using relevant keywords, creating high-quality content, optimizing meta tags, and ensuring fast load times. Effective SEO practices can significantly increase organic traffic to a website.
+
+With that said, why should this be of interest to a front end developer? Shouldn’t there be an SEO expert taking care of all of this?
+
+The answer to that question is “yes, there should be”, however, as a front end developer, you do benefit from having some basic understanding of how SEO works:
+
+- **Increased visibility and traffic**: Good SEO practices improve a website’s ranking on search engine results pages (SERPs). As a front end developer you have control over how the page is rendered, including how fast it does it and the information that is provided to search engines In other words, you have full control over the traffic and visibility of the project you’re working on.
+- **Career advancement**: As businesses increasingly recognize the importance of online presence, the demand for developers with SEO expertise is growing. Front End developers who can implement SEO best practices are more valuable to employers and clients, leading to better - job opportunities and career growth.
+- **Improved code quality**: SEO-friendly code is usually cleaner, more organized, and easier to maintain (there are no guarantees though). By adhering to SEO best practices, front end developers tend to produce code that is well-structured and follows industry standards, leading to fewer bugs and more scalable projects.
+			
+## 7. RESTful APIs
+
+![RESTful API](https://assets.roadmap.sh/guest/restfulapi-from-frontend-dev-8msjn.png)
+
+RESTful APIs are a key piece of technology for front end developers to master. Mind you, not from the POV of creating them, but rather, understanding how to use and interact with them.
+
+These APIs are used to connect the front end of a web application to its backend services. Understanding how to work with APIs, including making HTTP requests and handling responses, is essential for integrating dynamic data into your web applications (i.e. data from your database, data from a third party API, etc).
+
+Familiarity with REST principles and tools like [Postman](https://postman.com) can help developers efficiently test and debug API integrations. As a front end developer, by understanding how RESTful APIs work, you gain the following “superpowers”:
+
+- **Dynamic Content**: RESTful APIs allow front end applications to request and receive data from servers dynamically. This enables the development of interactive and responsive applications that can update content without requiring a full page reload.
+- **Separation of Concerns**: By using RESTful APIs, front end developers can separate the user interface from the backend logic (dumping the responsibility of creating the backend logic on backend developers). This division allows each part of the application to be developed, tested, and maintained independently, leading to cleaner and more manageable codebases.
+- **Scalability and Flexibility**: RESTful APIs provide a standardized way to interact with backend services. This standardization makes it easier to scale applications and integrate with various third-party services. Front End developers can easily connect to different data sources and services as needed.
+- **Improved Collaboration**: Working with RESTful APIs improves collaboration between front end and backend teams. Clear API documentation and standardized endpoints enable teams to work in parallel without dependencies, speeding up the development process.
+
+## 8. Testing and Debugging
+
+![breakpoint debugging](https://assets.roadmap.sh/guest/breakpoint-debugging-izun3.jpg)
+
+Testing and debugging are crucial for ensuring that your code is functional and free of errors. While this applies to both front end and backend development alike, we tend to oversimplify the complexity of the front end logic (in our minds) and, usually, we try to avoid writing tests for it.
+
+However, there is a reason why so many testing frameworks exist for the front end: because front end logic is just as complex and requires just as much care and attention as backend logic.
+
+Now, keep in mind that familiarity with testing frameworks like Jest and debugging tools in modern browser DevTools will help you maintain high-quality code standards. However, keep in mind these are not magical tools, and they will not automatically make your code better, you still have to put in the effort.
+
+Unit testing, integration testing, and end-to-end testing are all important practices to ensure that different parts of the application work correctly both individually and together.
+
+As front end developers, you’ll want to focus on debugging and testing to ensure:
+
+- **Improved Code Quality**: Regular testing helps identify and fix bugs early in the development process, resulting in cleaner and more reliable code. This, as you’ve probably guessed by now, reduces the likelihood of errors in production, ensuring a smoother user experience. 
+- **Increased Developer Efficiency**: By using debugging tools and techniques, developers can quickly pinpoint and resolve issues, ideally,  saving time and effort.
+- **Easier Maintenance**: Well-tested code is easier to maintain and extend, period. Test suites act as a safety net around your code, and as new features are added, existing functionality remains stable (and safe), reducing the risk of introducing new bugs. This makes it easier to scale applications over time.
+
+## 9. Browser DevTools
+
+![chrome devtools](https://assets.roadmap.sh/guest/chrome-dev-tools-ef41z.jpg)
+
+Browser DevTools are essential for inspecting, debugging, and profiling your web applications. Directly built-in to browsers such as Chrome, Firefox and Safari, these tools provide a suite of features for diagnosing and fixing issues in your code. Developers can use these tools to inspect HTML elements, modify CSS styles in real-time, monitor network requests, and analyze performance bottlenecks.
+
+If you’re still wondering why a front end developer should focus on browser DevTools, these are the main reasons:
+
+- **Immediate Feedback**: Browser DevTools allow developers to inspect and modify HTML, CSS, and JavaScript in real 
+time. This immediate feedback is crucial for quickly diagnosing and fixing issues without the need to reload the page.
+- **Enhanced Debugging Capabilities**: DevTools provide powerful debugging features, such as setting breakpoints, stepping through code, and inspecting variables. These capabilities make it easier to identify and resolve bugs in complex applications.
+- **Performance Optimization**: Performance tabs in DevTools enable developers to analyze the loading and runtime performance of their applications. Tools like the Lighthouse audit and the Network panel help identify bottlenecks and optimize resource loading, leading to faster and more efficient web applications.
+- **Responsive Design Testing**: DevTools offer features for testing responsive designs across different screen sizes and devices. The device toolbar allows developers to simulate various mobile and tablet environments, ensuring that applications provide a consistent experience across all platforms.
+- **Detailed Network Analysis**: The Network panel provides insights into all network requests made by the application, including fetches, XHRs, and resource loading. This information is crucial for debugging network issues, understanding load times, and optimizing the overall performance of the application.
+- **CSS and Style Debugging**: The Elements panel allows developers to inspect and manipulate the DOM and CSS. It provides tools to edit styles, view CSS rules, and understand the computed styles for any element, making it easier to fine-tune the visual aspects of an application.
+
+## 10. At Least One Framework (React, Vue, Angular)
+
+![react, angular & vue logos](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+While in theory, all you need to be a front end developer is JavaScript + HTML + CSS, in practice, there are tools available (i.e. frameworks and libraries) that will help you speed up your dev process and produce much cleaner and maintainable code than what you would normally produce on your own.
+
+And in fact, those tools will also let you focus on the actual application you’re building, leaving the extra, presentation-related logic to the framework.
+
+We are, of course, talking about modern front end frameworks (or libraries) such as React, Vue, or Angular.
+
+Of course, there are other options out there, such as Svelte, Solid, or even just the native Web Components that all major browsers support nowadays. However, while those are very valid options, the main 3 still remain the most used options and if you’re looking to become a front end developer, you’ll want to first focus on one of them.
+
+Each framework has its own strengths and use cases, so understanding their core concepts and ecosystems can significantly enhance a developer's productivity. 
+
+Now the question remains: which one is the right one for you? That’s entirely up to you to decide, but here are some of the highlights of each framework:
+
+### Highlights about React
+
+- **Component-Based Architecture**: React's component-based structure promotes reusability and maintainability. Components encapsulate logic, styles, and behavior, making the code more modular and easier to manage.
+- **Virtual DOM**: React’s use of a virtual DOM improves performance by minimizing direct manipulations of the real DOM. This approach results in faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: React has a huge ecosystem of libraries, tools, and a strong community. This support makes it easier to find solutions, share knowledge, and access a wide range of third-party integrations.
+- **Flexibility**: Contrary to popular belief, React is not a full-fledged framework but a library, providing flexibility in choosing additional tools and libraries for routing, state management, and other functionalities.
+
+### Highlights about Angular
+
+- **Full-Featured Framework**: Angular provides a complete solution with built-in tools for routing, state management, form handling, and HTTP requests. This reduces the need for third-party libraries and offers a cohesive development experience.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view, reducing the amount of boilerplate code needed for updates.
+- **Comprehensive Documentation and Community Support**: Angular has extensive documentation and a supportive community, making it easier to find resources and get help.
+
+### Highlights about Vue
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable. Developers can start with a small part of the application and progressively integrate Vue’s features as needed.
+- **Simplicity and Ease of Learning**: Vue’s syntax and design are straightforward, making it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue allows for extensive customization and can be integrated with other projects or libraries. It offers both a simple core library and advanced features for larger applications.
+
+## 11. Web Performance
+
+Web performance is a key aspect of front end development because it affects many areas around the product. And not only on the technical side, but also from the business side as well, considering how performance affects the way users experience and interact with your app.
+
+In simple terms, optimizing web performance involves making your website load faster and run more efficiently. In the space of front end development, performance optimization techniques include minimizing HTTP requests, optimizing images (as in reducing their size without losing quality), using lazy loading (async loading of portions of your app or specific components), and leveraging browser caching.
+
+### Why should you care about web performance as a front end developer?
+
+As a front end developer, the performance of your user interface is your responsibility, however, here are other reasons in case that’s not enough:
+
+- **User Experience**: As already mentioned, fast-loading websites provide a better user experience. Users are more likely to stay on a site and interact with it if pages load quickly and smoothly.
+- **SEO Benefits**: Another way to focus on SEO as a front end developer, is to focus on the performance of your app. Search engines like Google consider page speed as a ranking factor. Faster websites are more likely to rank higher in search results, driving more organic traffic.
+- **Conversion Rates**: [Studies show](https://www.speedsense.com/insights/web-performance-impact-ecommerce-revenue) that even a small delay in page load time can significantly reduce conversion rates. Improving performance can directly impact the bottom line by increasing sales and sign-ups.
+- **Mobile Performance**: With the increasing use of mobile devices, optimizing performance for mobile users is essential. Mobile networks can be slower in some parts of the world, making performance optimizations even more critical.
+
+## 12. TypeScript
+
+![typescript logo](https://assets.roadmap.sh/guest/image3-y7ryl.png)
+
+TypeScript is a superset of JavaScript that adds static typing (amongst other things). It helps catch errors early during development and helps to make your code more maintainable.
+
+As a front end developer, learning TypeScript can enhance your JavaScript skills and improve the quality of your code by giving you both types and higher-level OOP constructs (such as interfaces) to add more structure to your written logic.
+
+By providing these extra tools, TypeScript enables developers to write more predictable and robust code.
+
+Is your code going to be automatically better because of this? No, it’s not. You will still have to pay attention to what you’re writing and building, and you will still have to apply many of the concepts mentioned throughout this article.
+
+### Getting started with TypeScript
+
+- **Official Documentation**: The TypeScript Handbook is an excellent resource for learning the basics and advanced features of TypeScript.
+- **Check out the TypeScript Roadmap**: If you’re wondering what steps to take on your way to learning TypeScript, take a look at the TypeScript Roadmap to learn exactly what you need.
+- **Community Resources**: The TypeScript community is active and supportive. Joining forums, participating in discussions on platforms like Stack Overflow, and following TypeScript-related blogs can provide valuable insights and help.
+
+## Conclusion
+
+Understanding the importance and relevance of these 12 essential front end developer skills can equip front end developers with the tools and knowledge needed to create high-quality, performant, and accessible web applications.
+
+That said, this is only a high-level overview of these skills, if you want to know more about how to tackle each of every one of these skills, check out this front end roadmap.
+
+In the end, staying updated with these core skills ensures developers can effectively tackle new challenges while remaining competitive in the industry.

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-developer-skills.md

@@ -0,0 +1,264 @@
+---
+title: '8 In-Demand Full Stack Developer Skills to Master'
+description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+authorId: fernando
+excludedBySlug: '/full-stack/developer-skills'
+seo:
+  title: '8 In-Demand Full Stack Developer Skills to Master'
+  description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-05
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![image](https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg)
+
+It should be no surprise to anyone that given the fast pace of the web development industry, every type of developer, especially full stack developers, must stay ahead of the curve by continuously updating their skills.
+
+Full-stack web developers share a unique blend of expertise that allows them to independently build and maintain entire web applications. However, this mix of skills is a double-edged sword because it makes staying up-to-date harder for them.
+In this article, we will explore the 8 essential full stack developer skills that you need to master and thrive in your career.
+
+Remember that you have more details about the different technologies and topics to cover in our [full stack developer roadmap](https://roadmap.sh/full-stack).
+
+## Understanding full-stack development
+
+Full stack development involves both frontend and backend work. It means you're not just limited to designing the parts of a website or application that users interact with (frontend), but also managing the server, database, and application logic that power those interactions (backend).
+
+Plus, full-stack developers need to be proficient in working with both relational and non-relational databases, setting up and maintaining infrastructure, and ensuring that their applications are scalable and secure. In other words, if they need to, full-stack developers can be the equivalent of a one-man army. Is this an ideal situation? No, it isn’t. In fact, a better way to look at a full stack developer is to think of them as a wildcard that can be placed in any team, and they’ll consistently add value to it, with minimum ramp-up time needed.
+
+With that foundation in mind, let's dive into the specific skills you need to master.
+
+## 1. Basic understanding of HTTP
+
+![basic understand of HTTP](https://assets.roadmap.sh/guest/understanding-http-pct23.png)
+
+Let’s start with the basics: understanding HTTP. HTTP, or HyperText Transfer Protocol, is the foundation of any interaction on the web. It’s what allows clients (like your web browser) and servers to communicate with each other. As a full-stack developer, having a solid grasp of HTTP is crucial for building, debugging, and maintaining web applications. It’s your bread and butter, and you’ll need to internalize it if you hope to become great at your job.
+
+### Why HTTP Matters for Full Stack Developers?
+Without HTTP, the internet as we know it wouldn’t function, it’s that simple. For a full-stack developer, understanding HTTP means you can effectively manage how your frontend communicates with your backend.
+
+### Key Concepts to understand in HTTP
+
+- **HTTP Methods**: These are the actions that can be performed on a resource. The most common methods are GET (to retrieve data), POST (to send data to the server), PUT (to update data), and DELETE (to remove data). Each method has a specific purpose and knowing when to use each one is essential for building efficient APIs. You can read the [full list of verbs here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
+- **Status Codes**: HTTP status codes are responses from the server to the client's request. They indicate whether the request was successful, if there was an error, or if further action is needed. Common status codes include 200 (OK), 404 (Not Found), 500 (Internal Server Error), and 403 (Forbidden). Understanding these codes helps in debugging and improving user experience. Here’s the [full list of status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) in case you’re wondering.
+- **Headers**: HTTP headers are key-value pairs sent between the client and server. They carry essential information like content type, authorization information (in some cases even credentials), and cache control. Familiarity with headers allows you to manage security, content negotiation, and request-response flow more effectively. While you can create your own, here’s a list of the [standard set of HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
+
+## 2. HTML/CSS/JavaScript
+
+![html, css & javascript](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+For full-stack developers, a solid grasp of HTML, CSS, and JavaScript is essential. These technologies are the building blocks of the visual side of the web, enabling you to create an engaging and functional user interface. While you'll need many other coding skills, mastering these three should be your first priority.
+
+### HTML (HyperText Markup Language)
+
+HTML forms the backbone of any web page, providing structure and content. It defines elements like headings, paragraphs, links, images, and multimedia components.
+
+**Key Features**:
+
+- **Semantic Elements**: Elements like `<header>`, `<footer>`, `<article>`, and `<section>` enhance accessibility and SEO. Properly using these elements makes your content more understandable for users, search engines, and accessibility devices like screen readers.
+- **Foundational**: Understanding HTML is crucial for laying the foundation of any web application, making it an essential skill for full stack developers.
+
+### CSS (Cascading Style Sheets)
+
+CSS is responsible for the visual presentation of a web page. It controls layout, colors, fonts, and overall style, making your web pages visually appealing.
+
+**Key Features**:
+
+- **Rich visual elements**: Features like Flexbox, Grid Layout, animations, and transitions allow you to create complex designs with minimal code.
+- **Responsive Design**: Media queries, Flexbox, and Grid are vital for creating web pages that look great on all devices, from desktops to smartphones.
+
+### JavaScript
+
+JavaScript adds interactivity and dynamic behavior to web pages. In other words, it makes the webpage come to life.
+
+**Key Features**:
+
+- **Modern JavaScript**: Features like arrow functions, template literals, destructuring, modules, and promises make your code more concise and readable.
+- **Interactive Elements**: JavaScript makes your web pages interactive, responding to user actions in real time.
+
+## 3. Writing Modern JavaScript
+
+![modern javascript](https://assets.roadmap.sh/guest/modern-javascript-js84y.jpg)
+
+Modern JavaScript is a key element for full stack development, bringing not just new syntax but powerful tools that make development more efficient and scalable. Mastering this involves understanding how to stay up-to-date with the latest developments in the JS-world, and it also involves technologies such as: npm, build-tools, and bundlers that streamline the development process.
+
+### What is “modern JavaScript”?
+
+The term “Modern JavaScript” can be a bit ambiguous, considering how every new feature or syntax update will directly affect your experience as a developer.
+Some of those “key modern features” are:
+
+- **Arrow Functions**: Offer a shorthand for writing functions and lexical scoping of the this keyword.
+- **Template Literals**: Provide an easier way to create strings with embedded expressions.
+- **Destructuring**: Simplifies the extraction of values from arrays or properties from objects.
+- **Modules**: Enable better code organization and reuse.
+- **Promises and Async/Await**: Facilitate asynchronous programming by providing cleaner and more intuitive ways to handle async operations.
+
+### npm (Node Package Manager)
+
+For those who don’t yet know, [npm](https://www.npmjs.com/) is a critical tool for managing JavaScript libraries and dependencies. It allows you to easily install, update, and manage packages, ensuring your projects stay up-to-date with the latest versions and features.
+
+### Build Tools and Bundlers
+
+Build tools and bundlers to automate many repetitive tasks, optimize performance, and ensure code is production-ready. Let’s take a look at some key tools:
+
+- **Webpack**: [Webpack](https://webpack.js.org/) is a robust module bundler that processes and bundles JavaScript files along with assets like images and stylesheets. It has an ecosystem of plugins and loaders, making it highly configurable and suitable for complex applications. 
+- **Parcel 2**: [Parcel](https://parceljs.org/) simplifies the bundling process with zero configuration out of the box. It automatically handles code splitting hot module replacement and supports a variety of file types.
+- **Vite**: [Vite](https://vitejs.dev/) is designed for speed, leveraging native ES modules to deliver lightning-fast development builds and optimized production builds using Rollup. It’s particularly ideal for modern frameworks like Vue, React, and Svelte. Vite’s configuration is straightforward, and it supports an extensive plugin system for additional functionality.
+
+## 4. At least One Frontend Framework (React, Vue, Angular)
+
+![react, angular & vue](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+Although HTML, CSS, and JavaScript form the core of front-end development, there are many frameworks and libraries that can significantly enhance your development workflow. Among the most popular front-end frameworks and libraries are React, Vue, and Angular.
+
+Mind you, there are quite a lot of other options out there. However, React, Vue, and Angular remain the primary choices for most developers due to their widespread use and strong community support. 
+
+### React
+
+Developed by Facebook, React is a powerful JavaScript library for building user interfaces, especially for single-page applications.
+
+- **Component-Based Architecture**: React’s structure is built around components that encapsulate their own logic, styles, and behaviors. This modular approach promotes reusability and maintainability, making it easier to manage complex applications.
+- **Virtual DOM**: React uses a virtual DOM to optimize performance. This technique reduces the need for direct DOM manipulation, which translates into faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: With a large ecosystem of libraries and tools, plus a strong community, React provides lots of resources for problem-solving and third-party integrations.
+
+### Angular
+
+Developed and maintained by Google, Angular is a full framework for building dynamic web applications
+
+- **Full-Featured Framework**: Angular offers a “complete” solution with built-in support for routing, state management, form handling, and HTTP requests. This approach minimizes the need for additional third-party libraries.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view (the data and its representation), making updates more efficient.
+- **Extensive Documentation and Community Support**: Angular has excellent documentation and a very active community, providing a wealth of resources for learning and troubleshooting.
+
+### Vue
+
+Vue.js, created by Evan You after working for Google, is known for its progressive framework design, making it easy to integrate into projects incrementally.
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable, allowing developers to start with a small part of their application and gradually integrate more features as needed.
+- **Simplicity and Ease of Learning**: Vue’s straightforward syntax and design make it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue offers extensive customization options and can be easily integrated with other projects or libraries. It combines a simple core library with advanced features suitable for larger applications.
+
+Each of these frameworks has its own set of strengths and use cases. The right choice depends on your specific project requirements and personal preference.
+
+## 5. Backend Programming Language
+
+![backend programming languages](https://assets.roadmap.sh/guest/ruby-python-javascript-java-code-h3wyj.jpg)
+
+Choosing the right backend programming language is crucial for building robust and efficient server-side applications. Here are some of the most popular languages used in backend development, each with its own unique features and benefits. You can read this detailed guide for more options and a complete description of each one: [The best backend languages to master](https://roadmap.sh/backend/languages).
+
+**JavaScript (Node.js)**: JavaScript, primarily known for front-end development, extends to the backend through Node.js. Node.js allows for server-side scripting, enabling full stack developers to use the same language for both client-side and server-side development. When it comes to picking a single language for full stack development, JavaScript definitely takes the lead.
+
+**Python**: Python is well known for its simplicity and readability, making it a favorite among developers. Its vast ecosystem of libraries and frameworks, such as Django and Flask, streamlines backend development and makes full stack web development very straightforward. Python's versatility and ease of use make it suitable for both beginners and experienced developers.
+
+**Java**: Java is a highly popular, class-based, object-oriented programming language that’s designed to have as few implementation dependencies as possible. Java is commonly used in large-scale enterprise applications. Frameworks like Spring and Hibernate further enhance its capabilities.
+
+**Ruby**: Ruby is known for its elegant syntax that is natural to read and easy to write. Ruby on Rails, a powerful web application framework, simplifies the process of building web applications by providing default structures for a database, a web service, and web pages. Its convention-over-configuration approach makes development faster and easier.
+
+There are many more options, and as a full stack developer, you’ll need to understand the type of technologies you feel more comfortable with, before choosing the language for your backend.
+
+## 6. Consuming and Creating RESTful APIs
+
+![restful apis](https://assets.roadmap.sh/guest/restful-apis-q1gvl.png)
+
+For full stack developers, working with RESTful APIs is a fundamental skill that bridges the front-end and back-end of web applications. APIs (Application Programming Interfaces) allow different software systems to communicate with each other, enabling your front-end to interact seamlessly with server-side logic and data.
+
+### Consuming RESTful APIs
+
+Consuming APIs involves making HTTP requests from your front-end application to retrieve or send data to the server. Here are the key concepts:
+
+- **HTTP Methods**: Understanding the different HTTP methods is crucial. We’ve already mentioned them above when describing HTTP itself, so make sure to check out the links listed there for more details.
+- **Endpoints and Routes**: An API endpoint is a specific path where your API can be accessed by a client. Each endpoint corresponds to a route in your back-end server, handling specific requests. In the case of RESTful APIs, these routes refer to resources in your system.
+- **Request and Response**: When consuming an API, the front-end sends a request to the server and receives a response. The request typically includes headers (metadata about the request) and a body (data sent to the server), while the response contains the status code, headers, and data.
+- **Fetching Data**: In JavaScript, you can use the native fetch API or libraries like Axios to make HTTP requests.
+
+### Creating RESTful APIs
+
+Creating APIs involves setting up server-side routes and handling requests. Here’s how to get started:
+
+- **Define Routes**: In your back-end framework (like Express for Node.js or Django for Python), define routes that correspond to different endpoints. Each route should handle a specific HTTP method.
+- **Handle Requests and Responses**: For each route, write logic to handle incoming requests and send appropriate responses. Use status codes to indicate the outcome of the request (e.g., 200 for success, 404 for not found, 500 for server errors).
+- **Middleware**: Middleware functions in frameworks like Express can process requests before they reach the endpoint handlers. They’re useful for tasks like authentication, logging, and data validation.
+- **Database Integration**: Often, your API will interact with a database. Use an ORM (Object-Relational Mapping) tool like Sequelize for SQL databases or Mongoose for MongoDB to manage database operations.
+- **REST Principles**: Ensure your API follows REST principles, such as statelessness (each request is independent), resource-based URLs (use nouns for endpoints), and appropriate use of HTTP methods. You can [read here](https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) the full details about REST from the paper that defined the concept.
+
+## 7. Databases
+
+![relational databases](https://assets.roadmap.sh/guest/relational-cb-vs-non-relational-db-9r4m5.png)
+
+Understanding both relational and non-relational databases is crucial for managing and storing data effectively in your applications. Each type of database has its own strengths and use cases, and knowing when to use each is essential for building robust and scalable applications.
+
+### Relational Databases
+
+Relational databases store data in structured tables with predefined schemas. They use SQL (Structured Query Language) for querying and managing data. Here are some key relational databases:
+
+- **MySQL**: MySQL is one of the most popular open-source relational databases. It's known for its ease of use (a common choice for new developers) and performance.
+- **PostgreSQL**: PostgreSQL is a powerful, open-source relational database system known for its advanced features and compliance with SQL standards. It supports complex queries, transactions, and extensibility, making it suitable for a wide range of applications.
+- **SQLite**: SQLite is a lightweight, disk-based database that's easy to set up and use. It's often used in embedded systems and applications that require a simple, self-contained database engine. You’re not going to see big systems using SQLite for its main database, but it’s very common in small projects.
+
+### Non-Relational Databases
+
+Non-relational databases, also known as NoSQL databases, store data in various formats such as documents, key-value pairs, graphs, or wide-column stores. They are designed to handle large volumes of unstructured or semi-structured data. Here are some popular non-relational databases:
+
+- **MongoDB**: MongoDB is a document-oriented database that stores data in JSON-like documents. It’s highly flexible and scalable, making it ideal for applications that require quick iterations and schema flexibility.
+- **Redis**: Redis is an in-memory key-value store known for its high performance and speed. It’s commonly used for caching, real-time analytics, and as a message broker.
+- **Cassandra**: Cassandra is a distributed, wide-column store designed for handling large amounts of data across many commodity servers without any single point of failure. It's highly scalable and suitable for applications that require high availability and performance.
+
+In the end, like with many other technologies, there is not one single option that’s better than the others. It’s more about your particular needs and the features of each database. When having to decide on a specific database option, try to understand their capabilities and try to match them to your particular context.
+
+## 8. Hosting and Infrastructure
+
+![deployment insfrastructure](https://assets.roadmap.sh/guest/deployment-infrastructures-jrvr9.png)
+
+For full stack developers, understanding hosting and infrastructure is essential for deploying and managing their web applications. This involves knowing where to host your applications, how to set up servers, and how to ensure your application runs smoothly and efficiently. Here’s a breakdown of key concepts and services in this area:
+
+### Cloud Hosting Providers
+
+Cloud hosting providers offer scalable and flexible solutions for hosting web applications. They provide various services including virtual machines, storage, databases, and more. Some of the most popular providers are:
+
+- **Amazon Web Services (AWS)**: AWS offers a comprehensive suite of cloud services, including EC2 for virtual servers, S3 for storage, and RDS for managed databases. Its scalability and range of services make it a go-to choice for many developers.
+- **Google Cloud Platform (GCP)**: GCP provides robust cloud computing services, including Compute Engine for virtual machines, Cloud Storage, and Cloud SQL for managed databases. 
+- **Microsoft Azure**: Azure offers a wide range of cloud services similar to AWS and GCP. It includes Azure Virtual Machines, Blob Storage, and Azure SQL Database. Azure integrates well with Microsoft’s other products, making it ideal for enterprise applications.
+
+### Web Hosting Services
+
+For simpler or smaller-scale projects, traditional web hosting services might be more than enough. These services typically offer easy setup and management for hosting websites and web applications:
+
+- **Heroku**: Heroku is a platform-as-a-service (PaaS) that makes it easy to deploy, manage, and scale applications. It supports several programming languages and provides a straightforward way to deploy applications directly from your code repository.
+- **Netlify**: Netlify specializes in hosting static websites and front-end applications. It provides continuous deployment from Git repositories, built-in SSL, and a global CDN, making it a popular choice for modern web development workflows.
+- **Vercel**: Vercel is optimized for Next.js. It offers seamless deployment, serverless functions, and a global CDN, ensuring fast and reliable performance for web applications.
+
+### Containers and Orchestration
+
+Containers allow developers to package applications with all their dependencies, ensuring consistency across different environments (this simplifies deployment processes by ensuring your app always gets deployed into the same system). Orchestration tools manage and scale these containers:
+
+- **Docker**: Docker is a platform that allows developers to create, deploy, and run applications in containers. Containers are lightweight and portable, making it easier to manage application dependencies and environments.
+- **Kubernetes**: Kubernetes is an open-source orchestration tool for managing containerized applications at scale. It automates deployment, scaling, and operations of application containers, providing a solid infrastructure for large-scale applications.
+
+### Serverless Architecture
+
+If you just don’t want to think about the server, at all (configuration, specs, resource requirements, etc), then you probably want a serverless architecture.
+
+Serverless architecture allows developers to build and run applications without managing server infrastructure (the servers are there, you just don’t interact directly with them). Key benefits include automatic scaling and pay-per-use billing.
+
+- **AWS Lambda**: AWS Lambda lets you run code without provisioning or managing servers. It executes code in response to events and automatically scales based on the number of requests, making it ideal for microservices and real-time data processing.
+- **Google Cloud Functions**: Google Cloud Functions is a serverless execution environment for building and connecting cloud services. It allows you to write simple, single-purpose functions that are triggered by events.
+- **Azure Functions**: Azure Functions provides a serverless compute service that enables you to run event-triggered code. It integrates with other Azure services, offering a seamless development and deployment experience.
+
+### Infrastructure as Code (IaC)
+
+IaC allows developers to manage and provision computing infrastructure through machine-readable configuration files rather than physical hardware configuration or interactive configuration tools. This is a great option if you’re looking to version your infrastructure configuration.
+
+- **Terraform**: Terraform is an IaC tool that allows you to define and provision data center infrastructure using a high-level configuration language. It supports multiple cloud providers, making it a versatile choice for managing infrastructure. While not fully open-source, Terraform offers a paid version called Terraform Cloud. If you’re looking for a fully open-source version, you can look into OpenTofu, which is an open-source fork from Terraform under the Mozilla Public License 2.0.
+- **Ansible**: Ansible is an open-source automation tool for configuration management, application deployment, and task automation. It uses YAML and doesn’t require agent software on the target nodes, making it easy to use and manage.
+
+##Conclusion 
+Keeping up-to-date with the full set of skills any full stack web developer will need for their job is not easy, given how varied their work might be. That said, the 8 full stack developer skills listed here are more than enough to get you started, and you can keep adding more as you see the need for them.
+
+Remember that if you want more details about the roadmap to become a great full stack developer, you have a great resource here: [Full stack developer roadmap](https://roadmap.sh/full-stack).

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/ai-data-scientist.md

@@ -2,6 +2,7 @@
 jsonUrl: '/jsons/roadmaps/ai-data-scientist.json'
 pdfUrl: '/pdfs/roadmaps/ai-data-scientist.pdf'
 order: 4
+renderer: 'editor'
 briefTitle: 'AI and Data Scientist'
 briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 title: 'AI and Data Scientist Roadmap'
@@ -10,7 +11,7 @@ hasTopics: true
 isNew: false
 dimensions:
   width: 968
-  height: 2243.96
+  height: 2140
 schema:
   headline: 'AI and Data Scientist Roadmap'
   description: 'Learn how to become an AI and Data Scientist with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

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

@@ -1,4 +0,0 @@
-# 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)

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

@@ -0,0 +1,5 @@
+# AB Testing
+
+- [@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 +0,0 @@
-# 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)
-

src/data/roadmaps/ai-data-scientist/content/classic-ml-sup-unsup-advanced-ml-ensembles-nns@FdBih8tlGPPy97YWq463y.md

@@ -0,0 +1,7 @@
+# Classic/Advanced ML
+
+- [@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/coding@XLDWuSt4tI4gnmqMFdpmy.md

@@ -0,0 +1,3 @@
+# Coding
+
+Programming is a fundamental skill for data scientists. You need to be able to write code to manipulate data, build models, and deploy solutions. The most common programming languages used in data science are Python and R. Python is a general-purpose programming language that is easy to learn and has a large number of libraries for data manipulation and machine learning. R is a programming language and free software environment for statistical computing and graphics. It is widely used for statistical analysis and data visualization.

src/data/roadmaps/ai-data-scientist/content/data-structures-and-algorithms-python@StBCykpzpM4g9PRFeSNXa.md

@@ -0,0 +1,5 @@
+# Data Structures and Algorithms
+
+- [@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/data-understanding-data-analysis-and-visualization@JaN8YhMeN3whAe2TCXvw9.md

@@ -0,0 +1,6 @@
+# Data Understanding, Analysis and Visualization
+
+- [@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/data-understanding.md

@@ -1,6 +0,0 @@
-# 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)
-

src/data/roadmaps/ai-data-scientist/content/deep-learning@cjvVLN0XjrKPn6o20oMmc.md

@@ -0,0 +1,3 @@
+## Deep Learning
+
+Deep learning is a subset of machine learning that deals with algorithms inspired by the structure and function of the brain called artificial neural networks. Deep learning is a key technology behind driverless cars, enabling them to recognize a stop sign, or to distinguish a pedestrian from a lamppost. It is the key to voice control in consumer devices like phones, tablets, TVs, and hands-free speakers. Deep learning is getting lots of attention lately and for good reason. It’s achieving results that were not possible before.

src/data/roadmaps/ai-data-scientist/content/deployment-models-cicd@uPzzUpI0--7OWDfNeBIjt.md

@@ -0,0 +1,5 @@
+# MLOps
+
+- [@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/deployment-models.md

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

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

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

src/data/roadmaps/ai-data-scientist/content/differential-calculus@mwPJh33MEUQ4Co_LiVEOb.md

@@ -0,0 +1,4 @@
+# Differential Calculus
+
+- [@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 +0,0 @@
-# Econometrics Pre-requisites
-
-- [10 Fundamental Theorems for Econometrics](https://bookdown.org/ts_robinson1994/10EconometricTheorems/)
-

src/data/roadmaps/ai-data-scientist/content/econometrics@Gd2egqKZPnbPW1W2jw4j8.md

@@ -0,0 +1,3 @@
+# Econometrics
+
+Ecenometrics is the application of statistical methods to economic data. It is a branch of economics that aims to give empirical content to economic relations. More precisely, it is "the quantitative analysis of actual economic phenomena based on the concurrent development of theory and observation, related by appropriate methods of inference." Econometrics can be described as something that allows economists "to sift through mountains of data to extract simple relationships."

src/data/roadmaps/ai-data-scientist/content/exploratory-data-analysis@l1027SBZxTHKzqWw98Ee-.md

@@ -0,0 +1,3 @@
+# Exploratory Data Analysis
+
+Exploratory Data Analysis (EDA) is an approach to analyzing data sets to summarize their main characteristics, often with visual methods. EDA is used to understand what the data can tell us beyond the formal modeling or hypothesis testing task. It is a crucial step in the data analysis process.

src/data/roadmaps/ai-data-scientist/content/fully-connected-cnn-rnn-lstm-transformers-tl@eOFoGKveaHaBm_6ppJUtA.md

@@ -0,0 +1,7 @@
+# Fully Connected NN, CNN, RNN, LSTM, Transformers, Transfer Learning
+
+- [@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/fully-connected-nn.md

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

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

@@ -1,4 +0,0 @@
-# Hypothesis Testing
-
-- [Introduction to Statistical Analysis: Hypothesis Testing](https://imp.i384100.net/vN0JAA)
-

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

@@ -0,0 +1,4 @@
+# Hypothesis Testing
+
+- [@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)