tag:blogger.com,1999:blog-53068779995574278612024-03-16T21:27:52.602-07:00Online Tutorials, Videos and Demo for JavaScript Tutorials for JavaScript, java, spring, spring boot, laravel, php, ajax, jquery, jsp, hibernate, html5, css, regular expression, mysql, sqlite, qt, c and Youtube videosBitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.comBlogger181125tag:blogger.com,1999:blog-5306877999557427861.post-34647779549222316142024-03-16T21:26:00.000-07:002024-03-16T21:26:54.456-07:00? and ! symbol in Angular<p> <span style="background-color: white; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; white-space-collapse: preserve;">In Angular, both </span><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; white-space-collapse: preserve;"><b style="background-color: #fcff01;">!</b></code><span style="background-color: white; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; white-space-collapse: preserve;"> and </span><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #fcff01; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; white-space-collapse: preserve;">?</code><span style="background-color: white; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; white-space-collapse: preserve;"> serve different purposes and have specific meanings.</span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style: none; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600;">!</span>: This symbol is primarily used in Angular template expressions to indicate a non-null assertion. When you use <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">!</code> after a property or expression, you're telling TypeScript that you're confident that the value won't be null or undefined. It's often used when you know for sure that a value exists, but TypeScript's static analysis cannot infer it.<span></span></p><a name='more'></a><p></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;">Example:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: currentcolor; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0.5rem; margin-top: 0.25rem; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><code class="!whitespace-pre hljs language-html" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background: none; border-radius: 0.3em; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: white; font-family: inherit; font-size: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; overflow-wrap: normal; padding: 0.1em; tab-size: 4; white-space: normal; word-break: normal; word-spacing: normal;"><span class="hljs-tag" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><<span class="hljs-name" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">div</span>></span>{{ someVariable! }}<span class="hljs-tag" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"></<span class="hljs-name" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">div</span>></span>
</code></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;">In this example, <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">someVariable</code> is assumed to exist and will not be null or undefined.</p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600;">?</span>: This symbol is known as the safe navigation operator or optional chaining operator. It's used to guard against null or undefined values when accessing properties of objects in Angular template expressions. If the property or expression before <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">?</code> is null or undefined, the expression will return null instead of causing an error.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;">Example:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: currentcolor; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0.5rem; margin-top: 0.25rem; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><code class="!whitespace-pre hljs language-html" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background: none; border-radius: 0.3em; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: white; font-family: inherit; font-size: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; overflow-wrap: normal; padding: 0.1em; tab-size: 4; white-space: normal; word-break: normal; word-spacing: normal;"><span class="hljs-tag" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><<span class="hljs-name" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">div</span>></span>{{ object?.property }}<span class="hljs-tag" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"></<span class="hljs-name" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">div</span>></span>
</code></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;">In this example, if <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">object</code> is null or undefined, Angular will not throw an error when trying to access <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">property</code>.</p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">To summarize:</p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">!</code> asserts that a value won't be null or undefined.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">?</code> guards against null or undefined values when accessing properties.</li></ul>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-30921266916656759302024-03-14T08:38:00.000-07:002024-03-14T08:42:55.952-07:00How to set up a custom domain with Blogger?<p data-sourcepos="1:1-1:74" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 0px 0px 1rem; white-space-collapse: preserve; word-break: break-word;">Here's a step-by-step guide on how to set up a custom domain with Blogger:</p><p data-sourcepos="3:1-3:18" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Prerequisites:</span></p><ul data-sourcepos="5:1-7:0" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="5:1-5:39" style="margin-bottom: 0px;">A Google account with a Blogger blog.</li><li data-sourcepos="6:1-7:0" style="margin-bottom: 0px;">A registered domain name (you can purchase one from domain registrars like Google Domains, Namecheap, GoDaddy, etc.).</li></ul><p data-sourcepos="8:1-8:10" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Steps:</span></p><ol data-sourcepos="10:1-15:0" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 4px 0px; padding-inline-start: 1.75rem;"><li data-sourcepos="10:1-10:135" style="margin-bottom: 0px;"><span style="font-weight: 700;">Access your Blogger dashboard:</span> Go to <a class="traceable-link" href="https://www.blogger.com/" rel="noopener noreferrer" target="_blank">https://www.blogger.com/</a> and sign in using your Google account.</li><li data-sourcepos="11:1-11:115" style="margin-bottom: 0px;"><span style="font-weight: 700;">Select your blog:</span> On the left-hand side menu, click on the blog where you want to set up the custom domain.</li><li data-sourcepos="12:1-12:68" style="margin-bottom: 0px;"><span style="font-weight: 700;">Go to Settings:</span> Click on the "Settings" option from the menu.</li><li data-sourcepos="13:1-13:87" style="margin-bottom: 0px;"><span style="font-weight: 700;">Access "Publishing":</span> Under the "Settings" menu, locate the "Publishing" section.</li><li data-sourcepos="14:1-15:0" style="margin-bottom: 0px;"><span style="font-weight: 700;">Set up a custom domain:</span> Click on the "Set up a custom domain" button.</li></ol><p data-sourcepos="16:1-16:43" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Two Options for Connecting your Domain:</span></p><p data-sourcepos="18:1-18:28" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">A. Using Google Domains:</span></p><ul data-sourcepos="20:1-22:0" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="20:1-20:100" style="margin-bottom: 0px;">If you purchased your domain through Google Domains, you'll see an option to connect it directly.</li><li data-sourcepos="21:1-22:0" style="margin-bottom: 0px;">Click on "Continue with Google Domains" and follow the on-screen instructions. Google will handle the necessary DNS (Domain Name System) configuration steps.<span><a name='more'></a></span></li></ul><p data-sourcepos="23:1-23:42" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">B. Using a different Domain Registrar:</span></p><ul data-sourcepos="25:1-27:0" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="25:1-25:110" style="margin-bottom: 0px;">If you purchased your domain from a different provider, you'll need to manually configure the DNS settings.</li><li data-sourcepos="26:1-27:0" style="margin-bottom: 0px;">Click on the "Set up a third-party domain" option.</li></ul><p data-sourcepos="28:1-28:29" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Manual DNS Configuration:</span></p><ul data-sourcepos="30:1-41:0" style="color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="30:1-30:100" style="margin-bottom: 0px;"><span style="background-color: white;">Blogger will provide you with two CNAME records (like </span><code style="background-color: var(--bard-color-surface-container-high); border-radius: 6px; color: var(--bard-color-on-surface-variant); font-family: "Google Sans Mono", monospace; line-height: 1.25rem; padding: 1px 6px;"><b style="background-color: #cfe2f3;">ghs.google.com</b></code><span style="background-color: white;">) and a unique security key.</span></li><li data-sourcepos="31:1-31:130" style="background-color: white; font-size: 16px; margin-bottom: 0px;"><span style="font-weight: 700;">Access your domain registrar's control panel:</span> Log in to the website of your domain registrar where you purchased the domain.</li><li data-sourcepos="32:1-32:181" style="background-color: white; font-size: 16px; margin-bottom: 0px;"><span style="font-weight: 700;">Locate the DNS management section:</span> Find the section where you can manage your domain's DNS records. This might be labeled as "DNS Management", "Domain Management", or similar.</li><li data-sourcepos="33:1-39:96" style="margin-bottom: 0px;"><span style="background-color: white; font-size: 16px; font-weight: 700;">Add the CNAME records:</span><span style="background-color: white; font-size: 16px;"> You'll need to create two CNAME records:</span><ul data-sourcepos="34:5-39:96" style="margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="34:5-36:120" style="margin-bottom: 0px;"><span style="background-color: white; font-size: 16px; font-weight: 700;">First CNAME:</span><ul data-sourcepos="35:9-36:120" style="margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="35:9-35:103" style="background-color: white; font-size: 16px; margin-bottom: 0px;">In the "Host" or "Name" field, enter your desired subdomain (e.g., "www" or your blog name).</li><li data-sourcepos="36:9-36:120" style="margin-bottom: 0px;"><span style="background-color: white; font-size: 16px;">In the "Points to" or "Value" field, enter the first CNAME value provided by Blogger (e.g., </span><code style="background-color: var(--bard-color-surface-container-high); border-radius: 6px; color: var(--bard-color-on-surface-variant); font-family: "Google Sans Mono", monospace; line-height: 1.25rem; padding: 1px 6px;"><b style="background-color: #cfe2f3;">ghs.google.com</b></code><span style="background-color: white; font-size: 16px;">).</span></li></ul></li><li data-sourcepos="37:5-39:96" style="background-color: white; font-size: 16px; margin-bottom: 0px;"><span style="font-weight: 700;">Second CNAME:</span><ul data-sourcepos="38:9-39:96" style="margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="38:9-38:117" style="margin-bottom: 0px;">In the "Host" or "Name" field, enter a unique name provided by Blogger (e.g., a long string of characters).</li><li data-sourcepos="39:9-39:96" style="margin-bottom: 0px;">In the "Points to" or "Value" field, enter the second CNAME value provided by Blogger.</li></ul></li></ul></li><li data-sourcepos="40:1-41:0" style="background-color: white; font-size: 16px; margin-bottom: 0px;"><span style="font-weight: 700;">Save the DNS changes:</span> After adding the CNAME records, save your changes in the domain registrar's control panel.</li></ul><p data-sourcepos="42:1-42:21" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Propagation Time:</span></p><ul data-sourcepos="44:1-45:0" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="44:1-45:0" style="margin-bottom: 0px;">Allow some time (usually up to 24 hours) for the DNS changes to propagate across the internet.</li></ul><p data-sourcepos="46:1-46:54" style="background-color: white; color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 1rem 0px; white-space-collapse: preserve; word-break: break-word;"><span style="font-weight: 700;">Optional: Setting up redirection (www vs non-www):</span></p><ul data-sourcepos="48:1-50:0" style="color: #1f1f1f; font-family: "Google Sans", "Helvetica Neue", sans-serif; margin: 4px 0px; padding-inline-start: 1.125rem;"><li data-sourcepos="48:1-48:219" style="margin-bottom: 0px;"><span style="background-color: white; font-size: 16px;">You can choose to redirect users from the non-www version of your domain (e.g., </span><code style="background-color: #fff2cc; border-radius: 6px; color: var(--bard-color-on-surface-variant); font-family: "Google Sans Mono", monospace; line-height: 1.25rem; padding: 1px 6px;"><b>yourdomain.com</b></code><span style="background-color: white; font-size: 16px;">) to the www subdomain (e.g., </span><code style="background-color: #fff2cc; border-radius: 6px; color: var(--bard-color-on-surface-variant); font-family: "Google Sans Mono", monospace; line-height: 1.25rem; padding: 1px 6px;"><b>www.yourdomain.com</b></code><span style="background-color: white; font-size: 16px;">) or vice versa. This ensures consistency in how your blog is accessed.</span></li><li data-sourcepos="49:1-50:0" style="background-color: white; font-size: 16px; margin-bottom: 0px;">The specific steps for setting up redirection might vary depending on your domain registrar.</li></ul>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-68758893997063809742024-03-13T04:18:00.000-07:002024-03-13T04:19:13.025-07:00ROWNUM vs LIMIT in SQL<p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space-collapse: preserve;"><b><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em;">ROWNUM</code> </b>and <b><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em;">LIMIT</code> </b>are both mechanisms used in different database management systems to restrict the number of rows returned by a query, but they are used in different contexts and have some differences:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style: none; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">ROWNUM</span>:</p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">ROWNUM</code> is a pseudo-column in Oracle databases that returns a unique sequential number for each row retrieved by a query.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">It is typically used in conjunction with a <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">WHERE</code> clause to limit the number of rows returned.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">For example:<pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: currentcolor; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0.5rem; margin-top: 0.25rem; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><code class="!whitespace-pre hljs language-sql" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background: none; border-radius: 0.3em; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: white; font-family: inherit; font-size: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; overflow-wrap: normal; padding: 0.1em; tab-size: 4; white-space: normal; word-break: normal; word-spacing: normal;"><span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #2e95d3;">SELECT</span> <span class="hljs-operator" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">*</span> <span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #2e95d3;">FROM</span> table_name <span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #2e95d3;">WHERE</span> ROWNUM <span class="hljs-operator" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><=</span> <span class="hljs-number" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #df3079;">10</span>;
</code></div></div></pre></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">This query will return the first 10 rows from the table <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">table_name</code>.</li><span><a name='more'></a></span><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><br /></li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">LIMIT</span>:</p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">LIMIT</code> is a clause used in SQL (Structured Query Language) to restrict the number of rows returned by a query in many relational database management systems such as MySQL, PostgreSQL, SQLite, etc.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">It is typically used at the end of a <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">SELECT</code> statement to specify the maximum number of rows to return.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">For example:<pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: currentcolor; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0.5rem; margin-top: 0.25rem; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><code class="!whitespace-pre hljs language-sql" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background: none; border-radius: 0.3em; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: white; font-family: inherit; font-size: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; overflow-wrap: normal; padding: 0.1em; tab-size: 4; white-space: normal; word-break: normal; word-spacing: normal;"><span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #2e95d3;">SELECT</span> <span class="hljs-operator" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;">*</span> <span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #2e95d3;">FROM</span> table_name LIMIT <span class="hljs-number" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #df3079;">10</span>;
</code></div></div></pre></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">This query will return the first 10 rows from the table <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">table_name</code>.</li></ul></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space-collapse: preserve;">In summary, while both <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">ROWNUM</code> and <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">LIMIT</code> serve a similar purpose of restricting the number of rows returned by a query, <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">ROWNUM</code> is specific to Oracle databases, whereas <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">LIMIT</code> is more widely used across different database management systems. Additionally, the syntax and usage may differ slightly between the two.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-15297878164878268152024-02-28T19:41:00.000-08:002024-02-28T19:51:16.740-08:00Pros and cons of SCSS (Sass) compared to CSS<p><span style="color: red;"><b><span style="font-size: large;"> </span><span color="var(--tw-prose-bold)" face="Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"" style="background-color: white; font-family: arial; font-size: medium; white-space-collapse: preserve;">SCSS (Sass):</span></b></span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-family: arial; font-size: medium; font-weight: 600;"><span> </span>Pros:</span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; list-style: none; margin: 1.25em 0px; padding: 0px; text-align: left; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Variables:</span> SCSS allows you to declare variables, making it easy to reuse values throughout your stylesheets. This promotes consistency and reduces redundancy in your code.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Nesting:</span> SCSS allows for nested CSS rules, which can help to organize and structure your stylesheets in a more hierarchical way, resembling the HTML structure. This can improve readability and maintainability.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Mixins:</span> SCSS supports mixins, which are reusable blocks of styles that can be included in multiple selectors. This enables you to encapsulate common patterns or sets of styles, promoting code reusability and maintainability.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Functions:</span> SCSS includes built-in functions that allow for more advanced and dynamic stylesheet generation. These functions can perform calculations, manipulate colors, and more, providing greater flexibility in your stylesheets.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Partials and Importing:</span> SCSS supports the use of partials, which are separate files containing segments of CSS that can be imported into other SCSS files. This modular approach can help to organize your stylesheets into smaller, more manageable pieces.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Extends:</span> SCSS provides the <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-weight: 600;">@extend</code> directive, which allows one selector to inherit styles from another selector. This can help to avoid code duplication and maintain a more DRY (Don't Repeat Yourself) codebase.</span></blockquote><p></p><a name='more'></a><p></p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-family: arial; font-size: medium; font-weight: 600;"><span> </span>Cons:</span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; list-style: none; margin: 1.25em 0px; padding: 0px; text-align: left; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Learning Curve:</span> SCSS introduces additional features and syntax compared to traditional CSS, which may require some time to learn for developers who are new to it.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Tooling:</span> While SCSS is widely supported by build tools and preprocessors, it does require additional tooling to compile SCSS code into standard CSS that browsers can understand. This adds complexity to the development workflow.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Overuse of Features:</span> The powerful features of SCSS, such as nesting and mixins, can sometimes lead to overly complex and verbose stylesheets if not used judiciously. It's important to strike a balance and avoid unnecessary abstraction.</span></blockquote><p></p></li></ol><div><br /></div><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;"><span style="color: red; font-family: arial; font-size: medium;">CSS:</span></span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-family: arial; font-size: medium; font-weight: 600;"><span> </span>Pros:</span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; list-style: none; margin: 1.25em 0px; padding: 0px; text-align: left; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Simplicity:</span> CSS is straightforward and easy to understand, making it accessible to beginners and quick to write for simple styling tasks.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Native Browser Support:</span> CSS is the standard styling language understood by web browsers, eliminating the need for additional compilation steps. This simplifies the development and deployment process.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Familiarity:</span> CSS is a fundamental skill for web development, and most developers are already familiar with its syntax and concepts. There's a wealth of resources and documentation available for CSS, making it easy to find solutions to common styling challenges.</span></blockquote><p></p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-family: arial; font-size: medium; font-weight: 600;"><span> </span>Cons:</span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; counter-reset: list-number 0; display: flex; flex-direction: column; list-style: none; margin: 1.25em 0px; padding: 0px; text-align: left; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Limited Features:</span> CSS lacks some of the advanced features found in SCSS, such as variables, mixins, and functions. This can lead to repetitive code and reduced maintainability for larger projects.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Global Scope:</span> CSS operates in a global scope by default, which can increase the risk of naming conflicts and unintended style overrides, especially in large codebases.</span></blockquote><p></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"><span style="font-family: arial; font-size: medium;"><br /></span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; counter-increment: list-number 1; display: block; margin-bottom: 0px; margin-top: 0px; min-height: 28px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; margin: 0px;"></p><blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"><span style="font-family: arial; font-size: medium;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Code Duplication:</span> Without features like variables and mixins, CSS often requires more repetition of code, leading to larger and less maintainable stylesheets.</span></blockquote><p></p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; margin: 1.25em 0px 0px; white-space-collapse: preserve;"><span style="font-family: arial; font-size: medium;">In summary, SCSS offers a range of powerful features that can improve productivity and maintainability in larger projects, but it comes with a learning curve and additional tooling requirements. CSS, on the other hand, is simpler and more straightforward but lacks some of the advanced capabilities of SCSS. The choice between SCSS and CSS depends on the specific needs and preferences of your project and development team.</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space-collapse: preserve;"><br /></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Example 1: Variables</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">SCSS:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div>// Define variables</div><div>$<span style="color: #569cd6;">primary-color</span>: <span style="color: #f44747;">#3498db</span>;</div><div>$<span style="color: #569cd6;">secondary-color</span>: <span style="color: #f44747;">#2ecc71</span>;</div><br /><div>// <span style="color: #d7ba7d;">Use</span> variables</div><div><span style="color: #d7ba7d;">.button</span> {</div><div> <span style="color: #9cdcfe;">background-color</span>: $primary-color;</div><div> <span style="color: #9cdcfe;">color</span>: $secondary-color;</div><div>}</div></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">CSS (No variables):</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div><span style="color: #6a9955;">/* Without variables */</span></div><div><span style="color: #d7ba7d;">.button</span> {</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#3498db</span>; <span style="color: #6a9955;">/* Primary color */</span></div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#2ecc71</span>; <span style="color: #6a9955;">/* Secondary color */</span></div><div>}</div><br /></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Example 2: Nesting</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">SCSS:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div>// Nesting in SCSS</div><div><span style="color: #d7ba7d;">.nav</span> {</div><div> ul {</div><div> <span style="color: #9cdcfe;">list-style</span>: <span style="color: #ce9178;">none</span>;</div><div> <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">0</span>;</div><div> </div><div> li {</div><div> <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">inline-block</span>;</div><div> <span style="color: #9cdcfe;">margin-right</span>: <span style="color: #b5cea8;">10px</span>;</div><div> </div><div> a {</div><div> <span style="color: #9cdcfe;">text-decoration</span>: <span style="color: #ce9178;">none</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#333</span>;</div><div> }</div><div> }</div><div> }</div><div>}</div><br /></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">CSS (No nesting):</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div><span style="color: #6a9955;">/* Without nesting */</span></div><div><span style="color: #d7ba7d;">.nav</span> <span style="color: #d7ba7d;">ul</span> {</div><div> <span style="color: #9cdcfe;">list-style</span>: <span style="color: #ce9178;">none</span>;</div><div> <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">0</span>;</div><div>}</div><br /><div><span style="color: #d7ba7d;">.nav</span> <span style="color: #d7ba7d;">ul</span> <span style="color: #d7ba7d;">li</span> {</div><div> <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">inline-block</span>;</div><div> <span style="color: #9cdcfe;">margin-right</span>: <span style="color: #b5cea8;">10px</span>;</div><div>}</div><br /><div><span style="color: #d7ba7d;">.nav</span> <span style="color: #d7ba7d;">ul</span> <span style="color: #d7ba7d;">li</span> <span style="color: #d7ba7d;">a</span> {</div><div> <span style="color: #9cdcfe;">text-decoration</span>: <span style="color: #ce9178;">none</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#333</span>;</div><div>}</div></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Example 3: Mixins</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">SCSS:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div>// Define mixin</div><div><span style="color: #c586c0;">@mixin</span> border-radius($radius) {</div><div> -webkit-border-radius: $radius;</div><div> -moz-border-radius: $radius;</div><div> <span style="color: #569cd6;">border-radius</span>: $radius;</div><div>}</div><br /><div>// <span style="color: #d7ba7d;">Use</span> mixin</div><div><span style="color: #d7ba7d;">.button</span> {</div><div> @include <span style="color: #9cdcfe;">border-radius</span>(5px);</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#3498db</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#fff</span>;</div><div> <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">10px</span> <span style="color: #b5cea8;">20px</span>;</div><div>}</div></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">CSS (No mixins):</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div><span style="color: #6a9955;">/* Without mixins */</span></div><div><span style="color: #d7ba7d;">.button</span> {</div><div> <span style="color: #9cdcfe;">-webkit-border-radius</span>: <span style="color: #b5cea8;">5px</span>;</div><div> <span style="color: #9cdcfe;">-moz-border-radius</span>: <span style="color: #b5cea8;">5px</span>;</div><div> <span style="color: #9cdcfe;">border-radius</span>: <span style="color: #b5cea8;">5px</span>;</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#3498db</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#fff</span>;</div><div> <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">10px</span> <span style="color: #b5cea8;">20px</span>;</div><div>}</div><br /></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Example 4: Extends</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">SCSS:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div>// Extend placeholder selector</div><div>%<span style="color: #569cd6;">error-border</span> {</div><div> <span style="color: #9cdcfe;">border</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">#c0392b</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#c0392b</span>;</div><div>}</div><br /><div><span style="color: #d7ba7d;">.error-message</span> {</div><div> @extend %error-border;</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#f2dede</span>;</div><div>}</div><br /></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">CSS (No extends):</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px;"><div><span style="color: #6a9955;">/* Without extends */</span></div><div><span style="color: #d7ba7d;">.error-message</span> {</div><div> <span style="color: #9cdcfe;">border</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">#c0392b</span>;</div><div> <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#c0392b</span>;</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#f2dede</span>;</div><div>}</div><br /></div></div></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space-collapse: preserve;">These examples demonstrate how SCSS allows for more concise, organized, and maintainable stylesheets compared to traditional CSS, thanks to features like variables, nesting, mixins, and extends.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-5117399671251560512024-02-28T17:39:00.000-08:002024-02-28T19:29:52.760-08:00How many route guards are available in Angular 17?<p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Angular 17 Router Guards: A Concise Guide</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">In Angular 17, router guards have evolved to provide a more concise and modern approach, leveraging functional programming introduced in Angular v14.2. These guards facilitate fine-grained control over navigation, authentication, data resolution, and lazy loading of modules. Let's explore the six different router guards available in Angular 17:</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>1. CanActivateFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Determines if a route can be activated.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Logic:</span> Returns a boolean, UrlTree, or an Observable/Promise resolving to one of these.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">true</code>: Navigation proceeds.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">false</code>: Navigation is blocked.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">UrlTree</code>: Redirection to a different route.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Authentication checks (redirect to login if not authorized)</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Role-based authorization</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Prevent access to partially completed forms<span><a name='more'></a></span></li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>2. CanActivateChildFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Identical to CanActivateFn, but specifically guards child routes of a given route.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Protecting specific areas within a parent route based on additional criteria.</li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>3. CanDeactivateFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Decides if the user is allowed to navigate away from the current route.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Logic:</span> Returns a boolean, UrlTree, or an Observable/Promise resolving to one of these.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">true</code>: Navigation proceeds.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">false</code>: Navigation is blocked.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; font-weight: 600;">UrlTree</code>: Redirection to a different route.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Displaying "are you sure?" type prompts for unsaved changes.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Implementing custom logic for leaving a route (e.g., cleaning up resources).</li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>4. CanMatchFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Controls whether a route can even be matched, preventing the route from attempting to activate. Happens before CanActivate.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Logic:</span> Returns a boolean, or an Observable/Promise resolving to a boolean.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Early redirection for unauthorized users</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Preventing lazy loading of modules based on certain conditions</li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>5. ResolveFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Fetches data before a route is activated.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Logic:</span> Returns data, an Observable/Promise resolving to data, or rejects with an error.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Load necessary data required by the component before it renders.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Ensure data is ready to avoid loading spinners or delayed renders.</li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><b>6. CanLoadFn</b></span></p><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Purpose:</span> Determines if a feature module can be lazy-loaded.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">Logic:</span> Returns a boolean, UrlTree, or an Observable/Promise resolving to one of these.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600; margin-top: 1.25em;">Use Cases:</span><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Role-based module loading (e.g., loading an Admin module only for admins)</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Prevent the loading of unused modules to optimize performance</li></ul></li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Example Implementation (Authentication Guard)</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;"></span></p><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Injectable</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">CanActivateFn</span>, <span style="color: #9cdcfe;">Router</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/router'</span>;</div><br /><div>@<span style="color: #dcdcaa;">Injectable</span>({ <span style="color: #9cdcfe;">providedIn</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'root'</span> })</div><div><span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AuthGuard</span> <span style="color: #569cd6;">implements</span> <span style="color: #4ec9b0;">CanActivateFn</span> {</div><div> <span style="color: #569cd6;">constructor</span>(<span style="color: #569cd6;">private</span> <span style="color: #9cdcfe;">authService</span><span style="color: #d4d4d4;">:</span> <span style="color: #4ec9b0;">AuthService</span>, <span style="color: #569cd6;">private</span> <span style="color: #9cdcfe;">router</span><span style="color: #d4d4d4;">:</span> <span style="color: #4ec9b0;">Router</span>) {}</div><br /><div> <span style="color: #dcdcaa;">canActivate</span>()<span style="color: #d4d4d4;">:</span> <span style="color: #4ec9b0;">boolean</span> <span style="color: #d4d4d4;">|</span> <span style="color: #4ec9b0;">UrlTree</span> <span style="color: #d4d4d4;">|</span> <span style="color: #4ec9b0;">Observable</span><<span style="color: #4ec9b0;">boolean</span> <span style="color: #d4d4d4;">|</span> <span style="color: #4ec9b0;">UrlTree</span>> <span style="color: #d4d4d4;">|</span> <span style="color: #4ec9b0;">Promise</span><<span style="color: #4ec9b0;">boolean</span> <span style="color: #d4d4d4;">|</span> <span style="color: #4ec9b0;">UrlTree</span>> {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">authService</span>.<span style="color: #dcdcaa;">isLoggedIn</span>()) { </div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">true</span>; </div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">router</span>.<span style="color: #dcdcaa;">createUrlTree</span>([<span style="color: #ce9178;">'/login'</span>]); </div><div> }</div><div> }</div><div>}</div></div><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;">Routes Configuration:</span></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; font-weight: 600;"></span></p><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">routes</span><span style="color: #d4d4d4;">:</span> <span style="color: #4ec9b0;">Routes</span> <span style="color: #d4d4d4;">=</span> [</div><div> { <span style="color: #9cdcfe;">path</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">''</span>, <span style="color: #9cdcfe;">component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">HomeComponent</span> },</div><div> { <span style="color: #9cdcfe;">path</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'profile'</span>, <span style="color: #9cdcfe;">component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">ProfileComponent</span>, <span style="color: #9cdcfe;">canActivate</span><span style="color: #9cdcfe;">:</span> [<span style="color: #9cdcfe;">AuthGuard</span>] },</div><div> { </div><div> <span style="color: #9cdcfe;">path</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'admin'</span>, </div><div> <span style="color: #9cdcfe;">component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">AdminComponent</span>, </div><div> <span style="color: #9cdcfe;">canActivate</span><span style="color: #9cdcfe;">:</span> [<span style="color: #9cdcfe;">AuthGuard</span>], </div><div> <span style="color: #9cdcfe;">children</span><span style="color: #9cdcfe;">:</span> [</div><div> { <span style="color: #9cdcfe;">path</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'dashboard'</span>, <span style="color: #9cdcfe;">component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">DashboardComponent</span> },</div><div> <span style="color: #6a9955;">// Other child routes requiring authentication</span></div><div> ]</div><div> },</div><div> { <span style="color: #9cdcfe;">path</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'login'</span>, <span style="color: #9cdcfe;">component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">LoginComponent</span> },</div><div> <span style="color: #6a9955;">// Other routes not requiring authentication</span></div><div>];</div><br /></div><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: hsla(0,0%,100%,.2); --border-light: hsla(0,0%,100%,.1); --border-medium: hsla(0,0%,100%,.15); --border-xheavy: hsla(0,0%,100%,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-800); --main-surface-secondary: var(--gray-700); --main-surface-tertiary: var(--gray-600); --sidebar-surface-primary: var(--gray-900); --sidebar-surface-secondary: var(--gray-800); --sidebar-surface-tertiary: var(--gray-700); --text-primary: var(--gray-100); --text-quaternary: var(--gray-500); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"></div></pre><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;">By leveraging these functional router guards, developers can implement robust navigation controls with ease and precision in Angular 17.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-87217036634970000352024-02-09T02:18:00.000-08:002024-02-09T02:18:49.043-08:00How to write regular expressions?<p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space-collapse: preserve;">Regular expressions, often abbreviated as <b>regex </b>or <b>regexp</b>, are sequences of characters that define a search pattern. They are incredibly powerful for searching, extracting, and manipulating text based on patterns. Here's a beginner-friendly introduction to regular expressions along with some examples:</p><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">1. Basic Matching:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">.</code></span>: Matches any single character except newline.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">c.t</code> matches "cat", "cot", "cut", etc.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">[ ]</code></span>: Matches any single character within the brackets.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">[aeiou]</code> matches any vowel.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">[^ ]</code></span>: Matches any single character not within the brackets.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">[^aeiou]</code> matches any non-vowel.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">|</code></span>: Alternation, matches either the expression before or after the <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">|</code>.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">cat|dog</code> matches "cat" or "dog".<span><a name='more'></a></span></li></ul></li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">2. Quantifiers:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">*</code></span>: Matches zero or more occurrences of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab*c</code> matches "ac", "abc", "abbc", "abbbc", etc.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">+</code></span>: Matches one or more occurrences of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab+c</code> matches "abc", "abbc", "abbbc", etc.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">?</code></span>: Matches zero or one occurrence of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab?c</code> matches "ac", "abc".</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">{n}</code></span>: Matches exactly n occurrences of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab{2}c</code> matches "abbc".</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">{n,}</code></span>: Matches at least n occurrences of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab{2,}c</code> matches "abbc", "abbbc", "abbbbc", etc.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">{n,m}</code></span>: Matches at least n and at most m occurrences of the preceding character.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">ab{2,4}c</code> matches "abbc", "abbbc", "abbbbc".</li></ul></li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">3. Anchors:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">^</code></span>: Matches the start of the string.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">^hello</code> matches "hello" at the beginning of a string.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">$</code></span>: Matches the end of the string.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">world$</code> matches "world" at the end of a string.</li></ul></li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">4. Grouping and Capturing:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">(...)</code></span>: Groups regular expressions together.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">(ab)+</code> matches "ab", "abab", "ababab", etc.</li></ul></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">\n</code></span>: Matches the same text as most recently matched by the nth capturing group.<ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: flex; flex-direction: column; list-style: disc; margin: 0px 0px 0px 1rem; padding: 0px;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;">Example: <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600;">(\w+) \1</code> matches "hello hello", "world world", etc.</li></ul></li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">5. Character Classes:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">\d</code></span>: Matches any digit (0-9).</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">\w</code></span>: Matches any word character (alphanumeric plus underscore).</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">\s</code></span>: Matches any whitespace character (space, tab, newline).</li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">6. Flags:</h3><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.25em; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">i</code></span>: Case-insensitive matching.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><span style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-bold); font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em;">g</code></span>: Global matching (find all matches rather than stopping after the first match).</li></ul><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.25em; line-height: 1.6; margin: 1rem 0px 0.5rem; white-space-collapse: preserve;">Example:</h3><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space-collapse: preserve;">Let's say you want to match email addresses:</p><pre style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; line-height: 1.71429; margin-bottom: 0px; margin-top: 0px; overflow-x: auto; padding: 0px;"><div class="dark bg-gray-950 rounded-md" style="--border-heavy: rgba(217,217,227,.2); --border-light: rgba(217,217,227,.1); --border-medium: rgba(217,217,227,.15); --border-xheavy: rgba(217,217,227,.25); --link-hover: #5e83b3; --link: #7ab7ff; --main-surface-primary: var(--gray-900); --main-surface-secondary: var(--gray-850); --main-surface-tertiary: var(--gray-800); --popover-surface-primary: var(--gray-900); --sidebar-surface-primary: var(--gray-950); --sidebar-surface-secondary: var(--gray-850); --sidebar-surface-tertiary: var(--gray-800); --text-primary: var(--gray-50); --text-quaternary: var(--gray-700); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-500); --tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: rgba(13,13,13,var(--tw-bg-opacity)); border-radius: 0.375rem; border: 0px solid rgb(227, 227, 227); box-sizing: border-box;"><div class="p-4 overflow-y-auto" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; overflow-y: auto; padding: 1rem;"><code class="!whitespace-pre hljs language-regex" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background: none; border-radius: 0.3em; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: white; font-family: inherit; font-size: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; overflow-wrap: normal; padding: 0.1em; tab-size: 4; white-space: normal; word-break: normal; word-spacing: normal;">[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}
</code></div></div></pre><ul style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px; white-space-collapse: preserve;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">[A-Za-z0-9._%+-]+</code> matches the username part.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">@</code> matches the @ symbol.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">[A-Za-z0-9.-]+</code> matches the domain name.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">\.</code> matches the dot in the domain.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; display: block; margin: 0px; min-height: 28px; padding-left: 0.375em;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: var(--tw-prose-code); font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace !important; font-size: 0.875em; font-weight: 600; margin-bottom: 1.25em; margin-top: 1.25em;">[A-Za-z]{2,}</code> matches the top-level domain.</li></ul><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space-collapse: preserve;">Regular expressions might seem daunting at first, but with practice, you'll find them incredibly useful for text processing tasks. There are plenty of online regex testers where you can experiment and test your regular expressions against sample text.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-80010673843653058562023-11-01T00:10:00.008-07:002023-11-01T00:12:17.005-07:00What is Microsoft Teams?<p> <span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Microsoft Teams is a unified communication and collaboration platform that combines workplace chat,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> video conferencing,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> file storage,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and application integration.</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> It is part of the Microsoft 365 suite of products and is available as a desktop app,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> web app,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and mobile app.</span></p><div _ngcontent-ng-c2416033641="" class="markdown markdown-main-panel" dir="ltr" style="--animation-duration: 600ms; animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 24px 0px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><p data-sourcepos="3:1-3:54" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Teams allows users to create and join teams,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> which are groups of people who work together on projects or tasks.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams can be public,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> private,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> or external (meaning they include people from outside of your organization).</span></p><p data-sourcepos="5:1-5:150" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Within a team,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> users can chat,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> make video calls,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> share files,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and collaborate on documents in real time.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams also integrates with other Microsoft 365 apps,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> such as SharePoint,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> OneDrive,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and OneNote,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> making it easy to access and share files from those apps.<span></span></span></p><a name='more'></a><p></p><p data-sourcepos="7:1-7:229" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Teams is a popular choice for businesses of all sizes,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> as it offers a wide range of features and is easy to use.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> It is also a good option for remote teams,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> as it allows users to collaborate effectively from anywhere in the world.</span></p><p data-sourcepos="9:1-9:53" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Here are some of the key features of Microsoft Teams:</span></p><ul data-sourcepos="11:1-12:53" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 4px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px 0px 0px 36px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><li data-sourcepos="11:1-11:160" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Chat and video conferencing</b>:</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams allows users to chat and make video calls with individuals and groups.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Users can also screen share and record meetings.</span></li><li data-sourcepos="12:1-12:53" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>File sharing</b>:</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams allows users to share files with individuals and groups.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Users can also store files in team channels and folders.</span></li><li data-sourcepos="13:1-13:196" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Application integration</b>:</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams integrates with other Microsoft 365 apps,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> such as SharePoint,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> OneDrive,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and OneNote.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> This makes it easy to access and share files from those apps within Teams.</span></li><li data-sourcepos="14:1-15:0" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Teamwork tools</b>:</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Teams offers a variety of teamwork tools,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> such as task lists,</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> calendars,</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> and polls.</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> These tools make it easy for teams to stay organized and collaborate on projects.</span></li></ul><p data-sourcepos="16:1-16:168" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Overall,</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Microsoft Teams is a powerful and versatile communication and collaboration platform that can help businesses of all sizes to be more productive and efficient.</span></p></div>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-37728570029671861442023-10-31T23:43:00.003-07:002023-11-01T00:13:02.896-07:00How can I install windows 11?<p> <span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">To install Windows 11,</span><span face=""Google Sans", "Helvetica Neue", sans-serif" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you can use one of the following methods:</span></p><div _ngcontent-ng-c2416033641="" class="markdown markdown-main-panel" dir="ltr" style="--animation-duration: 600ms; animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 24px 0px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><p data-sourcepos="3:1-3:27" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Upgrade from Windows 10</b></span></p><p data-sourcepos="5:1-5:27" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">If you are running Windows 10,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you can upgrade to Windows 11 directly from Windows Update.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> To do this,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> open Settings > Update & Security > Windows Update and click Check for updates.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> If the upgrade is available for your device,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you will see a message that says "Windows 11 is ready to install".</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Click Download and install to begin the upgrade process.</span></p><p data-sourcepos="7:1-7:34" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Use the Installation Assistant</b></span></p><p data-sourcepos="9:1-9:81" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">If you are not eligible for the upgrade through Windows Update,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> or if you want to install Windows 11 on a new device,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you can use the Installation Assistant.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> To do this,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> go to the Microsoft website and download the Installation Assistant tool.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Once the tool has downloaded,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> run it and follow the instructions on the screen.<span></span></span></p><a name='more'></a><p></p><p data-sourcepos="11:1-11:31" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><b>Create a bootable USB drive</b></span></p><p data-sourcepos="13:1-13:322" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">If you want to install Windows 11 from a bootable USB drive,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you will need to create one using the Media Creation Tool.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> To do this,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> go to the Microsoft website and download the Media Creation Tool.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Once the tool has downloaded,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> run it and select the option to create installation media for another PC.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> Then,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> select the USB drive that you want to use and click Next.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> The Media Creation Tool will download Windows 11 and create a bootable USB drive.</span></p><p data-sourcepos="15:1-15:303" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Once you have created a bootable USB drive,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you can use it to install Windows 11 on a new device or to perform a clean install on an existing device.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> To do this,</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> plug the USB drive into your computer and boot from it.</span><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> You will then be able to follow the instructions on the screen to install Windows 11.</span></p><p data-sourcepos="17:1-17:83" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Here are the general steps for installing Windows 11 from a bootable USB drive:</span></p><ol data-sourcepos="19:1-24:0" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 4px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px 0px 0px 36px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><li data-sourcepos="19:1-19:39" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Back up all of your important files.</span></li><li data-sourcepos="20:1-20:50" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Plug the bootable USB drive into your computer.</span></li><li data-sourcepos="21:1-21:53" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Restart your computer and boot from the USB drive.</span></li><li data-sourcepos="22:1-22:63" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Follow the instructions on the screen to install Windows 11.</span></li><li data-sourcepos="23:1-24:0" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px 0px 10px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Once Windows 11 is installed,</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> you can restore your backed-up files.</span></li></ol><p data-sourcepos="25:1-25:164" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 24px 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;">Please note:</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> There are some system requirements that must be met in order to install Windows 11.</span><span class="animating" style="animation: 0s ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; gap: normal; hyphens: manual; inset: auto; isolation: auto; line-height: 24px; margin: 0px; marker: none; mask: none; offset: auto; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all 0s ease 0s; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"> You can check the system requirements on the Microsoft website.</span></p></div>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-6075552252862949422023-04-12T09:57:00.001-07:002023-04-12T09:57:06.742-07:00How to make money online?<p> There are many ways to make money online, and the best method for you will depend on your skills, interests, and resources. Here are some options to consider:</p>
<p></p>
<ol style="text-align: left;">
<li><b>Freelancing</b>: If you have a skill that you can offer online, such as writing, graphic design, or programming, you can find freelance work on websites like Upwork, Fiverr, or Freelancer.</li><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>Freelancing is a great way to make money online, especially if you have a skill that you can offer to clients. Here are some tips for getting started as a freelancer:</div><br />
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Identify your skills</b>: Consider your strengths and areas of expertise. What services can you offer to clients? Examples include writing, graphic design, programming, video editing, social media management, and more. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Create a portfolio</b>: Develop a portfolio that showcases your work and highlights your skills. You can create a website or use a platform like Behance or Dribbble to display your portfolio. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Find clients</b>: There are many ways to find clients as a freelancer. You can use freelance job platforms like Upwork, Fiverr, or Freelancer to find projects. You can also reach out to potential clients directly through social media, email, or LinkedIn. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Set your rates</b>: Determine how much you will charge for your services. Research what other freelancers in your industry are charging and adjust your rates accordingly. Be sure to communicate your rates clearly to clients upfront. <span><a name='more'></a></span></li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Deliver quality work</b>: Deliver quality work that meets or exceeds your clients' expectations. This will help you build a positive reputation and secure repeat business. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Manage your time and finances</b>: Freelancing can offer a flexible schedule, but it's important to manage your time effectively and stay organized. Also, be sure to keep track of your finances, including invoicing and taxes.</li>
</ul>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>Remember that freelancing can be competitive, so be prepared to market yourself and continually improve your skills. With hard work and dedication, freelancing can be a rewarding way to make money online.</div>
</div>
</div>
<p></p>
<p></p>
<li><b>Online surveys</b>: You can earn money by participating in online surveys through websites like Swagbucks, Survey Junkie, or Toluna.</li><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Online surveys are a popular way to make money online. Here are some tips for getting started with online surveys:</div>
</div>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Sign up with multiple survey sites</b>: There are many survey sites to choose from, and signing up with multiple sites can increase your earning potential. Some popular survey sites include Swagbucks, Survey Junkie, and Toluna. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Complete your profile</b>: Most survey sites will require you to complete a profile that includes demographic information. This information is used to match you with relevant surveys. Make sure your profile is complete and up-to-date. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Be consistent</b>: To make money with online surveys, it's important to be consistent and complete as many surveys as you can. Set aside time each day or week to complete surveys. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Watch out for scams</b>: Be cautious of survey sites that require you to pay a fee to join or promise unrealistic earnings. Legitimate survey sites should not require any upfront payment. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Cash out your earnings</b>: Once you have earned enough money, cash out your earnings. Most survey sites offer payment options such as PayPal, gift cards, or direct deposit.</li>
</ul>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Remember that taking surveys is unlikely to replace a full-time income, but it can be a way to earn some extra cash in your spare time. Be patient, and keep at it, and over time, your earnings can add up.</div>
</div>
</div>
</div><br />
<li><b>Affiliate marketing</b>: If you have a blog or social media following, you can earn money by promoting products or services through affiliate marketing. You earn a commission for each sale made through your unique affiliate link.</li><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Affiliate marketing is a popular way to make money online by promoting products or services through your website, blog, or social media channels. Here are some tips for getting started with affiliate marketing:</div>
</div>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Choose a niche</b>: Identify a niche that you are passionate about and interested in promoting. This can help you build credibility with your audience and make it easier to create content. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Find affiliate programs</b>: Research affiliate programs that align with your niche and audience. Many companies offer affiliate programs, and you can find them by searching online or through affiliate marketing platforms like Clickbank or ShareASale. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Create valuable content</b>: Create content that provides value to your audience, such as product reviews, tutorials, or how-to guides. Be honest and transparent in your reviews and recommendations. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Promote your content</b>: Promote your content through your website, blog, or social media channels. Use SEO strategies to increase visibility in search results. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Monitor your performance</b>: Track your affiliate links and monitor your performance. This can help you identify which products are performing well and adjust your strategy accordingly. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Be patient</b>: Affiliate marketing takes time and effort to build a following and start generating income. Be patient and consistent with your efforts.</li>
</ul>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Remember that successful affiliate marketing requires building trust with your audience and providing value. Be selective about the products and services you promote, and only recommend those that you truly believe in.</div>
</div>
</div>
</div><br />
<li><b>Selling products</b>: You can sell products online through marketplaces like Etsy, Amazon, or eBay. Alternatively, you can start your own online store using platforms like Shopify.</li><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Selling products online is a popular way to make money online. Here are some tips for getting started with selling products:</div>
</div>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Choose your products</b>: Identify the products you want to sell. You can sell your own products, create your own products to sell, or sell other people's products through dropshipping or affiliate marketing. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Choose your platform</b>: There are many platforms you can use to sell products online, including marketplaces like Etsy, Amazon, or eBay, or by creating your own online store using platforms like Shopify, WooCommerce, or Squarespace. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Set up your store</b>: Once you've chosen your platform, set up your store by creating product listings and optimizing them for search engines. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Promote your store</b>: Promote your store through social media, email marketing, or other digital marketing strategies. You can also use paid advertising to drive traffic to your store. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Provide great customer service</b>: Provide excellent customer service by responding to customer inquiries promptly and resolving any issues quickly. This can help you build a positive reputation and secure repeat business. </li>
</ul>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<ul style="text-align: left;">
<li><b>Analyze your performance</b>: Use analytics tools to track your sales and traffic, and adjust your strategy accordingly.</li>
</ul>
</div>
</div><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Remember that selling products online requires effort and dedication. Continually evaluate your strategy and make changes as needed to improve your sales and grow your business.</div>
</div>
</div>
</div><br />
<li><b>Online tutoring</b>: If you have expertise in a particular subject, you can offer online tutoring services through websites like Chegg or TutorMe.</li><br />
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Online tutoring is the process of teaching or guiding students over the internet through digital platforms. It involves a tutor or teacher providing one-on-one or group instruction to students remotely using videoconferencing tools, virtual whiteboards, instant messaging, and other online communication tools.</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Online tutoring has become increasingly popular in recent years due to the convenience it offers. It allows students to access tutoring services from anywhere with an internet connection, and at a time that is convenient for them. Online tutoring can be particularly helpful for students who have difficulty traveling to a physical location, those who live in remote areas, or those who need help outside of regular business hours.</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Online tutoring can cover a wide range of subjects, from basic math and reading to advanced topics such as calculus, physics, and computer science. Many online tutoring services offer a variety of different tutoring options, including live video sessions, pre-recorded lessons, and interactive exercises.</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Overall, online tutoring can be an effective and convenient way for students to receive personalized instruction and support from experienced tutors, regardless of their location or schedule.</div>
</div>
</div>
</div><br />
<li><b>Stock trading or investing</b>: You can invest in stocks, cryptocurrencies, or other assets online using trading platforms like Robinhood, Coinbase, or eToro.<span></span></li>
</ol>
<div style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Stock trading and investing are two different approaches to participating in the stock market.</div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Stock trading involves buying and selling stocks with the aim of making short-term profits. Traders typically focus on analyzing market trends, charts, and news to identify opportunities for buying and selling stocks quickly. They may use technical analysis, which involves using past price and volume data to predict future stock movements, or fundamental analysis, which involves analyzing a company's financial health and market position.</div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>On the other hand, stock investing involves buying stocks with the intention of holding onto them for the long-term, typically for several years or more. Investors usually focus on researching companies and their financial statements to identify strong businesses with potential for growth. They may also consider other factors such as industry trends, economic conditions, and the overall market environment.</div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div><br /></div>
</div>
</div>
</div>
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div style="border: none; margin: 0px 0px 0px 10px; padding: 0px; text-align: left;">
<div>
<div>Both stock trading and investing involve risk, and it's important for individuals to have a clear understanding of their investment goals, risk tolerance, and strategies before participating in the stock market. While stock trading can potentially lead to quick profits, it requires a high level of skill, discipline, and market knowledge. Stock investing, on the other hand, can provide long-term growth and stability, but requires patience and a willingness to weather short-term fluctuations in the market.</div>
</div>
</div>
</div>
</div><br />
<p></p>
<p>Remember that making money online requires time, effort, and dedication. Be wary of scams and always do your research before investing time or money into any online opportunity.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-37218641171322951942023-04-12T05:51:00.002-07:002023-04-12T05:51:24.488-07:00How to block / allow local internet access using proxy server (Local Machine)<p> To block or allow local internet access using a proxy server on a local machine, you can follow these steps:</p><p></p><ol style="text-align: left;"><li>Install a proxy server software on your local machine. There are many free and paid options available, such as Squid, CCProxy, and WinGate.</li><li>Configure the proxy server to allow or block local internet access. This process varies depending on the proxy server software you choose, but most proxy servers have options to specify rules for network traffic. You may need to consult the documentation for your chosen proxy server software to learn how to configure these rules.<span><a name='more'></a></span></li><li>For blocking local internet access, you can create a rule that denies all network traffic originating from the local machine. This will prevent any internet activity from occurring on that machine.</li><li>For allowing local internet access, you can create a rule that allows network traffic originating from the local machine. This will enable internet access on that machine.</li><li>Test your configuration to ensure that it works as expected. You can do this by attempting to access the internet from the local machine and verifying that the proxy server is either blocking or allowing access as desired.</li></ol><p></p><p>Note that blocking local internet access can have unintended consequences, such as preventing the local machine from communicating with other devices on the same network. You should carefully consider the implications of blocking local internet access before implementing this configuration.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-25431082682071404232023-03-14T23:38:00.009-07:002023-03-14T23:38:54.486-07:00What is Obfuscation in Java?<p> Obfuscation in Java is the process of making the code difficult to understand or reverse-engineer by obscuring its purpose, logic, and structure. It involves renaming classes, methods, and variables with meaningless names, removing comments and unnecessary white spaces, and restructuring the code to make it hard to follow.</p><p>The main purpose of obfuscation is to protect the intellectual property of the code, making it more difficult for others to copy, modify or steal it. It is particularly important for commercial software where source code protection is critical to prevent reverse engineering, hacking or piracy.<span></span></p><a name='more'></a><p></p><p>Obfuscation is achieved by using specialized software tools called obfuscators, which apply various techniques to modify the source code without changing its functionality. These techniques include renaming, removing, and altering code constructs, as well as adding dummy code and using encryption and compression algorithms.</p><p>It is important to note that while obfuscation can make it more difficult for someone to understand the code, it does not provide absolute security against reverse engineering or hacking. However, it can make it more time-consuming and costly for an attacker to obtain the original code.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-64586098399759514342023-03-11T22:55:00.001-08:002023-03-11T22:55:10.797-08:00How to mock static object inside an Interface by using JUnit5 in Java?<p> Mocking static objects inside an interface using JUnit5 requires the use of a mocking framework. One popular mocking framework in Java is Mockito. Here are the steps to mock a static object inside an interface using JUnit5 and Mockito:</p><p>Add the Mockito library to your project. You can do this by adding the following dependency to your build file:<span></span></p><a name='more'></a><p></p><p></p><blockquote><p><dependency></p><p> <groupId>org.mockito</groupId</p><p> <artifactId>mockito-core</artifactId></p><p> <version>3.12.4</version></p><p> <scope>test</scope></p><p></dependency></p></blockquote><p></p><p>Import the necessary classes from the Mockito library:</p><p></p><blockquote><p>import static org.mockito.Mockito.mockStatic;</p><p>import static org.mockito.ArgumentMatchers.anyString;</p></blockquote><p></p><p>Use the mockStatic() method to mock the static object inside the interface:</p><p></p><blockquote><p>@Test</p><p>void testStaticObjectInsideInterface() {</p><p> try (MockedStatic<MyInterface> mocked = mockStatic(MyInterface.class)) {</p><p> mocked.when(() -> MyInterface.myMethod(anyString())).thenReturn("Mocked response");</p><p><br /></p><p> // call the method that uses the static object inside the interface</p><p> String result = MyInterface.myMethod("input");</p><p><br /></p><p> // assert that the result is the mocked response</p><p> assertEquals("Mocked response", result);</p><p> }</p><p>}</p></blockquote><p></p><p>In this example, we are using the MockedStatic class provided by Mockito to mock the static object inside the MyInterface interface. We use the when() method to specify the behavior of the mocked method, and then we call the method that uses the static object inside the interface. Finally, we assert that the result is equal to the mocked response.</p><p><br /></p><p>Note that we are using a try-with-resources statement to automatically close the MockedStatic instance after the test is run. This is important to ensure that the static object is properly reset after the test, and to avoid interfering with other tests that may use the same static object.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-62715914456535343782023-03-10T16:48:00.003-08:002023-03-11T22:55:38.892-08:00Java code obfuscation using Proguard<p> Java code obfuscation is a technique used to protect the intellectual property of software developers by making the source code of their applications harder to understand and reverse-engineer. One popular tool for obfuscation is Proguard, which is a free, open-source tool that can be used to shrink, optimize, and obfuscate Java code.</p><p>Here are the steps to obfuscate your Java code using Proguard:<span></span></p><a name='more'></a><p></p><p>Download Proguard from its official website (<a href="https://www.guardsquare.com/en/products/proguard">https://www.guardsquare.com/en/products/proguard</a>) and extract it to a directory on your computer.</p><p>Create a configuration file for Proguard. This file tells Proguard what to obfuscate and how to obfuscate it. You can create this file manually or use the Proguard GUI to generate it.</p><p>Run Proguard with the configuration file you created as input. Here's an example command to run Proguard:</p><p></p><blockquote>java -jar proguard.jar @config.pro</blockquote><p></p><p>In this example, "proguard.jar" is the name of the Proguard JAR file, and "config.pro" is the name of the configuration file you created.</p><p>Proguard will generate a new JAR file that contains the obfuscated code. This new JAR file will be smaller than the original JAR file, since Proguard removes unused classes and methods.</p><p>Test the obfuscated code to make sure it still works as expected.</p><p>Note that obfuscation does not make your code completely secure, as it is still possible for someone to reverse-engineer the obfuscated code. However, it does make it more difficult, and can deter casual attackers from attempting to steal your intellectual property.</p><p><br /></p><p>Proguard is a popular Java code obfuscation tool that helps developers protect their Java applications from reverse engineering and unauthorized access. The tool performs a series of transformations on the Java bytecode to make it more difficult to understand and decompile.</p><p>To use Proguard for Java code obfuscation, you can follow these steps:</p><p>Download and install Proguard on your system.</p><p>Create a configuration file for Proguard. This file will specify the classes and methods that need to be obfuscated. You can use the default configuration file provided with Proguard or create a custom one.</p><p>Run Proguard with the configuration file. This will transform the bytecode of your Java application to make it more difficult to reverse engineer.</p><p>Test your obfuscated application to ensure that it still functions as expected.</p><p>Here's an example of a Proguard configuration file:</p><p></p><blockquote><p>-injars MyApplication.jar</p><p>-outjars MyApplication_obfuscated.jar</p><p>-libraryjars <java.home>/lib/rt.jar</p><p>-dontskipnonpubliclibraryclasses</p><p>-dontskipnonpubliclibraryclassmembers</p><p># Obfuscation options</p><p>-obfuscate</p><p>-dontusemixedcaseclassnames</p><p>-dontpreverify</p><p>-optimizations !code/simplification/cast</p><p><br /></p><p># Keep options</p><p>-keep public class com.example.MyApplication {</p><p> public static void main(java.lang.String[]);</p><p>}</p><p><br /></p><p># Keep all classes and members that are used by Android OS</p><p>-keep public class * extends android.app.Activity</p><p>-keep public class * extends android.app.Application</p><p>-keep public class * extends android.app.Service</p><p>-keep public class * extends android.content.BroadcastReceiver</p><p>-keep public class * extends android.content.ContentProvider</p><p>-keep public class * extends android.view.View {</p><p> public <init>(android.content.Context);</p><p> public <init>(android.content.Context, android.util.AttributeSet);</p><p> public <init>(android.content.Context, android.util.AttributeSet, int);</p><p> public void set*(...);</p><p>}</p></blockquote><p></p><p>In this example, the configuration file specifies the input and output jars, as well as the libraries to be used. The obfuscate option is set to enable obfuscation, while the keep options specify which classes and members should be preserved.</p><p>To run Proguard with the configuration file, you can use the following command:</p><p></p><blockquote>proguard @proguard.cfg</blockquote><p></p><p>This will execute Proguard with the configuration file proguard.cfg and generate the obfuscated jar file.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-55428394451235193052023-03-08T22:00:00.006-08:002023-03-11T22:56:07.577-08:00How to solve Proguard NotSerializableException in Java Application?<p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space: pre-wrap;">ProGuard is a tool used in Java development to help optimize and obfuscate code. It can sometimes cause issues with serialization if it strips out classes or fields that are necessary for serialization.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space: pre-wrap;">A NotSerializableException is typically thrown when an object is not serializable. In other words, when an object cannot be written to a stream and then reconstructed from that stream later.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space: pre-wrap;">To resolve this issue with ProGuard, you can do the following:<span></span></p><a name='more'></a><p></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; counter-reset: item 0; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px 0px 0px 1rem; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; margin: 0px;">Add the "-keepclassmembers" option to your ProGuard configuration file to ensure that all necessary classes and fields are retained. For example:</p><br /><blockquote>-keepclassmembers class com.example.MyClass implements java.io.Serializable {
*;
}
</blockquote><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; margin: 0px;">This will ensure that all members of the MyClass class are retained during the obfuscation process.</p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;">If you are using third-party libraries, make sure that they are also properly serialized. If a third-party library is not serializable, you may need to exclude it from the obfuscation process. You can do this by adding the "-keep" option to your ProGuard configuration file, followed by the package or class name you want to exclude.</p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;">Check that all objects being serialized implement the Serializable interface. If they do not, you will need to modify your code to ensure that they do.</p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space: pre-wrap;">By following these steps, you should be able to resolve any NotSerializableException issues that may arise when using ProGuard in your Java application.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-73486899246390530092022-04-24T23:08:00.016-07:002023-03-11T22:56:19.683-08:00Trading View Pine Script for Moving Average + EMA + Previous Day High and Low<p>Trading View free version chart only allows max 3 indicators. So I hereby adding an <b>Pine Script</b> for the following indicators</p><p>1) Moving Average - 5 (Period)</p><p>2) Moving Average - 20 (Period)</p><p>3) Exponential Moving Average - 200 (Period)</p><p>4) Previous Day High and Low<span></span></p><a name='more'></a><p></p><b>Pine Script</b><br />
<textarea class="form-control DemoCode_" id="code" readonly="" style="height: 550px;"> //@version=5
indicator("MA+EMA+PDHL by BitCompiler",overlay=true)
//START: Moving Averages
fastAverage = ta.sma(close, 5)
slowAverage = ta.sma(close, 20)
highAverage = ta.ema(close, 200)
plot(fastAverage, title="SMA5",color=color.green, linewidth=1)
plot(slowAverage, title="SMA20",color=color.red, linewidth=1)
plot(highAverage, title="EMA200",color=color.black, linewidth=2)
//END: Moving Averages
//START: Previous Day High and Low
dayHigh = request.security(syminfo.tickerid, 'D', high[1],lookahead=barmerge.lookahead_on)
dayLow = request.security(syminfo.tickerid, 'D', low[1],lookahead=barmerge.lookahead_on)
color orrangeColor = input(#ff6300)
color greenColor = input(#00bd00)
plot(timeframe.isintraday ? dayHigh : na, title="Daily High", color=color.new(color.green,50),linewidth=2,style = plot.style_cross)
plot(timeframe.isintraday ? dayLow : na, title="Daily Low", color=color.new(orrangeColor,50),linewidth=2,style = plot.style_cross)
//END: Previous Day High and Low
</textarea><br /><div><br /></div><div><div>How to use this script?</div><div><br /></div><div>1) Open <b>Trading View</b> chart.</div><div>2) Open <b>Pine Editor</b> (In the bottom of the chart).</div><div>3) Copy the above code and paste it into pine editor.</div><div>4) Click on the <b>Save</b> in the Pine Editor.</div><div>5) Click on <b>Add to Chart</b> in the Pine Editor.</div><div><br /></div><div>Done!</div></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiI8qcOe8DoE1ogXfJmUzNRfWXGLU7yN-9xFSeBNUC4ef1XvCS0IZb9Q96A1nTIyWvVMKzazUCipHzq5t8Wsx8e_QCgWthvlIYyIsglnzUAQXOxD5Pn2eMF4-djDpR2MTfjVg4uuzSGSH-1_6lVwhjUD5pxKg8vW6KorXlwHGjPZjs4WC9Yf_FLQy/s1017/chart.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="594" data-original-width="1017" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiI8qcOe8DoE1ogXfJmUzNRfWXGLU7yN-9xFSeBNUC4ef1XvCS0IZb9Q96A1nTIyWvVMKzazUCipHzq5t8Wsx8e_QCgWthvlIYyIsglnzUAQXOxD5Pn2eMF4-djDpR2MTfjVg4uuzSGSH-1_6lVwhjUD5pxKg8vW6KorXlwHGjPZjs4WC9Yf_FLQy/w640-h374/chart.png" width="640" /></a></div><br /><div><br /></div>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-7720413892526842042021-11-05T05:00:00.001-07:002021-11-05T05:00:08.295-07:00How to print elements of an Spark RDD? By using rdd.foreach(println) or rdd.map(println). On a single machine, this will generate the expected output and print all the RDD’s elements. <div><br /></div><div> However, in cluster mode, the output to stdout being called by the executors is now writing to the executor’s stdout instead, not the one on the driver, so stdout on the driver won’t show these! To print all elements on the driver, one can use the collect() method to first bring the RDD to the driver node thus: rdd.collect().foreach(println). This can cause the driver to run out of memory, though, because collect() fetches the entire RDD to a single machine; if you only need to print a few elements of the RDD, a safer approach is to use the take(): rdd.take(100).foreach(println).</div>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-84183420012144428112021-11-05T04:56:00.001-07:002021-11-05T05:00:20.355-07:00What is Spark Parallelize?<div>Parallelize is a method to create an RDD from an existing collection. Parallelized collections are created by calling JavaSparkContext’s parallelize method on an existing Collection in your driver program. The elements of the collection are copied to form a distributed dataset that can be operated on in parallel.</div><div><br /></div><blockquote><div>List<Integer> data = Arrays.asList(1, 2, 3, 4, 5);</div><div>JavaRDD<Integer> distData = sc.parallelize(data);</div></blockquote>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-73519714941798915882021-09-29T00:57:00.002-07:002023-03-24T01:29:45.899-07:00Denormalization in Databases<p>Denormalization is a technique used in databases to improve query performance by reducing the number of joins needed to retrieve data. It involves adding redundant data to one or more tables in order to eliminate the need for joining multiple tables to retrieve a complete result set.</p><p>Normalization is the process of designing a database schema to eliminate data redundancy and ensure data integrity. However, normalization can sometimes lead to a complex schema with multiple tables and relationships, which can negatively impact query performance.</p><p>Denormalization can help improve query performance by duplicating data and storing it in multiple tables. This can make queries simpler and faster by reducing the number of tables that need to be joined.</p><p>There are different levels of denormalization that can be applied to a database, depending on the specific needs of the application. Some common examples include:</p><p></p><ol style="text-align: left;"><li>Adding redundant columns to a table: This involves duplicating columns from related tables and storing them in a single table to avoid joins.</li><li>Combining tables: This involves merging multiple tables into a single table to simplify queries.</li><li>Creating summary tables: This involves creating pre-aggregated tables that store summary data, such as totals and averages, to avoid expensive aggregation operations during queries.</li></ol><p></p><p>While denormalization can improve query performance, it can also introduce data redundancy and increase the risk of data inconsistency. Therefore, it is important to carefully consider the trade-offs and use denormalization judiciously based on the specific needs of the application.</p><p><span style="font-size: medium;"><b>Advantages of database denormalization</b></span></p><p>Denormalization can offer several advantages in database design:</p><p></p><ol style="text-align: left;"><li>Improved query performance: By reducing the number of joins needed to retrieve data, denormalization can significantly improve query performance. This can be especially beneficial for large and complex databases with many tables.</li><li>Simplified database design: Denormalization can simplify the database design by reducing the number of tables and relationships. This can make the database easier to understand and maintain.</li><li>Reduced overhead: Since denormalization can eliminate the need for certain joins and aggregation operations, it can reduce the overhead associated with these operations. This can result in faster query execution and lower resource utilization.</li><li>Better scalability: Denormalization can help improve database scalability by reducing the number of queries needed to retrieve data. This can help the database handle larger volumes of data and users without performance degradation.</li><li>Improved user experience: Faster query performance can improve the user experience by providing faster access to data and reducing wait times.</li></ol><p></p><p>It is important to note, however, that denormalization can also have some disadvantages, such as increased data redundancy and the potential for data inconsistencies. Therefore, denormalization should be used judiciously and in conjunction with appropriate data validation and quality control measures.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-27711155830714391322021-09-27T23:31:00.010-07:002021-09-28T00:15:41.867-07:00Builder Pattern in java<p> In Builder pattern, we have a inner static class named <b>Builder</b> inside our Server class with instance fields for that class and also have a factory method to return an new instance of Builder class on every invocation. The setter methods will now return Builder class reference. We will also have a build method to return instances of Server side class, i.e. outer class.</p><p>The builder pattern is a design pattern designed to provide a flexible solution to various object creation problems in object-oriented programming. The intent of the Builder design pattern is to separate the construction of a complex object from its representation. It is one of the Gang of Four design patterns.<span></span></p><a name='more'></a><p></p>
<textarea class="form-control" id="java-code" readonly="">
class Student {
private final int id;
private final String name;
private final String address;
private Student(Builder builder) {
this.id = builder.id;
this.name = builder.name;
this.address = builder.address;
}
// Static class Builder
public static class Builder {
private int id;
private String name;
private String address;
public static Builder newInstance() {
return new Builder();
}
private Builder() {}
public Builder setId(int id) {
this.id = id;
return this;
}
public Builder setName(String name) {
this.name = name;
return this;
}
public Builder setAddress(String address) {
this.address = address;
return this;
}
public Student build() {
return new Student(this);
}
}
@Override
public String toString() {
return "id = " + this.id + ", name = " + this.name + ", address = " + this.address;
}
}
public class BuilderDemo {
public static void main(String args[]) {
Student student =
Student.Builder.newInstance().setId(7).setName("abc").setAddress("def").build();
System.out.println(student.toString());
}
}
</textarea><div><br /><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vXmR6VeZHNLF6HQtmOw9AgWzoY-QjbwLg-Fj3-czajDjAWm8QUmZ1VwMRONCWrKlJyQNNEsVGr8flnSf8l5BdfbHZDLexLY0dI37gX9V9psygwP6n_nPHlYeX3BkJYb2O4k4zK9sRVU/s393/java.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="62" data-original-width="393" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vXmR6VeZHNLF6HQtmOw9AgWzoY-QjbwLg-Fj3-czajDjAWm8QUmZ1VwMRONCWrKlJyQNNEsVGr8flnSf8l5BdfbHZDLexLY0dI37gX9V9psygwP6n_nPHlYeX3BkJYb2O4k4zK9sRVU/s320/java.png" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br />BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-34548997273349187812021-09-04T05:02:00.004-07:002021-09-04T05:03:24.606-07:00What are Datasets and DataFrames in Apache Spark?<p> A <b>Dataset </b>is a distributed collection of data. Dataset is a new interface added in Spark 1.6 that provides the benefits of RDDs (strong typing, ability to use powerful lambda functions) with the benefits of Spark SQL’s optimized execution engine. A Dataset can be constructed from JVM objects and then manipulated using functional transformations (map, flatMap, filter, etc.). The Dataset API is available in Scala and Java. Python does not have the support for the Dataset API. But due to Python’s dynamic nature, many of the benefits of the Dataset API are already available (i.e. you can access the field of a row by name naturally row.columnName). The case for R is similar.</p><p>A <b>DataFrame </b>is a Dataset organized into named columns. It is conceptually equivalent to a table in a relational database or a data frame in R/Python, but with richer optimizations under the hood. DataFrames can be constructed from a wide array of sources such as: structured data files, tables in Hive, external databases, or existing RDDs. The DataFrame API is available in Scala, Java, Python, and R. In Scala and Java, a DataFrame is represented by a Dataset of Rows. In the Scala API, DataFrame is simply a type alias of Dataset[Row]. While, in Java API, users need to use Dataset<Row> to represent a DataFrame.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-53663484792667701242021-09-04T04:52:00.001-07:002021-09-04T04:52:34.569-07:00What is Spark SQL?<p> Spark SQL is a Spark module for structured data processing. Unlike the basic Spark RDD API, the interfaces provided by Spark SQL provide Spark with more information about the structure of both the data and the computation being performed. Internally, Spark SQL uses this extra information to perform extra optimization. </p><p>One use of Spark SQL is to execute SQL queries.</p><p>When running SQL from within another programming language the results will be returned as a Dataset/DataFrame.</p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-11989706794936080272021-08-31T23:32:00.003-07:002021-08-31T23:34:54.972-07:00What is Winutils exe?<p> <span color="rgba(0, 0, 0, 0.8)" face=""Benton Sans", Arial, sans-serif" style="background-color: white;">Apache Spark requires the executable file winutils.exe to function correctly on the Windows Operating System when running against a non-Windows cluster.</span></p>Download winutils.exe binary from <a href="https://github.com/steveloughran/winutils">WinUtils repository</a>. You should select the version of Hadoop the Spark distribution was compiled with. For example, use hadoop-2.7.1 for Spark 3.0.1.BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-50134778898371677772021-02-05T01:44:00.002-08:002021-02-05T01:50:28.814-08:00How to sort objects in java using Comparator?<p>In the below example class Student has three fields</p><p>Name, Age & Mark</p><p>Now i am showing 2 types of sorting here</p><p></p><ol style="text-align: left;"><li>by Name</li><li>by Mark</li></ol><div>Comparator is a functional interface and can therefore be used as the assignment target for a lambda expression or method reference. This interface is a member of the Java Collections Framework.</div><div><span><a name='more'></a></span><span style="background-color: white; color: #474747; font-family: "DejaVu Serif", Georgia, "Times New Roman", Times, serif; font-size: 14px;"><br /></span></div><p></p>
<textarea class="form-control" id="java-code" readonly="">
import java.util.ArrayList;
import java.util.Collections;
class Students
{
String name;
int mark;
int age;
public Students(String name, int mark, int age) {
this.name = name;
this.mark = mark;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getMark() {
return mark;
}
public void setMark(int mark) {
this.mark = mark;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
public class BitCompiler {
public static void main(String args[]) {
ArrayList<Students> students = new ArrayList<>();
students.add(new Students("Smith", 87, 16));
students.add(new Students("Johnson", 92, 15));
students.add(new Students("Srank", 95, 17));
students.add(new Students("Kamal", 99, 18));
students.add(new Students("George Vaman", 96, 17));
System.out.println("\nSorting by Student Name:\n========================");
Collections.sort(students,(a,b)->
{
return a.getName().compareTo(b.getName());
});
students.forEach(a -> { System.out.println("Name = "+a.getName());});
System.out.println("\nSorting by Student Mark:\n========================");
Collections.sort(students,(a,b)->
{
return a.getMark() > b.getMark() ? -1 : a.getMark() < b.getMark() ? 1 : 0;
});
students.forEach(a -> { System.out.println("Name = "+a.getName()+", Mark = "+a.getMark());});
}
}
</textarea><div><span style="font-family: monospace;"><span style="font-size: 13.3333px; white-space: pre-wrap;"><br /></span></span></div><div><span style="font-family: monospace;"><span style="font-size: 13.3333px; white-space: pre-wrap;">Output:<br /></span></span><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7m5JcfxlkQ9hlBAXovjX_4EuOjOCmQlJ5ScPDLZhGhE_ypTUxCVga8XjJT97wPQjj5kNW94SpY8oA3BUZBIv7TNtkngNN27ceK9a3nABlO9XCVFbFslXrPqhIHFLWt2zXqxtOgwjHIk/s274/How+to+sort+objects+in+java+using+Comparator.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="192" data-original-width="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7m5JcfxlkQ9hlBAXovjX_4EuOjOCmQlJ5ScPDLZhGhE_ypTUxCVga8XjJT97wPQjj5kNW94SpY8oA3BUZBIv7TNtkngNN27ceK9a3nABlO9XCVFbFslXrPqhIHFLWt2zXqxtOgwjHIk/s0/How+to+sort+objects+in+java+using+Comparator.jpg" /></a></div><br /><div><br /></div></div>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-6955878471738848112020-12-12T06:47:00.001-08:002020-12-12T06:47:28.113-08:00Solved!!!:This virtual machine appears to be in use| VMWare Workstation<div style="width: 480px; height: 270px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" width="480" height="270" src="http://youtube.com/embed/WsUM5NayGmo" style="position: absolute; top: 0px; left: 0px; width: 480px; height: 270px;" name="okplayer"></iframe></div>
<br />
via <a href="https://ifttt.com/?ref=da&site=blogger">IFTTT</a>
BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0tag:blogger.com,1999:blog-5306877999557427861.post-29920119762690247092020-08-10T20:51:00.009-07:002020-08-10T23:06:59.013-07:00Convert SVG to PNG Online and Download it | SVG (Scalable Vector Graphics) to PNG Converter<p>Online SVG to PNG Converter is used to convert SVG image to PNG. Also you can download the converted PNG image.</p><p><a href="https://www.bitcompiler.com/svg-to-png"><span style="font-size: x-large;">https://www.bitcompiler.com/svg-to-png</span></a></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11ABq8gf_WXv33VDcgjWIJI3_OHOh800IMyXgMlQQCXAuFss7z75z0WDdS-oJBx0zWjQwEetddeTWCswWIhO4J7vFuH5B1ImoBhGybZ8KXHFESom5jX5a0s3k_flmv47o3LF3pl-7w-E/s1365/ScreenHunter_41+Aug.+11+09.19.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="659" data-original-width="1365" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11ABq8gf_WXv33VDcgjWIJI3_OHOh800IMyXgMlQQCXAuFss7z75z0WDdS-oJBx0zWjQwEetddeTWCswWIhO4J7vFuH5B1ImoBhGybZ8KXHFESom5jX5a0s3k_flmv47o3LF3pl-7w-E/w640-h309/ScreenHunter_41+Aug.+11+09.19.jpg" width="640" /></a></div> <p></p>BitCompiler.comhttp://www.blogger.com/profile/05132933473172746479noreply@blogger.com0