diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md index 4d720561b67f78e..c04a40306200a37 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md @@ -8,7 +8,7 @@ page-type: learn-module-chapter It is now time to look at Google's Angular framework, another popular option that you'll come across often. In this article we look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture. -> **Note:** +> [!NOTE] > This tutorial targets [Angular version 17](https://angular.io/guide/update-to-version-17) and was last revised in March 2024 (`Angular CLI: 17.3.0`). @@ -191,7 +191,8 @@ You use a selector just like regular HTML tags by placing it within other templa When a selector is in a template, the browser renders the template of that component whenever an instance of the selector is encountered. This tutorial guides you through creating two components and using one within the other. -> **Note:** The name of the component above is `ItemComponent` which is also the name of the class. +> [!NOTE] +> The name of the component above is `ItemComponent` which is also the name of the class. > The names are the same simply because a component is nothing but a class supplemented by a TypeScript decorator. Angular's component model offers strong encapsulation and an intuitive application structure. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md index b581a394d1a2b86..0a5625bf0c0c64e 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md @@ -240,7 +240,8 @@ When you use a property in the template, you must also declare it in the class. An `@Input()` serves as a doorway for data to come into the component, and an `@Output()` acts as a doorway for data to go out of the component. An `@Output()` has to be of type `EventEmitter`, so that a component can raise an event when there's data ready to share with another component. -> **Note:** The `!` in the class's property declaration is called a [definite assignment assertion](https://www.typescriptlang.org/docs/handbook/2/classes.html#--strictpropertyinitialization). This operator tells TypeScript that the `item` field is always initialized and not `undefined`, even when TypeScript cannot tell from the constructor's definition. If this operator is not included in your code and you have strict TypeScript compilation settings, the app will fail to compile. +> [!NOTE] +> The `!` in the class's property declaration is called a [definite assignment assertion](https://www.typescriptlang.org/docs/handbook/2/classes.html#--strictpropertyinitialization). This operator tells TypeScript that the `item` field is always initialized and not `undefined`, even when TypeScript cannot tell from the constructor's definition. If this operator is not included in your code and you have strict TypeScript compilation settings, the app will fail to compile. Use `@Input()` to specify that the value of a property can come from outside of the component. Use `@Output()` in conjunction with `EventEmitter` to specify that the value of a property can leave the component so that another component can receive that data. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md index e7250f1633d86bb..d7f7d3be322f1dd 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md @@ -227,7 +227,8 @@ If everything is working correctly, you should see a page like this: ![The default start page when you create a new Ember app, with a cartoon mascot, saying congratulations](ember-start-page.png) -> **Note:** on Windows systems without [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/windows/wsl/install), you will experience slower build-times overall compared to macOS, Linux, and Windows _with_ WSL. +> [!NOTE] +> on Windows systems without [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/windows/wsl/install), you will experience slower build-times overall compared to macOS, Linux, and Windows _with_ WSL. ## Summary diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md index d4aa02f076ddc89..8e2b039f57937e5 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md @@ -109,7 +109,8 @@ export default class HeaderComponent extends Component { The `@action` decorator is the only Ember-specific code here (aside from extending from the `Component` superclass, and the Ember-specific items we are importing using [JavaScript module syntax](/en-US/docs/Web/JavaScript/Guide/Modules)) — the rest of the file is vanilla JavaScript, and would work in any application. The `@action` decorator declares that the function is an "action", meaning it's a type of function that will be invoked from an event that occurred in the template. `@action` also binds the `this` of the function to the class instance. -> **Note:** A decorator is basically a wrapper function, which wraps and calls other functions or properties, providing additional functionality along the way. For example, the `@tracked` decorator (see slightly later on) runs code it is applied to, but additionally tracks it and automatically updates the app when values change. [Read JavaScript Decorators: What They Are and When to Use Them](https://www.sitepoint.com/javascript-decorators-what-they-are/) for more general information on decorators. +> [!NOTE] +> A decorator is basically a wrapper function, which wraps and calls other functions or properties, providing additional functionality along the way. For example, the `@tracked` decorator (see slightly later on) runs code it is applied to, but additionally tracks it and automatically updates the app when values change. [Read JavaScript Decorators: What They Are and When to Use Them](https://www.sitepoint.com/javascript-decorators-what-they-are/) for more general information on decorators. Coming back to our browser tab with the app running, we can type whatever we want, and when we hit Enter we'll be greeted with an alert message telling us exactly what we typed. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md index 2982dd6401fea61..078fa720e66b781 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md @@ -198,7 +198,8 @@ To create a component, we use the `ember generate component` command, followed b `header.hbs` is the template file where we'll include the HTML structure for just that component. Later on we'll add the required dynamic functionality such as data bindings, responding to user interaction, etc. -> **Note:** The `header.js` file (shown as skipped) is for connection to a backing Glimmer Component Class, which we don't need for now, as they are for adding interactivity and state manipulation. By default, `generate component` generates template-only components, because in large applications, template-only components end up being the majority of the components. +> [!NOTE] +> The `header.js` file (shown as skipped) is for connection to a backing Glimmer Component Class, which we don't need for now, as they are for adding interactivity and state manipulation. By default, `generate component` generates template-only components, because in large applications, template-only components end up being the majority of the components. `header-test.js` is for writing automated tests to ensure that our app continues to work over time as we upgrade, add features, refactor, etc. Testing is outside the scope of this tutorial, although generally testing should be implemented as you develop, rather than after, otherwise it tends to be forgotten about. If you're curious about testing, or why you would want to have automated tests, check out the [official Ember tutorial on testing](https://guides.emberjs.com/release/tutorial/part-1/automated-testing/). diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md index 6bd8ed37aea4f0a..3a8752ba194bf98 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -36,7 +36,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## React tutorials -> **Note:** React tutorials last tested in January 2023, with React/ReactDOM 18.2.0 and create-react-app 5.0.1. +> [!NOTE] +> React tutorials last tested in January 2023, with React/ReactDOM 18.2.0 and create-react-app 5.0.1. > > If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see . @@ -57,7 +58,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Ember tutorials -> **Note:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0. +> [!NOTE] +> Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0. > > If you need to check your code against our version, you can find a finished version of the sample Ember app code in the [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). For a running live version, see (this also includes a few additional features not covered in the tutorial). @@ -76,7 +78,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Vue tutorials -> **Note:** Vue tutorial last tested in January 2023, with Vue 3.2.45. +> [!NOTE] +> Vue tutorial last tested in January 2023, with Vue 3.2.45. > > If you need to check your code against our version, you can find a finished version of the sample Vue app code in our [todo-vue repository](https://github.com/mdn/todo-vue). For a running live version, see . @@ -101,7 +104,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Svelte tutorials -> **Note:** Svelte tutorials last tested in August 2020, with Svelte 3.24.1. +> [!NOTE] +> Svelte tutorials last tested in August 2020, with Svelte 3.24.1. > > If you need to check your code against our version, you can find a finished version of the sample Svelte app code as it should be after each article, in our [mdn-svelte-tutorial](https://github.com/opensas/mdn-svelte-tutorial) repo. For a running live version, see our Svelte REPL at . @@ -124,7 +128,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Angular tutorials -> **Note:** Angular tutorials last tested in April 2021, with Angular CLI (NG) 11.2.5. +> [!NOTE] +> Angular tutorials last tested in April 2021, with Angular CLI (NG) 11.2.5. - [1. Getting started with Angular](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started) - : In this article we look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md index f99ad35078e622d..915bd7eb28d9971 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md @@ -191,7 +191,8 @@ Let's look at some of the other advantages offered by frameworks. As we've allud Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent). -> **Note:** If you want to find out more details about web tooling concepts, check out our [Client-side tooling overview](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). +> [!NOTE] +> If you want to find out more details about web tooling concepts, check out our [Client-side tooling overview](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). ### Compartmentalization @@ -262,7 +263,8 @@ You should seriously consider the support matrix and DSLs of a framework when ma | Vue | Modern (IE9+ in Vue 2) | HTML-based | HTML-based, JSX, Pug | [official docs](https://cli.vuejs.org/guide/browser-compatibility.html) | | Ember | Modern (IE9+ in Ember version 2.18) | Handlebars | Handlebars, TypeScript | [official docs](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) | -> **Note:** DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting. +> [!NOTE] +> DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting. ### Does the framework have a strong community? @@ -296,7 +298,8 @@ A few popular CMS systems include [Wordpress](https://wordpress.com/), [Joomla]( All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out [Next.js](https://nextjs.org/) for React, [Nuxt](https://nuxt.com/) for Vue (yes, it is confusing, and no, these projects are not related!), [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot) for Ember, and [Angular Universal](https://angular.io/guide/universal) for Angular. -> **Note:** Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer. +> [!NOTE] +> Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer. ### Static site generators diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md index 2ba576095661ade..df24fa00d4c9e43 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md @@ -120,7 +120,8 @@ console.log(editButtonRef.current); You'll see that the value of `editButtonRef.current` is `null` when the component first renders, but if you click an "Edit" button, it will log the `` element to the console. This is because the ref is populated only after the component renders, and clicking the "Edit" button causes the component to re-render. Be sure to delete this log before moving on. -> **Note:** Your logs will appear 6 times because we have 3 instances of `` in our app and React renders our components twice in development. +> [!NOTE] +> Your logs will appear 6 times because we have 3 instances of `` in our app and React renders our components twice in development. We're getting closer! To take advantage of our newly referenced elements, we need to use another React hook: `useEffect()`. @@ -297,7 +298,8 @@ Let's add the `tabindex` attribute — written as `tabIndex` in JSX — to the h ``` -> **Note:** The `tabindex` attribute is excellent for accessibility edge cases, but you should take **great care** not to overuse it. Only apply a `tabindex` to an element when you're sure that making it focusable will benefit your user somehow. In most cases, you should utilize elements that can naturally take focus, such as buttons, anchors, and inputs. Irresponsible usage of `tabindex` could have a profoundly negative impact on keyboard and screen reader users! +> [!NOTE] +> The `tabindex` attribute is excellent for accessibility edge cases, but you should take **great care** not to overuse it. Only apply a `tabindex` to an element when you're sure that making it focusable will benefit your user somehow. In most cases, you should utilize elements that can naturally take focus, such as buttons, anchors, and inputs. Irresponsible usage of `tabindex` could have a profoundly negative impact on keyboard and screen reader users! ### Getting previous state @@ -321,7 +323,8 @@ const prevTaskLength = usePrevious(tasks.length); Here we are invoking `usePrevious()` to track the previous length of the tasks array. -> **Note:** Since we're now utilizing `usePrevious()` in two files, it might be more efficient to move the `usePrevious()` function into its own file, export it from that file, and import it where you need it. Try doing this as an exercise once you've got to the end. +> [!NOTE] +> Since we're now utilizing `usePrevious()` in two files, it might be more efficient to move the `usePrevious()` function into its own file, export it from that file, and import it where you need it. Try doing this as an exercise once you've got to the end. ### Using `useEffect()` to control our heading focus @@ -349,7 +352,8 @@ Most of the time, you can be an effective contributor to a React project even if `useRef()` and `useEffect()` are somewhat advanced features, and you should be proud of yourself for using them! Look out for opportunities to practice them more, because doing so will allow you to create inclusive experiences for users. Remember: our app would have been inaccessible to keyboard users without them! -> **Note:** If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see . +> [!NOTE] +> If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see . In the very last article we'll present you with a list of React resources that you can use to go further in your learning. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md index 02eceb8be64df59..e7382d5805cc696 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md @@ -208,7 +208,8 @@ We had unique `id` attributes before we created the `` component. Let's ``` -> **Note:** The `completed` prop is last here because it is a boolean with no assignment. This is purely a stylistic convention. The order of props does not matter because props are JavaScript objects, and JavaScript objects are unordered. +> [!NOTE] +> The `completed` prop is last here because it is a boolean with no assignment. This is purely a stylistic convention. The order of props does not matter because props are JavaScript objects, and JavaScript objects are unordered. Now go back to `Todo.jsx` and make use of the `id` prop. It needs to replace the `` element's `id` attribute value, as well as its `
@@ -67,7 +68,8 @@ echo -n > App.jsx && echo -n > index.css cd .. ``` -> **Note:** If you stopped your server to do the terminal tasks mentioned above, you'll have to start it again using `npm run dev`. +> [!NOTE] +> If you stopped your server to do the terminal tasks mentioned above, you'll have to start it again using `npm run dev`. ## Project starter code @@ -248,7 +250,8 @@ Because JSX is JavaScript, there's a gotcha to be aware of with boolean attribut If you'd like, you can practice writing boolean attributes with another attribute you may have seen before, [`hidden`](/en-US/docs/Web/HTML/Global_attributes/hidden), which prevents elements from being rendered on the page. Try adding `hidden` to the `

` element in `App.jsx` to see what happens, then try explicitly setting its value to `{false}`. Note, again, that writing `hidden="false"` results in a truthy value so the `

` _will_ hide. Don't forget to remove this code when you're done. -> **Note:** The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is. +> [!NOTE] +> The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is. ### Implementing our styles diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md index fc13b31b382a175..f30765a6675c136 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md @@ -100,7 +100,8 @@ In this article we will concentrate on creating the `FilterButton` and `Todo` co Let's get started. -> **Note:** In the process of creating our first couple of components, we will also learn different techniques to communicate between components, and the pros and cons of each. +> [!NOTE] +> In the process of creating our first couple of components, we will also learn different techniques to communicate between components, and the pros and cons of each. ## Extracting our filter component @@ -145,7 +146,8 @@ We'll begin by creating our `FilterButton.svelte`. ``` -> **Note:** Remember that when the HTML attribute name and variable match, they can be replaced with `{variable}`. That's why we could replace `` with ``. +> [!NOTE] +> Remember that when the HTML attribute name and variable match, they can be replaced with `{variable}`. That's why we could replace `` with ``. So far so good! Let's try out the app now. You'll notice that when you click on the filter buttons, they are selected and the style updates appropriately. But we have a problem: the to-dos aren't filtered. That's because the `filter` variable flows down from the `Todos` component to the `FilterButton` component through the prop, but changes occurring in the `FilterButton` component don't flow back up to its parent — the data binding is one-way by default. Let's look at a way to solve this. @@ -272,7 +274,8 @@ Let's look at how to emit our own events to re-implement the missing _Delete_ bu To create custom events, we'll use the `createEventDispatcher` utility. This will return a `dispatch()` function that will allow us to emit custom events. When you dispatch an event, you have to pass the name of the event and, optionally, an object with additional information that you want to pass to every listener. This additional data will be available on the `detail` property of the event object. -> **Note:** Custom events in Svelte share the same API as regular DOM events. Moreover, you can bubble up an event to your parent component by specifying `on:event` without any handler. +> [!NOTE] +> Custom events in Svelte share the same API as regular DOM events. Moreover, you can bubble up an event to your parent component by specifying `on:event` without any handler. We'll edit our `Todo` component to emit a `remove` event, passing the to-do being removed as additional information. @@ -520,7 +523,8 @@ We also use `todo.id` to create unique ids for the new input controls and labels As you can see, it's easy to implement the "props-down, events-up" pattern in Svelte. Nevertheless, for simple components `bind` can be a good choice; Svelte will let you choose. -> **Note:** Svelte provides more advanced mechanisms to share information among components: the [Context API](https://svelte.dev/docs/svelte#setcontext) and [Stores](https://svelte.dev/docs/svelte-store). The Context API provides a mechanism for components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. Stores allows you to share reactive data among components that are not hierarchically related. We will look at Stores later on in the series. +> [!NOTE] +> Svelte provides more advanced mechanisms to share information among components: the [Context API](https://svelte.dev/docs/svelte#setcontext) and [Stores](https://svelte.dev/docs/svelte-store). The Context API provides a mechanism for components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. Stores allows you to share reactive data among components that are not hierarchically related. We will look at Stores later on in the series. ## The code so far diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md index 672663a06331ed2..9a8f9af6c980614 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md @@ -92,7 +92,8 @@ Our whole app is now just 21 KB — 8.3 KB when gzipped. There are no additional By default, when you create a new app with `npx degit sveltejs/template my-svelte-project`, Svelte will use [rollup](https://rollupjs.org/) as the module bundler. -> **Note:** There is also an official template for using [webpack](https://webpack.js.org/) and also many [community-maintained plugins](https://github.com/sveltejs/integrations#bundler-plugins) for other bundlers. +> [!NOTE] +> There is also an official template for using [webpack](https://webpack.js.org/) and also many [community-maintained plugins](https://github.com/sveltejs/integrations#bundler-plugins) for other bundlers. In the file `package.json` you can see that the `build` and `dev` scripts are just calling rollup: @@ -158,7 +159,8 @@ There are [many plugins for rollup](https://github.com/rollup/awesome) that allo From the point of view of a web server, a Svelte application is nothing more than a bunch of HTML, CSS, and JavaScript files. All you need is a web server capable of serving static files, which means you have plenty of options to choose from. Let's look at a couple of examples. -> **Note:** the following section could be applied to any client-side static website requiring a build step, not just Svelte apps. +> [!NOTE] +> the following section could be applied to any client-side static website requiring a build step, not just Svelte apps. ### Deploying with Vercel @@ -198,7 +200,8 @@ To deploy our app, follow these steps. You can also [import a Svelte git project](https://vercel.com/import/svelte) into Vercel from [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [BitBucket](https://bitbucket.org/product). -> **Note:** you can globally install Vercel with `npm i -g vercel` so you don't have to use `npx` to run it. +> [!NOTE] +> you can globally install Vercel with `npm i -g vercel` so you don't have to use `npx` to run it. ### Automatic deployment to GitLab pages diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md index f50a769bba6a4b8..3d25cd7acf02d90 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md @@ -52,7 +52,8 @@ Svelte sticks closely to the classic web development model of HTML, CSS, and JS, Its main current disadvantages are that it is a young framework — its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc. than more mature frameworks, and there are also fewer job opportunities. But its advantages should be enough to make you interested to explore it. -> **Note:** Svelte has [official TypeScript support](https://svelte.dev/docs/typescript). We'll look at it later on in this tutorial series. +> [!NOTE] +> Svelte has [official TypeScript support](https://svelte.dev/docs/typescript). We'll look at it later on in this tutorial series. We encourage you to go through the [Svelte tutorial](https://learn.svelte.dev/) for a really quick introduction to the basic concepts, before returning to this tutorial series to learn how to build something slightly more in-depth. @@ -108,7 +109,8 @@ npm install npm run dev ``` -> **Note:** degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using `git clone` because it will not download all the history of the repo, or create a complete local clone. +> [!NOTE] +> degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using `git clone` because it will not download all the history of the repo, or create a complete local clone. After running `npm run dev`, Svelte will compile and build your application. It will start a local server at `localhost:8080`. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this: @@ -184,7 +186,8 @@ All three sections — ` ``` -> **Note:** If you want to use [TypeScript](https://www.typescriptlang.org/) syntax, you need to set the `lang` attribute on the `