-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (215 loc) · 17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workout Pace Percentage Calculator - from Running Writings</title>
<link rel="icon" href="images/RW-favicon.png" type="image/png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js" defer></script>
<script defer data-domain="apps.runningwritings.com" src="https://plausible.io/js/script.js"></script>
</head>
<body>
<div class="header">
<a href="https://www.runningwritings.com"><img class="logo" id="top" src="images/RunningWritings-logo.png" href="https://www.runningwritings.com"></a>
<div class="inner-header">
<div class="logo-link"><a href="https://runningwritings.com">Running Writings</a></div>
<ul class="menu">
<li><a href="#how-to-use">How to use</a></li>
<li><a href="#get-updates">Get updates</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="app-content">
<h1>Pace percentage calculator</h1>
<div class="flip-container">
<div class="percent-box">
<div class="arrow-box">
<button class="material-icons pct-button" id="pct-m5" title="-5%">keyboard_double_arrow_left</button>
<button class="material-icons pct-button" id="pct-m1" title="-1%">keyboard_arrow_left</button>
</div>
<div class="percent-text">
<div class="percent-digits digit">
95
</div>
<div class="percent-pct digit">
%
</div>
</div>
<div class="arrow-box">
<button class="material-icons pct-button" id="pct-p1" title="+1%">keyboard_arrow_right</button>
<button class="material-icons pct-button" id="pct-p5" title="+5%">keyboard_double_arrow_right</button>
</div>
</div>
<div class="spacer">
<a href="#backward-calcs" class="i-note">?</a>
<div class="spacer-box spacer-label">of</div>
<button class="material-icons flip-button" title="Reverse calculations">flip_camera_android</button>
</div>
<div class="pace-box">
<div class="clock">
<div class="digitbox">
<button class="material-icons svg-arrow" id="d1-up">expand_less</button>
<div class="digit" id="d1">5</div>
<button class="material-icons svg-arrow" id="d1-down">expand_more</button>
</div>
<div class="digitbox colon">
<span class="digit">:</span>
</div>
<div class="digitbox">
<button class="material-icons svg-arrow" id="d2-up">expand_less</button>
<div class="digit" id="d2">0</div>
<button class="material-icons svg-arrow" id="d2-down">expand_more</button>
</div>
<div class="digitbox">
<button class="material-icons svg-arrow" id="d3-up">expand_less</button>
<div class="digit" id="d3">0</div>
<button class="material-icons svg-arrow" id="d3-down">expand_more</button>
</div>
</div>
</div>
</div>
<div class="equals">equals</div>
<div class="pace-result-box">
<span class="pace-result">5:15</span>
<span class="convert-units"></span>
</div>
<div class="unit-conversion">
<div class="toggle-box">
<a href="#pace-vs-speed" class="i-note">?</a>
<span class="pace-annote">Percent of <span class="pace-speed-text">pace</span></span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="from-to-container">
<div class="button-group from-units">
<button class="unit-toggle" id="from-mi">/mi</button>
<button class="unit-toggle" id="from-km">/km</button>
<button class="unit-toggle" id="from-400">/400m</button>
</div>
<span class="material-icons from-to-text">arrow_right_alt</span>
<div class="button-group to-units">
<button class="unit-toggle" id="to-mi">/mi</button>
<button class="unit-toggle" id="to-km">/km</button>
<button class='unit-toggle' id="to-400m">/400m</button>
<button class='unit-toggle' id="to-mph">mph</button>
<button class='unit-toggle' id="to-kph">km/h</button>
<button class='unit-toggle' id="to-kph">m/s</button>
</div>
</div>
<div class="equals">or</div>
<div class="convert-box">
<span class="convert-result" id="convert-res">3:33</span>
<span class="result-units"></span>
</div>
</div>
</div>
<div class="about-container">
<h2 id="how-to-use">How to use<a class="material-icons up" href="#top">arrow_upward</a></h2>
<div class="article-link-box">
<a href="https://runningwritings.com/2023/12/percentage-based-training.html?utm_source=rw_apps&utm_medium=webapp&utm_campaign=pace_percents" class="i-note i-note-i">i</a><span>
I have a full article on percentage-based training! <a href="https://runningwritings.com/2023/12/percentage-based-training.html?utm_source=rw_apps&utm_medium=webapp&utm_campaign=pace_percents" class="rw-link">Check it out here!</a></span></div>
<p>This app calculates running paces for workouts that are designed to be done at specific percentages of race pace.</p>
<p>For example, if your workout is 4 x 1.25 mi at 95% of 5k pace, and your 5k pace is 5:00/mi, you can enter 95% and 5:00 in the app to find the correct pace for your workout (in this example, 5:15/mi).</p>
<p>If desired, you can also convert your pace to and from mile, kilometer, and 400m splits.</p>
<p>Percentage-based workouts are used by <a href="https://runningwritings.com/category/renato-canova">Renato Canova</a> and other top coaches when planning training sessions for some of the best runners in the world.</p>
<p>I've adopted this percentage-based framework in my own <a href="https://runningwritings.com/coaching-and-consulting">coaching</a> and have found it to be an incredibly versatile approach for everything from the 800m to ultra distances.</p>
<p>Calculating paces by hand gets tedious, so I made this app for the two most common use cases: calculating paces and percents "forward" to find workout paces from race pace, and "backward" to find what race pace would result in a given pace and percentage. </p>
<h3 id="pace-vs-speed">Percent of pace vs. percent of speed<a class="material-icons up" href="#top">arrow_upward</a></h3>
<p>There are a <a href="https://runningwritings.com/2013/02/brief-thoughts-calculating-percentages.html">few intricacies to calculating percentages</a>; one of these is that percent of speed is not the same things as percent of pace. See the linked article for an in-depth explanation of why.</p>
<p>Renato Canova's workouts all use percentage of pace. This approach has the advantage of being evenly-spaced and symmetric in increments of pace: 90% of 5:00 mile pace is 5:30, and 80% of 5:00 mile pace is 6:00 (i.e. each 10% jump is 30 seconds per mile). Percent of pace is the approach I use with my own training and coaching.</p>
<p>One consequence of the math behind taking percents of pace is that faster speeds are more finely-grained, which makes intuitive sense from a coaching perspective: effort-wise, there's a much bigger difference between 3:00/km and 3:05/km vs. 4:00/km and 4:05/km. Percent of speed works the opposite way: small percentage jumps are very big at high speeds, which is not desirable.</p>
<p>Scientific research typically uses percent of speed because of speed's linear relationship with distance covered per unit time. Percent of speed is evenly-spaced and symmetric in terms of speed (e.g. each 10% jump is an equal increment in miles per hour).</p>
<p>Do note that neither method is symmetric with respect to the reference speed: 120% of 80% of any speed does not return the original speed, regardless of how you define percentages.</p>
<h3>Percentages are better than seconds per mile rules<a class="material-icons up" href="#top">arrow_upward</a></h3>
<p>Percentage-based workout paces have a significant advantage over simple additive rules like "tempo pace equals 5k pace plus 20 seconds per mile." These additive rules fail both for very fast and very slow runners; percentages of pace generalize to a much wider range of abilities.</p>
<h3 id="backward-calcs">Forward and backward calculations<a class="material-icons up" href="#top">arrow_upward</a></h3>
<p>Often, you'll have a workout that goes better than expected: suppose you ran five miles at 90% of 5k pace and had a great day, averaging 5:24/mi even though your plan was to run 5:30/mi. You can switch to "reverse mode" (just click the <span class="material-icons inline-icon">flip_camera_android</span> icon) to figure out what original pace would've yielded 5:24 at 90%—in this case, it's 4:52/mi.</p>
<h3>Unit conversions<a class="material-icons up" href="#top">arrow_upward</a></h2>
<p>For convenience, I also built in some simple unit conversions. Many of Renato Canova's workouts are kilometer-based, so I like being able to convert to and from miles, kilometers, and (for track workouts) 400m splits.</p>
<p>You'll notice that the percentage calculations are not affected by the unit conversions—this is by design; 90% of 5:00 is 5:30, regardless of whether that's in minutes per mile, minutes per kilometer, or minutes per 400m.</p>
<h3>The 5% rule and other useful conversions<a class="material-icons up" href="#top">arrow_upward</a></h3>
<p>One reason percentages of pace are so convenient is the "<strong>5% rule</strong>": roughly speaking, a well-trained runner will slow down by 5% for every doubling of race distance. This means that the following <em>approximate</em> race conversions hold:</p>
<ul>
<li>10k pace is 95% of 5k pace</li>
<li>Half marathon pace is 90% of 5k pace or 95% of 10k pace</li>
<li> Marathon pace is 95% of half marathon pace, 90% of 10k pace, and (very hesitantly) 85% of 5k pace</li>
</ul>
<p>Additionally, I find the following (again, approximate) physiologically-based markers to be useful for planning workouts:</p>
<ul>
<li> Critical speed / critical velocity is 95% of 5k pace</li>
<li> Lactate threshold is 91-92% of 5k pace</li>
<li> Aerobic threshold is 85% of 5k pace</li>
</ul>
<p>Your individual disposition as a runner, and your training status, will of course push these numbers up or down. As an example, with high school runners I almost always use more like 90-91% of 5k pace for lactate threshold because of "aerobic drift" - compared to more experienced runners, high schoolers run the 5k with greater reliance on their glycolytic energy system, and their performance in longer distances is proportionally worse when compared to more experienced runners with the same 5k PR.</p>
<p>Conversely, I work with some marathon runners who, in top condition, can run the marathon only 3-4% slower than their half marathon pace, and who have a lactate threshold closer to 93% of 5k pace.</p>
<h3>Suggested percent-based workouts<a class="material-icons up" href="#top">arrow_upward</a></h2>
<p>Here's a small sample of some of my favorite percentage-based workouts that I use across a wide variety of events: </p>
<div class="workout-table">
<table>
<thead>
<tr>
<th>Event</th>
<th>Type</th>
<th>Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>1500m & up</td>
<td>Aerobic base</td>
<td>8 x 3 min at 91-92% of 5k pace w/ 45-60 sec jog recovery</td>
</tr>
<tr>
<td>5k & up</td>
<td>Aerobic base</td>
<td>12 mi long fast run at 80% of 5k pace</td>
</tr>
<tr>
<td>800m</td>
<td>Endurance</td>
<td>4-6 x 600m at 80% of 800m pace w/ 1-3 min walk recovery</td>
</tr>
<tr>
<td>5k & 10k</td>
<td>Specific</td>
<td>3 sets of: (2 km at 95% of 5k, 1-2 min jog, 1 km at 98-101% 5k) w/ 3-5min jog recovery</td>
</tr>
<tr>
<td>Half-marathon</td>
<td>Specific</td>
<td>10 sets of (1 km at 100-102% HMP, 1 km at 88-90% HMP)</td>
</tr>
<tr>
<td>Marathon</td>
<td>Endurance</td>
<td>18 mi long fast run at 90% MP</td>
</tr>
</tbody>
</table>
</div>
<h2 id="get-updates">Get updates<a class="material-icons up" href="#top">arrow_upward</a></h2>
<p>If you want to find out when I update this app, or get notified when I build new apps and publish new running research on my website, sign up for my email list with this form!</p>
<div class="newsletter-block">
<script async src="https://eomail6.com/form/187bb3d4-92e9-11ed-8dcb-9536633250ee.js" data-form="187bb3d4-92e9-11ed-8dcb-9536633250ee"></script>
</div>
<p> I have several other apps, tech-based projects and long-format articles on running that are currently in the works. You'll be the first to know when I have new content coming out.</p>
<h2 id="contact">Contact<a class="material-icons up" href="#top">arrow_upward</a></h2>
<p>If you've got feedback, want to see a new feature, found a bug, or just want to chat, please reach out! I read every email I receive, and I do my best to respond. You can reach me at <strong><a class="email" href="mailto:[email protected]">[email protected]</a></strong>.</p>
<p>I'm also on <a href="https://twitter.com/JDruns">Twitter/X</a>, but the best way to follow my work is definitely my <strong><a href="https://runningwritings.eo.page/news-and-notes-signup">email list!</a></strong></p>
<h2 id="support">Support my work<a class="material-icons up" href="#top">arrow_upward</a></h2>
<p>This app is 100% free and open-source. If you enjoy my work and want to help support me, be sure to check out my book, <strong><a href="https://www.amazon.com/Modern-Training-Physiology-Long-Distance-Runners/dp/0615790291">Modern Training and Physiology for Middle and Long-Distance Runners</a></strong> - it's available on Amazon as both an eBook and paperback. I also offer <strong><a href="https://runningwritings.com/coaching-and-consulting?utm_source=rw_apps&utm_medium=webapp&utm_campaign=pace_percents">coaching services</a></strong> for those interested.</p>
</div>
</div>
<div class="footer">
Made by <a class="author-link" href="https://www.runningwritings.com">John Davis</a>
<a href="https://github.com/johnjdavisiv/pace-percents" target="_blank"><i class="fa fa-github github-icon"></i></a>
</div>
</body>
</html>