Migrate content for frontend roadmap

.astro/settings.json

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

src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md

@@ -1,7 +0,0 @@
-# Best Practices
-
-Learn to follow the best practices for writing maintainable and scalable HTML documents.
-
-Visit the following resources to learn more:
-
-- [@opensource@HTML Best Practices](https://github.com/hail2u/html-best-practices)

src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md

@@ -1,14 +0,0 @@
-# Modern JavaScript
-
-ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.
-
-Visit the following resources to learn more:
-
-- [@article@ES6 Tutorial](https://www.javascripttutorial.net/es6/)
-- [@article@W3Schools: Javascript ES6](https://www.w3schools.com/js/js_es6.asp)
-- [@video@Learn Modern JavaScript in 1 Hour](https://www.youtube.com/watch?v=NCwa_xi0Uuc)
-- [@video@JavaScript ES6, ES7, ES8](https://www.youtube.com/watch?v=nZ1DMMsyVyI)
-- [@video@Build 15 JavaScript Projects - Vanilla JavaScript](https://www.youtube.com/watch?v=3PHXvlpOkf4)
-- [@article@Modern JavaScript ES6, ES7 & ES8](https://codeloop.org/learn-modern-javascript-es6-es7-es8)
-- [@article@Easy ES6 Goodies for Busy JavaScript Developers](https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/)
-- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

src/data/roadmaps/frontend/content/103-javascript/104-concepts.md

@@ -1,15 +0,0 @@
-# JavaScript Concepts
-
-Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.
-
-Visit the following resources to learn more:
-
-- [@article@JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
-- [@article@Event Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
-- [@article@Scope in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
-- [@article@Var, Let and Const — Whats the difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)
-- [@article@Inheritance and Prototype Chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
-- [@article@JavaScript Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
-- [@article@JavaScript Visualized (7 Part Series)](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
-- [@video@DOM vs Shadow DOM vs Virtual DOM](https://www.youtube.com/watch?v=7Tok22qxPzQ)
-- [@article@Demystifying JavaScript Promises](https://blog.greenroots.info/series/javascript-promises)

src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md

@@ -1,8 +0,0 @@
-# OOCSS
-
-As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
-
-Visit the following resources to learn more:
-
-- [@official@OOCSS Official Website](http://oocss.org/)
-- [@article@Introduction to Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)

src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md

@@ -1,7 +0,0 @@
-# SMACSS
-
-SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
-
-Visit the following resources to learn more:
-
-- [@official@SMACSS Official Website](http://smacss.com/)

src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md

@@ -1,9 +0,0 @@
-# Less
-
-Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://lesscss.org/)
-- [@article@Official Documentation](https://lesscss.org/usage/)
-- [@video@ Less CSS Pre-Processor Tutorial](https://www.youtube.com/watch?v=YD91G8DdUsw)

src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md

@@ -1,9 +0,0 @@
-# npm Scripts
-
-npm scripts are the entries in the scripts field of the package.json file. The scripts field holds an object where you can specify various commands and scripts that you want to expose.
-
-Visit the following resources to learn more:
-
-- [@article@Introduction to npm scripts](https://www.geeksforgeeks.org/introduction-to-npm-scripts/)
-- [@video@Codevolution: npm scripts](https://www.youtube.com/watch?v=hHt3oVk3XVk)
-- [@feed@Explore top posts about NPM](https://app.daily.dev/tags/npm?ref=roadmapsh)

src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md

@@ -1,10 +0,0 @@
-# Task Runners
-
-Task Runners are tools to simplify certain tedious tasks of development, like automating sass/scss compilation, bundling assets, linting source code, and hot reloading local server. Examples of task runners include Webpack, Grunt, Rollup, and Gulp.
-
-Visit the following resources to learn more:
-
-- [@article@What is a Javascript task runner](https://www.educative.io/answers/what-is-a-javascript-task-runner)
-- [@article@npm script](https://docs.npmjs.com/cli/v8/using-npm/scripts)
-- [@article@yarn script](https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script)
-- [@article@bun script](https://bun.sh/docs/cli/run#run-a-package-json-script)

src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md

@@ -1,8 +0,0 @@
-# StandardJS
-
-Standardjs is a Style guide, with linter & automatic code fixer. It is a way to enforce consistent style in your project. It automatically formats code.
-Standard JS is a tool in the Code Review category of a tech stack.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://standardjs.com/)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md

@@ -1,10 +0,0 @@
-# Redux
-
-Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://redux.js.org/)
-- [@article@Official Getting Started to Redux](https://redux.js.org/introduction/getting-started)
-- [@article@Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
-- [@feed@Explore top posts about Redux](https://app.daily.dev/tags/redux?ref=roadmapsh)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md

@@ -1,9 +0,0 @@
-# MobX
-
-MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
-
-Visit the following resources to learn more:
-
-- [@article@MobX Official Website](https://mobx.js.org/)
-- [@video@Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md

@@ -1,10 +0,0 @@
-# Recoil
-
-Recoil is a new state management library built by the Facebook team that simplifies global state management.
-
-Visit the following resources to learn more:
-
-- [@article@Recoil Official Website](https://recoiljs.org/)
-- [@article@Official Documentation](https://recoiljs.org/docs/introduction/getting-started)
-- [@video@Learn the basics of Recoil.js](https://www.youtube.com/watch?v=BchtCWxs7sA)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md

@@ -1,11 +0,0 @@
-# RxJS
-
-RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.
-
-Visit the following resources to learn more:
-
-- [@official@RxJS Official Website](https://rxjs.dev/guide/overview)
-- [@article@RxJS Angular Docs](https://angular.io/guide/rx-library)
-- [@video@RxJS Crash Course](https://www.youtube.com/watch?v=PhggNGsSQyg)
-- [@video@RxJS Quick Start](https://www.youtube.com/watch?v=2LCo926NFLI)
-- [@feed@Explore top posts about RxJS](https://app.daily.dev/tags/rxjs?ref=roadmapsh)

src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md

@@ -1,9 +0,0 @@
-# NgRx
-
-NgRx is an open source library that provides reactive state management for your Angular applications
-
-Visit the following resources to learn more:
-
-- [@official@Official Documentation](https://ngrx.io/docs)
-- [@video@Angular NgRx Redux Quick Start Tutorial](https://www.youtube.com/watch?v=2LCo926NFLI)
-- [@video@NgRx Course](https://www.youtube.com/watch?v=nuHBHD32iw8)

src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md

@@ -1,7 +0,0 @@
-# Pinia
-
-Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js devtools), inferred typed state even in javascript and more. In Pinia you can access, mutate, replace, use getters that works like computed, use actions, etc. The library is recommended by the official Vue.js documentation.
-
-Visit the following resources to learn more:
-
-- [@article@Official Documentation](https://pinia.vuejs.org/)

src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md

@@ -1,10 +0,0 @@
-# Styled components
-
-Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://styled-components.com/)
-- [@article@Official Docs](https://styled-components.com/docs)
-- [@video@Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw)
-- [@feed@Explore top posts about Styled Components](https://app.daily.dev/tags/styled-components?ref=roadmapsh)

src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md

@@ -1,10 +0,0 @@
-# CSS Modules
-
-CSS files in which all class names and animation names are scoped locally by default.
-
-Visit the following resources to learn more:
-
-- [@opensource@Project GitHub Repository](https://github.com/css-modules/css-modules)
-- [@article@Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87)
-- [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s)
-- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)

src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md

@@ -1,9 +0,0 @@
-# Styled JSX
-
-Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
-
-Visit the following resources to learn more:
-
-- [@opensource@Getting started](https://github.com/vercel/styled-jsx)
-- [@video@Styled JSX in Next.js: Master Next.js](https://www.youtube.com/watch?v=SM5uVbfgfdo)
-- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh)

src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md

@@ -1,8 +0,0 @@
-# Emotion
-
-Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website and Docs](https://emotion.sh/docs/introduction)
-- [@video@Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA)

src/data/roadmaps/frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md

@@ -1,10 +0,0 @@
-# Bootstrap
-
-Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
-
-Visit the following resources to learn more:
-
-- [@article@Bootstrap Website](https://getbootstrap.com)
-- [@article@Bootstrap Official Blog](https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/)
-- [@video@Bootstrap CSS Framework - Full Course for Beginners](https://www.youtube.com/watch?v=-qfEOE4vtxE)
-- [@feed@Explore top posts about Bootstrap](https://app.daily.dev/tags/bootstrap?ref=roadmapsh)

src/data/roadmaps/frontend/content/114-css-frameworks/114-css-first/101-bulma.md

@@ -1,11 +0,0 @@
-# Bulma
-
-Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
-
-Visit the following resources to learn more:
-
-- [@official@Bulma Website](https://bulma.io/)
-- [@course@Learn Bulma CSS](https://scrimba.com/learn/bulma)
-- [@article@How To Build A ? Responsive Blog Design With Bulma CSS](https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b)
-- [@video@Bulma CSS Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a)
-- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)

src/data/roadmaps/frontend/content/114-css-frameworks/114-css-first/index.md

@@ -1 +0,0 @@
-# Css first

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md

@@ -1,11 +0,0 @@
-# Chakra UI
-
-Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
-
-Visit the following resources to learn more:
-
-- [@article@Chakra UI Website](https://chakra-ui.com/)
-- [@article@Chakra UI Official Getting Started](https://chakra-ui.com/docs/getting-started)
-- [@article@Why You Should Start Using Chakra UI](https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/)
-- [@video@Official Getting Started Video](https://youtu.be/wI2vqXsjsIo)
-- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/102-material-ui.md

@@ -1,9 +0,0 @@
-# Material UI
-
-Material-UI is an open-source framework that features React components that implement Google’s Material Design.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://mui.com/material-ui/)
-- [@article@Official Documentation](https://mui.com/material-ui/getting-started/)
-- [@video@Material UI React Tutorial](https://www.youtube.com/watch?v=o1chMISeTC0)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md

@@ -1,8 +0,0 @@
-# Radix UI
-
-An open-source UI component library for building high-quality, accessible design systems and web apps.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://www.radix-ui.com/)
-- [@article@Official Documentation](https://www.radix-ui.com/docs/primitives/overview/introduction)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/103-shadcn-ui.md

@@ -1,6 +0,0 @@
-# Shadcn UI
-
-Shadcn UI are beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. They are built with Tailwind CSS and Radix UI.
-
-- [@official@Official Shadcn UI Website](https://ui.shadcn.com/)
-- [@opensource@Official GitHub Repository](https://github.com/shadcn-ui/ui)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/104-mantine.md

@@ -1,9 +0,0 @@
-# Mantine
-
-Mantine is a React components library with more than 100 customizable components and 40 hooks to cover you in any situation.
-
-Visit the following resources to learn more:
-
-- [@official@Mantine Website](https://mantine.dev/)
-- [@official@Usage with Create React App](https://mantine.dev/guides/cra/)
-- [@article@5 Mantine Hooks for UI management](https://blog.logrocket.com/5-mantine-hooks-simplifying-ui-management-react/)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/105-daisy-ui.md

@@ -1,8 +0,0 @@
-# Daisy UI
-
-Component library around Tailwind CSS that comes with several built-in components.
-
-Visit the following resources to learn more:
-
-- [@official@DaisyUI Website](https://daisyui.com/)
-- [@official@DaisyUI Documentation](https://daisyui.com/docs/install/)

src/data/roadmaps/frontend/content/114-css-frameworks/114-js-first/index.md

@@ -1 +0,0 @@
-# Js first

src/data/roadmaps/frontend/content/114-css-frameworks/index.md

@@ -1,9 +0,0 @@
-# CSS frameworks
-
-A CSS framework provides the user with a fully functional CSS stylesheet, allowing them to create a web page by simply coding the HTML with appropriate classes, structure, and IDs. Classes for popular website features like as the footer, slider, navigation bar, hamburger menu, column-based layouts, and so on are already included in the framework.
-
-Visit the following resources to learn more:
-
-- [@article@CSS Frameworks Introduction](https://en.wikipedia.org/wiki/CSS_framework)
-- [@article@What are the benefits of using a css framework](https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/)
-- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)

src/data/roadmaps/frontend/content/115-testing-your-apps/101-react-testing-library.md

@@ -1,8 +0,0 @@
-# React Testing Library
-
-The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
-
-Visit the following resources to learn more:
-
-- [@article@React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/frontend/content/115-testing-your-apps/104-other-options.md

@@ -1 +0,0 @@
-# Other options

src/data/roadmaps/frontend/content/115-testing-your-apps/105-mocha.md

@@ -1,9 +0,0 @@
-# Mocha
-
-Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website and Docs](https://mochajs.org/)
-- [@video@Testing Node.js with Mocha](https://www.youtube.com/watch?v=Bs68k6xfR3E)
-- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/frontend/content/115-testing-your-apps/106-chai.md

@@ -1,9 +0,0 @@
-# Chai
-
-Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website and Docs](https://www.chaijs.com/)
-- [@article@Official Docs](https://www.chaijs.com/guide/)
-- [@video@Intro To JavaScript Unit Testing With Mocha JS & Chai](https://www.youtube.com/watch?v=MLTRHc5dk6s)

src/data/roadmaps/frontend/content/115-testing-your-apps/107-ava.md

@@ -1,9 +0,0 @@
-# Ava
-
-Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.
-
-Visit the following resources to learn more:
-
-- [@opensource@Official Repository](https://github.com/avajs/ava)
-- [@article@Testing your Node.js applications with Ava.js](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)
-- [@video@AVA Tutorial](https://www.youtube.com/watch?v=RxLW6-3dk5A)

src/data/roadmaps/frontend/content/115-testing-your-apps/108-jasmine.md

@@ -1,10 +0,0 @@
-# Jasmine
-
-Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://jasmine.github.io/)
-- [@article@Official Docs](https://jasmine.github.io/pages/docs_home.html)
-- [@opensource@Official Repository](https://github.com/jasmine/jasmine)
-- [@video@Javascript Unit Testing with Jasmine](https://www.youtube.com/watch?v=rw4KlxKEENQ)

src/data/roadmaps/frontend/content/116-type-checkers/101-flow.md

@@ -1,9 +0,0 @@
-# Flow
-
-Flow is a static type checker, designed to find type errors in JavaScript programs.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://flow.org/)
-- [@official@Official Documentation](https://flow.org/en/docs/)
-- [@video@Flow for Beginners](https://www.youtube.com/watch?v=0HlqX4lQZas)

src/data/roadmaps/frontend/content/118-server-side-rendering/100-react-js/101-after-js.md

@@ -1,9 +0,0 @@
-# After.js
-
-After.js is an open-source JavaScript framework for developing SSR (Server Side Rendering) based applications. It is similar to the Next.js framework for server-rendered React apps but uses React Router instead of a folder structure based router like Next.js
-
-Visit the following resources to learn more:
-
-- [@opensource@Official GitHub repository](https://github.com/jaredpalmer/after.js)
-- [@article@Documentation](https://www.npmjs.com/package/@jaredpalmer/after)
-- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

src/data/roadmaps/frontend/content/118-server-side-rendering/101-angular/100-universal.md

@@ -1,7 +0,0 @@
-# Angular Universal
-
-The Angular Universal project is a community driven project to expand on the core APIs from Angular (platform-server) to enable developers to do the server side rendering of Angular applications. It mainly uses express to render pages on pages on node.js server.
-
-Visit the following resources to learn more:
-
-- [@article@Server-side rendering (SSR) with Angular Universal](https://angular.io/guide/universal)

src/data/roadmaps/frontend/content/120-static-site-generators/101-gatsbyjs.md

@@ -1,12 +0,0 @@
-# Gatsby
-
-Gatsby is a React-based open source framework with performance, scalability and security built-in.
-
-Visit the following resources to learn more:
-
-- [@official@Gatsby Website](https://www.gatsbyjs.com/)
-- [@official@Gatsby Docs](https://www.gatsbyjs.com/docs)
-- [@video@Gatsby Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB)
-- [@article@Getting Started with Gatsby, the Cloud Native Static Site Generator](https://thenewstack.io/getting-started-with-gatsby-the-cloud-native-static-site-generator/)
-- [@article@Static Site Revolution: Top Websites Built with Gatsby](https://thenewstack.io/static-site-revolution-top-websites-built-with-gatsby/)
-- [@feed@Explore top posts about Gatsby](https://app.daily.dev/tags/gatsby?ref=roadmapsh)

src/data/roadmaps/frontend/content/120-static-site-generators/104-jekyll.md

@@ -1,9 +0,0 @@
-# Jekyll
-
-Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
-
-Visit the following resources to learn more:
-
-- [@article@Jekyll Website](https://jekyllrb.com/)
-- [@article@Jekyll Docs](https://jekyllrb.com/docs/)
-- [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)

src/data/roadmaps/frontend/content/120-static-site-generators/105-hugo.md

@@ -1,10 +0,0 @@
-# Hugo
-
-Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang) and developed by bep, spf13 and friends.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://gohugo.io/)
-- [@article@Official Docs for Getting Started](https://gohugo.io/documentation/)
-- [@video@Introduction to Hugo - Static Site Generator ](https://www.youtube.com/watch?v=qtIqKaDlqXo&list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3)
-- [@article@Tutorial: Use Hugo to Generate a Static Website](https://thenewstack.io/tutorial-use-hugo-to-generate-a-static-website/)

src/data/roadmaps/frontend/content/120-static-site-generators/106-gridsome.md

@@ -1,8 +0,0 @@
-# Gridsome
-
-Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default.
-
-Visit the following resources to learn more:
-
-- [@official@Gridsome Website](https://gridsome.org/)
-- [@official@Gridsome Documentation](https://gridsome.org/docs/)

src/data/roadmaps/frontend/content/120-static-site-generators/108-remix.md

@@ -1,8 +0,0 @@
-# Remix
-
-Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://remix.run/)
-- [@official@Official Docs for Getting Started](https://remix.run/docs/en/v1#getting-started)

src/data/roadmaps/frontend/content/121-mobile-applications/101-nativescript.md

@@ -1,10 +0,0 @@
-# NativeScript
-
-NativeScript is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://nativescript.org/)
-- [@article@Official Getting Started to NativeScript](https://docs.nativescript.org/)
-- [@video@NativeScript Tutorial for Beginners](https://www.youtube.com/watch?v=DcCSq2Y9bow)
-- [@feed@Explore top posts about NativeScript](https://app.daily.dev/tags/nativescript?ref=roadmapsh)

src/data/roadmaps/frontend/content/122-desktop-applications/101-carlo.md

@@ -1,8 +0,0 @@
-# Carlo
-
-Carlo is a headful Node app framework for building desktop applications.
-
-Visit the following resources to learn more:
-
-- [@opensource@Github Repository](https://github.com/GoogleChromeLabs/carlo)
-- [@article@Carlo development on a web server](https://blog.agney.dev/carlo-on-web-server/)

src/data/roadmaps/frontend/content/123-bonus-content.md

@@ -1,18 +0,0 @@
-# Bonus Content
-
-It is not required to complete the bonus content, it just expands on the topics covered in the roadmap and has the items which were missed in the roadmap. Go through them if you want.
-
-**UI / UX Knowledge** - Gaining UI/UX knowledge is not a must for a Frontend Developer but having an eye for design and a good understanding of UI/UX will help you in your career.
-
-**[Design Systems](/design-system)** - Learn how to create and work with design systems.
-
-- **Visual Programming** — it is entirely possible to be a successful, competent frontend developer without it, but for many frontend developers this path represents a serious chunk of their workload, and represents a very in-demand option for frontend development – especially for developers who have a visual aptitude.
-  - **For Animations**: [GSAP](https://greensock.com/gsap/), [Lottie](https://airbnb.design/lottie/), [Framer Motion](https://github.com/framer/motion) or [MoJs](https://mojs.github.io/)
-  - **Web Graphics Library (WebGL)**: [WebGL MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)
-  - **2D Graphics**: [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [PixiJS](https://pixijs.com/), [PhaserJS](https://phaser.io/)
-  - **3D Graphics**: [ThreeJS](https://threejs.org/), [BabylonJS](https://www.babylonjs.com/)
-- Have a look at [Qwik](https://qwik.builder.io/) and **[Partytown](https://partytown.builder.io/)**.
-- [@article@Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini) — Here is a good [introductory article to houdini](https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/).
-- **[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)** - WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
-- **[IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL)** - Not every developer will have a need for understanding [IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL) but there's a good argument for having more JavaScript developers aware of their existence and hopefully the ability for making use of them as well.
-- **[WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)** - WebAssembly is a comparatively new technology that allows you to run code written in languages other than JavaScript on the web. It's a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web.

src/data/roadmaps/frontend/content/astro@wA2fSYsbBYU02VJXAvUz8.md

@@ -0,0 +1,15 @@
+# Astro
+
+Astro is an all-in-one web framework for building fast, content-focused websites. Astro combines the power of a modern component-based framework with the performance and flexibility of a static site generator.
+
+- Component Islands: A new web architecture for building faster websites.
+- Server-first API design: Move expensive hydration off of your users’ devices.
+- Zero JS, by default: No JavaScript runtime overhead to slow you down.
+- Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.
+- Customizable: Tailwind, MDX, and 100+ other integrations to choose from.
+- UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.
+
+Visit the following resources to learn more:
+
+- [@official@Official Astro Website](https://astro.build/)
+- [@article@Official Astro Docs](https://docs.astro.build/)