-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
100 lines (78 loc) · 4.98 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
<html>
<!--
todo:
- proper html doctype, head tags, etc. just copy wp theme
- add tooltips instead of or in-addition-to some important & unfamiliar concepts links
task-negative
https://open.spotify.com/episode/3Xvn7ebdH6evLNmS6FskeP - 28:51 . if link to note that it's kinda skeezy
https://www.nytimes.com/2014/08/10/opinion/sunday/hit-the-reset-button-in-your-brain.html
similar to manoush's "bored and brilliant"
context switching
- should mention flow somewhere as synonymous with deep work
low priority:
- maybe put instructions in sidebar rather than on top. grid layout
- at a later iteration, use css animatino when switching. don't get distracted wth that for v1 though, just get the core part working
- choose more appealing colors. maybe just copy from wp's color scheme.
-->
<head>
<title>Deep Work Timer</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="icon" href="data:,"> <!-- Prevent distracting Firefox `404` -->
<script src="timer.js" type="module" defer></script>
</head>
<body class="active-deep-work">
<h1>Deep Work Timer</h1>
<h4 id="subtitle">
minimal, on purpose.
</h4>
<!-- todo is that right semantically? want it to be a subtitle. also want it small text, but could do w/ css -->
<h2>instructions</h2>
<!-- todo tmp open to work on editing,
maybe also leave open for a week or so in order to help keep this a habit
maybe make a feature for that like, open by default, but then can click a "its a habit now" button to set a cookie, and then it'd be closed by default
-->
<details id="instructions">
<summary>
This is the process that works for me, but your mileage may vary. Customize it to work for you.
<em>(click to expand)</em>
<!-- if you have to explain it, that's a smell -->
</summary>
<ol>
<li>
<strong>Start your day</strong> by clicking <code>Start Checking</code>, then open Slack, <a href="https://wordpress.com/p2/">p2s</a>, your phone, etc. When you've gone through the important stuff, close Slack or put it into <a href="https://slack.com/help/articles/214908388-Pause-notifications-with-Do-Not-Disturb">do-not-disturb mode</a>, put your phone on silent mode, and place it upside down or in a drawer.
</li>
<li>
Click <code>Start Deep Work</code>. Start working on a project, and focus on it until you reach a milestone, get tired, are ready for something new, etc.
</li>
<li><strong>When you're tempted to self-interrupt</strong> and check Slack/etc, resist that, and refocus on the project. If you feel anxious about missing something, resist that. It's fine, because you're just AFK for a defined block of time. Once that block is done, you can check stuff again. Everything will still be there. If something is truly an emergency, your team can push through DnD mode.
</li>
<li><strong>Take breaks periodically</strong>, ideally <em>before</em> you get tired [link to how it takes longer to recover]. There's no need to stop the timer. <strong>Pick a <em><a href="https://www.washingtonpost.com/news/inspired-life/wp/2015/03/10/your-sweet-spot-how-to-become-more-productive-while-actually-working-less/">task-negative</a></em> thing to do</strong> <em>-- like using a foam roller on your back, going for a walk, making a cup of tea, washing the dishes, laying down and closing your eyes, stretching, etc --</em> so that your mind can process the things you've just been working on. If you do something <em>task-positive</em> <em>-- like watching a YouTube video, playing a game on your phone, etc --</em> then you'll be putting new stuff into your brain; you won't get the insights from processing, you'll make yourself <em>more</em> tired rather than less, and you'll have to pay <a href="https://simpleprogrammer.com/context-switching/">the costs of context-switching</a> when you start working again. When you're feeling rested, don't check anything, just sit back down and pick up where you left off on the project.
</li>
<li>
<strong>After you've made meaningful progress</strong>, feel ready for something new, or it's been 3+ hours, write down a brain dump of where you are in the project, and what the next steps are. Then, click the <code>Start Checking</code> button, open Slack/etc, and go through the important stuff. If you're checking for a long period of time, you can take (task-negative) breaks during it too.
</li>
<li><strong>Repeat</strong> the whole process until you're done with your day.</li>
</ol>
</details>
<div id="timers-container">
<div id="shallow-work-container" class="container">
<h2>Check Slack/p2/phone</h2>
<p class="elapsed-time" data-timer-id="checking">
00:00:00
</p>
<button class="start-timer" data-timer-id="checking">
Start checking
</button>
</div>
<div id="deep-work-container" class="container">
<h2>Focus on Deep Work</h2>
<p class="elapsed-time" data-timer-id="deep-work">
00:00:00
</p>
<button class="start-timer" data-timer-id="deep-work">
Start Deep Work
</button>
</div>
</div>
</body>
</html>