From 35d38f654fe69718caaea0ba8f22a78d4a701abf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 26 Sep 2024 18:14:56 +0600 Subject: [PATCH 01/51] chore: update roadmap content json (#7234) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com> --- public/roadmap-content/android.json | 30 +++++++++++++++++++++++++---- public/roadmap-content/redis.json | 10 ++++++++-- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/public/roadmap-content/android.json b/public/roadmap-content/android.json index 50216cd62..f3885718c 100644 --- a/public/roadmap-content/android.json +++ b/public/roadmap-content/android.json @@ -535,13 +535,35 @@ }, "GWq3s1iTxQOp1BstHscJ9": { "title": "DataStore", - "description": "`DataStore` is a new and improved data storage solution by Android, meant to supersede `SharedPreferences`. It is important to understand that it comes in two different implementations: `Preferences DataStore` and `Proto DataStore`. `Preferences DataStore` uses key-value pairs similar to `SharedPreferences`, but it's more robust and handles runtime exceptions more efficiently. On the other hand, `Proto DataStore` uses custom data types to provide type safety. It lets you leverage the power of Protocol Buffers, a language-neutral, platform-neutral mechanism for serializing structured data, as the data storage format. Operating on data in `DataStore` is transactional, meaning that if an error occurs during an operation, all changes are rolled back, so the data remains in a consistent state.", - "links": [] + "description": "`DataStore` is a new and improved data storage solution by Android, meant to supersede `SharedPreferences`. It is important to understand that it comes in two different implementations: `Preferences DataStore` and `Proto DataStore`. `Preferences DataStore` uses key-value pairs similar to `SharedPreferences`, but it's more robust and handles runtime exceptions more efficiently. On the other hand, `Proto DataStore` uses custom data types to provide type safety. It lets you leverage the power of Protocol Buffers, a language-neutral, platform-neutral mechanism for serializing structured data, as the data storage format. Operating on data in `DataStore` is transactional, meaning that if an error occurs during an operation, all changes are rolled back, so the data remains in a consistent state.\n\nVisit the following resources to learn more:", + "links": [ + { + "title": "Documentation", + "url": "https://developer.android.com/topic/libraries/architecture/datastore", + "type": "article" + }, + { + "title": "Introduction to DataStore", + "url": "https://www.youtube.com/watch?v=9ws-cJzlJkU&list=PLWz5rJ2EKKc8to3Ere-ePuco69yBUmQ9C", + "type": "video" + } + ] }, "Bfg4So5RlI09zFNcburJd": { "title": "Room Database", - "description": "\"Room\" is a persistence library introduced by Google that provides an abstraction layer over SQLite to help with robust database access while harnessing the full power of SQLite. Room supports the creation of databases and defines queries in compile-time-checked SQL strings. These databases belong to the data classes that you create representing your app's data. Room comprises three main components: **Database**, a container that holds your app's data tables; **Entity**, representing a table within the database; and **DAO (Data Access Object)**, containing SQL query methods to interact with the database.", - "links": [] + "description": "\"Room\" is a persistence library introduced by Google that provides an abstraction layer over SQLite to help with robust database access while harnessing the full power of SQLite. Room supports the creation of databases and defines queries in compile-time-checked SQL strings. These databases belong to the data classes that you create representing your app's data. Room comprises three main components: **Database**, a container that holds your app's data tables; **Entity**, representing a table within the database; and **DAO (Data Access Object)**, containing SQL query methods to interact with the database.\n\nVisit the following resources to learn more:", + "links": [ + { + "title": "Save data in a local database using Room", + "url": "https://developer.android.com/training/data-storage/room", + "type": "article" + }, + { + "title": "The full beginner guide for Room in Android", + "url": "https://www.youtube.com/watch?v=bOd3wO0uFr8&t=10s", + "type": "video" + } + ] }, "A4kdaj6AFueUgPI7hwKi5": { "title": "File System", diff --git a/public/roadmap-content/redis.json b/public/roadmap-content/redis.json index 2505a33d0..7d62b734c 100644 --- a/public/roadmap-content/redis.json +++ b/public/roadmap-content/redis.json @@ -1,8 +1,14 @@ { "-3pADOHMDQ0H6ZKNjURyn": { "title": "What is Redis?", - "description": "", - "links": [] + "description": "Redis is an open-source, in-memory data structure store, primarily used as a database, cache, and message broker. It supports various data structures like strings, hashes, lists, sets, and sorted sets, making it highly versatile. Redis operates with extremely low latency due to its in-memory nature, enabling fast access to data. It is often used in real-time applications such as session management, leaderboards, or caching mechanisms, where quick data retrieval is critical. Additionally, Redis supports data persistence by periodically writing the dataset to disk, balancing memory speed with data reliability.\n\nVisit the following resources to learn more:", + "links": [ + { + "title": "What is redis?", + "url": "https://redis.io/docs/latest/get-started/", + "type": "article" + } + ] }, "M-EXrTDeAEMz_IkEi-ab4": { "title": "In-memory Data Structure Store", From 4df18147694b177682a1fd1489e8adc971987851 Mon Sep 17 00:00:00 2001 From: Mark Date: Thu, 26 Sep 2024 20:27:42 +0800 Subject: [PATCH 02/51] Fix link in Nodejs roadmap - NestJS section (#7239) --- .../roadmaps/nodejs/content/nestjs@tGD8XLHnfspfv8CbguGwV.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/roadmaps/nodejs/content/nestjs@tGD8XLHnfspfv8CbguGwV.md b/src/data/roadmaps/nodejs/content/nestjs@tGD8XLHnfspfv8CbguGwV.md index 64f82f8e9..a4c8b9923 100644 --- a/src/data/roadmaps/nodejs/content/nestjs@tGD8XLHnfspfv8CbguGwV.md +++ b/src/data/roadmaps/nodejs/content/nestjs@tGD8XLHnfspfv8CbguGwV.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@NestJS Website](https://nestjs.com) - [@article@NestJS Official Documentations](https://docs.nestjs.com) - [@video@Beginner NestJS Tutorial](https://www.youtube.com/watch?v=GHTA143_b-s) -- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) +- [@feed@Explore top posts about NestJS](https://app.daily.dev/tags/nestjs?ref=roadmapsh) From c0b13377554384e8ad500eedeff701a4e2b86ac5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 27 Sep 2024 06:19:27 +0600 Subject: [PATCH 03/51] chore: update roadmap content json (#7241) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com> --- public/roadmap-content/nodejs.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/roadmap-content/nodejs.json b/public/roadmap-content/nodejs.json index 43c4a3de7..0c590de47 100644 --- a/public/roadmap-content/nodejs.json +++ b/public/roadmap-content/nodejs.json @@ -1244,8 +1244,8 @@ "type": "article" }, { - "title": "Explore top posts about JavaScript", - "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh", + "title": "Explore top posts about NestJS", + "url": "https://app.daily.dev/tags/nestjs?ref=roadmapsh", "type": "article" }, { From b29d8150c71dba373542bc5f355bbadf59b9e91e Mon Sep 17 00:00:00 2001 From: Brian Rodriguez Date: Fri, 27 Sep 2024 04:05:32 -0500 Subject: [PATCH 04/51] [Add] Android docs: SharedPreferences & JUnit (#7243) --- .../android/content/junit@gvGAwjk_nhEgxzZ_c3f6b.md | 7 ++++++- .../content/shared-preferences@PKql1HY0PLMfp50FRELXL.md | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/data/roadmaps/android/content/junit@gvGAwjk_nhEgxzZ_c3f6b.md b/src/data/roadmaps/android/content/junit@gvGAwjk_nhEgxzZ_c3f6b.md index d5bfb6e53..965bc5c85 100644 --- a/src/data/roadmaps/android/content/junit@gvGAwjk_nhEgxzZ_c3f6b.md +++ b/src/data/roadmaps/android/content/junit@gvGAwjk_nhEgxzZ_c3f6b.md @@ -1,3 +1,8 @@ # JUnit -JUnit is a popular testing framework for Java programming. It forms the basis for many other testing libraries and tools in the Android ecosystem, making it important for any Android developer to become familiar with. The basic use of JUnit involves annotations such as `@Test`, indicating methods that represent a single test case. Other useful features include `@Before` and `@After` which allow for setup and teardown processes to be defined clearly. Another powerful feature in JUnit is the ability to create parameterized tests, effectively running the same test multiple times with different inputs. \ No newline at end of file +**JUnit** is a popular testing framework for Java programming. It forms the basis for many other testing libraries and tools in the Android ecosystem, making it important for any Android developer to become familiar with. The basic use of JUnit involves annotations such as `@Test`, indicating methods that represent a single test case. Other useful features include `@Before` and `@After` which allow for setup and teardown processes to be defined clearly. Another powerful feature in JUnit is the ability to create parameterized tests, effectively running the same test multiple times with different inputs. + +Visit the following resources to learn more: + +- [@official@Documentation](https://developer.android.com/training/testing/local-tests) +- [@video@Junit for android](https://www.youtube.com/watch?v=jE1vQGVHaQA) diff --git a/src/data/roadmaps/android/content/shared-preferences@PKql1HY0PLMfp50FRELXL.md b/src/data/roadmaps/android/content/shared-preferences@PKql1HY0PLMfp50FRELXL.md index 7cf6e9dd8..e710c21fe 100644 --- a/src/data/roadmaps/android/content/shared-preferences@PKql1HY0PLMfp50FRELXL.md +++ b/src/data/roadmaps/android/content/shared-preferences@PKql1HY0PLMfp50FRELXL.md @@ -1,3 +1,8 @@ # Shared Preferences -Shared Preferences in Android are used to store data in key-value pairs. It works similar to a tiny database where you can save small pieces of data such as settings or the state of an application. When data is saved to Shared Preferences, it persists across user sessions, even if your application is killed or gets deleted. Data in Shared Preferences is not typically used for large amounts of data. To perform actions such as saving, retrieving, or editing data in Shared Preferences, you use an instance of `SharedPreferences.Editor`. \ No newline at end of file +Shared Preferences in Android are used to store data in **key-value** pairs. It works similar to a tiny database where you can save small pieces of data such as settings or the state of an application. When data is saved to Shared Preferences, it persists across user sessions, even if your application is killed or gets deleted. Data in Shared Preferences is not typically used for large amounts of data. To perform actions such as saving, retrieving, or editing data in Shared Preferences, you use an instance of `SharedPreferences.Editor`. + +Visit the following resources to learn more: + +- [@official@Documentation](https://developer.android.com/training/data-storage/shared-preferences) +- [@video@SharedPreferences in Android](https://www.youtube.com/watch?v=rJ3uwqko9Ew) From 88b830c862145f60cc379d861895612c6ca8d805 Mon Sep 17 00:00:00 2001 From: dsh Date: Fri, 27 Sep 2024 11:23:55 +0100 Subject: [PATCH 05/51] added provisioning content and links (#7246) --- .../content/provisioning@1oYvpFG8LKT1JD6a_9J0m.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/data/roadmaps/devops/content/provisioning@1oYvpFG8LKT1JD6a_9J0m.md b/src/data/roadmaps/devops/content/provisioning@1oYvpFG8LKT1JD6a_9J0m.md index d271fe768..3262edcaa 100644 --- a/src/data/roadmaps/devops/content/provisioning@1oYvpFG8LKT1JD6a_9J0m.md +++ b/src/data/roadmaps/devops/content/provisioning@1oYvpFG8LKT1JD6a_9J0m.md @@ -1,9 +1,9 @@ -# Prometheus +# Provisioning -Prometheus is an open-source systems monitoring and alerting toolkit designed for reliability and scalability. It features a multi-dimensional data model, a flexible query language (PromQL), and an efficient time series database. Prometheus collects metrics from configured targets at given intervals, evaluates rule expressions, displays results, and can trigger alerts when specified conditions are observed. It operates on a pull model, scraping metrics from HTTP endpoints, and supports service discovery for dynamic environments. Prometheus is particularly well-suited for monitoring microservices and containerized environments, integrating seamlessly with systems like Kubernetes. Its ecosystem includes various exporters for third-party systems and a built-in alert manager. Widely adopted in cloud-native architectures, Prometheus is a core component of modern observability stacks, often used alongside tools like Grafana for visualization. +Provisioning refers to the process of setting up and configuring the necessary IT infrastructure to support an application or service. This includes allocating and preparing resources such as servers, storage, networking, and software environments. Provisioning can be done manually, but in modern DevOps practices, it's typically automated using tools like Terraform, Pulumi, or CloudFormation. These tools allow for infrastructure-as-code, where the entire provisioning process is defined in version-controlled scripts or templates. This approach enables consistent, repeatable deployments across different environments, reduces human error, and facilitates rapid scaling and disaster recovery. -Visit the following resources to learn more: +Learn more from the following resources: -- [@official@Prometheus Website](https://prometheus.io/) -- [@video@Introduction to the Prometheus Monitoring System | Key Concepts and Features](https://www.youtube.com/watch?v=STVMGrYIlfg) -- [@feed@Explore top posts about Prometheus](https://app.daily.dev/tags/prometheus?ref=roadmapsh) +- [@article@What is provisioning? - RedHat](https://www.redhat.com/en/topics/automation/what-is-provisioning) +- [@article@What is provisioning? - IBM](https://www.ibm.com/topics/provisioning) +- [@video@Open Answers: What is provisioning?](https://www.youtube.com/watch?v=hWvDlmhASpk) \ No newline at end of file From 67475b1b6d62b824548c14e65452020e1d7135bf Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 27 Sep 2024 22:06:32 +0800 Subject: [PATCH 06/51] Fix article link for Knexjs should be official (#7247) --- src/data/roadmaps/nodejs/content/knex@HDDnt79_PCB5JU-KnHKUh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/roadmaps/nodejs/content/knex@HDDnt79_PCB5JU-KnHKUh.md b/src/data/roadmaps/nodejs/content/knex@HDDnt79_PCB5JU-KnHKUh.md index 65bbf31ba..9c33b2396 100644 --- a/src/data/roadmaps/nodejs/content/knex@HDDnt79_PCB5JU-KnHKUh.md +++ b/src/data/roadmaps/nodejs/content/knex@HDDnt79_PCB5JU-KnHKUh.md @@ -4,5 +4,5 @@ Knex.js is a "batteries included" SQL query builder for PostgreSQL, CockroachDB, Visit the following resources to learn more: -- [@article@Knex.js Docs](https://knexjs.org) +- [@official@Knex.js Docs](https://knexjs.org) - [@feed@Explore top posts about Node.js](https://app.daily.dev/tags/nodejs?ref=roadmapsh) From 8e9d1df3d285e3b2422beb6b1d3c12c34c1e1963 Mon Sep 17 00:00:00 2001 From: dsh Date: Fri, 27 Sep 2024 15:14:47 +0100 Subject: [PATCH 07/51] Add hacktoberfest contribution docs (#7217) * initial hacktoberfest contribution points * added note --- contributing.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/contributing.md b/contributing.md index df86e35a0..1bd29b362 100644 --- a/contributing.md +++ b/contributing.md @@ -2,12 +2,67 @@ First of all, thank you for considering to contribute. Please look at the details below: +- [Hacktoberfest Contributions](#hacktoberfest-contributions) - [New Roadmaps](#new-roadmaps) - [Existing Roadmaps](#existing-roadmaps) - [Adding Projects](#adding-projects) - [Adding Content](#adding-content) - [Guidelines](#guidelines) +## Hacktoberfest Contributions + +We are taking part in [Hacktoberfest 11](https://hacktoberfest.com/)! + +Before you start to contribute to our project in order to satisfy [Hacktoberfest requirements](https://hacktoberfest.com/participation/#contributors), please bare in mind the following: + +* There is not a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq). +* There is not an infinite opportunity to contribute to the roadmap.sh project. + +### Hacktoberfest Specific Contribution rules + +As Hacktoberfest attracts a lot of contributors (which is awesome), it does require a more rigid and strictly enforced set of guidelines than the average contribution. + +These are as follows: + +1. No single file contributions, please contribute to a minimum of two. + +Whilst single file contributions, such as adding one link to a single topic, is perfectly fine outside of hacktoberfest, this can (and probably will) result it an easy 4 pull requests for everyone and we will just become a Hacktoberfest farming project. + +***Note: If you contribute the entire contents of a topic i.e. the topic has 0 copy and 0 links, this will count.*** + +2. Typo fixes will not count (by themselves). + +Whilst fixing typos is a great thing to do, lets bundle them in with actual contributions if we see them! + +3. The same basic rules apply. + +- Content must be in English. +- Maximum of 8 links per topic. +- Follow the below style guide for content. + +Here is an example of a **fully complete** topic: + +```markdown +# Redis + +Redis is an open-source, in-memory data structure store known for its speed and versatility. It supports various data types, including strings, lists, sets, hashes, and sorted sets, and provides functionalities such as caching, session management, real-time analytics, and message brokering. Redis operates as a key-value store, allowing for rapid read and write operations, and is often used to enhance performance and scalability in applications. It supports persistence options to save data to disk, replication for high availability, and clustering for horizontal scaling. Redis is widely used for scenarios requiring low-latency access to data and high-throughput performance. + +Learn more from the following resources: + +[@official@Link 1](https:/google.com) +[@article@Link 2](https:/google.com) +[@article@Link 3](https:/google.com) +[@course@Link 4](https:/google.com) +[@course@Link 5](https:/google.com) +[@video@Link 6](https:/google.com) +[@video@Link 7](https:/google.com) +[@video@Link 8](https:/google.com) +``` + +Contributions to the project that meet these requirements will be given the label `hacktoberfest-accepted` and merged, contributions that do not meet the requirements will simply be closed. + +Any attempts at spam PRs will be given the `spam` tag. If you recieve 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam). + ## New Roadmaps For new roadmaps, you can either: From f2bc4548babb2b6ce66af55e87db1c37091c244e Mon Sep 17 00:00:00 2001 From: dsh Date: Fri, 27 Sep 2024 15:15:14 +0100 Subject: [PATCH 08/51] Cleanup frontend roadmap links (#7026) * cleaning up FE links * astro topics * 52 topics completed * finish updating fe content * correct angular site link * webpack topic --------- Co-authored-by: Kamran Ahmed --- .../accessibility@iJIqi7ngpGHWAqtgdjgxB.md | 4 +--- .../content/angular@-bHFIiXnoUQSov64WI9yo.md | 2 +- .../content/angular@k6rp6Ua9qUEW_DA_fOg5u.md | 5 +++-- .../content/apollo@5eUbDdOTOfaOhUlZAmmXW.md | 7 +++--- .../content/astro@iUxXq7beg55y76dkwhM13.md | 14 ++++-------- .../content/astro@wA2fSYsbBYU02VJXAvUz8.md | 14 ++++-------- .../content/bem@dRDmS072xeNLX7p_X565w.md | 7 +++--- .../bitbucket@DILBiQp7WWgSZ5hhtDW6A.md | 2 +- ...and-how-they-work@P82WFaTPgQEPNp5IIuZ1Y.md | 5 ++--- .../build-tools@i9z0stM4uKu27Cz6NIgNX.md | 10 ++++----- ...t-security-policy@rmcm0CZbtNVC9LZ14-H6h.md | 2 +- .../content/cors@AfH2zCbqzw0Nisg1yyISS.md | 3 +-- .../credentials@opu2bAsmdWHqWqtsCscLC.md | 7 ++---- .../css-architecture@nPg_YWpMJtlhU2t2UD_6B.md | 8 +++---- ...css-preprocessors@UTW1pP59dUehuf0zeHXqL.md | 2 +- .../content/css@ZhJhf1M2OphYbEmduFq-9.md | 7 +++--- .../custom-elements@VxiQPgcYDFAT6WgSRWpIA.md | 1 + .../content/cypress@DaynCz5RR26gjT6N6gTDL.md | 2 +- .../desktop-apps@KMA7NkxFbPoUDtFnGBFnj.md | 7 +----- ...evice-orientation@Fd0hQh1DleM0gMzCpGou4.md | 7 ++---- ...-and-how-it-works@hkxw9jPGYphmjhTjw8766.md | 5 +---- .../content/electron@mQHpSyMR4Rra4mqAslgiS.md | 6 ++--- .../content/eleventy@io0RHJWIcVxDhcYkV9d38.md | 4 ++-- .../content/esbuild@4W7UXfdKIUsm1bUrjdTVT.md | 7 +++--- .../content/eslint@NFjsI712_qP0IOmjuqXar.md | 4 ++-- ...tch-api--ajax-xhr@A4brX0efjZ0FFPTB4r6U0.md | 2 +- .../content/flutter@2MRvAK9G9RGM_auWytcKh.md | 5 ++--- .../content/flutter@dIQXjFEUAJAGxxfAYceHU.md | 16 +++----------- .../content/git@R_I4SGYqLk5zze5I1zS_E.md | 4 ++-- .../content/github@qmTVMJDsEhNIkiwE_UTYu.md | 10 ++++----- .../content/gitlab@zIoSJMX3cuzCgDYHjgbEh.md | 6 ++--- .../content/graphql@L7AllJfKvClaam3y-u6DP.md | 5 ++--- ...the-internet-work@yCnn-NfSxIybUQ2iTuUGq.md | 5 ++--- .../html-templates@Hk8AVonOd693_y1sykPqd.md | 1 + .../content/html@yWG2VUkaF5IJVVut6AiSy.md | 2 +- .../content/https@uum7vOhOUR38vLuGZy8Oa.md | 5 +---- .../content/internet@VlNNwIEDWqQXtqkHWJYzC.md | 12 +--------- .../content/ionic@xmRv6-L45m5MDpHmdHFCL.md | 8 +++---- .../javascript@ODcfFEorkfJNupoQygM53.md | 3 +-- .../content/jest@g5itUjgRXd9vs9ujHezFl.md | 5 ++--- ...-dom-manipulation@0MAogsAID9R04R5TTO2Qa.md | 3 --- .../learn-the-basics@PCirR2QiFYO89Fm-Ev3o1.md | 2 +- .../learn-the-basics@YFjzPKWDwzrgk2HUX952L.md | 2 -- .../learn-the-basics@wQSjQqwKHfn5RGPk34BWI.md | 3 +-- ...rs-and-formatters@9VcGfDBBD8YcKatj4VcH1.md | 2 +- .../content/location@YbGGYoKJEx29PlvopUBiM.md | 5 ++--- .../making-layouts@dXeYVMXv-3MRQ1ovOUuJW.md | 17 +++++++++----- .../mobile-apps@VOGKiG2EZVfCBAaa7Df0W.md | 10 ++++----- .../module-bundlers@hkSc_1x09m7-7BO7WzlDT.md | 7 +++--- .../content/nextjs@V70884VcuXkfrfHyLGtUg.md | 6 +---- .../content/nextjs@zNFYAJaSq0YZXL5Rpx1NX.md | 7 ++---- .../notifications@6AlcArOiJMhHXguAosDzn.md | 5 ++--- .../content/npm@ib_FHinhrw8VuSet-xMF7.md | 4 +--- .../content/nuxtjs@BBsXxkbbEG-gnbM1xXKrj.md | 6 ++--- .../content/nuxtjs@XWJxV42Dpu2D3xDK10Pn3.md | 13 +++++------ ...sp-security-risks@JanR7I_lNnUCXhCMGLdn-.md | 7 +++--- .../package-managers@IqvS1V-98cxko3e9sBQgP.md | 6 ++--- .../content/parcel@NS-hwaWa5ebSmNNRoxFDp.md | 6 ++--- .../content/payments@MAM1nuVk-h4AvTUk4nvmj.md | 7 ++---- ...rformance-metrics@X0Y3-IpPiFUCsNDK4RFxw.md | 2 +- .../pick-a-framework@eXezX7CVNyC1RuyU_I4yP.md | 2 +- .../playwright@jramLk8FGuaEH4YpHIyZT.md | 3 +-- .../content/pnpm@SLxA5qJFp_28TRzr1BjxZ.md | 3 ++- .../content/postcss@9WlPENh9g1xOv-zA64Tfg.md | 3 ++- .../content/prettier@zbkpu_gvQ4mgCiZKzS1xv.md | 3 ++- .../prpl-pattern@-DsETM9xLgHyGZthptj1Y.md | 10 ++------- .../content/pwas@PoM77O2OtxPELxfrW1wtl.md | 5 ++--- .../content/qwik@N5DCb6bDfgUnSdHPLYY4g.md | 7 ++++-- .../rail-model@xD5WfEP7Ez0oi3890UgmH.md | 10 ++------- .../react-native@dsTegXTyupjS8iU6I7Xiv.md | 4 ++-- .../react-router@KJRkrFZIihCUBrOf579EU.md | 7 +++--- .../content/react@SGDf_rbfmFSHlxI-Czzlz.md | 7 ++---- .../content/react@tG5v3O4lNIFc2uCnacPak.md | 7 ++---- .../relay-modern@0moPO23ol33WsjVXSpTGf.md | 5 +++-- ...responsive-design@TKtWmArHn7elXRJdG6lDQ.md | 8 +++---- .../content/rollup@sCjErk7rfWAUvhl8Kfm3n.md | 2 +- .../content/sass@kukEE5rMSPa4NeNjx21kt.md | 3 +-- .../seo-basics@mH_qff8R7R6eLQ1tPHLgG.md | 6 ++--- ...erver-sent-events@doPe92aUpo-8KWhi45lWK.md | 5 ++--- .../service-workers@TldWoXiqKxM4X3JONKAR7.md | 8 +++---- .../shadow-dom@-SpsNeOZBkQfDA-rwzgPg.md | 2 +- .../content/solid-js@DxOSKnqAjZOPP-dq_U7oP.md | 3 ++- .../content/ssr@Cxspmb14_0i1tfw-ZLxEu.md | 6 ++--- ...c-site-generators@n0q32YhWEIAUwbGXexoqV.md | 6 ++--- .../content/storage@raoa-75p_DyBAycvy3yVv.md | 4 +--- .../svelte-kit@P4st_telfCwKLSAU2WsQP.md | 3 ++- .../content/svelte@OL8I6nOZ8hGGWmtxg_Mv8.md | 5 ++--- .../content/svelte@ZR-qZ2Lcbu3FtqaMd3wM4.md | 5 ++--- .../content/swc@h26uS3muFCabe6ekElZcI.md | 5 ++--- .../content/tailwind@eghnfG4p7i-EDWfp3CQXC.md | 5 ++--- .../content/tauri@GJctl0tVXe4B70s35RkLT.md | 2 +- .../content/testing@igg4_hb3XE3vuvY8ufV-4.md | 15 +++++++++++-- .../topic-node@RYIEsxd9k-9jenyEyavGE.md | 1 - .../type-checkers@hwPOGT0-duy3KfI8QaEwF.md | 2 +- .../typescript@0asdhvwBH3gn-ercktV7A.md | 3 ++- .../using-devtools@3_sJHKTogkDoCjR518-OL.md | 22 +++++++++---------- .../using-lighthouse@RIhHMHLsLLPhNl05Q9aBf.md | 8 ++----- .../vcs-hosting@MXnFhZlNB1zTsBFDyni9H.md | 10 +++++---- ...n-control-systems@NIY7c4TQEEHx0hATu-k5C.md | 9 ++++---- .../content/vite@0Awx3zEI5_gYEIrD7IVX6.md | 3 +-- .../content/vitest@hVQ89f6G0LXEgHIOKHDYq.md | 4 ++-- .../content/vuejs@3TE_iYvbklXK0be-5f2M7.md | 6 ++--- .../content/vuejs@ERAdwL1G9M1bnx-fOm5ZA.md | 7 ++---- .../content/vuepress@CMrss8E2W0eA6DVEqtPjT.md | 5 ++--- .../web-components@ruoFa3M4bUE3Dg6GXSiUI.md | 4 ++-- ...b-security-basics@RDWbG3Iui6IPgp0shvXtg.md | 20 ++++++++++++----- .../web-sockets@NDJR8UCoa31v45TBFP7we.md | 8 +++---- .../content/webpack@twufEtHgxcRUWAUQ9bXus.md | 5 ++--- ...at-is-domain-name@ZhSuu2VArnzPDp6dPQQSC.md | 4 ++-- .../what-is-hosting@aqMaEY8gkKMikiqleV5EP.md | 5 ++--- .../what-is-http@R12sArWVpbIs_PHxBqVaR.md | 8 +++---- .../writing-css@XDTD8el6OwuQ55wC-X4iV.md | 2 +- ...ing-semantic-html@z8-556o-PaHXjlytrawaF.md | 4 ++-- .../content/yarn@yrq3nOwFREzl-9EKnpU-e.md | 5 ++--- 114 files changed, 278 insertions(+), 387 deletions(-) delete mode 100644 src/data/roadmaps/frontend/content/topic-node@RYIEsxd9k-9jenyEyavGE.md diff --git a/src/data/roadmaps/frontend/content/accessibility@iJIqi7ngpGHWAqtgdjgxB.md b/src/data/roadmaps/frontend/content/accessibility@iJIqi7ngpGHWAqtgdjgxB.md index 50d6b1b8e..9e9b3c13a 100644 --- a/src/data/roadmaps/frontend/content/accessibility@iJIqi7ngpGHWAqtgdjgxB.md +++ b/src/data/roadmaps/frontend/content/accessibility@iJIqi7ngpGHWAqtgdjgxB.md @@ -1,11 +1,9 @@ # Accessibility -Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily. +Website accessibility is the practice of designing and developing websites that can be used by everyone, including people with disabilities. It involves implementing features and standards that make web content perceivable, operable, understandable, and robust for all users, regardless of their physical or cognitive abilities. This includes providing text alternatives for images, ensuring keyboard navigation, using sufficient color contrast, offering captions for audio content, and creating a consistent and predictable layout. Adhering to accessibility guidelines not only improves usability for people with disabilities but also enhances the overall user experience for all visitors while potentially increasing a site's reach and legal compliance. Visit the following resources to learn more: -- [@article@Developing for Web Accessibility by W3C WAI](https://www.w3.org/WAI/tips/developing/) -- [@article@Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php) - [@video@Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) - [@article@Accessibility for Developers by Google](https://web.dev/accessibility) - [@feed@Explore top posts about Accessibility](https://app.daily.dev/tags/accessibility?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/angular@-bHFIiXnoUQSov64WI9yo.md b/src/data/roadmaps/frontend/content/angular@-bHFIiXnoUQSov64WI9yo.md index e963b1b7c..c06404a96 100644 --- a/src/data/roadmaps/frontend/content/angular@-bHFIiXnoUQSov64WI9yo.md +++ b/src/data/roadmaps/frontend/content/angular@-bHFIiXnoUQSov64WI9yo.md @@ -1,6 +1,6 @@ # Angular -Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. +Angular is a popular open-source web application framework developed and maintained by Google. It uses TypeScript, a statically typed superset of JavaScript, to build scalable and efficient single-page applications (SPAs). Angular follows a component-based architecture, where the user interface is composed of reusable, self-contained components. The framework provides features like two-way data binding, dependency injection, and a powerful template syntax, which simplify the development of complex web applications. Angular also includes a comprehensive set of tools for testing, routing, and state management, making it a full-fledged solution for front-end development. Its modular structure and emphasis on best practices make it particularly suitable for large-scale enterprise applications. Visit the following resources to learn more: diff --git a/src/data/roadmaps/frontend/content/angular@k6rp6Ua9qUEW_DA_fOg5u.md b/src/data/roadmaps/frontend/content/angular@k6rp6Ua9qUEW_DA_fOg5u.md index e68b8c25f..310cafdf3 100644 --- a/src/data/roadmaps/frontend/content/angular@k6rp6Ua9qUEW_DA_fOg5u.md +++ b/src/data/roadmaps/frontend/content/angular@k6rp6Ua9qUEW_DA_fOg5u.md @@ -1,8 +1,9 @@ # Angular -Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. +Angular is a popular open-source web application framework developed and maintained by Google. It uses TypeScript, a statically typed superset of JavaScript, to build scalable and efficient single-page applications (SPAs). Angular follows a component-based architecture, where the user interface is composed of reusable, self-contained components. The framework provides features like two-way data binding, dependency injection, and a powerful template syntax, which simplify the development of complex web applications. Angular also includes a comprehensive set of tools for testing, routing, and state management, making it a full-fledged solution for front-end development. Its modular structure and emphasis on best practices make it particularly suitable for large-scale enterprise applications. Visit the following resources to learn more: -- [@official@Official - Getting started with Angular](https://angular.io/start) +- [@roadmap@Angular Roadmap](https://roadmap.sh/angular) +- [@official@Angular Website](https://angular.dev) - [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/apollo@5eUbDdOTOfaOhUlZAmmXW.md b/src/data/roadmaps/frontend/content/apollo@5eUbDdOTOfaOhUlZAmmXW.md index 2998402db..cac601b39 100644 --- a/src/data/roadmaps/frontend/content/apollo@5eUbDdOTOfaOhUlZAmmXW.md +++ b/src/data/roadmaps/frontend/content/apollo@5eUbDdOTOfaOhUlZAmmXW.md @@ -1,11 +1,10 @@ # Apollo -Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services. +Apollo GraphQL is a comprehensive platform for building and managing GraphQL-based data layers in modern applications. It provides a set of open-source tools and libraries that simplify the implementation of GraphQL on both the client and server sides. On the client side, Apollo Client offers powerful caching, state management, and data fetching capabilities, integrating seamlessly with various front-end frameworks. On the server side, Apollo Server facilitates the creation of GraphQL APIs, handling queries, mutations, and subscriptions efficiently. The Apollo platform also includes developer tools for schema management, performance monitoring, and API governance. By abstracting away much of the complexity of GraphQL implementation, Apollo enables developers to build faster, more scalable, and more maintainable applications with a unified data graph. Visit the following resources to learn more: -- [@article@Apollo Website](https://www.apollographql.com) +- [@official@Apollo Website](https://www.apollographql.com) - [@article@Official Docs](https://www.apollographql.com/docs/) -- [@video@Official YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/) -- [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY) +- [@roadmap@](https://roadmap.sh/graphql) - [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/astro@iUxXq7beg55y76dkwhM13.md b/src/data/roadmaps/frontend/content/astro@iUxXq7beg55y76dkwhM13.md index fc28d4143..f51791415 100644 --- a/src/data/roadmaps/frontend/content/astro@iUxXq7beg55y76dkwhM13.md +++ b/src/data/roadmaps/frontend/content/astro@iUxXq7beg55y76dkwhM13.md @@ -1,15 +1,9 @@ # 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. +Astro is a modern static site generator (SSG) and web framework designed for building fast, content-focused websites. It allows developers to use multiple frontend frameworks (like React, Vue, or Svelte) within the same project, automatically rendering components to static HTML at build time. Astro's unique "partial hydration" approach only sends JavaScript to the browser when necessary, resulting in significantly smaller bundle sizes and faster load times. The framework supports file-based routing, markdown content, and built-in optimizations for images and assets. Astro's component islands architecture enables developers to create interactive components while maintaining the performance benefits of static HTML, making it particularly well-suited for content-rich sites like blogs, documentation, and marketing pages. Visit the following resources to learn more: -- [@official@Official Astro Website](https://astro.build/) -- [@article@Official Astro Docs](https://docs.astro.build/) +- [@official@Astro Website](https://astro.build/) +- [@article@What is Astro?](https://www.contentful.com/blog/what-is-astro/) +- [@course@Astro Web Framework Crash Course](https://www.youtube.com/watch?v=e-hTm5VmofI) diff --git a/src/data/roadmaps/frontend/content/astro@wA2fSYsbBYU02VJXAvUz8.md b/src/data/roadmaps/frontend/content/astro@wA2fSYsbBYU02VJXAvUz8.md index fc28d4143..f51791415 100644 --- a/src/data/roadmaps/frontend/content/astro@wA2fSYsbBYU02VJXAvUz8.md +++ b/src/data/roadmaps/frontend/content/astro@wA2fSYsbBYU02VJXAvUz8.md @@ -1,15 +1,9 @@ # 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. +Astro is a modern static site generator (SSG) and web framework designed for building fast, content-focused websites. It allows developers to use multiple frontend frameworks (like React, Vue, or Svelte) within the same project, automatically rendering components to static HTML at build time. Astro's unique "partial hydration" approach only sends JavaScript to the browser when necessary, resulting in significantly smaller bundle sizes and faster load times. The framework supports file-based routing, markdown content, and built-in optimizations for images and assets. Astro's component islands architecture enables developers to create interactive components while maintaining the performance benefits of static HTML, making it particularly well-suited for content-rich sites like blogs, documentation, and marketing pages. Visit the following resources to learn more: -- [@official@Official Astro Website](https://astro.build/) -- [@article@Official Astro Docs](https://docs.astro.build/) +- [@official@Astro Website](https://astro.build/) +- [@article@What is Astro?](https://www.contentful.com/blog/what-is-astro/) +- [@course@Astro Web Framework Crash Course](https://www.youtube.com/watch?v=e-hTm5VmofI) diff --git a/src/data/roadmaps/frontend/content/bem@dRDmS072xeNLX7p_X565w.md b/src/data/roadmaps/frontend/content/bem@dRDmS072xeNLX7p_X565w.md index 57df7640c..cf1422420 100644 --- a/src/data/roadmaps/frontend/content/bem@dRDmS072xeNLX7p_X565w.md +++ b/src/data/roadmaps/frontend/content/bem@dRDmS072xeNLX7p_X565w.md @@ -4,7 +4,6 @@ The Block, Element, Modifier methodology (commonly referred to as BEM) is a popu Visit the following resources to learn more: -- [@article@BEM Official Website](https://en.bem.info) -- [@article@BEM Documentation](https://en.bem.info/methodology/quick-start) -- [@article@BEM 101](https://css-tricks.com/bem-101) -- [@article@BEM Tutorials](https://en.bem.info/tutorials/) +- [@official@BEM Official Website](https://en.bem.info) +- [@official@BEM Documentation](https://en.bem.info/methodology/quick-start) +- [@article@5 Reasons To Use BEM Notation](https://www.elpassion.com/blog/5-reasons-to-use-bem-a) diff --git a/src/data/roadmaps/frontend/content/bitbucket@DILBiQp7WWgSZ5hhtDW6A.md b/src/data/roadmaps/frontend/content/bitbucket@DILBiQp7WWgSZ5hhtDW6A.md index b2c0424a5..7058f6589 100644 --- a/src/data/roadmaps/frontend/content/bitbucket@DILBiQp7WWgSZ5hhtDW6A.md +++ b/src/data/roadmaps/frontend/content/bitbucket@DILBiQp7WWgSZ5hhtDW6A.md @@ -1,6 +1,6 @@ # BitBucket -[BitBucket](https://bitbucket.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. +Bitbucket is a web-based version control repository hosting service owned by Atlassian. It provides Git and Mercurial version control systems for both open source and private projects. Bitbucket offers features such as pull requests, branch permissions, and in-line commenting for code review. It integrates seamlessly with other Atlassian products like Jira and Trello, facilitating project management and issue tracking. Bitbucket provides both cloud-hosted and self-hosted options, catering to different organizational needs. It supports continuous integration and deployment (CI/CD) through Bitbucket Pipelines. Visit the following resources to learn more: diff --git a/src/data/roadmaps/frontend/content/browsers-and-how-they-work@P82WFaTPgQEPNp5IIuZ1Y.md b/src/data/roadmaps/frontend/content/browsers-and-how-they-work@P82WFaTPgQEPNp5IIuZ1Y.md index 8ae008249..bc351c4ee 100644 --- a/src/data/roadmaps/frontend/content/browsers-and-how-they-work@P82WFaTPgQEPNp5IIuZ1Y.md +++ b/src/data/roadmaps/frontend/content/browsers-and-how-they-work@P82WFaTPgQEPNp5IIuZ1Y.md @@ -4,8 +4,7 @@ A web browser is a software application that enables a user to access and displa Visit the following resources to learn more: -- [@article@How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) -- [@article@Role of Rendering Engine in Browsers](https://www.browserstack.com/guide/browser-rendering-engine) +- [@article@How Browsers Work](https://www.ramotion.com/blog/what-is-web-browser/) - [@article@Populating the Page: How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) -- [@video@How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0) +- [@video@How Do Web Browsers Work?](https://www.youtube.com/watch?v=5rLFYtXHo9s) - [@feed@Explore top posts about Browsers](https://app.daily.dev/tags/browsers?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/build-tools@i9z0stM4uKu27Cz6NIgNX.md b/src/data/roadmaps/frontend/content/build-tools@i9z0stM4uKu27Cz6NIgNX.md index a7d1c98d2..8a2c8f010 100644 --- a/src/data/roadmaps/frontend/content/build-tools@i9z0stM4uKu27Cz6NIgNX.md +++ b/src/data/roadmaps/frontend/content/build-tools@i9z0stM4uKu27Cz6NIgNX.md @@ -1,12 +1,10 @@ # Build Tools -Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself. - -Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more! +Build tools are software utilities designed to automate the process of creating executable applications from source code. They handle tasks such as compiling, linking, minifying, and bundling code, as well as running tests and managing dependencies. Common build tools include Make, Gradle, Maven, Webpack, and Gulp. These tools streamline development workflows by reducing manual steps, ensuring consistency across different environments, and optimizing output for production. They often support features like incremental builds, parallel processing, and custom task definitions. Build tools are crucial in modern software development, especially for large-scale projects, as they improve efficiency, reduce errors, and facilitate continuous integration and deployment processes. Visit the following resources to learn more: -- [@article@webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/) -- [@article@Vite Next Generation Frontend Tooling](https://vitejs.dev) -- [@article@Parcel is a zero configuration build tool for the web](https://parceljs.org/) +- [@official@Webpack Website](https://webpack.js.org/) +- [@official@Vite Website](https://vitejs.dev) +- [@official@Parcel Website](https://parceljs.org/) - [@feed@Explore top posts about Tools](https://app.daily.dev/tags/tools?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/content-security-policy@rmcm0CZbtNVC9LZ14-H6h.md b/src/data/roadmaps/frontend/content/content-security-policy@rmcm0CZbtNVC9LZ14-H6h.md index 4688e9682..ec2a06add 100644 --- a/src/data/roadmaps/frontend/content/content-security-policy@rmcm0CZbtNVC9LZ14-H6h.md +++ b/src/data/roadmaps/frontend/content/content-security-policy@rmcm0CZbtNVC9LZ14-H6h.md @@ -1,6 +1,6 @@ # Content Security Policy -Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. +Content Security Policy (CSP) is a security standard implemented by web browsers to prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by allowing web developers to specify which sources of content are trusted and can be loaded on a web page. CSP is typically implemented through HTTP headers or meta tags, defining rules for various types of resources like scripts, stylesheets, images, and fonts. By restricting the origins from which content can be loaded, CSP significantly reduces the risk of malicious code execution. It also provides features like reporting violations to help developers identify and fix potential security issues. While powerful, implementing CSP requires careful configuration to balance security with functionality, especially for sites using third-party resources or inline scripts. Visit the following resources to learn more: diff --git a/src/data/roadmaps/frontend/content/cors@AfH2zCbqzw0Nisg1yyISS.md b/src/data/roadmaps/frontend/content/cors@AfH2zCbqzw0Nisg1yyISS.md index a6f4d6f02..15af1ae30 100644 --- a/src/data/roadmaps/frontend/content/cors@AfH2zCbqzw0Nisg1yyISS.md +++ b/src/data/roadmaps/frontend/content/cors@AfH2zCbqzw0Nisg1yyISS.md @@ -1,10 +1,9 @@ # CORS -Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. +Cross-Origin Resource Sharing (CORS) is a security mechanism implemented by web browsers to control access to resources (like APIs or fonts) on a web page from a different domain than the one serving the web page. It extends and adds flexibility to the Same-Origin Policy, allowing servers to specify who can access their resources. CORS works through a system of HTTP headers, where browsers send a preflight request to the server hosting the cross-origin resource, and the server responds with headers indicating whether the actual request is allowed. This mechanism helps prevent unauthorized access to sensitive data while enabling legitimate cross-origin requests. CORS is crucial for modern web applications that often integrate services and resources from multiple domains, balancing security needs with the functionality requirements of complex, distributed web systems. Visit the following resources to learn more: - [@article@Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) -- [@video@CORS in 100 Seconds](https://www.youtube.com/watch?v=4KHiSt0oLJ0) - [@video@CORS in 6 minutes](https://www.youtube.com/watch?v=PNtFSVU-YTI) - [@article@Understanding CORS](https://rbika.com/blog/understanding-cors) diff --git a/src/data/roadmaps/frontend/content/credentials@opu2bAsmdWHqWqtsCscLC.md b/src/data/roadmaps/frontend/content/credentials@opu2bAsmdWHqWqtsCscLC.md index 3f05530e4..b317f9b4d 100644 --- a/src/data/roadmaps/frontend/content/credentials@opu2bAsmdWHqWqtsCscLC.md +++ b/src/data/roadmaps/frontend/content/credentials@opu2bAsmdWHqWqtsCscLC.md @@ -1,11 +1,8 @@ # Credentials API -The Credential Management API is a web API that allows web developers to integrate password-based and federated login flows into their applications. It provides a standardized, browser-based interface for storing and retrieving user credentials, such as username and password combinations and OAuth tokens. - -To use the Credential Management API, a web page must first create a Credential object and specify the credentials that the user wishes to store. The page can then use the navigator.credentials object to store and retrieve the user's credentials. The API provides several methods for storing and retrieving credentials, as well as for prompting the user to sign in or sign up. - -The Credential Management API is supported by most modern web browsers and is designed to improve the security and usability of login flows by allowing the user to store and reuse their credentials across multiple sites and devices. +The Credential Management API is a web standard that allows websites to interact with the browser's credential manager to store, retrieve, and manage user credentials. It provides a programmatic interface for seamless and secure user authentication, enabling features like automatic sign-in and one-tap sign-up. The API supports various credential types, including passwords, federated identities, and public key credentials. By leveraging this API, developers can improve user experience by reducing login friction, implementing smoother account switching, and enhancing overall security. It works in conjunction with password managers and platform authenticators, helping to streamline authentication processes across devices and browsers while adhering to modern security practices. Visit the following resources to learn more: - [@article@Credential Management API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API) +- [@article@The Credential Management API](https://web.dev/articles/security-credential-management) diff --git a/src/data/roadmaps/frontend/content/css-architecture@nPg_YWpMJtlhU2t2UD_6B.md b/src/data/roadmaps/frontend/content/css-architecture@nPg_YWpMJtlhU2t2UD_6B.md index e6ea40ff4..8d6bb4237 100644 --- a/src/data/roadmaps/frontend/content/css-architecture@nPg_YWpMJtlhU2t2UD_6B.md +++ b/src/data/roadmaps/frontend/content/css-architecture@nPg_YWpMJtlhU2t2UD_6B.md @@ -1,11 +1,9 @@ # CSS Architecture -CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS. +CSS architecture refers to the methodologies and organizational strategies used to structure and maintain CSS code in large-scale web projects. It focuses on creating scalable, maintainable, and modular stylesheets to manage the growing complexity of web applications. Key concepts include naming conventions (like BEM or SMACSS), component-based design, separation of concerns, and the use of preprocessors (such as Sass or Less). CSS architecture often employs techniques like CSS modules, utility classes, or CSS-in-JS solutions to improve code reusability and reduce specificity conflicts. The goal is to create a systematic approach to styling that enhances collaboration among developers, reduces code duplication, and facilitates easier updates and maintenance of the visual design across an entire application or website. Visit the following resources to learn more: -- [@article@A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/) -- [@article@BEM Official Website](https://en.bem.info) -- [@article@OOCSS Official Website](http://oocss.org/) -- [@article@SMACSS Official Website](http://smacss.com/) +- [@article@How to Organize Your CSS with a Modular Architecture](https://snipcart.com/blog/organize-css-modular-architecture) +- [@video@Modern CSS For Dynamic Component-Based Architecture](https://www.youtube.com/watch?v=Y50iqMlrqU8) - [@feed@Explore top posts about Architecture](https://app.daily.dev/tags/architecture?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/css-preprocessors@UTW1pP59dUehuf0zeHXqL.md b/src/data/roadmaps/frontend/content/css-preprocessors@UTW1pP59dUehuf0zeHXqL.md index b47d9e78f..3146503fa 100644 --- a/src/data/roadmaps/frontend/content/css-preprocessors@UTW1pP59dUehuf0zeHXqL.md +++ b/src/data/roadmaps/frontend/content/css-preprocessors@UTW1pP59dUehuf0zeHXqL.md @@ -1,6 +1,6 @@ # CSS Preprocessors -CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. +CSS preprocessors are scripting languages that extend the capabilities of standard CSS, allowing developers to write more maintainable and efficient stylesheets. They introduce features like variables, nesting, mixins, functions, and mathematical operations, which are then compiled into standard CSS. Popular preprocessors include Sass, Less, and Stylus. These tools enable developers to organize styles more logically, reuse code more effectively, and create complex CSS structures with less repetition. Preprocessors often support features like partials for modular stylesheets and built-in color manipulation functions. By using a preprocessor, developers can write more DRY (Don't Repeat Yourself) code, manage large-scale projects more easily, and potentially improve the performance of their stylesheets through optimization during the compilation process. Visit the following resources to learn more: diff --git a/src/data/roadmaps/frontend/content/css@ZhJhf1M2OphYbEmduFq-9.md b/src/data/roadmaps/frontend/content/css@ZhJhf1M2OphYbEmduFq-9.md index 7a414069e..f434ee1af 100644 --- a/src/data/roadmaps/frontend/content/css@ZhJhf1M2OphYbEmduFq-9.md +++ b/src/data/roadmaps/frontend/content/css@ZhJhf1M2OphYbEmduFq-9.md @@ -1,11 +1,10 @@ # CSS -CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. +CSS (Cascading Style Sheets) is a styling language used to describe the presentation of a document written in HTML or XML. It defines how elements should be displayed on screen, on paper, or in other media. CSS separates the design from the content, allowing for greater flexibility and control over the layout, colors, and fonts of web pages. It uses a system of selectors to target HTML elements and apply styles to them. CSS supports responsive design through media queries, enabling the creation of layouts that adapt to different screen sizes and devices. The cascade, inheritance, and specificity are key concepts in CSS that determine how styles are applied when multiple rules target the same element. Modern CSS includes features like Flexbox and Grid for advanced layout control, animations, and transitions for creating dynamic user interfaces. Visit the following resources to learn more: -- [@video@CSS Complete Course](https://youtu.be/n4R2E7O-Ngo) -- [@video@HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) -- [@article@W3Schools — Learn CSS](https://www.w3schools.com/css/) +- [@course@CSS Complete Course](https://youtu.be/n4R2E7O-Ngo) +- [@course@HTML & CSS Full Course - Beginner to Pro](https://www.youtube.com/watch?v=G3e-cpL7ofc) - [@article@Web.dev by Google — Learn CSS](https://web.dev/learn/css/) - [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/custom-elements@VxiQPgcYDFAT6WgSRWpIA.md b/src/data/roadmaps/frontend/content/custom-elements@VxiQPgcYDFAT6WgSRWpIA.md index f81ad8367..f45371593 100644 --- a/src/data/roadmaps/frontend/content/custom-elements@VxiQPgcYDFAT6WgSRWpIA.md +++ b/src/data/roadmaps/frontend/content/custom-elements@VxiQPgcYDFAT6WgSRWpIA.md @@ -4,5 +4,6 @@ One of the key features of the Web Components standard is the ability to create Visit the following resources to learn more: +- [@video@Web Components | Custom Elements](https://www.youtube.com/watch?v=1GT35DSdZbI) - [@article@Using custom elements | MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/cypress@DaynCz5RR26gjT6N6gTDL.md b/src/data/roadmaps/frontend/content/cypress@DaynCz5RR26gjT6N6gTDL.md index 856442ed1..3ec612a1d 100644 --- a/src/data/roadmaps/frontend/content/cypress@DaynCz5RR26gjT6N6gTDL.md +++ b/src/data/roadmaps/frontend/content/cypress@DaynCz5RR26gjT6N6gTDL.md @@ -6,5 +6,5 @@ Visit the following resources to learn more: - [@official@Official Website](https://www.cypress.io/) - [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other) -- [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE) +- [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=BQqzfHQkREo) - [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/desktop-apps@KMA7NkxFbPoUDtFnGBFnj.md b/src/data/roadmaps/frontend/content/desktop-apps@KMA7NkxFbPoUDtFnGBFnj.md index 7824fffdd..70ea56970 100644 --- a/src/data/roadmaps/frontend/content/desktop-apps@KMA7NkxFbPoUDtFnGBFnj.md +++ b/src/data/roadmaps/frontend/content/desktop-apps@KMA7NkxFbPoUDtFnGBFnj.md @@ -1,8 +1,3 @@ # Desktop Applications in JavaScript -A while back, developing a desktop app using JavaScript was impossible. But now JavaScript developers can create desktop applications using their knowledge for web development. Here is the list of options to create desktop applications in JavaScript. - -- [@article@Electron](https://www.electronjs.org/) -- [@article@NodeGUI](https://docs.nodegui.org/) -- [@article@NW.js](https://nwjs.io/) -- [@article@Meteor](https://www.meteor.com/) +Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses. diff --git a/src/data/roadmaps/frontend/content/device-orientation@Fd0hQh1DleM0gMzCpGou4.md b/src/data/roadmaps/frontend/content/device-orientation@Fd0hQh1DleM0gMzCpGou4.md index ee8454553..210b46f5e 100644 --- a/src/data/roadmaps/frontend/content/device-orientation@Fd0hQh1DleM0gMzCpGou4.md +++ b/src/data/roadmaps/frontend/content/device-orientation@Fd0hQh1DleM0gMzCpGou4.md @@ -1,11 +1,8 @@ # Device Orientation API -The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games. - -To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation. - -The Device Orientation API is supported by most modern web browsers and is often used in conjunction with other APIs, such as the Geolocation API, to build location-based applications. +The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games. To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation. Visit the following resources to learn more: - [@article@Device Orientation API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) +- [@video@Detect the device orientation with JS](https://www.youtube.com/watch?v=fMDuFoqSQfw) diff --git a/src/data/roadmaps/frontend/content/dns-and-how-it-works@hkxw9jPGYphmjhTjw8766.md b/src/data/roadmaps/frontend/content/dns-and-how-it-works@hkxw9jPGYphmjhTjw8766.md index f7f72e0d3..6ecb89bb2 100644 --- a/src/data/roadmaps/frontend/content/dns-and-how-it-works@hkxw9jPGYphmjhTjw8766.md +++ b/src/data/roadmaps/frontend/content/dns-and-how-it-works@hkxw9jPGYphmjhTjw8766.md @@ -1,6 +1,6 @@ # DNS -The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources. +DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like www.example.com) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. Visit the following resources to learn more: @@ -8,7 +8,4 @@ Visit the following resources to learn more: - [@article@Mess with DNS - DNS Playground](https://messwithdns.net/) - [@article@How DNS works (comic)](https://howdns.works/) - [@video@DNS and How does it Work?](https://www.youtube.com/watch?v=Wj0od2ag5sk) -- [@video@DNS Records](https://www.youtube.com/watch?v=7lxgpKh_fRY) -- [@video@When to add glue records to DNS settings](https://www.youtube.com/watch?v=e48AyJOA9W8) -- [@video@DNS Records for Newbies - How To Manage Website Records](https://www.youtube.com/watch?v=YV5tkQYcvfg) - [@feed@Explore top posts about DNS](https://app.daily.dev/tags/dns?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/electron@mQHpSyMR4Rra4mqAslgiS.md b/src/data/roadmaps/frontend/content/electron@mQHpSyMR4Rra4mqAslgiS.md index b2f80714b..ffc432913 100644 --- a/src/data/roadmaps/frontend/content/electron@mQHpSyMR4Rra4mqAslgiS.md +++ b/src/data/roadmaps/frontend/content/electron@mQHpSyMR4Rra4mqAslgiS.md @@ -1,10 +1,10 @@ # Electron -Electron allows you to build cross-platform desktop applications with HTML, CSS, and Javascript/Typescript. It uses Chromium and Node.js, so essentially it is a "Browser" like application that is compatible with Mac, Windows, and Linux. +Electron is an open-source framework developed by GitHub that enables developers to build cross-platform desktop applications using web technologies. It combines the Chromium rendering engine with the Node.js runtime, allowing applications to be written in HTML, CSS, and JavaScript. Electron provides APIs to access native operating system functions, bridging the gap between web and desktop development. It's widely used for creating popular applications like Visual Studio Code, Atom, and Discord. Electron apps benefit from rapid development cycles, cross-platform compatibility, and access to a vast ecosystem of web technologies and Node.js modules. However, they can face challenges with resource usage and performance compared to native applications. Despite these trade-offs, Electron remains a popular choice for developers seeking to leverage web skills for desktop app development. Visit the following resources to learn more: -- [@article@Electron Website](https://www.electronjs.org/) -- [@article@Electron Docs](https://www.electronjs.org/docs/latest/) +- [@official@Electron Website](https://www.electronjs.org/) +- [@official@Electron Docs](https://www.electronjs.org/docs/latest/) - [@video@Create a Desktop App With JavaScript & Electron](https://www.youtube.com/watch?v=ML743nrkMHw) - [@feed@Explore top posts about Electron](https://app.daily.dev/tags/electron?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/eleventy@io0RHJWIcVxDhcYkV9d38.md b/src/data/roadmaps/frontend/content/eleventy@io0RHJWIcVxDhcYkV9d38.md index 326bb82f6..a560b0fd9 100644 --- a/src/data/roadmaps/frontend/content/eleventy@io0RHJWIcVxDhcYkV9d38.md +++ b/src/data/roadmaps/frontend/content/eleventy@io0RHJWIcVxDhcYkV9d38.md @@ -4,6 +4,6 @@ Eleventy (11ty) is a simple to use, easy to customize, highly performant and pow Visit the following resources to learn more: -- [@article@Official Website](https://www.11ty.dev/) -- [@article@A collection of 11ty starters, projects, plugins, and resources](https://11ty.rocks/) +- [@official@Official Website](https://www.11ty.dev/) +- [@official@A collection of 11ty starters, projects, plugins, and resources](https://11ty.rocks/) - [@video@Introduction to Eleventy](https://www.youtube.com/watch?v=-dM6AmNmMFA) diff --git a/src/data/roadmaps/frontend/content/esbuild@4W7UXfdKIUsm1bUrjdTVT.md b/src/data/roadmaps/frontend/content/esbuild@4W7UXfdKIUsm1bUrjdTVT.md index 58c1e84f6..7876daabe 100644 --- a/src/data/roadmaps/frontend/content/esbuild@4W7UXfdKIUsm1bUrjdTVT.md +++ b/src/data/roadmaps/frontend/content/esbuild@4W7UXfdKIUsm1bUrjdTVT.md @@ -1,11 +1,10 @@ # esbuild -Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way. +esbuild is a high-performance JavaScript bundler and minifier designed for speed and efficiency. Created by Evan Wallace, it's written in Go and compiles to native code, making it significantly faster than traditional JavaScript-based build tools. esbuild supports modern JavaScript features, TypeScript, and JSX out of the box, with near-instant bundling times even for large projects. It offers a simple API and command-line interface, making it easy to integrate into existing build pipelines. While primarily focused on speed, esbuild also provides basic code splitting, tree shaking, and source map generation. Its extreme performance makes it particularly suitable for development environments and as a foundation for other build tools, though it may lack some advanced features found in more mature bundlers. Visit the following resources to learn more: -- [@article@Esbuild Official Website](https://esbuild.github.io/) -- [@article@Esbuild Documentation](https://esbuild.github.io/api/) -- [@video@Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU) +- [@official@Esbuild Official Website](https://esbuild.github.io/) +- [@course@Let's Learn esbuild! (with Sunil Pai) — Learn With Jason](https://www.youtube.com/watch?v=KLdF1yu_bmI) - [@video@What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0) - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/eslint@NFjsI712_qP0IOmjuqXar.md b/src/data/roadmaps/frontend/content/eslint@NFjsI712_qP0IOmjuqXar.md index 10e5f116a..6be9c9ee4 100644 --- a/src/data/roadmaps/frontend/content/eslint@NFjsI712_qP0IOmjuqXar.md +++ b/src/data/roadmaps/frontend/content/eslint@NFjsI712_qP0IOmjuqXar.md @@ -1,10 +1,10 @@ # ESLint -With ESLint you can impose the coding standard using a certain set of standalone rules. +ESLint is a popular open-source static code analysis tool for identifying and fixing problems in JavaScript code. It enforces coding standards, detects potential errors, and promotes consistent coding practices across projects. ESLint is highly configurable, allowing developers to define custom rules or use preset configurations. It supports modern JavaScript features, JSX, and TypeScript through plugins. ESLint can be integrated into development workflows through IDE extensions, build processes, or git hooks, providing real-time feedback to developers. Its ability to automatically fix many issues it detects makes it a valuable tool for maintaining code quality and consistency, especially in large teams or projects. ESLint's extensibility and wide adoption in the JavaScript ecosystem have made it a standard tool in modern JavaScript development. Visit the following resources to learn more: - [@official@ESLint Official Website](https://eslint.org/) -- [@article@Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d) +- [@article@What is ESLint and How to Use ESLint to Detect and Fix Code for JavaScript Projects](https://2coffee.dev/en/articles/what-is-eslint-and-how-to-use-eslint-to-detect-fix-code-for-javascript-projects) - [@video@ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) - [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/fetch-api--ajax-xhr@A4brX0efjZ0FFPTB4r6U0.md b/src/data/roadmaps/frontend/content/fetch-api--ajax-xhr@A4brX0efjZ0FFPTB4r6U0.md index c94d6950f..676192130 100644 --- a/src/data/roadmaps/frontend/content/fetch-api--ajax-xhr@A4brX0efjZ0FFPTB4r6U0.md +++ b/src/data/roadmaps/frontend/content/fetch-api--ajax-xhr@A4brX0efjZ0FFPTB4r6U0.md @@ -1,6 +1,6 @@ # Fetch API -Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updating the user profile or asynchronously fetching the list of searched products without reloading the page. +The Fetch API is a modern JavaScript interface for making HTTP requests in web browsers. It provides a more powerful and flexible way to send and receive data compared to older methods like XMLHttpRequest. Fetch uses Promises, allowing for cleaner asynchronous code. It supports various data formats, custom headers, and different types of requests (GET, POST, etc.). The API is designed to be extensible and integrates well with other web technologies. While simpler for basic use cases, Fetch also handles complex scenarios like request cancellation and reading streamed responses. It's widely supported in modern browsers and has become the standard for network requests in client-side JavaScript applications. Visit the following resources to learn more: diff --git a/src/data/roadmaps/frontend/content/flutter@2MRvAK9G9RGM_auWytcKh.md b/src/data/roadmaps/frontend/content/flutter@2MRvAK9G9RGM_auWytcKh.md index bac6fd860..6d4dcaa7f 100644 --- a/src/data/roadmaps/frontend/content/flutter@2MRvAK9G9RGM_auWytcKh.md +++ b/src/data/roadmaps/frontend/content/flutter@2MRvAK9G9RGM_auWytcKh.md @@ -1,13 +1,12 @@ # Flutter -Flutter is a free and open-source multi-platform UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create three different apps (for iOS, Android and Desktop). +Flutter is an open-source UI software development kit created by Google for building natively compiled, multi-platform applications from a single codebase. It uses the Dart programming language and provides a rich set of pre-designed widgets for creating responsive and visually appealing user interfaces. Flutter's architecture allows for fast development with hot reload, enabling developers to see changes instantly. It supports iOS, Android, web, and desktop platforms, offering true cross-platform development. Flutter uses a custom rendering engine, Skia, to draw UI components, ensuring consistent appearance across devices. While known for mobile app development, Flutter's expanding ecosystem and performance improvements have increased its adoption for web and desktop applications as well. Visit the following resources to learn more: - [@roadmap@Visit Dedicated Flutter Roadmap](https://roadmap.sh/flutter) - [@official@Flutter Website](https://flutter.dev) - [@official@Flutter for Desktop](https://flutter.dev/multi-platform/desktop) -- [@video@Flutter Tutorial for Beginners](https://www.youtube.com/watch?v=1ukSR1GRtMU\&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ) -- [@article@Learn Dart Programming](https://www.tutorialspoint.com/dart_programming/index.htm) +- [@course@Flutter course for beginners](https://www.youtube.com/watch?v=VPvVD8t02U8) - [@article@12 Ways Flutter Streamlines App Development](https://thenewstack.io/12-ways-flutter-streamlines-app-development/) - [@feed@Explore top posts about Flutter](https://app.daily.dev/tags/flutter?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/flutter@dIQXjFEUAJAGxxfAYceHU.md b/src/data/roadmaps/frontend/content/flutter@dIQXjFEUAJAGxxfAYceHU.md index 3cd63eb36..6d4dcaa7f 100644 --- a/src/data/roadmaps/frontend/content/flutter@dIQXjFEUAJAGxxfAYceHU.md +++ b/src/data/roadmaps/frontend/content/flutter@dIQXjFEUAJAGxxfAYceHU.md @@ -1,22 +1,12 @@ # Flutter -Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android). - -Flutter consists of two important parts: - -- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android). -- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs. - To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years. - -Dart focuses on front-end development, and you can use it to create mobile and web applications. - -If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript. +Flutter is an open-source UI software development kit created by Google for building natively compiled, multi-platform applications from a single codebase. It uses the Dart programming language and provides a rich set of pre-designed widgets for creating responsive and visually appealing user interfaces. Flutter's architecture allows for fast development with hot reload, enabling developers to see changes instantly. It supports iOS, Android, web, and desktop platforms, offering true cross-platform development. Flutter uses a custom rendering engine, Skia, to draw UI components, ensuring consistent appearance across devices. While known for mobile app development, Flutter's expanding ecosystem and performance improvements have increased its adoption for web and desktop applications as well. Visit the following resources to learn more: - [@roadmap@Visit Dedicated Flutter Roadmap](https://roadmap.sh/flutter) - [@official@Flutter Website](https://flutter.dev) -- [@video@Flutter Tutorial for Beginners](https://www.youtube.com/watch?v=1ukSR1GRtMU\&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ) -- [@article@Learn Dart Programming](https://www.tutorialspoint.com/dart_programming/index.htm) +- [@official@Flutter for Desktop](https://flutter.dev/multi-platform/desktop) +- [@course@Flutter course for beginners](https://www.youtube.com/watch?v=VPvVD8t02U8) - [@article@12 Ways Flutter Streamlines App Development](https://thenewstack.io/12-ways-flutter-streamlines-app-development/) - [@feed@Explore top posts about Flutter](https://app.daily.dev/tags/flutter?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/git@R_I4SGYqLk5zze5I1zS_E.md b/src/data/roadmaps/frontend/content/git@R_I4SGYqLk5zze5I1zS_E.md index 637f1554d..7289332c5 100644 --- a/src/data/roadmaps/frontend/content/git@R_I4SGYqLk5zze5I1zS_E.md +++ b/src/data/roadmaps/frontend/content/git@R_I4SGYqLk5zze5I1zS_E.md @@ -1,11 +1,11 @@ # Git -[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. +Git is a distributed version control system designed to handle projects of any size with speed and efficiency. Created by Linus Torvalds in 2005, Git tracks changes in source code during software development, allowing multiple developers to work together on non-linear development. It provides strong support for branching, merging, and distributed development workflows. Git maintains a complete history of all changes, enabling easy rollbacks and comparisons between versions. Its distributed nature means each developer has a full copy of the repository, allowing for offline work and backup. Git's speed, flexibility, and robust branching and merging capabilities have made it the most widely used version control system in software development, particularly for open-source projects. Visit the following resources to learn more: +- [@roadmap@Learn Git & GitHub](/git-github) - [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) -- [@article@Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git) - [@article@Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet) - [@article@Tutorial: Git for Absolutely Everyone](https://thenewstack.io/tutorial-git-for-absolutely-everyone/) - [@feed@Explore top posts about Git](https://app.daily.dev/tags/git?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/github@qmTVMJDsEhNIkiwE_UTYu.md b/src/data/roadmaps/frontend/content/github@qmTVMJDsEhNIkiwE_UTYu.md index 48935cb4b..d70fd3879 100644 --- a/src/data/roadmaps/frontend/content/github@qmTVMJDsEhNIkiwE_UTYu.md +++ b/src/data/roadmaps/frontend/content/github@qmTVMJDsEhNIkiwE_UTYu.md @@ -1,13 +1,11 @@ # GitHub -[GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. +GitHub has become a central hub for open-source projects and is widely used by developers, companies, and organizations for both private and public repositories. It was acquired by Microsoft in 2018 but continues to operate as a relatively independent entity. GitHub's popularity has made it an essential tool in modern software development workflows and a key platform for showcasing coding projects and contributing to open-source software. Visit the following resources to learn more: -- [@article@GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world) -- [@article@Learn GitHub by doing](https://skills.github.com/) +- [@roadmap@Learn Git & GitHub](/git-github) +- [@official@GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world) +- [@official@Learn GitHub by doing](https://skills.github.com/) - [@video@What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E) -- [@video@Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU) -- [@video@Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk) -- [@video@Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I) - [@feed@Explore top posts about GitHub](https://app.daily.dev/tags/github?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/gitlab@zIoSJMX3cuzCgDYHjgbEh.md b/src/data/roadmaps/frontend/content/gitlab@zIoSJMX3cuzCgDYHjgbEh.md index 948fc6df8..b96abaa30 100644 --- a/src/data/roadmaps/frontend/content/gitlab@zIoSJMX3cuzCgDYHjgbEh.md +++ b/src/data/roadmaps/frontend/content/gitlab@zIoSJMX3cuzCgDYHjgbEh.md @@ -1,10 +1,10 @@ # GitLab -[GitLab](https://gitlab.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. +GitLab is a web-based DevOps platform that provides a complete solution for the software development lifecycle. GitLab emphasizes an all-in-one approach, integrating various development tools into a single platform. It's available as both a cloud-hosted service and a self-hosted solution, giving organizations flexibility in deployment. GitLab's focus on DevOps practices and its comprehensive feature set make it popular among enterprises and teams seeking a unified platform for their entire development workflow. While similar to GitHub in many respects, GitLab's integrated CI/CD capabilities and self-hosting options are often cited as key differentiators. Visit the following resources to learn more: -- [@article@GitLab Documentation](https://docs.gitlab.com/) -- [@opensource@GitLab Website](https://gitlab.com/) +- [@official@GitLab Documentation](https://docs.gitlab.com/) +- [@official@GitLab Website](https://gitlab.com/) - [@article@Development: Connect git to GitLab for Small Projects](https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/) - [@feed@Explore top posts about GitLab](https://app.daily.dev/tags/gitlab?ref=roadmapsh) diff --git a/src/data/roadmaps/frontend/content/graphql@L7AllJfKvClaam3y-u6DP.md b/src/data/roadmaps/frontend/content/graphql@L7AllJfKvClaam3y-u6DP.md index 2d5100cbd..ff6c03a06 100644 --- a/src/data/roadmaps/frontend/content/graphql@L7AllJfKvClaam3y-u6DP.md +++ b/src/data/roadmaps/frontend/content/graphql@L7AllJfKvClaam3y-u6DP.md @@ -1,12 +1,11 @@ # Graphql -GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. +GraphQL is a query language and runtime for APIs, developed by Facebook. GraphQL's flexibility and efficiency make it popular for building complex applications, especially those with diverse client requirements. It's particularly useful for mobile applications where bandwidth efficiency is crucial. While it requires a paradigm shift from REST, many developers and organizations find GraphQL's benefits outweigh the learning curve, especially for large-scale or rapidly evolving APIs. Visit the following resources to learn more: +- [@roadmap@GraphQL Roadmap](/graphql) - [@official@Introduction to GraphQL](https://graphql.org/learn/) -- [@article@The Fullstack Tutorial for GraphQL](https://www.howtographql.com/) -- [@article@GraphQL Tutorials](https://odyssey.apollographql.com/) - [@video@GraphQL Course for Beginners](https://www.youtube.com/watch?v=ed8SzALpx1Q) - [@article@Introduction to GraphQL](https://thenewstack.io/introduction-to-graphql/) - [@article@How to Execute a Simple GraphQL Query](https://thenewstack.io/how-to-execute-a-simple-graphql-query/) diff --git a/src/data/roadmaps/frontend/content/how-does-the-internet-work@yCnn-NfSxIybUQ2iTuUGq.md b/src/data/roadmaps/frontend/content/how-does-the-internet-work@yCnn-NfSxIybUQ2iTuUGq.md index f37ee0060..25659f641 100644 --- a/src/data/roadmaps/frontend/content/how-does-the-internet-work@yCnn-NfSxIybUQ2iTuUGq.md +++ b/src/data/roadmaps/frontend/content/how-does-the-internet-work@yCnn-NfSxIybUQ2iTuUGq.md @@ -1,11 +1,10 @@ -# Internet +# How Does The Internet Work -The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. +The Internet works through a global network of interconnected computers and servers, communicating via standardized protocols. Data is broken into packets and routed through various network nodes using the Internet Protocol (IP). These packets travel across different physical infrastructures, including fiber optic cables, satellites, and wireless networks. The Transmission Control Protocol (TCP) ensures reliable delivery and reassembly of packets at their destination. Domain Name System (DNS) servers translate human-readable website names into IP addresses. When you access a website, your device sends a request to the appropriate server, which responds with the requested data. This process, facilitated by routers, switches, and other networking equipment, enables the seamless exchange of information across vast distances, forming the backbone of our digital communications. Visit the following resources to learn more: - [@article@How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work) - [@article@How Does the Internet Work? MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) - [@roadmap.sh@Introduction to Internet](/guides/what-is-internet) -- [@video@How does the Internet work?](https://www.youtube.com/watch?v=TNQsmPf24go) - [@video@How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) diff --git a/src/data/roadmaps/frontend/content/html-templates@Hk8AVonOd693_y1sykPqd.md b/src/data/roadmaps/frontend/content/html-templates@Hk8AVonOd693_y1sykPqd.md index 4e3e2956e..5250ffaf5 100644 --- a/src/data/roadmaps/frontend/content/html-templates@Hk8AVonOd693_y1sykPqd.md +++ b/src/data/roadmaps/frontend/content/html-templates@Hk8AVonOd693_y1sykPqd.md @@ -5,4 +5,5 @@ The `