admin/developer-roadmap
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Files
c8ca880b08dc2a76cd6c7e10045dc2ca72373203
developer-roadmap/public/roadmap-content/frontend.json
T

2782 lines
113 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"VlNNwIEDWqQXtqkHWJYzC": {
"title": "Internet",
"description": "The Internet is a global network of interconnected computers using TCP/IP protocols, connecting billions of devices worldwide. Revolutionized communication, commerce, education, and entertainment. Enables web browsing, streaming, and diverse applications while presenting privacy and security challenges.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Introduction to Internet",
"url": "https://roadmap.sh/guides/what-is-internet",
"type": "article"
},
{
"title": "The Internet",
"url": "https://en.wikipedia.org/wiki/Internet",
"type": "article"
}
]
},
"yCnn-NfSxIybUQ2iTuUGq": {
"title": "How does the internet work?",
"description": "The internet is a global network connecting computers and devices for information sharing. Enables browsing, email, streaming, and communication through interconnected systems. Acts as worldwide infrastructure facilitating access to online resources and services.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Introduction to Internet",
"url": "https://roadmap.sh/guides/what-is-internet",
"type": "article"
},
{
"title": "How does the Internet Work?",
"url": "https://cs.fyi/guide/how-does-internet-work",
"type": "article"
},
{
"title": "How Does the Internet Work? MDN Docs",
"url": "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work",
"type": "article"
},
{
"title": "How the Internet Works in 5 Minutes",
"url": "https://www.youtube.com/watch?v=7_LPdttKXPc",
"type": "video"
}
]
},
"R12sArWVpbIs_PHxBqVaR": {
"title": "What is HTTP?",
"description": "HTTP (Hypertext Transfer Protocol) enables browser-server communication through requests and responses. Stateless protocol using methods like GET and POST. HTTPS provides encrypted security. Newer versions (HTTP/2, HTTP/3) offer improved performance. Fundamental for web development understanding.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Everything you need to know about HTTP",
"url": "https://cs.fyi/guide/http-in-depth",
"type": "article"
},
{
"title": "What is HTTP?",
"url": "https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/",
"type": "article"
},
{
"title": "How HTTPS Works",
"url": "https://howhttps.works",
"type": "article"
},
{
"title": "HTTP/3 Is Now a Standard: Why Use It and How to Get Started",
"url": "https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/",
"type": "article"
}
]
},
"ZhSuu2VArnzPDp6dPQQSC": {
"title": "What is Domain Name?",
"description": "Domain names are human-friendly web addresses (e.g., [google.com](http://google.com)) substituting numerical IP addresses. Comprise second-level (\"google\") and top-level (\".com\") domains. Registered through registrars, essential for branding and online presence. DNS translates names to IP addresses for accessibility.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is a Domain Name?",
"url": "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name",
"type": "article"
},
{
"title": "What is a Domain Name? | Domain name vs. URL",
"url": "https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/",
"type": "article"
},
{
"title": "What is a Domain Name?",
"url": "https://www.youtube.com/watch?v=lMHzpBwPuG8",
"type": "video"
}
]
},
"aqMaEY8gkKMikiqleV5EP": {
"title": "What is hosting?",
"description": "Web hosting stores website files on servers, making sites accessible online. Types include shared (multiple sites per server) and dedicated (exclusive server) hosting. Providers offer additional services like email, domains, and security certificates. Critical for website performance and accessibility.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is Web Hosting?",
"url": "https://www.namecheap.com/hosting/what-is-web-hosting-definition/",
"type": "article"
},
{
"title": "Different Types of Web Hosting Explained",
"url": "https://www.youtube.com/watch?v=AXVZYzw8geg",
"type": "video"
},
{
"title": "Where to Host a Fullstack Project on a Budget",
"url": "https://www.youtube.com/watch?v=Kx_1NYYJS7Q",
"type": "video"
}
]
},
"hkxw9jPGYphmjhTjw8766": {
"title": "DNS and how it works?",
"description": "DNS (Domain Name System) translates human-readable domain names into IP addresses through a global, decentralized server network. Enables easy internet navigation by converting names like [www.example.com](http://www.example.com) to numeric addresses browsers can connect to.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is DNS?",
"url": "https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/",
"type": "article"
},
{
"title": "Mess with DNS - DNS Playground",
"url": "https://messwithdns.net/",
"type": "article"
},
{
"title": "How DNS works (comic)",
"url": "https://howdns.works/",
"type": "article"
},
{
"title": "Explore top posts about DNS",
"url": "https://app.daily.dev/tags/dns?ref=roadmapsh",
"type": "article"
},
{
"title": "DNS and How does it Work?",
"url": "https://www.youtube.com/watch?v=Wj0od2ag5sk",
"type": "video"
}
]
},
"P82WFaTPgQEPNp5IIuZ1Y": {
"title": "Browsers and how they work?",
"description": "Web browsers request and display websites by interpreting HTML, CSS, and JavaScript. Use rendering engines (Blink, Gecko) for display and JavaScript engines (V8) for code execution. Handle security, bookmarks, history, and user interactions for web navigation.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "How Browsers Work",
"url": "https://www.ramotion.com/blog/what-is-web-browser/",
"type": "article"
},
{
"title": "Populating the Page: How Browsers Work",
"url": "https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work",
"type": "article"
},
{
"title": "Explore top posts about Browsers",
"url": "https://app.daily.dev/tags/browsers?ref=roadmapsh",
"type": "article"
},
{
"title": "How Do Web Browsers Work?",
"url": "https://www.youtube.com/watch?v=5rLFYtXHo9s",
"type": "video"
}
]
},
"yWG2VUkaF5IJVVut6AiSy": {
"title": "HTML",
"description": "HTML (Hypertext Markup Language) is the standard for creating web pages, structuring content with elements and attributes. Browsers interpret HTML tags to render pages. HTML5, the current standard, adds semantic elements, multimedia support, and form controls. It works with CSS for styling and JavaScript for interactivity, forming web development's foundation.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects",
"url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/",
"type": "course"
},
{
"title": "Explore top posts about HTML",
"url": "https://app.daily.dev/tags/html?ref=roadmapsh",
"type": "article"
},
{
"title": "HTML Full Course for Beginners",
"url": "https://youtu.be/mJgBOIoGihA",
"type": "video"
},
{
"title": "HTML Full Course - Build a Website Tutorial",
"url": "https://www.youtube.com/watch?v=pQN-pnXPaVg",
"type": "video"
}
]
},
"PCirR2QiFYO89Fm-Ev3o1": {
"title": "Learn the basics",
"description": "HTML (HyperText Markup Language) is the structural backbone of webpages, defining content organization. Works with CSS for styling and JavaScript for interactivity. Forms the foundational skeleton of websites, providing semantic structure for web content.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "web.dev: Learn HTML",
"url": "https://web.dev/learn/html",
"type": "article"
},
{
"title": "HTML Full Course - Build a Website Tutorial",
"url": "https://www.youtube.com/watch?v=kUMe1FH4CHE",
"type": "video"
}
]
},
"z8-556o-PaHXjlytrawaF": {
"title": "Writing Semantic HTML",
"description": "Semantic HTML uses meaningful markup elements (header, nav, main, article, section, aside, footer) to convey content meaning, not just appearance. Enhances accessibility, SEO, and code readability. Aids screen readers and browser rendering for better user experience.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Guide to Writing Semantic HTML",
"url": "https://cs.fyi/guide/writing-semantic-html",
"type": "article"
},
{
"title": "Semantic HTML - web.dev",
"url": "https://web.dev/learn/html/semantic-html/",
"type": "article"
},
{
"title": "Why & When to Use Semantic HTML Elements over Div(s)",
"url": "https://www.youtube.com/watch?v=bOUhq46fd5g",
"type": "video"
}
]
},
"V5zucKEHnIPPjwHqsMPHF": {
"title": "Forms and Validations",
"description": "Client-side form validation checks required fields and data formats before server submission. Ensures data integrity, improves user experience with immediate feedback, and reduces server load. Essential for quality data collection and user-friendly interfaces.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "MDN Web Docs: Client-side form validation",
"url": "https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation",
"type": "article"
},
{
"title": "Learn Forms by web.dev",
"url": "https://web.dev/learn/forms/",
"type": "article"
}
]
},
"iJIqi7ngpGHWAqtgdjgxB": {
"title": "Accessibility",
"description": "Website accessibility ensures sites are usable by everyone, including people with disabilities. Involves alt text for images, keyboard navigation, color contrast, and captions. Benefits all users, supports legal compliance, and expands audience reach.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Accessibility for Developers by Google",
"url": "https://web.dev/accessibility",
"type": "article"
},
{
"title": "Explore top posts about Accessibility",
"url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh",
"type": "article"
},
{
"title": "Complete Playlist on Accessibility",
"url": "https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g",
"type": "video"
}
]
},
"mH_qff8R7R6eLQ1tPHLgG": {
"title": "SEO Basics",
"description": "SEO (Search Engine Optimization) improves website visibility in search results through keywords, quality content, fast loading, mobile-friendliness, and trusted backlinks. Includes technical elements like sitemaps, HTTPS, and good navigation to increase organic traffic.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Complete SEO Course for Beginners",
"url": "https://www.youtube.com/watch?v=xsVTqzratPs",
"type": "course"
},
{
"title": "SEO for 2024: The Complete Guide",
"url": "https://www.youtube.com/watch?v=8YDUP-RH_4g",
"type": "course"
},
{
"title": "Google Search Central — SEO Docs",
"url": "https://developers.google.com/search/docs",
"type": "article"
},
{
"title": "Explore top posts about SEO",
"url": "https://app.daily.dev/tags/seo?ref=roadmapsh",
"type": "article"
}
]
},
"ZhJhf1M2OphYbEmduFq-9": {
"title": "CSS",
"description": "CSS (Cascading Style Sheets) styles HTML documents, controlling layout, colors, and fonts. Separates design from content using selectors to target elements. Features responsive design with media queries, cascade rules, inheritance, and specificity. Modern CSS includes Flexbox, Grid, animations, and transitions.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "CSS Complete Course",
"url": "https://youtu.be/n4R2E7O-Ngo",
"type": "course"
},
{
"title": "HTML & CSS Full Course - Beginner to Pro",
"url": "https://www.youtube.com/watch?v=G3e-cpL7ofc",
"type": "course"
},
{
"title": "Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects",
"url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/",
"type": "course"
},
{
"title": "Web.dev by Google — Learn CSS",
"url": "https://web.dev/learn/css/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
}
]
},
"YFjzPKWDwzrgk2HUX952L": {
"title": "Learn the basics",
"description": "CSS (Cascading Style Sheets) styles websites controlling colors, fonts, layouts, and visual design. Essential web technology alongside HTML and JavaScript. Makes frontend attractive and user-friendly through comprehensive visual control and responsive design capabilities.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "web.dev — Learn CSS",
"url": "https://web.dev/learn/css/",
"type": "article"
},
{
"title": "CSS Crash Course For Absolute Beginners",
"url": "https://www.youtube.com/watch?v=yfoY53QXEnI",
"type": "video"
},
{
"title": "CSS Masterclass - Tutorial & Course for Beginners",
"url": "https://www.youtube.com/watch?v=FqmB-Zj2-PA",
"type": "video"
}
]
},
"dXeYVMXv-3MRQ1ovOUuJW": {
"title": "Making Layouts",
"description": "Web layouts arrange content effectively using modern CSS techniques like Flexbox (1D) and CSS Grid (2D). Responsive design adapts to all devices. Frameworks like Bootstrap and Tailwind accelerate development. Good layouts prioritize content hierarchy, user flow, and accessibility.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn and Practice Flexbox",
"url": "https://flexboxfroggy.com/",
"type": "article"
},
{
"title": "The Box Model",
"url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model",
"type": "article"
},
{
"title": "Learn CSS Grid - Course",
"url": "https://cssgrid.io/",
"type": "article"
},
{
"title": "Get on the Grid at Last with the CSS Grid Layout Module",
"url": "https://thenewstack.io/get-grid-last-css-grid-template-markup/",
"type": "article"
}
]
},
"TKtWmArHn7elXRJdG6lDQ": {
"title": "Responsive Design",
"description": "Responsive web design ensures websites adapt to all device sizes using flexible layouts, scalable images, and CSS media queries. Provides optimal user experience across desktop, tablet, and mobile devices without requiring separate sites for each platform.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Conquering Responsive Layouts",
"url": "https://courses.kevinpowell.co/conquering-responsive-layouts",
"type": "course"
},
{
"title": "Learn Responsive Design",
"url": "https://web.dev/learn/design/",
"type": "article"
},
{
"title": "The Beginner's Guide to Responsive Web Design",
"url": "https://kinsta.com/blog/responsive-web-design/",
"type": "article"
},
{
"title": "Introduction To Responsive Web Design",
"url": "https://www.youtube.com/watch?v=srvUrASNj0s",
"type": "video"
}
]
},
"ODcfFEorkfJNupoQygM53": {
"title": "JavaScript",
"description": "JavaScript is a versatile programming language that makes websites interactive. Runs in browsers, servers (Node.js), and desktop applications. Features dynamic typing, event-driven programming, and constant evolution. Essential for modern web development across frontend and backend.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated JavaScript Roadmap",
"url": "https://roadmap.sh/javascript",
"type": "article"
},
{
"title": "The Modern JavaScript Tutorial",
"url": "https://javascript.info/",
"type": "article"
},
{
"title": "Build 30 Javascript projects in 30 days",
"url": "https://javascript30.com/",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
}
]
},
"A4brX0efjZ0FFPTB4r6U0": {
"title": "Fetch API / Ajax (XHR)",
"description": "Fetch API is the modern JavaScript interface for making HTTP requests, replacing XMLHttpRequest. Uses Promises for cleaner asynchronous code, supports various data types and HTTP methods. Now the standard for client-server communication with broad browser support.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Fetch API MDN Docs",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",
"type": "article"
},
{
"title": "A Simple Guide to JavaScript Fetch API",
"url": "https://www.javascripttutorial.net/web-apis/javascript-fetch-api/",
"type": "article"
},
{
"title": "Introduction to Fetch",
"url": "https://web.dev/introduction-to-fetch/",
"type": "article"
},
{
"title": "JavaScript Fetch API",
"url": "https://www.youtube.com/watch?v=-ZI0ea5O2oA",
"type": "video"
}
]
},
"0MAogsAID9R04R5TTO2Qa": {
"title": "Learn DOM Manipulation",
"description": "DOM (Document Object Model) represents HTML/XML documents as programmable objects. Enables dynamic manipulation of page structure, content, and styles through JavaScript. Allows interaction with elements, attributes, and events for interactive webpages.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "DOM Tree",
"url": "https://javascript.info/dom-nodes",
"type": "article"
},
{
"title": "Learn the HTML DOM with Exercises - CodeGuage",
"url": "https://www.codeguage.com/courses/js/html-dom-introduction",
"type": "article"
},
{
"title": "Explore top posts about DOM",
"url": "https://app.daily.dev/tags/dom?ref=roadmapsh",
"type": "article"
},
{
"title": "What is DOM, Shadow DOM and Virtual DOM?",
"url": "https://www.youtube.com/watch?v=7Tok22qxPzQ",
"type": "video"
},
{
"title": "JavaScript DOM Crash Course",
"url": "https://www.youtube.com/watch?v=0ik6X4DJKCc",
"type": "video"
}
]
},
"wQSjQqwKHfn5RGPk34BWI": {
"title": "Learn the Basics",
"description": "JavaScript adds interactivity to webpages through sliders, click events, pop-ups, and dynamic behavior. Transforms static HTML structure and CSS styling into interactive, responsive user experiences. Essential for modern web functionality and user engagement.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The Modern JavaScript Tutorial",
"url": "https://javascript.info/",
"type": "article"
},
{
"title": "JavaScript Tutorial Full Course - Beginner to Pro (2024)",
"url": "https://www.youtube.com/watch?v=EerdGm-ehJQ",
"type": "video"
}
]
},
"MXnFhZlNB1zTsBFDyni9H": {
"title": "VCS Hosting",
"description": "Repository hosting services (GitHub, GitLab, Bitbucket) provide platforms for storing, managing, and collaborating on software projects using Git version control. Facilitate teamwork, code sharing, project tracking, and distributed software development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Git & GitHub Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "GitHub Website",
"url": "https://github.com",
"type": "article"
},
{
"title": "GitLab Website",
"url": "https://about.gitlab.com",
"type": "article"
},
{
"title": "Codeberg Website",
"url": "https://codeberg.org/",
"type": "article"
},
{
"title": "BitBucket Website",
"url": "https://bitbucket.com",
"type": "article"
}
]
},
"NIY7c4TQEEHx0hATu-k5C": {
"title": "Version Control Systems",
"description": "Version Control Systems (VCS) like Git track code changes and enable developer collaboration through modification history. Features include branching, merging, reverting, remote repositories, pull requests, and code reviews. Essential for modern software development productivity, quality, and teamwork.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Git & GitHub Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "Git Documentation",
"url": "https://git-scm.com/docs",
"type": "article"
},
{
"title": "Learn Git by Atlassian",
"url": "https://www.atlassian.com/git",
"type": "article"
},
{
"title": "What is a Version Control System and why you should always use it",
"url": "https://www.youtube.com/watch?v=IeXhYROClZk",
"type": "video"
}
]
},
"R_I4SGYqLk5zze5I1zS_E": {
"title": "Git",
"description": "Git is a distributed version control system tracking code changes and enabling collaborative development. Features branching, merging, and complete project history. Allows offline work with local repositories. Fast, flexible, and the most popular VCS for software projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Git & GitHub Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "Git Cheat Sheet",
"url": "https://cs.fyi/guide/git-cheatsheet",
"type": "article"
},
{
"title": "Tutorial: Git for Absolutely Everyone",
"url": "https://thenewstack.io/tutorial-git-for-absolutely-everyone/",
"type": "article"
},
{
"title": "Explore top posts about Git",
"url": "https://app.daily.dev/tags/git?ref=roadmapsh",
"type": "article"
},
{
"title": "Git & GitHub Crash Course For Beginners",
"url": "https://www.youtube.com/watch?v=SWYqp7iY_Tc",
"type": "video"
}
]
},
"IqvS1V-98cxko3e9sBQgP": {
"title": "Package Managers",
"description": "Package managers automate software package installation, updates, and dependency management. Examples include npm (JavaScript), pip (Python), and yarn. Enable code sharing, reuse, and consistent project setups. Essential for modern development workflows and team collaboration.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PNPM: The Faster, More Performant NPM",
"url": "https://pnpm.io/",
"type": "article"
},
{
"title": "Yarn - Getting Started",
"url": "https://yarnpkg.com/en/docs/getting-started",
"type": "article"
},
{
"title": "An Absolute Beginners Guide to Using npm",
"url": "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/",
"type": "article"
},
{
"title": "NPM Crash Course",
"url": "https://www.youtube.com/watch?v=jHDhaSSKmB0",
"type": "video"
},
{
"title": "Yarn Crash Course",
"url": "https://www.youtube.com/watch?v=g9_6KmiBISk",
"type": "video"
}
]
},
"qmTVMJDsEhNIkiwE_UTYu": {
"title": "GitHub",
"description": "GitHub is the leading Git repository hosting platform for open-source and private projects. Owned by Microsoft since 2018, it's essential for modern software development, project showcasing, and open-source contributions. Central hub for developer collaboration and code sharing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Git & GitHub Roadmap",
"url": "https://roadmap.sh/git-github",
"type": "article"
},
{
"title": "GitHub: Quickstart",
"url": "https://docs.github.com/en/get-started/quickstart/hello-world",
"type": "article"
},
{
"title": "Learn GitHub by doing",
"url": "https://skills.github.com/",
"type": "article"
},
{
"title": "Explore top posts about GitHub",
"url": "https://app.daily.dev/tags/github?ref=roadmapsh",
"type": "article"
},
{
"title": "What is GitHub?",
"url": "https://www.youtube.com/watch?v=w3jLJU7DT5E",
"type": "video"
}
]
},
"zIoSJMX3cuzCgDYHjgbEh": {
"title": "GitLab",
"description": "GitLab is a comprehensive DevOps platform offering integrated development tools including Git hosting, CI/CD, issue tracking, and deployment. Available as cloud service or self-hosted solution. Popular with enterprises seeking unified development workflows and built-in automation capabilities.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "GitLab Website",
"url": "https://gitlab.com/",
"type": "article"
},
{
"title": "GitLab Documentation",
"url": "https://docs.gitlab.com/",
"type": "article"
},
{
"title": "Development: Connect git to GitLab for Small Projects",
"url": "https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/",
"type": "article"
},
{
"title": "Explore top posts about GitLab",
"url": "https://app.daily.dev/tags/gitlab?ref=roadmapsh",
"type": "article"
}
]
},
"DILBiQp7WWgSZ5hhtDW6A": {
"title": "Bitbucket",
"description": "Bitbucket is Atlassian's Git and Mercurial repository hosting platform supporting open-source and private projects. Features pull requests, code reviews, and integrates with Atlassian tools like Jira. Offers cloud and self-hosted options with CI/CD through Bitbucket Pipelines.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "How to use BitBucket?",
"url": "https://bitbucket.org/product/guides",
"type": "article"
},
{
"title": "BitBucket Website",
"url": "https://bitbucket.com/",
"type": "article"
},
{
"title": "Explore top posts about Bitbucket",
"url": "https://app.daily.dev/tags/bitbucket?ref=roadmapsh",
"type": "article"
}
]
},
"yrq3nOwFREzl-9EKnpU-e": {
"title": "yarn",
"description": "Yarn is Facebook's JavaScript package manager offering fast, reliable, secure alternative to npm. Features lockfile consistency, parallel installations, offline mode, and checksum verification. Yarn Berry with Plug'n'Play improves performance for large projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Yarn - Getting Started",
"url": "https://yarnpkg.com/en/docs/getting-started",
"type": "article"
},
{
"title": "Explore top posts about Yarn",
"url": "https://app.daily.dev/tags/yarn?ref=roadmapsh",
"type": "article"
},
{
"title": "Yarn Crash Course",
"url": "https://www.youtube.com/watch?v=g9_6KmiBISk",
"type": "video"
}
]
},
"SLxA5qJFp_28TRzr1BjxZ": {
"title": "pnpm",
"description": "pnpm (performant npm) is a fast, disk-efficient JavaScript package manager using global storage with symlinks. Saves disk space, ensures strict package.json compliance, supports monorepos, and provides better security through dependency isolation. Growing popularity for speed and efficiency.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PNPM Website",
"url": "https://pnpm.io",
"type": "article"
},
{
"title": "Meet PNPM: The Faster, More Performant NPM",
"url": "https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9",
"type": "article"
},
{
"title": "Get started with pnpm",
"url": "https://www.youtube.com/watch?v=MvbReZDSKHI",
"type": "video"
}
]
},
"ib_FHinhrw8VuSet-xMF7": {
"title": "npm",
"description": "npm (Node Package Manager) is the primary JavaScript package manager for finding, sharing, and managing code dependencies. Uses package.json to track project requirements and enables consistent builds across environments. Remains the most popular choice despite alternatives like Yarn and pnpm.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "How to NPM",
"url": "https://github.com/workshopper/how-to-npm",
"type": "opensource"
},
{
"title": "NPM Website",
"url": "https://www.npmjs.com/",
"type": "article"
},
{
"title": "NPM Documentation",
"url": "https://docs.npmjs.com/",
"type": "article"
},
{
"title": "Modern JavaScript for Dinosaurs",
"url": "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html",
"type": "article"
},
{
"title": "Explore top posts about NPM",
"url": "https://app.daily.dev/tags/npm?ref=roadmapsh",
"type": "article"
},
{
"title": "NPM Tutorial for Beginners",
"url": "https://www.youtube.com/watch?v=2V1UUhBJ62Y",
"type": "video"
}
]
},
"eXezX7CVNyC1RuyU_I4yP": {
"title": "Pick a Framework",
"description": "Web frameworks are development toolkits providing libraries, structure, rules, and tools for building applications. Different frameworks offer varying features based on project needs. Popular examples include React, Angular, and Vue, each with unique strengths and capabilities.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "15 Crazy New JS Framework Features You Don't Know Yet",
"url": "https://www.youtube.com/watch?v=466U-2D86bc",
"type": "video"
},
{
"title": "Which JS Framework is Best?",
"url": "https://www.youtube.com/watch?v=cuHDQhDhvPE",
"type": "video"
}
]
},
"-bHFIiXnoUQSov64WI9yo": {
"title": "Angular",
"description": "Angular is Google's TypeScript framework for building single-page applications (SPAs). Features reusable components, two-way data binding, dependency injection, and robust template system. Includes testing tools, routing, and state management. Ideal for large, complex enterprise applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Angular Roadmap",
"url": "https://roadmap.sh/angular",
"type": "article"
},
{
"title": "Getting started with Angular",
"url": "https://angular.dev/tutorials/learn-angular",
"type": "article"
},
{
"title": "Explore top posts about Angular",
"url": "https://app.daily.dev/tags/angular?ref=roadmapsh",
"type": "article"
},
{
"title": "Angular for Beginners Course",
"url": "https://www.youtube.com/watch?v=3qBXWUpoPHo",
"type": "video"
}
]
},
"ERAdwL1G9M1bnx-fOm5ZA": {
"title": "Vue.js",
"description": "Vue.js is a JavaScript framework for building website interfaces. It's easy to start with and can be added to projects bit by bit. Vue uses templates and a virtual DOM (a lightweight copy of the real page) to show things on screen efficiently. It has a system of reusable components, making code organized. While Vue mainly handles what users see, it works well with other tools for things like managing data or page navigation. It's known for being easy to learn, flexible, and fast, making it popular for all kinds of projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Vue Roadmap",
"url": "https://roadmap.sh/vue",
"type": "article"
},
{
"title": "Vue.js Website",
"url": "https://vuejs.org/",
"type": "article"
},
{
"title": "Explore top posts about Vue.js",
"url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh",
"type": "article"
},
{
"title": "Vue.js Course for Beginners",
"url": "https://www.youtube.com/watch?v=VeNfHj6MhgA",
"type": "video"
}
]
},
"tG5v3O4lNIFc2uCnacPak": {
"title": "React",
"description": "React is a JavaScript tool from Facebook for building UIs, especially for single-page apps. It lets you create reusable UI parts that update when data changes. React uses a virtual DOM for speed and has a one-way data flow. This component style makes code neat and reusable. React also works with tools like Redux for data management and React Native for mobile apps. It's popular because it's clear, fast, and has a big community.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Full Stack React Developer Course",
"url": "https://www.youtube.com/watch?v=Bvwq_S0n2pk",
"type": "course"
},
{
"title": "Visit Dedicated React Roadmap",
"url": "https://roadmap.sh/react",
"type": "article"
},
{
"title": "React Website",
"url": "https://react.dev",
"type": "article"
},
{
"title": "Explore top posts about React",
"url": "https://app.daily.dev/tags/react?ref=roadmapsh",
"type": "article"
}
]
},
"ZR-qZ2Lcbu3FtqaMd3wM4": {
"title": "Svelte",
"description": "Svelte is a JavaScript tool for building UIs. Unlike others, Svelte does its main work during build time, not in the browser. It turns your code into small, fast, plain JavaScript. Svelte uses components and has a simple syntax, so you write less code. It includes features for managing data, styling, and animations. Because Svelte doesn't use a virtual DOM, pages load and update quickly. It's liked for its simplicity and speed.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Svelte Course Playlist for beginners",
"url": "https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO",
"type": "course"
},
{
"title": "Svelte Website",
"url": "https://svelte.dev/",
"type": "article"
},
{
"title": "Svelte and the Future of Frontend Development",
"url": "https://thenewstack.io/svelte-and-the-future-of-front-end-development/",
"type": "article"
},
{
"title": "Explore top posts about Svelte",
"url": "https://app.daily.dev/tags/svelte?ref=roadmapsh",
"type": "article"
}
]
},
"DxOSKnqAjZOPP-dq_U7oP": {
"title": "Solid JS",
"description": "SolidJS is a JavaScript tool for building website interfaces that is known for being very fast and efficient. It updates only the parts of the page that change, which makes it perform well. SolidJS doesn't use a virtual DOM; instead, it directly changes the real DOM. Its syntax is like React, so many developers find it familiar. It supports JSX, has built-in ways to manage data, and is small in size. SolidJS is getting popular for its speed, simplicity, and smart way of handling updates.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "SolidJS Website",
"url": "https://www.solidjs.com/",
"type": "article"
},
{
"title": "SolidJS Tutorial",
"url": "https://www.solidjs.com/tutorial/introduction_basics",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
},
{
"title": "SolidJS in 100 Seconds",
"url": "https://www.youtube.com/watch?v=hw3Bx5vxKl0",
"type": "video"
}
]
},
"N5DCb6bDfgUnSdHPLYY4g": {
"title": "Qwik",
"description": "Qwik is a frontend framework optimizing for fast loading through \"resumable\" architecture. Apps start with minimal JavaScript, loading interactive code only when needed. Makes large websites feel instantly fast through intelligent code delivery. Gaining attention for performance innovations.\n\nLearn more from the following resources:",
"links": [
{
"title": "Qwik Website",
"url": "https://qwik.dev",
"type": "article"
},
{
"title": "Qwik - The world's first O(1) JavaScript Framework?",
"url": "https://www.youtube.com/watch?v=x2eF3YLiNhY",
"type": "video"
}
]
},
"XDTD8el6OwuQ55wC-X4iV": {
"title": "Writing CSS",
"description": "Modern CSS creates responsive designs using media queries, flexible typography, CSS-in-JS, and frameworks like Tailwind. Features CSS Logical Properties for internationalization and CSS Houdini for custom styling. Goals: performance, maintainability, and accessible designs across all devices.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Modern CSS: A Comprehensive Guide",
"url": "https://moderncss.dev/",
"type": "article"
},
{
"title": "CSS-Tricks: Modern CSS",
"url": "https://css-tricks.com/modern-css/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
}
]
},
"eghnfG4p7i-EDWfp3CQXC": {
"title": "Tailwind",
"description": "Tailwind CSS is a utility-first CSS framework providing small, composable classes for rapid custom design development. Features mobile-first approach, automatic unused style removal (purging), and flexible customization. Enables quick responsive design prototyping without writing custom CSS.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Tailwind CSS Full Course for Beginners",
"url": "https://www.youtube.com/watch?v=lCxcTsOHrjo",
"type": "course"
},
{
"title": "Tailwind Website",
"url": "https://tailwindcss.com",
"type": "article"
},
{
"title": "Online Playground",
"url": "https://play.tailwindcss.com",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
},
{
"title": "Should You Use Tailwind CSS?",
"url": "https://www.youtube.com/watch?v=hdGsFpZ0J2E",
"type": "video"
},
{
"title": "Official Screencasts",
"url": "https://www.youtube.com/c/TailwindLabs/videos",
"type": "video"
}
]
},
"nPg_YWpMJtlhU2t2UD_6B": {
"title": "CSS Architecture",
"description": "CSS architecture organizes styles in large projects using naming conventions (BEM), component-based design, preprocessors, CSS modules, and utility classes. Aims for scalability, maintainability, reduced conflicts, better collaboration, and easier updates through systematic approaches.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "How to Organize Your CSS with a Modular Architecture",
"url": "https://snipcart.com/blog/organize-css-modular-architecture",
"type": "article"
},
{
"title": "Explore top posts about Architecture",
"url": "https://app.daily.dev/tags/architecture?ref=roadmapsh",
"type": "article"
},
{
"title": "Modern CSS For Dynamic Component-Based Architecture",
"url": "https://www.youtube.com/watch?v=Y50iqMlrqU8",
"type": "video"
}
]
},
"UTW1pP59dUehuf0zeHXqL": {
"title": "CSS Preprocessors",
"description": "CSS preprocessors (Sass, Less, Stylus) extend CSS with variables, nesting, mixins, and functions for easier writing and management. Compile to regular CSS while reducing repetition and improving organization. Make CSS more powerful and maintainable for large projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Sass Website",
"url": "https://sass-lang.com/",
"type": "article"
},
{
"title": "Less Website",
"url": "https://lesscss.org/",
"type": "article"
},
{
"title": "Stylus Website",
"url": "https://stylus-lang.com/",
"type": "article"
},
{
"title": "PostCSS Website",
"url": "https://postcss.org/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
}
]
},
"dRDmS072xeNLX7p_X565w": {
"title": "BEM",
"description": "BEM (Block, Element, Modifier) is a CSS naming methodology creating clear relationships between HTML and CSS. Makes styles more modular, reusable, and understandable through consistent naming conventions. Especially valuable for large projects requiring maintainable code.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "BEM Official Website",
"url": "https://en.bem.info",
"type": "article"
},
{
"title": "BEM Documentation",
"url": "https://en.bem.info/methodology/quick-start",
"type": "article"
},
{
"title": "5 Reasons To Use BEM Notation",
"url": "https://www.elpassion.com/blog/5-reasons-to-use-bem-a",
"type": "article"
}
]
},
"kukEE5rMSPa4NeNjx21kt": {
"title": "Sass",
"description": "Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor adding variables, nested rules, mixins, and functions. Compiles to regular CSS with two syntaxes: indented Sass and SCSS. Helps organize styles, reduces repetition, and improves maintainability in large projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Sass Website",
"url": "https://sass-lang.com/",
"type": "article"
},
{
"title": "Online Sass Playground",
"url": "https://sass-lang.com/playground/",
"type": "article"
},
{
"title": "Sass Tutorial for Beginners",
"url": "https://www.youtube.com/watch?v=_a5j7KoflTs",
"type": "video"
},
{
"title": "Sass, BEM, & Responsive Design",
"url": "https://www.youtube.com/watch?v=jfMHA8SqUL4",
"type": "video"
}
]
},
"9WlPENh9g1xOv-zA64Tfg": {
"title": "PostCSS",
"description": "PostCSS transforms CSS using JavaScript plugins for automation, browser prefixes, and future CSS features. More flexible than preprocessors with plugin-based architecture. Popular plugins: Autoprefixer, cssnext, cssnano. Integrates with build tools for modern development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PostCSS Website",
"url": "https://postcss.org/",
"type": "article"
},
{
"title": "Explore top posts about CSS",
"url": "https://app.daily.dev/tags/css?ref=roadmapsh",
"type": "article"
},
{
"title": "Learn PostCSS in 15 minutes",
"url": "https://www.youtube.com/watch?v=Kn2SKUOaoT4",
"type": "video"
}
]
},
"i9z0stM4uKu27Cz6NIgNX": {
"title": "Build Tools",
"description": "Build tools automate making apps from source code. They compile, link, minify (shrink), and bundle code, run tests, and manage dependencies. Examples are Webpack, Vite, and Parcel for web development. Build tools speed up development, ensure consistency, and optimize code for users. They're key for modern software, especially big projects, making work more efficient and enabling continuous integration (CI).\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Webpack Website",
"url": "https://webpack.js.org/",
"type": "article"
},
{
"title": "Vite Website",
"url": "https://vitejs.dev",
"type": "article"
},
{
"title": "Parcel Website",
"url": "https://parceljs.org/",
"type": "article"
},
{
"title": "Explore top posts about Tools",
"url": "https://app.daily.dev/tags/tools?ref=roadmapsh",
"type": "article"
}
]
},
"9VcGfDBBD8YcKatj4VcH1": {
"title": "Linters and Formatters",
"description": "Linters and formatters improve code quality by finding errors, bugs, and style issues (linters) and automatically fixing formatting like indentation and spacing (formatters). Ensure consistency, readability, and early error detection. Examples: ESLint, Prettier.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What Is a Linter?",
"url": "https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/",
"type": "article"
}
]
},
"hkSc_1x09m7-7BO7WzlDT": {
"title": "Module Bundlers",
"description": "Module bundlers combine multiple JavaScript files into optimized bundles for browsers. Handle dependencies, code transformation, and splitting for performance. Examples: Webpack, Rollup, Parcel. Enable modern JavaScript features, improve load times, and streamline development workflows.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The Complete JavaScript Module Bundlers Guide",
"url": "https://snipcart.com/blog/javascript-module-bundler",
"type": "article"
},
{
"title": "Rollup Bundler",
"url": "https://rollupjs.org/",
"type": "article"
},
{
"title": "Webpack Website",
"url": "https://webpack.js.org/",
"type": "article"
},
{
"title": "Module Bundlers Explained",
"url": "https://www.youtube.com/watch?v=5IG4UmULyoA",
"type": "video"
}
]
},
"NS-hwaWa5ebSmNNRoxFDp": {
"title": "Parcel",
"description": "Parcel is a zero-configuration web app bundler handling JavaScript, CSS, HTML automatically. Features dependency resolution, code transformation, optimization, live reloading, code splitting, and tree-shaking by default. Known for simplicity and speed, ideal for rapid prototyping.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Parcel Website",
"url": "https://parceljs.org/plugin-system/bundler/",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "How to Build a Web App with Parcel.js",
"url": "https://www.youtube.com/watch?v=R02ehdTzi3I",
"type": "video"
}
]
},
"sCjErk7rfWAUvhl8Kfm3n": {
"title": "Rollup",
"description": "Rollup is a JavaScript bundler creating efficient bundles from ES modules. Excels at tree-shaking to remove unused code and supports multiple output formats. Produces smaller bundles than alternatives, ideal for libraries and modern JavaScript projects requiring optimization.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Rollup Website and Docs",
"url": "https://rollupjs.org/",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "How to Set Up JavaScript Bundling Using Rollup",
"url": "https://www.youtube.com/watch?v=ICYLOZuFMz8",
"type": "video"
}
]
},
"twufEtHgxcRUWAUQ9bXus": {
"title": "Webpack",
"description": "Webpack is a JavaScript module bundler processing web resources (JS, CSS, images, fonts). Uses loaders for preprocessing and plugins for optimization. Features code splitting, lazy loading, hot module replacement, and tree shaking. Standard for complex applications despite learning curve.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Webpack",
"url": "https://webpack.js.org/",
"type": "article"
},
{
"title": "Getting Started with Webpack",
"url": "https://webpack.js.org/guides/getting-started/",
"type": "article"
},
{
"title": "A Complete Guide to Webpack 5",
"url": "https://www.valentinog.com/blog/webpack",
"type": "article"
},
{
"title": "Explore top posts about Webpack",
"url": "https://app.daily.dev/tags/webpack?ref=roadmapsh",
"type": "article"
}
]
},
"4W7UXfdKIUsm1bUrjdTVT": {
"title": "esbuild",
"description": "esbuild is an extremely fast JavaScript bundler and minifier written in Go. Handles modern JavaScript, TypeScript, and JSX with near-instant bundling. Simple API with excellent performance for development and as foundation for other tools. Trades some advanced features for speed.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Let's Learn esbuild! (with Sunil Pai) — Learn With Jason",
"url": "https://www.youtube.com/watch?v=KLdF1yu_bmI",
"type": "course"
},
{
"title": "Esbuild Website",
"url": "https://esbuild.github.io/",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "What Is ESBuild?",
"url": "https://www.youtube.com/watch?v=ZY8Vu8cbWF0",
"type": "video"
}
]
},
"0Awx3zEI5_gYEIrD7IVX6": {
"title": "Vite",
"description": "Vite is a modern build tool using native ES modules for instant server starts and fast Hot Module Replacement. Supports Vue, React, Svelte with Rollup for production builds. Features CSS pre-processors and TypeScript integration. Enhances developer experience with faster development cycles.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vite - The Build Tool for the Web",
"url": "https://vite.dev",
"type": "article"
},
{
"title": "Vite Documentation",
"url": "https://vite.dev/guide/",
"type": "article"
},
{
"title": "Explore top posts about Vite",
"url": "https://app.daily.dev/tags/vite?ref=roadmapsh",
"type": "article"
},
{
"title": "Vite Crash Course",
"url": "https://youtu.be/LQQ3CR2JTX8",
"type": "video"
},
{
"title": "Vite Tutorial Video",
"url": "https://www.youtube.com/watch?v=VAeRhmpcWEQ",
"type": "video"
}
]
},
"zbkpu_gvQ4mgCiZKzS1xv": {
"title": "Prettier",
"description": "Prettier automatically formats code for consistency across JavaScript, TypeScript, CSS, and other languages. Enforces opinionated style rules, eliminating style debates and saving time. Integrates with editors and pre-commit hooks. Popular for maintaining uniform code appearance across teams.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Prettier Website",
"url": "https://prettier.io",
"type": "article"
},
{
"title": "Why Prettier",
"url": "https://prettier.io/docs/en/why-prettier.html",
"type": "article"
},
{
"title": "How to set up Prettier",
"url": "https://www.youtube.com/watch?v=DqfQ4DPnRqI",
"type": "video"
}
]
},
"NFjsI712_qP0IOmjuqXar": {
"title": "ESLint",
"description": "ESLint is a JavaScript linter checking code for problems, maintaining consistent style, and finding errors. Highly configurable with custom or preset rules. Supports modern JavaScript, JSX, TypeScript. Integrates with editors and build tools, offers automatic fixing for team consistency.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "ESLint Website",
"url": "https://eslint.org/",
"type": "article"
},
{
"title": "What is ESLint and How to Use ESLint to Detect and Fix Code for JavaScript Projects",
"url": "https://2coffee.dev/en/articles/what-is-eslint-and-how-to-use-eslint-to-detect-fix-code-for-javascript-projects",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
},
{
"title": "ESLint Quickstart - find errors automatically",
"url": "https://www.youtube.com/watch?v=qhuFviJn-es",
"type": "video"
}
]
},
"igg4_hb3XE3vuvY8ufV-4": {
"title": "Testing",
"description": "Testing verifies software functionality and quality through unit, integration, functional, UI/UX, performance, security, accessibility, and compatibility testing. Modern approaches use automated tools, CI/CD pipelines, TDD, and BDD methodologies. Early bug detection improves application reliability.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "The Different Types of Software Tests",
"url": "https://www.atlassian.com/continuous-delivery/software-testing/types-of-software-testing",
"type": "article"
},
{
"title": "Explore top posts about Testing",
"url": "https://app.daily.dev/tags/testing?ref=roadmapsh",
"type": "article"
},
{
"title": "How to Test Web Applications - dotJS 2024",
"url": "https://www.youtube.com/watch?v=l3qjQpYBR8c",
"type": "video"
}
]
},
"hVQ89f6G0LXEgHIOKHDYq": {
"title": "Vitest",
"description": "Vitest is a fast JavaScript/TypeScript testing framework optimized for Vite with Jest-compatible API. Features live test updates, snapshot testing, mocking, code coverage, parallel execution, and watch mode. Designed for Vite projects but works with any JavaScript project.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vitest - Next Generation Testing Framework",
"url": "https://vitest.dev/",
"type": "article"
},
{
"title": "Vitest Documentation",
"url": "https://vitest.dev/guide/",
"type": "article"
},
{
"title": "Vitest Simplified",
"url": "https://www.youtube.com/watch?v=snCLQmINqCU",
"type": "video"
}
]
},
"g5itUjgRXd9vs9ujHezFl": {
"title": "Jest",
"description": "Jest is Facebook's JavaScript testing framework for unit testing with auto mocking, code coverage, and snapshot testing. Works with React, Angular, Vue. Features parallel test execution, watch mode, and built-in assertion library. Top choice for JavaScript developers.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Jest Website",
"url": "https://jestjs.io/",
"type": "article"
},
{
"title": "Explore top posts about Jest",
"url": "https://app.daily.dev/tags/jest?ref=roadmapsh",
"type": "article"
},
{
"title": "JavaScript Testing With Jest",
"url": "https://youtu.be/IPiUDhwnZxA?si=2_lE2bDo2fRuo2CU",
"type": "video"
}
]
},
"jramLk8FGuaEH4YpHIyZT": {
"title": "Playwright",
"description": "Playwright is Microsoft's cross-browser automation testing framework supporting Chromium, Firefox, WebKit across platforms. Works with JavaScript, TypeScript, Python, .NET. Features auto-waiting, network control, mobile simulation. Excellent for modern web app testing with debugging tools.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Playwright Website",
"url": "https://playwright.dev/",
"type": "article"
},
{
"title": "Playwright, a Time-Saving End-to-End Testing Framework",
"url": "https://thenewstack.io/playwright-a-time-saving-end-to-end-testing-framework/",
"type": "article"
},
{
"title": "Get started with end-to-end testing: Playwright",
"url": "https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p",
"type": "video"
}
]
},
"DaynCz5RR26gjT6N6gTDL": {
"title": "Cypress",
"description": "Cypress is a JavaScript end-to-end testing framework running tests directly in browsers. Built on Mocha with excellent asynchronous testing support. Features time-travel debugging, automatic waiting, and real-time reloading. Supports BDD/TDD approaches for comprehensive web application testing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Cypress Website",
"url": "https://www.cypress.io/",
"type": "article"
},
{
"title": "Cypress Documentation",
"url": "https://docs.cypress.io/",
"type": "article"
},
{
"title": "Explore top posts about Cypress",
"url": "https://app.daily.dev/tags/cypress?ref=roadmapsh",
"type": "article"
},
{
"title": "Cypress End-to-End Testing",
"url": "https://www.youtube.com/watch?v=BQqzfHQkREo",
"type": "video"
}
]
},
"U5mD5FmVx7VWeKxDpQxB5": {
"title": "Authentication Strategies",
"description": "Authentication strategies verify a user's identity to grant access. Common methods include Basic Auth (username/password), Session-based (server remembers login), Token-based (like JWT, a secure digital key), OAuth (for third-party access like \"Login with Google\"), and SSO (Single Sign-On, one login for many apps). Knowing these helps choose the right security for your app.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Basic Authentication",
"url": "https://roadmap.sh/guides/basic-authentication",
"type": "article"
},
{
"title": "Session Based Authentication",
"url": "https://roadmap.sh/guides/session-authentication",
"type": "article"
},
{
"title": "Token Based Authentication",
"url": "https://roadmap.sh/guides/token-authentication",
"type": "article"
},
{
"title": "JWT Authentication",
"url": "https://roadmap.sh/guides/jwt-authentication",
"type": "article"
},
{
"title": "OAuth",
"url": "https://roadmap.sh/guides/oauth",
"type": "article"
},
{
"title": "SSO - Single Sign On",
"url": "https://roadmap.sh/guides/sso",
"type": "article"
}
]
},
"RDWbG3Iui6IPgp0shvXtg": {
"title": "Web Security Basics",
"description": "Web security protects websites from cyber threats through HTTPS/TLS, XSS/SQL injection/CSRF prevention, CSP, secure authentication, input validation, and regular updates. Involves understanding OWASP Top Ten vulnerabilities, access controls, secure coding practices, and threat awareness for comprehensive protection.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "OWASP Website",
"url": "https://owasp.org/",
"type": "article"
},
{
"title": "OWASP Cheatsheets",
"url": "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html",
"type": "article"
},
{
"title": "Content Security Policy (CSP)",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP",
"type": "article"
},
{
"title": "Explore top posts about Security",
"url": "https://app.daily.dev/tags/security?ref=roadmapsh",
"type": "article"
},
{
"title": "OWASP ZAP Step-by-Step Tutorial",
"url": "https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5",
"type": "video"
}
]
},
"AfH2zCbqzw0Nisg1yyISS": {
"title": "CORS",
"description": "CORS (Cross-Origin Resource Sharing) controls web page access to resources from different domains through HTTP headers. Servers specify allowed origins while browsers send preflight requests for permission. Prevents unauthorized access while enabling legitimate cross-origin requests for modern multi-domain applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Cross-Origin Resource Sharing (CORS)",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS",
"type": "article"
},
{
"title": "Understanding CORS",
"url": "https://rbika.com/blog/understanding-cors",
"type": "article"
},
{
"title": "CORS in 6 minutes",
"url": "https://www.youtube.com/watch?v=PNtFSVU-YTI",
"type": "video"
}
]
},
"uum7vOhOUR38vLuGZy8Oa": {
"title": "HTTPS",
"description": "HTTPS (Hypertext Transfer Protocol Secure) is HTTP's encrypted version, securing data transmission between browsers and websites. Essential for protecting sensitive information like banking and email. Ensures privacy and security through data encryption for online communications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is HTTPS?",
"url": "https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/",
"type": "article"
},
{
"title": "Why HTTPS Matters",
"url": "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https",
"type": "article"
},
{
"title": "Enabling HTTPS on Your Servers",
"url": "https://web.dev/enable-https/",
"type": "article"
},
{
"title": "How HTTPS works (comic)",
"url": "https://howhttps.works/",
"type": "article"
},
{
"title": "SSL, TLS, HTTP, HTTPS Explained",
"url": "https://www.youtube.com/watch?v=hExRDVZHhig",
"type": "video"
}
]
},
"rmcm0CZbtNVC9LZ14-H6h": {
"title": "Content Security Policy",
"description": "Content Security Policy (CSP) prevents XSS and clickjacking attacks by specifying trusted content sources through HTTP headers. Website creators define safe sources for scripts, styles, images, and other resources. Limits malicious code execution and provides violation reporting for security monitoring.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "MDN Content Security Policy (CSP)",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP",
"type": "article"
},
{
"title": "Web.dev - Content Security Policy (CSP)",
"url": "https://web.dev/csp/",
"type": "article"
},
{
"title": "Explore top posts about Security",
"url": "https://app.daily.dev/tags/security?ref=roadmapsh",
"type": "article"
}
]
},
"JanR7I_lNnUCXhCMGLdn-": {
"title": "OWASP Security Risks",
"description": "OWASP (Open Web Application Security Project) identifies top web application security risks including injection attacks, broken authentication, data exposure, and vulnerable dependencies. Provides guidance on secure coding practices, regular security testing, and comprehensive protection strategies for web applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "OWASP Web Application Security Testing Checklist",
"url": "https://github.com/0xRadi/OWASP-Web-Checklist",
"type": "opensource"
},
{
"title": "OWASP Website",
"url": "https://owasp.org/",
"type": "article"
},
{
"title": "OWASP Cheatsheets",
"url": "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html",
"type": "article"
},
{
"title": "OWASP Top 10: A Guide to the Worst Software Vulnerabilities",
"url": "https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/",
"type": "article"
},
{
"title": "Explore top posts about Security",
"url": "https://app.daily.dev/tags/security?ref=roadmapsh",
"type": "article"
}
]
},
"ruoFa3M4bUE3Dg6GXSiUI": {
"title": "Web Components",
"description": "Web Components create reusable HTML elements using Custom Elements, Shadow DOM, and HTML Templates. Work across browsers and frameworks with encapsulated styles and structure. Enable modular, shareable code with reduced style conflicts. Standard for building interoperable web parts.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Web Components - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components",
"type": "article"
},
{
"title": "WebComponents.org",
"url": "https://webcomponents.github.io/",
"type": "article"
},
{
"title": "Explore top posts about Web Components",
"url": "https://app.daily.dev/tags/web-components?ref=roadmapsh",
"type": "article"
},
{
"title": "Web Components Crash Course",
"url": "https://www.youtube.com/watch?v=PCWaFLy3VUo",
"type": "video"
}
]
},
"hwPOGT0-duy3KfI8QaEwF": {
"title": "Type Checkers",
"description": "Type checkers analyze code for type-related errors before runtime, ensuring correct type usage and catching mistakes early. Examples: TypeScript, Flow (JavaScript), mypy (Python). Add static typing to dynamic languages, improving reliability, readability, and refactoring support for large projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Flow - Static Type Checker for JavaScript",
"url": "https://flow.org/",
"type": "article"
},
{
"title": "TypeScript",
"url": "https://www.typescriptlang.org/",
"type": "article"
},
{
"title": "Mypy - Static Type Checker for Python",
"url": "https://mypy.readthedocs.io/en/stable/",
"type": "article"
}
]
},
"VxiQPgcYDFAT6WgSRWpIA": {
"title": "Custom Elements",
"description": "Custom Elements enable creating your own HTML tags as part of Web Components. Build reusable webpage components with custom behavior instead of nested standard HTML. Keeps HTML cleaner and components more manageable with encapsulated functionality.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Using Custom Elements - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "Web Components | Custom Elements",
"url": "https://www.youtube.com/watch?v=1GT35DSdZbI",
"type": "video"
}
]
},
"Hk8AVonOd693_y1sykPqd": {
"title": "HTML Templates",
"description": "The `<template>` HTML element holds hidden content for later use by JavaScript. Acts as a reusable blueprint for creating dynamic page elements. Enables efficient content templating and component-based development patterns in web applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Using Templates and Slots - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots",
"type": "article"
},
{
"title": "Explore top posts about HTML",
"url": "https://app.daily.dev/tags/html?ref=roadmapsh",
"type": "article"
}
]
},
"-SpsNeOZBkQfDA-rwzgPg": {
"title": "Shadow DOM",
"description": "Shadow DOM creates private, encapsulated DOM trees inside elements, isolating HTML, CSS, and JavaScript from the main page. Prevents style and script conflicts, enabling cleaner, reusable components. Essential for web components requiring self-contained functionality.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Using shadow DOM | MDN web docs",
"url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM",
"type": "article"
},
{
"title": "Explore top posts about DOM",
"url": "https://app.daily.dev/tags/dom?ref=roadmapsh",
"type": "article"
},
{
"title": "DOM vs Virtual DOM vs Shadow DOM",
"url": "https://youtu.be/7Tok22qxPzQ?si=2cw36PNSgFTcNHWx",
"type": "video"
}
]
},
"0asdhvwBH3gn-ercktV7A": {
"title": "TypeScript",
"description": "TypeScript is Microsoft's strongly-typed language extending JavaScript with static typing. Compiles to plain JavaScript with enhanced IDE support, interfaces, generics, and decorators. Catches errors early, improves maintainability, and reduces runtime issues. Standard for large-scale applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated TypeScript Roadmap",
"url": "https://roadmap.sh/typescript",
"type": "article"
},
{
"title": "TypeScript Website",
"url": "https://www.typescriptlang.org/",
"type": "article"
},
{
"title": "TypeScript Playground",
"url": "https://www.typescriptlang.org/play",
"type": "article"
},
{
"title": "The TypeScript Handbook",
"url": "https://www.typescriptlang.org/docs/handbook/intro.html",
"type": "article"
},
{
"title": "Explore top posts about TypeScript",
"url": "https://app.daily.dev/tags/typescript?ref=roadmapsh",
"type": "article"
},
{
"title": "TypeScript for Beginners",
"url": "https://www.youtube.com/watch?v=BwuLxPH8IDs",
"type": "video"
}
]
},
"Cxspmb14_0i1tfw-ZLxEu": {
"title": "SSR",
"description": "Server-side rendering (SSR) generates complete HTML on the server before sending to browsers. Improves initial load times, SEO, and performance on slow devices. Frameworks: Next.js (React), Nuxt.js (Vue). Increases server load but enhances user experience.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Server-Side Rendering (SSR)",
"url": "https://vuejs.org/guide/scaling-up/ssr.html",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "wWhat are Server Side Rendering (SSR) & Client Side Rendering (CSR)",
"url": "https://www.youtube.com/watch?v=ObrSuDYMl1s",
"type": "video"
},
{
"title": "What is server-side rendering for web development?",
"url": "https://www.youtube.com/watch?v=okvg3MRAPs0",
"type": "video"
}
]
},
"OL8I6nOZ8hGGWmtxg_Mv8": {
"title": "Svelte",
"description": "Svelte is a compile-time JavaScript framework building UIs with minimal runtime overhead. Compiles components to optimized vanilla JavaScript without virtual DOM. Features simple syntax, built-in state management, styling, and animations. Known for small bundle sizes and fast performance.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Svelte Course Playlist for beginners",
"url": "https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO",
"type": "course"
},
{
"title": "Svelte Website",
"url": "https://svelte.dev/",
"type": "article"
},
{
"title": "All About Svelte, the Much-Loved, State-Driven Web Framework",
"url": "https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/",
"type": "article"
},
{
"title": "Svelte and the Future of Frontend Development",
"url": "https://thenewstack.io/svelte-and-the-future-of-front-end-development/",
"type": "article"
},
{
"title": "Explore top posts about Svelte",
"url": "https://app.daily.dev/tags/svelte?ref=roadmapsh",
"type": "article"
}
]
},
"3TE_iYvbklXK0be-5f2M7": {
"title": "Vue.js",
"description": "Vue.js is a progressive JavaScript framework for building user interfaces. Features template syntax, virtual DOM, and component-based architecture. Easy to learn and incrementally adoptable. Works well with ecosystem tools for routing and state management. Known for flexibility, performance, and gentle learning curve.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vue.js Website",
"url": "https://vuejs.org/",
"type": "article"
},
{
"title": "Meet Vue.js, the Flexible JavaScript Framework",
"url": "https://thenewstack.io/meet-vue-js-flexible-javascript-framework/",
"type": "article"
},
{
"title": "Explore top posts about Vue.js",
"url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh",
"type": "article"
},
{
"title": "Vue.js Course for Beginners",
"url": "https://www.youtube.com/watch?v=VeNfHj6MhgA",
"type": "video"
}
]
},
"k6rp6Ua9qUEW_DA_fOg5u": {
"title": "Angular",
"description": "Angular is a popular tool from Google for building websites and web apps. It uses TypeScript (a type of JavaScript) to create large, efficient single-page applications (SPAs), where content loads in one go without needing to reload the whole page. Angular builds UIs with reusable components, like building blocks. It has features like two-way data binding (data updates automatically in different places), dependency injection (helps manage code parts), and a strong template system. Angular also offers tools for testing, page navigation, and managing app data, making it great for big, complex projects.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated Angular Roadmap",
"url": "https://roadmap.sh/angular",
"type": "article"
},
{
"title": "Getting started with Angular",
"url": "https://angular.dev/tutorials/learn-angular",
"type": "article"
},
{
"title": "Explore top posts about Angular",
"url": "https://app.daily.dev/tags/angular?ref=roadmapsh",
"type": "article"
},
{
"title": "Angular for Beginners Course",
"url": "https://www.youtube.com/watch?v=3qBXWUpoPHo",
"type": "video"
}
]
},
"SGDf_rbfmFSHlxI-Czzlz": {
"title": "React",
"description": "React is Facebook's JavaScript library for building user interfaces with reusable components. Uses virtual DOM for performance and one-way data flow. Features component-based architecture, works with Redux for state management and React Native for mobile. Popular for its clarity, speed, and ecosystem.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Full Stack React Developer Course",
"url": "https://www.youtube.com/watch?v=Bvwq_S0n2pk",
"type": "course"
},
{
"title": "Visit Dedicated React Roadmap",
"url": "https://roadmap.sh/react",
"type": "article"
},
{
"title": "React Website",
"url": "https://react.dev",
"type": "article"
},
{
"title": "Explore top posts about React",
"url": "https://app.daily.dev/tags/react?ref=roadmapsh",
"type": "article"
}
]
},
"KJRkrFZIihCUBrOf579EU": {
"title": "react-router",
"description": "React Router enables client-side routing in React applications, creating single-page apps with multiple views. Handles URL management, provides route definition components, and supports lazy loading and route guards. The standard navigation solution for React applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "React Router Website",
"url": "https://reactrouter.com/en/main",
"type": "article"
},
{
"title": "A Complete Guide to Routing in React",
"url": "https://hygraph.com/blog/routing-in-react",
"type": "article"
},
{
"title": "React Router - Complete tutorial",
"url": "https://www.youtube.com/watch?v=oTIJunBa6MA",
"type": "video"
}
]
},
"zNFYAJaSq0YZXL5Rpx1NX": {
"title": "Next.js",
"description": "Next.js is a React framework supporting server-side rendering and static site generation. Features automatic code splitting, file-based routing, CSS support, API routes, and optimized performance. Includes live updates, smart preloading, and easy deployment. Ideal for SEO-friendly applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Official Website",
"url": "https://nextjs.org/",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
},
{
"title": "Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel",
"url": "https://youtu.be/1WmNXEVia8I",
"type": "video"
}
]
},
"BBsXxkbbEG-gnbM1xXKrj": {
"title": "Nuxt.js",
"description": "Nuxt.js is a Vue.js framework providing structure, automatic routing, and server-side rendering. Supports static site generation, code splitting, and data fetching. Offers flexible rendering options with focus on developer experience and performance. Popular for SEO-friendly Vue applications with plugin ecosystem.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Nuxt.js Fundamentals",
"url": "https://vueschool.io/courses/nuxtjs-fundamentals",
"type": "course"
},
{
"title": "Nuxt Website",
"url": "https://nuxtjs.org/",
"type": "article"
},
{
"title": "Get Started with Nuxt",
"url": "https://explorers.netlify.com/learn/get-started-with-nuxt",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
}
]
},
"P4st_telfCwKLSAU2WsQP": {
"title": "Svelte Kit",
"description": "SvelteKit is a full-stack framework for building websites and applications with Svelte. Features file-based routing, code splitting, server-side rendering, and static site generation. Designed for simplicity and performance with excellent developer experience and easy deployment options.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Svelte Kit",
"url": "https://kit.svelte.dev/",
"type": "article"
},
{
"title": "Svelte Kit Docs",
"url": "https://kit.svelte.dev/docs/introduction",
"type": "article"
},
{
"title": "Explore top posts about Svelte",
"url": "https://app.daily.dev/tags/svelte?ref=roadmapsh",
"type": "article"
},
{
"title": "Sveltekit in 100 Seconds",
"url": "https://www.youtube.com/watch?v=H1eEFfAkIik",
"type": "video"
}
]
},
"L7AllJfKvClaam3y-u6DP": {
"title": "GraphQL",
"description": "GraphQL is Facebook's query language for APIs allowing clients to request exactly the data needed. Reduces over-fetching and under-fetching compared to REST. Ideal for mobile applications, complex APIs, and rapidly changing requirements with strong typing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "visit Dedicated GraphQL Roadmap",
"url": "https://roadmap.sh/graphql",
"type": "article"
},
{
"title": "Introduction to GraphQL",
"url": "https://graphql.org/learn/",
"type": "article"
},
{
"title": "Introduction to GraphQL",
"url": "https://thenewstack.io/introduction-to-graphql/",
"type": "article"
},
{
"title": "How to Execute a Simple GraphQL Query",
"url": "https://thenewstack.io/how-to-execute-a-simple-graphql-query/",
"type": "article"
},
{
"title": "Explore top posts about GraphQL",
"url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
"type": "article"
},
{
"title": "GraphQL Course for Beginners",
"url": "https://www.youtube.com/watch?v=ed8SzALpx1Q",
"type": "video"
}
]
},
"5eUbDdOTOfaOhUlZAmmXW": {
"title": "Apollo",
"description": "Apollo GraphQL is a comprehensive platform for GraphQL applications. Apollo Client handles caching, data fetching, and state management. Apollo Server builds GraphQL APIs. Includes tools for schema management, performance monitoring, and developer tooling for faster, scalable apps.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Apollo Website",
"url": "https://www.apollographql.com",
"type": "article"
},
{
"title": "Apollo Docs",
"url": "https://www.apollographql.com/docs/",
"type": "article"
},
{
"title": "Visit Dedicated GraphQL Roadmap",
"url": "https://roadmap.sh/graphql",
"type": "article"
},
{
"title": "Explore top posts about Apollo",
"url": "https://app.daily.dev/tags/apollo?ref=roadmapsh",
"type": "article"
}
]
},
"0moPO23ol33WsjVXSpTGf": {
"title": "Relay Modern",
"description": "Relay is Facebook's JavaScript library for data-heavy React applications using GraphQL. Co-locates data requirements with components, enabling efficient fetching and updates. Handles caching, real-time updates, and optimistic UI changes. Ideal for complex applications requiring sophisticated data management.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "facebook/relay",
"url": "https://github.com/facebook/relay",
"type": "opensource"
},
{
"title": "Relay Website",
"url": "https://relay.dev/",
"type": "article"
},
{
"title": "ELI5 - Relay",
"url": "https://www.youtube.com/watch?v=A4POd93GI_I",
"type": "video"
}
]
},
"n0q32YhWEIAUwbGXexoqV": {
"title": "Static Site Generators",
"description": "Static Site Generators (SSGs) build websites as pre-generated HTML files from content and templates. Make sites fast, secure, and easy to host. Examples: Jekyll, Hugo, Eleventy. Ideal for blogs, documentation, and content-focused sites with excellent performance.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "What is a Static Site Generator?",
"url": "https://www.cloudflare.com/learning/performance/static-site-generator/",
"type": "article"
},
{
"title": "Get Back to Basics With Static Website Generators",
"url": "https://thenewstack.io/get-back-basics-static-website-generators/",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "What is a static site generator",
"url": "https://www.youtube.com/watch?v=Qms4k6y7OgI",
"type": "video"
}
]
},
"CMrss8E2W0eA6DVEqtPjT": {
"title": "Vuepress",
"description": "VuePress is a Vue.js-powered static site generator optimized for documentation. Creates fast, SEO-friendly sites with Vue-based theming, syntax highlighting, and Markdown support with Vue components. Features built-in search, responsive layouts, and plugin/theme customization. Ideal for documentation and simple websites.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Vuepress",
"url": "https://vuepress.vuejs.org/",
"type": "article"
},
{
"title": "Explore top posts about Vue.js",
"url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh",
"type": "article"
},
{
"title": "What is VuePress?",
"url": "https://www.youtube.com/watch?v=iRhRdY7SQJg",
"type": "video"
}
]
},
"XWJxV42Dpu2D3xDK10Pn3": {
"title": "Nuxt.js",
"description": "Nuxt.js is a Vue.js framework providing structure, automatic routing, and server-side rendering. Supports static site generation, code splitting, and data fetching. Offers flexible rendering options with focus on developer experience and performance. Popular for SEO-friendly Vue applications with plugin ecosystem.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Nuxt.js Fundamentals",
"url": "https://vueschool.io/courses/nuxtjs-fundamentals",
"type": "course"
},
{
"title": "Nuxt Website",
"url": "https://nuxtjs.org/",
"type": "article"
},
{
"title": "Get Started with Nuxt",
"url": "https://explorers.netlify.com/learn/get-started-with-nuxt",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
}
]
},
"iUxXq7beg55y76dkwhM13": {
"title": "Astro",
"description": "Astro is a static site generator supporting multiple frameworks (React, Vue, Svelte) with partial hydration. Renders components to static HTML, sending JavaScript only when needed. Features file-based routing and markdown support. Ideal for blogs, documentation, and marketing sites.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Astro Web Framework Crash Course",
"url": "https://www.youtube.com/watch?v=e-hTm5VmofI",
"type": "course"
},
{
"title": "Astro Website",
"url": "https://astro.build/",
"type": "article"
},
{
"title": "Getting Started with Astro",
"url": "https://docs.astro.build/en/getting-started/",
"type": "article"
},
{
"title": "What is Astro?",
"url": "https://www.contentful.com/blog/what-is-astro/",
"type": "article"
}
]
},
"io0RHJWIcVxDhcYkV9d38": {
"title": "Eleventy",
"description": "Eleventy (11ty) is a flexible static site generator supporting multiple template languages (HTML, Markdown, JavaScript). Creates pages from data sources, adds no client-side JavaScript for fast loading. Highly customizable with useful plugins for navigation and image processing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Eleventy",
"url": "https://www.11ty.dev/",
"type": "article"
},
{
"title": "A collection of 11ty starters, projects, plugins, and resources",
"url": "https://11ty.rocks/",
"type": "article"
},
{
"title": "Introduction to Eleventy",
"url": "https://www.youtube.com/watch?v=-dM6AmNmMFA",
"type": "video"
}
]
},
"V70884VcuXkfrfHyLGtUg": {
"title": "Next.js",
"description": "Next.js is a React framework supporting server-side rendering and static site generation. Features automatic code splitting, file-based routing, CSS support, API routes, and optimized performance. Includes live updates, smart preloading, and easy deployment. Ideal for SEO-friendly applications.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Next.js Website",
"url": "https://nextjs.org/",
"type": "article"
},
{
"title": "Explore top posts about JavaScript",
"url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
"type": "article"
},
{
"title": "Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel",
"url": "https://youtu.be/1WmNXEVia8I",
"type": "video"
}
]
},
"PoM77O2OtxPELxfrW1wtl": {
"title": "PWAs",
"description": "Progressive Web Apps (PWAs) are web applications behaving like native apps using HTML, CSS, JavaScript. Feature offline functionality, push notifications, home screen installation, and service workers for caching. Cross-platform, discoverable, and cost-effective alternative to native apps.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Learn PWA",
"url": "https://web.dev/learn/pwa/",
"type": "article"
},
{
"title": "MDN - Progressive Web Apps",
"url": "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/",
"type": "article"
},
{
"title": "Explore top posts about Web Development",
"url": "https://app.daily.dev/tags/webdev?ref=roadmapsh",
"type": "article"
},
{
"title": "Progressive Web Apps in 2024",
"url": "https://www.youtube.com/watch?v=3ODP6tTpjqA",
"type": "video"
}
]
},
"VOGKiG2EZVfCBAaa7Df0W": {
"title": "Mobile Apps",
"description": "Mobile applications run on phones and tablets through app stores. Types: native (platform-specific), hybrid (web in native shell), cross-platform (React Native, Flutter). Access device features like GPS, cameras. Focus on usability, performance, offline capability, and security.",
"links": [
{
"title": "React Native",
"url": "https://reactnative.dev/",
"type": "article"
},
{
"title": "Flutter",
"url": "https://flutter.dev",
"type": "article"
},
{
"title": "Ionic",
"url": "https://ionicframework.com",
"type": "article"
},
{
"title": "NativeScript",
"url": "https://nativescript.org/",
"type": "article"
},
{
"title": "Explore top posts about Mobile Development",
"url": "https://app.daily.dev/tags/mobile?ref=roadmapsh",
"type": "article"
}
]
},
"dsTegXTyupjS8iU6I7Xiv": {
"title": "React Native",
"description": "React Native enables building native mobile apps for iOS and Android using JavaScript and React. Compiles to native components for authentic look and performance. Features code sharing, hot reloading, and device API access. Ideal for React developers transitioning to mobile development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Visit Dedicated React Roadmap",
"url": "https://roadmap.sh/react-native",
"type": "article"
},
{
"title": "React Native Website",
"url": "https://reactnative.dev/",
"type": "article"
},
{
"title": "Explore top posts about React",
"url": "https://app.daily.dev/tags/react?ref=roadmapsh",
"type": "article"
}
]
},
"dIQXjFEUAJAGxxfAYceHU": {
"title": "Flutter",
"description": "Flutter is Google's cross-platform framework building apps for iOS, Android, web, desktop from single Dart codebase. Features rich widget library, hot reload, and custom rendering engine for consistent UI. Popular for mobile development, expanding to web and desktop platforms.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Flutter course for beginners",
"url": "https://www.youtube.com/watch?v=VPvVD8t02U8",
"type": "course"
},
{
"title": "Visit Dedicated Flutter Roadmap",
"url": "https://roadmap.sh/flutter",
"type": "article"
},
{
"title": "Flutter Website",
"url": "https://flutter.dev",
"type": "article"
},
{
"title": "Flutter for Desktop",
"url": "https://flutter.dev/multi-platform/desktop",
"type": "article"
},
{
"title": "12 Ways Flutter Streamlines App Development",
"url": "https://thenewstack.io/12-ways-flutter-streamlines-app-development/",
"type": "article"
},
{
"title": "Explore top posts about Flutter",
"url": "https://app.daily.dev/tags/flutter?ref=roadmapsh",
"type": "article"
}
]
},
"xmRv6-L45m5MDpHmdHFCL": {
"title": "Ionic",
"description": "Ionic builds mobile and desktop apps using web technologies (HTML, CSS, JavaScript) with Angular, React, or Vue. Provides UI components and native device access. Wraps web apps for native deployment with platform-adaptive styling. Enables rapid cross-platform development.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "ionic-team/ionic-framework",
"url": "https://github.com/ionic-team/ionic-framework",
"type": "opensource"
},
{
"title": "Ionic Framework Website",
"url": "https://ionicframework.com/",
"type": "article"
},
{
"title": "Ionic 8 Announcement",
"url": "https://ionic.io/blog/ionic-8-is-here",
"type": "article"
},
{
"title": "Explore top posts about Ionic",
"url": "https://app.daily.dev/tags/ionic?ref=roadmapsh",
"type": "article"
}
]
},
"KMA7NkxFbPoUDtFnGBFnj": {
"title": "Desktop Apps",
"description": "JavaScript builds desktop apps using Electron, NW.js, or Tauri for cross-platform development (Windows, Mac, Linux). Electron powers VS Code and Discord. Provides file system access and native integration. Trade-offs: faster development vs. performance and resource usage compared to native apps.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Electron Website",
"url": "https://www.electronjs.org/",
"type": "article"
},
{
"title": "NW.js Website",
"url": "https://nwjs.io/",
"type": "article"
},
{
"title": "Tauri Website",
"url": "https://tauri.app/",
"type": "article"
}
]
},
"mQHpSyMR4Rra4mqAslgiS": {
"title": "Electron",
"description": "Electron builds cross-platform desktop apps using web technologies (HTML, CSS, JavaScript) with Chromium and Node.js. Provides native OS access and powers apps like VS Code. Enables rapid development but can be resource-intensive. Popular choice for web developers.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Electron Website",
"url": "https://www.electronjs.org/",
"type": "article"
},
{
"title": "Electron Docs",
"url": "https://www.electronjs.org/docs/latest/",
"type": "article"
},
{
"title": "Explore top posts about Electron",
"url": "https://app.daily.dev/tags/electron?ref=roadmapsh",
"type": "article"
},
{
"title": "Create a Desktop App With JavaScript & Electron",
"url": "https://www.youtube.com/watch?v=ML743nrkMHw",
"type": "video"
}
]
},
"GJctl0tVXe4B70s35RkLT": {
"title": "Tauri",
"description": "Tauri builds small, secure desktop apps using web technologies with Rust backend. Uses system webview instead of bundled browser, resulting in smaller apps. Features strong security and JavaScript framework compatibility. Focuses on performance and minimal resource usage compared to Electron.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Tauri Website",
"url": "https://tauri.app/",
"type": "article"
},
{
"title": "Tauri Docs",
"url": "https://tauri.app/v1/guides/",
"type": "article"
},
{
"title": "How Tauri Turns Web Designs into Compact Native Apps",
"url": "https://thenewstack.io/how-tauri-turns-web-designs-into-compact-native-apps/",
"type": "article"
}
]
},
"2MRvAK9G9RGM_auWytcKh": {
"title": "Flutter",
"description": "Flutter is Google's cross-platform framework building apps for iOS, Android, web, desktop from single Dart codebase. Features rich widget library, hot reload, and custom rendering engine for consistent UI. Popular for mobile development, expanding to web and desktop platforms.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Flutter course for beginners",
"url": "https://www.youtube.com/watch?v=VPvVD8t02U8",
"type": "course"
},
{
"title": "Visit Dedicated Flutter Roadmap",
"url": "https://roadmap.sh/flutter",
"type": "article"
},
{
"title": "Flutter Website",
"url": "https://flutter.dev",
"type": "article"
},
{
"title": "Flutter for Desktop",
"url": "https://flutter.dev/multi-platform/desktop",
"type": "article"
},
{
"title": "12 Ways Flutter Streamlines App Development",
"url": "https://thenewstack.io/12-ways-flutter-streamlines-app-development/",
"type": "article"
},
{
"title": "Explore top posts about Flutter",
"url": "https://app.daily.dev/tags/flutter?ref=roadmapsh",
"type": "article"
}
]
},
"-DsETM9xLgHyGZthptj1Y": {
"title": "PRPL Pattern",
"description": "PRPL pattern optimizes web performance: Push critical resources, Render initial route, Pre-cache remaining routes, Lazy-load non-essential resources. Creates instant-feeling experiences on slow connections using service workers. Common in Progressive Web Apps (PWAs) for optimal loading strategies.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "PRPL Pattern - Google Developers",
"url": "https://developers.google.com/web/fundamentals/performance/prpl-pattern",
"type": "article"
},
{
"title": "PRPL Pattern",
"url": "https://www.patterns.dev/vanilla/prpl/",
"type": "article"
}
]
},
"xD5WfEP7Ez0oi3890UgmH": {
"title": "RAIL Model",
"description": "RAIL Model is Google's performance framework: Response (<100ms to user input), Animation (60fps smooth visuals), Idle (efficient downtime usage), Load (fast initial rendering). Provides specific performance targets for creating responsive, user-friendly web experiences.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "RAIL Model - Google Developers",
"url": "https://developers.google.com/web/fundamentals/performance/rail",
"type": "article"
},
{
"title": "An Overview of the RAIL performance model",
"url": "https://www.keycdn.com/blog/rail-performance-model",
"type": "article"
}
]
},
"X0Y3-IpPiFUCsNDK4RFxw": {
"title": "Performance Metrics",
"description": "Web performance metrics measure webpage speed and efficiency. Key metrics: Load time, First Contentful Paint (FCP), Time to Interactive (TTI), First Input Delay (FID), and Total Blocking Time (TBT). Help identify optimization opportunities and user experience improvements.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Web Performance Metrics - Google Developers",
"url": "https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics",
"type": "article"
},
{
"title": "Measuring web performance in 2024",
"url": "https://requestmetrics.com/web-performance/measure-web-performance/",
"type": "article"
},
{
"title": "Measuring performance and user experience - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/Guide/Performance",
"type": "article"
},
{
"title": "Explore top posts about Performance",
"url": "https://app.daily.dev/tags/performance?ref=roadmapsh",
"type": "article"
}
]
},
"RIhHMHLsLLPhNl05Q9aBf": {
"title": "Using Lighthouse",
"description": "Lighthouse is Google's open-source web auditing tool measuring performance, accessibility, and SEO. Available as browser extension and CLI. Provides comprehensive reports with improvement recommendations by simulating page loads and checking for optimization issues.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Lighthouse - Google Developers",
"url": "https://developers.google.com/web/tools/lighthouse",
"type": "article"
},
{
"title": "Explore top posts about Lighthouse",
"url": "https://app.daily.dev/tags/lighthouse?ref=roadmapsh",
"type": "article"
},
{
"title": "What is Google Lighthouse and how to use it",
"url": "https://www.youtube.com/watch?v=VyaHwvPWuZU",
"type": "video"
}
]
},
"3_sJHKTogkDoCjR518-OL": {
"title": "Using DevTools",
"description": "Browser DevTools are built-in development features for inspecting, editing, and debugging HTML, CSS, and JavaScript. Include DOM inspector, console, network panel, performance profiler, and device emulation. Essential for frontend development, optimization, and testing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Chrome DevTools - Google Developers",
"url": "https://developers.google.com/web/tools/chrome-devtools",
"type": "article"
},
{
"title": "Firefox DevTools User Docs",
"url": "https://firefox-source-docs.mozilla.org/devtools-user/",
"type": "article"
},
{
"title": "Explore top posts about DevTools",
"url": "https://app.daily.dev/tags/devtools?ref=roadmapsh",
"type": "article"
}
]
},
"raoa-75p_DyBAycvy3yVv": {
"title": "Storage",
"description": "Web Storage API stores data in browsers with localStorage (persistent) and sessionStorage (tab-specific). Useful for user preferences, shopping carts, and application state. Simpler and higher capacity than cookies with broad browser support.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Web Storage API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API",
"type": "article"
},
{
"title": "Web Storage API – How to Store Data on the Browser",
"url": "https://www.freecodecamp.org/news/web-storage-api-how-to-store-data-on-the-browser/",
"type": "article"
},
{
"title": "Explore top posts about Storage",
"url": "https://app.daily.dev/tags/storage?ref=roadmapsh",
"type": "article"
}
]
},
"NDJR8UCoa31v45TBFP7we": {
"title": "Web Sockets",
"description": "WebSockets enable real-time, bidirectional communication over persistent TCP connections. Ideal for low-latency applications like gaming, live streams, and chat systems. Avoids HTTP request overhead with broad browser support and framework integration.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Web Sockets - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API",
"type": "article"
},
{
"title": "What are Web Sockets?",
"url": "https://www.pubnub.com/guides/websockets/",
"type": "article"
},
{
"title": "How Web Sockets Work",
"url": "https://www.youtube.com/watch?v=pnj3Jbho5Ck",
"type": "video"
}
]
},
"doPe92aUpo-8KWhi45lWK": {
"title": "Server Sent Events",
"description": "Server-Sent Events (SSE) enable servers to send live updates to webpages through one-way HTTP connections. Ideal for live chats, news feeds, and real-time notifications. Clients use EventSource objects to listen for formatted events from server response streams. Simple, browser-compatible solution for real-time updates.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Server-Sent Events - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events",
"type": "article"
},
{
"title": "Server-Sent Events - Postman",
"url": "https://www.youtube.com/watch?v=KrE044J8jEQ",
"type": "video"
}
]
},
"TldWoXiqKxM4X3JONKAR7": {
"title": "Service Workers",
"description": "Service Workers are JavaScript files acting as proxy between webpages and network. Enable offline functionality by intercepting requests and serving cached responses. Support push notifications, background sync, and offline capabilities. Essential for Progressive Web Apps (PWAs).\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Service Workers - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API",
"type": "article"
},
{
"title": "Service Workers - Google",
"url": "https://web.dev/learn/pwa/service-workers",
"type": "article"
},
{
"title": "Web Workers Explained",
"url": "https://www.youtube.com/watch?v=JMKLXGwltGc",
"type": "video"
}
]
},
"YbGGYoKJEx29PlvopUBiM": {
"title": "Location",
"description": "Geolocation API provides device location (latitude/longitude) using GPS, Wi-Fi, and sensors. Requires user permission for privacy. Enables current location access, position tracking, and distance calculations for location-aware web applications like maps and navigation.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Geolocation API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API",
"type": "article"
},
{
"title": "Geolocation API overview",
"url": "https://developers.google.com/maps/documentation/geolocation/overview",
"type": "article"
}
]
},
"6AlcArOiJMhHXguAosDzn": {
"title": "Notifications",
"description": "Notifications API displays system alerts for messages, updates, and events even when site isn't active. Requires user permission and supports title, text, icons, timeouts, and click actions. Keeps users informed of important website events.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Get Started With The Notifications API",
"url": "https://web.dev/articles/codelab-notifications-get-started",
"type": "article"
},
{
"title": "Notifications API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API",
"type": "article"
},
{
"title": "How To Send Push Notifications With JavaScript",
"url": "https://youtu.be/Bm0JjR4kP8w?si=-2Nu0I2Zl9f-R1zj",
"type": "video"
}
]
},
"Fd0hQh1DleM0gMzCpGou4": {
"title": "Device Orientation",
"description": "Device Orientation API detects device tilt and movement (pitch, roll, yaw) for motion-responsive applications. Requires permission for AR, gaming, and interactive experiences. Provides orientation data and change detection for motion-aware web apps.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Device Orientation API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events",
"type": "article"
},
{
"title": "Detect the device orientation with JS",
"url": "https://www.youtube.com/watch?v=fMDuFoqSQfw",
"type": "video"
}
]
},
"MAM1nuVk-h4AvTUk4nvmj": {
"title": "Payments",
"description": "Payment Request API standardizes checkout forms by collecting payment and shipping information through browsers. Supports credit cards, debit cards, and digital wallets. Creates PaymentRequest objects for user confirmation and payment processing.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Payment Request API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API",
"type": "article"
},
{
"title": "The Payment Request API",
"url": "https://www.w3.org/TR/payment-request/",
"type": "article"
}
]
},
"opu2bAsmdWHqWqtsCscLC": {
"title": "Credentials",
"description": "Credential Management API integrates websites with browser password managers for secure credential storage and retrieval. Enables auto sign-in, supports various authentication methods, and works with platform authenticators. Improves login experience and security across devices.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Credential Management API - MDN",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API",
"type": "article"
},
{
"title": "The Credential Management API",
"url": "https://web.dev/articles/security-credential-management",
"type": "article"
}
]
},
"h26uS3muFCabe6ekElZcI": {
"title": "SWC",
"description": "SWC (Speedy Web Compiler) is a Rust-based JavaScript/TypeScript compiler and bundler, much faster than Babel. Supports modern JavaScript features, JSX, and TypeScript compilation. Popular for large projects and as performance foundation for other build tools.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "SWC Website",
"url": "https://swc.rs/",
"type": "article"
},
{
"title": "SWC Documentation",
"url": "https://swc.rs/docs/",
"type": "article"
},
{
"title": "Why SWC is the Future of JavaScript Tooling",
"url": "https://dev.to/somelink/why-swc-is-the-future-of-javascript-tooling",
"type": "article"
},
{
"title": "Explore top posts about SWC",
"url": "https://app.daily.dev/tags/swc?ref=roadmapsh",
"type": "article"
},
{
"title": "Introduction to Speedy Web Compiler",
"url": "https://www.youtube.com/watch?v=RXQlPpbdn_E",
"type": "video"
}
]
},
"wA2fSYsbBYU02VJXAvUz8": {
"title": "Astro",
"description": "Astro is a static site generator supporting multiple frameworks (React, Vue, Svelte) with partial hydration. Renders components to static HTML, sending JavaScript only when needed. Features file-based routing and markdown support. Ideal for blogs, documentation, and marketing sites.\n\nVisit the following resources to learn more:",
"links": [
{
"title": "Astro Web Framework Crash Course",
"url": "https://www.youtube.com/watch?v=e-hTm5VmofI",
"type": "course"
},
{
"title": "Astro Website",
"url": "https://astro.build/",
"type": "article"
},
{
"title": "What is Astro?",
"url": "https://www.contentful.com/blog/what-is-astro/",
"type": "article"
}
]
}
}
Reference in new issue View Git Blame Copy Permalink