A Foolish Quest: Auto-Generating Knitting Patterns with JavaScript

Taking something real-world and math-based, like knitting, and turning into a program is actually super easy (no one is surprised here). But! What happens when you combine that with best practices and expected conventions, along with industry-wide standards for design and presentation? Things get a lot more complicated than just crunching numbers, especially when your output will result in lots of manual hours creating a real object. This is the story of how I built a customizable knitting pattern generator in JavaScript (after I built it in Ruby first, of course), and the lessons learned when you try and do math for more than just math's sake.

Transcript

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