Improved Frontend Roadmap (#7298)
* Phase - 1 * Phase - 2 * Phase - 3 * Phase - 4 * Phase - 5 * Phase - 6 * Phase - 7 * Apply suggestions from code review --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>pull/7317/head
Vedansh
2 months ago
committed by
GitHub
parent
346c630019
commit
421133ecc2
51 changed files with 91 additions and 60 deletions
@ -1,3 +1,9 @@ |
|||||||
# Desktop Applications in JavaScript |
# Desktop Applications in JavaScript |
||||||
|
|
||||||
Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses. |
Desktop applications applications typically use frameworks like Electron, NW.js (Node-WebKit), or Tauri, which combine a JavaScript runtime with a native GUI toolkit. This approach allows developers to use their web development skills to create cross-platform desktop apps. Electron, developed by GitHub, is particularly popular, powering applications like Visual Studio Code, Atom, and Discord. These frameworks provide APIs to access native system features, enabling JavaScript to interact with the file system, system tray, and other OS-specific functionalities. While offering rapid development and cross-platform compatibility, JavaScript desktop apps can face challenges in terms of performance and resource usage compared to traditional native applications. However, they benefit from the vast ecosystem of JavaScript libraries and tools, making them an attractive option for many developers and businesses. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [@official@Electron Website](https://www.electronjs.org/) |
||||||
|
- [@official@NW.js Website](https://nwjs.io/) |
||||||
|
- [@official@Tauri Website](https://tauri.app/) |
||||||
|
|||||||
@ -1,3 +1,8 @@ |
|||||||
# Internet |
# Internet |
||||||
|
|
||||||
The Internet is a global network of interconnected computer networks that use the Internet Protocol Suite (TCP/IP) to communicate. It enables the exchange of data, information, and services across the world, connecting billions of devices and users. The Internet has revolutionized communication, commerce, education, and entertainment, becoming an integral part of modern society. It supports various applications and services, from web browsing and instant messaging to streaming media and online gaming. While offering unprecedented access to information and connectivity, the Internet also raises concerns about privacy, security, and digital divide issues. |
The Internet is a global network of interconnected computer networks that use the Internet Protocol Suite (TCP/IP) to communicate. It enables the exchange of data, information, and services across the world, connecting billions of devices and users. The Internet has revolutionized communication, commerce, education, and entertainment, becoming an integral part of modern society. It supports various applications and services, from web browsing and instant messaging to streaming media and online gaming. While offering unprecedented access to information and connectivity, the Internet also raises concerns about privacy, security, and digital divide issues. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [@roadmap@Introduction to Internet](https://roadmap.sh/guides/what-is-internet) |
||||||
|
- [@article@The Internet](https://en.wikipedia.org/wiki/Internet) |
||||||
|
|||||||
@ -1,3 +1,9 @@ |
|||||||
# Type Checkers |
# Type Checkers |
||||||
|
|
||||||
Type checkers are tools that analyze code to detect and prevent type-related errors without executing the program. They enforce type consistency, helping developers catch mistakes early in the development process. Popular type checkers include TypeScript for JavaScript, Flow for JavaScript, and mypy for Python. These tools add static typing to dynamically typed languages, offering benefits like improved code reliability, better documentation, and enhanced developer tooling support. Type checkers can infer types in many cases and allow for gradual adoption in existing projects. They help prevent common runtime errors, facilitate refactoring, and improve code maintainability. While adding some overhead to the development process, type checkers are widely adopted in large-scale applications for their ability to catch errors before runtime and improve overall code quality. |
Type checkers are tools that analyze code to detect and prevent type-related errors without executing the program. They enforce type consistency, helping developers catch mistakes early in the development process. Popular type checkers include TypeScript for JavaScript, Flow for JavaScript, and mypy for Python. These tools add static typing to dynamically typed languages, offering benefits like improved code reliability, better documentation, and enhanced developer tooling support. Type checkers can infer types in many cases and allow for gradual adoption in existing projects. They help prevent common runtime errors, facilitate refactoring, and improve code maintainability. While adding some overhead to the development process, type checkers are widely adopted in large-scale applications for their ability to catch errors before runtime and improve overall code quality. |
||||||
|
|
||||||
|
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,3 +1,9 @@ |
|||||||
# Modern CSS |
# Modern CSS |
||||||
|
|
||||||
Modern CSS emphasizes responsive design with techniques like media queries and fluid typography. It also includes methodologies like CSS-in-JS and utility-first frameworks (e.g., Tailwind CSS). Features such as CSS Logical Properties improve internationalization, while CSS Houdini allows for more powerful custom styling. Modern CSS focuses on performance optimization, maintainability, and creating adaptive, accessible designs across various devices and screen sizes, significantly improving the capabilities and efficiency of web styling. |
Modern CSS emphasizes responsive design with techniques like media queries and fluid typography. It also includes methodologies like CSS-in-JS and utility-first frameworks (e.g., Tailwind CSS). Features such as CSS Logical Properties improve internationalization, while CSS Houdini allows for more powerful custom styling. Modern CSS focuses on performance optimization, maintainability, and creating adaptive, accessible designs across various devices and screen sizes, significantly improving the capabilities and efficiency of web styling. |
||||||
|
|
||||||
|
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,10 +1,10 @@ |
|||||||
# Semantic HTML |
# Semantic HTML |
||||||
|
|
||||||
Semantic HTML refers to the use of HTML markup to reinforce the meaning of web content, rather than merely defining its appearance. It involves using HTML elements that clearly describe their purpose and content. Semantic HTML improves accessibility, SEO, and code readability. Key elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. It also encompasses using appropriate heading levels (`<h1>` to `<h6>`), lists (`<ul>`, `<ol>`,` <li>`), and data tables (`<table>`, `<th>`, `<td>`). Semantic HTML helps screen readers interpret page content, enables better browser rendering, and provides clearer structure for developers. By using semantically correct elements, developers create more meaningful, accessible, and maintainable web documents that are easier for both humans and machines to understand and process. |
Semantic HTML refers to the use of HTML markup to reinforce the meaning of web content, rather than merely defining its appearance. It involves using HTML elements that clearly describe their purpose and content. Semantic HTML improves accessibility, SEO, and code readability. Key elements include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`. It also encompasses using appropriate heading levels (`<h1>` to `<h6>`), lists (`<ul>`, `<ol>`,`<li>`), and data tables (`<table>`, `<th>`, `<td>`). Semantic HTML helps screen readers interpret page content, enables better browser rendering, and provides clearer structure for developers. By using semantically correct elements, developers create more meaningful, accessible, and maintainable web documents that are easier for both humans and machines to understand and process. |
||||||
|
|
||||||
Visit the following resources to learn more: |
Visit the following resources to learn more: |
||||||
|
|
||||||
- [@article@Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html) |
- [@article@Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html) |
||||||
- [@article@W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) |
- [@article@W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) |
||||||
- [@article@Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/) |
- [@article@Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/) |
||||||
- [@video@Why & When to Use Semantic HTML Elements over Divs](https://www.youtube.com/watch?v=bOUhq46fd5g) |
- [@video@Why & When to Use Semantic HTML Elements over Div(s)](https://www.youtube.com/watch?v=bOUhq46fd5g) |
||||||
|
|||||||
Loading…
Reference in new issue