chore: cleanup orphaned content files (#9936)
Co-authored-by: jcanalesluna <56018501+jcanalesluna@users.noreply.github.com>
This commit is contained in:
1 parent
6de02e0a75
commit
3db5d4a5ec
48 files changed
-448
No files matched your search
@@ -1,9 +0,0 @@
|
||||
# Accessibility
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Accessibility for Developers by Google](https://web.dev/accessibility)
|
||||
- [@video@Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
|
||||
- [@feed@Explore top posts about Accessibility](https://app.daily.dev/tags/accessibility?ref=roadmapsh)
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
# AI vs. Traditional Software Development
|
||||
|
||||
Traditional software development relies on developers explicitly writing code to instruct computers on how to perform tasks. This involves defining every step and logic manually. AI-assisted coding, however, leverages machine learning models trained on vast amounts of code to automate parts of the development process. Instead of writing all the code from scratch, developers can use AI to generate code snippets, suggest improvements, and even debug errors, potentially leading to faster development cycles and reduced human error.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Unlocking the value of AI in software development](https://www.mckinsey.com/industries/technology-media-and-telecommunications/our-insights/unlocking-the-value-of-ai-in-software-development)
|
||||
- [@article@What is vibe coding?](https://www.ibm.com/think/topics/vibe-coding)
|
||||
- [@article@How AI is transforming work at Anthropic](https://www.anthropic.com/research/how-ai-is-transforming-work-at-anthropic)
|
||||
- [@video@I Systems vs Traditional Coding](https://www.youtube.com/watch?v=P7lryCIvxgA)
|
||||
- [@video@ibe Coding Fundamentals In 33 minutes](https://www.youtube.com/watch?v=iLCDSY2XX7E)
|
||||
- [@video@hat is Vibe Coding?](https://www.youtube.com/watch?v=5OWurmg41tI)
|
||||
@@ -1,12 +0,0 @@
|
||||
# Authentication Strategies
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap.sh@Basic Authentication](https://roadmap.sh/guides/basic-authentication)
|
||||
- [@roadmap.sh@Session Based Authentication](https://roadmap.sh/guides/session-based-authentication-visually-explained)
|
||||
- [@roadmap.sh@Token Based Authentication](https://roadmap.sh/guides/token-authentication)
|
||||
- [@roadmap.sh@JWT Authentication](https://roadmap.sh/guides/jwt-authentication)
|
||||
- [@roadmap.sh@OAuth](https://roadmap.sh/guides/oauth)
|
||||
- [@roadmap.sh@SSO - Single Sign On](https://roadmap.sh/guides/sso)
|
||||
@@ -1,9 +0,0 @@
|
||||
# BEM
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@BEM Official Website](https://en.bem.info)
|
||||
- [@official@BEM Documentation](https://en.bem.info/methodology/quick-start)
|
||||
- [@article@5 Reasons To Use BEM Notation](https://www.elpassion.com/blog/5-reasons-to-use-bem-a)
|
||||
@@ -1,9 +0,0 @@
|
||||
# BitBucket
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@How to use BitBucket?](https://bitbucket.org/product/guides)
|
||||
- [@official@BitBucket Website](https://bitbucket.com/)
|
||||
- [@feed@Explore top posts about Bitbucket](https://app.daily.dev/tags/bitbucket?ref=roadmapsh)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Build Tools
|
||||
|
||||
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).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Webpack Website](https://webpack.js.org/)
|
||||
- [@official@Vite Website](https://vitejs.dev)
|
||||
- [@official@Parcel Website](https://parceljs.org/)
|
||||
- [@feed@Explore top posts about Tools](https://app.daily.dev/tags/tools?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Content Security Policy
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MDN Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
|
||||
- [@article@Web.dev - Content Security Policy (CSP)](https://web.dev/csp/)
|
||||
- [@feed@Explore top posts about Security](https://app.daily.dev/tags/security?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Credentials API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Credential Management API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API)
|
||||
- [@article@The Credential Management API](https://web.dev/articles/security-credential-management)
|
||||
@@ -1,9 +0,0 @@
|
||||
# CSS Architecture
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@How to Organize Your CSS with a Modular Architecture](https://snipcart.com/blog/organize-css-modular-architecture)
|
||||
- [@video@Modern CSS For Dynamic Component-Based Architecture](https://www.youtube.com/watch?v=Y50iqMlrqU8)
|
||||
- [@feed@Explore top posts about Architecture](https://app.daily.dev/tags/architecture?ref=roadmapsh)
|
||||
@@ -1,11 +0,0 @@
|
||||
# CSS Preprocessors
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Sass Website](https://sass-lang.com/)
|
||||
- [@official@Less Website](https://lesscss.org/)
|
||||
- [@official@Stylus Website](https://stylus-lang.com/)
|
||||
- [@official@PostCSS Website](https://postcss.org/)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Device Orientation API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Device Orientation API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events)
|
||||
- [@video@Detect the device orientation with JS](https://www.youtube.com/watch?v=fMDuFoqSQfw)
|
||||
@@ -1,11 +0,0 @@
|
||||
# Documentation Generation with AI
|
||||
|
||||
AI-powered documentation generation leverages machine learning models to automatically create and maintain software documentation. These tools can analyze code, comments, and other project artifacts to produce API references, tutorials, and other types of documentation, reducing the manual effort required and ensuring accuracy and consistency. This helps developers by freeing them from manual tasks and ensuring that their APIs are well documented.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@AI code documentation: Benefits and top tips](https://www.ibm.com/think/insights/ai-code-documentation-benefits-top-tips)
|
||||
- [@article@AI Code Documentation Generators: A Guide](https://overcast.blog/ai-code-documentation-generators-a-guide-b6cd72cd0ec4)
|
||||
- [@article@Automate Your Documentation with Claude Code & GitHub Actions: A Step-by-Step Guide](https://medium.com/@fra.bernhardt/automate-your-documentation-with-claude-code-github-actions-a-step-by-step-guide-2be2d315ed45)
|
||||
- [@video@How I Built a Tool to Auto-Generate GitHub Documentation with LLMs](https://www.youtube.com/watch?v=QYchuz6nBR8)
|
||||
- [@video@How to Generate API Documentation Using AI](https://www.youtube.com/watch?v=1529XqH50Xs)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Fetch API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Fetch API MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
- [@article@A Simple Guide to JavaScript Fetch API](https://www.javascripttutorial.net/web-apis/javascript-fetch-api/)
|
||||
- [@article@Introduction to Fetch](https://web.dev/introduction-to-fetch/)
|
||||
- [@video@JavaScript Fetch API](https://www.youtube.com/watch?v=-ZI0ea5O2oA)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Forms and Validations
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MDN Web Docs: Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
|
||||
- [@article@Learn Forms by web.dev](https://web.dev/learn/forms/)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Ionic
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Ionic Framework Website](https://ionicframework.com/)
|
||||
- [@opensource@ionic-team/ionic-framework](https://github.com/ionic-team/ionic-framework)
|
||||
- [@article@Ionic 8 Announcement](https://ionic.io/blog/ionic-8-is-here)
|
||||
- [@feed@Explore top posts about Ionic](https://app.daily.dev/tags/ionic?ref=roadmapsh)
|
||||
@@ -1,11 +0,0 @@
|
||||
# DOM Manipulation
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@DOM Tree](https://javascript.info/dom-nodes)
|
||||
- [@article@Learn the HTML DOM with Exercises - CodeGuage](https://www.codeguage.com/courses/js/html-dom-introduction)
|
||||
- [@video@What is DOM, Shadow DOM and Virtual DOM?](https://www.youtube.com/watch?v=7Tok22qxPzQ)
|
||||
- [@video@JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc)
|
||||
- [@feed@Explore top posts about DOM](https://app.daily.dev/tags/dom?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# HTML Basics
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@web.dev: Learn HTML](https://web.dev/learn/html)
|
||||
- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=kUMe1FH4CHE)
|
||||
@@ -1,9 +0,0 @@
|
||||
# CSS Basics
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@web.dev — Learn CSS](https://web.dev/learn/css/)
|
||||
- [@video@CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)
|
||||
- [@video@CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA)
|
||||
@@ -1,8 +0,0 @@
|
||||
# JavaScript
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
|
||||
- [@video@JavaScript Tutorial Full Course - Beginner to Pro (2024)](https://www.youtube.com/watch?v=EerdGm-ehJQ)
|
||||
@@ -1,7 +0,0 @@
|
||||
# Linters formatters
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What Is a Linter?](https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Location API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Geolocation API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
|
||||
- [@article@Geolocation API overview](https://developers.google.com/maps/documentation/geolocation/overview)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Making layouts
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Learn and Practice Flexbox](https://flexboxfroggy.com/)
|
||||
- [@article@The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
|
||||
- [@article@Learn CSS Grid - Course](https://cssgrid.io/)
|
||||
- [@article@Get on the Grid at Last with the CSS Grid Layout Module](https://thenewstack.io/get-grid-last-css-grid-template-markup/)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Notifications API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Get Started With The Notifications API](https://web.dev/articles/codelab-notifications-get-started)
|
||||
- [@article@Notifications API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)
|
||||
- [@video@How To Send Push Notifications With JavaScript](https://youtu.be/Bm0JjR4kP8w?si=-2Nu0I2Zl9f-R1zj)
|
||||
@@ -1,11 +0,0 @@
|
||||
# OWASP Security Risks
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@OWASP Website](https://owasp.org/)
|
||||
- [@opensource@OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist)
|
||||
- [@official@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
|
||||
- [@article@OWASP Top 10: A Guide to the Worst Software Vulnerabilities](https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/)
|
||||
- [@feed@Explore top posts about Security](https://app.daily.dev/tags/security?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Payments
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Payment Request API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API)
|
||||
- [@article@The Payment Request API](https://www.w3.org/TR/payment-request/)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Performance Metrics
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Web Performance Metrics - Google Developers](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)
|
||||
- [@article@Measuring web performance in 2024](https://requestmetrics.com/web-performance/measure-web-performance/)
|
||||
- [@article@Measuring performance and user experience - MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Performance)
|
||||
- [@feed@Explore top posts about Performance](https://app.daily.dev/tags/performance?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Pick a Framework
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@video@15 Crazy New JS Framework Features You Don't Know Yet](https://www.youtube.com/watch?v=466U-2D86bc)
|
||||
- [@video@Which JS Framework is Best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
|
||||
@@ -1,9 +0,0 @@
|
||||
# PostCSS
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@PostCSS Website](https://postcss.org/)
|
||||
- [@video@Learn PostCSS in 15 minutes](https://www.youtube.com/watch?v=Kn2SKUOaoT4)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# PRPL Pattern
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@PRPL Pattern - Google Developers](https://developers.google.com/web/fundamentals/performance/prpl-pattern)
|
||||
- [@article@PRPL Pattern](https://www.patterns.dev/vanilla/prpl/)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Qwik
|
||||
|
||||
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.
|
||||
|
||||
Learn more from the following resources:
|
||||
|
||||
- [@official@Qwik Website](https://qwik.dev)
|
||||
- [@video@Qwik - The world's first O(1) JavaScript Framework?](https://www.youtube.com/watch?v=x2eF3YLiNhY)
|
||||
@@ -1,8 +0,0 @@
|
||||
# RAIL Model
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@RAIL Model - Google Developers](https://developers.google.com/web/fundamentals/performance/rail)
|
||||
- [@article@An Overview of the RAIL performance model](https://www.keycdn.com/blog/rail-performance-model)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Responsive Web Design
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Learn Responsive Design](https://web.dev/learn/design/)
|
||||
- [@article@The Beginner's Guide to Responsive Web Design](https://kinsta.com/blog/responsive-web-design/)
|
||||
- [@video@Introduction To Responsive Web Design](https://www.youtube.com/watch?v=srvUrASNj0s)
|
||||
- [@course@Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Sass
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Sass Website](https://sass-lang.com/)
|
||||
- [@official@Online Sass Playground](https://sass-lang.com/playground/)
|
||||
- [@video@Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs)
|
||||
- [@video@Sass, BEM, & Responsive Design](https://www.youtube.com/watch?v=jfMHA8SqUL4)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Basics of SEO
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Google Search Central — SEO Docs](https://developers.google.com/search/docs)
|
||||
- [@course@Complete SEO Course for Beginners](https://www.youtube.com/watch?v=xsVTqzratPs)
|
||||
- [@course@SEO for 2024: The Complete Guide](https://www.youtube.com/watch?v=8YDUP-RH_4g)
|
||||
- [@feed@Explore top posts about SEO](https://app.daily.dev/tags/seo?ref=roadmapsh)
|
||||
@@ -1,8 +0,0 @@
|
||||
# Server Sent Events
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Server-Sent Events - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events)
|
||||
- [@video@Server-Sent Events - Postman](https://www.youtube.com/watch?v=KrE044J8jEQ)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Service Workers
|
||||
|
||||
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).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Service Workers - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
|
||||
- [@article@Service Workers - Google](https://web.dev/learn/pwa/service-workers)
|
||||
- [@video@Web Workers Explained](https://www.youtube.com/watch?v=JMKLXGwltGc)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Static Site Generators
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is a Static Site Generator?](https://www.cloudflare.com/learning/performance/static-site-generator/)
|
||||
- [@article@Get Back to Basics With Static Website Generators](https://thenewstack.io/get-back-basics-static-website-generators/)
|
||||
- [@video@What is a static site generator](https://www.youtube.com/watch?v=Qms4k6y7OgI)
|
||||
- [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Web Storage API
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Web Storage API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
|
||||
- [@article@Web Storage API – How to Store Data on the Browser](https://www.freecodecamp.org/news/web-storage-api-how-to-store-data-on-the-browser/)
|
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Type Checkers
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Flow - Static Type Checker for JavaScript](https://flow.org/)
|
||||
- [@official@TypeScript](https://www.typescriptlang.org/)
|
||||
- [@official@Mypy - Static Type Checker for Python](https://mypy.readthedocs.io/en/stable/)
|
||||
@@ -1,12 +0,0 @@
|
||||
# TypeScript
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit Dedicated TypeScript Roadmap](https://roadmap.sh/typescript)
|
||||
- [@official@TypeScript Website](https://www.typescriptlang.org/)
|
||||
- [@official@TypeScript Playground](https://www.typescriptlang.org/play)
|
||||
- [@official@The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
|
||||
- [@video@TypeScript for Beginners](https://www.youtube.com/watch?v=BwuLxPH8IDs)
|
||||
- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Browser DevTools
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Chrome DevTools - Google Developers](https://developers.google.com/web/tools/chrome-devtools)
|
||||
- [@official@Firefox DevTools User Docs](https://firefox-source-docs.mozilla.org/devtools-user/)
|
||||
- [@feed@Explore top posts about DevTools](https://app.daily.dev/tags/devtools?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Lighthouse
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Lighthouse - Google Developers](https://developers.google.com/web/tools/lighthouse)
|
||||
- [@video@What is Google Lighthouse and how to use it](https://www.youtube.com/watch?v=VyaHwvPWuZU)
|
||||
- [@feed@Explore top posts about Lighthouse](https://app.daily.dev/tags/lighthouse?ref=roadmapsh)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Version Control Systems
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit Dedicated Git & GitHub Roadmap](https://roadmap.sh/git-github)
|
||||
- [@video@What is a Version Control System and why you should always use it](https://www.youtube.com/watch?v=IeXhYROClZk)
|
||||
- [@article@What is version control?](https://www.atlassian.com/git/tutorials/what-is-version-control)
|
||||
- [@course@Why version control? (Interactive Lesson)](https://inter-git.com/lessons/introduction)
|
||||
@@ -1,11 +0,0 @@
|
||||
# Web Security Knowledge
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@OWASP Website](https://owasp.org/)
|
||||
- [@article@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html)
|
||||
- [@article@Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
|
||||
- [@video@OWASP ZAP Step-by-Step Tutorial](https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5)
|
||||
- [@feed@Explore top posts about Security](https://app.daily.dev/tags/security?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Web Sockets
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Web Sockets - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
|
||||
- [@article@What are Web Sockets?](https://www.pubnub.com/guides/websockets/)
|
||||
- [@video@How Web Sockets Work](https://www.youtube.com/watch?v=pnj3Jbho5Ck)
|
||||
@@ -1,10 +0,0 @@
|
||||
# Webpack
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Webpack](https://webpack.js.org/)
|
||||
- [@official@Getting Started with Webpack](https://webpack.js.org/guides/getting-started/)
|
||||
- [@article@A Complete Guide to Webpack 5](https://www.valentinog.com/blog/webpack)
|
||||
- [@feed@Explore top posts about Webpack](https://app.daily.dev/tags/webpack?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Modern CSS
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Modern CSS: A Comprehensive Guide](https://moderncss.dev/)
|
||||
- [@article@CSS-Tricks: Modern CSS](https://css-tricks.com/modern-css/)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Semantic HTML
|
||||
|
||||
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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html)
|
||||
- [@article@Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/)
|
||||
- [@video@Why & When to Use Semantic HTML Elements over Div(s)](https://www.youtube.com/watch?v=bOUhq46fd5g)
|
||||
Reference in new issue
Block a user