fix: username input

Updated markdown with up to date resources

.astro/settings.json

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

contributing.md

@@ -50,7 +50,6 @@ Visit the following resources to learn more:
 - `@opensource@`
 - `@article@`
 - `@course@`
-- `@opensource@`
 - `@podcast@`
 - `@video@`
 
@@ -96,6 +95,6 @@ It's important to add a valid type, this will help us categorize the content and
 
   - 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.
+  - 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.
+  - 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,6 +42,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
 - [AWS Roadmap](https://roadmap.sh/aws)
 - [Linux Roadmap](https://roadmap.sh/linux)
+- [Terraform Roadmap](https://roadmap.sh/terraform)
 - [Data Analyst Roadmap](https://roadmap.sh/data-analyst)
 - [MLOps Roadmap](https://roadmap.sh/mlops)
 - [Product Manager Roadmap](https://roadmap.sh/product-manager)
@@ -79,6 +80,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
 - [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
+- [DevRel Engineer Roadmap](https://roadmap.sh/devrel)
 
 There are also interactive best practices:
 

src/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/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/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/RelatedRoadmaps.astro

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

src/components/Roadmaps/RoadmapsPage.tsx

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

src/components/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

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

src/components/UpdateProfile/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/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/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/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/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/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/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/machine-learning@kBdt_t2SvVsY3blfubWIz.md

@@ -0,0 +1,3 @@
+# Machine Learning
+
+Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to "learn" (e.g., progressively improve performance on a specific task) from data, without being explicitly programmed. The name machine learning was coined in 1959 by Arthur Samuel. Evolved from the study of pattern recognition and computational learning theory in artificial intelligence, machine learning explores the study and construction of algorithms that can learn from and make predictions on data – such algorithms overcome following strictly static program instructions by making data-driven predictions or decisions, through building a model from sample inputs. Machine learning is employed in a range of computing tasks where designing and programming explicit algorithms with good performance is difficult or infeasible; example applications include email filtering, detection of network intruders, and computer vision.

src/data/roadmaps/ai-data-scientist/content/mathematics@aStaDENn5PhEa-cFvNzXa.md

@@ -0,0 +1,6 @@
+# Mathematics
+
+Mathematics is the foundation of AI and Data Science. It is essential to have a good understanding of mathematics to excel in these fields.
+
+- [Mathematics for Machine Learning](https://imp.i384100.net/baqMYv)
+- [Algebra and Differential Calculus](https://imp.i384100.net/LX5M7M)

src/data/roadmaps/ai-data-scientist/content/mlops@Qa85hEVe2kz62k9Pj4QCA.md

@@ -0,0 +1,3 @@
+# MLOps
+
+MLOps is a practice for collaboration and communication between data scientists and operations professionals to help manage production ML lifecycle. It is a set of best practices that aims to automate the ML lifecycle, including training, deployment, and monitoring. MLOps helps organizations to scale ML models and deliver business value faster.

src/data/roadmaps/ai-data-scientist/content/statistics@4WZL_fzJ3cZdWLLDoWN8D.md

@@ -0,0 +1,5 @@
+# Statistics
+
+Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.
+
+Learn more from the resources given on the roadmap.

src/data/roadmaps/ai-data-scientist/mapping.json

@@ -0,0 +1,19 @@
+{
+  "linear-algebra-calc-mathana": "gWMvD83hVXeTmCuHGIiOL",
+  "stats-clt": "Y9YJdARIRqqCBCy3GVYdA",
+  "hypothesis-testing": "XJXIkWVDIrPJ-bVIvX0ZO",
+  "probability-sampling": "jxJtwbiCvxHqmkWkE7zdx",
+  "ab-testing": "mJq9b50MJM9o9dLhx40iN",
+  "increasing-test-sensitivity": "v68nwX914qCwHDSwY_ZhG",
+  "ratio-metrics": "n2JFGwFxTuOviW6kHO1Uv",
+  "data-understanding": "JaN8YhMeN3whAe2TCXvw9",
+  "classic-advanced-ml": "FdBih8tlGPPy97YWq463y",
+  "deployment-models": "uPzzUpI0--7OWDfNeBIjt",
+  "fully-connected-nn": "eOFoGKveaHaBm_6ppJUtA",
+  "learn-sql": "Im0tXXn3GC-FUq2aMHgwm",
+  "learn-dsa": "StBCykpzpM4g9PRFeSNXa",
+  "learn-python": "MVrAqizgkoAs2aghN8TgV",
+  "regression-time-series-fitting-distr": "h19k9Fn5XPh3_pKEC8Ftp",
+  "econometrics-pre-req": "y6xXsc-uSAmRDnNuyhqH2",
+  "diff-calculus": "mwPJh33MEUQ4Co_LiVEOb"
+}

src/data/roadmaps/android/android.md

@@ -1,5 +1,6 @@
 ---
 pdfUrl: '/pdfs/roadmaps/android.pdf'
+renderer: 'editor'
 order: 5
 briefTitle: 'Android'
 briefDescription: 'Step by step guide to becoming an Android Developer in 2024'
@@ -9,7 +10,7 @@ hasTopics: true
 isNew: false
 dimensions:
   width: 968
-  height: 2197.76
+  height: 2070
 schema:
   headline: 'Android Developer Roadmap'
   description: 'Learn how to become a Android Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/data/roadmaps/android/content/104-interface-and-navigation/elements/110-drawer.md

@@ -1,3 +0,0 @@
-# Drawer
-
-The `Drawer` in Android is a slide-out menu that enables users to navigate between different parts of an application. It is usually triggered by a hamburger icon in the app's top-left corner. The `Drawer` can contain a list of options, subheadings, and separators to articulate the app's structure. In Android, this component can be implemented using `DrawerLayout` and `NavigationView`. The `DrawerLayout` is the parent component and `NavigationView` is typically placed within the `DrawerLayout`. One key thing to note is that the `Drawer` should not be used as the only means of navigating through an application, according to Android's design guidelines.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/111-animations.md

@@ -1,5 +0,0 @@
-# Animations
-
-In Android, animations are used to give a more visual, dynamic, and interactive aspect to a static user interface. Android offers four categories of animation APIs in order to create and manage the animations. These are: **Property Animation**: This allows modification of properties of an object over a given time period. **View Animation**: Consists of two subcategories i.e. Tween Animation (transition of a view from one state to another) and Frame Animation (displaying frames one after another). **Drawable Animation**: This is similar to a slideshow, showing one image after another. Lastly, **Layout Animation**: This is used to animate the layout itself when views are added or removed.
-
-You can utilize Android's built-in animations or fully customize your own to add unique transitions and movements in your applications. Every app can benefit from a touch of animation to create a more immersive and pleasant user experience.

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

@@ -1 +0,0 @@
-# Elements

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/100-frame.md

@@ -1,3 +0,0 @@
-# Frame
-
-The `FrameLayout` in Android is a layout manager that pinpoints its children to the top left corner of the layout. This means that all children will be piled up on each other at the same top left corner, which might not be visually appealing. However, it can be useful in some specific designs, where you desire to overlay one view on top of another. Additionally, `FrameLayout` allows you to control the positioning of items in the frame by configuring the `gravity` property. However, bear in mind that this layout does not provide any visual structure – you may need to use `padding` or `margin` to create spaces between the elements in the frame.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/101-linear.md

@@ -1,3 +0,0 @@
-# Linear
-
-`Linear Layout` in Android is a layout where all elements are aligned in a linear fashion - either horizontally or vertically. Each element inside a `LinearLayout` takes up space according to its size. In a vertical layout, elements can occupy the full width and a certain height, whereas in a horizontal layout, elements can occupy the full height and a certain width. This is extremely useful if you want to align elements in a single direction. You provide the orientation of a `LinearLayout` using the `android:orientation` attribute.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/102-relative.md

@@ -1,3 +0,0 @@
-# Relative
-
-`RelativeLayout` in Android is a layout that positions views based on their relationship to each other or the parent. This means that you can set your views related to the position of siblings (other child views) or the parent. For example, you can place a button right to an ImageView, or at the bottom of a parent view. Android systems determine this order dynamically by examining each of the RelativeLayout parameters, such as `android:layout_below` or `android:layout_toRightOf`, and applying them according to the rules defined. This layout is useful when you're building a UI that needs to maintain relative positioning of elements, even as screen size or orientation changes.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/103-constraint.md

@@ -1,3 +0,0 @@
-# Constraint
-
-ConstraintLayout is a ViewGroup that allows you to position and size widgets in a flexible way. It was added to Android Studio 2.2 in 2016. It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor. All direct children of a ConstraintLayout have a set of constraints that define their position. These constraints are used to position the child's left or top edge relative to other views or the parent layout. The position and size for each view can be specified using a number of methods including baseline alignment, margins, and bias. ConstraintLayout works best with Android Studio's Layout Editor where you can drag-and-drop views and then add constraints to fine-tune view positions.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/104-recycle-view.md

@@ -1,3 +0,0 @@
-# RecyclerView
-
-The `RecyclerView` is an enhanced version of the `ListView` and the `GridView`. It is a more advanced and flexible version of `ListView`. In `RecyclerView`, there are several different components that work together to display your data. The `RecyclerView.Adapter` is similar to the `BaseAdapter`; it takes data and turns it into views that can be inserted in the `RecyclerView` layout. On the other hand, the `RecyclerView.LayoutManager` helps positioning items inside the `RecyclerView` and determining the behavior when scrolling. A third significant component is `RecyclerView.ViewHolder`. It provides references to the views for each data item which help to reduce unnecessary calls to `findViewById()`. It's also important to mention that the `RecyclerView` class supports not only lists but also a custom implementation of horizontal or vertical lists, grids, or staggered grids while offering more opportunities for fantastic custom animations.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/index.md

@@ -1 +0,0 @@
-# Layouts

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/100-mvi.md

@@ -1,3 +0,0 @@
-# MVI
-
-"MVI" stands for Model-View-Intent, and is an architectural pattern used in Android development. This pattern introduces a unidirectional data flow which makes it easier to understand an app's state at any given point in time. In the MVI pattern, the `Intent` represents an intention or desire to perform an action, often triggered by user inputs. The `View` is responsible for rendering the UI and emitting intents. The `Model`, on the other hand, represents the state of the app and reacts to intents by changing its state. It's the Model's responsibility to respond to each Intent with a resulting new state. Once a new state is created, it is published back to the `View`. This clear separation and single direction of data and event flow can help in managing side-effects and handling asynchronous actions.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/101-mvvm.md

@@ -1,3 +0,0 @@
-# MVVM
-
-"**MVVM**" stands for "Model View ViewModel" and it is an architectural pattern that aims to separate the development of Graphical User Interface from the business logic. In MVVM, the **Model** represents the data and the business logic of the app. The **View** is responsible for the display of the data and interacts with the user. The **ViewModel** acts as a link between the Model and the View. It handles all the UI logic and preserves the state of the data when the configuration changes or when the app is stopped and then started again.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/102-mvp.md

@@ -1,3 +0,0 @@
-# MVP
-
-MVP stands for Model-View-Presenter. It is an architectural pattern often used in Android development. In MVP, the architect separates the application's responsibilities into three main layers. The 'Model' refers to the data and business logic of the application. The 'View', typically implemented by an Activity or Fragment in Android, is responsible for displaying the data to the user and collecting user inputs. Lastly, the 'Presenter' works as a bridge between the Model and the View. It listens to user interactions from the View and updates the Model accordingly, and also updates the View based on changes in the Model. This separation of responsibilities allows for better code organization, easier testing, and greater flexibility.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/103-mvc.md

@@ -1,3 +0,0 @@
-# MVC
-
-MVC stands for Model-View-Controller. It is a widely used design pattern for designing software's architecture. According to this, an application is divided into three core components. The 'Model' is responsible for handling the data and business logic. The 'View' is responsible for rendering the model's data and generating the user interface. The 'Controller' acts as an interface between the Model and View. It processes all the user's interactions and updates the View and Model accordingly. It's crucial to note that in MVC, the View can have multiple representations of the Model.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/index.md

@@ -1 +0,0 @@
-# Architectural patterns

src/data/roadmaps/android/content/109-common-services/100-firebase/index.md

@@ -1,3 +0,0 @@
-# Firebase
-
-`Firebase` is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a real-time database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files. It provides an API that allows developers to store and sync data across multiple clients. Firebase includes a responsive client library to bind application data to your user interface and backend services for authentication systems, analytics, database management, etc. Firebase simplifies application development all while ensuring server-side effectiveness.