1
0
Fork 0

fix(docs): Pattern tutorial: Change "you/your" to "we/us/our". Fixes #2982

This commit is contained in:
Benjamin F 2023-01-06 19:29:29 -08:00
parent 6c97d081e7
commit 4def5963a0
20 changed files with 383 additions and 393 deletions

View file

@ -8,8 +8,8 @@ we are going to draft our pattern according to the measurements provided to us.
Which begs the question, which measurements?
It is you, as the pattern designer, who decides which measurements are used
to draft your pattern. For our bib, the only measurement we need is the
It is we, as the pattern designers, who decides which measurements are used
to draft our pattern. For our bib, the only measurement we need is the
_head circumference_.
So let's add it as a required measurement.
@ -40,22 +40,22 @@ export const bib = {
Now everybody knows this part requires the `head` measurement.
This change will also get picked up by the development environment, and you'll now see this screen:
This change will also get picked up by the development environment, and we'll now see this screen:
![This screen tells you that you are missing some required measurements](./required-measurements.png)
![This screen tells us that we are missing some required measurements](./required-measurements.png)
Since it's just one measurement, let's simply enter a value by hand.
For example `38` as 38 cm is a realistic head circumference measurement for a baby.
Enter `38` in the box, and click on **Draft Design** in the sidebar under the **View** heading.
This brings you back to our work in progress:
This brings us back to our work in progress:
## Notes
### Why using standard measurements names matters
In principle, you can use any name you want for your measurements.
In principle, we can use any name we want for our measurements.
Our core library really doesn't care.
However, if everybody uses their own (names for) measurements, then people
@ -67,5 +67,3 @@ invent your own.
See our [best practices](/guides/best-practices/reuse-measurements) on this
topic for details.

View file

@ -3,17 +3,17 @@ title: Adding options
order: 140
---
You know what your bib should look like, and you have the _head_ measurement
to work with. But there's still a number of choices you have to make:
We know what our bib should look like, and we have the _head_ measurement
to work with. But there's still a number of choices we have to make:
- How large should the neck opening be?
- How wide should the bib be?
- How long should the bib be?
You can make all of these choices for the user and set them in stone, so to speak.
We can make all of these choices for the user and set them in stone, so to speak.
But since you're designing a pattern in code, it's trivial to make your pattern
flexible and let the user decide. All you have to do is add options to your part.
But since we're designing a pattern in code, it's trivial to make our pattern
flexible and let the user decide. All we have to do is add options to our part.
## Add the neckRatio option
@ -67,18 +67,18 @@ options: {
}
```
- You've added `widthRatio` and `lengthRatio` options
- You've given all options sensible defaults
- You've given all options sensible maximum and minimum boundaries
- You've added these two new options to the *style* menu
- We've added `widthRatio` and `lengthRatio` options
- We've given all options sensible defaults
- We've given all options sensible maximum and minimum boundaries
- We've added these two new options to the *style* menu
Later, you'll test-drive your pattern to see how it behaves when you adapt the options
between their minimum and maximum values. At that time, you can still tweak these values.
Later, we'll test-drive our pattern to see how it behaves when we adapt the options
between their minimum and maximum values. At that time, we can still tweak these values.
With that out of the way, let's start drawing our bib.
## Notes
The `menu` key on an option does not do anything for your pattern as such.
The `menu` key on an option does not do anything for our pattern as such.
Instead it signals to the frontend that this is how options should be grouped
together and presented to the user.

View file

@ -8,7 +8,7 @@ Which is a big no-no in sewing patterns, so we're going to have to address
that.
Specifically, we're going to rotate our strap out of the way until it no longer overlaps.
The rest of your bib should stay as it is, so let's start by making a list of points we need
The rest of our bib should stay as it is, so let's start by making a list of points we need
to rotate.
Once we have our list of points to rotate, we can rotate them. How far? Until the strap no longer overlaps.
@ -197,9 +197,6 @@ function draftBib({
.close()
// highlight-end
return part
}
```

View file

@ -51,7 +51,7 @@ function draftBib({
## Adding snippets
Snippets are little re-useable things to embellish your pattern with.
Snippets are little re-useable things to embellish our pattern with.
Things like buttons or buttonholes, a logo, or snaps.
To use them, much like points and paths, we need to destructure both
@ -96,8 +96,6 @@ You can find all possible snippets in [our documentation](/reference/api/snippet
Let's put this and few other things together to complete our design:
<Example tutorial caption="Almost done. But there's one more thing the user can ask for: a **paperless** pattern">
```js
function draftBib({

View file

@ -61,8 +61,8 @@ But it won't show up on screen or on the page.
Now that we've hidden our homework, let's create the complete neck path.
As the neck opening is symmetrical, there's no need to re-calculate the points
on the other side. You can just flip them over, so to speak. And that's exactly
what you'll do.
on the other side. We can just flip them over, so to speak. And that's exactly
what we'll do.
Let's add some more points, and then construct the complete path for the neck
opening.

View file

@ -3,11 +3,11 @@ title: Conclusion
order: 280
---
Congratulations, you have created your first pattern. And while it's arguably
Congratulations, we have created our first pattern. And while it's arguably
rather simple, we have learned a bunch of things along the way. Let's list
some of the things we've learned:
- We learned how to [setup your development environment][new-design] with `npx
- We learned how to [setup our development environment][new-design] with `npx
@freesewing/new-design`
- We learned about [the different files and folders][structure] in the
development environment and how `design/src` holds our source code.
@ -17,7 +17,7 @@ some of the things we've learned:
- We learned about [a part's draft method][draft-method] and how to destructure
what we need to design our part.
- We learned [how to add points and draw paths][constructing-the-neck-opening]
- We learned how you can make changes in a loop to [adapt the neck
- We learned how we can make changes in a loop to [adapt the neck
opening][fitting-the-neck-opening] or [rotate the straps][avoiding-overlap]
until they were just right
- We learned about [macros and how to use them][creating-the-closure]
@ -26,7 +26,7 @@ some of the things we've learned:
- We learned about what it means to draft [a complete
pattern][completing-our-pattern]
- We learned about [snippets and how to add them][completing-our-pattern]
- We learned [how to offset a path][completing-your-pattern] to create seam
- We learned [how to offset a path][completing-our-pattern] to create seam
allowance, or in our case, mark the bias tape line
- We learned how to support a [paperless pattern][paperless] by adding
dimensions

View file

@ -70,7 +70,7 @@ function draftBib({
```
</Example>
You've added some points to your part, and drawn your first path.
We've added some points to our part, and drawn our first path.
Let's look at each line in detail.
## Adding points
@ -98,10 +98,10 @@ points.rightCp1 = points.right
- Instead of using the Point constructor, we're calling the `Point.shift()`
method on an existing point
- It takes two arguments: The angle to shift towards, and the distance
- You can see that we're shifting 90 degrees (that means up) but the distance
- We can see that we're shifting 90 degrees (that means up) but the distance
uses another method
- The `Point.dy()` method returns the delta along the Y axis between the point
you call it on and the point you pass it
we call it on and the point we pass it
- We shift half of the Y-delta
The next point is very similar again, except that this time we're shifting to

View file

@ -13,14 +13,14 @@ To round the straps, we'll use something new: **a macro**. To use macros, we
need the `macro` method, which we can destructure to get access to it.
Macros are little helpers that automate things that would otherwise get rather
tedious. There are macros to add titles to your pattern, or grainline
tedious. There are macros to add titles to our pattern, or grainline
indicators, a scalebox, and there's a macro to round corners. The `round`
macro.
<Note> You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).</Note>
We need a half circle here, but the `round` macro works on 90° angles, so
you'll use it twice. As such, we'll add some points to guide the macro, and
we'll use it twice. As such, we'll add some points to guide the macro, and
then put it to work.
Like our neck opening, we've only drawn half since we can simply copy the
@ -149,7 +149,6 @@ function draftBib({
})
// highlight-end
return part
}
```

View file

@ -23,8 +23,8 @@ If you're not familiar with the `({ part })` syntax you see above, this is a
technique called *parameter destructuring* or more generally, [object
destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
The draft method receives only 1 parameter: An object that holds everything you
need to draft your method. Destructuring is a way to *pull things out of the
The draft method receives only 1 parameter: An object that holds everything we
need to draft our method. Destructuring is a way to *pull things out of the
object into their own variable*. It saves us a bunch of typing as these two are
equivalent:
@ -84,11 +84,11 @@ For a complete list of what you can access via destructuring like this, refer
to [the draft method reference documentation](/reference/api/part/draft).
Here's a brief summary of the things we've added above:
- `Path`: The Path constructor, allows you to create new Paths
- `Point`: The Point constructor, allows you to create new Points
- `Path`: The Path constructor, allows us to create new Paths
- `Point`: The Point constructor, allows us to create new Points
- `points`: A container object to hold the part's points
- `paths`: A container object to hold the part's paths
Long story short: These will make it possible for you to draw points and paths easily.
Long story short: These will make it possible for us to draw points and paths easily.
So let's go ahead and do that.

View file

@ -93,9 +93,9 @@ const width = measurements.head * options.widthRatio
const length = measurements.head * options.lengthRatio
```
Both the length and width of your bib are a factor of the head circumference.
This way, your bib size will adapt to the size of the baby, and the user can tweak
the length and width by playing with the options you added to the pattern.
Both the length and width of our bib are a factor of the head circumference.
This way, our bib size will adapt to the size of the baby, and the user can tweak
the length and width by playing with the options we added to the pattern.
Once we have our variables, we're adding some new points, and a second path called `rect`.

View file

@ -2,7 +2,7 @@
title: Pattern design tutorial
---
Welcome to the FreeSewing pattern design tutorial, where you'll learn how to
Welcome to the FreeSewing pattern design tutorial, where we'll learn how to
design a made-to-measure sewing pattern, start to finish.
<Tip>
@ -13,11 +13,11 @@ guide](/guides/prerequisites). It's very short, but covers some basic
terminology and concepts that we'll use throughout this guide.
</Tip>
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.
We will be designing a pattern for a baby bib. It's a very simple pattern, but
that's the point. Our focus today is on learning FreeSewing and how to
translate our designs into code.
At the end of this tutorial, you will have created this pattern:
At the end of this tutorial, we will have created this pattern:
<Example tutorial="1" previewFirst="1" caption="Our end result">
@ -223,8 +223,8 @@ function draftBib({
```
</Example>
Before we can get started, let's make sure you have the required software
installed on your computer:
Before we can get started, let's make sure we have the required software
installed on our computer:
## Prerequisites
@ -232,15 +232,15 @@ 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.
For development, we'll use Node.js. 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 Node.js. If we don't have Node.js on our system,
follow the link above and install it on our system.
<Tip compact>You need Node.js 16 or higher to use FreeSewing</Tip>
<Tip compact>We need Node.js 16 or higher to use FreeSewing</Tip>
When you're done, you can test whether it works by running:
When we're done, we can test whether it works by running:
```sh
node -v
```
If you get the Node.js version number, you're all set.
If we get the Node.js version number, we're all set.

View file

@ -10,17 +10,17 @@ npx @freesewing/new-design@next
```
<Fixme compact>Remove `@next` suffix once v3 is in production</Fixme>
You'll be asked some questions.
We'll be asked some questions.
All the defaults will do, but here are the details:
- *What template would you like to use?* — Pick the default: **Tutorial**
- *What package manager should we use?* — Pick the default: **npm**, unless you are certain you have **yarn** installed
After you've answered these questions, files will be copied, dependencies installed, and components downloaded.
After we've answered these questions, files will be copied, dependencies installed, and components downloaded.
<Note>
This will take a few minutes because we're loading some software for your development environment.
This will take a few minutes because we're loading some software for our development environment.
</Note>
@ -31,16 +31,16 @@ cd tutorial
npm run dev
```
Or if you chose to use yarn as package manager:
Or if we chose to use yarn as package manager:
```sh
cd tutorial
yarn dev
```
Now open your browser at http://localhost:8000
Now open our browser at http://localhost:8000
If all goes well, you should see this landing page:
If all goes well, we'll should see this landing page:
![The FreeSewing development environment](./nd.png)

View file

@ -1,5 +1,5 @@
---
title: Your first part
title: Our first part
order: 120
---
@ -7,8 +7,8 @@ Much like garments themselves, patterns are made up of _parts_.
Most patterns will have multiple parts. A sleeve, a back part, the collar, and
so on. Our pattern is very simple, and only has one part: the bib.
It's a good idea to keep each part in its own file. You don't *have to* do
this, but it's a good habit to get into. When you create more elaborate designs
It's a good idea to keep each part in its own file. We don't *have to* do
this, but it's a good habit to get into. When we create more elaborate designs
with multiple parts, keeping each in its own file makes for a more tidy
and approachable code base.
@ -49,12 +49,12 @@ all details about configuring the part object
```
A part's `name` should be unique in a pattern. Apart from that, anything goes.
Although you probably want to give it a sensible name.
Although we probably want to give it a sensible name.
As you can see in the example above, we're using `tutorial.bib` as the name.
As we can see in the example above, we're using `tutorial.bib` as the name.
<Tip>
We **strongly** recommend to follow this `design.part` naming scheme to avoid
We **strongly** recommend that you follow this `design.part` naming scheme to avoid
naming conflicts when mixing parts from various designs to create new designs.
</Tip>

View file

@ -3,7 +3,7 @@ title: Supporting paperless patterns
order: 270
---
The goal of paperless patterns is to create a pattern that you don't need to
The goal of paperless patterns is to create a pattern that we don't need to
print to be able to use it. Saving paper is always a good thing, but it's
also a way to democratize access to patterns.
@ -30,8 +30,8 @@ by the user.
Such a grid is already a good starting point. In addition, we'll be using
different macros to add *dimensions* to the pattern.
While the grid gets added automatically, the dimensions you have to add yourself.
Thankfully, there's macros that can help you with that, specifically:
While the grid gets added automatically, the dimensions we have to add ourselves.
Thankfully, there's macros that can help us with that, specifically:
- The `hd` macro adds a horizontal dimension
- The `vd` macro adds a vertical dimension
@ -42,7 +42,7 @@ Thankfully, there's macros that can help you with that, specifically:
Refer to [the list of macros](/reference/macros/) for more details.
</Note>
<Example tutorial paperless caption="Making your pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
<Example tutorial paperless caption="Making our pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
```js
function draftBib({
Path,

View file

@ -9,7 +9,7 @@ Which means, halfway between the start of the curve, and the corner of our recta
<Note>
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
For this, we'll be using a new method: `Point.shiftFractionTowards()`. We've already
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
As always, [the API docs](/reference/api/point/) have all the details.
@ -118,4 +118,3 @@ function draftBib({
}
```
</Example>

View file

@ -6,9 +6,9 @@ order: 110
Inside out `tutorial` folder, the `design/src` folder holds the source code for
the new pattern we will create.
You can safely ignore all other files and folders, as they are part of the
We can safely ignore all other files and folders, as they are part of the
FreeSewing development environment.
So feel free to skip ahead to [Your first part](/tutorials/pattern-design/your-first-part).
So feel free to skip ahead to [Our first part](/tutorials/pattern-design/our-first-part).
## Notes
@ -16,7 +16,7 @@ If you'd like to learn about those other files and folders, here's what they do:
### folders
- `design`: Holds the source code for your design
- `design`: Holds the source code for our design
- `lab`: Holds [React][react] hooks and components specific to the development environment
- `node_modules`: Holds installed dependencies
- `pages`: Holds [NextJS][next] client-side routes, aka pages
@ -28,10 +28,10 @@ If you'd like to learn about those other files and folders, here's what they do:
- `next.config.mjs`: The [NextJS][next] configuration file
- `next-i18next.config.js`: The configuration file for [next-i18next][i81n] which handles translation within NextJS
- `package.json`: Every Node.js project has a [package.json][pkg] file which holds important metadata and lists dependencies
- `package-lock.json`: This *lockfile* will only exist if you use the npm package manager
- `package-lock.json`: This *lockfile* will only exist if we use the npm package manager
- `postcss.config.js`: Configuration file for [PostCSS][postcss], a tool to transform CSS with JavaScript
- `tailwind.config.js`: Configuration file for the [TailwindCSS][tailwind] framework
- `yarn.lock`: This *lockfile* will only exist if you use [the yarn package manager][yarn]
- `yarn.lock`: This *lockfile* will only exist if we use [the yarn package manager][yarn]
[next]: https://nextjs.org/
[tailwind]: https://tailwindcss.com/
@ -39,4 +39,3 @@ If you'd like to learn about those other files and folders, here's what they do:
[yarn]: https://yarnpkg.com/
[pkg]: https://docs.npmjs.com/cli/v8/configuring-npm/package-json
[react]: https://reactjs.org/

View file

@ -1,5 +1,5 @@
---
title: "Testing your pattern"
title: "Testing our pattern"
order: 250
---
@ -16,16 +16,16 @@ environment
###### No more grading
FreeSewing patterns are _made-to-measure_, which means that you don't need to
grade your pattern to provide a range of sizes. You should sample your pattern
FreeSewing patterns are _made-to-measure_, which means that we don't need to
grade our pattern to provide a range of sizes. We should sample our pattern
for different measurements and options to see how well it adapts.
</Tip>
If testing your pattern sounds like a lot of work, you're in luck. FreeSewing can do it
for you. Click the **Test Design** link in the sidebar under the **View** title.
If testing our pattern sounds like a lot of work, we're in luck. FreeSewing can do it
for us. Click the **Test Design** link in the sidebar under the **View** title.
You have a number of ways to test your pattern:
We have a number of ways to test our pattern:
- Test design options
- Test measurements
@ -39,9 +39,9 @@ these.
We used percentage options, which can vary between their minimum and maximum
value. For these tests, FreeSewing will divide that range into 10 steps and
draft your pattern for each step.
draft our pattern for each step.
Click on any of the options we've added to our pattern, and your bib will be
Click on any of the options we've added to our pattern, and our bib will be
drawn with that option sampled.
### lengthRatio
@ -49,7 +49,7 @@ drawn with that option sampled.
The `lengthRatio` option controls the length of our bib. Testing it confirms
that it only influences the length:
![This is what it should look like when you test the `lengthRatio`
![This is what it should look like when we test the `lengthRatio`
option](test-option-lengthratio.png)
<Fixme compact>Update screenshot for v3</Fixme>
@ -63,7 +63,7 @@ increasingly larger neck opening.
Testing it confirms this. We can also see that as the neck opening gets
smaller, we will rotate the straps further out of the way to avoid overlap:
![This is what it should look like when you test the `neckRatio`
![This is what it should look like when we test the `neckRatio`
option](test-option-neckratio.png)
<Fixme compact>Update screenshot for v3</Fixme>
@ -75,11 +75,11 @@ The `widthRatio` option will determine the width of our bib. For the same
bibs.
If we test it, we can see that it works as intended. But there's one thing that
perhaps requires your attention. Making the bib wider shortens the length from
perhaps requires our attention. Making the bib wider shortens the length from
the bottom of the neck opening to the bottom of the bib. Thereby making the
bib shorter when it's worn.
![This is what it should look like when you test the `widthRatio`
![This is what it should look like when we test the `widthRatio`
option](test-option-widthratio.png)
<Fixme compact>Update screenshot for v3</Fixme>
@ -99,7 +99,7 @@ to the reader_.
## Testing measurements
Testing a measurement will vary that measurement 10% up or down while leaving
everything else the same. This gives you the option to determine how any given
everything else the same. This gives us the option to determine how any given
measurement is influencing the pattern.
For our bib, we only use one measurement, so it influences the entire pattern.
@ -109,37 +109,37 @@ For our bib, we only use one measurement, so it influences the entire pattern.
## Testing models
Whereas testing a measurement will only vary one individual measurement,
testing models will draft your pattern for different sets of measurements, which
testing models will draft our pattern for different sets of measurements, which
we refer to as _models_.
On the surface, the result below is the same as our measurement test. But that
is because our bib only uses one measurement. So testing that one measurement
ends up being the same as testing a complete set of measurements.
But most patterns use multiple measurements, and you'll find this test gives
you insight into how your pattern will adapt to differently sized bodies.
But most patterns use multiple measurements, and we'll find this test gives
us insight into how our pattern will adapt to differently sized bodies.
<Fixme compact>Add screenshot</Fixme>
## The antperson test
A special case of model testing is the so-called _antperson test_. It drafts
your pattern with a set of _typical_ measurements , and then drafts it again
our pattern with a set of _typical_ measurements , and then drafts it again
with measurements that are 1/10th of those _typical_ measurements.
It is named after [the cartoon
character](https://en.wikipedia.org/wiki/Ant-Man_\(film\)) who can shrink, yet
somehow his suit still fits.
The purpose of the antperson test is to bring out areas in your pattern where
you made assumptions that will not properly scale. Many drafting books will
tell you to _add 3 cm there_ or _measure 2 inch to the right_. Those
instructions don't scale, and you should avoid them.
The purpose of the antperson test is to bring out areas in our pattern where
we made assumptions that will not properly scale. Many drafting books will
tell us to _add 3 cm there_ or _measure 2 inch to the right_. Those
instructions don't scale, and we should avoid them.
The best patterns will pass the antperson test with 2 patterns exactly the
same, where one will simply be 1/10th the scale of the other.
<Fixme compact>Add screenshot</Fixme>
When you're happy with how your pattern passes these tests, it's time to
When we're happy with how our pattern passes these tests, it's time to
complete our design.