forked from ttscoff/cheaters
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (151 loc) · 17.7 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
220
221
222
223
224
225
226
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Cheaters : Customizable cheat sheet system for OS X" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Cheaters</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/ttscoff/cheaters">View on GitHub</a>
<h1 id="project_title">Cheaters</h1>
<h2 id="project_tagline">Customizable cheat sheet system for OS X</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/ttscoff/cheaters/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/ttscoff/cheaters/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<p>Support Cheaters by <a href="http://brettterpstra.com/donate/">making a donation</a> to my coffee fund.</p>
<figure>
<img src="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-Header.jpg" alt="Cheat Sheets Header" />
<figcaption>Cheat Sheets Header</figcaption>
</figure>
<p>First and foremost, this is a total ripoff of an idea by Gabe Weatherhead <a href="http://www.macdrifter.com/2012/02/markdown-cheat-sheets-and-marked/">over at Macdrifter</a>. I just expanded on the idea a little bit.</p>
<p>Cheaters is a collection of HTML-based cheat sheets meant for display in an Automator-based popup browser which can float on your screen while you work in other apps (<a href="http://ttscoff.github.io/cheaters/cheaters/cheat.html">demo the web version</a>). Most of the time I create <a href="http://smilesoftware.com/TextExpander/">TextExpander</a> snippets for commonly-forgotten formats, but having an overall reference can be handy. I’ve included a collection of hastily made sheets as examples for you to create your own. Sheets are easy to create with minimal markup and are, for the most part, automatically styled and made to fit in with Cheaters overall aesthetic.</p>
<p>Be sure to check out the <a href="http://brettterpstra.com/2014/01/26/cheaters-2-dot-0-5-cheating-gets-easier/">built-in Markdown conversion</a> for easy cheatsheet creation, and <a href="http://brettterpstra.com/2014/01/21/cheaters-2-dot-0-more-and-faster/">check here</a> for info on the fast switcher, deep linking and a JavaScript API.</p>
<figure>
<img src="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-wide.jpg" alt="Cheat Sheets wide" />
<figcaption>Cheat Sheets wide</figcaption>
</figure>
<h3 id="usingcheaters">Using Cheaters</h3>
<p>For Cheaters to work, you need to be serving the files on a local server. This can be done with something like MAMP, or using the built in Apache server in macOS. If you don’t know how to work with either of these, the best bet might be to run the <code>cheat.sh</code> script found in the <code>cheatsheets</code> folder. That will launch Python’s simpleHTTPServer in that directory with an address of <code>http://localhost:4000</code> (which you can then plug into Fluid or Automator).</p>
<h4 id="withfluid">with Fluid</h4>
<p>You can use the instructions below if you’re a cheapskate, but for $5 you can use <a href="http://fluidapp.com/">Fluid</a> and create a menu bar app that’s much more full-featured and usable than the Automator action. Seriously. Do it.</p>
<p>Under images/fluid/CheatersIcon.png you can find a nice Icon to use for Cheaters.</p>
<p><strong><em>Don’t forget to “Allow browsing to any URL” in the Whitelist section of Fluid preferences.</em></strong></p>
<h4 id="withautomator">with Automator</h4>
<p>The most useful way to use Cheaters is with an Automator Application.</p>
<figure>
<img src="http://brettterpstra.com/uploads/2012/03/Cheaters-Automator.jpg" alt="Cheaters Automator Application setup" />
<figcaption>Cheaters Automator Application setup</figcaption>
</figure>
<ol>
<li>Download the Zip file above and put it anywhere on your computer (I keep mine in Dropbox so that my cheat sheets are available on other machines).</li>
<li>Open Automator in your Applications folder.</li>
<li>Create a new project with the type “Application.” You can also use a Workflow, which can be launched easily from the command line, but I’m using an Application for now because it’s easiest to launch with a hotkey program.</li>
<li>Drag two actions from the library on the left into the blank area on the right: <strong>Get Specified URLs</strong> and <strong>Website Popup</strong>, in that order. You can find them quickly by selecting “Library” on the left and using the filter to locate them.</li>
<li>Double click the default URL in the <strong>Get Specified URLs</strong> action and set it to the file path to your Cheaters folder. This will be in the format <code>file:///Users/yourusername/path/to/Cheaters/index.html</code>.</li>
<li>Set a size in the <strong>Website Popup</strong> action. I’m using a custom size of 700x800, which works well on my setup with two large monitors. The popup is resizable after opening, so it’s not critical. Cheaters has a responsive design that will mutate into a single column with a dropdown menu at smaller sizes, so if you have a small screen, use the iPhone preset.</li>
<li>Save the application to your /Applications folder (or ~/Applications).</li>
</ol>
<p>You can add a hotkey or other launch method using Launchbar, Keyboard Maestro, Alfred, Apptivator, etc. Lots of choices. When the application launches, it automatically becomes a floating HUD, and you can dismiss it by focusing it and using Escape or ⌘Q.</p>
<p>You can also use Cheaters in a web browser, just put it on your disk and point your browser to the <code>file:///...</code> location.</p>
<h3 id="deeplinking">Deep linking</h3>
<p>As of a recent update, Cheaters can now handle linking directly to a specific cheat sheet using url hashes. You can use a zero-index number to link to a page if you know the order (index.html#3 to link to the fourth item), but because the order is configurable and subject to change, it also supports name matching. For example, if you want to link the Siri cheat sheet directly, you can use <code>[your_url_or_path]/index.html#siri</code>.</p>
<p>The hash-matching is case-insensitive and will go to the first menu item whose text matches the hash (in whole or in part, whitespace is ignored). This means that if you have a menu item for “CSS 3 Selectors” followed by “CSS Animation,” <code>#css</code> will go to “CSS 3 Selectors.” To target “CSS Animation,” you’d want a url like <code>#cssanim</code> or the full <code>#cssanimation</code>.</p>
<p>This is primarily geared toward building more complex workflows using tools like Alfred 2.</p>
<h3 id="addingsheets">Adding Sheets</h3>
<p>If you know a little Markdown or HTML, adding and editing sheets is easy. Take a look at the existing documents in the included <strong>cheatsheets</strong> folder. The markup varies but a lot of cases are already handled by the Cheaters script and styles. Most of the included cheat sheets are clipped from existing web sources (credits at the bottom of each) or submitted by users.</p>
<p>Dropping markdown, html, or image files into the <code>cheatsheets</code> folder will make them available to the index.html menu (see below).</p>
<h4 id="markdown">Markdown</h4>
<p>Cheaters can render Markdown directly, so this is the easiest way to build a cheat sheet. MMD tables will work, sections can be created by using h4 (<code>####</code>) headers, and all standard Markdown elements should be automatically styled. You can also include custom HTML within the Markdown document, though it’s not recommended.</p>
<h4 id="html">HTML</h4>
<p>HTML based cheat sheets should not include a head, body or containing div, just the markup that goes inside the container in the index.html file. It’s preferred that the title be an <code>h3</code> and section headers be either <code>h4</code> or <code>captions</code> elements in tables.</p>
<h4 id="usingimagespdfs">Using Images/PDFs</h4>
<figure>
<img src="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-Wide-Image.jpg" alt="Cheat Sheets with image" />
<figcaption>Cheat Sheets with image</figcaption>
</figure>
<p>Cheaters will automatically scale images to your browser width, and when your browser width gets small enough that the image would be unreadable, it shows it full size and lets you scroll around within the viewport. See the CSS3 cheat sheet markup for an example of using an image; it’s just an image tag in an html file. Easy as pie.</p>
<p>If you find a PDF cheat sheet that’s ideal for this type of display, you’ll need to convert it to an image (gif, jpg or png) first. Make it large, at <em>least</em> 1024px wide.</p>
<p>If you create some great cheat sheets, fork this and send a pull request. Just <a href="http://brettterpstra.com/contact">let me know</a> if you need a hand!</p>
<h4 id="metadata">Metadata</h4>
<p>Cheaters allows for a metadata block at the top of a cheatsheet that alters its behavior/appearance. Right now there are only 3 keys in use, but extra ones can be added and handled over time.</p>
<p>Keys and values are specified in JSON format.</p>
<p><strong>In Markdown files</strong>, this is just a block at the very top ending with <code>%%%END</code>.</p>
<pre><code>{
"id": "bt_js",
"style": "css/JavaScript.css",
"layout": "multicolumn"
}
%%%END
</code></pre>
<p><strong>In HTML files</strong> this gets wrapped in an HTML comment:</p>
<pre><code><!--
{
"id": "bt_js",
"style": "css/JavaScript.css",
"layout": "multicolumn"
}
%%%END-->
</code></pre>
<h5 id="availablekeys:">Available keys:</h5>
<dl>
<dt>id</dt>
<dd> Specifies an id applied to the body when the cheat sheet is active. By default the filename is used, e.g. “jquery19_md”, but with this key you can make it whatever you want, allowing custom CSS to avoid any namespacing issues.</dd>
<dt>style</dt>
<dd> A pointer to a CSS file. The base is the cheatsheets folder. Custom styles should be saved in the <code>cheatsheets/css</code> folder, and referenced with the leading <code>css/</code>, e.g. <code>"style": "css/selectors.css"</code>. This feature allows for custom styles per cheat sheet, without having to alter the main CSS.</dd>
<dt>layout</dt>
<dd> Currently only recognizes “multicolumn” as anything that changes behavior. Including <code>"layout": "multicolumn"</code> in the metadata will change the scrolling behavior and shortcut keys to work with a horizontal format, as well as adding a “multicolumn” class to the body tag that invokes CSS3 column layout.</dd>
</dl>
<h4 id="themenu">The menu</h4>
<p>The index file for Cheaters loads each cheat sheet dynamically into its own markup (using jQuery). To add a new sheet to the menu (or remove/rearrange existing sheets), just edit the unordered list in the #nav ul. The order of the list is the order of the menu items, and the first one in the list is loaded by default. If you only ever want one cheat sheet, just make it the only one in the list. New cheat sheets should be stored as HTML files in the <strong>cheatsheets</strong> folder, and referenced from the links in the #nav list with the relative path <code>cheatsheets/filename.html</code>.</p>
<h4 id="thelook">The look</h4>
<figure>
<img src="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-narrow-high-contrast.jpg" alt="Narrow, high contrast" />
<figcaption>Narrow, high contrast</figcaption>
</figure>
<p>There’s also a contrast icon in the upper right, which you can use to flip between light-on-dark and dark-on-light. You can make this change permanent by editing the body class in index.html. Adding a class of “inverted” will set it to be light-on-dark by default; without that class it’s dark-on-light automatically.</p>
<p>If you run into markup that isn’t handled by the CSS, use metadata (as detailed above) to specify a unique ID and add a custom CSS file to <code>cheatsheets/css</code> to handle it.</p>
<h3 id="fastswitcher">Fast switcher</h3>
<p>The most important addition is the new fast switcher, triggered with the “f” key. Just type “f” and the first letter of the title of the menu item you want to switch to and it will jump. If there are two sheets with the same letters, just keep typing until it can tell the difference. It’s a fuzzy match, so if you have “HTML” and “HTML5,” you can type “h5” to jump to the latter. Note that if “HTML5” comes before “HTML” in the menu, it will be more difficult to select the “HTML” one as “HTML5” will match first. The system will work with whatever cheat sheets you load.</p>
<p>You can also use the fast switcher with numbers. 1–9 will jump to the first nine sheets, with the first sheet being 1. 0 will jump to the last sheet.</p>
<h3 id="searchshortcuts">Search shortcuts</h3>
<p>Just in case you’re looking for something that you don’t have on your cheat sheet, the fast search also works for web searching! You can type “f” to bring it up, then type “?” to start a search. Anything after the “?” will be searched on <a href="https://duckduckgo.com/">DuckDuckGo</a>. Using DuckDuckGo means that you can also use “bang searches,” so you can start a query with “?!” and any of DuckDuckGo’s <a href="https://duckduckgo.com/bang.html">search shortcuts</a>.</p>
<p>There are a couple of shortcuts built in: “?so {query}” will search Stack Overflow, and “?gh {query}” will search GitHub. “?g {query}” will do a Google search instead of DuckDuckGo.</p>
<p>If you’re using Fluid, you can easily jump back to your cheat sheets by hitting “Command-Shift-H” for “home.” This brings me to another big improvement: your active page and “contrast” settings are preserved, even between launches. Cheaters will remember where you were at and what colors it was using.</p>
<h3 id="keyboardshortcuts">Keyboard shortcuts</h3>
<p>Command-I will now toggle the “contrast” mode, inverting your colors for a dark-on-light or light-on-dark setup.</p>
<p>In addition to normal web page scrolling keys, you can also navigate using vim-like keys. “j” and “k” will move up and down, and “J” and “K” will do it faster (u/d will also move up and down by half pages). “G” will jump to the bottom, and “gg” will jump to the top. Also, you can use “.” (period) and “,” (comma) to navigate by section header.</p>
<h3 id="advanced">Advanced</h3>
<p>For scripters, there’s a JavaScript command you can call externally to switch between cheat sheets: <code>Cheaters.switchTo()</code>. The parameter for it is any string or single digit. If you call <code>Cheaters.switchTo('git')</code>, it will find the first page matching “git” and switch to it. You can jump to a numbered page using <code>Cheaters.switchTo(3)</code>. These numbers are 1-indexed and correlate with the keyboard shortcuts in the fast switcher. You can also retrieve the current index from the variable <code>Cheaters.activeItem</code>, but note that the result of that is 0-index, so it’s 0–8 instead of 1–9.</p>
<p>These commands are useful if you’re using Fluid and want to control it with AppleScript. Just use something like <code>tell app "Cheaters" to do javascript "Cheaters.switchTo('jquery')"</code>. You can pass it a variable using any kind of launcher you can script.</p>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Cheaters maintained by <a href="https://github.com/ttscoff">ttscoff</a></p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-34296025-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>