chore: sync content to repo (#9480)

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>

src/data/roadmaps/frontend/content/biome@UvCVChB6NZ_yUg0RdIJ2o.md

@@ -0,0 +1,11 @@
+# Biome
+
+Biome is a high-performance tool for web projects, designed to format and lint code. It aims to replace a suite of existing tools like Prettier, ESLint, and others, offering a unified solution for code quality and consistency. Biome supports languages like JavaScript, TypeScript, JSX, and JSON, helping developers maintain a clean and standardized codebase.
+
+Visit the following resources to learn more:
+
+- [@official@Biome](https://biomejs.dev/)
+- [@opensource@biome](https://github.com/biomejs/biome)
+- [@article@Biome: The All-in-One Toolchain for Modern Frontend Projects](https://blog.openreplay.com/biome-toolchain-modern-frontend-projects/)
+- [@article@Getting Started with Biome: A Modern Web Development Toolchain 🚀](https://medium.com/devmap/getting-started-with-biome-a-modern-web-development-toolchain-7c9046cebbfc)
+- [@video@The EASIEST Way To Switch From ESLint & Prettier to Biome — Ultracite](https://www.youtube.com/watch?v=lEkXbneUnWg)

src/data/roadmaps/frontend/content/bun@j2H1qGosbveayviOCVkUs.md

@@ -0,0 +1,12 @@
+# Bun
+
+Bun is a JavaScript runtime, bundler, transpiler, and package manager, all-in-one. It's designed to be a faster, more efficient alternative to Node.js and npm, aiming to improve performance and developer experience through its speed and comprehensive toolset. Bun uses JavaScriptCore, Apple's JavaScript engine, which is known for its performance.
+
+Visit the following resources to learn more:
+
+- [@official@Bun](https://bun.com/)
+- [@official@Bun Docs](https://bun.com/docs)
+- [@opensource@bun](https://github.com/oven-sh/bun)
+- [@article@What Is Bun? An All-in-One Runtime Taking on Node.js](https://kinsta.com/blog/bun-sh/)
+- [@video@Bun is disrupting JavaScript land](https://www.youtube.com/watch?v=dWqNgzZwVJQ)
+- [@video@Bun Crash Course | JavaScript Runtime, Bundler & Transpiler](https://www.youtube.com/watch?v=U4JVw8K19uY)

src/data/roadmaps/frontend/content/cache-control@tWDmeXItfQDxB8Jij_V4L.md

@@ -0,0 +1,10 @@
+# Cache-Control
+
+Cache-Control is an HTTP header used to specify caching directives in HTTP requests and responses. These directives control how browsers and other intermediaries (like CDNs) should cache content. By setting appropriate Cache-Control headers, developers can influence whether a resource is stored, for how long, and under what conditions, ultimately impacting website loading speed and reducing server load.
+
+Visit the following resources to learn more:
+
+- [@article@Cache-Control header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control)
+- [@article@What is cache-control? | Cache explained](https://www.cloudflare.com/en-gb/learning/cdn/glossary/what-is-cache-control/)
+- [@video@Two-Minute Tech Tuesdays - Cache-Control Header](https://www.youtube.com/watch?v=8TBWJo094yA)
+- [@video@Deep Dive into HTTP Caching: cache-control, no-cache, no-store, max-age, ETag and etc.](https://www.youtube.com/watch?v=Cy2ZJOBgk84)

src/data/roadmaps/frontend/content/cloudflare@_Uh-UFNe2wP2TV0x2lKY_.md

@@ -0,0 +1,10 @@
+# Cloudflare
+
+Cloudflare is a service that sits between your website and its visitors, acting as a reverse proxy. It provides a range of features including a content delivery network (CDN) to speed up website loading times by caching content closer to users, DDoS protection to safeguard against malicious attacks, and SSL/TLS encryption to secure data transmission. It essentially helps improve website performance, security, and reliability.
+
+Visit the following resources to learn more:
+
+- [@official@Cloudflare](https://www.cloudflare.com/en-gb/)
+- [@official@Getting started](https://developers.cloudflare.com/pages/get-started/)
+- [@video@What is Cloudflare?](https://www.youtube.com/watch?v=XHvmX3FhTwU)
+- [@video@Learn Cloudflare Workers 101 - Full Course for Beginners](https://www.youtube.com/watch?v=H7Qe96fqg1M)

src/data/roadmaps/frontend/content/devtools-usage@JWU9jc12_ewaIKt3qWLcp.md

@@ -0,0 +1,10 @@
+# DevTools Usage
+
+DevTools are a set of web developer tools built directly into web browsers. They allow you to inspect and debug HTML, CSS, and JavaScript, monitor network activity, analyze performance bottlenecks, and more. By using DevTools, frontend developers can understand how their code is executed in the browser and identify areas for optimization.
+
+Visit the following resources to learn more:
+
+- [@article@What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)
+- [@article@What are Developer Tools?](https://aws.amazon.com/what-is/developer-tools/)
+- [@article@Google DevTools](https://developer.chrome.com/docs/devtools)
+- [@video@Understand Browser Dev Tools Network Tab (and avoid these mistakes...)](https://www.youtube.com/watch?v=2CC0fugc_2o)

src/data/roadmaps/frontend/content/lighthouse@dz7_QXoO7X0WmS5xuAhhJ.md

@@ -0,0 +1,12 @@
+# Lighthouse
+
+Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. Lighthouse provides reports with actionable insights to help developers improve their website's user experience.
+
+Visit the following resources to learn more:
+
+- [@official@Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=es&pli=1)
+- [@official@Introduction to Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)
+- [@opensource@lighthouse](https://github.com/GoogleChrome/lighthouse)
+- [@article@Google Lighthouse: What It Is & How to Use It](https://www.semrush.com/blog/google-lighthouse/)
+- [@video@What Is Google Lighthouse and How to Use It?](https://www.youtube.com/watch?v=VyaHwvPWuZU)
+- [@video@Use Google Lighthouse to Speed up Site (2025)](https://www.youtube.com/watch?v=_eM7hmORXZA)

src/data/roadmaps/frontend/content/performance@6d8cjWZ4BuUjwT0seiuzJ.md

@@ -0,0 +1,10 @@
+# Performance
+
+Performance, in the context of web development, refers to how quickly and efficiently a website or web application loads and responds to user interactions. It encompasses various aspects like loading times, rendering speed, and overall responsiveness. Optimizing performance ensures a smooth and enjoyable user experience, leading to increased engagement and satisfaction.
+
+Visit the following resources to learn more:
+
+- [@article@Web performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
+- [@article@9 Essential Strategies for Web Performance Optimization](https://www.shopify.com/enterprise/blog/web-performance-optimization)
+- [@video@The ultimate guide to web performance](https://www.youtube.com/watch?v=0fONene3OIA)
+- [@video@Frontend System Design: The 2025 Web Performance Roadmap](https://www.youtube.com/watch?v=KUdqbIHn8Ic)

src/data/roadmaps/frontend/content/railway@PJRsqg5Vx9gQTodxaeZfz.md

@@ -0,0 +1,10 @@
+# Railway
+
+Railway is a cloud platform that simplifies deploying web applications and services. It allows developers to deploy directly from their Git repositories, automatically handling infrastructure concerns like server provisioning, networking, and scaling. It supports various languages and frameworks, making it a versatile option for deploying frontend projects.
+
+Visit the following resources to learn more:
+
+- [@official@Railway](https://railway.com/)
+- [@official@Quick Start Tutorial](https://docs.railway.com/quick-start)
+- [@video@Fastest Way to Deploy a Full Stack Web App (Railway)](https://www.youtube.com/watch?v=JQIKobOcQ9k)
+- [@video@Intro to Railway - Config Free Deploys](https://www.youtube.com/watch?v=DyQz2DgSToU)

src/data/roadmaps/frontend/content/render@wfGz8pshGQARZ7qStGoSD.md

@@ -0,0 +1,10 @@
+# Render
+
+Render is a unified cloud platform that simplifies the process of deploying and hosting web applications, static websites, and backend services. It automates infrastructure management, allowing developers to focus on writing code rather than configuring servers. Render supports various programming languages and frameworks, offering features like automatic scaling, continuous deployment, and SSL certificates.
+
+Visit the following resources to learn more:
+
+- [@official@Render](https://render.com/)
+- [@official@Render Docs + Quickstarts](https://render.com/docs)
+- [@article@Render: Cloud Deployment with Less Engineering](https://thenewstack.io/render-cloud-deployment-with-less-engineering/)
+- [@video@Deploy any application with one click using Render | Cloud Application Platform](https://www.youtube.com/watch?v=yWxBUcG_C7g)

src/data/roadmaps/frontend/content/rolldown@hE-DbpBpYrfB8tmBEjTnG.md

@@ -0,0 +1,12 @@
+# Rolldown
+
+Rolldown is a fast JavaScript bundler written in Rust, designed to be a drop-in replacement for Rollup. It takes your JavaScript and related assets (like CSS and images) and packages them into optimized bundles that can be efficiently loaded in a web browser. Rolldown aims to improve build performance and provide a smoother development experience compared to existing JavaScript bundlers.
+
+Visit the following resources to learn more:
+
+- [@official@Rolldown](https://rolldown.rs/)
+- [@official@Rolldown Docs](https://rolldown.rs/guide/getting-started)
+- [@official@Getting Started](https://rolldown.rs/guide/getting-started)
+- [@opensource@rolldown](https://github.com/rolldown/rolldown)
+- [@article@Rolldown: why it matters](https://dev.to/justinschroeder/rolldown-why-it-matters-4129)
+- [@video@Alexander Lichter | Rolldown: How Vite bundles at the speed of Rust | ViteConf 2025](https://www.youtube.com/watch?v=3PFLeteDuyQ)

src/data/roadmaps/frontend/content/service-workers@66ya3WdtlkjQyBTc3Lein.md

@@ -0,0 +1,11 @@
+# Service Workers
+
+Service Workers are JavaScript files that act as proxy servers between web browsers and web servers. They can intercept network requests, cache resources, and deliver push notifications, even when the user is offline. This allows for improved performance and offline capabilities for web applications.
+
+Visit the following resources to learn more:
+
+- [@article@Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+- [@article@Service workers](https://web.dev/learn/pwa/service-workers)
+- [@article@Service worker overview - Chrome](https://developer.chrome.com/docs/workbox/service-worker-overview)
+- [@video@What is a service workers](https://www.youtube.com/watch?v=A6MHtKkA0CA)
+- [@video@How does a service worker work?](https://www.youtube.com/watch?v=__xAtWgfzvc)

src/data/roadmaps/frontend/content/streamed-responses@FyNXhHq1VIASNq-LI7JIu.md

@@ -0,0 +1,9 @@
+# Streamed Responses
+
+Streamed responses involve sending data from a server to a client in chunks, rather than waiting for the entire response to be ready before sending anything. This allows the browser to start processing and rendering content sooner, improving perceived performance and user experience, especially for large datasets or long-running processes. Instead of a single, large download, the data arrives incrementally.
+
+Visit the following resources to learn more:
+
+- [@article@Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)
+- [@article@Streaming API responses for AI - OpenAI](https://platform.openai.com/docs/guides/streaming-responses)
+- [@article@Streaming Responses in AI: How AI Outputs Are Generated in Real-Time](https://dev.to/pranshu_kabra_fe98a73547a/streaming-responses-in-ai-how-ai-outputs-are-generated-in-real-time-18kb)

src/data/roadmaps/frontend/content/tanstack-start@f9zlP6lGhfe6HBHVYiySu.md

@@ -0,0 +1,12 @@
+# Tanstack Start
+
+Tanstack Start is a full-stack framework built on React that simplifies the process of creating web applications with server-side rendering (SSR). It provides tools and conventions for routing, data fetching, and deployment, allowing developers to focus on building features rather than configuring infrastructure. It aims to streamline the development workflow for React-based SSR applications.
+
+Visit the following resources to learn more:
+
+- [@official@Tanstack Start](https://tanstack.com/start/latest)
+- [@official@Tanstack Start Docs](https://tanstack.com/start/latest/docs/framework/react/overview)
+- [@official@Getting Started](https://tanstack.com/start/latest/docs/framework/react/getting-started)
+- [@article@An introduction to the TanStack Start framework](https://blog.logrocket.com/tanstack-start-overview/)
+- [@video@TanStack Start Full Course 2025 | Become a TanStack Start Pro in 1 Hour](https://www.youtube.com/watch?v=s4I4JtOZNgg)
+- [@video@Tanstack Start is now my Go-To Framework](https://www.youtube.com/watch?v=TWWS_lo4kOA)

src/data/roadmaps/frontend/content/type-checkers@NQ95TJCe3E1IwEuBa__D6.md

@@ -0,0 +1,7 @@
+# Type Checkers
+
+Type checkers are tools that analyze code to verify that the types of values used in a program are consistent with their declared or inferred types. They help catch type-related errors during development, before the code is run, by identifying mismatches between expected and actual data types. This process ensures that operations are performed on compatible data, reducing the likelihood of runtime errors and improving code reliability.
+
+Visit the following resources to learn more:
+
+- [@article@Type checking](https://finchtrade.com/glossary/type-checking)

src/data/roadmaps/frontend/content/vercel@kPJ0jZo5AbOzvZgv0zwp0.md

@@ -1,9 +1,9 @@
 # Vercel
 
-Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.
+Vercel is a platform designed for deploying and hosting web applications, particularly those built with modern frontend frameworks and static site generators. It provides features like automatic deployments from Git repositories, serverless functions, and a global content delivery network (CDN) to ensure fast and reliable performance. Vercel simplifies the process of taking a frontend project from development to production.
 
 Visit the following resources to learn more:
 
 - [@official@Vercel Documentation](https://vercel.com/docs)
 - [@official@Vercel Quick Start](https://vercel.com/docs/getting-started-with-vercel)
-- [@video@Vercel Tutorial - Host a Website for Free](https://www.youtube.com/watch?v=Vx5nPGdsFaU)
+- [@video@Vercel Tutorial - Host a Website for Free](https://www.youtube.com/watch?v=Vx5nPGdsFaU)

src/data/roadmaps/frontend/content/web-apis@3HgiMfqihjWceSxd6ei8s.md

@@ -0,0 +1,9 @@
+# Web APIs
+
+Web APIs are interfaces provided by web browsers that allow JavaScript code to interact with the browser environment and the wider web. These APIs provide access to functionalities like manipulating the Document Object Model (DOM), handling user input, making network requests, managing browser history, and accessing device hardware like the camera or microphone. They essentially bridge the gap between JavaScript and the capabilities of the browser and the underlying operating system.
+
+Visit the following resources to learn more:
+
+- [@article@Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
+- [@article@Web APIs - Introduction](https://www.w3schools.com/js/js_api_intro.asp)
+- [@video@What is a Web API?](https://www.youtube.com/watch?v=_7rT-ixivWU)