devLayer/index.html at master · HenryMarshall/devLayer · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DevLayer: A better way to program</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style/style.css">

</head>
<body>

  <script type="text/x-handlebars">
    <div class="container-fluid">
      <div class="col-xs-12">
        <h1>DevLayer</h1>
        {{partial "keyboard"}}
      </div>
      <div class="col-xs-4 about">
        {{partial "about"}}
      </div>

      <div class="col-xs-8">
        {{partial "layouts"}}

        {{outlet}}


        <section>
          <div id="callToAction" class="col-xs-4">
            {{#link-to 'results'}}
              <div id="test-it" class="key">Test it!</div>
            {{/link-to}}
            <div id="download" class="key">Download</div>
          </div>

          <div id="options">


              <div class="col-xs-4">

              </div>
          </div>
        </section>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="corpus">
    <textarea id="corpus">
varApp=Ember.Application.create();$(document).ready(function(){var$keyboard=$("#keyboard");console.log("$keyboard:",$keyboard);xm.getXmod("/business/layouts/qwertyDevLayerAbridged.txt",function(data){varlayout=xm.xmodToLayout(data,xm.config.toPresentation),layoutObj=pr.layoutToLayoutObj(layout);$($keyboard).find(".key").each(function(row){varkeycode=$(this).attr("data-keycode"),that=this;_.each(layoutObj[keycode],function(value,key){if(true){$("<span/>").addClass(key).html(value).appendTo(that);}});})});});
    </textarea>
  </script>

  <script type="text/x-handlebars" data-template-name="results">
    <div id="results" class="col-xs-12">

        <div id="distance" class="col-xs-4">

          <div class="sans inline-block right-aligned">Typing that snippet using</div>
          <div class="vanilla emphasis large">QWERTY</div>
          <div class="sans">your fingers travel</div>
          <div class="percentage emphasis ">17%</div>
          <div class="farther emphasis large">FARTHER</div>
          {{!-- <div class="than large inline-block">than</div> --}}
          <div class="if-using inline-block sans">than if using</div>
          <div class="devLayer emphasis large">DevLayer</div>
        </div>

        <div class="col-xs-8">

          {{canvas-graph}}

          {{#link-to 'corpus'}}<div class="key">Try again</div>{{/link-to}}
        </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="components/canvas-graph">
    Your browser seems not to support canvas :(
  </script>

  <script type="text/x-handlebars" data-template-name="_keyboard">
    <div id="keyboard">
      {{!-- Number row --}}
      <div class="key-row">
        <div data-keycode="49" class="key x1"></div>
        <div data-keycode="10" class="key x1"></div>
        <div data-keycode="11" class="key x1"></div>
        <div data-keycode="12" class="key x1"></div>
        <div data-keycode="13" class="key x1"></div>
        <div data-keycode="14" class="key x1"></div>
        <div data-keycode="15" class="key x1"></div>
        <div data-keycode="16" class="key x1"></div>
        <div data-keycode="17" class="key x1"></div>
        <div data-keycode="18" class="key x1"></div>
        <div data-keycode="19" class="key x1"></div>
        <div data-keycode="20" class="key x1"></div>
        <div data-keycode="21" class="key x1"></div>
        <div data-keycode="22" class="key x2"></div>
      </div>

      {{!-- Top row --}}
      <div class="key-row">
        <div data-keycode="23" class="key x15"></div>
        <div data-keycode="24" class="key x1"></div>
        <div data-keycode="25" class="key x1"></div>
        <div data-keycode="26" class="key x1"></div>
        <div data-keycode="27" class="key x1"></div>
        <div data-keycode="28" class="key x1"></div>
        <div data-keycode="29" class="key x1"></div>
        <div data-keycode="30" class="key x1"></div>
        <div data-keycode="31" class="key x1"></div>
        <div data-keycode="32" class="key x1"></div>
        <div data-keycode="33" class="key x1"></div>
        <div data-keycode="34" class="key x1"></div>
        <div data-keycode="35" class="key x1"></div>
        <div data-keycode="51" class="key x15"></div>
      </div>

      {{!-- Home row --}}
      <div class="key-row">
        <div data-keycode="66" class="key x175"></div>
        <div data-keycode="38" class="key x1"></div>
        <div data-keycode="39" class="key x1"></div>
        <div data-keycode="40" class="key x1"></div>
        <div data-keycode="41" class="key x1"></div>
        <div data-keycode="42" class="key x1"></div>
        <div data-keycode="43" class="key x1"></div>
        <div data-keycode="44" class="key x1"></div>
        <div data-keycode="45" class="key x1"></div>
        <div data-keycode="46" class="key x1"></div>
        <div data-keycode="47" class="key x1"></div>
        <div data-keycode="48" class="key x1"></div>
        <div data-keycode="36" class="key x225"></div>
      </div>

      {{!-- Bottom row --}}
      <div class="key-row">
        <div data-keycode="50" class="key x225"></div>
        <div data-keycode="52" class="key x1"></div>
        <div data-keycode="53" class="key x1"></div>
        <div data-keycode="54" class="key x1"></div>
        <div data-keycode="55" class="key x1"></div>
        <div data-keycode="56" class="key x1"></div>
        <div data-keycode="57" class="key x1 embiggen"></div>
        <div data-keycode="58" class="key x1"></div>
        <div data-keycode="59" class="key x1"></div>
        <div data-keycode="60" class="key x1 embiggen"></div>
        <div data-keycode="61" class="key x1"></div>
        <div data-keycode="62" class="key x275"></div>
      </div>

      {{!-- Space row --}}
      <div class="key-row">
        <div data-keycode="37" class="key x15"></div>
        <div data-keycode="133" class="key x15"></div>
        <div data-keycode="64" class="key x15"></div>
        <div data-keycode="65" class="key x45"></div>
        <div data-keycode="108" class="key x15 devLayer"></div>
        <div data-keycode="134" class="key x15"></div>
        <div data-keycode="135" class="key x15"></div>
        <div data-keycode="105" class="key x15"></div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="_layouts">
    <form id="layouts" class="col-xs-12">
      <span>Base Layouts:</span>
      <div class="radio-inline">
        <label>
          <input type="radio" name="layout" value="qwerty" checked>
          <span></span>
          QWERTY
        </label>
      </div>
      <div class="radio-inline">
        <label>
          <input type="radio" name="layout" value="colemak">
          <span></span>
          Colemak
        </label>
      </div>
      <div class="radio-inline">
        <label>
          <input type="radio" name="layout" value="dvorak">
          <span></span>
          Dvorak
        </label>
      </div>
      <div class="radio-inline">
        <label>
          <input type="radio" name="layout" value="workman">
          <span></span>
          Workman
        </label>
      </div>
    </form>
  </script>

  <script type="text/x-handlebars" data-template-name="_about">
    <h2>About</h2>
    <p>DevLayer is an alternative keyboard layout that puts frequently used programming keys closer to the homerow. Better yet, it is fully compatable with the layout you already know and use (be it QWERTY, <a href="http://www.colemak.com/">Colemak</a>, <a href="http://en.wikipedia.org/wiki/Dvorak_Simplified_Keyboard">Dvorak</a>, or <a href="https://viralintrospection.wordpress.com/2010/09/06/a-different-philosophy-in-designing-keyboard-layouts/">Workman</a>). Instead, you enter programming keys with the right alt modifier.</p>
    <p>Whether you want to learn all the improved placements or just a few, DevLayer is designed to be easy to learn. Many characters are struck with the same finger you're used to, while others are intuitively clustered. Vim users will immediately feel at home with the convenient arrangement of arrow keys on the homerow.</p>
    <p>With your current layout, you probably type <code>/?;:'"[]{}\|-_+=0)</code>, backspace, and enter, with a single finger. Test out DevLayer and find out just how much you can improve the multi-threaded performance of your hands!</p>
  </script>

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/handlebars/handlebars.min.js"></script>
  <script src="bower_components/ember/ember.min.js"></script>
  <script src="bower_components/ember-data/ember-data.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

  <script src="business/xmodConverter.js"></script>
  <script src="business/xmodConfig.js"></script>
  <script src="business/analyzer.js"></script>

  <script src="js/app.js"></script>
  <script src="js/router.js"></script>

</body>
</html>