Skip to content

Instantly share code, notes, and snippets.

View patrick-steele-idem's full-sized avatar

Patrick Steele-Idem patrick-steele-idem

View GitHub Profile
@patrick-steele-idem
patrick-steele-idem / gist:3034264
Created July 2, 2012 16:58
Template comparison
-----------------
Option A:
Hello {{name}}!
{{#hasItems}}
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
@patrick-steele-idem
patrick-steele-idem / gist:3125854
Created July 16, 2012 23:35
"Logic-less" versus "More logic"
<!-- "LOGIC-LESS": -->
{{#cartEmpty}}
<div>
Your shopping cart is empty!
</div>
{{/cartEmpty}}
{{#cartNotEmpty}}
<ul>
{{cartItems}}
@patrick-steele-idem
patrick-steele-idem / gist:3383452
Created August 17, 2012 23:29
RaptorJS syntax
raptor.define(
'my.module',
{
hello: "World"
});
raptor.define(
'my.module',
function() {
return {
@patrick-steele-idem
patrick-steele-idem / settings-data.js
Created October 27, 2012 22:24
Raptor Templates (Looping over properties)
{
"settings" : {
"foo" : "low",
"bar" : "high",
"baz" : "low"
}
}
@patrick-steele-idem
patrick-steele-idem / new-package.json
Created June 18, 2013 23:26
RaptorJS package.json with include pattern and extension pattern
{
"raptor": {
"dependencies": [
{
"include-pattern": "\\.*",
"extension-pattern": "_([A-Za-z0-9]+)\\."
}
]
}
}
@patrick-steele-idem
patrick-steele-idem / template.dot.js
Created July 28, 2015 14:19
Compiled template output (Marko FTW!)
module.exports=function anonymous(it
/**/) {
var encodeHTML = typeof _encodeHTML !== 'undefined' ? _encodeHTML : (function (doNotSkipEncoded) {
var encodeHTMLRules = { "&": "&#38;", "<": "&#60;", ">": "&#62;", '"': "&#34;", "'": "&#39;", "/": "&#47;" },
matchHTML = doNotSkipEncoded ? /[&<>"'\/]/g : /&(?!#?\w+;)|<|>|"|'|\//g;
return function(code) {
return code ? code.toString().replace(matchHTML, function(m) {return encodeHTMLRules[m] || m;}) : "";
};
}());var out='Hello '+encodeHTML(it.name)+'! ';if(it.colors && it.colors.length){out+=' <ul> ';var arr1=it.colors;if(arr1){var color,i1=-1,l1=arr1.length-1;while(i1<l1){color=arr1[i1+=1];out+=' <li class="color">'+encodeHTML(color)+'</li> ';} } out+='</ul>';}else{out+='<div> No colors!</div>';}return out;
}
@patrick-steele-idem
patrick-steele-idem / README.md
Created January 20, 2017 03:47
UI library sizes

Below are the sizes of various UI libraries. The JavaScript bundles for each library includes the minimal code to render a very basic UI component in the browser. That is, the bundle includes the UI library and the code for a single UI component. The JavaScript bundle is generated using Rollup with NODE_ENV=production and all helpful optimizations are used to reduce the code size (envify, uglifyjs, minprops, etc.).

[marko]
  gzip:  11,802 bytes
   min:  32,289 bytes

[preact]
  gzip:   4,401 bytes
 min: 10,272 bytes
@patrick-steele-idem
patrick-steele-idem / README.md
Last active May 10, 2021 03:52
Syntax: Marko vs Vue

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
  message-count=30