LIZ ABINANTE PRESENTS
her foolish quest to auto-generate
knitting patterns using JavaScript.
@feministy • me@liz.codes
Senior Software Engineer, New Relic
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
⚔
Slide 4
Slide 4 text
BAAAAAAH!
Slide 5
Slide 5 text
This is my yak.
Slide 6
Slide 6 text
Knitting + JavaScript
What could
possibly go wrong?
Slide 7
Slide 7 text
A LOT.
Slide 8
Slide 8 text
Alternative titles
for this talk…
Slide 9
Slide 9 text
Knitting + JavaScript
Everything possible
went wrong!
Slide 10
Slide 10 text
Knitting + JavaScript
math
Slide 11
Slide 11 text
Knitting + JavaScript
WHY
Slide 12
Slide 12 text
Knitting + JavaScript
Actual objects
programming
Slide 13
Slide 13 text
Knitting + JavaScript
Harder than you’d think,
but worth the effort.
Slide 14
Slide 14 text
Everything you need to
know about knitting
patterns… in 2 minutes.*
* ish
Slide 15
Slide 15 text
Important terms
Gauge
Number of stitches and number of
rows per
Slide 16
Slide 16 text
Important terms
Cast On
The number of stitches to start with
Slide 17
Slide 17 text
Fun quirks
Knitting patterns usually come in both
imperial and metric measurements
Slide 18
Slide 18 text
Fun quirks
Every garment type has multiple
points of measurement for fit
Slide 19
Slide 19 text
Fun quirks
…that are often distilled down to one
measurement for instructions & size
selection
Slide 20
Slide 20 text
Fun quirks
There are 5,000 different ways to do
everything
Slide 21
Slide 21 text
Fun quirks
Customer
service sucks
Slide 22
Slide 22 text
Orders of magnitude
Even the simplest problem is incredibly
difficult to solve and they don’t get
any easier
Slide 23
Slide 23 text
What does it mean to
“generate a knitting
pattern”?
Slide 24
Slide 24 text
What even is a knitting pattern?
A set of instructions, schematics,
photos, and charts to reproduce a given
item with reasonable consistency
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
don’t convert this! metric only
Slide 28
Slide 28 text
don’t convert this! imperial only
Slide 29
Slide 29 text
because 1 in/2.54 cm is confusing
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
But Liz, that seems easy
Well, you’re
wrong.
Slide 36
Slide 36 text
Math for
math's sake
Slide 37
Slide 37 text
Other garments
Any time you add people shaped
things into your math, it needs to be
more precise than just math
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
The idea
Slide 43
Slide 43 text
CUSTOM HAT
PATTERN APP
Slide 44
Slide 44 text
Acceptance criteria
Users can provide the following:
gauge, desired size
Slide 45
Slide 45 text
Acceptance criteria
Users will receive:
customized pattern instructions with
yardage estimates
Slide 46
Slide 46 text
two little things
gauge + size
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
∞ problems
Slide 50
Slide 50 text
3 problems
Slide 51
Slide 51 text
1
Rounding
Slide 52
Slide 52 text
let castOn =
Slide 53
Slide 53 text
let castOn = (gauge / 4) * desiredSize
Slide 54
Slide 54 text
let gauge = 19
let circumference = 19
let rawCastOn = (gauge / 4) * circumference
let roundDown = roundDownToFour(rawCastOn)
let roundUp = roundUpToFour(rawCastOn)
let castOn =
Slide 55
Slide 55 text
let gauge = 19
let circumference = 19
let rawCastOn = 90.25
let roundDown = 88
let roundUp = 92
let castOn =
Slide 56
Slide 56 text
18.5”
1/2” too small
19.3”
1/3” too big
88 || 92
||
Slide 57
Slide 57 text
Problems of scale
The larger your stitches,
the less precise you can be
Slide 58
Slide 58 text
let gauge = 6
let desiredSize = 28
let rawCastOn = 42
let roundDown = roundDownToFour(rawCastOn)
let roundUp = roundDownToFour(rawCastOn)
let castOn =
Slide 59
Slide 59 text
26.6”
2.3” too small
29.3”
1.3” too big
40 || 44
||
Slide 60
Slide 60 text
Problems of complexity
The more complex your garment or
motif, the harder calculations become
Slide 61
Slide 61 text
let gauge = 19
let circumference = 23.5
let rawCastOn = 111.6
let roundDown = roundDownTo13(rawCastOn)
let roundUp = roundUpTo13(rawCastOn)
let castOn =
Slide 62
Slide 62 text
let gauge = 19
let circumference = 23.5
let rawCastOn = 111.6
let roundDown = roundDownTo13(rawCastOn)
let roundUp = roundUpTo13(rawCastOn)
let castOn =
Slide 63
Slide 63 text
22.7”
1.25” too small
24.6”
1.1” too big
108 || 117
||
Slide 64
Slide 64 text
2 (aka 1, again/still)
Unit conversions
Slide 65
Slide 65 text
Imperial -> Metric
Slide 66
Slide 66 text
Imperial -> Metric
Imperial numbers are larger units that
translate awkwardly to centimeters
Rounding comes back to bite you, again
Slide 67
Slide 67 text
Metric -> Imperial
Slide 68
Slide 68 text
Metric -> Imperial
Metric units are more precise and often
result in difficult-to-measure imperial
numbers
Rounding comes back to bite you, again
Slide 69
Slide 69 text
tl;dr
Unit conversions compound problems
with rounding
Slide 70
Slide 70 text
tl;dr
Solve all of your unit conversion
problems by doing 2 sets of calculations
and simply choosing the best one
Slide 71
Slide 71 text
tl;dr
An experienced designer can make a
judgement call for which results to use
JAVASCRIPT CAN’T DO THAT
Slide 72
Slide 72 text
3
Domain knowledge
Slide 73
Slide 73 text
JavaScript can’t even
Take the integrity of a design into
account when scaling up or down for
different sizes
Slide 74
Slide 74 text
JavaScript can’t even
Make modifications to large stitch
motifs that are otherwise unnoticeable
but will make an awkward number work
Slide 75
Slide 75 text
JavaScript can’t even
Make a decision about when to break
from an algorithm and do something
different to make a size or design work
Slide 76
Slide 76 text
JavaScript can’t even
Tell you if this is
a bad idea
(or can it?)
Slide 77
Slide 77 text
If you’re thinking
machine learning
ok fine i get it you’re right i’m wrong javascript can do anything yayyyy
Slide 78
Slide 78 text
What actually
went wrong?
Slide 79
Slide 79 text
A LOT.
Slide 80
Slide 80 text
Users are the
worst
Slide 81
Slide 81 text
Every person is
an edge case
Slide 82
Slide 82 text
It wasn’t
actually small
Slide 83
Slide 83 text
A beautiful idea,
executed terribly
Slide 84
Slide 84 text
A beautiful idea,
executed terribly
DECENT
MARGINALLY WELL
Image credits
Knit hat: https://unsplash.com/photos/hAobD5OjoHE
Fire: https://www.pexels.com/photo/wood-explosion-fire-hot-8504/
Math equation: https://unsplash.com/photos/5mZ_M06Fc9g
Stack of knit hats: http://www.purlsoho.com/create/2014/10/22/
classic-cuffed-hat/
All other images are mine (insert evil laughter here)