1
0
Fork 0

wip(markdown): Work on tutorial

This commit is contained in:
Joost De Cock 2022-10-04 23:36:08 +02:00
parent 8152d65947
commit 6f0b1a6ce3
3 changed files with 34 additions and 36 deletions

View file

@ -1,54 +1,40 @@
---
title: Pattern design tutorial
order: 50
icons:
- javascript
- pattern
for: developers
about: |
You'll learn how to create a FreeSewing pattern.
We will take you start to finish, from setting up the development environment
up to a completed pattern.
goals:
- Setting up the development environment
- Creating a pattern part
- Using the user's measurements
- Using pattern options
- Using the shorthand method
- Creating points
- Creating paths
- Using macros and snippets
- Testing your pattern
- Adding seam allowance
- Adding dimentions for a paperless pattern
---
Welcome to the FreeSewing tutorial, where you'll learn how to create a made-to-measure
sewing pattern, start to finish.
Welcome to the FreeSewing pattern design tutorial, where you'll learn how to
design a made-to-measure sewing pattern, start to finish.
You will be designing a pattern for a baby bib. It's a very simple pattern, but that's the point.
Your focus today is on learning FreeSewing and how to translate your designs into code.
You will be designing a pattern for a baby bib. It's a very simple pattern, but
that's the point. Your focus today is on learning FreeSewing and how to
translate your designs into code.
At the end of this tutorial, you will have created this pattern:
<Example pattern="tutorial" part="bib">Your end result</Example>
<Examples part="tutorial.step11">Your end result</Examples>
Before we can get started, let's make sure you have the required software
installed on your computer:
## Prerequisites
FreeSewing is a JavaScript library that runs on [Node.js](https://nodejs.org/).
FreeSewing is a JavaScript library that can run in the browser, on
[Node.js](https://nodejs.org/), or a variety of other runtimes such as Deno,
AWS Lambda, and so on.
If you don't have Node.js on your system, follow the link above and
install it on your system.
For development, we'll use NodeJS. If you don't have Node.js on your system,
follow the link above and install it on your system.
<Tip compact>You need NodeJS 16 or higher to use FreeSewing</Tip>
When you're done, you can test whether it works by running:
```bash
```sh
node -v
```
If you get the node version number, you're all set.
You can find the complete code of the tutorial pattern for the final result to help make sure you're following the steps correctly [here on GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.js).
You can find the complete code of the tutorial pattern for the final result to
help make sure you're following the steps correctly [here on
GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.mjs).

View file

@ -5,7 +5,7 @@ order: 100
Open a terminal and enter the following command:
```bash
```sh
npx @freesewing/new-design
```
@ -25,14 +25,14 @@ This will take a few minutes because we're loading some software for your develo
When it's ready, enter the `bib` directory that was just created and run `npm run dev`:
```bash
```sh
cd bib
npm run dev
```
Or if you chose to use Yarn as package manager:
```bash
```sh
cd bib
yarn dev
```
@ -47,7 +47,7 @@ If all goes well, you should see this landing page:
###### Need help?
If you run into any issues, join [our chatroom](https://discord.freesewing.org/) and
we'll figure it out together.
If you run into any issues, [join our **#development-help** chat room on on
Discord](https://discord.freesewing.org/) and we'll figure it out together.
</Note>

View file

@ -0,0 +1,12 @@
---
title: Files and folder structure
order: 110
---
With our development setup, let's take a moment to see what sort of files and
folders have been created for us, what they all mean, and where to find what.
You will find the following files and folders inside the newly created folder
that holds your development environment:
<Fixme compact>Update this for v3</Fixme>