├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── _data
    ├── browserlabels.yml
    ├── browsers.yml
    ├── frameworks.yml
    └── labels.yml
├── _layouts
    └── default.html
├── browsers.md
├── hyperpolyglot.css
└── index.md


/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ### New frameworks
2 | 
3 | Please [create an issue](https://github.com/jeffcarp/frontend-hyperpolyglot/issues/new) proposing a new framework before submitting a PR. Currently the page is getting a bit wide. No new frameworks will be added until [#28](https://github.com/jeffcarp/frontend-hyperpolyglot/issues/28) is resolved.
4 | 
5 | ### Local development
6 | 
7 | This is a Jekyll app, so first [install Jekyll](https://jekyllrb.com/docs/installation/). Then, just run `jekyll serve --watch` and go to `localhost:4000`! :smile:
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Jeff Carpenter
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # frontend-hyperpolyglot
 2 | 
 3 | Inspired by [hyperpolyglot.org](http://hyperpolyglot.org/), a comparison of similar features in popular JavaScript frameworks. 
 4 | 
 5 | At: http://jeffcarp.github.io/frontend-hyperpolyglot/
 6 | 
 7 | <a href="http://jeffcarp.github.io/frontend-hyperpolyglot/"><img alt="website screenshot" src="https://cloud.githubusercontent.com/assets/916028/15264258/37131ce0-1926-11e6-81da-2f3491219a6f.png" width="100%" /></a>
 8 | 
 9 | See a bug or something missing? Have a framework in mind? Head on over to [CONTRIBUTING.md](CONTRIBUTING.md)!
10 | 


--------------------------------------------------------------------------------
/_data/browserlabels.yml:
--------------------------------------------------------------------------------
1 | - Chromium
2 | - Firefox
3 | 


--------------------------------------------------------------------------------
/_data/browsers.yml:
--------------------------------------------------------------------------------
 1 | - name: Components
 2 |   comparisons:
 3 |   - label: Networking library
 4 |     browsers:
 5 |       chromium: Cronet
 6 |       firefox: Necko
 7 |   - label: TLS implementation
 8 |     browsers:
 9 |       chromium:
10 |         linktext: BoringSSL
11 |         link: https://www.chromium.org/Home/chromium-security/boringssl
12 |       firefox:
13 |         linktext: NSS
14 |         link: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS
15 | 
16 | - name: Developer Workflow
17 |   comparisons:
18 |   - label: Source control
19 |     browsers:
20 |       chromium: git
21 |       firefox: mercurial
22 |   - label: Continuous integration
23 |     browsers:
24 |       chromium:
25 |         linktext: Commit Queue
26 |         link: https://dev.chromium.org/developers/testing/commit-queue
27 |       firefox:
28 |         linktext: Docs
29 |         link: https://developer.mozilla.org/en-US/docs/Mozilla/Continuous_integration
30 |   - label: Running layout tests
31 |     browsers:
32 |       chromium:
33 |         linktext: Docs
34 |         link: https://chromium.googlesource.com/chromium/src/+/master/docs/layout_tests_linux.md
35 |       firefox:
36 |         linktext: Docs
37 |         link:
38 |   - label: Running Web Platform Tests
39 |     browsers:
40 |       chromium:
41 |         linktext: Docs
42 |         link:
43 |       firefox:
44 |         linktext: Docs
45 |         link: https://developer.mozilla.org/en-US/docs/Mozilla/QA/web-platform-tests#Running_tests
46 | 


--------------------------------------------------------------------------------
/_data/frameworks.yml:
--------------------------------------------------------------------------------
  1 | - name:
  2 |   comparisons:
  3 |   - label: Version used
  4 |     frameworks:
  5 |       react: 15.0.2
  6 |       angular2: 2.0.0-beta.17
  7 |       angular1: 1.5.5
  8 |       ember: 2.5.1
  9 |       polymer: 1.4.0
 10 |       vue: 1.0.24
 11 |       riot: 2.4.1
 12 |   - label: Language used
 13 |     frameworks:
 14 |       react: ES6
 15 |       angular2: TypeScript
 16 |       angular1: ES5
 17 |       ember: ES6
 18 |       polymer: ES6
 19 |       vue: ES6
 20 |       riot: ES6
 21 | 
 22 | - name: Templating logic
 23 |   comparisons:
 24 |   - label: Text interpolation
 25 |     frameworks:
 26 |       react: "{ message }"
 27 |       angular2: "{{ message }}"
 28 |       angular1: "{{ message }}"
 29 |       ember: "{{ message }}"
 30 |       polymer: "{{ message }}"
 31 |       vue: "{{ message }}"
 32 |       riot: "{ message }"
 33 |     remarks: |
 34 |       - **Polymer:** see [Binding to text content](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content).
 35 |   - label: Transform interpolation
 36 |     frameworks:
 37 |       react: "{ filter(message) }"
 38 |       angular2: "{{ message | filter }}"
 39 |       angular1: "{{ message | filter }}"
 40 |       ember: "{{filter message }}"
 41 |       polymer: "{{ filter(message) }}"
 42 |       vue: "{{ message | filter }}"
 43 |       riot: "{ filter(message) }"
 44 |     remarks: |
 45 |       **React, Riot and Polymer** don't have the concept of 'filters' or 'pipes', but you can use a simple function to acheive the same result.
 46 | 
 47 |       - **Vue:** See [Filters](https://vuejs.org/guide/syntax.html#Filters)
 48 |       - **Ember:** See [Helpers](https://guides.emberjs.com/v2.5.0/templates/handlebars-basics/#toc_helpers)
 49 |   - label: Transform with arguments
 50 |     frameworks:
 51 |       react: "{ filter(message, 'arg1', arg2) }"
 52 |       angular2: "{{ message | filter:'arg1':arg2 }}"
 53 |       angular1: "{{ message | filter:'arg1':arg2 }}"
 54 |       ember: "{{filter message 'arg1' arg2 }}"
 55 |       polymer: "{{ filter(message, 'arg1', arg2) }}"
 56 |       vue: "{{ message | filter 'arg1' arg2 }}"
 57 |       riot: "{ filter(message, 'arg1', arg2) }"
 58 |     remarks: |
 59 |       - **Angular 2:** See [Pipes](https://angular.io/docs/ts/latest/guide/pipes.html)
 60 |       - **Angular 1:** See [Filter](https://docs.angularjs.org/api/ng/filter/filter)
 61 |       - **Vue:** See [Filters](https://vuejs.org/guide/syntax.html#Filters)
 62 |       - **Ember:** See [Helpers](https://guides.emberjs.com/v2.5.0/templates/handlebars-basics/#toc_helpers)
 63 |   - label: Bind text content
 64 |     frameworks:
 65 |       react: <div textContent={message}>
 66 |       angular2: <div [textContent]="message">
 67 |       angular1: <div ng-bind="message">
 68 |       ember: <div textContent="{{ message }}">
 69 |       polymer: <div text-content="{{ message }}">
 70 |       vue: <div v-text="message">
 71 |       riot: <div textContent={message}>
 72 |     remarks: |
 73 |       A way of binding the text content of an element via an attribute.
 74 | 
 75 |       - **Angular 1:** See [`ngBind`](https://docs.angularjs.org/api/ng/directive/ngBind).
 76 |       - **Polymer:** See [Annotated attribute binding](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding.)
 77 |   - label: Bind href
 78 |     frameworks:
 79 |       react: <a href={ url }></a>
 80 |       angular2: <a [href]="url"></a>
 81 |       angular1: <a ng-href="{{ url }}"></a>
 82 |       ember: <a href="{{url}}"></a>
 83 |       polymer: <a href$="{{ url }}"></a>
 84 |       vue: <a v-bind:href="url"></a>
 85 |       riot: <a href={ url }></a>
 86 |     remarks: |
 87 |       - **Angular 2:** See [bind to the `href` property](https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#bind-to-the-href-property).
 88 |       - **Angular 1:** See [`ngHref`](https://docs.angularjs.org/api/ng/directive/ngHref).
 89 |       - **Polymer:** See [Binding to native element attributes](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding).
 90 |       - **Vue:** See [Directives > Arguments](https://vuejs.org/guide/syntax.html#Arguments).
 91 |   - label: Dangerous raw HTML output
 92 |     frameworks:
 93 |       react: "<div \n  dangerouslySetInnerHTML={{\n    __html: raw_html\n  }} />"
 94 |       angular2: <div [innerHTML]="raw_html">
 95 |       angular1: <div ng-bind-html="raw_html">
 96 |       ember: "{{{ raw_html }}}"
 97 |       polymer: <div inner-h-t-m-l="{{ raw_html }}">
 98 |       vue: "{{{ raw_html }}}"
 99 |       riot:
100 |         comment: see notes
101 |     remarks: |
102 |       Please don't use these in your programs. Filtering raw HTML on the server or in the browser will not protect you 100% against XSS. For a deeper look at the subject, please refer to the [Google Browser Security Handbook (PDF download)](https://storage.googleapis.com/google-code-attachments/browsersec/issue-8/comment-8/Google%20Browser%20Security%20Handbook.pdf) and the book [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/).
103 | 
104 |       - **React:** See [Dangerously Set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
105 |       - **Vue:** See [Raw HTML](https://vuejs.org/guide/syntax.html#Raw-HTML).
106 |       - **Riot:** Riot doesn't directly support this, though you can set `innerHTML` using `this.root.querySelector`
107 |   - label: Bind attribute value
108 |     frameworks:
109 |       react: <div id={'item-' + id}>
110 |       angular2: <div id="item-{{ id }}">
111 |       angular1: <div id="item-{{ id }}">
112 |       ember: <div id="item-{{ id }}">
113 |       polymer: <div id$="item-{{ id }}">
114 |       vue: <div id="item-{{ id }}">
115 |       riot: <div id={'item-' + id}>
116 |     remarks: |
117 |       - **Angular 2:** See [Attribute, class, and style bindings](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#attribute-class-and-style-bindings)
118 |       - **Vue:** See [Attributes](https://vuejs.org/guide/syntax.html#Attributes)
119 |   - label: DOM add/remove
120 |     frameworks:
121 |       react: "{shouldShow && <div />}"
122 |       angular2: <div *ngIf="shouldShow">
123 |       angular1: <div ng-if='shouldShow'>
124 |       ember: "{{#if shouldShow}}\n  <div></div>\n{{/if}}"
125 |       polymer: "<template\n  is='dom-if'\n  if='{{shouldShow}}'>\n</template>"
126 |       vue: <div v-if='shouldShow'>
127 |       riot: <div if={ shouldShow }>
128 |     remarks: |
129 |       - **Angular 2:** See [Angular Cheat Sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html).
130 |   - label: Repeat
131 |     frameworks:
132 |       react: "items.map(item =>\n  <div key={item.id} />\n)"
133 |       angular2: <div *ngFor="let item of items">
134 |       angular1: <div ng-repeat="item in items">
135 |       ember: "{{#each items as |item|}}\n  <div></div>\n{{/each}}"
136 |       polymer: "<template\n  is='dom-repeat'\n  items='{{items}}'>\n</template>"
137 |       vue: <div v-for="item in items">
138 |       riot: <div each={ item in items }>
139 |     remarks: |
140 |       - **Angular 1:** See [`ngRepeat`](https://docs.angularjs.org/api/ng/directive/ngRepeat).
141 |       - **Polymer:** See [Template repeater (`dom-repeat`)](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat).
142 |   - label: Bind event handler
143 |     frameworks:
144 |       react: <button onClick={clicked}>
145 |       angular2: <button (click)="clicked()">
146 |       angular1: <button ng-click="clicked()">
147 |       ember: <button {{action 'clicked'}}>
148 |       polymer: <button on-click="clicked">
149 |       vue: <button v-on:click="clicked">
150 |       riot: <button onclick={clicked}>
151 |     remarks: |
152 |       - **Polymer:** See [Annotated event listener setup](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners).
153 | 
154 | - name: Components
155 |   comparisons:
156 |   - label: Define component ES6
157 |     frameworks:
158 |       react:
159 |         js: class Polyglot extends React.Component
160 |       angular2:
161 |         js: "@Component({})class Polyglot {}"
162 |       angular1:
163 |         js: module.component('polyglot', {})
164 |       ember:
165 |         js: Ember.Component.extend({})
166 |       polymer:
167 |         js: "class Polyglot extends HTMLElement { \n  beforeRegister() {\n    this.is = 'poly-glot';\n  }\n}"
168 |       vue:
169 |         js: class Polyglot extends Vue
170 |       riot: <polyglot></polyglot>
171 |     remarks: |
172 |       - **Polymer:** See [Building web components using ES6 classes](https://www.polymer-project.org/1.0/articles/es6.html)
173 |       - **Vue:** See gist: [Vue.js + ES6](https://gist.github.com/k33g/f4ea54b6a2cf9555b959)
174 |   - label: Define component ES5
175 |     frameworks:
176 |       react:
177 |         js: React.createClass({})
178 |       angular2:
179 |         js: ng.core.Component({}).Class({})
180 |       angular1:
181 |         js: module.component('polyglot', {})
182 |       ember:
183 |         js: Ember.Component.extend({})
184 |       polymer:
185 |         js: "Polymer({is: 'poly-glot'})"
186 |       vue:
187 |         js: Vue.extend({})
188 |       riot: <polyglot></polyglot>
189 |     remarks: |
190 |       - **Polymer:** See [Building web components using ES6 classes](https://www.polymer-project.org/1.0/articles/es6.html)
191 |       - **Vue:** See gist: [Vue.js + ES6](https://gist.github.com/k33g/f4ea54b6a2cf9555b959)
192 | 
193 | - name: Component communication
194 |   comparisons:
195 |   - label: One-way data binding
196 |     frameworks:
197 |       react: <Child foo={bar} />
198 |       angular2: <Child [foo]="bar" />
199 |       angular1: <Child foo="{{ bar }}" />
200 |       ember: "{{Child foo=(readonly bar) }}"
201 |       polymer: '<div foo="[[ bar ]]">'
202 |       vue: <child :foo='bar' />
203 |       riot: <child foo={bar} />
204 |     remarks: |
205 |       - **Polymer:** The child component must also be set up to treat the property as read-only. Learn more about [data binding in Polymer](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html).
206 |   - label: String literal prop
207 |     frameworks:
208 |       react: <Child foo='bar' />
209 |       angular2: <Child foo='bar' />
210 |       angular1: <Child foo='bar' />
211 |       ember: "{{Child foo='bar' }}"
212 |       polymer: <div foo="bar">
213 |       vue: <child foo='bar' />
214 |       riot: <child foo='bar' />
215 |   - label: Two-way binding (native)
216 |     frameworks:
217 |       react:
218 |         comment: not supported
219 |       angular2: <input [(ngModel)]="foo" />
220 |       angular1: <input ng-model="foo" />
221 |       ember: "<input \n  value={{foo}}\n  onkeyup={{\n    action (mut foo)\n      value='target.value'\n  }}\n  />"
222 |       polymer: <input value="{{foo::input}}">
223 |       vue: <input v-model="foo" />
224 |       riot:
225 |         comment: not supported
226 |     remarks: |
227 |       - **Polymer:** See [Two-way binding to native elements](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native).
228 |   - label: Two-way binding (components)
229 |     frameworks:
230 |       react:
231 |         comment: not supported
232 |       angular2: <Child [(foo)]="bar" />
233 |       angular1: <Child foo="bar" />
234 |       ember: <Child foo=bar>
235 |       polymer: "<poly-glot foo='{{ bar }}'></poly-glot>\n<!-- and set notify: true -->"
236 |       vue: <child :foo.sync="bar"></child>
237 |       riot:
238 |         comment: not supported
239 |     remarks: |
240 |       - **Polymer:** See [Property change notification and two-way binding](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#property-notification).
241 |   - label: One-time binding
242 |     frameworks:
243 |       react:
244 |         comment: not supported
245 |       angular2:
246 |         comment: not supported
247 |       angular1: <Child foo="::bar" />
248 |       ember:
249 |         comment: not supported
250 |       polymer:
251 |         comment: not supported
252 |       vue: <child foo.once="bar" />
253 |       riot:
254 |         comment: not supported
255 |     remarks: |
256 |       When a property is passed down and never updated again.
257 | 
258 |       - **Angular 1:** See [One-time binding](https://docs.angularjs.org/guide/expression#one-time-binding).
259 |       - **Polymer:** See [Creating a One Time Binding](https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/basics/creating-a-one-time-binding.html#L17) in polymer-patterns.
260 | 
261 | - name: Component internal state
262 |   comparisons:
263 |   - label: Set initial state
264 |     frameworks:
265 |       react:
266 |         js: "getIntitialState = () => { foo: 1 }"
267 |       angular2:
268 |         js: "constructor() {\n  this.foo = 1\n}"
269 |       angular1:
270 |         js: "controller: function() {\n  this.foo = 1\n}"
271 |       ember:
272 |         js: "{\n  foo: 1\n}"
273 |       polymer:
274 |         js: "properties: {\n  foo: { value: 1 }\n}"
275 |       vue:
276 |         js: "data: {\n  foo: 1\n}"
277 |       riot:
278 |         js: "this.foo = 1"
279 |     remarks:
280 |   - label: Set state
281 |     frameworks:
282 |       react:
283 |         js: "this.setState({ foo: 2 })"
284 |       angular2:
285 |         js: "this.foo = 2"
286 |       angular1:
287 |         js: "this.foo = 2"
288 |       ember:
289 |         js: "this.set('foo', 2)"
290 |       polymer:
291 |         js: "this.foo = 2"
292 |       vue:
293 |         js: "this.foo = 2"
294 |       riot:
295 |         js: "this.foo = 2"
296 |     remarks:
297 | - name: Property validation
298 |   comparisons:
299 |   - label: Prop validation key
300 |     frameworks:
301 |       react:
302 |         js: "{propTypes: {}}"
303 |       angular2:
304 |         comment: as types on @Input properties (below)
305 |       angular1:
306 |         comment: (no prop types)
307 |       ember:
308 |         js: "// requires ember-prop-types\n{propTypes: {}}"
309 |       polymer:
310 |         js: "{properties: {}}"
311 |       vue:
312 |         js: "{props: {}}"
313 |       riot:
314 |         comment: (no prop types)
315 |     remarks: |
316 |       The key in the component configuration object to define the expected type of a passed prop.
317 | 
318 |       ```
319 |       class Polyglot extends React.Component {
320 |         propTypes = {
321 |           myNumber: React.propTypes.number
322 |         }
323 |       }
324 |       ```
325 | 
326 |       - **React:** Learn more about [`propTypes` in React](https://facebook.github.io/react/docs/reusable-components.html#prop-validation).
327 |       - **Angular 2:** Learn more about [Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) in TypeScript.
328 |       - **Polymer:** Learn more about [declared properties in Polymer](https://www.polymer-project.org/1.0/docs/devguide/properties.html).
329 |       - **Vue:** Learn more about [prop validation in Vue](https://vuejs.org/guide/components.html#Prop-Validation).
330 |       - **Ember:** Learn more about [prop validation in Ember](https://github.com/ciena-blueplanet/ember-prop-types).
331 |   - label: Prop validate Number
332 |     frameworks:
333 |       react:
334 |         js: "{myNum: React.PropTypes.number}"
335 |       angular2:
336 |         js: "@Input() myNum: number;"
337 |       angular1:
338 |         comment: (no prop types)
339 |       ember:
340 |         js: "{myNum: PropTypes.number}"
341 |       polymer:
342 |         js: "{myNum: Number}"
343 |       vue:
344 |         js: "{myNum: Number}"
345 |       riot:
346 |         comment: (no prop types)
347 |   - label: Prop validate String
348 |     frameworks:
349 |       react:
350 |         js: "{myStr: React.PropTypes.string}"
351 |       angular2:
352 |         js: "@Input() myStr: string;"
353 |       angular1:
354 |         comment: (no prop types)
355 |       ember:
356 |         js: "{myStr: PropTypes.string}"
357 |       polymer:
358 |         js: "{myStr: String}"
359 |       vue:
360 |         js: "{myStr: String}"
361 |       riot:
362 |         comment: (no prop types)
363 |   - label: Prop validate Array
364 |     frameworks:
365 |       react:
366 |         js: "{myArr: React.PropTypes.array}"
367 |       angular2:
368 |         js: "@Input() myArr: Array;"
369 |       angular1:
370 |         comment: (no prop types)
371 |       ember:
372 |         js: "{myArr: PropTypes.array}"
373 |       polymer:
374 |         js: "{myArr: Array}"
375 |       vue:
376 |         js: "{myArr: Array}"
377 |       riot:
378 |         comment: (no prop types)
379 |   - label: Prop validate Boolean
380 |     frameworks:
381 |       react:
382 |         js: "{myBool: React.PropTypes.bool}"
383 |       angular2:
384 |         js: "@Input() myBool: boolean;"
385 |       angular1:
386 |         comment: (no prop types)
387 |       ember:
388 |         js: "{myBool: PropTypes.bool}"
389 |       polymer:
390 |         js: "{myBool: Boolean}"
391 |       vue:
392 |         js: "{myBool: Boolean}"
393 |       riot:
394 |         comment: (no prop types)
395 |   - label: Prop validate Function
396 |     frameworks:
397 |       react:
398 |         js: "{myFunc: React.PropTypes.func}"
399 |       angular2:
400 |         js: "@Input() myFunc: Function;"
401 |       angular1:
402 |         comment: (no prop types)
403 |       ember:
404 |         js: "{myFunc: PropTypes.func}"
405 |       polymer:
406 |         comment: not supported
407 |       vue:
408 |         comment: not supported
409 |       riot:
410 |         comment: (no prop types)
411 |   - label: Prop validate Object
412 |     frameworks:
413 |       react:
414 |         js: "{myObj: React.PropTypes.object}"
415 |       angular2:
416 |         js: "@Input() myObj: Object;"
417 |       angular1:
418 |         comment: (no prop types)
419 |       ember:
420 |         js: "{myObj: PropTypes.object}"
421 |       polymer:
422 |         js: "{myObj: Object}"
423 |       vue:
424 |         js: "{myObj: Object}"
425 |       riot:
426 |         comment: (no prop types)
427 |   - label: Prop validate union
428 |     frameworks:
429 |       react:
430 |         js: "{myVar: React.PropTypes.oneOfType([\n  React.PropTypes.string, \n  React.PropTypes.number\n])}"
431 |       angular2:
432 |         js: "@Input() myVar: string | number;"
433 |       angular1:
434 |         comment: (no prop types)
435 |       ember:
436 |         js: "{myVar: PropTypes.oneOfType([\n  PropTypes.string, \n  PropTypes.number\n])}"
437 |       polymer:
438 |         comment: not supported
439 |       vue:
440 |         js: "{myVar: [String, Number]}"
441 |       riot:
442 |         comment: (no prop types)
443 |     remarks: |
444 |       - **Angular 2:** [Advanced Types in TypeScript](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
445 | 
446 | - name: Component lifecycle methods
447 |   comparisons:
448 |   - label: Initialized
449 |     frameworks:
450 |       react: componentWillMount
451 |       angular2: ngOnInit
452 |       angular1: $onInit
453 |       ember: init
454 |       polymer: created
455 |       vue: created
456 |       riot: before-mount
457 |     remarks: |
458 |       - **React:** [`componentWillMount`](https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount)
459 |       - **Angular 1:** See [https://docs.angularjs.org/guide/component#component-based-application-architecture](https://docs.angularjs.org/guide/component#component-based-application-architecture).
460 |   - label: DOM Ready
461 |     frameworks:
462 |       react: componentDidMount
463 |       angular2: ngAfterContentInit
464 |       angular1: $postLink
465 |       ember: didInsertElement
466 |       polymer: ready
467 |       vue: ready
468 |       riot: mount
469 |     remarks: |
470 |       - **React:** [`componentDidMount`](https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount)
471 |   - label: On prop change
472 |     frameworks:
473 |       react: willReceiveProps
474 |       angular2: ngOnChanges
475 |       angular1: $onChanges
476 |       ember: didReceiveAttrs
477 |       polymer:
478 |         js: "properties: {\n  foo: {observer: '_fooChanged'}  \n}"
479 |       vue:
480 |         comment: none
481 |       riot: update
482 |     remarks: |
483 |       - **React:** [`willReceiveProps`](https://facebook.github.io/react/docs/component-specs.html#mounting-willreceiveprops)
484 |   - label: Component updated
485 |     frameworks:
486 |       react: componentDidUpdate
487 |       angular2:
488 |         comment: none
489 |       angular1:
490 |         comment: none
491 |       ember: didUpdateAttrs
492 |       polymer:
493 |         comment: none
494 |       vue:
495 |         comment: none
496 |       riot: updated
497 |     remarks: |
498 |       - **React:** [`componentDidUpdate`](https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidupdate)
499 |   - label: Before destroy
500 |     frameworks:
501 |       react: componentWillUnmount
502 |       angular2:
503 |         comment: none
504 |       angular1:
505 |         comment: none
506 |       ember: willDestroyElement
507 |       polymer: detached
508 |       vue: beforeDestroy
509 |       riot: before-unmount
510 |     remarks: |
511 |       - **React:** [`componentWillUnmount`](https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillunmount)
512 |   - label: After destroy
513 |     frameworks:
514 |       react:
515 |         comment: none
516 |       angular2: ngOnDestroy
517 |       angular1: $onDestroy
518 |       ember: didDestroyElement
519 |       polymer:
520 |         comment: none
521 |       vue:
522 |         comment: none
523 |       riot: unmount
524 |     remarks: |
525 |       - **React** has no `componentDidUnmount` method. See [ReactClass.js#L274](https://github.com/facebook/react/blob/ba9b985406ff56c2dea192b119328b6096895097/src/isomorphic/classic/class/ReactClass.js#L274).
526 | 


--------------------------------------------------------------------------------
/_data/labels.yml:
--------------------------------------------------------------------------------
1 | - React
2 | - Angular 2
3 | - Angular 1
4 | - Ember
5 | - Polymer
6 | - Vue
7 | - Riot
8 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 8 |     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 9 |     <link rel="stylesheet" href="hyperpolyglot.css">
10 |   </head>
11 |   <body>
12 | 
13 |     <div class="page-content">
14 |       <div class="wrapper">
15 |         {{ content }}
16 |       </div>
17 |     </div>
18 | 
19 |     <script>
20 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
21 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
22 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
23 |       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
24 | 
25 |       ga('create', 'UA-8813662-14', 'auto');
26 |       ga('send', 'pageview');
27 | 
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/browsers.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Browsers
 4 | ---
 5 | 
 6 | # [Browser Hyperpolyglot](http://jeffcarp.github.io/frontend-hyperpolyglot/)
 7 | 
 8 | <table class="wiki-content-table">
 9 |   {% for category in site.data.browsers %}
10 |     {% if category.name %}
11 |     <tr>
12 |       <th colspan="{{ site.data.browserlabels | size | plus: 1 }}" id="{{ category.name | slugify }}"><a href="#{{ category.name | slugify }}-note">{{ category.name }}</a></th>
13 |     </tr>
14 |     {% endif %}
15 |     <tr>
16 |       <th></th>
17 |       {% for label in site.data.browserlabels %}
18 |         <th>{{ label }}</th>
19 |       {% endfor %}
20 |     </tr>
21 |     {% for comparison in category.comparisons %}
22 |       <tr>
23 |         <td id="{{ comparison.label | slugify }}"><a href="#{{ comparison.label | slugify }}-note">{{ comparison.label }}</a></td>
24 |         {% for browser in comparison.browsers %}
25 |           {% if browser[1].link %}
26 |             <td><a href="{{ browser[1].link }}">{{ browser[1].linktext }}</a></td>
27 |           {% else %}
28 |             <td>{{ browser[1] }}</td>
29 |           {% endif %}
30 |         {% endfor %}
31 |       </tr>
32 |     {% endfor %}
33 |   {% endfor %}
34 | </table>
35 | 
36 | <div id="remarks">
37 | {% for category in site.data.browsers %}
38 |   <h1 id="{{ category.name | slugify }}-note"><a href="#{{ category.name | slugify }}">{{ category.name }}</a></h1>
39 |   {% for comparison in category.comparisons %}
40 |   {% if comparison.remarks %}
41 |   <h2 id="{{ comparison.label | slugify }}-note"><a href="#{{ comparison.label | slugify }}">{{ comparison.label }}</a></h2>
42 |   {{ comparison.remarks | markdownify }}
43 |   {% endif %}
44 |   {% endfor %}
45 | {% endfor %}
46 | </div>
47 | 


--------------------------------------------------------------------------------
/hyperpolyglot.css:
--------------------------------------------------------------------------------
  1 | /* base.css */
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 | }
  7 | body{
  8 | 	margin: 0px;
  9 | 	padding: 0px;
 10 | }
 11 | 
 12 | body
 13 | {
 14 | 	font-family: verdana,arial,helvetica,sans-serif;
 15 | 	font-size: 0.82em;
 16 |         padding: 1.5em;
 17 | }
 18 | 
 19 | h1,h2,h3,h4,h5,h6{
 20 | 	font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
 21 | }
 22 | 
 23 | h1{
 24 | 	font-size: 190%;
 25 | 	font-weight: normal;
 26 |         padding-bottom: 1em;
 27 | }
 28 | h2{
 29 | 	font-weight: normal;
 30 | 	font-size: 150%;
 31 | }
 32 | h3{
 33 | 	font-weight: bold;
 34 | 	font-size: 130%;
 35 | }
 36 | h4{
 37 | 	font-weight: bold;
 38 | 	font-size: 120%;
 39 | }
 40 | h5 {
 41 | 	font-weight: bold;
 42 | 	font-size: 100%;
 43 | }
 44 | h6 {
 45 | 	font-weight: bold;
 46 | 	font-size: 90%;
 47 | }
 48 | 
 49 | img{
 50 | 	border-width: 0px;
 51 | }
 52 | 
 53 | blockquote{
 54 | 	border: 1px dashed #999;
 55 | 	padding: 0 1em;
 56 | 	background-color: #f4f4f4;
 57 | }
 58 | 
 59 | table {
 60 | 	empty-cells: show;
 61 | }
 62 | td {
 63 | 	text-align: left;
 64 | }
 65 | 
 66 | a{
 67 | 	color: #00A;
 68 |        -webkit-transition: background-color 0.3s ease;
 69 |        transition: background-color 0.3s ease;
 70 | }
 71 | 
 72 | a:hover{
 73 | 	background-color: #EEE;
 74 | }
 75 | 
 76 | h1 a{
 77 | 	text-decoration: none;
 78 | }
 79 | 
 80 | body.wait, body.wait *{
 81 | 	cursor: wait;
 82 | }
 83 | 
 84 | form{
 85 | 	margin: 0; padding: 0;
 86 | }
 87 | 
 88 | a.newpage{
 89 | 	color: #933;
 90 | }
 91 | 
 92 | #container-wrap-wrap {
 93 | 	position: relative;
 94 | }
 95 | 
 96 | #page-content{
 97 | 	
 98 | }
 99 | 
100 | #container {
101 | 	margin: 0;
102 | 	padding: 0;
103 | }
104 | 
105 | #header {
106 | 	position: relative;
107 | 	z-index: 30;
108 | 	height: 7em;
109 | }
110 | 
111 | #header h1{
112 | 	margin: 0;
113 | 	padding: 0;
114 | }
115 | #header h2{
116 | 	margin: 0;
117 | 	padding: 0;
118 | }
119 | 
120 | #content-wrap{
121 | 	padding:0; margin:0;
122 | }
123 | 
124 | /* fixes the peekaboo bug in most of the themes (ie6, ie7)*/
125 | #content-wrap {
126 | 	_height: 1%;
127 | 	min-height: 1px;
128 | }
129 | 
130 | #page-title{
131 | 	margin: 0 0 0.5em 0;
132 | 	padding-top: 0.5em; /* Firefox bug? */
133 | 	font-size: 190%;
134 | 	border-bottom: 1px solid #666;
135 | }
136 | 
137 | #main-content{
138 | 	margin-left: 17em;
139 | 	padding: 0 1em;
140 | }
141 | 
142 | #license-area {
143 | 	padding: 0.5em 0;
144 | 	color: #555;
145 | 	text-align: center;
146 | }
147 | 
148 | table {
149 |         font-size: 12px;
150 | 	border: 1px solid #888;
151 | 	border-collapse: collapse;
152 | 	border-spacing: 0;
153 | 	margin: 0.5em auto;
154 | }
155 | table td{
156 | 	border: 1px solid #888;
157 | 	padding: 0.3em 0.7em;
158 | }
159 | table td.faded {
160 |   color: #aaa;
161 | }
162 | table th{
163 | 	border: 0px solid #888;
164 | 	padding: 0.3em 0.7em;
165 | 	background-color: #EEE;
166 | }
167 | 
168 | tt{
169 | 	font-family: 'Andale Mono', 'Courier New', Courier, monospace; 
170 | 	font-size: 98%;
171 | }
172 | 
173 | 
174 | pre{
175 | 	font-family: 'Andale Mono', 'Courier New', Courier, monospace;
176 | }
177 | 
178 | p {
179 |         margin-bottom: 1em;
180 | }
181 | 
182 | .code { 
183 | 	border: 1px dashed #888;
184 | 	background-color: #EEE;
185 | 	font-family: 'Andale Mono', 'Courier New', Courier, monospace;
186 | 	padding: 0 1em;
187 | 	margin: 0.4em 0;
188 | 	overflow: auto;
189 | }
190 | 
191 | code {
192 | 	font-family: 'Andale Mono', 'Courier New', Courier, monospace;
193 | }
194 | 
195 | .math-equation{
196 | 	text-align: center;
197 | 	padding: 0.5em 0;
198 | 	height: 1%; /* for IE to blink ;-) */
199 | }
200 | 
201 | #MathJax_Message {
202 |     display: none !important;
203 | }
204 | 
205 | .math-inline span.merror {
206 |     color: red !important;
207 | }
208 | 
209 | a.inline-math-error {
210 |     padding: 0 0.5em;
211 |     font-weight: bold;
212 | }
213 | 
214 | a.math-equation-error {
215 |     padding: 0 2em;
216 |     font-weight: bold;
217 | }
218 | 
219 | .wiki-parse-error{
220 | 	color: red;
221 | 	padding: 0.2em 0;
222 | }
223 | 
224 | hr{
225 |  	margin: 1em 2em;
226 | 	padding: 0;
227 | 	height: 1px;
228 | 	border: none;
229 | 	/*color: #555545;*/
230 | 	color: #DDD;
231 | 	background-color: #AAA;
232 | 	/*background-color: #555545;*/
233 | }
234 | 
235 | * html hr {
236 | 	margin: 2px 2em;
237 | }
238 | 
239 | input {
240 | 	font-size: 100%; /* ie6 sucks so much... */
241 | }
242 | 
243 | div.buttons{
244 | 	text-align: center;
245 | 	padding: 1em 0;
246 | }
247 | 
248 | div.buttons.alignleft{
249 | 	text-align: left; 
250 | }
251 | 
252 | div.buttons input, input.button, button, file, a.button{
253 | 	margin: 0 2px;
254 | 	padding: 0px 0.5em;
255 | 	text-decoration: none;
256 | 	background-color: #F4F4F4;
257 | 	border: 1px solid #AAA;
258 | 	color: #000;
259 | }
260 | div.buttons input:hover, input.button:hover, button:hover,  a.button:hover{
261 | 	background-color: #DDD;
262 | 	color: #000;
263 | }
264 | 
265 | input.button.disabled, div.buttons input.disabled{
266 | 	background-color: #F7F7F7;
267 | 	color: #BBB;
268 | }
269 | input.button.disabled:hover, div.buttons input.disabled:hover{
270 | 	background-color: #F7F7F7;
271 | 	color: #BBB;
272 | }
273 | 
274 | input.checkbox{
275 | 	background-color: #FFF;
276 | 	color: #000;
277 | }
278 | 
279 | input.text{
280 | 	border: 1px solid #777;
281 | 	margin: 0 1px;
282 | 	padding: 1px 2px;
283 | 	background-color: #FFF;
284 | 	color: #000;
285 | }
286 | 
287 | input.text.invalid{
288 | 	border-color: red;
289 | }
290 | 
291 | textarea{
292 | 	font-family: verdana,arial,helvetica,sans-serif;
293 | 	padding: 2px;
294 | 	font-size: 100%;
295 | 	border: 1px solid #777;
296 | 	background-color: #FFF;
297 | 	color: #000;
298 | }
299 | 
300 | .hl-default {
301 |     color: #000;
302 | }
303 | .hl-code {
304 |     color: #000;
305 | }
306 | .hl-brackets {
307 |     color: #000;
308 | }
309 | .hl-comment {
310 |     color: #494;
311 | }
312 | .hl-quotes {
313 |     color: #009;
314 | }
315 | .hl-string {
316 |     color: #009;
317 | }
318 | .hl-identifier {
319 |     color: #000;
320 | }
321 | .hl-builtin {
322 |     color: Teal;
323 | }
324 | .hl-reserved {
325 |     color: #55D;
326 | }
327 | .hl-inlinedoc {
328 |     color: Blue;
329 | }
330 | .hl-var {
331 |     color: #494;
332 | }
333 | .hl-url {
334 |     color: Blue;
335 | }
336 | .hl-special {
337 |     color: Navy;
338 | 	font-weight: bold;
339 | }
340 | .hl-number {
341 |     color: Maroon;
342 | }
343 | .hl-inlinetags {
344 |     color: #949;
345 | 	font-weight: bold;
346 | }
347 | .hl-main { 
348 |    /* background-color: White;*/
349 | }
350 | .hl-gutter {
351 |     background-color: #999999;
352 |     color: White
353 | }
354 | .hl-table {
355 |   
356 | }
357 | 
358 | /* clean.css */
359 | 
360 | h1{
361 | 	border-bottom: 1px solid #CCC;
362 | }
363 | 
364 | #container {
365 | 	margin: 0 20px;
366 | }
367 | 
368 | #header {
369 | 	margin: 10px 0 10px 0px; 
370 | 	height: 5em;
371 | 
372 | 	background-color: #DDD;
373 | }
374 | 
375 | #header h1{
376 | 	font-size: 170%;
377 | 	border: none;
378 | 	font-weight: bold;
379 | 	color: #000;
380 | 	margin: 0;
381 | 	padding: 4px 10px 0 10px;
382 | }
383 | #header h2{
384 | 	font-size: 140%;
385 | 	color: #555;
386 | 	padding: 4px 10px;
387 | }
388 | 
389 | /* local.css */
390 | 
391 | #header {
392 | height: 2em;
393 | background-color: #FFFFFF;
394 | }
395 | 
396 | #header h1 {
397 | font-size: 190%;
398 | font-weight: normal;
399 | padding-left: 0px;
400 | }
401 | 
402 | h1 {
403 | border-bottom: none;
404 | }
405 | 
406 | #page-title {
407 | border-bottom: none;
408 | }
409 | 
410 | #main-content {
411 | margin-left: 0em;
412 | padding: 2px;
413 | }
414 | 
415 | #search-top-box {
416 | display: none;
417 | }
418 | 
419 | #page-content p, #page-content .code, #page-content h1, #page-content ul, .math-equation {
420 | width: 700px;
421 | }
422 | 
423 | table {
424 |   margin-left: 0em;
425 |   margin-bottom: 5em;
426 | }
427 | 
428 | #page-content blockquote {
429 | width: 650px;
430 | }
431 | 
432 | tt {
433 | color: #006060;
434 | padding-left: 2px;
435 | padding-right: 1px;
436 | }
437 | 
438 | table  *, code, table tr td span.fixed, table tr td span.fixed * {
439 | font-family: consolas, inconsolata, andale mono, monospace;
440 | }
441 | 
442 | *, table.wiki-content-table th *,  table.wiki-content-table td:first-child *, table.wiki-content-table td:first-child {
443 | font-family: lucida grande, helvetica, arial, san-serif;
444 | }
445 | 
446 | h1 span, div#page-title {
447 | font-family: helvetica, arial, san-serif;
448 | }
449 | 
450 | .highlight .hll { background-color: #ffffcc }
451 | .highlight .c { color: #008800; font-style: italic } /* Comment */
452 | /* .highlight .err { border: 1px solid #FF0000 } /* Error */
453 | .highlight .k { color: #AA22FF; font-weight: bold } /* Keyword */
454 | .highlight .o { color: #666666 } /* Operator */
455 | .highlight .cm { color: #008800; font-style: italic } /* Comment.Multiline */
456 | .highlight .cp { color: #008800 } /* Comment.Preproc */
457 | .highlight .c1 { color: #008800; font-style: italic } /* Comment.Single */
458 | .highlight .cs { color: #008800; font-weight: bold } /* Comment.Special */
459 | .highlight .gd { color: #A00000 } /* Generic.Deleted */
460 | .highlight .ge { font-style: italic } /* Generic.Emph */
461 | .highlight .gr { color: #FF0000 } /* Generic.Error */
462 | .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
463 | .highlight .gi { color: #00A000 } /* Generic.Inserted */
464 | .highlight .go { color: #808080 } /* Generic.Output */
465 | .highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
466 | .highlight .gs { font-weight: bold } /* Generic.Strong */
467 | .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
468 | .highlight .gt { color: #0040D0 } /* Generic.Traceback */
469 | .highlight .kc { color: #AA22FF; font-weight: bold } /* Keyword.Constant */
470 | .highlight .kd { color: #AA22FF; font-weight: bold } /* Keyword.Declaration */
471 | .highlight .kn { color: #AA22FF; font-weight: bold } /* Keyword.Namespace */
472 | .highlight .kp { color: #AA22FF } /* Keyword.Pseudo */
473 | .highlight .kr { color: #AA22FF; font-weight: bold } /* Keyword.Reserved */
474 | .highlight .kt { color: #00BB00; font-weight: bold } /* Keyword.Type */
475 | .highlight .m { color: #666666 } /* Literal.Number */
476 | .highlight .s { color: #BB4444 } /* Literal.String */
477 | .highlight .na { color: #BB4444 } /* Name.Attribute */
478 | .highlight .nb { color: #AA22FF } /* Name.Builtin */
479 | .highlight .nc { color: #0000FF } /* Name.Class */
480 | .highlight .no { color: #880000 } /* Name.Constant */
481 | .highlight .nd { color: #AA22FF } /* Name.Decorator */
482 | .highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
483 | .highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
484 | .highlight .nf { color: #00A000 } /* Name.Function */
485 | .highlight .nl { color: #A0A000 } /* Name.Label */
486 | .highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
487 | .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
488 | .highlight .nv { color: #B8860B } /* Name.Variable */
489 | .highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
490 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
491 | .highlight .mf { color: #666666 } /* Literal.Number.Float */
492 | .highlight .mh { color: #666666 } /* Literal.Number.Hex */
493 | .highlight .mi { color: #666666 } /* Literal.Number.Integer */
494 | .highlight .mo { color: #666666 } /* Literal.Number.Oct */
495 | .highlight .sb { color: #BB4444 } /* Literal.String.Backtick */
496 | .highlight .sc { color: #BB4444 } /* Literal.String.Char */
497 | .highlight .sd { color: #BB4444; font-style: italic } /* Literal.String.Doc */
498 | .highlight .s2 { color: #BB4444 } /* Literal.String.Double */
499 | .highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
500 | .highlight .sh { color: #BB4444 } /* Literal.String.Heredoc */
501 | .highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
502 | .highlight .sx { color: #008000 } /* Literal.String.Other */
503 | .highlight .sr { color: #BB6688 } /* Literal.String.Regex */
504 | .highlight .s1 { color: #BB4444 } /* Literal.String.Single */
505 | .highlight .ss { color: #B8860B } /* Literal.String.Symbol */
506 | .highlight .bp { color: #AA22FF } /* Name.Builtin.Pseudo */
507 | .highlight .vc { color: #B8860B } /* Name.Variable.Class */
508 | .highlight .vg { color: #B8860B } /* Name.Variable.Global */
509 | .highlight .vi { color: #B8860B } /* Name.Variable.Instance */
510 | .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
511 | 
512 | #remarks {
513 |   max-width: 700px;
514 | }
515 | #remarks h1 {
516 |   margin-top: 1em;
517 | }
518 | #remarks h2 {
519 |   margin-top: 1em;
520 |   margin-bottom: 1em;
521 | }
522 | #remarks pre {
523 |   margin-bottom: 1em;
524 | }
525 | #remarks ul {
526 |   margin-left: 1.2em;
527 | }
528 | 


--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Front-end Hyperpolyglot
 4 | ---
 5 | 
 6 | # [Front-end Hyperpolyglot](http://jeffcarp.github.io/frontend-hyperpolyglot/)
 7 | 
 8 | _Inspired by [hyperpolyglot.org](http://hyperpolyglot.org/), a comparison of similar features in popular JavaScript frameworks._
 9 | 
10 | <p>Any contributors who are more familiar with these frameworks would be massively appreciated. The source is on <a href="https://github.com/jeffcarp/frontend-hyperpolyglot">GitHub</a>.</p>
11 | 
12 | <table class="wiki-content-table">
13 |   {% for category in site.data.frameworks %}
14 |     {% if category.name %}
15 |     <tr>
16 |       <th colspan="{{ site.data.labels | size | plus: 1 }}" id="{{ category.name | slugify }}"><a href="#{{ category.name | slugify }}-note">{{ category.name }}</a></th>
17 |     </tr>
18 |     {% endif %}
19 |     <tr>
20 |       <th></th>
21 |       {% for label in site.data.labels %}
22 |         <th>{{ label }}</th>
23 |       {% endfor %}
24 |     </tr>
25 |     {% for comparison in category.comparisons %}
26 |       <tr>
27 |         <td id="{{ comparison.label | slugify }}"><a href="#{{ comparison.label | slugify }}-note">{{ comparison.label }}</a></td>
28 |         {% for framework in comparison.frameworks %}
29 |           {% if framework[1].js %}
30 |             <td>{% highlight js %}{{ framework[1].js }}{% endhighlight %}</td>
31 |           {% elsif framework[1].comment %}
32 |             <td class="faded">{{ framework[1].comment }}</td>
33 |           {% else %}
34 |             <td>{% highlight html %}{{ framework[1] }}{% endhighlight %}</td>
35 |           {% endif %}
36 |         {% endfor %}
37 |       </tr>
38 |     {% endfor %}
39 |   {% endfor %}
40 | </table>
41 | 
42 | <div id="remarks">
43 | 
44 | {% for category in site.data.frameworks %}
45 |   <h1 id="{{ category.name | slugify }}-note"><a href="#{{ category.name | slugify }}">{{ category.name }}</a></h1>
46 |   {% for comparison in category.comparisons %}
47 |   {% if comparison.remarks %}
48 |   <h2 id="{{ comparison.label | slugify }}-note"><a href="#{{ comparison.label | slugify }}">{{ comparison.label }}</a></h2>
49 |   {{ comparison.remarks | markdownify }}
50 |   {% endif %}
51 |   {% endfor %}
52 | {% endfor %}
53 | </div>
54 | 


--------------------------------------------------------------------------------