-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample-page.html
56 lines (51 loc) Β· 22.6 KB
/
sample-page.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
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Sample priorities</title>
<link rel="stylesheet" href="./public/styles/index.css">
<link rel="stylesheet" href="./public/styles/print.css" media="print">
<noscript><link rel="stylesheet" href="./public/styles/sample-page-noscript.css"></noscript></head>
<body class="load-success">
<noscript>
<p>I would love to make the app work without JavaScript but I don't know enough back-end to do it π Want to help? Shoot me an email at <a href="mailto:petar@frontendlane.com">petar@frontendlane.com</a> or submit a Pull Request on <a href="https://github.com/frontendlane/prioritizer">Github</a>.</p>
<p>If you want to get a sense of what the app looks like, here's a static <a href="./sample-page.html">sample page</a> that doesn't use JavaScript. Note that buttons are disabled because they require JavaScript to work.</p>
</noscript>
<header>
<div>
<h1 contenteditable="true">Sample priorities</h1>
<button onclick="print()" disabled="">Print</button>
</div>
<div>
<details>
<summary>What is Prioritizer?</summary>
<div>
<p>Prioritizer is something I built to stratch my own itch. I use it to remove cognitive burden of deciding which conflicting goal is more important during development. When starting a new side project I first catalogue all project goals and rank them by priority. Then, during development, when I come across a tradeoff I must make between two project goals I just consult the prioritized list and carry on without interrupting development flow.</p>
<p>This is a bit of a niche use-case but I realized that this app can also be good for reminding me of my goals and for helping me direct effort toward more important goals first. For this to reliably work I have yet to develop a habit of starting each coding/study/work session by reviewing my list of project priorities. I have a few ideas how to make it easier to stay in sync with project priorities, for myself and everyone else using the app. For starters I prominently placed a "Print" button so you can print out your priorities and hang them on a wall. π€ In the future I plan to support exporting priorities to <samp>.txt</samp>, <samp>.csv</samp>, and static <samp>.html</samp> files so priorities can fit into whatever flow you adhere to. I also plan to add a few additional features that will collectively transform this app into a light project/task management tool, making it easier to get into the habit of opening the app and reviewing project priotities.</p>
</div>
</details>
<details>
<summary>How does it work?</summary>
<div>
<p>When you first open the app it shows a list of sample project priorities. Initially, they are ranked from most to least important using their weight (located toward the end of each row). Weight is distributed by dragging the slider and pressing decrement and increment buttons. At the top of the page is a number next to "Remaining weight" that indicates how much weight you have left to distribute. Note that you don't have to allocate all of it. Total weight depends on the number of priorities. The formula is <span class="formula"><var>numberOfPriorities</var> Γ 3 = <var>totalWeight</var></span>.</p>
<p>This app doesn't have "Create an account" or "Register" buttons because those would require a database. I value privacy and anonimity on the web and I don't want the responsibility of handling someone's data. Instead, I do something different. Every time you change something, the data is saved to browser's memory (<code>localStorage</code>) so don't worry about closing/restarting the page. The plus side of this approach is that you don't have to spend time registering/logging in. Double win! π</p>
<p>Feel free to play around with the sample data below or delete existing priorities and start adding your own. If you have any suggestions feel free to shoot me an email at <a href="mailto:petar@frontendlane.com">petar@frontendlane.com</a>.</p>
<p>PS: It's not obvious, but you can change the project name at the very top of the page. π</p>
</div>
</details>
</div>
</header>
<main>
<p aria-live="polite" role="status">This is a static version of the <a href="./">home page</a>. Buttons are disabled because they require JavaScript to work, but you <em>can</em> change the heading.</p>
<div>
<button id="undo" disabled="">Undo</button>
<button id="sort" disabled="">Sort</button>
<p>Remaining weight: <output id="remaining-weight">14</output></p>
</div>
<form>
<label for="new-priority">New priority</label>
<input id="new-priority" placeholder="BEM methodology" required="" autofocus="">
<button disabled="">Add</button>
</form>
<ul><li id="privacy"><form><button aria-label="Delete "Privacy"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Privacy"" data-action="rename" disabled="">βοΈ</button><label for="privacy-range" style="min-width: 245.567px;">Privacy</label><input type="range" id="privacy-range" name="Privacy" value="15" min="0" max="29"><button aria-label="Decrement "Privacy"" data-action="Decrement" disabled="">β</button><output>15</output><button aria-label="Increment "Privacy"" data-action="Increment" disabled="">β</button></form></li><li id="accessibility"><form><button aria-label="Delete "Accessibility"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Accessibility"" data-action="rename" disabled="">βοΈ</button><label for="accessibility-range" style="min-width: 245.567px;">Accessibility</label><input type="range" id="accessibility-range" name="Accessibility" value="9" min="0" max="23"><button aria-label="Decrement "Accessibility"" data-action="Decrement" disabled="">β</button><output>9</output><button aria-label="Increment "Accessibility"" data-action="Increment" disabled="">β</button></form></li><li id="no-javascript"><form><button aria-label="Delete "Works w/o JavaScript"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Works w/o JavaScript"" data-action="rename" disabled="">βοΈ</button><label for="no-javascript-range" style="min-width: 245.567px;">Works w/o JavaScript</label><input type="range" id="no-javascript-range" name="Works w/o JavaScript" value="8" min="0" max="22"><button aria-label="Decrement "Works w/o JavaScript"" data-action="Decrement" disabled="">β</button><output>8</output><button aria-label="Increment "Works w/o JavaScript"" data-action="Increment" disabled="">β</button></form></li><li id="extensible"><form><button aria-label="Delete "Extensible code"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Extensible code"" data-action="rename" disabled="">βοΈ</button><label for="extensible-range" style="min-width: 245.567px;">Extensible code</label><input type="range" id="extensible-range" name="Extensible code" value="5" min="0" max="19"><button aria-label="Decrement "Extensible code"" data-action="Decrement" disabled="">β</button><output>5</output><button aria-label="Increment "Extensible code"" data-action="Increment" disabled="">β</button></form></li><li id="no-externals"><form><button aria-label="Delete "No external assets"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "No external assets"" data-action="rename" disabled="">βοΈ</button><label for="no-externals-range" style="min-width: 245.567px;">No external assets</label><input type="range" id="no-externals-range" name="No external assets" value="4" min="0" max="18"><button aria-label="Decrement "No external assets"" data-action="Decrement" disabled="">β</button><output>4</output><button aria-label="Increment "No external assets"" data-action="Increment" disabled="">β</button></form></li><li id="security"><form><button aria-label="Delete "Security"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Security"" data-action="rename" disabled="">βοΈ</button><label for="security-range" style="min-width: 245.567px;">Security</label><input type="range" id="security-range" name="Security" value="4" min="0" max="18"><button aria-label="Decrement "Security"" data-action="Decrement" disabled="">β</button><output>4</output><button aria-label="Increment "Security"" data-action="Increment" disabled="">β</button></form></li><li id="cross-browser"><form><button aria-label="Delete "Cross-browser"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Cross-browser"" data-action="rename" disabled="">βοΈ</button><label for="cross-browser-range" style="min-width: 245.567px;">Cross-browser</label><input type="range" id="cross-browser-range" name="Cross-browser" value="3" min="0" max="17"><button aria-label="Decrement "Cross-browser"" data-action="Decrement" disabled="">β</button><output>3</output><button aria-label="Increment "Cross-browser"" data-action="Increment" disabled="">β</button></form></li><li id="size"><form><button aria-label="Delete "Size"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Size"" data-action="rename" disabled="">βοΈ</button><label for="size-range" style="min-width: 245.567px;">Size</label><input type="range" id="size-range" name="Size" value="3" min="0" max="17"><button aria-label="Decrement "Size"" data-action="Decrement" disabled="">β</button><output>3</output><button aria-label="Increment "Size"" data-action="Increment" disabled="">β</button></form></li><li id="no-framework"><form><button aria-label="Delete "No JS frameworks"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "No JS frameworks"" data-action="rename" disabled="">βοΈ</button><label for="no-framework-range" style="min-width: 245.567px;">No JS frameworks</label><input type="range" id="no-framework-range" name="No JS frameworks" value="3" min="0" max="17"><button aria-label="Decrement "No JS frameworks"" data-action="Decrement" disabled="">β</button><output>3</output><button aria-label="Increment "No JS frameworks"" data-action="Increment" disabled="">β</button></form></li><li id="legacy"><form><button aria-label="Delete "Legacy browsers"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Legacy browsers"" data-action="rename" disabled="">βοΈ</button><label for="legacy-range" style="min-width: 245.567px;">Legacy browsers</label><input type="range" id="legacy-range" name="Legacy browsers" value="2" min="0" max="16"><button aria-label="Decrement "Legacy browsers"" data-action="Decrement" disabled="">β</button><output>2</output><button aria-label="Increment "Legacy browsers"" data-action="Increment" disabled="">β</button></form></li><li id="cross-os"><form><button aria-label="Delete "Cross-OS"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Cross-OS"" data-action="rename" disabled="">βοΈ</button><label for="cross-os-range" style="min-width: 245.567px;">Cross-OS</label><input type="range" id="cross-os-range" name="Cross-OS" value="2" min="0" max="16"><button aria-label="Decrement "Cross-OS"" data-action="Decrement" disabled="">β</button><output>2</output><button aria-label="Increment "Cross-OS"" data-action="Increment" disabled="">β</button></form></li><li id="no-globals"><form><button aria-label="Delete "No global variables"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "No global variables"" data-action="rename" disabled="">βοΈ</button><label for="no-globals-range" style="min-width: 245.567px;">No global variables</label><input type="range" id="no-globals-range" name="No global variables" value="1" min="0" max="15"><button aria-label="Decrement "No global variables"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "No global variables"" data-action="Increment" disabled="">β</button></form></li><li id="latest-code"><form><button aria-label="Delete "No obsolete or deprecated code"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "No obsolete or deprecated code"" data-action="rename" disabled="">βοΈ</button><label for="latest-code-range" style="min-width: 245.567px;">No obsolete or deprecated code</label><input type="range" id="latest-code-range" name="No obsolete or deprecated code" value="1" min="0" max="15"><button aria-label="Decrement "No obsolete or deprecated code"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "No obsolete or deprecated code"" data-action="Increment" disabled="">β</button></form></li><li id="no-dependency"><form><button aria-label="Delete "No dependencies"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "No dependencies"" data-action="rename" disabled="">βοΈ</button><label for="no-dependency-range" style="min-width: 245.567px;">No dependencies</label><input type="range" id="no-dependency-range" name="No dependencies" value="1" min="0" max="15"><button aria-label="Decrement "No dependencies"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "No dependencies"" data-action="Increment" disabled="">β</button></form></li><li id="responsive"><form><button aria-label="Delete "Responsive design"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Responsive design"" data-action="rename" disabled="">βοΈ</button><label for="responsive-range" style="min-width: 245.567px;">Responsive design</label><input type="range" id="responsive-range" name="Responsive design" value="1" min="0" max="15"><button aria-label="Decrement "Responsive design"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Responsive design"" data-action="Increment" disabled="">β</button></form></li><li id="interactive"><form><button aria-label="Delete "Interactive"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Interactive"" data-action="rename" disabled="">βοΈ</button><label for="interactive-range" style="min-width: 245.567px;">Interactive</label><input type="range" id="interactive-range" name="Interactive" value="1" min="0" max="15"><button aria-label="Decrement "Interactive"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Interactive"" data-action="Increment" disabled="">β</button></form></li><li id="mobile-usable"><form><button aria-label="Delete "Usable on mobile"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Usable on mobile"" data-action="rename" disabled="">βοΈ</button><label for="mobile-usable-range" style="min-width: 245.567px;">Usable on mobile</label><input type="range" id="mobile-usable-range" name="Usable on mobile" value="1" min="0" max="15"><button aria-label="Decrement "Usable on mobile"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Usable on mobile"" data-action="Increment" disabled="">β</button></form></li><li id="use-speed"><form><button aria-label="Delete "Use speed"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Use speed"" data-action="rename" disabled="">βοΈ</button><label for="use-speed-range" style="min-width: 245.567px;">Use speed</label><input type="range" id="use-speed-range" name="Use speed" value="1" min="0" max="15"><button aria-label="Decrement "Use speed"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Use speed"" data-action="Increment" disabled="">β</button></form></li><li id="load-speed"><form><button aria-label="Delete "Load speed"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Load speed"" data-action="rename" disabled="">βοΈ</button><label for="load-speed-range" style="min-width: 245.567px;">Load speed</label><input type="range" id="load-speed-range" name="Load speed" value="1" min="0" max="15"><button aria-label="Decrement "Load speed"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Load speed"" data-action="Increment" disabled="">β</button></form></li><li id="ease-of-use"><form><button aria-label="Delete "Ease of use"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Ease of use"" data-action="rename" disabled="">βοΈ</button><label for="ease-of-use-range" style="min-width: 245.567px;">Ease of use</label><input type="range" id="ease-of-use-range" name="Ease of use" value="1" min="0" max="15"><button aria-label="Decrement "Ease of use"" data-action="Decrement" disabled="">β</button><output>1</output><button aria-label="Increment "Ease of use"" data-action="Increment" disabled="">β</button></form></li><li id="html-only"><form><button aria-label="Delete "HTML only"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "HTML only"" data-action="rename" disabled="">βοΈ</button><label for="html-only-range" style="min-width: 245.567px;">HTML only</label><input type="range" id="html-only-range" name="HTML only" value="0" min="0" max="14"><button aria-label="Decrement "HTML only"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "HTML only"" data-action="Increment" disabled="">β</button></form></li><li id="portable"><form><button aria-label="Delete "Portable (A single HTML file)"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Portable (A single HTML file)"" data-action="rename" disabled="">βοΈ</button><label for="portable-range" style="min-width: 245.567px;">Portable (A single HTML file)</label><input type="range" id="portable-range" name="Portable (A single HTML file)" value="0" min="0" max="14"><button aria-label="Decrement "Portable (A single HTML file)"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "Portable (A single HTML file)"" data-action="Increment" disabled="">β</button></form></li><li id="aesthetic"><form><button aria-label="Delete "Aesthetically pleasing"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Aesthetically pleasing"" data-action="rename" disabled="">βοΈ</button><label for="aesthetic-range" style="min-width: 245.567px;">Aesthetically pleasing</label><input type="range" id="aesthetic-range" name="Aesthetically pleasing" value="0" min="0" max="14"><button aria-label="Decrement "Aesthetically pleasing"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "Aesthetically pleasing"" data-action="Increment" disabled="">β</button></form></li><li id="localization"><form><button aria-label="Delete "Localization"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Localization"" data-action="rename" disabled="">βοΈ</button><label for="localization-range" style="min-width: 245.567px;">Localization</label><input type="range" id="localization-range" name="Localization" value="0" min="0" max="14"><button aria-label="Decrement "Localization"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "Localization"" data-action="Increment" disabled="">β</button></form></li><li id="international"><form><button aria-label="Delete "Internationalization"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Internationalization"" data-action="rename" disabled="">βοΈ</button><label for="international-range" style="min-width: 245.567px;">Internationalization</label><input type="range" id="international-range" name="Internationalization" value="0" min="0" max="14"><button aria-label="Decrement "Internationalization"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "Internationalization"" data-action="Increment" disabled="">β</button></form></li><li id="mobile-first"><form><button aria-label="Delete "Mobile first"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "Mobile first"" data-action="rename" disabled="">βοΈ</button><label for="mobile-first-range" style="min-width: 245.567px;">Mobile first</label><input type="range" id="mobile-first-range" name="Mobile first" value="0" min="0" max="14"><button aria-label="Decrement "Mobile first"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "Mobile first"" data-action="Increment" disabled="">β</button></form></li><li id="seo"><form><button aria-label="Delete "SEO"" data-action="delete" formnovalidate="" disabled="">π</button><button aria-label="Rename "SEO"" data-action="rename" disabled="">βοΈ</button><label for="seo-range" style="min-width: 245.567px;">SEO</label><input type="range" id="seo-range" name="SEO" value="0" min="0" max="14"><button aria-label="Decrement "SEO"" data-action="Decrement" disabled="">β</button><output>0</output><button aria-label="Increment "SEO"" data-action="Increment" disabled="">β</button></form></li></ul>
</main>
<!-- Code injected by live-server -->
</body></html>