/
index.html
179 lines (177 loc) · 5.95 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
<html>
<head>
<style>
#html_container {
float: left;
width: 400px;
}
#json_object textarea {
float: left;
width: 400px;
height: 150px;
}
.url_input {
width: 600px;
}
</style>
<style>
#doc {
float: left;
}
div.custom_api {
float: right;
width: 600px;
}
.custom_api div, .custom_api span, .custom_api ul, .custom_api li {
margin: 10px;
padding: 5px;
}
.custom_api div {
border: 2px solid black;
}
.custom_api span {
border: 1px solid blue;
}
.custom_api ul {
border: 2px solid orange;
}
.custom_api li {
border: 1px solid green;
}
</style>
<link rel="stylesheet" type="text/css" href="vendor/highlight/styles/school_book.css" media="screen" />
<script src="vendor/remedial.js"></script>
<script src="vendor/global-es5.js"></script>
<script src="vendor/showdown/showdown.js"></script>
<script src="vendor/highlight/highlight.pack.js"></script>
<script src="vendor/jquery/jquery-1.4.2.js"></script>
<script src="vendor/inflection-js/inflection.js"></script>
<script src="lib/merge.js"></script>
<script src="lib/flatten.js"></script>
<script src="lib/autotemplate.js"></script>
<script>
$(function () {
$("body").delegate('#api_form', 'submit', function (ev) {
ev.preventDefault();
$.getJSON($('#api_form input[name=api_url]').val() + '&' + $('#api_form input[name=api_url_callback]').val() + '=?', {}, function (data) {
//alert(JSON.stringify(data));
$("#json_object textarea").val(JSON.stringify(data, null, true));
});
});
$("body").delegate('#json_object', 'change', function (ev) {
$("#html_object").html($("#json_object textarea").val());
//hljs.initHighlighting();
});
$("body").delegate('#coalesce', 'click', function (ev) {
ev.preventDefault();
var text;
try {
text = eval('(' + $("#json_object textarea").val() + ')');
} catch(e) {
text = {error: e.toString(), msg: "could not parse input"};
}
var merged = CopyCat.coalesce(text);
$("#html_object").text(JSON.stringify(merged, null, ' '));
$("#json_object textarea").val(JSON.stringify(merged, null, ' '));
return;
});
$("body").delegate('#flatten', 'click', function (ev) {
ev.preventDefault();
var text;
try {
text = eval('(' + $("#json_object textarea").val() + ')');
} catch(e) {
text = {error: e.toString(), msg: "could not parse input"};
}
var merged = CopyCat.flatten('global', text);
$("#html_object").text(JSON.stringify(merged, null, ' '));
$("#json_object textarea").val(JSON.stringify(merged, null, ' '));
return;
});
$("body").delegate('#autotemplate', 'click', function (ev) {
ev.preventDefault();
try {
text = eval('(' + $("#json_object textarea").val() + ')');
} catch(e) {
text = {error: e.toString(), msg: "could not parse input"};
}
var dom = CopyCat.autotemplate(text, "custom_api");
//var dom = CopyCat.autotemplate.test(text);
$("#html_view").html(dom);
});
//hljs.initHighlightingOnLoad();
});
</script>
</head>
<body>
<p>
Perhaps the biggest problem with documentation is that it's an afterthought.
We tend to want to focus on <em>getting things done</em>,
not on <em><strong>meta-</strong>getting-things-done</em>.
</p>
<p>
Inline documentation is cumbersome, difficult to format, and isn't easy to present to a user.
That means that you end up documenting things at least twice.
And there's a definite distinction between technical (api) documentation and business (end-user) documentation.
</p>
<p>
CopyCatJS handles the meta and let's you program. You can either document first, or document after, or document as you go.
Also, CopyCat is great for understanding poorly documented APIs in the wild. Just give it a try!.
</p>
<ol>
<li>(Optional) Choose an API to examine:
<div id="api_form">
<form>
<br/>API URL (without callback param): <input class="url_input" name="api_url" type="text" value="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json"/>
<br/>JSONP callback param <input name="api_url_callback" type="text" value="jsoncallback" />
<br/><input name="get_url" type="submit" value="Get Data Sample" />
<ul>
<li>Google Social:
http://socialgraph.apis.google.com/lookup?q=coolaj86@gmail.com&fme=1&edo=1&edi=1&pretty=1
callback
</li>
</ul>
</form>
</div>
</li>
<li>Now you can simplify the data in ways that are easier for you to understand it:
<ul>
<li><a id="autotemplate" href="template.html">Auto-template</a> (visualize)</li>
<li><a id="coalesce" href="merge.html">Coalesce</a> (merge vertically)</li>
<li><a id="flatten" href="flatten.html">Flatten</a> (merge horizontally)</li>
<li><a id="describe" href="#TODO_forthcoming">Describe</a> (create data-dictionary)</li>
</ul>
</li>
</ol>
<p>TODO:</p>
<ul>
<li>Handle 'null'</li>
<li>Abstract recurse mechanism</li>
<li>Create dictionary template</li>
<li>Stylize</li>
</ul>
<div id="html_view"></div>
<div id="json_object">
Data go here:
<br/>
<textarea>
{
"undefined": undefined,
"string": "string",
"number": 1,
"boolean": true,
"array" : [1,2,3,4],
"object" : {a: 1, b: 2, c: 3, d: 4},
"func": function () {}
}
</textarea>
</div>
<div id="html_container">
Result go here:
<br/>
<pre>
<code id="html_object"></code>
</pre>
</div>
</body>
</html>