-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
298 lines (268 loc) · 8.07 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset='utf-8' />
<meta name="description" content="KSON : KSON: Keystripped Schemafied Object Notation" />
<link rel="shortcut icon" href="images/kson-logo-small-16.ico?cb=129" />
<style type="text/css">
/* MeyerWeb Reset */
html, body, div, span, h1, p, blockquote, a, em, img, b, u, i,
center, label, footer, header, section {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
footer, header, section {
max-width: 1100px;
display: block;
}
body {
box-sizing: border-box;
color: #000;
background: #222;
font: 17px/1.7em "Open Sans", Tahoma, Verdana, Segoe, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
height: 160px;
}
#main_content {
min-height: 1200px;
}
h1 {
margin: 10px 0;
color: #111;
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
}
b {font-weight: bold; font-size: 1.03em;}
p {
margin: 10px auto 15px auto;
text-align: justify;
max-width: 45em;
}
a {
color: #07D;
text-decoration: none;
}
.outer {width: 100%;}
.inner {
margin: 0 auto;
width: 90%;
position: relative;
padding: 20px 10px;
}
#header_wrap .inner {
padding: 50px 10px 30px 10px;
}
#downloads {
position: absolute;
visibility: hidden;
}
#livecoding_banner,
#forkme_banner {
position: absolute;
display: block;
top:0;
z-index: 10;
color: #FFF;
font-weight: 700;
}
#livecoding_banner {
right: 150px;
padding: 10px 65px 10px 10px;
background-color: #000;
}
#forkme_banner {
right: 10px;
padding: 10px 50px 10px 10px;
background-color: #08F;
}
#kson_logo {
display: block;
position: relative;
left: 0px;
top: 0px;
background: url(images/kson-logo-128.png) #FD3;
width: 128px;
height: 128px;
}
#project_tagline {
color: #FFF;
letter-spacing: 0;
font-size: 23px;
font-weight: 300;
background: none;
text-shadow: #111 0px 0px 10px;
position: relative;
left: 170px;
bottom: 85px;
width: 250px;
}
#header_wrap {
background: #222;
background: -webkit-linear-gradient(top, #333, #222);
}
#main_content_wrap {
background: #FFF;
border-top: 1px solid #111;
}
#main_content {
padding-top: 40px;
max-width: 1100px;
}
section > div {
visibility: hidden;
}
</style>
<meta name="viewport" content="initial-scale=1.0">
<title>KSON - Keyless Schemæ Object Notation</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="livecoding_banner" href="https://www.livecoding.tv/video/mbarkhau/playlists/kson-keyless-json/">Livecoding</a>
<a id="forkme_banner" href="https://github.com/mbarkhau/kson">GitHub</a>
<a id="kson_logo" href="https://mbarkhau.github.io/kson"></a>
<h1 id="project_tagline">Keyless Schemæ Object Notation</h1>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/mbarkhau/kson/zipball/master">Download this project</a>
</section>
</header>
</div>
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<p>
<b>KSON is mini­fi­ca­tion for your JSON.</b> At the price of read­abil­ity and com­plexity, you can use KSON greatly re­duce the size of your ser­ialized data.
</p>
<p>
Com­pared to other se­ri­al­iza­tion li­braries, the over­head is min­imal. Mini­fied <a href="https://github.com/mbarkhau/kson/blob/master/js/kson.min.js">kson.​min.​js</a> is only 2KB small (less than 1K gzipped). As for speed, since KSON builds on JSON, most of pars­ing is done using na­tive browser func­tions.
</p>
<p>
The most ob­vi­ous re­dun­dancy in an array of ob­jects en­coded with JSON are the keys on each ob­ject. These which only has to be loaded once. Your data can be com­pressed even fur­ther by lever­ag­ing do­main know­ledge and using KSON's flex­i­ble codec sys­tem.
</p>
<div class="ke-controls">
<div class="ke-example-controls"></div>
<div class="ke-ctrl ke-ctrl-convert">KSON.stringify</div>
<div class="ke-ctrl ke-ctrl-derive">Derive Schema</div>
</div>
<div id="ke-editor" class="ke-editor">
<div class="ke-data-wrap"></div>
<div class="ke-schema-wrap"></div>
<span class="ke-infotag ke-it-schema">Schema</span>
<span class="ke-infotag ke-it-state">JSON</span>
</div>
<div class="ke-controls">
<div class="ke-ctrl ke-ctrl-run-benchmark">Run Benchmark</div>
<input class="ke-ctrl-doc-size" id="doc-size" type="number" min="1" value="100">
<label class="ke-ctrl-doc-size-label" for="doc-size">Element Count</label>
<div class="ke-network-controls"></div>
</div>
<div class="ke-stats">
<p>
<span>KSON Size/Item</span>
<span class="ke-kson-bytes-per-item"></span>
<span>bytes/item</span>
</p>
<p>
<span>JSON Size/Item</span>
<span class="ke-json-bytes-per-item"></span>
<span>bytes/item</span>
</p>
<div class="ke-bench">
<div class="ke-labels">
<div class="ke-stat-bar-label">KSON Net Latency</div>
<div class="ke-stat-bar-label">JSON Net Latency</div>
<div class="ke-stat-bar-label">KSON Net Latency (gz)</div>
<div class="ke-stat-bar-label">JSON Net Latency (gz)</div>
<div class="ke-stat-bar-label">KSON Encode Time</div>
<div class="ke-stat-bar-label">JSON Encode Time</div>
<div class="ke-stat-bar-label">KSON Decode Time</div>
<div class="ke-stat-bar-label">JSON Decode Time</div>
<div class="ke-stat-bar-label">KSON Total Time</div>
<div class="ke-stat-bar-label">JSON Total Time</div>
<div class="ke-stat-bar-label">KSON Total Time (gz)</div>
<div class="ke-stat-bar-label">JSON Total Time (gz)</div>
</div>
<div class="ke-bars">
<div class="ke-stat-bar ke-kson-net-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-json-net-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-kson-net-gz-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-json-net-gz-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-kson-encode-time">
<div class="ke-stat-bar-val">ms</div><div class="ke-stat-bar-err"></div>
</div>
<div class="ke-stat-bar ke-json-encode-time">
<div class="ke-stat-bar-val">ms</div><div class="ke-stat-bar-err"></div>
</div>
<div class="ke-stat-bar ke-kson-decode-time">
<div class="ke-stat-bar-val">ms</div><div class="ke-stat-bar-err"></div>
</div>
<div class="ke-stat-bar ke-json-decode-time">
<div class="ke-stat-bar-val">ms</div><div class="ke-stat-bar-err"></div>
</div>
<div class="ke-stat-bar ke-kson-total-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-json-total-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-kson-total-gz-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
<div class="ke-stat-bar ke-json-total-gz-latency">
<div class="ke-stat-bar-val">ms</div>
</div>
</div>
</div>
</div>
<p>
<h2>Comming soon</h2>
<ul>
<li>Examples for Nested Schemas</li>
<li>Examples for Pipelined Coders</li>
<li>Schema Derivation</li>
<li>Python Implementation</li>
<li>Go Implementation</li>
<li>Alternative Schema Syntax</li>
<li>Validation Logic for development</li>
<li>Compiler for Custom Client Libraries</li>
<li>KSON Documents with Inline Schemas</li>
<!--
Non user facing tasks
- Better Example Data (More Random)
- Display Trasfer time and RTT seperatly
- Page Speed Optimizations
- Fine print with assumptions made by benchmarks
- Mobile Optimizations
- loading spinners for editor
- Static Site Generation
- Convert readme to .rst
- expand spec to document wire format
-->
</ul>
</p>
</section>
</div>
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">KSON maintained by <a href="https://github.com/mbarkhau">mbarkhau</a></p>
</footer>
</div>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/codemirror.css">
<script type="text/javascript" src="js/loader.js"></script>
</body>
</html>