Skip to content

Commit fd725e4

Browse files
committed
readme.md - add changes to table of contents
1 parent 8792021 commit fd725e4

File tree

1 file changed

+11
-13
lines changed

1 file changed

+11
-13
lines changed

readme.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Source code for Svelte Tutorials at MDN Web docs
22

3-
Source code of the To-Do list app for the Svelte tutorials at [Understanding client-side JavaScript frameworks](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) series at MDN Web docs.
3+
Source code of the To-Do list app for the Svelte tutorials at [Understanding client-side JavaScript frameworks](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#Svelte_tutorials) series at MDN Web docs.
44

55
Each article has it's correspondent folder with the source code to follow the tutorial.
66

@@ -24,68 +24,66 @@ We also provide a Svelte REPL for each article, as listed below, so that you can
2424

2525
## 01. Getting started with Svelte
2626

27-
In this article we'll provide a quick introduction to Svelte. We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to setup our development environment, create a sample app, understand the structure of the project, and see how to run the project locally and build it for production.
27+
In this article we'll provide a quick introduction to the [Svelte framework](https://svelte.dev/). We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to setup our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.
2828

2929
You can see the complete content of this article [here](./01-getting-started/Svelte_getting_started.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started).
3030

3131
The source code to follow this article is in the `01-getting-started` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/01-getting-started svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2).
3232

3333
## 02. Starting our To-Do list app
3434

35-
In this section we will first have a look at the desired functionality of our app, then we'll create our `Todos.svelte` component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in the next article.
35+
Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a todo list. In this article we will first have a look at the desired functionality of our app, then we'll create a `Todos.svelte` component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in subsequent articles.
3636

3737
You can see the complete content of this article [here](./02-starting-our-todo-app/Svelte_starting_our_todo_app.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning).
3838

3939
The source code to follow this article is in the `02-starting-our-todo-app` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2).
4040

4141
## 03. Adding dynamic behavior: working with variables and props
4242

43-
Now that we have our markup and styles ready we can start developing the required features for our To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, and mark them as complete.
43+
Now that we have our markup and styles ready we can start developing the required features for our Svelte To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.
4444

4545
You can see the complete content of this article [here](./03-adding-dynamic-behavior/Svelte_adding_dynamic_behavior.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props).
4646

4747
The source code to follow this article is in the `03-adding-dynamic-behavior` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2).
4848

4949
## 04. Componentizing our Svelte app
5050

51-
In the last article we started developing our Todo list app. Now it's time to go further and add more features to our app, but the central objective here is to look at how to break our app into manageable components and share information between them.
51+
The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.
5252

5353
You can see the complete content of this article [here](./04-componentizing-our-app/Svelte_componentizing_our_app.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components).
5454

5555
The source code to follow this article is in the `04-componentizing-our-app` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2).
5656

5757
## 05. Svelte advanced concepts
5858

59-
In the last article we added more features to our To-Do list and started to organize our app into components. In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. Then we will focus on some accessibility issues involving focus management. Finally, we will see how components can also expose methods and variables to access them programmatically.
59+
In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.
6060

6161
You can see the complete content of this article [here](./05-advanced-concepts/Svelte_advanced_concepts.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility).
6262

6363
The source code to follow this article is in the `05-advanced-concepts` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2).
6464

6565
## 06. Working with Svelte stores
6666

67-
In the last article we completed the development of our app, organized it into components, and saw a couple of advanced techniques for dealing with reactivity, working with DOM nodes and exposing components functionality. In this case we will have a look at Svelte stores: a global data repository that holds value and that allows you to subscribe to it and get notified when the value changes. We will also see how to develop our own custom store to persist the todos information to local storage.
67+
In this article we will show another way to handle state management in Svelte — [Stores](https://svelte.dev/tutorial/writable-stores). Stores are global global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change. We will also see how to develop our own custom store to persist the todos information to local storage.
6868

6969
You can see the complete content of this article [here](./06-stores/Svelte_stores.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores).
7070

7171
The source code to follow this article is in the `06-stores` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/06-stores svelte-todo` command. You can also play with an online version using this Svelte [REPL](https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2).
7272

7373
## 07. TypeScript support in Svelte
7474

75-
In this article will learn how to use TypeScript to develop Svelte applications. First we'll learn what is TypeScript and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features.
75+
We will now learn how to use TypeScript in Svelte applications. First we'll learn what TypeScript is and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features.
7676

7777
You can see the complete content of this article [here](./07-typescript-support/Svelte_typescript_support.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript).
7878

79-
The source code to follow this article is in the `07-typescript-support` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo` command.
79+
The source code to follow this article is in the `07-typescript-support` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo` command. [TypeScript support](https://github.com/sveltejs/svelte-repl/issues/130) is not available from the REPL yet.
8080

8181
The application ported to TypeScript is in the `08-next-steps` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/08-next-steps svelte-todo` command.
8282

83-
> [TypeScript support](https://github.com/sveltejs/svelte-repl/issues/130) is not available from the REPL yet. You can download the content folder and work locally with `npx degit opensas/mdn-svelte-tutorial/07-typescript-support`.
84-
8583
## 08. Deployment and next Steps
8684

87-
In this article we will learn about a couple of zero-fuss options to deploy our app in production and see how to setup a basic pipeline to deploy our app to GitLab on every commit. We will also provide a list of Svelte resources to go further with your Svelte learning.
85+
In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.
8886

89-
You can see the complete content of this article [here](./08-next-steps/Svelte_next_steps.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_next_steps).
87+
You can see the complete content of this article [here](./08-next-steps/Svelte_next_steps.md) or at [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next).
9088

9189
The source code to follow this article is in the `08-next-steps` folder, you can download it with the `npx degit opensas/mdn-svelte-tutorial/08-next-steps svelte-todo` command.

0 commit comments

Comments
 (0)