ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
cheatsheets/data/search-index.json

3910 lines
1.6 MiB
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

[
{
"id": "101",
"title": 101,
"url": "/101",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-js\">const isObject = require('101/isObject')\nisObject({}) // → true\n</code></pre>\n\n<p>Every function is exposed as a module.</p>\n\n<p>See: <a href=\"https://github.com/tjmehta/101\">101</a></p>\n\n<h3 id=\"type-checking\">Type checking</h3>\n\n<pre><code class=\"language-js\">isObject({})\nisString('str')\nisRegExp(/regexp/)\nisBoolean(true)\nisEmpty({})\nisfunction(x =&gt; x)\nisInteger(10)\nisNumber(10.1)\ninstanceOf(obj, 'string')\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"objects\">Objects</h2>\n\n<h3 class=\"-prime\" id=\"example\">Example</h3>\n\n<pre><code class=\"language-js\">let obj = {}\n</code></pre>\n\n<h4 id=\"update\">Update</h4>\n\n<pre><code class=\"language-js\">obj = put(obj, 'user.name', 'John')\n// → { user: { name: 'John' } }\n</code></pre>\n\n<h4 id=\"read\">Read</h4>\n\n<pre><code class=\"language-js\">pluck(name, 'user.name')\n// → 'John'\n</code></pre>\n\n<h4 id=\"delete\">Delete</h4>\n\n<pre><code class=\"language-js\">obj = del(obj, 'user')\n// → { }\n</code></pre>\n\n<h3 id=\"getting\">Getting</h3>\n\n<pre><code class=\"language-js\">pluck(state, 'user.profile.name')\n</code></pre>\n\n<pre><code class=\"language-js\">pick(state, ['user', 'ui'])\npick(state, /^_/)\n</code></pre>\n\n<p><code>pluck</code> returns values, <code>pick</code> returns subsets of objects.</p>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#pluck\">pluck</a>,\n<a href=\"https://github.com/tjmehta/101#pick\">pick</a></p>\n\n<h3 id=\"setting\">Setting</h3>\n\n<pre><code class=\"language-js\">put(state, 'user.profile.name', 'john')\n</code></pre>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#put\">put</a></p>\n\n<h3 id=\"deleting\">Deleting</h3>\n\n<pre><code class=\"language-js\">del(state, 'user.profile')\nomit(state, ['user', 'data'])\n</code></pre>\n\n<p><code>omit</code> is like <code>del</code>, but supports multiple keys to be deleted.</p>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#omit\">omit</a>,\n<a href=\"https://github.com/tjmehta/101#del\">del</a></p>\n\n<h3 id=\"keypath-check\">Keypath check</h3>\n\n<pre><code class=\"language-js\">hasKeypaths(state, ['user'])\nhasKeypaths(state, { 'user.profile.name': 'john' })\n</code></pre>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#haskeypaths\">hasKeypaths</a></p>\n\n<h3 id=\"get-values\">Get values</h3>\n\n<pre><code class=\"language-js\">values(state)\n</code></pre>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 id=\"simple-functions\">Simple functions</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>and(x, y)</code></td>\n <td><code>x &amp;&amp; y</code></td>\n </tr>\n <tr>\n <td><code>or(x, y)</code></td>\n <td><code>x || y</code></td>\n </tr>\n <tr>\n <td><code>xor(x, y)</code></td>\n <td><code>!(!x &amp;&amp; !y) &amp;&amp; !(x &amp;&amp; y)</code></td>\n </tr>\n <tr>\n <td><code>equals(x, y)</code></td>\n <td><code>x === y</code></td>\n </tr>\n <tr>\n <td><code>exists(x)</code></td>\n <td><code>!!x</code></td>\n </tr>\n <tr>\n <td><code>not(x)</code></td>\n <td><code>!x</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Useful for function composition.</p>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#and\">and</a>,\n<a href=\"https://github.com/tjmehta/101#equals\">equals</a>,\n<a href=\"https://github.com/tjmehta/101#exists\">exists</a></p>\n\n<h3 id=\"composition\">Composition</h3>\n\n<pre><code class=\"language-js\">compose(f, g) // x =&gt; f(g(x))\ncurry(f) // x =&gt; y =&gt; f(x, y)\nflip(f) // f(x, y) --&gt; f(y, x)\n</code></pre>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#compose\">compose</a>,\n<a href=\"https://github.com/tjmehta/101#curry\">curry</a>,\n<a href=\"https://github.com/tjmehta/101#flip\">flip</a></p>\n\n<h3 id=\"andor\">And/or</h3>\n\n<pre><code class=\"language-js\">passAll(f, g) // x =&gt; f(x) &amp;&amp; g(x)\npassAny(f, g) // x =&gt; f(x) || g(x)\n</code></pre>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#passall\">passAll</a>,\n<a href=\"https://github.com/tjmehta/101#passany\">passAny</a></p>\n\n<h3 id=\"converge\">Converge</h3>\n\n<pre><code class=\"language-js\">converge(and, [pluck('a'), pluck('b')])(x)\n</code></pre>\n\n<pre><code class=\"language-js\">// → and(pluck(x, 'a'), pluck(x, 'b'))\n</code></pre>\n\n<p>See:\n<a href=\"https://github.com/tjmehta/101#converge\">converge</a></p>\n\n<h2 id=\"arrays\">Arrays</h2>\n\n<h3 id=\"finding\">Finding</h3>\n\n<pre><code class=\"language-js\">find(list, x =&gt; x.y === 2)\nfindIndex(list, x =&gt; ...)\nincludes(list, 'item')\nlast(list)\n</code></pre>\n\n<pre><code class=\"language-js\">find(list, hasProps('id'))\n</code></pre>\n\n<h3 id=\"grouping\">Grouping</h3>\n\n<pre><code class=\"language-js\">groupBy(list, 'id')\nindexBy(list, 'id')\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"function-composition\">Function composition</h3>\n\n<pre><code class=\"language-js\">isFloat = passAll(isNumber, compose(isInteger, not))\n// n =&gt; isNumber(n) &amp;&amp; not(isInteger(n))\n</code></pre>\n\n<pre><code class=\"language-js\">function doStuff (object, options) { ... }\n\ndoStuffForce = curry(flip(doStuff))({ force: true })\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li><a href=\"https://github.com/tjmehta/101\">https://github.com/tjmehta/101</a></li>\n</ul>",
"intro_html": "<p><a href=\"https://www.npmjs.com/package/101\">101</a> is a JavaScript library for dealing with immutable data in a functional manner.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-21"
},{
"id": "absinthe",
"title": "Absinthe",
"url": "/absinthe",
"category": "Hidden",
"keywords": null,
"content_html": "<h2 id=\"introduction\">Introduction</h2>\n\n<h3 id=\"concepts\">Concepts</h3>\n\n<ul>\n <li><code>Schema</code> - The root. Defines what queries you can do, and what types they return.</li>\n <li><code>Resolver</code> - Functions that return data.</li>\n <li><code>Type</code> - A type definition describing the shape of the data you’ll return.</li>\n</ul>\n\n<h3 id=\"plug\">Plug</h3>\n\n<h4 id=\"webrouterex\">web/router.ex</h4>\n\n<pre data-line=\"4,5\"><code class=\"language-elixir\">defmodule Blog.Web.Router do\n use Phoenix.Router\n\n forward \"/\", Absinthe.Plug,\n schema: Blog.Schema\nend\n</code></pre>\n\n<p>Absinthe is a Plug, and you pass it one <strong>Schema</strong>.</p>\n\n<p>See: <a href=\"http://absinthe-graphql.org/tutorial/our-first-query/\">Our first query</a></p>\n\n<h2 class=\"-three-column\" id=\"main-concepts\">Main concepts</h2>\n\n<h3 id=\"schema\">Schema</h3>\n\n<h4 id=\"webschemaex\">web/schema.ex</h4>\n\n<pre data-line=\"5,6,7,8,9,10\"><code class=\"language-elixir\">defmodule Blog.Schema do\n use Absinthe.Schema\n import_types Blog.Schema.Types\n\n query do\n @desc \"Get a list of blog posts\"\n field :posts, list_of(:post) do\n resolve &amp;Blog.PostResolver.all/2\n end\n end\nend\n</code></pre>\n\n<p>This schema will account for <code>{ posts { ··· } }</code>. It returns a <strong>Type</strong> of <code>:post</code>, and delegates to a <strong>Resolver</strong>.</p>\n\n<h3 id=\"resolver\">Resolver</h3>\n\n<h4 id=\"webresolverspost_resolverex\">web/resolvers/post_resolver.ex</h4>\n\n<pre data-line=\"3\"><code class=\"language-elixir\">defmodule Blog.PostResolver do\n def all(_args, _info) do\n {:ok, Blog.Repo.all(Blog.Post)}\n end\nend\n</code></pre>\n\n<p>This is the function that the schema delegated the <code>posts</code> query to.</p>\n\n<h3 id=\"type\">Type</h3>\n\n<h4 id=\"webschematypesex\">web/schema/types.ex</h4>\n\n<pre data-line=\"4,5,6,7,8,9\"><code class=\"language-elixir\">defmodule Blog.Schema.Types do\n use Absinthe.Schema.Notation\n\n @desc \"A blog post\"\n object :post do\n field :id, :id\n field :title, :string\n field :body, :string\n end\nend\n</code></pre>\n\n<p>This defines a type <code>:post</code>, which is used by the resolver.</p>\n\n<h2 id=\"schema-1\">Schema</h2>\n\n<h3 id=\"query-arguments\">Query arguments</h3>\n\n<h4 id=\"graphql-query\">GraphQL query</h4>\n\n<pre><code>{ user(id: \"1\") { ··· } }\n</code></pre>\n\n<h4 id=\"webschemaex-1\">web/schema.ex</h4>\n\n<pre data-line=\"3\"><code class=\"language-elixir\">query do\n field :user, type: :user do\n arg :id, non_null(:id)\n resolve &amp;Blog.UserResolver.find/2\n end\nend\n</code></pre>\n\n<h4 id=\"resolver-1\">Resolver</h4>\n\n<pre data-line=\"1\"><code class=\"language-elixir\">def find(%{id: id} = args, _info) do\n ···\nend\n</code></pre>\n\n<p>See: <a href=\"http://absinthe-graphql.org/tutorial/query-arguments/\">Query arguments</a></p>\n\n<h3 id=\"mutations\">Mutations</h3>\n\n<h4 id=\"graphql-query-1\">GraphQL query</h4>\n\n<pre><code>{\n mutation CreatePost {\n post(title: \"Hello\") { id }\n }\n}\n</code></pre>\n\n<h4 id=\"webschemaex-2\">web/schema.ex</h4>\n\n<pre data-line=\"1\"><code class=\"language-elixir\">mutation do\n @desc \"Create a post\"\n field :post, type: :post do\n arg :title, non_null(:string)\n resolve &amp;Blog.PostResolver.create/2\n end\nend\n</code></pre>\n\n<p>See: <a href=\"http://absinthe-graphql.org/tutorial/mutations/\">Mutations</a></p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://absinthe-graphql.org/\">Absinthe website</a> <em>(absinthe-graphql.org)</em></li>\n <li><a href=\"./graphql\">GraphQL cheatsheet</a> <em>(devhints.io)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://absinthe-graphql.org/\">Absinthe</a> allows you to write GraphQL servers in Elixir.</p>",
"description_html": "",
"tags": ["WIP"],
"updated": "2017-10-10"
},{
"id": "activeadmin",
"title": "ActiveAdmin",
"url": "/activeadmin",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"listing-scopes\">Listing scopes</h3>\n\n<p class=\"-setup\">Allows you to filter listings by a certain scope.</p>\n\n<pre><code class=\"language-ruby\">scope :draft\nscope :for_approval\n</code></pre>\n\n<pre><code class=\"language-ruby\">scope :public, if: -&gt;{ current_admin_user.can?(...) }\nscope \"Unapproved\", :pending\nscope(\"Published\") { |books| books.where(:published: true) }\n</code></pre>\n\n<h3 id=\"sidebar-filters\">Sidebar filters</h3>\n\n<pre><code class=\"language-ruby\">filter :email\nfilter :username\n</code></pre>\n\n<h3 id=\"custom-actions\">Custom actions</h3>\n\n<p class=\"-setup\">You can define custom actions for models.</p>\n\n<pre><code class=\"language-ruby\">before_filter only: [:show, :edit, :publish] do\n @post = Post.find(params[:id])\nend\n</code></pre>\n\n<h4 id=\"make-the-route\">Make the route</h4>\n\n<pre><code class=\"language-ruby\">member_action :publish, method: :put do\n @post.publish!\n redirect_to admin_posts_path, notice: \"The post '#{@post}' has been published!\"\nend\n</code></pre>\n\n<h4 id=\"link-it-in-the-index\">Link it in the index</h4>\n\n<pre><code class=\"language-ruby\">index do\n column do |post|\n link_to 'Publish', publish_admin_post_path(post), method: :put\n end\nend\n</code></pre>\n\n<h4 id=\"and-link-it-in-showedit\">And link it in show/edit</h4>\n\n<pre><code class=\"language-ruby\">action_item only: [:edit, :show] do\n @post = Post.find(params[:id])\n link_to 'Publish', publish_admin_post_path(post), method: :put\nend\n</code></pre>\n\n<h3 id=\"columns\">Columns</h3>\n\n<pre><code class=\"language-ruby\">column :foo\n</code></pre>\n\n<pre><code class=\"language-ruby\">column :title, sortable: :name do |post|\n strong post.title\nend\n</code></pre>\n\n<h3 id=\"other-helpers\">Other helpers</h3>\n\n<pre><code class=\"language-ruby\">status_tag \"Done\" # Gray\nstatus_tag \"Finished\", :ok # Green\nstatus_tag \"You\", :warn # Orange\nstatus_tag \"Failed\", :error # Red\n</code></pre>\n\n<h3 id=\"disabling-new-post\">Disabling ‘new post’</h3>\n\n<pre><code class=\"language-ruby\">ActiveAdmin.register Post do\n actions :index, :edit\n # or: config.clear_action_items!\nend\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "adb",
"title": "adb (Android Debug Bridge)",
"url": "/adb",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"device-basics\">Device Basics</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>adb devices</code></td>\n <td>Lists connected devices</td>\n </tr>\n <tr>\n <td><code>adb devices -l</code></td>\n <td>Lists connected devices and kind</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>adb root</code></td>\n <td>Restarts adbd with root permissions</td>\n </tr>\n <tr>\n <td><code>adb start-server</code></td>\n <td>Starts the adb server</td>\n </tr>\n <tr>\n <td><code>adb kill-server</code></td>\n <td>Kills the adb server</td>\n </tr>\n <tr>\n <td><code>adb remount</code></td>\n <td>Remounts file system with read/write access</td>\n </tr>\n <tr>\n <td><code>adb reboot</code></td>\n <td>Reboots the device</td>\n </tr>\n <tr>\n <td><code>adb reboot bootloader</code></td>\n <td>Reboots the device into fastboot</td>\n </tr>\n <tr>\n <td><code>adb disable-verity</code></td>\n <td>Reboots the device into fastboot</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>wait-for-device</code> can be specified after <code>adb</code> to ensure that the command will run once the device is connected.</p>\n\n<p><code>-s</code> can be used to send the commands to a specific device when multiple are connected.</p>\n\n<h4 id=\"examples\">Examples</h4>\n\n<pre><code>$ adb wait-for-device devices\n List of devices attached\n somedevice-1234 device\n someotherdevice-1234 device\n</code></pre>\n\n<pre><code>$ adb -s somedevice-1234 root\n</code></pre>\n\n<h3 id=\"logcat\">Logcat</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>adb logcat</code></td>\n <td>Starts printing log messages to stdout</td>\n </tr>\n <tr>\n <td><code>adb logcat -g</code></td>\n <td>Displays current log buffer sizes</td>\n </tr>\n <tr>\n <td><code>adb logcat -G &lt;size&gt;</code></td>\n <td>Sets the buffer size (K or M)</td>\n </tr>\n <tr>\n <td><code>adb logcat -c</code></td>\n <td>Clears the log buffers</td>\n </tr>\n <tr>\n <td><code>adb logcat *:V</code></td>\n <td>Enables ALL log messages (verbose)</td>\n </tr>\n <tr>\n <td><code>adb logcat -f &lt;filename&gt;</code></td>\n <td>Dumps to specified file</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"examples-1\">Examples</h4>\n<pre><code>$ adb logcat -G 16M\n$ adb logcat *:V &gt; output.log\n</code></pre>\n\n<h3 id=\"file-management\">File Management</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>adb push &lt;local&gt; &lt;remote&gt;</code></td>\n <td>Copies the local to the device at remote</td>\n </tr>\n <tr>\n <td><code>adb pull &lt;remote&gt; &lt;local&gt;</code></td>\n <td>Copies the remote from the device to local</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"examples-2\">Examples</h4>\n\n<pre><code>$ echo \"This is a test\" &gt; test.txt\n$ adb push test.txt /sdcard/test.txt\n$ adb pull /sdcard/test.txt pulledTest.txt\n</code></pre>\n\n<h3 id=\"remote-shell\">Remote Shell</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>adb shell &lt;command&gt;</code></td>\n <td>Runs the specified command on device (most unix commands work here)</td>\n </tr>\n <tr>\n <td><code>adb shell wm size</code></td>\n <td>Displays the current screen resolution</td>\n </tr>\n <tr>\n <td><code>adb shell wm size WxH</code></td>\n <td>Sets the resolution to WxH</td>\n </tr>\n <tr>\n <td><code>adb shell pm list packages</code></td>\n <td>Lists all installed packages</td>\n </tr>\n <tr>\n <td><code>adb shell pm list packages -3</code></td>\n <td>Lists all installed 3rd-party packages</td>\n </tr>\n <tr>\n <td><code>adb shell monkey -p app.package.name</code></td>\n <td>Starts the specified package</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-03-06"
},{
"id": "analytics.js",
"title": "Google Analytics's analytics.js",
"url": "/analytics.js",
"category": "Analytics",
"keywords": null,
"content_html": "<h3 id=\"page-view\">Page view</h3>\n\n<pre><code class=\"language-js\">ga('create', 'UA-XXXX-Y', 'auto')\nga('create', 'UA-XXXX-Y', { userId: 'USER_ID' })\n</code></pre>\n\n<pre><code class=\"language-js\">ga('send', 'pageview')\nga('send', 'pageview', { 'dimension15': 'My custom dimension' })\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-js\">ga('send', 'event', 'button', 'click', {color: 'red'});\n</code></pre>\n\n<pre><code class=\"language-js\">ga('send', 'event', 'button', 'click', 'nav buttons', 4);\n/* ^category ^action ^label ^value */\n</code></pre>\n\n<h3 id=\"exceptions\">Exceptions</h3>\n\n<pre><code class=\"language-js\">ga('send', 'exception', {\n exDescription: 'DatabaseError',\n exFatal: false,\n appName: 'myapp',\n appVersion: '0.1.2'\n})\n</code></pre>",
"intro_html": "<p>Google Analytics’s analytics.js is deprecated.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-29"
},{
"id": "analytics",
"title": "Analytics libraries",
"url": "/analytics",
"category": "Analytics",
"keywords": null,
"content_html": "<h3 id=\"mixpanel\">Mixpanel</h3>\n\n<pre><code class=\"language-js\">mixpanel.identify('284');\nmixpanel.people.set({ $email: 'hi@gmail.com' });\nmixpanel.register({ age: 28, gender: 'male' }); /* set common properties */\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./mixpanel\">mixpanel</a></p>\n\n<h3 id=\"google-analyticss-analyticsjs\">Google Analytics’s analytics.js</h3>\n\n<pre><code class=\"language-js\">ga('create', 'UA-XXXX-Y', 'auto');\nga('create', 'UA-XXXX-Y', { userId: 'USER_ID' });\n</code></pre>\n\n<pre><code class=\"language-js\">ga('send', 'pageview');\nga('send', 'pageview', { 'dimension15': 'My custom dimension' });\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./analytics.js\">analytics.js</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "angularjs",
"title": "Angular.js",
"url": "/angularjs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code class=\"language-html\">    &lt;html ng-app=\"nameApp\"&gt;\n</code></pre>\n\n<h3 id=\"lists-ng-repeat\">Lists (ng-repeat)</h3>\n<pre><code class=\"language-html\"> &lt;ul ng-controller=\"MyListCtrl\"&gt;\n &lt;li ng-repeat=\"phone in phones\"&gt;\n \n &lt;/li&gt;\n    &lt;/ul&gt;\n</code></pre>\n\n<h3 id=\"model-ng-model\">Model (ng-model)</h3>\n\n<pre><code class=\"language-html\"> &lt;select ng-model=\"orderProp\"&gt;\n &lt;option value=\"name\"&gt;Alphabetical&lt;/option&gt;\n &lt;option value=\"age\"&gt;Newest&lt;/option&gt;\n    &lt;/select&gt;\n</code></pre>\n\n<h3 id=\"defining-a-module\">Defining a module</h3>\n<pre><code class=\"language-js\">    App = angular.module('myApp', []);\n\n App.controller('MyListCtrl', function ($scope) {\n $scope.phones = [ ... ];\n    });\n</code></pre>\n\n<h3 id=\"controller-with-protection-from-minification\">Controller with protection from minification</h3>\n<pre><code class=\"language-js\">    App.controller('Name', [\n '$scope',\n '$http',\n function ($scope, $http) {\n }\n ]);\n\n a.c 'name', [\n '$scope'\n '$http'\n ($scope, $http) -&gt;\n    ]\n</code></pre>\n\n<h3 id=\"service\">Service</h3>\n<pre><code class=\"language-js\">    App.service('NameService', function($http){\n return {\n get: function(){\n return $http.get(url);\n }\n }\n    });\n</code></pre>\n<p>In controller you call with parameter and will use promises to return data from server.</p>\n\n<pre><code class=\"language-js\">    App.controller('controllerName',\n function(NameService){\n NameService.get()\n .then(function(){})\n    })\n</code></pre>\n\n<h3 id=\"directive\">Directive</h3>\n<pre><code class=\"language-js\">    App.directive('name', function(){\n return {\n template: '&lt;h1&gt;Hello&lt;/h1&gt;'\n }\n    });\n</code></pre>\n\n<p>In HTML will use <code>&lt;name&gt;&lt;/name&gt;</code> to render your template <code>&lt;h1&gt;Hello&lt;/h1&gt;</code></p>\n\n<h3 id=\"http\">HTTP</h3>\n<pre><code class=\"language-js\"> App.controller('PhoneListCtrl', function ($scope, $http) {\n $http.get('/data.json').success(function (data) {\n $scope.phones = data;\n })\n    });\n</code></pre>\n<p>References:</p>\n\n<ul>\n <li>https://github.com/angular/angular-seed</li>\n <li>https://angularjs.org/</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "animated_gif",
"title": "Animated GIFs",
"url": "/animated_gif",
"category": "CLI",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"animated-gifs\">Animated GIFs</h2>\n\n<h3 id=\"convert-mp4-to-gif\">Convert MP4 to GIF</h3>\n\n<pre><code class=\"language-bash\">mkdir -p gif\nmplayer -ao null -vo gif89a:outdir=gif $INPUT\nmogrify -format gif *.png\ngifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif &gt; ${INPUT%.*}.gif\nrm -rf gif\n</code></pre>\n\n<p>You’ll need <code>mplayer</code>, <code>imagemagick</code> and <code>gifsicle</code>. This converts frames to .png, then turns them into an animated gif.</p>\n\n<h3 id=\"a-given-range\">A given range</h3>\n\n<pre><code class=\"language-bash\">mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4\n</code></pre>\n\n<p>See <code>-ss</code> and <code>-endpos</code>.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ansi",
"title": "Ansi codes",
"url": "/ansi",
"category": "CLI",
"keywords": null,
"content_html": "<p>Format</p>\n\n<pre><code>\\033[#m\n</code></pre>\n\n<p>Where:</p>\n\n<pre><code>0 clear\n1 bold\n4 underline\n5 blink\n\n30-37 fg color\n40-47 bg color\n\n1K clear line (to beginning of line)\n2K clear line (entire line)\n2J clear screen\n0;0H move cursor to 0;0\n\n1A move up 1 line\n</code></pre>\n\n<p>Colors</p>\n\n<pre><code>0 black\n1 red\n2 green\n3 yellow\n4 blue\n5 magenta\n6 cyan\n7 white\n</code></pre>\n\n<p>Stuff</p>\n\n<pre><code>hide_cursor() { printf \"\\e[?25l\"; }\nshow_cursor() { printf \"\\e[?25h\"; }\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ansible-examples",
"title": "Ansible examples",
"url": "/ansible-examples",
"category": "Ansible",
"keywords": null,
"content_html": "<h3 id=\"examples\">Examples</h3>\n\n<ul>\n <li><a href=\"https://github.com/chelsea/ansible-example-ruby/blob/master/roles/webserver/tasks/main.yml\">Ruby installation</a> <em>(github.com)</em></li>\n <li><a href=\"https://github.com/chelsea/ansible-example-ruby/blob/master/roles/db/tasks/main.yml\">Postgres installation</a> <em>(github.com)</em></li>\n <li><a href=\"https://github.com/tingtun/ansible-playbook-gitlab\">GitLab installation</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ansible-guide",
"title": "Ansible quickstart",
"url": "/ansible-guide",
"category": "Ansible",
"keywords": null,
"content_html": "<h3 id=\"install-ansible\">Install Ansible</h3>\n\n<pre><code class=\"language-bash\">$ brew install ansible # OSX\n$ [sudo] apt install ansible # elsewhere\n</code></pre>\n\n<p>Ansible is available as a package in most OS’s.</p>\n\n<p>See: <a href=\"http://docs.ansible.com/ansible/latest/intro_installation.html\">Installation</a></p>\n\n<h3 id=\"start-your-project\">Start your project</h3>\n\n<pre><code class=\"language-bash\">~$ mkdir setup\n~$ cd setup\n</code></pre>\n\n<p>Make a folder for your Ansible files.</p>\n\n<p>See: <a href=\"http://docs.ansible.com/ansible/latest/intro_getting_started.html\">Getting started</a></p>\n\n<h2 id=\"creating-your-files\">Creating your files</h2>\n\n<h3 id=\"inventory-file\">Inventory file</h3>\n\n<h4 id=\"setuphosts\">~/setup/hosts</h4>\n\n<pre><code class=\"language-dosini\">[sites]\n127.0.0.1\n192.168.0.1\n192.168.0.2\n192.168.0.3\n</code></pre>\n\n<p>This is a list of hosts you want to manage, grouped into groups. (Hint: try\nusing <code>localhost ansible_connection=local</code> to deploy to your local machine.)</p>\n\n<p>See: <a href=\"http://docs.ansible.com/ansible/latest/intro_inventory.html\">Intro to Inventory</a></p>\n\n<h3 id=\"playbook\">Playbook</h3>\n\n<h4 id=\"setupplaybookyml\">~/setup/playbook.yml</h4>\n\n<pre><code class=\"language-yaml\">- hosts: 127.0.0.1\n user: root\n tasks:\n - name: install nginx\n apt: pkg=nginx state=present\n\n - name: start nginx every bootup\n service: name=nginx state=started enabled=yes\n\n - name: do something in the shell\n shell: echo hello &gt; /tmp/abc.txt\n\n - name: install bundler\n gem: name=bundler state=latest\n</code></pre>\n\n<p>See: <a href=\"http://docs.ansible.com/ansible/latest/playbooks_intro.html\">Intro to Playbooks</a></p>\n\n<h2 id=\"running\">Running</h2>\n\n<h3 id=\"running-ansible-playbook\">Running ansible-playbook</h3>\n\n<pre><code>~/setup$ ls\nhosts\nplaybook.yml\n</code></pre>\n\n<h4 id=\"running-the-playbook\">Running the playbook</h4>\n\n<pre><code>~/setup$ ansible-playbook -i hosts playbook.yml\nPLAY [all] ********************************************************************\n\nGATHERING FACTS ***************************************************************\nok: [127.0.0.1]\n\nTASK: [install nginx] *********************************************************\nok: [127.0.0.1]\n\nTASK: start nginx every bootup] ***********************************************\nok: [127.0.0.1]\n...\n</code></pre>\n\n<h2 id=\"read-more\">Read more</h2>\n\n<ul>\n <li><a href=\"http://lowendbox.com/blog/getting-started-with-ansible/\">Getting started with Ansible</a> <em>(lowendbox.com)</em></li>\n <li><a href=\"http://docs.ansible.com/ansible/latest/intro_getting_started.html\">Getting started</a> <em>(docs.ansible.com)</em></li>\n <li><a href=\"http://docs.ansible.com/ansible/latest/intro_inventory.html\">Intro to Inventory</a> <em>(docs.ansible.com)</em></li>\n <li><a href=\"http://docs.ansible.com/ansible/latest/playbooks_intro.html\">Intro to Playbooks</a> <em>(docs.ansible.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "<p>A quick guide to getting started with your first Ansible playbook.</p>",
"tags": null,
"updated": null
},{
"id": "ansible-modules",
"title": "Ansible modules",
"url": "/ansible-modules",
"category": "Ansible",
"keywords": null,
"content_html": "<h2 id=\"format\">Format</h2>\n\n<h3 id=\"basic-file\">Basic file</h3>\n\n<pre><code class=\"language-yaml\">---\n- hosts: production\n remote_user: root\n tasks:\n - ···\n</code></pre>\n\n<p>Place your modules inside <code>tasks</code>.</p>\n\n<h3 id=\"task-formats\">Task formats</h3>\n\n<h4 id=\"one-line\">One-line</h4>\n\n<pre><code class=\"language-yaml\">- apt: pkg=vim state=present\n</code></pre>\n\n<h4 id=\"map\">Map</h4>\n\n<pre><code class=\"language-yaml\">- apt:\n pkg: vim\n state: present\n</code></pre>\n\n<h4 id=\"foldable-scalar\">Foldable scalar</h4>\n\n<pre><code class=\"language-yaml\">- apt: &gt;\n pkg=vim\n state=present\n</code></pre>\n\n<p>Define your tasks in any of these formats. One-line format is preferred for short declarations, while maps are preferred for longer.</p>\n\n<h2 id=\"modules\">Modules</h2>\n\n<h3 id=\"aptitude\">Aptitude</h3>\n\n<h4 id=\"packages\">Packages</h4>\n\n<pre><code class=\"language-yaml\">- apt:\n pkg: nodejs\n state: present # absent | latest\n update_cache: yes\n force: no\n</code></pre>\n\n<h4 id=\"deb-files\">Deb files</h4>\n\n<pre><code class=\"language-yaml\">- apt:\n deb: \"https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb\"\n</code></pre>\n\n<h4 id=\"repositories\">Repositories</h4>\n\n<pre><code class=\"language-yaml\">- apt_repository:\n repo: \"deb https://··· raring main\"\n state: present\n</code></pre>\n\n<h4 id=\"repository-keys\">Repository keys</h4>\n\n<pre><code class=\"language-yaml\">- apt_key:\n id: AC40B2F7\n url: \"http://···\"\n state: present\n</code></pre>\n\n<h3 id=\"git\">git</h3>\n\n<pre><code class=\"language-yaml\">- git:\n repo: git://github.com/\n dest: /srv/checkout\n version: master\n depth: 10\n bare: yes\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/git_module\">git module</a></p>\n\n<h3 id=\"git_config\">git_config</h3>\n\n<pre><code class=\"language-yaml\">- git_config:\n name: user.email\n scope: global # local | system\n value: hi@example.com\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/git_config_module\">git_config module</a></p>\n\n<h3 id=\"user\">user</h3>\n\n<pre><code class=\"language-yaml\">- user:\n state: present\n name: git\n system: yes\n shell: /bin/sh\n groups: admin\n comment: \"Git Version Control\"\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/user_module\">user module</a></p>\n\n<h3 id=\"service\">service</h3>\n\n<pre><code class=\"language-yaml\">- service:\n name: nginx\n state: started\n enabled: yes # optional\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/service_module\">service module</a></p>\n\n<h2 id=\"shell\">Shell</h2>\n\n<h3 id=\"shell-1\">shell</h3>\n\n<pre><code class=\"language-yaml\">- shell: apt-get install nginx -y\n</code></pre>\n\n<h4 id=\"extra-options\">Extra options</h4>\n\n<pre><code class=\"language-yaml\">- shell: echo hello\n args:\n creates: /path/file # skip if this exists\n removes: /path/file # skip if this is missing\n chdir: /path # cd here before running\n</code></pre>\n\n<h4 id=\"multiline-example\">Multiline example</h4>\n\n<pre><code class=\"language-yaml\">- shell: |\n echo \"hello there\"\n echo \"multiple lines\"\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/shell_module\">shell module</a></p>\n\n<h3 id=\"script\">script</h3>\n\n<pre><code class=\"language-yaml\">- script: /x/y/script.sh\n args:\n creates: /path/file # skip if this exists\n removes: /path/file # skip if this is missing\n chdir: /path # cd here before running\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/script_module\">script module</a></p>\n\n<h2 id=\"files\">Files</h2>\n\n<h3 id=\"file\">file</h3>\n\n<pre><code class=\"language-yaml\">- file:\n path: /etc/dir\n state: directory # file | link | hard | touch | absent\n\n # Optional:\n owner: bin\n group: wheel\n mode: 0644\n recurse: yes # mkdir -p\n force: yes # ln -nfs\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/file_module\">file module</a></p>\n\n<h3 id=\"copy\">copy</h3>\n\n<pre><code class=\"language-yaml\">- copy:\n src: /app/config/nginx.conf\n dest: /etc/nginx/nginx.conf\n\n # Optional:\n owner: user\n group: user\n mode: 0644\n backup: yes\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/copy_module\">copy module</a></p>\n\n<h3 id=\"template\">template</h3>\n\n<pre><code class=\"language-yaml\">- template:\n src: config/redis.j2\n dest: /etc/redis.conf\n\n # Optional:\n owner: user\n group: user\n mode: 0644\n backup: yes\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/template_module\">template module</a></p>\n\n<h2 id=\"local-actions\">Local actions</h2>\n\n<h3 id=\"local_action\">local_action</h3>\n\n<pre><code class=\"language-yaml\">- name: do something locally\n local_action: shell echo hello\n</code></pre>\n\n<h3 id=\"debug\">debug</h3>\n\n<pre><code class=\"language-yaml\">- debug:\n msg: \"Hello {{ var }}\"\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/ansible/debug_module\">debug module</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-03"
},{
"id": "ansible-roles",
"title": "Ansible roles",
"url": "/ansible-roles",
"category": "Ansible",
"keywords": null,
"content_html": "<h3 id=\"structure\">Structure</h3>\n\n<pre><code>roles/\n common/\n tasks/\n handlers/\n files/ # 'copy' will refer to this\n templates/ # 'template' will refer to this\n meta/ # Role dependencies here\n vars/\n defaults/\n main.yml\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://www.ansibleworks.com/docs/playbooks_roles.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ansible",
"title": "Ansible",
"url": "/ansible",
"category": "Ansible",
"keywords": null,
"content_html": "<h2 id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"hosts\">Hosts</h3>\n\n<pre><code>$ sudo mkdir /etc/ansible\n$ sudo vim /etc/ansible/hosts\n\n[example]\n192.0.2.101\n192.0.2.102\n</code></pre>\n\n<h3 id=\"running-a-playbook\">Running a playbook</h3>\n\n<pre><code>$ ansible-playbook playbook.yml\n</code></pre>\n\n<h2 id=\"tasks\">Tasks</h2>\n\n<pre><code>- hosts: all\n user: root\n sudo: no\n vars:\n aaa: bbb\n tasks:\n - ...\n handlers:\n - ...\n</code></pre>\n\n<h3 id=\"includes\">Includes</h3>\n\n<pre><code>tasks:\n - include: db.yml\nhandlers:\n - include: db.yml user=timmy\n</code></pre>\n\n<h2 id=\"handlers\">Handlers</h2>\n\n<pre><code>handlers:\n - name: start apache2\n action: service name=apache2 state=started\n\ntasks:\n - name: install apache\n action: apt pkg=apache2 state=latest\n notify:\n - start apache2\n</code></pre>\n\n<h2 id=\"vars\">Vars</h2>\n\n<pre><code>- host: lol\n vars_files:\n - vars.yml\n vars:\n project_root: /etc/xyz\n tasks:\n - name: Create the SSH directory.\n file: state=directory path=${project_root}/home/.ssh/\n only_if: \"$vm == 0\"\n</code></pre>\n\n<h2 id=\"roles\">Roles</h2>\n\n<pre><code>- host: xxx\n roles:\n - db\n - { role:ruby, sudo_user:$user }\n - web\n\n# Uses:\n# roles/db/tasks/*.yml\n# roles/db/handlers/*.yml\n</code></pre>\n\n<h3 id=\"task-failures\">Task: Failures</h3>\n\n<pre><code>- name: my task\n command: ...\n register: result\n failed_when: \"'FAILED' in result.stderr\"\n\n ignore_errors: yes\n\n changed_when: \"result.rc != 2\"\n</code></pre>\n\n<h3 id=\"env-vars\">Env vars</h3>\n\n<pre><code>vars:\n local_home: \"{{ lookup('env','HOME') }}\"\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://www.ansibleworks.com/docs/intro_configuration.html\">Intro</a></li>\n <li><a href=\"http://www.ansibleworks.com/docs/modules.html\">Modules</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "appcache",
"title": "Appcache",
"url": "/appcache",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"format\">Format</h3>\n\n<pre><code>CACHE MANIFEST\n# version\n\nCACHE:\nhttp://www.google.com/jsapi\n/assets/app.js\n/assets/bg.png\n\nNETWORK:\n*\n</code></pre>\n\n<p>Note that Appcache is deprecated!</p>\n\n<p>See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache\">Using the application cache</a> <em>(developer.mozilla.org)</em></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "applescript",
"title": "AppleScript",
"url": "/applescript",
"category": "macOS",
"keywords": null,
"content_html": "<h3 id=\"running\">Running</h3>\n\n<pre><code class=\"language-applescript\">osascript -e \"...\"\n</code></pre>\n\n<pre><code class=\"language-applescript\">display notification \"X\" with title \"Y\"\n</code></pre>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code class=\"language-applescript\">-- This is a single line comment\n</code></pre>\n\n<pre><code class=\"language-applescript\"># This is another single line comment\n</code></pre>\n\n<pre><code class=\"language-applescript\">(*\nThis is\na multi\nline comment\n*)\n</code></pre>\n\n<h3 id=\"say\">Say</h3>\n\n<pre><code class=\"language-applescript\">-- default voice\nsay \"Hi I am a Mac\"\n</code></pre>\n\n<pre><code class=\"language-applescript\">-- specified voice\nsay \"Hi I am a Mac\" using \"Zarvox\"\n</code></pre>\n\n<h3 id=\"beep\">Beep</h3>\n\n<pre><code class=\"language-applescript\">-- beep once\nbeep\n</code></pre>\n\n<pre><code class=\"language-applescript\">-- beep 10 times\nbeep 10\n</code></pre>\n\n<h3 id=\"delay\">Delay</h3>\n\n<pre><code class=\"language-applescript\">-- delay for 5 seconds\ndelay 5\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-03-17"
},{
"id": "applinks",
"title": "Applinks",
"url": "/applinks",
"category": "HTML",
"keywords": null,
"content_html": "<pre><code>&lt;meta property=\"al:ios:url\" content=\"applinks://docs\" /&gt;\n&lt;meta property=\"al:ios:app_store_id\" content=\"12345\" /&gt;\n&lt;meta property=\"al:ios:app_name\" content=\"App Links\" /&gt;\n\n&lt;meta property=\"al:android:url\" content=\"applinks://docs\" /&gt;\n&lt;meta property=\"al:android:app_name\" content=\"App Links\" /&gt;\n&lt;meta property=\"al:android:package\" content=\"org.applinks\" /&gt;\n\n&lt;meta property=\"al:web:url\" content=\"http://applinks.org/documentation\" /&gt;\n</code></pre>\n\n<h3 id=\"device-types\">Device types</h3>\n\n<ul>\n <li><code>ios</code></li>\n <li><code>ipad</code></li>\n <li><code>iphone</code></li>\n <li><code>android</code></li>\n <li><code>windows_phone</code></li>\n <li><code>web</code></li>\n</ul>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li><a href=\"http://applinks.org/documentation/\">applinks.org</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "arel",
"title": "Arel",
"url": "/arel",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"tables\">Tables</h3>\n\n<pre><code class=\"language-rb\">users = Arel::Table.new(:users)\nusers = User.arel_table # ActiveRecord model\n</code></pre>\n\n<h3 id=\"fields\">Fields</h3>\n\n<pre><code class=\"language-rb\">users[:name]\nusers[:id]\n</code></pre>\n\n<h3 id=\"where-restriction\"><code>where</code> (restriction)</h3>\n\n<pre><code class=\"language-rb\">users.where(users[:name].eq('amy'))\n# SELECT * FROM users WHERE users.name = 'amy'\n</code></pre>\n\n<h3 id=\"select-projection\"><code>select</code> (projection)</h3>\n\n<pre><code class=\"language-rb\">users.project(users[:id])\n# SELECT users.id FROM users\n</code></pre>\n\n<h3 id=\"join\"><code>join</code></h3>\n<h4 id=\"basic-join\">basic join</h4>\n<p>In ActiveRecord (without Arel), if <code>:photos</code> is the name of the association, use <code>joins</code></p>\n<pre><code class=\"language-rb\">users.joins(:photos)\n</code></pre>\n\n<p>In Arel, if <code>photos</code> is defined as the Arel table,</p>\n<pre><code class=\"language-rb\">photos = Photo.arel_table\nusers.join(photos) \nusers.join(photos, Arel::Nodes::OuterJoin).on(users[:id].eq(photos[:user_id]))\n</code></pre>\n\n<h4 id=\"join-with-conditions\">join with conditions</h4>\n<pre><code class=\"language-rb\">users.joins(:photos).merge(Photo.where(published: true))\n</code></pre>\n\n<p>If the simpler version doesn’t help and you want to add more SQL statements to it:</p>\n<pre><code class=\"language-rb\">users.join(\n users.join(photos, Arel::Nodes::OuterJoin)\n .on(photos[:user_id].eq(users[:id]).and(photos[:published].eq(true)))\n)\n</code></pre>\n\n<h4 id=\"advanced-join\">advanced join</h4>\n<p>multiple <code>joins</code> with the same table but different meanings and/or conditions</p>\n<pre><code class=\"language-rb\">creators = User.arel_table.alias('creators')\nupdaters = User.arel_table.alias('updaters')\nphotos = Photo.arel_table\n\nphotos_with_credits = photos\n.join(photos.join(creators, Arel::Nodes::OuterJoin).on(photos[:created_by_id].eq(creators[:id])))\n.join(photos.join(updaters, Arel::Nodes::OuterJoin).on(photos[:assigned_id].eq(updaters[:id])))\n.project(photos[:name], photos[:created_at], creators[:name].as('creator'), updaters[:name].as('editor'))\n\nphotos_with_credits.to_sql\n# =&gt; \"SELECT `photos`.`name`, `photos`.`created_at`, `creators`.`name` AS creator, `updaters`.`name` AS editor FROM `photos` INNER JOIN (SELECT FROM `photos` LEFT OUTER JOIN `users` `creators` ON `photos`.`created_by_id` = `creators`.`id`) INNER JOIN (SELECT FROM `photos` LEFT OUTER JOIN `users` `updaters` ON `photos`.`updated_by_id` = `updaters`.`id`)\"\n\n# after the request is done, you can use the attributes you named\n# it's as if every Photo record you got has \"creator\" and \"editor\" fields, containing creator name and editor name\nphotos_with_credits.map{|x|\n \"#{photo.name} - copyright #{photo.created_at.year} #{photo.creator}, edited by #{photo.editor}\"\n}.join('; ')\n</code></pre>\n\n<h3 id=\"limit--offset\"><code>limit</code> / <code>offset</code></h3>\n\n<pre><code class=\"language-rb\">users.take(5) # =&gt; SELECT * FROM users LIMIT 5\nusers.skip(4) # =&gt; SELECT * FROM users OFFSET 4\n</code></pre>\n\n<h3 id=\"aggregates\">Aggregates</h3>\n\n<pre><code class=\"language-rb\">users.project(users[:age].sum) # .average .minimum .maximum\nusers.project(users[:id].count)\nusers.project(users[:id].count.as('user_count'))\n</code></pre>\n\n<h3 id=\"order\"><code>order</code></h3>\n\n<pre><code class=\"language-rb\">users.order(users[:name])\nusers.order(users[:name], users[:age].desc)\nusers.reorder(users[:age])\n</code></pre>\n\n<h3 id=\"with-activerecord\">With ActiveRecord</h3>\n\n<pre><code class=\"language-rb\">User.arel_table\nUser.where(id: 1).arel\n</code></pre>\n\n<h3 id=\"clean-code-with-arel\">Clean code with arel</h3>\n\n<p>Most of the clever stuff should be in scopes, e.g. the code above could become:</p>\n<pre><code class=\"language-rb\">photos_with_credits = Photo.with_creator.with_editor\n</code></pre>\n\n<p>You can store requests in variables then add SQL segments:</p>\n<pre><code class=\"language-rb\">all_time = photos_with_credits.count\nthis_month = photos_with_credits.where(photos[:created_at].gteq(Date.today.beginning_of_month))\nrecent_photos = photos_with_credits.where(photos[:created_at].gteq(Date.today.beginning_of_month)).limit(5)\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li><a href=\"http://github.com/rails/arel\">http://github.com/rails/arel</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "atom",
"title": "Atom",
"url": "/atom",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"tree\">Tree</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘\\</code></td>\n <td>Toggle tree</td>\n </tr>\n <tr>\n <td><code>⌘⇧\\</code></td>\n <td>Reveal current file</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"comments\">Comments</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘/</code></td>\n <td>Toggle comments</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"view\">View</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘k</code> <code>←</code></td>\n <td>Split pane to the left</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘⌥=</code></td>\n <td>Grow pane</td>\n </tr>\n <tr>\n <td><code>⌘⌥-</code></td>\n <td>Shrink pane</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^⇧←</code></td>\n <td>Move tab to left</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"bracket-matcher\">Bracket matcher</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^m</code></td>\n <td>Go to matching bracket</td>\n </tr>\n <tr>\n <td><code>^]</code></td>\n <td>Remove brackets from selection</td>\n </tr>\n <tr>\n <td><code>^⌘m</code></td>\n <td>Select inside brackets</td>\n </tr>\n <tr>\n <td><code>⌥⌘.</code></td>\n <td>Close tag</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"symbols-view\">Symbols view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^⌥↓</code></td>\n <td>Jump to declaration under cursor</td>\n </tr>\n <tr>\n <td><code>^⇧r</code></td>\n <td>Show tags</td>\n </tr>\n </tbody>\n</table>\n\n<p>Symbols view enables Ctags support for Atom.</p>\n\n<p>See: <a href=\"https://atom.io/packages/symbols-view\">Symbols view</a></p>\n\n<h3 id=\"git\">Git</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^⇧9</code></td>\n <td>Show Git pane</td>\n </tr>\n <tr>\n <td><code>^⇧8</code></td>\n <td>Show GitHub pane</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"editing\">Editing</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘d</code></td>\n <td>Select word</td>\n </tr>\n <tr>\n <td><code>⌘l</code></td>\n <td>Select line</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘↓</code></td>\n <td>Move line down</td>\n </tr>\n <tr>\n <td><code>⌘↑</code></td>\n <td>Move line up</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘⏎</code></td>\n <td>New line below</td>\n </tr>\n <tr>\n <td><code>⌘⇧⏎</code></td>\n <td>New line above</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘⇧k</code></td>\n <td>Delete line</td>\n </tr>\n <tr>\n <td><code>⌘⇧d</code></td>\n <td>Duplicate line</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"project\">Project</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘⇧p</code></td>\n <td>Command palette</td>\n </tr>\n <tr>\n <td><code>⌘⇧a</code></td>\n <td>Add project folder</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘n</code></td>\n <td>New file</td>\n </tr>\n <tr>\n <td><code>⌘⇧n</code></td>\n <td>New window</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘f</code></td>\n <td>Find in file</td>\n </tr>\n <tr>\n <td><code>⌘⇧f</code></td>\n <td>Find in project</td>\n </tr>\n <tr>\n <td><code>⌘t</code></td>\n <td>Search files in project</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"notes\">Notes</h2>\n\n<h3>⌘</h3>\n\n<ul>\n <li>For Windows and Linux, <code>⌘</code> is the <code>Control</code> key.</li>\n <li>For macOS, it’s the <code>Command</code> key.</li>\n</ul>\n\n<h3 id=\"-1\">⌥</h3>\n\n<ul>\n <li>For Windows and Linux, <code>⌥</code> is the <code>Alt</code> key.</li>\n <li>For macOS, it’s the <code>Option</code> key.</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "awesome-redux",
"title": "Awesome Redux",
"url": "/awesome-redux",
"category": "React",
"keywords": null,
"content_html": "<h3 id=\"redux-actions\">redux-actions</h3>\n\n<p class=\"-setup\">Create action creators in flux standard action format.</p>\n\n<pre><code class=\"language-js\">increment = createAction('INCREMENT', amount =&gt; amount)\nincrement = createAction('INCREMENT') // same\n</code></pre>\n\n<pre><code class=\"language-js\">increment(42) === { type: 'INCREMENT', payload: 42 }\n</code></pre>\n\n<pre><code class=\"language-js\">// Errors are handled for you:\nerr = new Error()\nincrement(err) === { type: 'INCREMENT', payload: err, error: true }\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://www.npmjs.com/package/redux-actions\">redux-actions</a></p>\n\n<h3 id=\"flux-standard-action\">flux-standard-action</h3>\n\n<p class=\"-setup\">A standard for flux action objects. An action may have an <code>error</code>, <code>payload</code> and <code>meta</code> and nothing else.</p>\n\n<pre><code class=\"language-js\">{ type: 'ADD_TODO', payload: { text: 'Work it' } }\n{ type: 'ADD_TODO', payload: new Error(), error: true }\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://github.com/acdlite/flux-standard-action\">flux-standard-action</a></p>\n\n<h3 id=\"redux-multi\">redux-multi</h3>\n\n<p class=\"-setup\">Dispatch multiple actions in one action creator.</p>\n\n<pre><code class=\"language-js\">store.dispatch([\n { type: 'INCREMENT', payload: 2 },\n { type: 'INCREMENT', payload: 3 }\n])\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://github.com/ashaffer/redux-multi\">redux-multi</a></p>\n\n<h3 id=\"reduce-reducers\">reduce-reducers</h3>\n<p class=\"-setup\">Combines reducers (like <em>combineReducers()</em>), but without namespacing magic.</p>\n\n<pre><code class=\"language-js\">re = reduceReducers(\n (state, action) =&gt; state + action.number,\n (state, action) =&gt; state + action.number\n)\n\nre(10, { number: 2 }) //=&gt; 14\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://www.npmjs.com/package/reduce-reducers\">reduce-reducers</a></p>\n\n<h3 id=\"redux-logger\">redux-logger</h3>\n\n<p class=\"-setup\">Logs actions to your console.</p>\n\n<pre><code class=\"language-js\">// Nothing to see here\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://github.com/evgenyrodionov/redux-logger\">redux-logger</a></p>\n\n<h2 id=\"async\">Async</h2>\n\n<h3 id=\"redux-promise\">redux-promise</h3>\n\n<p class=\"-setup\">Pass promises to actions. Dispatches a flux-standard-action.</p>\n\n<pre><code class=\"language-js\">increment = createAction('INCREMENT') // redux-actions\nincrement(Promise.resolve(42))\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://github.com/acdlite/redux-promise\">redux-promise</a></p>\n\n<h3 id=\"redux-promises\">redux-promises</h3>\n\n<p class=\"-setup\">Sorta like that, too. Works by letting you pass <em>thunks</em> (functions) to <code>dispatch()</code>. Also has ‘idle checking’.</p>\n\n<pre><code class=\"language-js\">fetchData = (url) =&gt; (dispatch) =&gt; {\n dispatch({ type: 'FETCH_REQUEST' })\n fetch(url)\n .then((data) =&gt; dispatch({ type: 'FETCH_DONE', data })\n .catch((error) =&gt; dispatch({ type: 'FETCH_ERROR', error })\n})\n\nstore.dispatch(fetchData('/posts'))\n</code></pre>\n\n<pre><code class=\"language-js\">// That's actually shorthand for:\nfetchData('/posts')(store.dispatch)\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://www.npmjs.com/package/redux-promises\">redux-promises</a></p>\n\n<h3 id=\"redux-effects\">redux-effects</h3>\n\n<p class=\"-setup\">Pass side effects declaratively to keep your actions pure.</p>\n\n<pre><code class=\"language-js\">{\n type: 'EFFECT_COMPOSE',\n payload: {\n type: 'FETCH'\n payload: {url: '/some/thing', method: 'GET'}\n },\n meta: {\n steps: [ [success, failure] ]\n }\n}\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://www.npmjs.com/package/redux-effects\">redux-effects</a></p>\n\n<h3 id=\"redux-thunk\">redux-thunk</h3>\n\n<p class=\"-setup\">Pass “thunks” to as actions. Extremely similar to redux-promises, but has support for getState.</p>\n\n<pre><code class=\"language-js\">fetchData = (url) =&gt; (dispatch, getState) =&gt; {\n dispatch({ type: 'FETCH_REQUEST' })\n fetch(url)\n .then((data) =&gt; dispatch({ type: 'FETCH_DONE', data })\n .catch((error) =&gt; dispatch({ type: 'FETCH_ERROR', error })\n})\n\nstore.dispatch(fetchData('/posts'))\n</code></pre>\n\n<pre><code class=\"language-js\">// That's actually shorthand for:\nfetchData('/posts')(store.dispatch, store.getState)\n</code></pre>\n\n<pre><code class=\"language-js\">// Optional: since fetchData returns a promise, it can be chained\n// for server-side rendering\nstore.dispatch(fetchPosts()).then(() =&gt; {\n ReactDOMServer.renderToString(&lt;MyApp store={store} /&gt;)\n})\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"https://www.npmjs.com/package/redux-thunk\">redux-thunk</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-30"
},{
"id": "awscli",
"title": "AWS CLI",
"url": "/awscli",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"ec2\">EC2</h3>\n\n<pre><code>aws ec2 describe-instances\naws ec2 start-instances --instance-ids i-12345678c\naws ec2 terminate-instances --instance-ids i-12345678c\n</code></pre>\n\n<h3 id=\"s3\">S3</h3>\n\n<pre><code>aws s3 ls s3://mybucket\naws s3 rm s3://mybucket/folder --recursive\naws s3 cp myfolder s3://mybucket/folder --recursive\naws s3 sync myfolder s3://mybucket/folder --exclude *.tmp\n</code></pre>\n\n<h3 id=\"ecs\">ECS</h3>\n\n<pre><code>aws ecs create-cluster\n --cluster-name=NAME\n --generate-cli-skeleton\n\naws ecs create-service\n</code></pre>\n\n<h3 id=\"homebrew\">Homebrew</h3>\n\n<pre><code>brew install awscli\naws configure\n</code></pre>\n\n<h3 id=\"configuration-profiles\">Configuration profiles</h3>\n\n<pre><code>aws configure --profile project1\naws configure --profile project2\n</code></pre>\n\n<h2 id=\"elastic-beanstalk\">Elastic Beanstalk</h2>\n\n<h3 id=\"configuration\">Configuration</h3>\n\n<ul>\n <li>.elasticbeanstalk/config.yml - application config</li>\n <li>.elasticbeanstalk/dev-env.env.yml - environment config</li>\n</ul>\n\n<pre><code>eb config\n</code></pre>\n\n<p>See: <a href=\"http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/command-options.html\">http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/command-options.html</a></p>\n\n<h2 id=\"ebextensions\">ebextensions</h2>\n\n<ul>\n <li><a href=\"http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers.html\">http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers.html</a></li>\n <li><a href=\"http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers-ec2.html\">http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers-ec2.html</a></li>\n</ul>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://aws.amazon.com/cli/\">AWS CLI</a></li>\n <li><a href=\"http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html\">Documentation</a></li>\n <li><a href=\"http://docs.aws.amazon.com/cli/latest/reference/#available-services\">All commands</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "backbone",
"title": "Backbone.js",
"url": "/backbone",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"binding-events\">Binding events</h3>\n\n<pre><code class=\"language-js\">.on('event', callback)\n.on('event', callback, context)\n</code></pre>\n\n<pre><code class=\"language-js\">.on({\n 'event1': callback,\n 'event2': callback\n})\n</code></pre>\n\n<pre><code class=\"language-js\">.on('all', callback)\n</code></pre>\n\n<pre><code class=\"language-js\">.once('event', callback) // Only happens once\n</code></pre>\n\n<h3 id=\"unbinding-events\">Unbinding events</h3>\n\n<pre><code class=\"language-js\">object.off('change', onChange) // just the `onChange` callback\nobject.off('change') // all 'change' callbacks\nobject.off(null, onChange) // `onChange` callback for all events\nobject.off(null, null, context) // all callbacks for `context` all events\nobject.off() // all\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-js\">object.trigger('event')\n</code></pre>\n\n<pre><code class=\"language-js\">view.listenTo(object, event, callback)\nview.stopListening()\n</code></pre>\n\n<h3 id=\"list-of-events\">List of events</h3>\n\n<ul>\n <li>Collection:\n <ul>\n <li><code>add</code> (model, collection, options)</li>\n <li><code>remove</code> (model, collection, options)</li>\n <li><code>reset</code> (collection, options)</li>\n <li><code>sort</code> (collection, options)</li>\n </ul>\n </li>\n <li>Model:\n <ul>\n <li><code>change</code> (model, options)</li>\n <li><code>change:[attr]</code> (model, value, options)</li>\n <li><code>destroy</code> (model, collection, options)</li>\n <li><code>error</code> (model, xhr, options)</li>\n </ul>\n </li>\n <li>Model and collection:\n <ul>\n <li><code>request</code> (model, xhr, options)</li>\n <li><code>sync</code> (model, resp, options)</li>\n </ul>\n </li>\n <li>Router:\n <ul>\n <li><code>route:[name]</code> (params)</li>\n <li><code>route</code> (router, route, params)</li>\n </ul>\n </li>\n</ul>\n\n<h2 id=\"views\">Views</h2>\n\n<h3 id=\"defining\">Defining</h3>\n\n<pre><code class=\"language-js\">// All attributes are optional\nvar View = Backbone.View.extend({\n model: doc,\n</code></pre>\n\n<pre><code class=\"language-js\"> tagName: 'div',\n className: 'document-item',\n id: \"document-\" + doc.id,\n attributes: { href: '#' },\n</code></pre>\n\n<pre><code class=\"language-js\"> el: 'body',\n</code></pre>\n\n<pre><code class=\"language-js\"> events: {\n 'click button.save': 'save',\n 'click .cancel': function() { ··· },\n 'click': 'onclick'\n },\n</code></pre>\n\n<pre><code class=\"language-js\"> constructor: function() { ··· },\n render: function() { ··· }\n})\n</code></pre>\n<h3 id=\"instantiating\">Instantiating</h3>\n\n<pre><code class=\"language-js\">view = new View()\nview = new View({ el: ··· })\n</code></pre>\n\n<h3 id=\"methods\">Methods</h3>\n\n<pre><code class=\"language-js\">view.$el.show()\nview.$('input')\n</code></pre>\n\n<pre><code class=\"language-js\">view.remove()\n</code></pre>\n\n<pre><code class=\"language-js\">view.delegateEvents()\nview.undelegateEvents()\n</code></pre>\n\n<h2 id=\"models\">Models</h2>\n\n<h3 id=\"defining-1\">Defining</h3>\n\n<pre><code class=\"language-js\">// All attributes are optional\nvar Model = Backbone.Model.extend({\n defaults: {\n 'author': 'unknown'\n },\n idAttribute: '_id',\n parse: function() { ··· }\n})\n</code></pre>\n\n<h3 id=\"instantiating-1\">Instantiating</h3>\n\n<pre><code class=\"language-js\">var obj = new Model({ title: 'Lolita', author: 'Nabokov' })\n</code></pre>\n\n<pre><code class=\"language-js\">var obj = new Model({ collection: ··· })\n</code></pre>\n\n<h3 id=\"methods-1\">Methods</h3>\n\n<pre><code class=\"language-js\">obj.id\nobj.cid // → 'c38' (client-side ID)\n</code></pre>\n\n<pre><code class=\"language-js\">obj.clone()\n</code></pre>\n\n<pre><code class=\"language-js\">obj.hasChanged('title')\nobj.changedAttributes() // false, or hash\nobj.previousAttributes() // false, or hash\nobj.previous('title')\n</code></pre>\n\n<pre><code class=\"language-js\">obj.isNew()\n</code></pre>\n\n<pre><code class=\"language-js\">obj.set({ title: 'A Study in Pink' })\nobj.set({ title: 'A Study in Pink' }, { validate: true, silent: true })\nobj.unset('title')\n</code></pre>\n\n<pre><code class=\"language-js\">obj.get('title')\nobj.has('title')\nobj.escape('title') /* Like .get() but HTML-escaped */\n</code></pre>\n\n<pre><code class=\"language-js\">obj.clear()\nobj.clear({ silent: true })\n</code></pre>\n\n<pre><code class=\"language-js\">obj.save()\nobj.save({ attributes })\nobj.save(null, {\n silent: true, patch: true, wait: true,\n success: callback, error: callback\n})\n</code></pre>\n\n<pre><code class=\"language-js\">obj.destroy()\nobj.destroy({\n wait: true,\n success: callback, error: callback\n})\n</code></pre>\n\n<pre><code class=\"language-js\">obj.toJSON()\n</code></pre>\n\n<pre><code class=\"language-js\">obj.fetch()\nobj.fetch({ success: callback, error: callback })\n</code></pre>\n\n<h3 id=\"validation\">Validation</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">var Model = Backbone.Model.extend({\n validate: function(attrs, options) {\n if (attrs.end &lt; attrs.start) {\n return \"Can't end before it starts\"\n }\n }\n})\n</code></pre>\n\n<pre><code class=\"language-js\">obj.validationError //=&gt; \"Can't end before it starts\"\nobj.isValid()\nobj.on('invalid', function (model, error) { ··· })\n</code></pre>\n\n<pre><code class=\"language-js\">// Triggered on:\nobj.save()\nobj.set({ ··· }, { validate: true })\n</code></pre>\n\n<h3 id=\"custom-urls\">Custom URLs</h3>\n\n<pre><code class=\"language-js\">var Model = Backbone.Model.extend({\n // Single URL (string or function)\n url: '/account',\n url: function() { return '/account' },\n</code></pre>\n\n<pre><code class=\"language-js\"> // Both of these two work the same way\n url: function() { return '/books/' + this.id }),\n urlRoot: '/books'\n})\n</code></pre>\n\n<pre><code class=\"language-js\">var obj = new Model({ url: ··· })\nvar obj = new Model({ urlRoot: ··· })\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://backbonejs.org/\">Backbone website</a> <em>(backbonejs.org)</em></li>\n <li><a href=\"http://ricostacruz.com/backbone-patterns/\">Backbone patterns</a> <em>(ricostacruz.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-04"
},{
"id": "badges",
"title": "Code badges",
"url": "/badges",
"category": "Others",
"keywords": null,
"content_html": "<p>Here are some badges for open source projects.</p>\n\n<h3 id=\"badge-markdown\">Badge markdown</h3>\n\n<pre><code>Travis\n[![Status](https://travis-ci.org/rstacruz/REPO.svg?branch=master)](https://travis-ci.org/rstacruz/REPO) \nCodeClimate (shields.io)\n[![CodeClimate](http://img.shields.io/codeclimate/github/rstacruz/REPO.svg?style=flat)](https://codeclimate.com/github/rstacruz/REPO \n\"CodeClimate\")\n\nCoveralls (shields.io)\n[![Coveralls](http://img.shields.io/coveralls/rstacruz/REPO.svg?style=flat)](https://coveralls.io/r/rstacruz/REPO)\n\nTravis (shields.io)\n[![Status](http://img.shields.io/travis/rstacruz/REPO/master.svg?style=flat)](https://travis-ci.org/rstacruz/REPO \"See test builds\")\n\nNPM (shields.io)\n[![npm version](http://img.shields.io/npm/v/REPO.svg?style=flat)](https://npmjs.org/package/REPO \"View this project on npm\")\n\nRuby gem (shields.io)\n[![Gem](https://img.shields.io/gem/v/GEMNAME.svg?style=flat)](http://rubygems.org/gems/GEMNAME \"View this project in Rubygems\")\n</code></pre>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code>Gitter chat\n[![Gitter chat](https://badges.gitter.im/USER/REPO.png)](https://gitter.im/REPO/GITTERROOM \"Gitter chat\")\n\nGitter chat (shields.io)\n[![Chat](http://img.shields.io/badge/gitter-USER / REPO-blue.svg)]( https://gitter.im/USER/REPO )\n\ndavid-dm\n[![Dependencies](http://img.shields.io/david/rstacruz/REPO.svg?style=flat)](https://david-dm.org/rstacruz/REPO)\n\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n</code></pre>\n\n<h3 id=\"support-stuff\">Support stuff</h3>\n\n<pre><code>Support\n-------\n\n__Bugs and requests__: submit them through the project's issues tracker.&lt;br&gt;\n[![Issues](http://img.shields.io/github/issues/USER/REPO.svg)]( https://github.com/USER/REPO/issues )\n\n__Questions__: ask them at StackOverflow with the tag *REPO*.&lt;br&gt;\n[![StackOverflow](http://img.shields.io/badge/stackoverflow-REPO-blue.svg)]( http://stackoverflow.com/questions/tagged/REPO )\n\n__Chat__: join us at gitter.im.&lt;br&gt;\n[![Chat](http://img.shields.io/badge/gitter.im-USER/REPO-blue.svg)]( https://gitter.im/USER/REPO )\n</code></pre>\n\n<h3 id=\"frontend-js-installation\">Frontend js installation</h3>\n\n<pre><code>Installation\n------------\n\nAdd [nprogress.js] and [nprogress.css] to your project.\n\n```html\n&lt;script src='nprogress.js'&gt;&lt;/script&gt;\n&lt;link rel='stylesheet' href='nprogress.css'/&gt;\n```\n\nNProgress is available via [bower] and [npm].\n\n $ bower install --save nprogress\n $ npm install --save nprogress\n\n[bower]: http://bower.io/search/?q=nprogress\n[npm]: https://www.npmjs.org/package/nprogress\n</code></pre>\n\n<h3 id=\"acknowledgements\">Acknowledgements</h3>\n\n<pre><code>**PROJECTNAME** © 2014+, Rico Sta. Cruz. Released under the [MIT] License.&lt;br&gt;\nAuthored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).\n\n&gt; [ricostacruz.com](http://ricostacruz.com) &amp;nbsp;&amp;middot;&amp;nbsp;\n&gt; GitHub [@rstacruz](https://github.com/rstacruz) &amp;nbsp;&amp;middot;&amp;nbsp;\n&gt; Twitter [@rstacruz](https://twitter.com/rstacruz)\n\n[MIT]: http://mit-license.org/\n[contributors]: http://github.com/rstacruz/nprogress/contributors\n</code></pre>\n\n<h3 id=\"links\">Links</h3>\n\n<ul>\n <li>\n <p>Everything: http://shields.io/</p>\n </li>\n <li>\n <p>Version badge (gems, npm): http://badge.fury.io/</p>\n </li>\n <li>\n <p>Dependencies (ruby): http://gemnasium.com/</p>\n </li>\n <li>\n <p>CI: http://travis-ci.org/</p>\n </li>\n <li>\n <p>Code quality (ruby): http://codeclimate.com/</p>\n </li>\n <li>\n <p>Test coverage: https://coveralls.io/</p>\n </li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "bash",
"title": "Bash scripting",
"url": "/bash",
"category": "CLI",
"keywords": ["Variables","Functions","Interpolation","Brace expansions","Loops","Conditional execution","Command substitution"],
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-bash\">#!/usr/bin/env bash\n\nNAME=\"John\"\necho \"Hello $NAME!\"\n</code></pre>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-bash\">NAME=\"John\"\necho $NAME\necho \"$NAME\"\necho \"${NAME}!\"\n</code></pre>\n\n<h3 id=\"string-quotes\">String quotes</h3>\n\n<pre><code class=\"language-bash\">NAME=\"John\"\necho \"Hi $NAME\" #=&gt; Hi John\necho 'Hi $NAME' #=&gt; Hi $NAME\n</code></pre>\n\n<h3 id=\"shell-execution\">Shell execution</h3>\n\n<pre><code class=\"language-bash\">echo \"I'm in $(pwd)\"\necho \"I'm in `pwd`\"\n# Same\n</code></pre>\n\n<p>See <a href=\"http://wiki.bash-hackers.org/syntax/expansion/cmdsubst\">Command substitution</a></p>\n\n<h3 id=\"conditional-execution\">Conditional execution</h3>\n\n<pre><code class=\"language-bash\">git commit &amp;&amp; git push\ngit commit || echo \"Commit failed\"\n</code></pre>\n\n<h3 id=\"functions-example\">Functions</h3>\n\n<pre><code class=\"language-bash\">get_name() {\n echo \"John\"\n}\n\necho \"You are $(get_name)\"\n</code></pre>\n\n<p>See: <a href=\"#functions\">Functions</a></p>\n\n<h3 id=\"conditionals-example\">Conditionals</h3>\n\n<pre><code class=\"language-bash\">if [[ -z \"$string\" ]]; then\n echo \"String is empty\"\nelif [[ -n \"$string\" ]]; then\n echo \"String is not empty\"\nfi\n</code></pre>\n\n<p>See: <a href=\"#conditionals\">Conditionals</a></p>\n\n<h3 id=\"strict-mode\">Strict mode</h3>\n\n<pre><code class=\"language-bash\">set -euo pipefail\nIFS=$'\\n\\t'\n</code></pre>\n\n<p>See: <a href=\"http://redsymbol.net/articles/unofficial-bash-strict-mode/\">Unofficial bash strict mode</a></p>\n\n<h3 id=\"brace-expansion\">Brace expansion</h3>\n\n<pre><code class=\"language-bash\">echo {A,B}.js\n</code></pre>\n\n<table>\n <tbody>\n <tr>\n <td><code>{A,B}</code></td>\n <td>Same as <code>A B</code></td>\n </tr>\n <tr>\n <td><code>{A,B}.js</code></td>\n <td>Same as <code>A.js B.js</code></td>\n </tr>\n <tr>\n <td><code>{1..5}</code></td>\n <td>Same as <code>1 2 3 4 5</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://wiki.bash-hackers.org/syntax/expansion/brace\">Brace expansion</a></p>\n\n<h2 class=\"-three-column\" id=\"parameter-expansions\">Parameter expansions</h2>\n\n<h3 id=\"basics\">Basics</h3>\n\n<pre><code class=\"language-bash\">name=\"John\"\necho ${name}\necho ${name/J/j} #=&gt; \"john\" (substitution)\necho ${name:0:2} #=&gt; \"Jo\" (slicing)\necho ${name::2} #=&gt; \"Jo\" (slicing)\necho ${name::-1} #=&gt; \"Joh\" (slicing)\necho ${name:(-1)} #=&gt; \"n\" (slicing from right)\necho ${name:(-2):1} #=&gt; \"h\" (slicing from right)\necho ${food:-Cake} #=&gt; $food or \"Cake\"\n</code></pre>\n\n<pre><code class=\"language-bash\">length=2\necho ${name:0:length} #=&gt; \"Jo\"\n</code></pre>\n\n<p>See: <a href=\"http://wiki.bash-hackers.org/syntax/pe\">Parameter expansion</a></p>\n\n<pre><code class=\"language-bash\">STR=\"/path/to/foo.cpp\"\necho ${STR%.cpp} # /path/to/foo\necho ${STR%.cpp}.o # /path/to/foo.o\necho ${STR%/*} # /path/to\n\necho ${STR##*.} # cpp (extension)\necho ${STR##*/} # foo.cpp (basepath)\n\necho ${STR#*/} # path/to/foo.cpp\necho ${STR##*/} # foo.cpp\n\necho ${STR/foo/bar} # /path/to/bar.cpp\n</code></pre>\n\n<pre><code class=\"language-bash\">STR=\"Hello world\"\necho ${STR:6:5} # \"world\"\necho ${STR:-5:5} # \"world\"\n</code></pre>\n\n<pre><code class=\"language-bash\">SRC=\"/path/to/foo.cpp\"\nBASE=${SRC##*/} #=&gt; \"foo.cpp\" (basepath)\nDIR=${SRC%$BASE} #=&gt; \"/path/to/\" (dirpath)\n</code></pre>\n\n<h3 id=\"substitution\">Substitution</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>${FOO%suffix}</code></td>\n <td>Remove suffix</td>\n </tr>\n <tr>\n <td><code>${FOO#prefix}</code></td>\n <td>Remove prefix</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>${FOO%%suffix}</code></td>\n <td>Remove long suffix</td>\n </tr>\n <tr>\n <td><code>${FOO##prefix}</code></td>\n <td>Remove long prefix</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>${FOO/from/to}</code></td>\n <td>Replace first match</td>\n </tr>\n <tr>\n <td><code>${FOO//from/to}</code></td>\n <td>Replace all</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>${FOO/%from/to}</code></td>\n <td>Replace suffix</td>\n </tr>\n <tr>\n <td><code>${FOO/#from/to}</code></td>\n <td>Replace prefix</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code class=\"language-bash\"># Single line comment\n</code></pre>\n\n<pre><code class=\"language-bash\">: '\nThis is a\nmulti line\ncomment\n'\n</code></pre>\n\n<h3 id=\"substrings\">Substrings</h3>\n\n<table>\n <thead>\n <tr>\n <th>Expression</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>${FOO:0:3}</code></td>\n <td>Substring <em>(position, length)</em></td>\n </tr>\n <tr>\n <td><code>${FOO:(-3):3}</code></td>\n <td>Substring from the right</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"length\">Length</h3>\n\n<table>\n <thead>\n <tr>\n <th>Expression</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>${#FOO}</code></td>\n <td>Length of <code>$FOO</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"manipulation\">Manipulation</h3>\n\n<pre><code class=\"language-bash\">STR=\"HELLO WORLD!\"\necho ${STR,} #=&gt; \"hELLO WORLD!\" (lowercase 1st letter)\necho ${STR,,} #=&gt; \"hello world!\" (all lowercase)\n\nSTR=\"hello world!\"\necho ${STR^} #=&gt; \"Hello world!\" (uppercase 1st letter)\necho ${STR^^} #=&gt; \"HELLO WORLD!\" (all uppercase)\n</code></pre>\n\n<h3 id=\"default-values\">Default values</h3>\n\n<table>\n <thead>\n <tr>\n <th>Expression</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>${FOO:-val}</code></td>\n <td><code>$FOO</code>, or <code>val</code> if unset (or null)</td>\n </tr>\n <tr>\n <td><code>${FOO:=val}</code></td>\n <td>Set <code>$FOO</code> to <code>val</code> if unset (or null)</td>\n </tr>\n <tr>\n <td><code>${FOO:+val}</code></td>\n <td><code>val</code> if <code>$FOO</code> is set (and not null)</td>\n </tr>\n <tr>\n <td><code>${FOO:?message}</code></td>\n <td>Show error message and exit if <code>$FOO</code> is unset (or null)</td>\n </tr>\n </tbody>\n</table>\n\n<p>Omitting the <code>:</code> removes the (non)nullity checks, e.g. <code>${FOO-val}</code> expands to <code>val</code> if unset otherwise <code>$FOO</code>.</p>\n\n<h2 class=\"-three-column\" id=\"loops\">Loops</h2>\n\n<h3 id=\"basic-for-loop\">Basic for loop</h3>\n\n<pre><code class=\"language-bash\">for i in /etc/rc.*; do\n echo $i\ndone\n</code></pre>\n\n<h3 id=\"c-like-for-loop\">C-like for loop</h3>\n\n<pre><code class=\"language-bash\">for ((i = 0 ; i &lt; 100 ; i++)); do\n echo $i\ndone\n</code></pre>\n\n<h3 id=\"ranges\">Ranges</h3>\n\n<pre><code class=\"language-bash\">for i in {1..5}; do\n echo \"Welcome $i\"\ndone\n</code></pre>\n\n<h4 id=\"with-step-size\">With step size</h4>\n\n<pre><code class=\"language-bash\">for i in {5..50..5}; do\n echo \"Welcome $i\"\ndone\n</code></pre>\n\n<h3 id=\"reading-lines\">Reading lines</h3>\n\n<pre><code class=\"language-bash\">cat file.txt | while read line; do\n echo $line\ndone\n</code></pre>\n\n<h3 id=\"forever\">Forever</h3>\n\n<pre><code class=\"language-bash\">while true; do\n ···\ndone\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"functions\">Functions</h2>\n\n<h3 id=\"defining-functions\">Defining functions</h3>\n\n<pre><code class=\"language-bash\">myfunc() {\n echo \"hello $1\"\n}\n</code></pre>\n\n<pre><code class=\"language-bash\"># Same as above (alternate syntax)\nfunction myfunc() {\n echo \"hello $1\"\n}\n</code></pre>\n\n<pre><code class=\"language-bash\">myfunc \"John\"\n</code></pre>\n\n<h3 id=\"returning-values\">Returning values</h3>\n\n<pre><code class=\"language-bash\">myfunc() {\n local myresult='some value'\n echo $myresult\n}\n</code></pre>\n\n<pre><code class=\"language-bash\">result=\"$(myfunc)\"\n</code></pre>\n\n<h3 id=\"raising-errors\">Raising errors</h3>\n\n<pre><code class=\"language-bash\">myfunc() {\n return 1\n}\n</code></pre>\n\n<pre><code class=\"language-bash\">if myfunc; then\n echo \"success\"\nelse\n echo \"failure\"\nfi\n</code></pre>\n\n<h3 id=\"arguments\">Arguments</h3>\n\n<table>\n <thead>\n <tr>\n <th>Expression</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>$#</code></td>\n <td>Number of arguments</td>\n </tr>\n <tr>\n <td><code>$*</code></td>\n <td>All arguments</td>\n </tr>\n <tr>\n <td><code>$@</code></td>\n <td>All arguments, starting from first</td>\n </tr>\n <tr>\n <td><code>$1</code></td>\n <td>First argument</td>\n </tr>\n <tr>\n <td><code>$_</code></td>\n <td>Last argument of the previous command</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"http://wiki.bash-hackers.org/syntax/shellvars#special_parameters_and_shell_variables\">Special parameters</a>.</p>\n\n<h2 class=\"-three-column\" id=\"conditionals\">Conditionals</h2>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<p>Note that <code>[[</code> is actually a command/program that returns either <code>0</code> (true) or <code>1</code> (false). Any program that obeys the same logic (like all base utils, such as <code>grep(1)</code> or <code>ping(1)</code>) can be used as condition, see examples.</p>\n\n<table>\n <thead>\n <tr>\n <th>Condition</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>[[ -z STRING ]]</code></td>\n <td>Empty string</td>\n </tr>\n <tr>\n <td><code>[[ -n STRING ]]</code></td>\n <td>Not empty string</td>\n </tr>\n <tr>\n <td><code>[[ STRING == STRING ]]</code></td>\n <td>Equal</td>\n </tr>\n <tr>\n <td><code>[[ STRING != STRING ]]</code></td>\n <td>Not Equal</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[[ NUM -eq NUM ]]</code></td>\n <td>Equal</td>\n </tr>\n <tr>\n <td><code>[[ NUM -ne NUM ]]</code></td>\n <td>Not equal</td>\n </tr>\n <tr>\n <td><code>[[ NUM -lt NUM ]]</code></td>\n <td>Less than</td>\n </tr>\n <tr>\n <td><code>[[ NUM -le NUM ]]</code></td>\n <td>Less than or equal</td>\n </tr>\n <tr>\n <td><code>[[ NUM -gt NUM ]]</code></td>\n <td>Greater than</td>\n </tr>\n <tr>\n <td><code>[[ NUM -ge NUM ]]</code></td>\n <td>Greater than or equal</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[[ STRING =~ STRING ]]</code></td>\n <td>Regexp</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>(( NUM &lt; NUM ))</code></td>\n <td>Numeric conditions</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"more-conditions\">More conditions</h4>\n\n<table>\n <thead>\n <tr>\n <th>Condition</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>[[ -o noclobber ]]</code></td>\n <td>If OPTIONNAME is enabled</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[[ ! EXPR ]]</code></td>\n <td>Not</td>\n </tr>\n <tr>\n <td><code>[[ X &amp;&amp; Y ]]</code></td>\n <td>And</td>\n </tr>\n <tr>\n <td><code>[[ X || Y ]]</code></td>\n <td>Or</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"file-conditions\">File conditions</h3>\n\n<table>\n <thead>\n <tr>\n <th>Condition</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>[[ -e FILE ]]</code></td>\n <td>Exists</td>\n </tr>\n <tr>\n <td><code>[[ -r FILE ]]</code></td>\n <td>Readable</td>\n </tr>\n <tr>\n <td><code>[[ -h FILE ]]</code></td>\n <td>Symlink</td>\n </tr>\n <tr>\n <td><code>[[ -d FILE ]]</code></td>\n <td>Directory</td>\n </tr>\n <tr>\n <td><code>[[ -w FILE ]]</code></td>\n <td>Writable</td>\n </tr>\n <tr>\n <td><code>[[ -s FILE ]]</code></td>\n <td>Size is &gt; 0 bytes</td>\n </tr>\n <tr>\n <td><code>[[ -f FILE ]]</code></td>\n <td>File</td>\n </tr>\n <tr>\n <td><code>[[ -x FILE ]]</code></td>\n <td>Executable</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[[ FILE1 -nt FILE2 ]]</code></td>\n <td>1 is more recent than 2</td>\n </tr>\n <tr>\n <td><code>[[ FILE1 -ot FILE2 ]]</code></td>\n <td>2 is more recent than 1</td>\n </tr>\n <tr>\n <td><code>[[ FILE1 -ef FILE2 ]]</code></td>\n <td>Same files</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"example-1\">Example</h3>\n\n<pre><code class=\"language-bash\"># String\nif [[ -z \"$string\" ]]; then\n echo \"String is empty\"\nelif [[ -n \"$string\" ]]; then\n echo \"String is not empty\"\nfi\n</code></pre>\n\n<pre><code class=\"language-bash\"># Combinations\nif [[ X &amp;&amp; Y ]]; then\n ...\nfi\n</code></pre>\n\n<pre><code class=\"language-bash\"># Equal\nif [[ \"$A\" == \"$B\" ]]\n</code></pre>\n\n<pre><code class=\"language-bash\"># Regex\nif [[ \"A\" =~ . ]]\n</code></pre>\n\n<pre><code class=\"language-bash\">if (( $a &lt; $b )); then\n echo \"$a is smaller than $b\"\nfi\n</code></pre>\n\n<pre><code class=\"language-bash\">if [[ -e \"file.txt\" ]]; then\n echo \"file exists\"\nfi\n</code></pre>\n\n<h2 id=\"arrays\">Arrays</h2>\n\n<h3 id=\"defining-arrays\">Defining arrays</h3>\n\n<pre><code class=\"language-bash\">Fruits=('Apple' 'Banana' 'Orange')\n</code></pre>\n\n<pre><code class=\"language-bash\">Fruits[0]=\"Apple\"\nFruits[1]=\"Banana\"\nFruits[2]=\"Orange\"\n</code></pre>\n\n<h3 id=\"working-with-arrays\">Working with arrays</h3>\n\n<pre><code class=\"language-bash\">echo ${Fruits[0]} # Element #0\necho ${Fruits[-1]} # Last element\necho ${Fruits[@]} # All elements, space-separated\necho ${#Fruits[@]} # Number of elements\necho ${#Fruits} # String length of the 1st element\necho ${#Fruits[3]} # String length of the Nth element\necho ${Fruits[@]:3:2} # Range (from position 3, length 2)\necho ${!Fruits[@]} # Keys of all elements, space-separated\n</code></pre>\n\n<h3 id=\"operations\">Operations</h3>\n\n<pre><code class=\"language-bash\">Fruits=(\"${Fruits[@]}\" \"Watermelon\") # Push\nFruits+=('Watermelon') # Also Push\nFruits=( ${Fruits[@]/Ap*/} ) # Remove by regex match\nunset Fruits[2] # Remove one item\nFruits=(\"${Fruits[@]}\") # Duplicate\nFruits=(\"${Fruits[@]}\" \"${Veggies[@]}\") # Concatenate\nlines=(`cat \"logfile\"`) # Read from file\n</code></pre>\n\n<h3 id=\"iteration\">Iteration</h3>\n\n<pre><code class=\"language-bash\">for i in \"${arrayName[@]}\"; do\n echo $i\ndone\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"dictionaries\">Dictionaries</h2>\n\n<h3 id=\"defining\">Defining</h3>\n\n<pre><code class=\"language-bash\">declare -A sounds\n</code></pre>\n\n<pre><code class=\"language-bash\">sounds[dog]=\"bark\"\nsounds[cow]=\"moo\"\nsounds[bird]=\"tweet\"\nsounds[wolf]=\"howl\"\n</code></pre>\n\n<p>Declares <code>sound</code> as a Dictionary object (aka associative array).</p>\n\n<h3 id=\"working-with-dictionaries\">Working with dictionaries</h3>\n\n<pre><code class=\"language-bash\">echo ${sounds[dog]} # Dog's sound\necho ${sounds[@]} # All values\necho ${!sounds[@]} # All keys\necho ${#sounds[@]} # Number of elements\nunset sounds[dog] # Delete dog\n</code></pre>\n\n<h3 id=\"iteration-1\">Iteration</h3>\n\n<h4 id=\"iterate-over-values\">Iterate over values</h4>\n\n<pre><code class=\"language-bash\">for val in \"${sounds[@]}\"; do\n echo $val\ndone\n</code></pre>\n\n<h4 id=\"iterate-over-keys\">Iterate over keys</h4>\n\n<pre><code class=\"language-bash\">for key in \"${!sounds[@]}\"; do\n echo $key\ndone\n</code></pre>\n\n<h2 id=\"options\">Options</h2>\n\n<h3 id=\"options-1\">Options</h3>\n\n<pre><code class=\"language-bash\">set -o noclobber # Avoid overlay files (echo \"hi\" &gt; foo)\nset -o errexit # Used to exit upon error, avoiding cascading errors\nset -o pipefail # Unveils hidden failures\nset -o nounset # Exposes unset variables\n</code></pre>\n\n<h3 id=\"glob-options\">Glob options</h3>\n\n<pre><code class=\"language-bash\">shopt -s nullglob # Non-matching globs are removed ('*.foo' =&gt; '')\nshopt -s failglob # Non-matching globs throw errors\nshopt -s nocaseglob # Case insensitive globs\nshopt -s dotglob # Wildcards match dotfiles (\"*.sh\" =&gt; \".foo.sh\")\nshopt -s globstar # Allow ** for recursive matches ('lib/**/*.rb' =&gt; 'lib/a/b/c.rb')\n</code></pre>\n\n<p>Set <code>GLOBIGNORE</code> as a colon-separated list of patterns to be removed from glob\nmatches.</p>\n\n<h2 id=\"history\">History</h2>\n\n<h3 id=\"commands\">Commands</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>history</code></td>\n <td>Show history</td>\n </tr>\n <tr>\n <td><code>shopt -s histverify</code></td>\n <td>Don’t execute expanded result immediately</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"expansions\">Expansions</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>!$</code></td>\n <td>Expand last parameter of most recent command</td>\n </tr>\n <tr>\n <td><code>!*</code></td>\n <td>Expand all parameters of most recent command</td>\n </tr>\n <tr>\n <td><code>!-n</code></td>\n <td>Expand <code>n</code>th most recent command</td>\n </tr>\n <tr>\n <td><code>!n</code></td>\n <td>Expand <code>n</code>th command in history</td>\n </tr>\n <tr>\n <td><code>!&lt;command&gt;</code></td>\n <td>Expand most recent invocation of command <code>&lt;command&gt;</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"operations-1\">Operations</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>!!</code></td>\n <td>Execute last command again</td>\n </tr>\n <tr>\n <td><code>!!:s/&lt;FROM&gt;/&lt;TO&gt;/</code></td>\n <td>Replace first occurrence of <code>&lt;FROM&gt;</code> to <code>&lt;TO&gt;</code> in most recent command</td>\n </tr>\n <tr>\n <td><code>!!:gs/&lt;FROM&gt;/&lt;TO&gt;/</code></td>\n <td>Replace all occurrences of <code>&lt;FROM&gt;</code> to <code>&lt;TO&gt;</code> in most recent command</td>\n </tr>\n <tr>\n <td><code>!$:t</code></td>\n <td>Expand only basename from last parameter of most recent command</td>\n </tr>\n <tr>\n <td><code>!$:h</code></td>\n <td>Expand only directory from last parameter of most recent command</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>!!</code> and <code>!$</code> can be replaced with any valid expansion.</p>\n\n<h3 id=\"slices\">Slices</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>!!:n</code></td>\n <td>Expand only <code>n</code>th token from most recent command (command is <code>0</code>; first argument is <code>1</code>)</td>\n </tr>\n <tr>\n <td><code>!^</code></td>\n <td>Expand first argument from most recent command</td>\n </tr>\n <tr>\n <td><code>!$</code></td>\n <td>Expand last token from most recent command</td>\n </tr>\n <tr>\n <td><code>!!:n-m</code></td>\n <td>Expand range of tokens from most recent command</td>\n </tr>\n <tr>\n <td><code>!!:n-$</code></td>\n <td>Expand <code>n</code>th token to last from most recent command</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>!!</code> can be replaced with any valid expansion i.e. <code>!cat</code>, <code>!-2</code>, <code>!42</code>, etc.</p>\n\n<h2 id=\"miscellaneous\">Miscellaneous</h2>\n\n<h3 id=\"numeric-calculations\">Numeric calculations</h3>\n\n<pre><code class=\"language-bash\">$((a + 200)) # Add 200 to $a\n</code></pre>\n\n<pre><code class=\"language-bash\">$((RANDOM%=200)) # Random number 0..200\n</code></pre>\n\n<h3 id=\"subshells\">Subshells</h3>\n\n<pre><code class=\"language-bash\">(cd somedir; echo \"I'm now in $PWD\")\npwd # still in first directory\n</code></pre>\n\n<h3 id=\"redirection\">Redirection</h3>\n\n<pre><code class=\"language-bash\">python hello.py &gt; output.txt # stdout to (file)\npython hello.py &gt;&gt; output.txt # stdout to (file), append\npython hello.py 2&gt; error.log # stderr to (file)\npython hello.py 2&gt;&amp;1 # stderr to stdout\npython hello.py 2&gt;/dev/null # stderr to (null)\npython hello.py &amp;&gt;/dev/null # stdout and stderr to (null)\n</code></pre>\n\n<pre><code class=\"language-bash\">python hello.py &lt; foo.txt # feed foo.txt to stdin for python\n</code></pre>\n\n<h3 id=\"inspecting-commands\">Inspecting commands</h3>\n\n<pre><code class=\"language-bash\">command -V cd\n#=&gt; \"cd is a function/alias/whatever\"\n</code></pre>\n\n<h3 id=\"trap-errors\">Trap errors</h3>\n\n<pre><code class=\"language-bash\">trap 'echo Error at about $LINENO' ERR\n</code></pre>\n\n<p>or</p>\n\n<pre><code class=\"language-bash\">traperr() {\n echo \"ERROR: ${BASH_SOURCE[1]} at about ${BASH_LINENO[0]}\"\n}\n\nset -o errtrace\ntrap traperr ERR\n</code></pre>\n\n<h3 id=\"caseswitch\">Case/switch</h3>\n\n<pre><code class=\"language-bash\">case \"$1\" in\n start | up)\n vagrant up\n ;;\n\n *)\n echo \"Usage: $0 {start|stop|ssh}\"\n ;;\nesac\n</code></pre>\n\n<h3 id=\"source-relative\">Source relative</h3>\n\n<pre><code class=\"language-bash\">source \"${0%/*}/../share/foo.sh\"\n</code></pre>\n\n<h3 id=\"printf\">printf</h3>\n\n<pre><code class=\"language-bash\">printf \"Hello %s, I'm %s\" Sven Olga\n#=&gt; \"Hello Sven, I'm Olga\n\nprintf \"1 + 1 = %d\" 2\n#=&gt; \"1 + 1 = 2\"\n\nprintf \"This is how you print a float: %f\" 2\n#=&gt; \"This is how you print a float: 2.000000\"\n</code></pre>\n\n<h3 id=\"directory-of-script\">Directory of script</h3>\n\n<pre><code class=\"language-bash\">DIR=\"${0%/*}\"\n</code></pre>\n\n<h3 id=\"getting-options\">Getting options</h3>\n\n<pre><code class=\"language-bash\">while [[ \"$1\" =~ ^- &amp;&amp; ! \"$1\" == \"--\" ]]; do case $1 in\n -V | --version )\n echo $version\n exit\n ;;\n -s | --string )\n shift; string=$1\n ;;\n -f | --flag )\n flag=1\n ;;\nesac; shift; done\nif [[ \"$1\" == '--' ]]; then shift; fi\n</code></pre>\n\n<h3 id=\"heredoc\">Heredoc</h3>\n\n<pre><code class=\"language-sh\">cat &lt;&lt;END\nhello world\nEND\n</code></pre>\n\n<h3 id=\"reading-input\">Reading input</h3>\n\n<pre><code class=\"language-bash\">echo -n \"Proceed? [y/n]: \"\nread ans\necho $ans\n</code></pre>\n\n<pre><code class=\"language-bash\">read -n 1 ans # Just one character\n</code></pre>\n\n<h3 id=\"special-variables\">Special variables</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>$?</code></td>\n <td>Exit status of last task</td>\n </tr>\n <tr>\n <td><code>$!</code></td>\n <td>PID of last background task</td>\n </tr>\n <tr>\n <td><code>$$</code></td>\n <td>PID of shell</td>\n </tr>\n <tr>\n <td><code>$0</code></td>\n <td>Filename of the shell script</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"http://wiki.bash-hackers.org/syntax/shellvars#special_parameters_and_shell_variables\">Special parameters</a>.</p>\n\n<h3 id=\"go-to-previous-directory\">Go to previous directory</h3>\n\n<pre><code class=\"language-bash\">pwd # /home/user/foo\ncd bar/\npwd # /home/user/foo/bar\ncd -\npwd # /home/user/foo\n</code></pre>\n\n<h3 id=\"check-for-commands-result\">Check for command’s result</h3>\n\n<pre><code class=\"language-bash\">if ping -c 1 google.com; then\n echo \"It appears you have a working internet connection\"\nfi\n</code></pre>\n\n<h3 id=\"grep-check\">Grep check</h3>\n\n<pre><code class=\"language-bash\">if grep -q 'foo' ~/.bash_history; then\n echo \"You appear to have typed 'foo' in the past\"\nfi\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://wiki.bash-hackers.org/\">Bash-hackers wiki</a> <em>(bash-hackers.org)</em></li>\n <li><a href=\"http://wiki.bash-hackers.org/syntax/shellvars\">Shell vars</a> <em>(bash-hackers.org)</em></li>\n <li><a href=\"https://learnxinyminutes.com/docs/bash/\">Learn bash in y minutes</a> <em>(learnxinyminutes.com)</em></li>\n <li><a href=\"http://mywiki.wooledge.org/BashGuide\">Bash Guide</a> <em>(mywiki.wooledge.org)</em></li>\n <li><a href=\"https://www.shellcheck.net/\">ShellCheck</a> <em>(shellcheck.net)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featured"],
"updated": "2019-10-02"
},{
"id": "blessed",
"title": "Blessed",
"url": "/blessed",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"screen\">Screen</h3>\n\n<pre><code class=\"language-js\">screen = blessed.screen({\n smartCSR: true // optimize for flickering\n autoPadding: true // ..\n})\n\nscreen.append(Element)\nscreen.destroy()\n\nscreen.width\nscreen.height\nscreen.title = 'My window title'\nscreen.key(['escape', 'q', 'C-c'], (ch, key) =&gt; { ... })\n</code></pre>\n\n<h3 id=\"element\">Element</h3>\n\n<pre><code class=\"language-js\">box = blessed.box({\n style: { fg, bg, border.fg, scrollbar.bg, focus.bg, hover.bg },\n border: { type: 'line'|'bg', bg, fg, bold, underline }\n tags: true, // parse {bold}tags{/bold}\n\n top, left, width, height,\n width: '100%',\n height: '100%-1',\n top: 'center'\n})\n</code></pre>\n\n<h3 id=\"tags\">Tags</h3>\n\n<pre><code>{bold}\n{right} {center}\n{|} left-right separator\n{#c0ff33-fg}{/}\n</code></pre>\n\n<pre><code>blessed.escape('...')\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "bluebird",
"title": "bluebird.js",
"url": "/bluebird",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"also-see\">Also see</h3>\n\n<p>Also see the <a href=\"promise.html\">promise cheatsheet</a> and <a href=\"https://github.com/petkaantonov/bluebird/blob/master/API.md\">Bluebird.js API</a> (github.com).</p>\n\n<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-js\">promise\n .then(okFn, errFn)\n .spread(okFn, errFn) // *\n .catch(errFn)\n .catch(TypeError, errFn) // *\n .finally(fn) // *\n .map(function (e) { ··· }) // *\n .each(function (e) { ··· }) // *\n</code></pre>\n\n<p>Those marked with <code>*</code> are non-standard Promise API that only work with Bluebird promises.</p>\n\n<h3 id=\"multiple-return-values\">Multiple return values</h3>\n\n<pre data-line=\"4\"><code class=\"language-js\">.then(function () {\n return [ 'abc', 'def' ]\n})\n.spread(function (abc, def) {\n ···\n})\n</code></pre>\n\n<p>Use <a href=\"http://bluebirdjs.com/docs/api/promise.spread.html\">Promise.spread</a></p>\n\n<h3 id=\"multiple-promises\">Multiple promises</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">Promise.join(\n getPictures(),\n getMessages(),\n getTweets(),\n function (pics, msgs, tweets) {\n return ···\n }\n)\n</code></pre>\n\n<p>Use <a href=\"http://bluebirdjs.com/docs/api/promise.join.html\">Promise.join</a></p>\n\n<h3 id=\"multiple-promises-array\">Multiple promises (array)</h3>\n\n<ul>\n <li><a href=\"http://bluebirdjs.com/docs/api/promise.all.html\">Promise.all</a>([p]) - expect all to pass</li>\n <li><a href=\"http://bluebirdjs.com/docs/api/promise.some.html\">Promise.some</a>([p], count) - expect <code>count</code> to pass</li>\n <li><a href=\"http://bluebirdjs.com/docs/api/promise.any.html\">Promise.any</a>([p]) - same as <code>some([p], 1)</code></li>\n <li><a href=\"http://bluebirdjs.com/docs/api/promise.race.html\">Promise.race</a>([p], count) - use <code>.any</code> instead</li>\n <li><a href=\"http://bluebirdjs.com/docs/api/promise.map.html\">Promise.map</a>([p], fn, options) - supports concurrency</li>\n</ul>\n\n<pre data-line=\"1,8\"><code class=\"language-js\">Promise.all([ promise1, promise2 ])\n .then(results =&gt; {\n results[0]\n results[1]\n })\n\n// succeeds if one succeeds first\nPromise.any(promises)\n .then(results =&gt; {\n })\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-js\">Promise.map(urls, url =&gt; fetch(url))\n .then(···)\n</code></pre>\n\n<p>Use <a href=\"http://bluebirdjs.com/docs/api/promise.map.html\">Promise.map</a> to “promisify” a list of values.</p>\n\n<h3 id=\"object\">Object</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">Promise.props({\n photos: get('photos'),\n posts: get('posts')\n})\n.then(res =&gt; {\n res.photos\n res.posts\n})\n</code></pre>\n\n<p>Use <a href=\"http://bluebirdjs.com/docs/api/promise.props.html\">Promise.props</a>.</p>\n\n<h3 id=\"chain-of-promises\">Chain of promises</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">function getPhotos() {\n return Promise.try(() =&gt; {\n if (err) throw new Error(\"boo\")\n return result\n })\n}\n\ngetPhotos().then(···)\n</code></pre>\n\n<p>Use <a href=\"http://bluebirdjs.com/docs/api/promise.try.html\">Promise.try</a>.</p>\n\n<h3 id=\"node-style-functions\">Node-style functions</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">var readFile = Promise.promisify(fs.readFile)\nvar fs = Promise.promisifyAll(require('fs'))\n</code></pre>\n\n<p>See <a href=\"http://bluebirdjs.com/docs/api/promisification.html\">Promisification</a>.</p>\n\n<h3 id=\"promise-returning-methods\">Promise-returning methods</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">User.login = Promise.method((email, password) =&gt; {\n if (!valid)\n throw new Error(\"Email not valid\")\n\n return /* promise */\n})\n</code></pre>\n\n<p>See <a href=\"http://bluebirdjs.com/docs/api/promise.method.html\">Promise.method</a>.</p>\n\n<h3 id=\"generators\">Generators</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">User.login = Promise.coroutine(function* (email, password) {\n let user = yield User.find({email: email}).fetch()\n return user\n})\n</code></pre>\n\n<p>See <a href=\"http://bluebirdjs.com/docs/api/promise.coroutine.html\">Promise.coroutine</a>.</p>\n\n<h2 id=\"reference\">Reference</h2>\n\n<p><a href=\"http://bluebirdjs.com/docs/api-reference.html\">http://bluebirdjs.com/docs/api-reference.html</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-04"
},{
"id": "bolt",
"title": "Bolt Quickstart",
"url": "/bolt",
"category": "Bolt",
"keywords": ["Puppet","tasks","modules"],
"content_html": "<h3 id=\"install-bolt\">Install Bolt</h3>\n\n<pre><code class=\"language-bash\"># On MacOS\nbrew cask install puppetlabs/puppet/puppet-bolt\n# On Windows\nchoco install puppet-bolt\n</code></pre>\n\n<p>Bolt is available as a package for most platforms. See <a href=\"https://puppet.com/docs/bolt/latest/bolt_installing.html\">installing bolt</a></p>\n\n<h3 id=\"create-a-module-with-a-task\">Create a module with a task</h3>\n\n<pre><code class=\"language-bash\">mkdir -p ~/.puppetlabs/bolt/modules/mymodule/tasks\ncp myscript.sh ~/.puppetlabs/bolt/modules/mymodule/tasks/\n</code></pre>\n\n<p>Tasks can be written in any language your targets can run. See <a href=\"https://puppet.com/docs/bolt/latest/writing_tasks.html\">writing tasks</a> for more details.</p>\n\n<h3 id=\"run-bolt\">Run Bolt</h3>\n\n<pre><code class=\"language-bash\">bolt task run mymodule::myscript -n node1.example.com,node2.example.com --private-key ~/.ssh/id_rsa-private\n</code></pre>\n\n<p>See <code>bolt task run --help</code> for more information and command line options.</p>",
"intro_html": "",
"description_html": "<p>A quick guide to getting started writing Bolt tasks</p>",
"tags": null,
"updated": "2018-12-25"
},{
"id": "bookshelf",
"title": "Bookshelf.js",
"url": "/bookshelf",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"model\">Model</h2>\n\n<pre><code class=\"language-js\">Summary = bookshelf.Model.extend({\n tableName: 'summaries',\n hasTimestamps: true,\n hasTimestamps: ['created_at', 'updated_at'],\n})\n</code></pre>\n\n<h3 id=\"associations\">Associations</h3>\n\n<pre><code class=\"language-js\">Summary = bookshelf.Model.extend({\n book () {\n return this.belongsTo(Book)\n },\n author () {\n return this.hasOne(Author)\n }\n // belongsToMany\n // hasMany\n // hasMany().through()\n})\n</code></pre>\n\n<h3 id=\"crud\">CRUD</h3>\n\n<pre><code class=\"language-js\">Book.create({ title: '..' }).save()\nnew Book({ title: '..' }).save()\n\nnew Book({ id: 1 }).fetch()\n\nBook.where({ id: 1 }).fetch()\nBook.where('favorite_color', 'red').fetch()\nBook.where('favorite_color', '&lt;&gt;', 'red').fetch()\nBook\n .query((q) =&gt; q.orderBy('updated_at')\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "bootstrap",
"title": "Bootstrap",
"url": "/bootstrap",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"screen-sizes\">Screen sizes</h3>\n\n<pre><code> 768 992 1200\n' ' ' ' ' ' ' ' '\n&lt;---------^------------^------------------^---------&gt;\n xs sm md lg\n (phone) (tablet) (laptop) (desktop)\n</code></pre>\n\n<p>Min:</p>\n\n<pre><code class=\"language-scss\">@media (min-width: @screen-sm-min) // &gt;= 768px (small tablet)\n@media (min-width: @screen-md-min) // &gt;= 992px (medium laptop)\n@media (min-width: @screen-lg-min) // &gt;= 1200px (large desktop)\n</code></pre>\n\n<p>Max:</p>\n\n<pre><code class=\"language-scss\">@media (max-width: @screen-xs-max) { // &lt; 768px (xsmall phone)\n@media (max-width: @screen-sm-max) { // &lt; 992px (small tablet)\n@media (max-width: @screen-md-max) { // &lt; 1200px (medium laptop)\n</code></pre>\n\n<h3 id=\"columns\">Columns</h3>\n\n<pre><code class=\"language-scss\">.container\n.container-fluid\n</code></pre>\n\n<pre><code class=\"language-scss\">.col-xs-1\n.col-sm-1\n.col-md-1\n.col-lg-1\n.col-md-offset-1\n</code></pre>\n\n<p>Mixins:</p>\n\n<pre><code class=\"language-scss\">@include make-xs-column(12);\n@include make-sm-column(6);\n@include make-md-column(3);\n@include make-lg-column(3);\n</code></pre>\n\n<pre><code class=\"language-scss\">@include make-sm-column-offset(1);\n@include make-sm-column-push(1);\n@include make-sm-column-pull(1);\n</code></pre>\n\n<h3 id=\"utilities\">Utilities</h3>\n\n<pre><code class=\"language-scss\">.pull-left\n.pull-right\n</code></pre>\n\n<pre><code class=\"language-scss\">.hidden-{xs,sm,md,lg}\n.visible-{xs,sm,md,lg}\n.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}\n</code></pre>\n\n<pre><code class=\"language-scss\">.center-block /* margin: auto */\n.clearfix\n.text-{center,left,right,justify,nowrap}\n.text-{lowercase,uppercase,capitalize}\n</code></pre>\n\n<pre><code class=\"language-scss\">.show\n.hidden\n</code></pre>\n\n<h3 id=\"modal\">Modal</h3>\n\n<pre><code class=\"language-html\">&lt;a data-toggle='modal' data-target='#new'&gt;\n</code></pre>\n\n<pre><code class=\"language-haml\">#new.modal.fade(role='dialog')\n .modal-dialog // .modal-lg, .modal-sm\n .modal-content\n .modal-header\n %h4.modal-title hello\n %button.close{type: 'button', data: { dismiss: 'modal' }}\n %span{'aria-hidden' =&gt; true}!= \"&amp;times;\"\n %span.sr-only Close\n .modal-body\n ...\n .modal-footer\n ...\n</code></pre>\n\n<h3 id=\"modal-via-ajax-rails\">Modal via ajax (Rails)</h3>\n\n<pre><code class=\"language-haml\">%button.btn{data: { |\n toggle: 'modal', |\n target: '#chooseTheme', |\n remote: '/path/to/remote'}\n Change Theme\n</code></pre>\n\n<pre><code class=\"language-haml\">.modal.fade#chooseTheme\n .modal-dialog.modal-xl\n .modal-content\n .modal-header\n %h4.modal-title Choose a theme\n\n .modal-body\n .spinner-panel.-lg\n %i\n</code></pre>\n\n<h3 id=\"tooltip\">Tooltip</h3>\n\n<pre><code class=\"language-html\">&lt;span\n data-toggle='tooltip'\n title='tooltip'\n data-placement='left|top|bottom|right'&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">$(function () {\n $('[data-toogle~=\"tooltip\"]').tooltip()\n})\n</code></pre>\n\n<h3 id=\"input-groups\">Input groups</h3>\n\n<pre><code class=\"language-haml\">.input-group\n input.form-control(type='text')\n .input-group-addon years\n</code></pre>",
"intro_html": "",
"description_html": "<p>.container .row .col-md-6, @screen-sm-min, .form-control, grids, .modal-content, tooltips, and other Bootstrap CSS examples.</p>",
"tags": null,
"updated": null
},{
"id": "deprecated/bower-api",
"title": "Bower API",
"url": "/deprecated/bower-api",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code class=\"language-js\">require('bower').config\n</code></pre>\n\n<pre><code class=\"language-js\">{ cwd: '/Users/rsc',\n directory: 'bower_components',\n registry:\n { search: [ 'https://bower.herokuapp.com' ],\n register: 'https://bower.herokuapp.com',\n publish: 'https://bower.herokuapp.com' },\n shorthandResolver: 'git://github.com//.git',\n tmp: '/var/folders/5y/190gjd_j2c5bfkn563dk2xdr0000gn/T/rsc/bower',\n timeout: 30000,\n ca: { search: [] },\n strictSsl: true,\n userAgent: 'node/v0.10.33 darwin x64',\n color: true,\n storage:\n { packages: '/Users/rsc/.cache/bower/packages',\n links: '/Users/rsc/.local/share/bower/links',\n completion: '/Users/rsc/.local/share/bower/completion',\n registry: '/Users/rsc/.cache/bower/registry',\n empty: '/Users/rsc/.local/share/bower/empty' },\n interactive: false,\n argv: { remain: [], cooked: [], original: [] } }\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "browser-sync",
"title": "Browsersync",
"url": "/browser-sync",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre class=\"terminal\"><code>npm i -g browser-sync\n</code></pre>\n\n<h3 id=\"start-a-server\">Start a server</h3>\n\n<pre><code class=\"language-sh\">browser-sync start --server &lt;path&gt; --files='**/*.html, **/*.css'\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-sh\"> --port=N\n --proxy=\"http://127.0.0.1:3000\"\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li><a href=\"http://browsersync.io\">browsersync.io</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "browserify",
"title": "Browserify",
"url": "/browserify",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code>browserify input.js\n -o output.js\n -t coffeeify\n -t [ coffeeify --extension coffee ]\n\n -u react (--exclude: omit a file)\n -x react (--external: reference in another bundle)\n -i react (--ignore: stub a file)\n -s Myapp (--standalone: generate a UMD bundle)\n --debug\n</code></pre>\n\n<h3 id=\"programmatic-usage\">Programmatic usage</h3>\n\n<pre><code>browserify = require('browserify')\nbrowserify()\n .add('main.js')\n .bundle()\n .transform(coffeeify)\n .transform({extensions: '.coffee'}, coffeeify)\n .pipe(process.stdout)\n\nbrowserify({})\n</code></pre>\n\n<h3 id=\"tools\">Tools</h3>\n\n<ul>\n <li>watchify (recompiles on demand)</li>\n <li>beefy (http server)</li>\n <li>debowerify</li>\n <li>es6ify (es6 to es5)</li>\n</ul>\n\n<p>Transforms</p>\n\n<ul>\n <li>coffeeify</li>\n <li>ractify</li>\n <li>reactify</li>\n <li>brfs</li>\n <li>cssify</li>\n <li>https://github.com/substack/node-browserify/wiki/list-of-transforms</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "brunch",
"title": "Brunch",
"url": "/brunch",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"paths\">Paths</h2>\n\n<pre><code>/\n app/\n assets/\n vendor/\n public/\n config.coffee\n</code></pre>\n\n<h2 id=\"config\">Config</h2>\n\n<pre><code class=\"language-js\">module.exports = {\n files: {\n javascripts: { # or 'stylesheets' or 'templates'\n order: {\n before: [ 'normalize.css' ],\n after: [ 'helpers.css' ],\n\n joinTo: 'app.js',\n joinTo: {\n 'js/app.js': /^app/,\n 'js/vendor.js': /^vendor/\n },\n pluginHelpers: 'js/vendor.js'\n }\n }\n\n paths: {\n public: 'public', # where to compile\n watched: ['app','test','vendor'], # what to monitor\n }\n\n modules: {\n wrapper: 'amd',\n definition: 'amd',\n nameCleaner: (path) =&gt; path.replace(/^app\\//, '')\n }\n\n npm: { styles, globals }\n\n plugins: {\n sass: { ... }\n }\n\n // brunch w --apply testing\n // BRUNCH_ENV=testing brunch build\n overrides: {\n production: {\n optimize: true,\n sourceMaps: false,\n plugins: { autoReload: { enabled: false } }\n }\n }\n\n onCompile: (files, assets) =&gt; { ... }\n</code></pre>\n\n<h2 id=\"plugins\">Plugins</h2>\n\n<pre><code>plugins:\n uglify:\n mangle: true\n compress:\n global_defs:\n DEBUG: false\n</code></pre>\n\n<h2 id=\"extensions\">Extensions</h2>\n\n<p>Compile to CSS</p>\n\n<ul>\n <li>stylus-brunch</li>\n <li>less-brunch</li>\n <li>sass-brunch</li>\n</ul>\n\n<p>Compile to HTML</p>\n\n<ul>\n <li>static-jade-brunch</li>\n</ul>\n\n<p>Embedded templates</p>\n\n<ul>\n <li>emblem-brunch</li>\n</ul>\n\n<p>Etc</p>\n\n<ul>\n <li>uglify-js-brunch</li>\n <li>jshint-brunch</li>\n <li>imageoptimizer-brunch</li>\n</ul>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://github.com/brunch/brunch/blob/master/docs/config.md\">https://github.com/brunch/brunch/blob/master/docs/config.md</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "bulma",
"title": "Bulma",
"url": "/bulma",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"screen-sizes\">Screen sizes</h3>\n\n<pre><code> 768 1024 1216 1408\n' ' ' ' ' ' ' ' ' ' ' '\n&lt;---------^------------^------------------^-------------^-------------&gt;\n mobile tablet desktop widescreen fullhd\n</code></pre>\n\n<h3 id=\"columns\">Columns</h3>\n\n<pre><code class=\"language-css\">.container\n</code></pre>\n<p>Wrap as many <code>.column</code>’s’ as you like in a <code>.columns</code> wrapper</p>\n<pre><code class=\"language-html\">&lt;div class=\"columns\"&gt;\n &lt;div class=\"column\"&gt;&lt;/div&gt;\n &lt;div class=\"column\"&gt;&lt;/div&gt;\n &lt;div class=\"column\"&gt;&lt;/div&gt;\n &lt;div class=\"column\"&gt;&lt;/div&gt;\n &lt;div class=\"column\"&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n<h3 id=\"modifiers\">Modifiers</h3>\n\n<p>The following CSS classes affect the <strong>colour</strong>.</p>\n\n<pre><code class=\"language-css\">.is-primary\n.is-link\n.is-info\n.is-success\n.is-warning\n.is-danger\n</code></pre>\n\n<p>The following classes modify the <strong>size</strong>.</p>\n<pre><code class=\"language-css\">.is-small\n.is-medium\n.is-large\n</code></pre>\n\n<p>The following classes modify the <strong>state</strong>.</p>\n<pre><code class=\"language-scss\">.is-outlined\n.is-loading\n</code></pre>\n\n<h3 id=\"typography-helpers\">Typography Helpers</h3>\n\n<p>The following classes modify the <strong>font-size</strong></p>\n\n<table>\n <thead>\n <tr>\n <th>Class</th>\n <th>Font-size</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.is-size-1</code></td>\n <td>3rem</td>\n </tr>\n <tr>\n <td><code>.is-size-2</code></td>\n <td>2.5rem</td>\n </tr>\n <tr>\n <td><code>.is-size-3</code></td>\n <td>2rem</td>\n </tr>\n <tr>\n <td><code>.is-size-4</code></td>\n <td>1.5rem</td>\n </tr>\n <tr>\n <td><code>.is-size-5</code></td>\n <td>1.25rem</td>\n </tr>\n <tr>\n <td><code>.is-size-6</code></td>\n <td>1rem</td>\n </tr>\n <tr>\n <td><code>.is-size-7</code></td>\n <td>0.75rem</td>\n </tr>\n </tbody>\n</table>\n\n<p>The following classes <strong>align</strong> the text</p>\n\n<table>\n <thead>\n <tr>\n <th>Class</th>\n <th>Alignment</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.has-text-centered</code></td>\n <td>Makes the text <strong>centered</strong></td>\n </tr>\n <tr>\n <td><code>.has-text-justified</code></td>\n <td>Makes the text <strong>justified</strong></td>\n </tr>\n <tr>\n <td><code>.has-text-left</code>.</td>\n <td>Makes the text align to the <strong>left</strong></td>\n </tr>\n <tr>\n <td><code>.has-text-right</code></td>\n <td>Makes the text align to the <strong>right</strong></td>\n </tr>\n </tbody>\n</table>\n\n<p>The following classes <strong>transform</strong> the text</p>\n\n<table>\n <thead>\n <tr>\n <th>Class</th>\n <th>Transformation</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.is-capitalized</code></td>\n <td>Transforms the <strong>first character</strong> of each word to <strong>uppercase</strong></td>\n </tr>\n <tr>\n <td><code>.is-lowercase</code></td>\n <td>Transforms <strong>all</strong> characters to <strong>lowercase</strong></td>\n </tr>\n <tr>\n <td><code>.is-uppercase</code></td>\n <td>Transforms <strong>all</strong> characters to <strong>uppercase</strong></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"wysiwyg-content\">WYSIWYG Content</h3>\n\n<pre><code class=\"language-html\">&lt;div class=\"content\"&gt;\n &lt;!-- start WYSIWYG contents --&gt;\n &lt;h1&gt;Heading&lt;/h1&gt;\n &lt;p&gt;Paragraph&lt;/p&gt;\n\n &lt;ul&gt;\n &lt;li&gt;Item 1&lt;/li&gt;\n &lt;li&gt;Item 2&lt;/li&gt;\n &lt;/ul&gt;\n &lt;!-- end WYSIWYG contents --&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>To provide default stylings for commonly generated WYSIWYG contents, use the <code>.content</code> class.</p>",
"intro_html": "",
"description_html": "<p>Basic guide on how to use Bulma, the lightweight css flexbox framework.</p>",
"tags": null,
"updated": "2018-11-19"
},{
"id": "bundler",
"title": "Bundler",
"url": "/bundler",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"commands\">Commands</h3>\n\n<pre><code>bundle # same as bundle install\nbundle install # installs gems\nbundle install -j3 # faster (3 jobs)\nbundle update # update all gems\nbundle update --source gemname # update specified gem\n\nbundle outdated # show outdated gems\ncd `bundle show rails` # inspect a gem's dir\n\nbundle gem # new gem skeleton\n</code></pre>\n\n<h3 id=\"gems\">Gems</h3>\n\n<pre><code>gem 'hello'\ngem 'hello', group: 'development'\n</code></pre>\n\n<h3 id=\"github-support\">Github support</h3>\n\n<pre><code>gem 'hello', github: 'rstacruz/hello'\ngem 'hello', github: 'rstacruz/hello', 'branch: master'\n</code></pre>\n\n<h3 id=\"grouping\">Grouping</h3>\n\n<pre><code>group :development do\n gem 'hello'\nend\n</code></pre>\n\n<h3 id=\"deployment\">Deployment</h3>\n\n<pre><code>$ bundle install --without=test,development --deployment\n</code></pre>\n\n<h3 id=\"local-gem-development\">Local gem development</h3>\n\n<p>In your Gemfile, define a Git source and a branch:</p>\n\n<pre><code>gem 'hello', github: 'rstacruz/hello', branch: 'master'\n</code></pre>\n\n<p>And then:</p>\n\n<pre><code>$ bundle config --global local.xxx ~/projects/xxx\n</code></pre>\n\n<h3 id=\"rake-gem-tasks\">Rake Gem tasks</h3>\n\n<pre><code># Rakefile\nrequire 'bundler/gem_tasks'\n</code></pre>\n\n<p>Terminal:</p>\n\n<pre><code>$ rake release\n$ rake build\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "c_preprocessor",
"title": "C Preprocessor",
"url": "/c_preprocessor",
"category": "C-like",
"keywords": null,
"content_html": "<h3 id=\"compiling\">Compiling</h3>\n\n<pre><code>$ cpp -P file &gt; outfile\n</code></pre>\n\n<h3 id=\"includes\">Includes</h3>\n\n<pre><code>#include \"file\"\n</code></pre>\n\n<h3 id=\"defines\">Defines</h3>\n\n<pre><code>#define FOO\n#define FOO \"hello\"\n\n#undef FOO\n</code></pre>\n\n<h3 id=\"if\">If</h3>\n\n<pre><code>#ifdef DEBUG\n console.log('hi');\n#elif defined VERBOSE\n ...\n#else\n ...\n#endif\n</code></pre>\n\n<h3 id=\"error\">Error</h3>\n\n<pre><code>#if VERSION == 2.0\n #error Unsupported\n #warning Not really supported\n#endif\n</code></pre>\n\n<h3 id=\"macro\">Macro</h3>\n\n<pre><code>#define DEG(x) ((x) * 57.29)\n</code></pre>\n\n<h3 id=\"token-concat\">Token concat</h3>\n\n<pre><code>#define DST(name) name##_s name##_t\nDST(object); #=&gt; \"object_s object_t;\"\n</code></pre>\n\n<h3 id=\"file-and-line\">file and line</h3>\n\n<pre><code>#define LOG(msg) console.log(__FILE__, __LINE__, msg)\n#=&gt; console.log(\"file.txt\", 3, \"hey\")\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "camp",
"title": "Camp",
"url": "/camp",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"quick-start\">Quick start</h3>\n\n<h4 class=\"-file\" id=\"appjs\">app.js</h4>\n\n<pre><code class=\"language-js\">const Camp = require('camp')\nconst camp = Camp.start({ port: 1234 })\n</code></pre>\n\n<h4 class=\"-file\" id=\"webindexhtml\">web/index.html</h4>\n\n<pre><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;body&gt;Hello world!&lt;/body&gt;\n</code></pre>\n\n<p>Camp serves files in <code>web/</code> by default.</p>\n\n<h3 id=\"routes\">Routes</h3>\n\n<h4 id=\"handles-searchqrainbows\">Handles <code>/search?q=rainbows</code></h4>\n\n<pre data-line=\"2\"><code class=\"language-js\">camp.path('/search', (req, res) =&gt; {\n const q = res.query.q\n res.json({ results: ··· })\n})\n</code></pre>\n\n<p>Also available: <code>camp.post</code>, <code>camp.get</code>.</p>\n\n<h3 id=\"templates\">Templates</h3>\n\n<pre data-line=\"1,4\"><code class=\"language-js\">const tpl = Camp.template('./templates/post.html')\n\ncamp.path('/blog/:post.html', (req, res) =&gt; {\n res.template({\n text: 'Hello world'\n }, tpl)\n})\n</code></pre>\n\n<p>See: <a href=\"https://github.com/espadrine/sc/blob/master/doc/Readme.md#templates\">Templates</a></p>\n\n<h3 id=\"not-found\">Not found</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">camp.notFound('/*.lol', (req, res) =&gt; {\n res.file('/404.html')\n})\n</code></pre>\n\n<p>See: <a href=\"https://github.com/espadrine/sc/blob/master/doc/Readme.md#fall-through\">Fall through</a></p>\n\n<h3 id=\"low-level-handler\">Low level handler</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">camp.handle((req, res, next) =&gt; {\n res.setHeader('X-Hello', 'world')\n next()\n})\n</code></pre>\n\n<p>See: <a href=\"https://github.com/espadrine/sc/blob/master/doc/Readme.md#handlers\">Handlers</a></p>\n\n<h2 id=\"templates-1\">Templates</h2>\n\n<h3 id=\"basic-templates\">Basic templates</h3>\n\n<pre data-line=\"1,4,5,6\"><code class=\"language-js\">const tpl = Camp.template('/templates/post.html')\n\ncamp.path('/blog/:post.html', (req, res) =&gt; {\n res.template({\n text: 'Hello world'\n }, tpl)\n})\n</code></pre>\n\n<h3 id=\"implicit-templates\">Implicit templates</h3>\n\n<pre><code class=\"language-js\">camp.path('blog.html')\n</code></pre>\n\n<p>Uses <code>blog.html</code> as a template.</p>\n\n<p>See: <a href=\"https://github.com/espadrine/sc/blob/master/doc/Readme.md#templates\">Templates</a></p>\n\n<h2 id=\"advanced-features\">Advanced features</h2>\n\n<h3 id=\"web-sockets\">Web sockets</h3>\n\n<pre><code class=\"language-js\">camp.ws('/path', (socket) =&gt; { ··· })\n</code></pre>\n\n<pre><code class=\"language-js\">camp.wsChannels[path]\n</code></pre>\n\n<pre><code class=\"language-js\">camp.wsBroadcast('/path', (req, res) =&gt; {\n})\n</code></pre>\n\n<p>Sorry I don’t completely understand this yet, but check it out in their docs.</p>\n\n<p>See: <a href=\"https://github.com/espadrine/sc/blob/master/doc/Readme.md#websocket\">WebSocket</a></p>",
"intro_html": "<p><a href=\"https://github.com/espadrine/sc/\">Camp</a> is a Node.js web server framework. This guide targets Camp v17.x.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-21"
},{
"id": "canvas",
"title": "Canvas",
"url": "/canvas",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"getting-the-context\">Getting the context</h3>\n\n<pre><code class=\"language-js\">var canvas = document.getElementById('c')\nvar c = canvas.getContext('2d')\n</code></pre>\n\n<h3 id=\"basic-drawing\">Basic drawing</h3>\n\n<pre><code class=\"language-js\">// x = 10, y = 20, width = 200, height = 100\nc.fillStyle = '#ff0000'\nc.strokeStyle = '#ff00ff'\n</code></pre>\n\n<pre><code class=\"language-js\">c.lineWidth = 5\nc.lineCap = 'round'\n</code></pre>\n\n<pre><code class=\"language-js\">c.fillRect(10, 20, 200, 100)\n</code></pre>\n\n<pre><code class=\"language-js\">c.stroke()\nc.fill()\n</code></pre>\n\n<h3 id=\"saving-and-restoring\">Saving and restoring</h3>\n\n<pre><code class=\"language-js\">c.save()\n</code></pre>\n\n<pre><code class=\"language-js\">c.restore()\n</code></pre>\n\n<p>Saves: <code>strokeStyle</code> <code>fillStyle</code> <code>globalAlpha</code> <code>lineWidth</code> <code>lineCap</code> <code>lineJoin</code> <code>miterLimit</code> <code>shadowOffsetX</code> <code>shadowOffsetY</code> <code>shadowBlur</code> <code>shadowColor</code>\n<code>globalCompositeOperation</code>, Transformations (<code>translate</code> <code>rotate</code> <code>scale</code> <code>transform</code> <code>setTransform</code>), Clipping path</p>\n\n<h3 id=\"animation\">Animation</h3>\n\n<pre><code class=\"language-js\">onframe: function() {\n c.clearRect(0, 0, w, h)\n}\n</code></pre>\n\n<h3 id=\"transformations\">Transformations</h3>\n\n<pre><code class=\"language-js\">c.translate(0, 0)\nc.rotate(Math.PI*2/5)\nc.scale(1.0, 1.0)\n</code></pre>\n\n<p>To rotate along origin:</p>\n\n<pre><code class=\"language-js\">c.translate(ox, oy)\nc.rotate(theta)\nc.translate(-ox, -oy)\n</code></pre>\n\n<p>To scale along origin:</p>\n\n<pre><code class=\"language-js\">c.translate(-ox*x, -oy*y)\nc.scale(x, y)\nc.translate(ox/x, oy/y)\n</code></pre>\n\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Transformations\">MDN: Transformations</a>.</p>\n\n<h3 id=\"image-drawing\">Image drawing</h3>\n\n<pre><code class=\"language-js\">c.drawImage(image, dx, dy, [dw, dh]);\n/* `image` can be HTML Image/Canvas/Video */\n</code></pre>\n\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Using_images\">MDN: Images</a>.</p>\n\n<h3 id=\"colors-styles-shadows\">Colors, styles shadows</h3>\n\n<pre><code class=\"language-js\">c.strokeStyle = '#ff00ff';\nc.fillStyle = '#ff00ff';\n</code></pre>\n\n<pre><code class=\"language-js\">c.shadowOffsetX = 0;\nc.shadowOffsetY = 0;\nc.shadowOffsetBlur = 3.0;\nc.shadowColor = 'rgba(0,0,0,0.2)';\n</code></pre>\n\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors\">MDN: Styles</a></p>\n\n<h3 id=\"gradients\">Gradients</h3>\n\n<pre><code class=\"language-js\">gr = c.createLinearGradient(x0,y0,x1,y1)\ngr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)\npat = c.createPattern(image, 'repeat-x')\n</code></pre>\n\n<pre><code class=\"language-js\">c.fillStyle = gr\n</code></pre>\n\n<h3 id=\"drawing\">Drawing</h3>\n\n<pre><code class=\"language-js\">c.beginPath()\nc.moveTo(x,y)\nc.lineTo(x,y)\nc.quadraticCurveTo(cpx,cpy,x,y)\nc.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)\nc.arcTo(...)\nc.arc(...)\nc.closePath()\n</code></pre>\n\n<h3 id=\"more-resources\">More resources</h3>\n\n<ul>\n <li><a href=\"http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf\">Canvas Cheatsheet PDF</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "capybara",
"title": "Capybara",
"url": "/capybara",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"navigating\">Navigating</h3>\n\n<pre><code>visit articles_path\n</code></pre>\n\n<h3 id=\"clicking-links-and-buttons\">Clicking links and buttons</h3>\n\n<pre><code class=\"language-ruby\">click_on 'Link Text'\nclick_button\nclick_link\n</code></pre>\n\n<h3 id=\"interacting-with-forms\">Interacting with forms</h3>\n\n<pre><code class=\"language-ruby\">attach_file 'Image', '/path/to/image.jpg'\nfill_in 'First Name', with: 'John'\n</code></pre>\n\n<pre><code class=\"language-ruby\">check 'A checkbox'\nuncheck 'A checkbox'\n</code></pre>\n\n<pre><code class=\"language-ruby\">choose 'A radio button'\n</code></pre>\n\n<pre><code class=\"language-ruby\">select 'Option', from: 'Select box'\nunselect\n</code></pre>\n\n<h3 id=\"limiting\">Limiting</h3>\n\n<pre><code class=\"language-ruby\">within '.classname' do\n click '...'\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">within_fieldset :id do\n ...\nend\n</code></pre>\n\n<h2 id=\"querying\">Querying</h2>\n\n<h3 id=\"predicates\">Predicates</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">page.has_css?('.button')\nexpect(page).to have_css('.button')\npage.should have_css('.button')\n</code></pre>\n\n<table class=\"-headers -left-align\">\n <thead>\n <tr>\n <th>Positive</th>\n <th>Negative</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>has_content?</code></td>\n <td><code>has_no_content?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_css?</code> <em>(selector)</em></td>\n <td><code>has_no_css?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_xpath?</code> <em>(path)</em></td>\n <td><code>has_no_xpath?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_link?</code> <em>(selector)</em></td>\n <td><code>has_no_link?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_button?</code> <em>(selector)</em></td>\n <td><code>has_no_button?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_field?</code> <em>(selector)</em></td>\n <td><code>has_no_field?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_checked_field?</code> <em>(selector)</em></td>\n <td><code>has_unchecked_field?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_table?</code> <em>(selector)</em></td>\n <td><code>has_no_table?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>has_select?</code> <em>(selector)</em></td>\n <td><code>has_no_select?</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>In Rspec, these also map to matchers like <code>page.should have_content</code>.</p>\n\n<h3 id=\"selectors\">Selectors</h3>\n\n<pre><code class=\"language-ruby\">expect(page).to have_button('Save')\n</code></pre>\n\n<pre><code class=\"language-ruby\">expect(page).to have_button('#submit')\n</code></pre>\n\n<pre><code class=\"language-ruby\">expect(page).to have_button('//[@id=\"submit\"]')\n</code></pre>\n\n<p>The <code>selector</code> arguments can be text, CSS selector, or XPath expression.</p>\n\n<h3 id=\"rspec-assertions\">RSpec assertions</h3>\n\n<pre><code class=\"language-ruby\">page.has_button?('Save')\n</code></pre>\n\n<pre><code class=\"language-ruby\">expect(page).to have_no_button('Save')\n</code></pre>\n\n<p>In RSpec, you can use <code>page.should</code> assertions.</p>\n\n<h3 id=\"about-negatives\">About negatives</h3>\n\n<pre><code class=\"language-ruby\">expect(page).to have_no_button('Save') # OK\n</code></pre>\n<pre><code class=\"language-ruby\">expect(page).not_to have_button('Save') # Bad\n</code></pre>\n\n<p>Use <code>should have_no_*</code> versions with RSpec matchers because\n<code>should_not have_*</code> doesn’t wait for a timeout from the driver.</p>\n\n<h2 id=\"rspec\">RSpec</h2>\n\n<h3 id=\"matchers\">Matchers</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">expect(page).to \\\n</code></pre>\n\n<pre><code class=\"language-ruby\"> have_selector '.blank-state'\n have_selector 'h1#hola', text: 'Welcome'\n have_button 'Save'\n have_checked_field '#field'\n have_unchecked_field\n have_css '.class'\n have_field '#field'\n have_table '#table'\n have_xpath '//div'\n</code></pre>\n\n<pre><code class=\"language-ruby\"> have_link 'Logout', href: logout_path\n</code></pre>\n\n<pre><code class=\"language-ruby\"> have_select 'Language',\n selected: 'German'\n options: ['Engish', 'German']\n with_options: ['Engish', 'German'] # partial match\n</code></pre>\n\n<pre><code class=\"language-ruby\"> have_text 'Hello',\n type: :visible # or :all\n # alias: have_content\n</code></pre>\n\n<h3 id=\"common-options\">Common options</h3>\n\n<p class=\"-setup\">All matchers have these options:</p>\n\n<pre><code class=\"language-ruby\"> text: 'welcome'\n text: /Hello/\n visible: true\n count: 4\n between: 2..5\n minimum: 2\n maximum: 5\n wait: 10\n</code></pre>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 id=\"finding\">Finding</h3>\n\n<pre><code class=\"language-ruby\">find(selector)\nfind_button(selector)\nfind_by_id(id)\nfind_field(selector)\nfind_link(selector)\nlocate\n</code></pre>\n\n<h3 id=\"scoping\">Scoping</h3>\n\n<pre><code class=\"language-ruby\">within '#delivery' do\n fill_in 'Street', with: 'Hello'\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">within :xpath, '//article'\nwithin_fieldset\nwithin_table\nwithin_frame\nscope_to\n</code></pre>\n\n<pre><code class=\"language-ruby\">find('#x').fill_in('Street', with: 'Hello')\n# same as within\n</code></pre>\n\n<h3 id=\"scripting\">Scripting</h3>\n\n<pre><code class=\"language-ruby\">execute_script('$(\"input\").trigger(\"change\")')\nevaluate_script('window.ga')\n</code></pre>\n\n<p>Executes JavaScript.</p>\n\n<h3 id=\"debugging\">Debugging</h3>\n\n<pre><code class=\"language-ruby\">save_and_open_page\n</code></pre>\n\n<p>Opens the webpage in your browser.</p>\n\n<h3 id=\"page\">Page</h3>\n\n<pre><code class=\"language-ruby\">page\n .all('h3')\n .body\n .html\n .source\n .current_host\n .current_path\n .current_url\n</code></pre>\n\n<h3 id=\"ajax\">AJAX</h3>\n\n<pre><code class=\"language-ruby\">using_wait_time 10 do\n ...\nend\n</code></pre>\n\n<h3 id=\"misc\">Misc</h3>\n\n<pre><code>drag\nfield_labeled\n</code></pre>\n\n<h3 id=\"page-object\">Page object</h3>\n\n<pre><code class=\"language-ruby\">page.status_code == 200\npage.response_headers\n</code></pre>\n\n<p>See: <a href=\"http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Session\">http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Session</a></p>\n\n<h3 id=\"poltergeist\">Poltergeist</h3>\n\n<pre><code class=\"language-ruby\">Capybara.register_driver :poltergeist do |app|\n Capybara::Poltergeist::Driver.new(app, :inspector =&gt; true)\nend\nCapybara.javascript_driver = :poltergeist\n</code></pre>\n\n<p>Use <a href=\"https://github.com/teampoltergeist/poltergeist\">poltergeist</a> to integrate PhantomJS.</p>\n\n<h3 id=\"blacklist\">Blacklist</h3>\n\n<pre><code class=\"language-ruby\">config.before :each, :js do\n page.driver.browser.url_blacklist = [\n 'fonts.googleapis.com',\n 'use.typekit.net',\n 'f.vimeocdn.com',\n 'player.vimeo.com',\n 'www.googletagmanager.com'\n ].flat_map { |domain| [ \"http://#{domain}\", \"https://#{domain}\" ] }\nend\n</code></pre>\n\n<h3 id=\"debugging-1\">Debugging</h3>\n\n<p class=\"-setup\">Enable <code>inspector: true</code> and then:</p>\n\n<pre><code class=\"language-ruby\">page.driver.debug\n</code></pre>\n\n<p>To pause execution for a while:</p>\n\n<pre><code class=\"language-ruby\">page.driver.pause\n</code></pre>\n\n<h2 id=\"selenium\">Selenium</h2>\n\n<h3 id=\"accepting-confirm-and-alert\">Accepting confirm() and alert()</h3>\n\n<pre><code class=\"language-ruby\">accept_alert { ... }\ndismiss_confirm { ... }\naccept_prompt(with: 'hi') { ... }\n</code></pre>\n\n<p>Alternatively:</p>\n\n<pre><code class=\"language-ruby\">page.driver.browser.switch_to.alert.accept\n</code></pre>\n\n<h3 id=\"updating-session\">Updating session</h3>\n\n<pre><code class=\"language-ruby\">page.set_rack_session(foo: 'bar')\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"http://rubydoc.info/github/jnicklas/capybara/Capybara/RSpecMatchers\">http://rubydoc.info/github/jnicklas/capybara/Capybara/RSpecMatchers</a></li>\n <li><a href=\"http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Matchers\">http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Matchers</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-08-30"
},{
"id": "cask-index",
"title": "Caskroom index",
"url": "/cask-index",
"category": "Others",
"keywords": null,
"content_html": "<h1 id=\"caskroom\">Caskroom</h1>\n\n<h4 id=\"a\">A</h4>\n\n<ul>\n <li><a href=\"http://www.publicspace.net/ABetterFinderAttributes/\">a-better-finder-attributes</a></li>\n <li><a href=\"http://www.publicspace.net/ABetterFinderRename/\">a-better-finder-rename</a></li>\n <li><a href=\"http://gamelab.mit.edu/games/a-slower-speed-of-light/\">a-slower-speed-of-light</a></li>\n <li><a href=\"http://abgx360.net/\">abgx360</a></li>\n <li><a href=\"http://rbruehl.macbay.de/Abscissa\">abscissa</a></li>\n <li><a href=\"http://www.ortisoft.de/accessmenubarapps/\">accessmenubarapps</a></li>\n <li><a href=\"http://flyingmeat.com/acorn/\">acorn</a></li>\n <li><a href=\"http://getactionsapp.com\">actions-server</a></li>\n <li><a href=\"http://actiontastic.com\">actiontastic</a></li>\n <li><a href=\"https://www.dssw.co.uk/activityaudit\">activity-audit</a></li>\n <li><a href=\"http://onflapp.wordpress.com/actotracker\">actotracker</a></li>\n <li><a href=\"http://houdah.com/ACTPrinter/\">actprinter</a></li>\n <li><a href=\"http://www.actualtech.com/products.php\">actual-odbc-pack</a></li>\n <li><a href=\"http://www.macroplant.com/adapter/\">adapter</a></li>\n <li><a href=\"https://www.adium.im/\">adium</a></li>\n <li><a href=\"https://get.adobe.com/air/\">adobe-air</a></li>\n <li><a href=\"http://help.adobe.com/en_US/air/redist/WS485a42d56cd19641-70d979a8124ef20a34b-8000.html\">adobe-arh</a></li>\n <li><a href=\"https://creative.adobe.com/products/creative-cloud\">adobe-creative-cloud</a></li>\n <li><a href=\"http://www.adobe.com/pt/products/digital-editions.html\">adobe-digital-editions</a></li>\n <li><a href=\"http://www.adobe.com/support/downloads/product.jsp?product=106&amp;platform=Macintosh\">adobe-dng-converter</a></li>\n <li><a href=\"http://www.adobe.com/products/photoshop-lightroom.html\">adobe-photoshop-lightroom</a></li>\n <li><a href=\"http://www.adobe.com/products/reader.html\">adobe-reader</a></li>\n <li><a href=\"http://www.lobotomo.com/products/Adventure/index.html\">adventure</a></li>\n <li><a href=\"http://www.aegisub.org/\">aegisub</a></li>\n <li><a href=\"https://www.aerofs.com/\">aerofs</a></li>\n <li><a href=\"https://affinity.serif.com/\">affinity-designer</a></li>\n <li><a href=\"http://www.avatron.com/get-air-connect/\">air-connect</a></li>\n <li><a href=\"http://www.inmethod.com/airvideohd\">air-video-server-hd</a></li>\n <li><a href=\"http://www.inmethod.com/air-video/\">air-video-server</a></li>\n <li><a href=\"http://avatron.com/apps/air-display/\">airdisplay</a></li>\n <li><a href=\"http://www.rogueamoeba.com/airfoil/mac/\">airfoil</a></li>\n <li><a href=\"http://airmailapp.com/amt/\">airmail-amt</a></li>\n <li><a href=\"http://www.airsquirrels.com/airparrot/\">airparrot</a></li>\n <li><a href=\"http://www.airserver.com\">airserver</a></li>\n <li><a href=\"http://airstream.io/download/\">airstream</a></li>\n <li><a href=\"http://wayback.archive.org/web/20130123192255/http://www.robbiehanson.com/alarmclock/index.html\">alarm-clock</a></li>\n <li><a href=\"http://www.alfredapp.com/\">alfred</a></li>\n <li><a href=\"http://presstube.com/blog/2011/alib1/\">alib1</a></li>\n <li><a href=\"http://www.alinofsoftware.ch/en/products/products-timer/index.html\">alinof-timer</a></li>\n <li><a href=\"http://wangwang.taobao.com\">aliwangwang</a></li>\n <li><a href=\"https://github.com/orta/GIFs\">all-the-gifs</a></li>\n <li><a href=\"http://www.tresrrr.com/All2MP3/ENGLISH.html\">all2mp3</a></li>\n <li><a href=\"http://www.hairersoft.com/pro.html\">amadeus-pro</a></li>\n <li><a href=\"https://www.amazon.com/clouddrive\">amazon-cloud-drive</a></li>\n <li><a href=\"https://www.amazon.com/gp/feature.html/ref=dm_mo_cpw_fb_lm?docId=1001067901\">amazon-music</a></li>\n <li><a href=\"http://ianyh.com/amethyst\">amethyst</a></li>\n <li><a href=\"http://www.ampps.com\">ampps</a></li>\n <li><a href=\"http://www.android.com/filetransfer/\">android-file-transfer</a></li>\n <li><a href=\"http://developer.android.com/sdk/installing/studio.html\">android-studio-bundle</a></li>\n <li><a href=\"https://developer.android.com/sdk/installing/studio.html\">android-studio</a></li>\n <li><a href=\"http://angryip.org\">angry-ip-scanner</a></li>\n <li><a href=\"http://ankisrs.net/\">anki</a></li>\n <li><a href=\"http://www.hanynet.com/anonym/index.html\">anonym</a></li>\n <li><a href=\"http://antetype.com\">antetype</a></li>\n <li><a href=\"http://sabi.net/nriley/software/#antirsi\">antirsi</a></li>\n <li><a href=\"http://anvilformac.com/\">anvil</a></li>\n <li><a href=\"http://www.anxietyapp.com/\">anxiety</a></li>\n <li><a href=\"http://icyblaze.com/anypass\">anypass</a></li>\n <li><a href=\"https://www.macupdate.com/app/mac/11859/ap-grapher\">ap-grapher</a></li>\n <li><a href=\"http://directory.apache.org/studio/\">apache-directory-studio</a></li>\n <li><a href=\"http://apikitchen.com/\">apikitchen</a></li>\n <li><a href=\"https://github.com/blommegard/APNS-Pusher\">apns-pusher</a></li>\n <li><a href=\"http://www.freemacsoft.net/appcleaner/\">appcleaner</a></li>\n <li><a href=\"http://www.jetbrains.com/objc/\">appcode</a></li>\n <li><a href=\"http://www.reggieashworth.com/appdelete\">appdelete</a></li>\n <li><a href=\"http://metaquark.de/appfresh/mac\">appfresh</a></li>\n <li><a href=\"http://appium.io\">appium</a></li>\n <li><a href=\"https://code.google.com/p/appmenuboy/\">appmenuboy</a></li>\n <li><a href=\"http://www.apptivateapp.com\">apptivate</a></li>\n <li><a href=\"http://onnati.net/apptrap\">apptrap</a></li>\n <li><a href=\"http://www.appzapper.com/\">appzapper</a></li>\n <li><a href=\"http://www.aptana.com/\">aptanastudio</a></li>\n <li><a href=\"http://aquamacs.org/\">aquamacs</a></li>\n <li><a href=\"http://aquaterm.sourceforge.net/\">aquaterm</a></li>\n <li><a href=\"http://www.araxis.com/merge\">araxis-merge</a></li>\n <li><a href=\"http://archiverapp.com/\">archiver</a></li>\n <li><a href=\"https://communities.intel.com/docs/DOC-22226\">arduino-galileo</a></li>\n <li><a href=\"http://arduino.cc/\">arduino</a></li>\n <li><a href=\"http://ariamaestosa.sourceforge.net\">aria-maestosa</a></li>\n <li><a href=\"http://www.fastandeasyhacking.com/\">armitage</a></li>\n <li><a href=\"https://bitcoinarmory.com/\">armory</a></li>\n <li><a href=\"https://code.google.com/p/arora/\">arora</a></li>\n <li><a href=\"http://www.haystacksoftware.com/arq/\">arq</a></li>\n <li><a href=\"http://bucketomac.de/arranger/arranger/\">arranger</a></li>\n <li><a href=\"http://arrsync.sourceforge.net\">arrsync</a></li>\n <li><a href=\"http://www.aseprite.org\">aseprite</a></li>\n <li><a href=\"http://asepsis.binaryage.com/\">asepsis</a></li>\n <li><a href=\"http://www.asteroidapp.com/\">asteroid</a></li>\n <li><a href=\"http://www.trankynam.com/atext/\">atext</a></li>\n <li><a href=\"http://www.riverdark.net/atlantis/\">atlantis</a></li>\n <li><a href=\"http://www.atpurpose.com/atMonitor/\">atmonitor</a></li>\n <li><a href=\"http://atom.io\">atom</a></li>\n <li><a href=\"https://github.com/Atraci/Atraci\">atraci</a></li>\n <li><a href=\"http://www.apple.com/itunes/mastered-for-itunes/\">au-lab</a></li>\n <li><a href=\"http://audacity.sourceforge.net/\">audacity</a></li>\n <li><a href=\"http://www.macsome.com/audio-editor-mac/index.html\">audio-editor</a></li>\n <li><a href=\"http://www.rogueamoeba.com/audiohijackpro/\">audio-hijack-pro</a></li>\n <li><a href=\"http://audiomateapp.com/\">audio-mate</a></li>\n <li><a href=\"http://bluezbox.com/audiobookbinder.html\">audiobookbinder</a></li>\n <li><a href=\"https://github.com/mxcl/Audioscrobbler.app\">audioscrobbler</a></li>\n <li><a href=\"http://audioslicer.sourceforge.net\">audioslicer</a></li>\n <li><a href=\"http://www.oneperiodic.com/products/aurora/\">aurora</a></li>\n <li><a href=\"https://www.dssw.co.uk/authbuddy\">authbuddy</a></li>\n <li><a href=\"http://www.hrsoftworks.net\">authoxy</a></li>\n <li><a href=\"https://www.authy.com\">authy-bluetooth</a></li>\n <li><a href=\"https://github.com/MagerValp/AutoDMG\">autodmg</a></li>\n <li><a href=\"http://codingcurious.com/automatic/\">automatic</a></li>\n <li><a href=\"https://www.whitehatsec.com/aviator/\">aviator</a></li>\n <li><a href=\"http://www.avidemux.org/\">avidemux</a></li>\n <li><a href=\"http://avogadro.openmolecules.net/\">avogadro</a></li>\n <li><a href=\"http://iamfutureproof.com/tools/awareness/\">awareness</a></li>\n <li><a href=\"http://www.asix.com.tw/products.php?op=pItemdetail&amp;PItemID=131;71;112&amp;PLine=71\">ax88179</a></li>\n <li><a href=\"http://www.asix.com.tw/products.php?op=pItemdetail&amp;PItemID=86;71;101&amp;PLine=71\">ax88772</a></li>\n <li><a href=\"http://www.axure.com/\">axure-rp-pro</a></li>\n</ul>\n\n<h4 id=\"b\">B</h4>\n\n<ul>\n <li><a href=\"http://www.flymaster-avionics.com/Support/Downloads/ForMacOSX/tabid/199/Default.aspx\">b2designer</a></li>\n <li><a href=\"http://www.tri-edre.fr/english/backintime.html\">back-in-time</a></li>\n <li><a href=\"http://www.backblaze.com/\">backblaze-downloader</a></li>\n <li><a href=\"https://www.backblaze.com/\">backblaze</a></li>\n <li><a href=\"http://backtobed.dadiugames.dk/\">backtobed</a></li>\n <li><a href=\"http://www.soma-zone.com/BackupLoupe/\">backuploupe</a></li>\n <li><a href=\"https://github.com/sdegutis/bahamut\">bahamut</a></li>\n <li><a href=\"http://pan.baidu.com\">baiducloud</a></li>\n <li><a href=\"http://wuxian.baidu.com/input/mac.html\">baiduinput</a></li>\n <li><a href=\"http://music.baidu.com/\">baidumusic</a></li>\n <li><a href=\"http://balsamiq.com/\">balsamiq-mockups</a></li>\n <li><a href=\"http://www.bankid.com/\">bankid</a></li>\n <li><a href=\"http://banshee.fm\">banshee</a></li>\n <li><a href=\"http://qata.cc/Site/Bar_Magnet.html\">bar-magnet</a></li>\n <li><a href=\"http://baretorrent.org\">baretorrent</a></li>\n <li><a href=\"http://www.macbartender.com/\">bartender</a></li>\n <li><a href=\"http://menial.co.uk/base/\">base</a></li>\n <li><a href=\"http://www.garmin.com/en-US/shop/downloads/basecamp\">basecamp</a></li>\n <li><a href=\"http://basex.org/home/\">basex</a></li>\n <li><a href=\"http://www.tug.org/mactex/morepackages.html\">basictex</a></li>\n <li><a href=\"http://www.twelvesouth.com/product/bassjump-2-for-macbook\">bassjump</a></li>\n <li><a href=\"http://yellquietly.com/bass-shapes/\">bassshapes</a></li>\n <li><a href=\"http://bathyscaphe.sourceforge.jp/\">bathyscaphe</a></li>\n <li><a href=\"https://www.dssw.co.uk/batteryguardian\">battery-guardian</a></li>\n <li><a href=\"https://www.dssw.co.uk/batteryreport\">battery-report</a></li>\n <li><a href=\"http://yap.nu/battery-time-remaining/\">battery-time-remaining</a></li>\n <li><a href=\"http://www.baygenie.com/\">baygenie</a></li>\n <li><a href=\"http://www.bbc.co.uk/iplayer/install\">bbc-iplayer-downloads</a></li>\n <li><a href=\"http://www.barebones.com/products/bbedit/\">bbedit</a></li>\n <li><a href=\"https://github.com/mlwelles/BeaconScanner/\">beacon-scanner</a></li>\n <li><a href=\"http://beamer-app.com\">beamer</a></li>\n <li><a href=\"http://www.bean-osx.com\">bean</a></li>\n <li><a href=\"http://www.beardedspice.com\">beardedspice</a></li>\n <li><a href=\"http://pro.beatport.com/\">beatport-pro</a></li>\n <li><a href=\"http://neat.io/bee/\">bee</a></li>\n <li><a href=\"http://blog.boastr.net/\">bettertouchtool</a></li>\n <li><a href=\"http://macitbetter.com\">betterzip</a></li>\n <li><a href=\"http://macitbetter.com/BetterZip-Quick-Look-Generator/\">betterzipql</a></li>\n <li><a href=\"http://bibdesk.sourceforge.net/\">bibdesk</a></li>\n <li><a href=\"http://www.publicspace.net/BigMeanFolderMachine/\">big-mean-folder-machine</a></li>\n <li><a href=\"http://billtheapp.com/\">bill</a></li>\n <li><a href=\"http://bino3d.org\">bino</a></li>\n <li><a href=\"http://www.binreader.com/\">binreader</a></li>\n <li><a href=\"https://github.com/zorgiepoo/bit-slicer/\">bit-slicer</a></li>\n <li><a href=\"https://www.bitcasa.com\">bitcasa</a></li>\n <li><a href=\"https://bitcoin.org/\">bitcoin-core</a></li>\n <li><a href=\"http://www.bitlord.com\">bitlord</a></li>\n <li><a href=\"https://bitmessage.org/\">bitmessage</a></li>\n <li><a href=\"http://www.bittorrent.com/sync\">bittorrent-sync</a></li>\n <li><a href=\"http://www.red-sweater.com/blackink/\">black-ink</a></li>\n <li><a href=\"http://michelf.ca/projects/black-light\">black-light</a></li>\n <li><a href=\"http://www.blender.org/\">blender</a></li>\n <li><a href=\"http://blink1.thingm.com/\">blink1control</a></li>\n <li><a href=\"http://www.macblurayplayer.com/\">blu-ray-player</a></li>\n <li><a href=\"http://bluegriffon.org\">bluegriffon</a></li>\n <li><a href=\"http://zeroonetwenty.com/blueharvest/\">blueharvest</a></li>\n <li><a href=\"http://www.bluej.org\">bluej</a></li>\n <li><a href=\"https://github.com/casperstorm/Bob\">bob</a></li>\n <li><a href=\"http://appbodega.com/\">bodega</a></li>\n <li><a href=\"http://www.tildesoft.com/\">bonjour-browser</a></li>\n <li><a href=\"http://www.globaldelight.com/boom/\">boom</a></li>\n <li><a href=\"https://github.com/boot2docker/osx-installer\">boot2docker</a></li>\n <li><a href=\"http://www.kainjow.com/\">bootchamp</a></li>\n <li><a href=\"http://namedfork.net/bootxchanger\">bootxchanger</a></li>\n <li><a href=\"http://bowtieapp.com/\">bowtie</a></li>\n <li><a href=\"https://sites.box.com/sync4/\">box-sync</a></li>\n <li><a href=\"https://www.boxcryptor.com/en/boxcryptor-classic\">boxcryptor-classic</a></li>\n <li><a href=\"http://boxerapp.com/\">boxer</a></li>\n <li><a href=\"http://brackets.io\">brackets</a></li>\n <li><a href=\"http://brainworkshop.sourceforge.net/\">brain-workshop</a></li>\n <li><a href=\"http://breach.cc\">breach</a></li>\n <li><a href=\"http://mutablecode.com/apps/breakaway.html\">breakaway</a></li>\n <li><a href=\"http://www.bergdesign.com/brightness/\">brightness</a></li>\n <li><a href=\"https://sites.google.com/site/broguegame/\">brogue</a></li>\n <li><a href=\"http://www.zibity.com/broomstick\">broomstick</a></li>\n <li><a href=\"http://www.timschroeder.net/brow/\">brow</a></li>\n <li><a href=\"http://www.browserstack.com/\">browserstacklocal</a></li>\n <li><a href=\"http://brushviewer.sourceforge.net/\">brushviewql</a></li>\n <li><a href=\"http://www.brytonsport.com/help/start\">brytonbridge</a></li>\n <li><a href=\"http://buddi.digitalcave.ca/index.jsp\">buddi</a></li>\n <li><a href=\"http://burn-osx.sourceforge.net/\">burn</a></li>\n <li><a href=\"http://harukasan.jp\">butter</a></li>\n <li><a href=\"http://bzflag.org/\">bzflag</a></li>\n</ul>\n\n<h4 id=\"c\">C</h4>\n\n<ul>\n <li><a href=\"http://www.downloadc3.com/\">c3</a></li>\n <li><a href=\"http://lightheadsw.com/caffeine/\">caffeine</a></li>\n <li><a href=\"http://www.cakebrew.com\">cakebrew</a></li>\n <li><a href=\"http://www.devontechnologies.com/products/freeware.html#c1111\">calcservice</a></li>\n <li><a href=\"http://calibre-ebook.com/\">calibre</a></li>\n <li><a href=\"http://calibre2opds.com/\">calibre2opds</a></li>\n <li><a href=\"http://www.kandasoft.com/home/kanda-apps/skype-call-recorder.html\">callnote</a></li>\n <li><a href=\"http://sourceforge.net/apps/mediawiki/camprocessor/index.php?title=Main_Page\">camed</a></li>\n <li><a href=\"http://nevercenter.com/camerabag/desktop/\">camerabag</a></li>\n <li><a href=\"http://caminobrowser.org/\">camino</a></li>\n <li><a href=\"http://www.camranger.com/downloads/#fbox_5594\">camranger</a></li>\n <li><a href=\"http://www.techsmith.com/camtasia.html\">camtasia</a></li>\n <li><a href=\"http://camtwiststudio.com/\">camtwist</a></li>\n <li><a href=\"http://www.panic.com/blog/candybar-mountain-lion-and-beyond\">candybar</a></li>\n <li><a href=\"http://supermegaultragroovy.com/products/Capo/\">capo</a></li>\n <li><a href=\"http://www.threemagination.com/capsee/\">capsee</a></li>\n <li><a href=\"http://bombich.com/\">carbon-copy-cloner</a></li>\n <li><a href=\"http://www.carlson-minot.com\">carlson-minot</a></li>\n <li><a href=\"http://www.cartaodecidadao.pt/\">cartao-de-cidadao</a></li>\n <li><a href=\"http://www.giorgiocalderolla.com/index.html\">catch</a></li>\n <li><a href=\"http://ftnew.com/catchmouse.html\">catchmouse</a></li>\n <li><a href=\"http://www.secretgeometry.com/apps/cathode\">cathode</a></li>\n <li><a href=\"http://www.piriform.com/ccleaner\">ccleaner</a></li>\n <li><a href=\"http://ccmenu.sourceforge.net/\">ccmenu</a></li>\n <li><a href=\"https://github.com/jbtule/cdto\">cd-to</a></li>\n <li><a href=\"http://sourceforge.net/projects/cdock\">cdock</a></li>\n <li><a href=\"http://sourceforge.net/projects/celestia\">celestia</a></li>\n <li><a href=\"https://code.google.com/p/cert-quicklook/\">cert-quicklook</a></li>\n <li><a href=\"http://thirdcog.eu/apps/cfxr\">cfxr</a></li>\n <li><a href=\"http://logging.apache.org/chainsaw/\">chainsaw</a></li>\n <li><a href=\"http://chameleon.alessandroboschini.it/\">chameleon-ssd-optimizer</a></li>\n <li><a href=\"http://intuiware.com/apps/changes-meter\">changes-meter</a></li>\n <li><a href=\"http://bitbq.com/changes/\">changes</a></li>\n <li><a href=\"http://www.charlesproxy.com/\">charles</a></li>\n <li><a href=\"http://flexibits.com/chatology\">chatology</a></li>\n <li><a href=\"http://www.cheatsheetapp.com/CheatSheet/\">cheatsheet</a></li>\n <li><a href=\"http://www.cheetah3d.com\">cheetah3d</a></li>\n <li><a href=\"http://www.getchef.com/downloads/chef-dk/mac/\">chefdk</a></li>\n <li><a href=\"http://www.chemdoodle.com\">chemdoodle</a></li>\n <li><a href=\"http://sourceforge.net/projects/chicken/\">chicken</a></li>\n <li><a href=\"http://chirp.danplanet.com/\">chirp</a></li>\n <li><a href=\"http://chocolatapp.com/\">chocolat</a></li>\n <li><a href=\"http://www.choosyosx.com/\">choosy</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/Chromatic\">chromatic</a></li>\n <li><a href=\"https://chrome.google.com/remotedesktop\">chrome-remote-desktop-host</a></li>\n <li><a href=\"http://www.google.ca/intl/en/chrome/devices/chromecast/\">chromecast</a></li>\n <li><a href=\"http://www.freesmug.org/chromium\">chromium</a></li>\n <li><a href=\"http://chronicleapp.com/\">chronicle</a></li>\n <li><a href=\"http://www.econtechnologies.com\">chronoagent</a></li>\n <li><a href=\"http://chronomateapp.com/\">chronomate</a></li>\n <li><a href=\"http://www.econtechnologies.com\">chronosync</a></li>\n <li><a href=\"http://presstube.com/blog/2011/chunkulus/\">chunkulus</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/cinch/\">cinch</a></li>\n <li><a href=\"http://www.citrix.com/receiver\">citrix-receiver</a></li>\n <li><a href=\"http://www.clamxav.com/\">clamxav</a></li>\n <li><a href=\"http://www.clarify-it.com/\">clarify</a></li>\n <li><a href=\"http://macpaw.com/cleanmymac\">cleanmymac</a></li>\n <li><a href=\"http://www.clementine-player.org/\">clementine</a></li>\n <li><a href=\"http://www.jetbrains.com/clion/\">clion-eap</a></li>\n <li><a href=\"http://www.clipmenu.com/\">clipmenu</a></li>\n <li><a href=\"http://rixstep.com/4/0/clix/index.shtml\">clix</a></li>\n <li><a href=\"https://www.getcloak.com\">cloak</a></li>\n <li><a href=\"http://zachwaugh.me/clock/\">clock</a></li>\n <li><a href=\"http://www.clonk.de/cr.php\">clonk</a></li>\n <li><a href=\"http://getcloudapp.com/\">cloud</a></li>\n <li><a href=\"http://www.cloudera.com\">cloudera-hive-odbc</a></li>\n <li><a href=\"https://github.com/cloudfoundry/cli\">cloudfoundry-cli</a></li>\n <li><a href=\"http://www.goldenhillsoftware.com/\">cloudpull</a></li>\n <li><a href=\"https://cloudup.com/download\">cloudup</a></li>\n <li><a href=\"https://github.com/josh-/CloudyTabs/\">cloudytabs</a></li>\n <li><a href=\"http://www.ncbi.nlm.nih.gov/Structure/CN3D/cn3d.shtml\">cn3d</a></li>\n <li><a href=\"http://coccinellida.sourceforge.net/\">coccinellida</a></li>\n <li><a href=\"http://www.woogerworks.com/\">cockatrice</a></li>\n <li><a href=\"http://maintain.se/cocktail\">cocktail</a></li>\n <li><a href=\"http://mstratman.github.io/cocoadialog/\">cocoadialog</a></li>\n <li><a href=\"http://www.tastycocoabytes.com/cpa/\">cocoapacketanalyzer</a></li>\n <li><a href=\"http://mmattozzi.github.io/cocoa-rest-client/\">cocoarestclient</a></li>\n <li><a href=\"http://cocoaspell.leuski.net/\">cocoaspell</a></li>\n <li><a href=\"http://krylon.rsdio.com/zakk/cocoasplit/\">cocoasplit</a></li>\n <li><a href=\"http://www.coconut-flavour.com/coconutbattery/\">coconutbattery</a></li>\n <li><a href=\"https://panic.com/Coda/\">coda</a></li>\n <li><a href=\"https://www.codebox.io\">codebox</a></li>\n <li><a href=\"http://www.codebugapp.com/\">codebug</a></li>\n <li><a href=\"http://incident57.com/codekit/\">codekit</a></li>\n <li><a href=\"http://codelite.org\">codelite</a></li>\n <li><a href=\"http://cogx.org\">cog</a></li>\n <li><a href=\"http://colloquy.info/\">colloquy</a></li>\n <li><a href=\"http://colororacle.org/\">color-oracle</a></li>\n <li><a href=\"https://github.com/oscardelben/Color-Picker-Pro\">color-picker-pro</a></li>\n <li><a href=\"http://www.antetype.com/blog/2013/12/updated-antetype-os-x-color-picker-1-3-1/\">colorpicker-antetype</a></li>\n <li><a href=\"http://download.panic.com/picker/\">colorpicker-developer</a></li>\n <li><a href=\"http://wafflesoftware.net/hexpicker/\">colorpicker-hex</a></li>\n <li><a href=\"http://www.irradiated.net/?page=pro-picker\">colorpicker-propicker</a></li>\n <li><a href=\"http://www.rubicode.com/Software/RCWebColorPicker\">colorpicker-rcwebcolorpicker</a></li>\n <li><a href=\"http://bjango.com/mac/skalacolor/\">colorpicker-skalacolor</a></li>\n <li><a href=\"http://www.northernspysoftware.com/software/colorpicker\">colorpicker</a></li>\n <li><a href=\"http://mattpatenaude.com/\">colors</a></li>\n <li><a href=\"http://www.colorschemer.com\">colorschemer-studio</a></li>\n <li><a href=\"http://www.bitcartel.com/comicbooklover/\">comicbooklover</a></li>\n <li><a href=\"http://www.bitcartel.com/comicbooklover\">comicbookloversync</a></li>\n <li><a href=\"http://code.google.com/p/comictagger/\">comictagger</a></li>\n <li><a href=\"http://clickontyler.com/commandq/\">commandq</a></li>\n <li><a href=\"http://www.getconcentrating.com/\">concentrate</a></li>\n <li><a href=\"http://www.filetransporter.com/\">connected-desktop</a></li>\n <li><a href=\"http://mediaware.sk/connector\">connector</a></li>\n <li><a href=\"http://www.consul.io/\">consul</a></li>\n <li><a href=\"http://contextsformac.com/\">contexts</a></li>\n <li><a href=\"http://www.orderedbytes.com/controllermate/\">controllermate</a></li>\n <li><a href=\"http://www.controlplaneapp.com/\">controlplane</a></li>\n <li><a href=\"http://freeware.the-meiers.org/\">coolterm</a></li>\n <li><a href=\"http://www.geocities.jp/coo_ona/viewer.html\">cooviewer</a></li>\n <li><a href=\"https://www.copy.com/\">copy</a></li>\n <li><a href=\"http://coq.inria.fr/\">coqide</a></li>\n <li><a href=\"http://cord.sourceforge.net/\">cord</a></li>\n <li><a href=\"http://www.zennaware.com/cornerstone/index.php\">cornerstone</a></li>\n <li><a href=\"http://th.corsix.org\">corsixth</a></li>\n <li><a href=\"http://coteditor.github.io/\">coteditor</a></li>\n <li><a href=\"http://www.couchbase.com/\">couchbase-server-community</a></li>\n <li><a href=\"http://www.couchbase.com/\">couchbase-server-enterprise</a></li>\n <li><a href=\"http://craftstud.io\">craftstudio</a></li>\n <li><a href=\"http://crashlytics.com\">crashlytics</a></li>\n <li><a href=\"http://www.crashplan.com/\">crashplan</a></li>\n <li><a href=\"http://www.obdev.at/products/crosspack/\">crosspack-avr</a></li>\n <li><a href=\"https://www.crushftp.com\">crushftp</a></li>\n <li><a href=\"http://voluntary.net/crypt/\">crypt</a></li>\n <li><a href=\"http://cryptol.net/\">cryptol</a></li>\n <li><a href=\"https://github.com/dscottbuch/cTiVo\">ctivo</a></li>\n <li><a href=\"http://cuda-z.sourceforge.net\">cuda-z</a></li>\n <li><a href=\"http://www.nathanatos.com/software\">cuppa</a></li>\n <li><a href=\"http://www.cups-pdf.de\">cups-pdf</a></li>\n <li><a href=\"http://daid.github.com/Cura/\">cura</a></li>\n <li><a href=\"http://mrrsoftware.com/curb\">curb</a></li>\n <li><a href=\"http://www.curse.com/client\">curse-client</a></li>\n <li><a href=\"http://doomlaser.com/cursorcerer-hide-your-cursor-at-will/\">cursorcerer</a></li>\n <li><a href=\"http://sourceforge.net/projects/cutesdr\">cutesdr</a></li>\n <li><a href=\"http://www.cx.com\">cx</a></li>\n <li><a href=\"http://cyberduck.io/\">cyberduck</a></li>\n <li><a href=\"http://cycling74.com\">cycling74-max</a></li>\n</ul>\n\n<h4 id=\"d\">D</h4>\n\n<ul>\n <li><a href=\"http://www.daemon-tools.cc/products/dtMacLite\">daemon-tools-lite</a></li>\n <li><a href=\"http://www.daisydiskapp.com\">daisydisk</a></li>\n <li><a href=\"http://www.darktable.org/\">darktable</a></li>\n <li><a href=\"https://www.dartlang.org/tools/editor/\">darteditor</a></li>\n <li><a href=\"http://kapeli.com/dash\">dash</a></li>\n <li><a href=\"https://www.dashlane.com/\">dashlane</a></li>\n <li><a href=\"http://www.visualdatatools.com/DataGraph/\">datagraph</a></li>\n <li><a href=\"https://github.com/sveinbjornt/Data-URL-Toolkit\">dataurlmaker</a></li>\n <li><a href=\"http://www.shauninman.com/archive/2011/10/20/day_o_mac_menu_bar_clock\">day-o</a></li>\n <li><a href=\"http://dbeaver.jkiss.org/\">dbeaver</a></li>\n <li><a href=\"http://dealalertapp.com/\">dealalert</a></li>\n <li><a href=\"http://www.aorensoftware.com/blog/2011/12/24/death-to-ds_store/\">deathtodsstore</a></li>\n <li><a href=\"http://www.iwaxx.com/debookee/\">debookee</a></li>\n <li><a href=\"http://nothirst.com/debtquencher/\">debt-quencher</a></li>\n <li><a href=\"http://www.tinbert.com/DeciTimeMac/\">decitime</a></li>\n <li><a href=\"http://www.titanium.free.fr/downloaddeeper.php\">deeper</a></li>\n <li><a href=\"http://deeqapp.com\">deeq</a></li>\n <li><a href=\"http://www.stclairsoft.com/DefaultFolderX\">default-folder-x</a></li>\n <li><a href=\"http://www.delibarapp.com/\">delibar</a></li>\n <li><a href=\"http://delicious-monster.com/\">delicious-library</a></li>\n <li><a href=\"http://junecloud.com/software/mac/delivery-status.html\">delivery-status</a></li>\n <li><a href=\"http://www.deltopia.com/compare-merge-sync/macosx/\">deltawalker</a></li>\n <li><a href=\"http://deluge-torrent.org/\">deluge</a></li>\n <li><a href=\"http://www.furrysoft.de/?page=deskfun\">deskfun</a></li>\n <li><a href=\"http://www.nightproductions.net/desklog.html\">desktop-log</a></li>\n <li><a href=\"http://www.desmume.org\">desmume</a></li>\n <li><a href=\"http://headlightsoft.com/detune/\">detune</a></li>\n <li><a href=\"http://www.devontechnologies.com/products/devonthink/devonthink-pro-office.html\">devonthink-pro-office</a></li>\n <li><a href=\"http://www.devontechnologies.com/products/devonthink/devonthink-pro.html\">devonthink-pro</a></li>\n <li><a href=\"http://dewdrop.dangelov.com/\">dewdrop</a></li>\n <li><a href=\"http://peter.upfold.org.uk/projects/dfontsplitter\">dfontsplitter</a></li>\n <li><a href=\"http://dia-installer.de/\">dia</a></li>\n <li><a href=\"http://dia-installer.de/\">diashapes</a></li>\n <li><a href=\"http://code.google.com/p/mac-dictionary-kit/\">dictunifier</a></li>\n <li><a href=\"http://www.sourcegear.com/diffmerge\">diffmerge</a></li>\n <li><a href=\"http://www.cleverfiles.com/\">disk-drill</a></li>\n <li><a href=\"http://www.derlien.com/\">disk-inventory-x</a></li>\n <li><a href=\"http://www.digidna.net/diskaid\">diskaid</a></li>\n <li><a href=\"http://diskmakerx.com/\">diskmaker-x</a></li>\n <li><a href=\"http://diskwave.barthe.ph/\">diskwave</a></li>\n <li><a href=\"http://dispcalgui.hoech.net\">dispcalgui</a></li>\n <li><a href=\"http://manytricks.com/displaperture\">displaperture</a></li>\n <li><a href=\"http://www.displaylink.com\">displaylink</a></li>\n <li><a href=\"http://diumoo.net/\">diumoo</a></li>\n <li><a href=\"http://mizage.com/divvy/\">divvy</a></li>\n <li><a href=\"http://algoriddim.com/djay-mac\">djay</a></li>\n <li><a href=\"http://djv.sourceforge.net\">djv</a></li>\n <li><a href=\"http://djvu.sourceforge.net/\">djview</a></li>\n <li><a href=\"http://www.dmm.com/dc/book/\">dmm</a></li>\n <li><a href=\"http://opendns.github.io/dnscrypt-osx-client/\">dnscrypt</a></li>\n <li><a href=\"http://docear.org\">docear</a></li>\n <li><a href=\"http://spyresoft.com/dockmod/\">dockmod</a></li>\n <li><a href=\"http://dogecoin.com/\">dogecoin</a></li>\n <li><a href=\"http://www.dolphin-emu.org/\">dolphin</a></li>\n <li><a href=\"http://www.dosbox.com\">dosbox</a></li>\n <li><a href=\"http://douban.fm\">doubanradio</a></li>\n <li><a href=\"http://doublecmd.sourceforge.net/\">double-commander</a></li>\n <li><a href=\"http://doublecommand.sourceforge.net\">doublecommand</a></li>\n <li><a href=\"http://www.doubletwist.com/\">doubletwist</a></li>\n <li><a href=\"http://www.getdoxie.com/\">doxie</a></li>\n <li><a href=\"http://www.stack.nl/~dimitri/doxygen/index.html\">doxygen</a></li>\n <li><a href=\"http://dradio.me\">dradio</a></li>\n <li><a href=\"http://www.dragondisk.com/\">dragondisk</a></li>\n <li><a href=\"http://www.dragthing.com\">dragthing</a></li>\n <li><a href=\"http://www.drobo.com\">drobo-dashboard</a></li>\n <li><a href=\"http://www.joyofmacs.com/software/dropboxencore/\">dropbox-encore</a></li>\n <li><a href=\"https://www.dropbox.com/\">dropbox</a></li>\n <li><a href=\"http://excitedatom.com/dropin/\">dropin</a></li>\n <li><a href=\"https://github.com/deivuh/DODropletManager-OSX\">dropletmanager</a></li>\n <li><a href=\"https://www.droplr.com/\">droplr</a></li>\n <li><a href=\"https://aptonic.com\">dropzone</a></li>\n <li><a href=\"http://dl2sdr.homepage.t-online.de/\">dsp-radio</a></li>\n <li><a href=\"http://decimus.net/DTerm\">dterm</a></li>\n <li><a href=\"https://code.google.com/p/dukto/\">dukto</a></li>\n <li><a href=\"http://www.goldenfrog.com/dumptruck\">dump-truck</a></li>\n <li><a href=\"http://crawl.develz.org\">dungeon-crawl-stone-soup-console</a></li>\n <li><a href=\"http://crawl.develz.org\">dungeon-crawl-stone-soup-tiles</a></li>\n <li><a href=\"http://www.hardcoded.net/dupeguru_me/\">dupeguru-me</a></li>\n <li><a href=\"http://www.hardcoded.net/dupeguru_pe/\">dupeguru-pe</a></li>\n <li><a href=\"http://www.hardcoded.net/dupeguru/\">dupeguru</a></li>\n <li><a href=\"http://brattoo.com/propaganda/\">duplicate-annihilator</a></li>\n <li><a href=\"http://www.duplicati.com/\">duplicati</a></li>\n <li><a href=\"http://www5.wind.ne.jp/miko/mac_soft/dup_scan/index.html\">dupscanub</a></li>\n <li><a href=\"http://dvdstyler.org\">dvdstyler</a></li>\n <li><a href=\"http://www.bay12games.com/dwarves/\">dwarf-fortress</a></li>\n</ul>\n\n<h4 id=\"e\">E</h4>\n\n<ul>\n <li><a href=\"http://www.cadsoftusa.com/\">eagle</a></li>\n <li><a href=\"http://c-command.com/eaglefiler/\">eaglefiler</a></li>\n <li><a href=\"http://www.devontechnologies.com/download/products.html\">easyfind</a></li>\n <li><a href=\"https://github.com/norio-nomura/EasySIMBL/\">easysimbl</a></li>\n <li><a href=\"http://www.squashedsoftware.com/products-easyvpn.php\">easyvpn</a></li>\n <li><a href=\"http://eclipse.org/\">eclipse-ide</a></li>\n <li><a href=\"http://eclipse.org/\">eclipse-java</a></li>\n <li><a href=\"http://eclipse.org/\">eclipse-jee</a></li>\n <li><a href=\"http://eclipse.org\">eclipse-platform</a></li>\n <li><a href=\"http://pixiapps.com/ecouteosx/\">ecoute</a></li>\n <li><a href=\"https://code.google.com/p/eid-mw/\">eid-mw</a></li>\n <li><a href=\"http://www.jeb.com.fr/en/ejector.shtml\">ejector</a></li>\n <li><a href=\"http://www.electricsheep.org\">electric-sheep</a></li>\n <li><a href=\"http://electrum-ltc.org\">electrum-ltc</a></li>\n <li><a href=\"http://electrum.org/\">electrum</a></li>\n <li><a href=\"http://www.elm-lang.org\">elm-platform</a></li>\n <li><a href=\"https://launchpad.net/eloquent\">eloquent</a></li>\n <li><a href=\"http://silkwoodsoftware.com/\">elyse</a></li>\n <li><a href=\"http://emacsformacosx.com/\">emacs</a></li>\n <li><a href=\"http://realmacsoftware.com/ember\">ember</a></li>\n <li><a href=\"https://github.com/emin/WebPQuickLook\">emin-webpquicklook</a></li>\n <li><a href=\"http://software.bergmark.com/enfusegui/Main.html\">enfusegui</a></li>\n <li><a href=\"http://yukkurigames.com/enjoyable/\">enjoyable</a></li>\n <li><a href=\"http://www.eigenlogik.com/entropy/\">entropy</a></li>\n <li><a href=\"http://www.epicbrowser.com\">epic</a></li>\n <li><a href=\"https://code.google.com/p/epub-2-pdf\">epub-to-pdf</a></li>\n <li><a href=\"http://people.ict.usc.edu/~leuski/programming/epub-quickview.php\">epubquicklook</a></li>\n <li><a href=\"http://www.movistar.es/particulares/servicios/descargaaplicaciones\">escritorio-movistar</a></li>\n <li><a href=\"https://www.espionageapp.com/\">espionage</a></li>\n <li><a href=\"http://macrabbit.com/espresso/\">espresso</a></li>\n <li><a href=\"http://www.etresoft.com/etrecheck\">etrecheck</a></li>\n <li><a href=\"http://evasi0n.com\">evasi0n</a></li>\n <li><a href=\"http://www.hotkey-eve.com/\">eve</a></li>\n <li><a href=\"https://evernote.com/\">evernote</a></li>\n <li><a href=\"http://www.everwebapp.com/\">everweb</a></li>\n <li><a href=\"http://thelittleappfactory.com/evom/\">evom</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/Exhaust\">exhaust</a></li>\n <li><a href=\"http://exist-db.org/\">exist-db</a></li>\n <li><a href=\"http://www.expandrive.com/expandrive\">expandrive</a></li>\n <li><a href=\"http://support.eye.fi/downloads\">eye-fi</a></li>\n <li><a href=\"http://www.elgato.com/\">eyetv</a></li>\n</ul>\n\n<h4 id=\"f\">F</h4>\n\n<ul>\n <li><a href=\"https://developers.facebook.com/docs/ios\">facebook-ios-sdk</a></li>\n <li><a href=\"http://factorcode.org/\">factor</a></li>\n <li><a href=\"https://github.com/BoxOfSnoo/Fairmount\">fairmount</a></li>\n <li><a href=\"http://fakeapp.com/\">fake</a></li>\n <li><a href=\"http://martianz.cn/fakethunder/\">fakethunder</a></li>\n <li><a href=\"http://flexibits.com/fantastical\">fantastical</a></li>\n <li><a href=\"https://www.fastestvideodownloader.com/\">fastest-free-youtube-downloader</a></li>\n <li><a href=\"http://www.red-sweater.com/fastscripts/\">fastscripts</a></li>\n <li><a href=\"http://fauxpasapp.com\">faux-pas</a></li>\n <li><a href=\"http://fdt.powerflasher.com/\">fdt</a></li>\n <li><a href=\"http://kmikael.github.io/FeedbinNotifier\">feedbinnotifier</a></li>\n <li><a href=\"http://reinventedsoftware.com/feeder/\">feeder</a></li>\n <li><a href=\"http://www.feedsapp.com/\">feeds</a></li>\n <li><a href=\"https://fuse.fender.com/\">fender-amp-drivers</a></li>\n <li><a href=\"https://fuse.fender.com/\">fender-fuse</a></li>\n <li><a href=\"http://fenixwebserver.com/\">fenix</a></li>\n <li><a href=\"http://fetchsoftworks.com/\">fetch</a></li>\n <li><a href=\"http://www.ffmpegx.com/download.html\">ffmpegx</a></li>\n <li><a href=\"http://tree.bio.ed.ac.uk/software/figtree/\">figtree</a></li>\n <li><a href=\"http://fiji.sc\">fiji</a></li>\n <li><a href=\"http://echoone.com/filejuicer/\">file-juicer</a></li>\n <li><a href=\"http://www.filebot.net/\">filebot</a></li>\n <li><a href=\"http://www.filedropme.com/\">filedrop</a></li>\n <li><a href=\"http://fileshuttle.io/\">fileshuttle</a></li>\n <li><a href=\"https://filezilla-project.org/\">filezilla</a></li>\n <li><a href=\"http://apps.tempel.org/FindAnyFile/\">find-any-file</a></li>\n <li><a href=\"http://findingsapp.com\">findings</a></li>\n <li><a href=\"https://www.mozilla.org/en-US/firefox/\">firefox</a></li>\n <li><a href=\"http://www.fwbuilder.org\">firewall-builder</a></li>\n <li><a href=\"http://rogueamoeba.com/fission/\">fission</a></li>\n <li><a href=\"http://www.fitbit.com/\">fitbit-connect</a></li>\n <li><a href=\"http://fivedetails.com\">fivedetails-flow</a></li>\n <li><a href=\"http://husk.org/apps/flame/\">flame</a></li>\n <li><a href=\"http://www.flash-decompiler.com/mac.html\">flash-decompiler-trillix</a></li>\n <li><a href=\"https://www.adobe.com/support/flashplayer/downloads.html\">flash-player-debugger</a></li>\n <li><a href=\"https://www.adobe.com/support/flashplayer/downloads.html\">flash-player</a></li>\n <li><a href=\"https://www.adobe.com/products/flashplayer/distribution3.html\">flash</a></li>\n <li><a href=\"http://flavours.interacto.net/\">flavours</a></li>\n <li><a href=\"http://nulana.com/flexiglass/\">flexiglass</a></li>\n <li><a href=\"http://www.flickr.com/tools/\">flickr-uploadr</a></li>\n <li><a href=\"http://www.flightgear.org/\">flightgear</a></li>\n <li><a href=\"http://www.telestream.net/flip4mac/\">flip4mac</a></li>\n <li><a href=\"http://fliqlo.com/\">fliqlo</a></li>\n <li><a href=\"http://www.getflow.com/\">flow</a></li>\n <li><a href=\"https://www.flowdock.com/\">flowdock</a></li>\n <li><a href=\"http://fluidapp.com/\">fluid</a></li>\n <li><a href=\"https://code.google.com/p/flukeformac/\">fluke</a></li>\n <li><a href=\"http://justgetflux.com\">flux</a></li>\n <li><a href=\"http://www.flymaster-avionics.com/Support/Downloads/ForMacOSX/tabid/199/Default.aspx\">fm-fw-installer</a></li>\n <li><a href=\"http://www.heyfocus.com/\">focus</a></li>\n <li><a href=\"http://gottcode.org/focuswriter/\">focuswriter</a></li>\n <li><a href=\"http://www.foldingtext.com\">folding-text</a></li>\n <li><a href=\"http://fold.it\">foldit</a></li>\n <li><a href=\"http://mac.eltima.com/de/download-manager.html\">folx</a></li>\n <li><a href=\"http://www.fontexplorerx.com/\">fontexplorer-x-pro</a></li>\n <li><a href=\"http://fontprep.com\">fontprep</a></li>\n <li><a href=\"http://www.binarynights.com/\">forklift</a></li>\n <li><a href=\"http://www.boinx.com/fotomagico/\">fotomagico</a></li>\n <li><a href=\"http://www.enricoros.com/opensource/fotowall/\">fotowall</a></li>\n <li><a href=\"http://www.4kdownload.com/products/product-videodownloader\">fourk-video-downloader</a></li>\n <li><a href=\"http://www.4kdownload.com/products/product-youtubetomp3\">fourk-youtube-to-mp3</a></li>\n <li><a href=\"http://nucleobytes.com/index.php/4peaks\">fourpeaks</a></li>\n <li><a href=\"http://www.foxmail.com\">foxmail</a></li>\n <li><a href=\"http://www.freepascal.org/\">fpc</a></li>\n <li><a href=\"http://framerjs.com/\">framer-studio</a></li>\n <li><a href=\"http://www.pascal.com/software/freeruler/\">free-ruler</a></li>\n <li><a href=\"http://sourceforge.net/projects/free-cad/\">freecad</a></li>\n <li><a href=\"http://freecol.org\">freecol</a></li>\n <li><a href=\"http://freedv.org/tiki-index.php\">freedv</a></li>\n <li><a href=\"http://freefilesync.sourceforge.net/\">freefilesync</a></li>\n <li><a href=\"freemind.sourceforge.net\">freemind</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/Freezer\">freezer</a></li>\n <li><a href=\"http://fritzing.org/\">fritzing</a></li>\n <li><a href=\"http://mac.frizzix.de/\">frizzix</a></li>\n <li><a href=\"http://www.frostwire.com\">frostwire</a></li>\n <li><a href=\"http://fs-uae.net/\">fs-uae</a></li>\n <li><a href=\"http://www.fernlightning.com/doku.php?id=software:fseventer:start\">fseventer</a></li>\n <li><a href=\"http://rsug.itd.umich.edu/software/fugu/\">fugu</a></li>\n <li><a href=\"http://kevingessner.com/software/functionflip/\">functionflip</a></li>\n <li><a href=\"https://www.fuzemeeting.com\">fuze</a></li>\n</ul>\n\n<h4 id=\"g\">G</h4>\n\n<ul>\n <li><a href=\"http://gambitscheme.org/wiki/index.php/Main_Page\">gambit-c</a></li>\n <li><a href=\"http://gamesalad.com\">gamesalad</a></li>\n <li><a href=\"http://www.ganttproject.biz\">ganttproject</a></li>\n <li><a href=\"http://www.iwascoding.com/GarageBuy\">garagebuy</a></li>\n <li><a href=\"http://www.iwascoding.com/GarageSale/index.html\">garagesale</a></li>\n <li><a href=\"https://code.google.com/p/garglk/\">gargoyle</a></li>\n <li><a href=\"http://www8.garmin.com/support/download_details.jsp?id=4417\">garmin-ant-agent</a></li>\n <li><a href=\"http://www8.garmin.com/support/download_details.jsp?id=3739\">garmin-communicator</a></li>\n <li><a href=\"http://www.garmin.com/express\">garmin-express</a></li>\n <li><a href=\"http://www.garmin.com/garmin/cms/intosports/training_center\">garmin-training-center</a></li>\n <li><a href=\"http://www.clockwise.ee/gasmask/\">gas-mask</a></li>\n <li><a href=\"http://gawker.sourceforge.net/Gawker.html\">gawker</a></li>\n <li><a href=\"http://www.kyngchaos.com/software/frameworks\">gdal-framework</a></li>\n <li><a href=\"http://www.primatelabs.com/geekbench/\">geekbench</a></li>\n <li><a href=\"http://projects.tynsoe.org/en/geektool/\">geektool</a></li>\n <li><a href=\"http://www.genymotion.com/\">genymotion</a></li>\n <li><a href=\"http://gephi.org/\">gephi</a></li>\n <li><a href=\"http://puppetlabs.github.io/geppetto/\">geppetto</a></li>\n <li><a href=\"http://gfx.io/\">gfxcardstatus</a></li>\n <li><a href=\"http://ghcformacosx.github.io/\">ghc</a></li>\n <li><a href=\"http://vanamco.com/ghostlab/\">ghostlab</a></li>\n <li><a href=\"http://www.stone.com/GIFfun/\">giffun</a></li>\n <li><a href=\"http://www.gifrocket.com/\">gifrocket</a></li>\n <li><a href=\"http://gimp.lisanet.de\">gimp-lisanet</a></li>\n <li><a href=\"http://www.gimp.org\">gimp</a></li>\n <li><a href=\"http://harvest.readthedocs.org/en/latest/content/gingr.html\">gingr</a></li>\n <li><a href=\"http://www.gistoapp.com/\">gisto</a></li>\n <li><a href=\"http://git-annex.branchable.com/\">git-annex</a></li>\n <li><a href=\"https://www.gitbook.io/\">gitbook</a></li>\n <li><a href=\"http://gitboxapp.com/\">gitbox</a></li>\n <li><a href=\"http://mac.github.com\">github</a></li>\n <li><a href=\"http://psionides.github.io/Gitifier/\">gitifier</a></li>\n <li><a href=\"https://gitter.im/\">gitter</a></li>\n <li><a href=\"http://gitx.laullon.com/\">gitx-l</a></li>\n <li><a href=\"http://rowanj.github.io/gitx/\">gitx-rowanj</a></li>\n <li><a href=\"http://gitx.frim.nl/\">gitx</a></li>\n <li><a href=\"http://gityapp.com/\">gity</a></li>\n <li><a href=\"http://www.glc-player.net\">glcplayer</a></li>\n <li><a href=\"http://glimmerblocker.org\">glimmerblocker</a></li>\n <li><a href=\"http://globible.com/gloformac/\">glo</a></li>\n <li><a href=\"http://www.usglobalsat.com/\">globalsync</a></li>\n <li><a href=\"https://github.com/jashephe/Gmail-Notifier\">gmail-notifier</a></li>\n <li><a href=\"http://ashchan.com/projects/gmail-notifr\">gmail-notifr</a></li>\n <li><a href=\"http://www.gnucash.org\">gnucash</a></li>\n <li><a href=\"http://www.go.cd\">go-agent</a></li>\n <li><a href=\"http://www.go.cd/\">go-server</a></li>\n <li><a href=\"http://goagentx.com/\">goagentx</a></li>\n <li><a href=\"http://www.gog.com/downloader\">gog-downloader</a></li>\n <li><a href=\"http://golly.sourceforge.net/\">golly</a></li>\n <li><a href=\"http://www.google.com/intl/en_US/adwordseditor/\">google-adwords-editor</a></li>\n <li><a href=\"https://www.google.com/chrome/\">google-chrome</a></li>\n <li><a href=\"https://drive.google.com/\">google-drive</a></li>\n <li><a href=\"http://www.google.com/intl/en/earth/explore/products/plugin.html\">google-earth-web-plugin</a></li>\n <li><a href=\"https://www.google.com/earth/\">google-earth</a></li>\n <li><a href=\"https://www.google.com/tools/dlpage/hangoutplugin\">google-hangouts</a></li>\n <li><a href=\"https://www.google.co.jp/ime/\">google-japanese-ime</a></li>\n <li><a href=\"https://www.google.com/nikcollection/\">google-nik-collection</a></li>\n <li><a href=\"http://toolbar.google.com/gmail-helper/notifier_mac.html\">google-notifier</a></li>\n <li><a href=\"http://picasa.google.com/\">google-plus-auto-backup</a></li>\n <li><a href=\"http://openrefine.org/\">google-refine</a></li>\n <li><a href=\"https://www.google.com/webdesigner/\">google-web-designer</a></li>\n <li><a href=\"https://developers.google.com/appengine/\">googleappenginelauncher</a></li>\n <li><a href=\"http://pandanet-igs.com/communities/gopanda2\">gopanda</a></li>\n <li><a href=\"https://gpgtools.org/index.html\">gpgtools</a></li>\n <li><a href=\"http://www.gpower.hhu.de/\">gpower</a></li>\n <li><a href=\"http://gqrx.dk/\">gqrx</a></li>\n <li><a href=\"http://grabbox.devsoft.no/\">grabbox</a></li>\n <li><a href=\"http://pulkomandy.tk/projects/GrafX2\">grafx2</a></li>\n <li><a href=\"http://grandperspectiv.sourceforge.net/\">grandperspective</a></li>\n <li><a href=\"http://www.mediaatelier.com/GrandTotal3/\">grandtotal</a></li>\n <li><a href=\"https://github.com/graphsketcher/GraphSketcher\">graphsketcher</a></li>\n <li><a href=\"http://www.graphviz.org/\">graphviz</a></li>\n <li><a href=\"http://gravit.io/\">gravit</a></li>\n <li><a href=\"http://gridwars.marune.de/\">gridwars</a></li>\n <li><a href=\"http://www.grooveshark.com\">grooveshark</a></li>\n <li><a href=\"http://groovesquid.com/\">groovesquid</a></li>\n <li><a href=\"https://www.macupdate.com/app/mac/41038/growl-fork\">growl-fork</a></li>\n <li><a href=\"http://wafflesoftware.net/growlergn/\">growler</a></li>\n <li><a href=\"http://growl.info/downloads\">growlnotify</a></li>\n <li><a href=\"http://www.growlvoice.com/\">growlvoice</a></li>\n <li><a href=\"http://www.gieson.com/Library/projects/utilities/tuner/\">guitar-tuner</a></li>\n <li><a href=\"https://github.com/sindresorhus/gulp-app\">gulp</a></li>\n <li><a href=\"http://gurpscharactersheet.com\">gurps-character-sheet</a></li>\n <li><a href=\"https://gyazo.com/\">gyazo</a></li>\n</ul>\n\n<h4 id=\"h\">H</h4>\n\n<ul>\n <li><a href=\"https://hall.com/download-hall/hall-for-mac\">hall</a></li>\n <li><a href=\"http://handbrake.fr/\">handbrake</a></li>\n <li><a href=\"http://www.osomac.com/apps/osx/handbrake-batch/\">handbrakebatch</a></li>\n <li><a href=\"http://handbrake.fr\">handbrakecli</a></li>\n <li><a href=\"http://www.metakine.com/products/handsoff/\">hands-off</a></li>\n <li><a href=\"https://github.com/happypeter/happygrep\">happygrep</a></li>\n <li><a href=\"http://pad.haroopress.com/\">haroopad</a></li>\n <li><a href=\"http://www.getharvest.com/mac\">harvest</a></li>\n <li><a href=\"https://hashcat.net/hashcat/\">hashcat</a></li>\n <li><a href=\"http://www.haskell.org/platform/\">haskell-platform</a></li>\n <li><a href=\"http://www.noodlesoft.com/hazel.php\">hazel</a></li>\n <li><a href=\"http://dcloud.io/\">hbuilder</a></li>\n <li><a href=\"http://www.prosofteng.com/products/hear.php\">hear</a></li>\n <li><a href=\"http://presstube.com/blog/2011/heart/\">heart</a></li>\n <li><a href=\"http://hedgewars.org\">hedgewars</a></li>\n <li><a href=\"http://hermesapp.org/\">hermes</a></li>\n <li><a href=\"https://toolbelt.heroku.com/\">heroku-toolbelt</a></li>\n <li><a href=\"http://ridiculousfish.com/hexfiend/\">hex-fiend</a></li>\n <li><a href=\"http://hextcg.com/\">hex</a></li>\n <li><a href=\"http://hexchat.github.io\">hexchat</a></li>\n <li><a href=\"http://hexraystudios.com/hexels/\">hexels</a></li>\n <li><a href=\"https://www.hipchat.com/\">hipchat</a></li>\n <li><a href=\"http://hipporemote.com/\">hippoconnect</a></li>\n <li><a href=\"http://collect3.com.au/hiss/\">hiss</a></li>\n <li><a href=\"http://www.stclairsoft.com/HistoryHound/\">historyhound</a></li>\n <li><a href=\"http://www.hivewallet.com\">hive</a></li>\n <li><a href=\"http://hockeyapp.net/releases/mac/\">hockeyapp</a></li>\n <li><a href=\"http://www.sony.co.uk/hub/1237485339460\">homestream</a></li>\n <li><a href=\"https://github.com/puffnfresh/Honer.app\">honer</a></li>\n <li><a href=\"http://www.hopperapp.com/\">hopper-disassembler</a></li>\n <li><a href=\"http://www.hopperapp.com/HopperGDBServer/index.html\">hoppergdbserver</a></li>\n <li><a href=\"http://joshuawise.com/horndis\">horndis</a></li>\n <li><a href=\"http://clickontyler.com\">hostbuddy</a></li>\n <li><a href=\"http://www.redwinder.com/macapp/hoster/\">hoster</a></li>\n <li><a href=\"http://permanentmarkers.nl/software.html\">hosts</a></li>\n <li><a href=\"http://houdah.com/houdahGeo/\">houdahgeo</a></li>\n <li><a href=\"http://www.houdah.com/houdahSpot/\">houdahspot</a></li>\n <li><a href=\"http://www.fernlightning.com/doku.php?id=software:hpuload:start\">hpuload</a></li>\n <li><a href=\"http://www.hrmacapp.com/\">hr</a></li>\n <li><a href=\"http://lushi.163.com/\">hsang</a></li>\n <li><a href=\"http://www.tuffcode.com\">httpscoop</a></li>\n <li><a href=\"https://hubic.com\">hubic</a></li>\n <li><a href=\"http://hugin.sourceforge.net/\">hugin</a></li>\n <li><a href=\"http://coffitivity.com/hush/\">hush</a></li>\n <li><a href=\"http://tumult.com/hype/\">hype</a></li>\n <li><a href=\"http://hyperdock.bahoom.com/\">hyperdock</a></li>\n <li><a href=\"http://bahoom.com/hyperswitch\">hyperswitch</a></li>\n <li><a href=\"http://jawerty.github.io/Hyro/\">hyro</a></li>\n</ul>\n\n<h4 id=\"i\">I</h4>\n\n<ul>\n <li><a href=\"http://www.iannix.org/\">iannix</a></li>\n <li><a href=\"http://www.macinchem.org/ibabel/ibabel3.php\">ibabel</a></li>\n <li><a href=\"http://www.grapefruit.ch/iBackup\">ibackup</a></li>\n <li><a href=\"http://www.iggsoftware.com/ibank\">ibank</a></li>\n <li><a href=\"http://softorino.com/ibettercharge/\">ibettercharge</a></li>\n <li><a href=\"http://www.iboostup.com\">iboostup</a></li>\n <li><a href=\"http://www.ibrowseapp.com/\">ibrowse</a></li>\n <li><a href=\"http://www.hanynet.com/icefloor/\">icefloor</a></li>\n <li><a href=\"https://code.google.com/p/ichm/\">ichm</a></li>\n <li><a href=\"http://www.fadingred.com/icolors/\">icolors</a></li>\n <li><a href=\"http://www.icompta-app.com/\">icompta</a></li>\n <li><a href=\"http://antirez.com/iconping/\">iconping</a></li>\n <li><a href=\"https://www.macupdate.com/app/mac/17059/icursor\">icursor</a></li>\n <li><a href=\"http://www.pa-software.com/id3editor/\">id3-editor</a></li>\n <li><a href=\"http://identify2.arrmihardies.com/\">identify</a></li>\n <li><a href=\"http://www.hashbangind.com\">ideskcal</a></li>\n <li><a href=\"http://www.icyblaze.com/idocument/\">idocument-plus</a></li>\n <li><a href=\"http://www.idris-lang.org\">idris</a></li>\n <li><a href=\"http://www.macroplant.com/\">iexplorer</a></li>\n <li><a href=\"http://www.osxbytes.com/page3/index.html\">ifilex</a></li>\n <li><a href=\"http://www.i-funbox.com/\">ifunbox</a></li>\n <li><a href=\"http://www.igetter.net/\">igetter</a></li>\n <li><a href=\"http://derailer.org/iloc\">iloc</a></li>\n <li><a href=\"http://pngmini.com/\">imagealpha</a></li>\n <li><a href=\"https://github.com/kevva/imagemin-app\">imagemin</a></li>\n <li><a href=\"http://imageoptim.com/\">imageoptim</a></li>\n <li><a href=\"http://www.img2icnsapp.com/\">img2icns</a></li>\n <li><a href=\"http://imitone.com/\">imitone</a></li>\n <li><a href=\"http://inboardapp.com/beta\">inboard</a></li>\n <li><a href=\"https://sendtoinc.com/apps/\">inc</a></li>\n <li><a href=\"http://www.perceptiveautomation.com/indigo/index.html\">indigo</a></li>\n <li><a href=\"http://inductionapp.com/\">induction</a></li>\n <li><a href=\"https://infinit.io/\">infinit</a></li>\n <li><a href=\"http://inform7.com/\">inform</a></li>\n <li><a href=\"http://injectionforxcode.com/\">injection</a></li>\n <li><a href=\"http://inkscape.org\">inkscape</a></li>\n <li><a href=\"http://inky.com\">inky</a></li>\n <li><a href=\"http://www.getinsertpic.com/\">insertpic</a></li>\n <li><a href=\"http://instabridge.com/\">instabridge</a></li>\n <li><a href=\"http://vemedio.com/products/instacast-mac\">instacast</a></li>\n <li><a href=\"http://instead.syscall.ru/\">instead</a></li>\n <li><a href=\"https://insynchq.com/\">insync</a></li>\n <li><a href=\"http://peacockmedia.co.uk/integrity/\">integrity</a></li>\n <li><a href=\"https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager\">intel-haxm</a></li>\n <li><a href=\"https://software.intel.com/en-us/articles/intel-power-gadget-20\">intel-power-gadget</a></li>\n <li><a href=\"http://xdk-software.intel.com/\">intel-xdk</a></li>\n <li><a href=\"https://www.jetbrains.com/idea/index.html\">intellij-idea-ce</a></li>\n <li><a href=\"https://www.jetbrains.com/idea/index.html\">intellij-idea</a></li>\n <li><a href=\"http://rogueamoeba.com/intermission/\">intermission</a></li>\n <li><a href=\"http://www.read-write.fr/invisiblix/\">invisiblix</a></li>\n <li><a href=\"http://invisionapp.com/\">invisionsync</a></li>\n <li><a href=\"http://www.pozdeev.com/invisor/\">invisorql</a></li>\n <li><a href=\"http://iographica.com/\">iograph</a></li>\n <li><a href=\"https://ionu.com\">ionu</a></li>\n <li><a href=\"http://ioquake3.org/\">ioquake3</a></li>\n <li><a href=\"http://bodysoulspirit.weebly.com/ios-7-screensaver-for-mac-os-x-by-bodysoulspirit.html\">ios7-screensaver</a></li>\n <li><a href=\"http://ipalette.info/\">ipalette</a></li>\n <li><a href=\"http://ipaql.com/\">ipaql</a></li>\n <li><a href=\"http://support.apple.com/kb/DL1465\">iphone-configuration-utility</a></li>\n <li><a href=\"https://www.marketcircle.com/iphoney\">iphoney</a></li>\n <li><a href=\"http://www.gengis.net/prodotti/iReadFast_Mac/en/index.php\">ireadfast</a></li>\n <li><a href=\"http://thelittleappfactory.com/irip/\">irip</a></li>\n <li><a href=\"http://www.cl.cam.ac.uk/research/hvg/Isabelle/\">isabelle</a></li>\n <li><a href=\"http://willmore.eu/software/isolator\">isolator</a></li>\n <li><a href=\"http://bjango.com/mac/istatmenus/\">istat-menus</a></li>\n <li><a href=\"http://bjango.com/mac/istatserver/\">istat-server</a></li>\n <li><a href=\"http://www.hanynet.com/isteg/\">isteg</a></li>\n <li><a href=\"http://www.boinx.com/istopmotion/mac/\">istopmotion</a></li>\n <li><a href=\"http://istumbler.net/\">istumbler</a></li>\n <li><a href=\"http://echoone.com/iswiff/\">iswiff</a></li>\n <li><a href=\"http://www.iterm2.com/\">iterm2</a></li>\n <li><a href=\"http://www.itools.cn/download.php?v=mac_en\">itools</a></li>\n <li><a href=\"http://www.mowglii.com/itsycal/\">itsycal</a></li>\n <li><a href=\"https://github.com/alberti42/iTunes-Volume-Control\">itunes-volume-control</a></li>\n <li><a href=\"http://www.easyclasspage.de/lastfm/seite-19.html\">itunesscrobbler</a></li>\n <li><a href=\"http://www.itweax.net/\">itweax</a></li>\n <li><a href=\"http://iupx.sourceforge.net\">iupx</a></li>\n <li><a href=\"http://www.mani.de/en/ivolume/\">ivolume</a></li>\n <li><a href=\"http://www.izip.com\">izip</a></li>\n</ul>\n\n<h4 id=\"j\">J</h4>\n\n<ul>\n <li><a href=\"https://www.ciscojabbervideo.com/\">jabber-video</a></li>\n <li><a href=\"http://jabref.sourceforge.net/\">jabref</a></li>\n <li><a href=\"http://jthink.net/jaikoz\">jaikoz</a></li>\n <li><a href=\"http://www.willuhn.de/products/jameica/\">jameica</a></li>\n <li><a href=\"http://community.jaspersoft.com/project/jaspersoft-studio\">jaspersoft-studio</a></li>\n <li><a href=\"http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html\">java</a></li>\n <li><a href=\"http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html\">javafx-scene-builder</a></li>\n <li><a href=\"http://jawbone.com/\">jawbone-updater</a></li>\n <li><a href=\"http://www.jbidwatcher.com\">jbidwatcher</a></li>\n <li><a href=\"http://jd.benow.ca/\">jd-gui</a></li>\n <li><a href=\"http://www.jgoodies.com/freeware/jdiskreport/\">jdiskreport</a></li>\n <li><a href=\"http://jdownloader.org/\">jdownloader</a></li>\n <li><a href=\"http://www.jedit.org\">jedit</a></li>\n <li><a href=\"http://qvacua.com\">jenkins-menu</a></li>\n <li><a href=\"http://www.jetphotosoft.com/web/home/\">jetphoto-studio</a></li>\n <li><a href=\"http://jewelrybox.unfiniti.com/\">jewelrybox</a></li>\n <li><a href=\"http://www.sticksoftware.com/software/Jiggler.html\">jiggler</a></li>\n <li><a href=\"http://www.techsmith.com/jing.html\">jing</a></li>\n <li><a href=\"http://www.jitouch.com\">jitouch</a></li>\n <li><a href=\"https://jitsi.org/\">jitsi</a></li>\n <li><a href=\"https://join.me/\">joinme</a></li>\n <li><a href=\"http://josm.openstreetmap.de\">josm</a></li>\n <li><a href=\"https://github.com/rjregenold/jsonlook\">jsonlook</a></li>\n <li><a href=\"http://www.jubler.org/\">jubler</a></li>\n <li><a href=\"http://julialang.org/\">julia</a></li>\n <li><a href=\"http://forio.com/labs/julia-studio/\">juliastudio</a></li>\n <li><a href=\"http://jumpcut.sourceforge.net/\">jumpcut</a></li>\n <li><a href=\"https://jumpshare.com/\">jumpshare</a></li>\n <li><a href=\"http://chipmunkninja.com/JustLooking\">justlooking</a></li>\n <li><a href=\"http://jxplorer.org\">jxplorer</a></li>\n</ul>\n\n<h4 id=\"k\">K</h4>\n\n<ul>\n <li><a href=\"http://www.kaleidoscopeapp.com/\">kaleidoscope</a></li>\n <li><a href=\"https://mochidev.com/apps/kamakiri\">kamakiri</a></li>\n <li><a href=\"https://pqrs.org/osx/karabiner/\">karabiner</a></li>\n <li><a href=\"http://katana.witiz.com/\">katana</a></li>\n <li><a href=\"http://kdiff3.sourceforge.net/\">kdiff3</a></li>\n <li><a href=\"http://www.keepassx.org\">keepassx</a></li>\n <li><a href=\"http://kekaosx.com/\">keka</a></li>\n <li><a href=\"http://www.kensington.com/\">kensington-trackball-works</a></li>\n <li><a href=\"http://www.groths.org/software/kextdrop/\">kext-drop</a></li>\n <li><a href=\"http://cvad-mac.narod.ru/index/0-4\">kext-utility</a></li>\n <li><a href=\"http://www.insanelymac.com/forum/topic/253395-kext-wizard-easy-to-use-kext-installer-and-more/\">kext-wizard</a></li>\n <li><a href=\"http://manytricks.com/keycodes/\">key-codes</a></li>\n <li><a href=\"http://jan.prima.de/~jan/plok/archives/48-Keyboard-Cleaner.html\">keyboard-cleaner</a></li>\n <li><a href=\"http://www.keyboardmaestro.com/\">keyboard-maestro</a></li>\n <li><a href=\"http://bettertouchtool.net\">keyboardcleantool</a></li>\n <li><a href=\"https://github.com/sdeken/keycastr\">keycastr</a></li>\n <li><a href=\"http://www.ergonis.com/products/keycue/\">keycue</a></li>\n <li><a href=\"http://www.ibrahimshaath.co.uk/keyfinder/\">keyfinder</a></li>\n <li><a href=\"http://manytricks.com/keymo\">keymo</a></li>\n <li><a href=\"http://keystore-explorer.sourceforge.net/index.php\">keystore-explorer</a></li>\n <li><a href=\"http://kid3.sourceforge.net/\">kid3</a></li>\n <li><a href=\"http://www.amazon.com/gp/feature.html/?docId=1000765261\">kindle-previewer</a></li>\n <li><a href=\"http://www.amazon.com/gp/feature.html?ie=UTF8&amp;docId=1000464931\">kindle</a></li>\n <li><a href=\"http://www.amazon.com/gp/feature.html?docId=1000765211\">kindlegen</a></li>\n <li><a href=\"http://kismac-ng.org/\">kismac</a></li>\n <li><a href=\"https://kitematic.com/\">kitematic</a></li>\n <li><a href=\"http://kivy.org\">kivy</a></li>\n <li><a href=\"http://kiwi-app.net/\">kiwi</a></li>\n <li><a href=\"http://www.kkbox.com/\">kkbox</a></li>\n <li><a href=\"http://www.klayout.de/index.html\">klayout</a></li>\n <li><a href=\"http://knocktounlock.com\">knock</a></li>\n <li><a href=\"https://agilebits.com/knox\">knox</a></li>\n <li><a href=\"http://kobito.qiita.com/\">kobito</a></li>\n <li><a href=\"http://www.kobo.com/\">kobo</a></li>\n <li><a href=\"https://github.com/rsms/kod/\">kod</a></li>\n <li><a href=\"https://github.com/mephux/komanda\">komanda</a></li>\n <li><a href=\"http://komodoide.com/komodo-edit\">komodo-edit</a></li>\n <li><a href=\"http://komodoide.com/\">komodo-ide</a></li>\n <li><a href=\"http://www.kompozer.net/\">kompozer</a></li>\n <li><a href=\"http://www.kaleidoscopeapp.com/ksdiff2\">ksdiff</a></li>\n <li><a href=\"http://www.kuaipan.cn/d/mac\">kuaipan</a></li>\n <li><a href=\"http://www.kugou.com\">kugoumusic</a></li>\n <li><a href=\"http://www.kvirc.net\">kvirc</a></li>\n <li><a href=\"http://kylo.tv\">kylo</a></li>\n</ul>\n\n<h4 id=\"l\">L</h4>\n\n<ul>\n <li><a href=\"http://www.lastfm.com\">lastfm</a></li>\n <li><a href=\"https://lastpass.com/\">lastpass-universal</a></li>\n <li><a href=\"http://tacosw.com/latexian/\">latexian</a></li>\n <li><a href=\"http://www.chachatelier.fr/latexit\">latexit</a></li>\n <li><a href=\"http://www.obdev.at/products/launchbar/\">launchbar</a></li>\n <li><a href=\"http://www.soma-zone.com/LaunchControl/\">launchcontrol</a></li>\n <li><a href=\"https://github.com/jimbojsb/launchrocket\">launchrocket</a></li>\n <li><a href=\"http://www.launchy.net\">launchy</a></li>\n <li><a href=\"http://layervault.com/\">layervault</a></li>\n <li><a href=\"http://lazarus.freepascal.org/\">lazarus</a></li>\n <li><a href=\"http://signup.leagueoflegends.com/\">league-of-legends</a></li>\n <li><a href=\"https://www.leapmotion.com/setup\">leap-motion</a></li>\n <li><a href=\"http://incident57.com/less/\">less</a></li>\n <li><a href=\"http://www.conversationsnetwork.org/levelator/\">levelator</a></li>\n <li><a href=\"http://librecad.org/\">librecad</a></li>\n <li><a href=\"https://www.libreoffice.org/\">libreoffice</a></li>\n <li><a href=\"http://www.cockos.com/licecap/\">licecap</a></li>\n <li><a href=\"http://amarsagoo.info/licensed\">licensed</a></li>\n <li><a href=\"http://clockworkengine.com/lightpaper-mac/\">lightpaper</a></li>\n <li><a href=\"http://www.lighttable.com/\">lighttable</a></li>\n <li><a href=\"http://lilypond.org\">lilypond</a></li>\n <li><a href=\"http://limechat.net/mac/\">limechat</a></li>\n <li><a href=\"http://onflapp.wordpress.com/lincastor/\">lincastor</a></li>\n <li><a href=\"http://www.rogueamoeba.com/freebies/\">linein</a></li>\n <li><a href=\"http://www.peterborgapps.com/lingon/\">lingon-x</a></li>\n <li><a href=\"http://radar.lingr.com/\">lingrradar</a></li>\n <li><a href=\"http://conceited.net/products/linkinus\">linkinus</a></li>\n <li><a href=\"https://github.com/halo/LinkLiar\">linkliar</a></li>\n <li><a href=\"http://www.linphone.org/\">linphone</a></li>\n <li><a href=\"http://www.liquifile.info/\">liquifile</a></li>\n <li><a href=\"https://litecoin.org/\">litecoin</a></li>\n <li><a href=\"http://www.freemacsoft.net/liteicon/\">liteicon</a></li>\n <li><a href=\"https://github.com/visualfc/liteide\">liteide</a></li>\n <li><a href=\"http://www.obdev.at/products/littlesnitch/index.html\">little-snitch</a></li>\n <li><a href=\"http://littleipsum.com\">littleipsum</a></li>\n <li><a href=\"http://www.livereload.com\">livereload</a></li>\n <li><a href=\"http://www.livestation.com\">livestation</a></li>\n <li><a href=\"http://www.cluetrust.com/loadmytracks.html\">loadmytracks</a></li>\n <li><a href=\"http://www.binarynights.com/\">locko</a></li>\n <li><a href=\"http://www.saleae.com/\">logic</a></li>\n <li><a href=\"http://ozark.hendrix.edu/~burch/logisim/\">logisim</a></li>\n <li><a href=\"http://www.logitech.com\">logitech-control-center</a></li>\n <li><a href=\"http://www.logitech.com/en-us/support/gaming-software?section=downloads&amp;bit=&amp;osid=36\">logitech-gaming-software</a></li>\n <li><a href=\"http://www.logitech.com/en-us/support/universal-remotes\">logitech-harmony</a></li>\n <li><a href=\"https://setup.myharmony.com/\">logitech-myharmony</a></li>\n <li><a href=\"http://www.logitech.com/en-us/promotions/6072\">logitech-unifying</a></li>\n <li><a href=\"https://secure.logmein.com/products/pro/learnmore/desktopapp.aspx\">logmein-client</a></li>\n <li><a href=\"http://vpn.net\">logmein-hamachi</a></li>\n <li><a href=\"http://www.syniumsoftware.com/logoist/\">logoist</a></li>\n <li><a href=\"http://loom.com/\">loom</a></li>\n <li><a href=\"http://love2d.org\">love</a></li>\n <li><a href=\"http://www.akaipro.com/index.php/product/lpk25\">lpk25-editor</a></li>\n <li><a href=\"http://www.linear.com/designtools/software/\">ltspice</a></li>\n <li><a href=\"http://lucidor.org\">lucidor</a></li>\n <li><a href=\"http://qtpfsgui.sourceforge.net/\">luminance-hdr</a></li>\n <li><a href=\"http://www.lynapp.com/\">lyn</a></li>\n <li><a href=\"http://habilis.net/lynxlet/\">lynxlet</a></li>\n <li><a href=\"http://www.kenichimaehashi.com/lyricsmaster/\">lyrics-master</a></li>\n <li><a href=\"http://www.lyx.org\">lyx</a></li>\n</ul>\n\n<h4 id=\"m\">M</h4>\n\n<ul>\n <li><a href=\"http://macdownload.informer.com/landing/\">mac-informer</a></li>\n <li><a href=\"http://sevenbits.github.io/Mac-Linux-USB-Loader/\">mac-linux-usb-loader</a></li>\n <li><a href=\"http://macaw.co/\">macaw</a></li>\n <li><a href=\"http://www.publicspace.net/MacBreakZ/\">macbreakz</a></li>\n <li><a href=\"http://macdown.uranusjr.com/\">macdown</a></li>\n <li><a href=\"http://interfacelift.com/apps/macdrops/v1\">macdrops</a></li>\n <li><a href=\"http://macfusionapp.org/\">macfusion</a></li>\n <li><a href=\"https://www.bluestatic.org/software/macgdbp/\">macgdbp</a></li>\n <li><a href=\"http://www.julifos.com/soft/machacha/index.html\">machacha</a></li>\n <li><a href=\"http://jasonfharris.com/machg/\">machg</a></li>\n <li><a href=\"http://www.ragesw.com/products/explorer.html\">macintosh-explorer</a></li>\n <li><a href=\"http://www.devon.riceball.net/display.php?file=m01\">macmoney</a></li>\n <li><a href=\"http://gp.home.xs4all.nl/Site/MacPAR_deLuxe.html\">macpar-deluxe</a></li>\n <li><a href=\"http://mstarke.github.io/MacPass/\">macpass</a></li>\n <li><a href=\"http://macpaw.com/gemini\">macpaw-gemini</a></li>\n <li><a href=\"http://www.koingosw.com/products/macpilot.php\">macpilot</a></li>\n <li><a href=\"http://www.macports.org\">macports</a></li>\n <li><a href=\"http://www.crystalidea.com/macs-fan-control\">macs-fan-control</a></li>\n <li><a href=\"http://www.macterm.net/\">macterm</a></li>\n <li><a href=\"http://www.tug.org/mactex/\">mactex</a></li>\n <li><a href=\"http://mactracker.ca/\">mactracker</a></li>\n <li><a href=\"http://macapps.sakura.ne.jp/mactubes/index_en.html\">mactubes</a></li>\n <li><a href=\"https://www.macupdate.com/desktop\">macupdate-desktop</a></li>\n <li><a href=\"http://code.google.com/p/macvim/\">macvim</a></li>\n <li><a href=\"http://tidajapan.com/macwinzipper\">macwinzipper</a></li>\n <li><a href=\"http://ynomura.com/home/?page_id=116\">maczip4win</a></li>\n <li><a href=\"http://www.wingsforpigs.com/MadRuby/MadRuby.html\">madruby</a></li>\n <li><a href=\"http://www.oneperiodic.com/products/magiclaunch/\">magic-launch</a></li>\n <li><a href=\"http://www.magicansoft.com/\">magican</a></li>\n <li><a href=\"http://www.chungwasoft.com/mailpluginmanager/\">mail-plugin-manager</a></li>\n <li><a href=\"http://www.mailboxapp.com/\">mailbox</a></li>\n <li><a href=\"http://www.cs.unc.edu/~welch/MailFollowup/\">mailfollowup</a></li>\n <li><a href=\"http://freron.com/\">mailmate</a></li>\n <li><a href=\"http://mailplaneapp.com\">mailplane</a></li>\n <li><a href=\"http://erikhinterbichler.com/apps/majic/\">majic</a></li>\n <li><a href=\"http://www.makehuman.org/\">makehuman</a></li>\n <li><a href=\"http://www.makemkv.com/\">makemkv</a></li>\n <li><a href=\"http://www.makerbot.com/makerware/\">makerware</a></li>\n <li><a href=\"http://mameosx.sourceforge.net/\">mame</a></li>\n <li><a href=\"http://www.mamp.info/en/index.html\">mamp</a></li>\n <li><a href=\"http://manager.io\">manager</a></li>\n <li><a href=\"http://manico.im/\">manico</a></li>\n <li><a href=\"http://anatoo.jp/mapture/\">mapture</a></li>\n <li><a href=\"http://www.maratis3d.org/\">maratis</a></li>\n <li><a href=\"http://www.marble.kde.org\">marble</a></li>\n <li><a href=\"http://marked2app.com\">marked</a></li>\n <li><a href=\"http://www.red-sweater.com/marsedit/\">marsedit</a></li>\n <li><a href=\"http://macinmind.com/?area=app&amp;app=masterkey&amp;pg=info\">master-key</a></li>\n <li><a href=\"http://www.kyngchaos.com/software/python\">matplotlib</a></li>\n <li><a href=\"http://gel.ahabs.wisc.edu/mauve/\">mauve</a></li>\n <li><a href=\"http://mavensmate.com\">mavensmate</a></li>\n <li><a href=\"http://sbooth.org/Max/\">max</a></li>\n <li><a href=\"http://www.maxthon.com/\">maxthon</a></li>\n <li><a href=\"http://www.mcedit.net\">mcedit</a></li>\n <li><a href=\"http://www.asix.com.tw/products.php?op=ProductList&amp;PLine=74&amp;PSeries=109\">mcs783x</a></li>\n <li><a href=\"http://www.macdvdripperpro.com/\">mdrp</a></li>\n <li><a href=\"http://media-converter.sourceforge.net/\">media-converter</a></li>\n <li><a href=\"http://www.mediaelch.de/\">mediaelch</a></li>\n <li><a href=\"https://www.mediafire.com/software/desktop/\">mediafire-desktop</a></li>\n <li><a href=\"http://mediaarea.net/en/MediaInfo\">mediainfo</a></li>\n <li><a href=\"http://sourceforge.net/projects/zdfmediathk/\">mediathekview</a></li>\n <li><a href=\"http://codesorcery.net/meerkat\">meerkat</a></li>\n <li><a href=\"http://www.memorytamer.com/\">memorytamer</a></li>\n <li><a href=\"http://www.mendeley.com/\">mendeley-desktop</a></li>\n <li><a href=\"http://capablehands.net/menubarcountdown\">menubar-countdown</a></li>\n <li><a href=\"http://wez.github.com/MenuBarFilter/\">menubarfilter</a></li>\n <li><a href=\"http://www.objectpark.net/en/mcc.html\">menucalendarclock-ical</a></li>\n <li><a href=\"http://www.ragingmenace.com/software/menumeters/\">menumeters</a></li>\n <li><a href=\"http://www.geocom.co.nz\">menuola</a></li>\n <li><a href=\"https://meocloud.pt\">meocloud</a></li>\n <li><a href=\"http://www.heliumfoot.com/mercurymover\">mercurymover</a></li>\n <li><a href=\"http://www.desertsandsoftware.com\">mesasqlite</a></li>\n <li><a href=\"http://meshlab.sourceforge.net/\">meshlab</a></li>\n <li><a href=\"http://www.metanota.com/\">metanota</a></li>\n <li><a href=\"http://heat-meteo.sourceforge.net/\">meteorologist</a></li>\n <li><a href=\"http://www.mimikaki.net/\">mi</a></li>\n <li><a href=\"http://www.microsoft.com/hardware/en-us/mice\">microsoft-intellipoint</a></li>\n <li><a href=\"http://www.microsoft.com/hardware/en-us/keyboards\">microsoft-intellitype</a></li>\n <li><a href=\"http://office.microsoft.com/Lync\">microsoft-lync-plugin</a></li>\n <li><a href=\"http://clement.beffa.org/labs/projects/middleclick\">middleclick</a></li>\n <li><a href=\"http://www.manyetas.com/creed/midikeys.html\">midikeys</a></li>\n <li><a href=\"http://en.sourceforge.jp/projects/miditrail/\">miditrail</a></li>\n <li><a href=\"http://www.mikogo.com/\">mikogo</a></li>\n <li><a href=\"http://www.milkytracker.org/\">milkytracker</a></li>\n <li><a href=\"https://minbox.com\">minbox</a></li>\n <li><a href=\"http://www.celmaro.com/minco/\">minco</a></li>\n <li><a href=\"https://mindnode.com/\">mindnode-pro</a></li>\n <li><a href=\"http://minecraft.net\">minecraft</a></li>\n <li><a href=\"http://dinopoloclub.com/minimetro/\">mini-metro</a></li>\n <li><a href=\"http://www.crintsoft.com/\">minilyrics</a></li>\n <li><a href=\"http://ilovecolorz.net/minimalclock/\">minimalclock</a></li>\n <li><a href=\"http://kevingessner.com/software/minitimer/\">minitimer</a></li>\n <li><a href=\"http://flavio.tordini.org/minitube\">minitube</a></li>\n <li><a href=\"http://www.mirovideoconverter.com/\">miro-video-converter</a></li>\n <li><a href=\"http://www.getmiro.com/\">miro</a></li>\n <li><a href=\"http://www.fabiancanas.com/Projects/MirrorDisplays\">mirrordisplays</a></li>\n <li><a href=\"http://mixlr.com\">mixlr</a></li>\n <li><a href=\"http://mixture.io/\">mixture</a></li>\n <li><a href=\"http://www.mixxx.org\">mixxx</a></li>\n <li><a href=\"http://mjolnir.io\">mjolnir</a></li>\n <li><a href=\"http://www.bunkus.org/videotools/mkvtoolnix/\">mkvtoolnix</a></li>\n <li><a href=\"http://mnemosyne-proj.org/\">mnemosyne</a></li>\n <li><a href=\"http://mocksmtpapp.com/\">mocksmtp</a></li>\n <li><a href=\"http://www.jumsoft.com/money/\">money</a></li>\n <li><a href=\"http://www.hardcoded.net/moneyguru/\">moneyguru</a></li>\n <li><a href=\"http://moneymoney-app.com/\">moneymoney</a></li>\n <li><a href=\"http://www.matrica.de/\">moneyplex</a></li>\n <li><a href=\"http://nothirst.com/moneywell/\">moneywell</a></li>\n <li><a href=\"http://mongodbx-app.orelord.com/\">mongodb</a></li>\n <li><a href=\"https://github.com/remysaissy/mongodb-macosx-prefspane\">mongodbpreferencepane</a></li>\n <li><a href=\"https://github.com/fotonauts/MongoHub-Mac\">mongohub</a></li>\n <li><a href=\"http://mono-project.com/\">mono-mdk</a></li>\n <li><a href=\"http://mono-project.com\">mono-mre</a></li>\n <li><a href=\"http://lucianmarin.com/monochrome/\">monochrome</a></li>\n <li><a href=\"http://monolingual.sourceforge.net/\">monolingual</a></li>\n <li><a href=\"http://www.fonts.com/web-fonts/google\">monotype-skyfonts</a></li>\n <li><a href=\"http://manytricks.com/moom/\">moom</a></li>\n <li><a href=\"http://sourceforge.net/projects/moreamp/\">moreamp</a></li>\n <li><a href=\"http://mosh.mit.edu/\">mosh</a></li>\n <li><a href=\"http://mouapp.com/\">mou</a></li>\n <li><a href=\"http://appgineers.de/mountain/\">mountain</a></li>\n <li><a href=\"http://www.themaninhat.com/mover.html\">mover</a></li>\n <li><a href=\"http://www.movieply.com/\">movieply</a></li>\n <li><a href=\"https://github.com/samiamwork/Movist\">movist</a></li>\n <li><a href=\"http://www.mozart-oz.org\">mozart</a></li>\n <li><a href=\"http://www.emmgunn.com/mp4tools/mp4toolshome.html\">mp4tools</a></li>\n <li><a href=\"http://www.squared5.com/\">mpeg-streamclip</a></li>\n <li><a href=\"http://www.lairware.com/mpfreaker/\">mpfreaker</a></li>\n <li><a href=\"http://www.mplayerosx.ch/\">mplayer-osx-extended</a></li>\n <li><a href=\"http://mplayerx.org/\">mplayerx</a></li>\n <li><a href=\"http://mpv.io/\">mpv</a></li>\n <li><a href=\"http://www.mucommander.com/index.php\">mucommander</a></li>\n <li><a href=\"http://www.mudlet.org\">mudlet</a></li>\n <li><a href=\"https://multibit.org/\">multibit</a></li>\n <li><a href=\"https://sites.google.com/site/tesseractsoftware/multibrowser\">multibrowser</a></li>\n <li><a href=\"http://multidoge.org/\">multidoge</a></li>\n <li><a href=\"http://davemartorana.com/multifirefox\">multifirefox</a></li>\n <li><a href=\"http://mumble.sourceforge.net\">mumble</a></li>\n <li><a href=\"http://genjiapp.com/mac/murasaki/index_en.html\">murasaki</a></li>\n <li><a href=\"http://musescore.org/\">musescore</a></li>\n <li><a href=\"https://play.google.com/music/\">music-manager</a></li>\n <li><a href=\"http://musicbrainz.org/doc/MusicBrainz_Picard\">musicbrainz-picard</a></li>\n <li><a href=\"http://ufd.dk/musicplayer\">musicplayer</a></li>\n <li><a href=\"http://flavio.tordini.org/musictube\">musictube</a></li>\n <li><a href=\"http://flavio.tordini.org/musique\">musique</a></li>\n <li><a href=\"http://www.myphonedesktop.com/\">myphonedesktop</a></li>\n <li><a href=\"http://www.mysql.com/products/workbench\">mysqlworkbench</a></li>\n</ul>\n\n<h4 id=\"n\">N</h4>\n\n<ul>\n <li><a href=\"http://yllan.org/app/Nally/\">nally</a></li>\n <li><a href=\"http://manytricks.com/namemangler/\">name-mangler</a></li>\n <li><a href=\"https://code.google.com/p/namebench/\">namebench</a></li>\n <li><a href=\"http://www.mrrsoftware.com/MRRSoftware/NameChanger.html\">namechanger</a></li>\n <li><a href=\"http://amarsagoo.info/namely\">namely</a></li>\n <li><a href=\"http://getnarrative.com\">narrative-uploader</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-data-modeler\">navicat-data-modeler</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-mariadb\">navicat-for-mariadb</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-mysql\">navicat-for-mysql</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-oracle\">navicat-for-oracle</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-postgresql\">navicat-for-postgresql</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-sqlserver\">navicat-for-sql-server</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-for-sqlite\">navicat-for-sqlite</a></li>\n <li><a href=\"http://www.navicat.com/products/navicat-premium\">navicat-premium</a></li>\n <li><a href=\"http://www.cdfinder.de\">neofinder</a></li>\n <li><a href=\"https://netbeans.org/\">netbeans-cpp</a></li>\n <li><a href=\"https://netbeans.org/\">netbeans-php</a></li>\n <li><a href=\"https://netbeans.org/\">netbeans</a></li>\n <li><a href=\"https://code.google.com/p/nethack-cocoa/\">nethackcocoa</a></li>\n <li><a href=\"http://ccl.northwestern.edu/netlogo/\">netlogo</a></li>\n <li><a href=\"http://netnewswireapp.com/\">netnewswire</a></li>\n <li><a href=\"http://raynersoftware.com/netshade/\">netshade</a></li>\n <li><a href=\"http://www.netspotapp.com\">netspot</a></li>\n <li><a href=\"http://www.elegantchaos.com/neu/\">neu</a></li>\n <li><a href=\"https://ngrok.com/\">ngrok</a></li>\n <li><a href=\"http://rogueamoeba.com/nicecast\">nicecast</a></li>\n <li><a href=\"http://coreh.github.io/nide/\">nide</a></li>\n <li><a href=\"http://getnightingale.com/\">nightingale</a></li>\n <li><a href=\"http://nikeplus.nike.com\">nike-plus-connect</a></li>\n <li><a href=\"https://github.com/jnordberg/irccloudapp\">nimbus</a></li>\n <li><a href=\"http://forums.ninjablocks.com/index.php?p=/discussion/1655/ninja-osx-client/p1\">ninjablocks</a></li>\n <li><a href=\"https://quickmediasolutions.com/apps/14/nitroshare\">nitroshare</a></li>\n <li><a href=\"https://www.nitrous.io/mac\">nitrous-desktop</a></li>\n <li><a href=\"http://nmap.org/\">nmap</a></li>\n <li><a href=\"http://www.noip.com/download?page=mac\">no-ip-duc</a></li>\n <li><a href=\"http://code.google.com/p/blacktree-nocturne/\">nocturne</a></li>\n <li><a href=\"https://github.com/rogerwang/node-webkit\">node-webkit</a></li>\n <li><a href=\"http://nodejs.org\">node</a></li>\n <li><a href=\"http://nodebox.net/node/\">nodebox</a></li>\n <li><a href=\"http://www.nodeclipse.org/\">nodeclipse</a></li>\n <li><a href=\"https://pqrs.org/macosx/keyremap4macbook/noejectdelay.html.en\">noejectdelay</a></li>\n <li><a href=\"https://github.com/jonshea/Noisy\">noisy</a></li>\n <li><a href=\"http://workram.com/games/noiz2sa/\">noiz2sa</a></li>\n <li><a href=\"http://www.nomachine.com\">nomachine</a></li>\n <li><a href=\"http://www.nomacs.org/\">nomacs</a></li>\n <li><a href=\"http://www.hanynet.com/noobproof/index.html\">noobproof</a></li>\n <li><a href=\"https://code.google.com/p/macosx-nosleep-extension/\">nosleep</a></li>\n <li><a href=\"http://notational.net\">notational-velocity</a></li>\n <li><a href=\"https://back.nothingtohide.cc/\">nothing-to-hide</a></li>\n <li><a href=\"http://getnotifyr.com\">notifyr</a></li>\n <li><a href=\"https://clickontyler.com/nottingham/\">nottingham</a></li>\n <li><a href=\"http://sourceforge.net/projects/ntfsfree/\">ntfs-free</a></li>\n <li><a href=\"https://jianguoyun.com\">nutstore</a></li>\n <li><a href=\"http://brettterpstra.com/project/nvalt/\">nvalt</a></li>\n <li><a href=\"http://www.nzbvortex.com/\">nzbvortex</a></li>\n</ul>\n\n<h4 id=\"o\">O</h4>\n\n<ul>\n <li><a href=\"http://nthloop.github.io/Objektiv/\">objektiv</a></li>\n <li><a href=\"http://obsproject.com/\">obs</a></li>\n <li><a href=\"http://www.obsidianmenubar.com\">obsidian-menu-bar-mountain-lion</a></li>\n <li><a href=\"http://www.ocenaudio.com.br/en\">ocenaudio</a></li>\n <li><a href=\"http://oclint.org\">oclint</a></li>\n <li><a href=\"https://gnu.org/software/octave/\">octave</a></li>\n <li><a href=\"https://www.odesk.com/\">odesk</a></li>\n <li><a href=\"http://www.omnigroup.com/more\">omnidazzle</a></li>\n <li><a href=\"http://www.omnigroup.com/products/omnidisksweeper/\">omnidisksweeper</a></li>\n <li><a href=\"http://www.omnigroup.com/products/omnifocus/\">omnifocus</a></li>\n <li><a href=\"http://www.omnigroup.com/products/omnigraffle\">omnigraffle</a></li>\n <li><a href=\"http://www.omnigroup.com/omnioutliner/\">omnioutliner</a></li>\n <li><a href=\"http://www.omnigroup.com/products/omniplan/\">omniplan</a></li>\n <li><a href=\"http://www.omnigroup.com/omnipresence\">omnipresence</a></li>\n <li><a href=\"http://www.omnigroup.com/products/omniweb/\">omniweb</a></li>\n <li><a href=\"https://agilebits.com/onepassword\">onepassword</a></li>\n <li><a href=\"http://www.oneswarm.org/\">oneswarm</a></li>\n <li><a href=\"https://onionshare.org/\">onionshare</a></li>\n <li><a href=\"http://games.onlive.com\">onlive-client</a></li>\n <li><a href=\"http://www.titanium.free.fr/downloadonyx.php\">onyx</a></li>\n <li><a href=\"http://www.oovoo.com\">oovoo</a></li>\n <li><a href=\"http://openarena.ws\">openarena</a></li>\n <li><a href=\"https://support.opendns.com/entries/23218654-Where-do-I-download-an-OpenDNS-Dynamic-IP-updater-client-\">opendns-updater</a></li>\n <li><a href=\"http://openemu.org/\">openemu</a></li>\n <li><a href=\"http://openlp.org\">openlp</a></li>\n <li><a href=\"http://opennx.net/\">opennx</a></li>\n <li><a href=\"http://www.openoffice.org/\">openoffice</a></li>\n <li><a href=\"http://www.openra.net/\">openra</a></li>\n <li><a href=\"http://www.openscad.org/\">openscad</a></li>\n <li><a href=\"http://osdoc.cogsci.nl/\">opensesame</a></li>\n <li><a href=\"http://www.opensong.org/\">opensong</a></li>\n <li><a href=\"http://openttd.org\">openttd</a></li>\n <li><a href=\"http://openvanilla.org/\">openvanilla</a></li>\n <li><a href=\"http://www.opera.com/computer/mail\">opera-mail</a></li>\n <li><a href=\"http://www.opera.com/developer/mobile-emulator\">opera-mobile-emulator</a></li>\n <li><a href=\"http://www.opera.com/computer/next\">opera-next</a></li>\n <li><a href=\"http://www.opera.com/\">opera</a></li>\n <li><a href=\"http://most-advantageous.com/optimal-layout/\">optimal-layout</a></li>\n <li><a href=\"http://orange.biolab.si/\">orange</a></li>\n <li><a href=\"http://orbitapp.net\">orbit</a></li>\n <li><a href=\"http://origin.com\">origin</a></li>\n <li><a href=\"http://getormr.com/home/\">ormr</a></li>\n <li><a href=\"http://www.osculator.net\">osculator</a></li>\n <li><a href=\"http://www.osirix-viewer.com\">osirix</a></li>\n <li><a href=\"https://osxfuse.github.io/\">osxfuse</a></li>\n <li><a href=\"http://www.outwit.com\">outwit-hub</a></li>\n <li><a href=\"https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project\">owasp-zap</a></li>\n <li><a href=\"http://owncloud.com\">owncloud</a></li>\n</ul>\n\n<h4 id=\"p\">P</h4>\n\n<ul>\n <li><a href=\"http://www.perforce.com/product/components/perforce-visual-merge-and-diff-tools\">p4merge</a></li>\n <li><a href=\"http://www.perforce.com/product/components/perforce-visual-client\">p4v</a></li>\n <li><a href=\"http://p5js.org/download/#editor\">p5</a></li>\n <li><a href=\"http://www.charlessoft.com/\">pacifist</a></li>\n <li><a href=\"http://www.packer.io/\">packer</a></li>\n <li><a href=\"http://padre.perlide.org\">padre</a></li>\n <li><a href=\"http://pagico.com/\">pagico</a></li>\n <li><a href=\"http://paintbrush.sourceforge.net/\">paintbrush</a></li>\n <li><a href=\"http://www.paintcodeapp.com/\">paintcode</a></li>\n <li><a href=\"http://johnmacfarlane.net/pandoc\">pandoc</a></li>\n <li><a href=\"http://www.pandora.com/\">pandora-one</a></li>\n <li><a href=\"http://en.pangu.io/\">pangu</a></li>\n <li><a href=\"http://panic.com/unison/\">panic-unison</a></li>\n <li><a href=\"http://sourceforge.net/projects/pvqt/\">panini</a></li>\n <li><a href=\"http://derailer.org/paparazzi/\">paparazzi</a></li>\n <li><a href=\"http://www.papersapp.com/papers/\">papers</a></li>\n <li><a href=\"http://www.paragon-software.com/home/extfs-mac/\">paragon-extfs</a></li>\n <li><a href=\"http://www.paragon-software.com/home/ntfs-mac/\">paragon-ntfs</a></li>\n <li><a href=\"http://www.parallels.com/products/desktop/\">parallels</a></li>\n <li><a href=\"http://www.paraview.org/\">paraview</a></li>\n <li><a href=\"https://parse.com\">parse</a></li>\n <li><a href=\"http://www.bluem.net/en/mac/pashua/\">pashua</a></li>\n <li><a href=\"https://github.com/zdia/gorilla\">password-gorilla</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/PasswordPractice\">password-practice</a></li>\n <li><a href=\"http://mehlau.net/pastor\">pastor</a></li>\n <li><a href=\"http://www.cocoatech.com/pathfinder/\">path-finder</a></li>\n <li><a href=\"http://luckymarmot.com/paw\">paw</a></li>\n <li><a href=\"http://www.hmrc.gov.uk/payerti/payroll/bpt/paye-tools.htm\">paye-tools</a></li>\n <li><a href=\"http://www.pcalc.com/index.html\">pcalc</a></li>\n <li><a href=\"https://pcsxr.codeplex.com\">pcsxr</a></li>\n <li><a href=\"http://puredata.info/downloads/pd-extended\">pd-extended</a></li>\n <li><a href=\"http://www.sybrex.com/products/macgui/infomanager/\">pdfinfo</a></li>\n <li><a href=\"http://www.hardcoded.net/pdfmasher/\">pdfmasher</a></li>\n <li><a href=\"http://smilesoftware.com/PDFpen/index.html\">pdfpen</a></li>\n <li><a href=\"http://www.smilesoftware.com/PDFpenPro/index.html\">pdfpenpro</a></li>\n <li><a href=\"http://www.pdfsam.org/\">pdfsam</a></li>\n <li><a href=\"https://github.com/tparry/PDFShaver.app\">pdfshaver</a></li>\n <li><a href=\"http://www.pdflabs.com/tools/pdftk-server/\">pdftk</a></li>\n <li><a href=\"http://topfunky.github.io/PeepOpen/\">peepopen</a></li>\n <li><a href=\"http://www.donkeyengineering.com/pemdaswidget/\">pemdas-widget</a></li>\n <li><a href=\"http://pencil.evolus.vn\">pencil</a></li>\n <li><a href=\"http://community.pentaho.com\">pentaho-data-integration</a></li>\n <li><a href=\"http://www.perian.org/\">perian</a></li>\n <li><a href=\"http://sabi.net/nriley/software/index.html#pester\">pester</a></li>\n <li><a href=\"http://www.scheme.com/petitechezscheme.html\">petite-chez-scheme</a></li>\n <li><a href=\"http://www.hanynet.com/pflists/index.html\">pflists</a></li>\n <li><a href=\"http://eggerapps.at/pgcommander/\">pg-commander</a></li>\n <li><a href=\"http://pgadmin.org\">pgadmin3</a></li>\n <li><a href=\"http://pgloader.io\">pgloader</a></li>\n <li><a href=\"http://phantomjs.org/\">phantomjs</a></li>\n <li><a href=\"http://www.pharo-project.org/home\">pharo</a></li>\n <li><a href=\"http://blyt.net/phxslides\">phoenix-slides</a></li>\n <li><a href=\"https://github.com/sdegutis/Phoenix\">phoenix</a></li>\n <li><a href=\"http://www.imobie.com/phoneclean/\">phoneclean</a></li>\n <li><a href=\"http://www.picturecode.com/index.php\">photoninja</a></li>\n <li><a href=\"http://www.jetbrains.com/phpstorm/\">phpstorm</a></li>\n <li><a href=\"http://ivanx.com/raspberrypi\">pi-filler</a></li>\n <li><a href=\"http://dev.kunugiken.com/Pianopub/\">pianopub</a></li>\n <li><a href=\"http://picasa.google.com/\">picasa</a></li>\n <li><a href=\"http://www.acqualia.com/picturesque/\">picturesque</a></li>\n <li><a href=\"http://rogueamoeba.com/piezo/\">piezo</a></li>\n <li><a href=\"http://pinegrow.com/\">pinegrow-web-designer</a></li>\n <li><a href=\"https://github.com/kalleboo/PingMenu\">pingmenu</a></li>\n <li><a href=\"http://pinsapp.com/\">pins</a></li>\n <li><a href=\"http://pinta-project.com/\">pinta</a></li>\n <li><a href=\"http://pivotalbooster.com/\">pivotalbooster</a></li>\n <li><a href=\"http://macguitar.me/apps/pixelcheck/\">pixel-check</a></li>\n <li><a href=\"http://ricciadams.com/projects/pixel-winch\">pixel-winch</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/labs\">pixelpeeper</a></li>\n <li><a href=\"http://plumamazing.com/mac/pixelstick\">pixelstick</a></li>\n <li><a href=\"http://www.danielx.net/pixel-editor/docs/download\">pixi-paint</a></li>\n <li><a href=\"https://pixlr.com\">pixlr</a></li>\n <li><a href=\"https://placeit.net/\">placeit</a></li>\n <li><a href=\"http://www.bluem.net/en/mac/plain-clip\">plain-clip</a></li>\n <li><a href=\"http://barbariangroup.com/\">plainview</a></li>\n <li><a href=\"http://sveinbjorn.org/platypus\">platypus</a></li>\n <li><a href=\"http://www.playonmac.com/en\">playonmac</a></li>\n <li><a href=\"http://www.dragonone.com/products/macosx/pleasesleep/\">pleasesleep</a></li>\n <li><a href=\"https://plex.tv\">plex-home-theater</a></li>\n <li><a href=\"https://plex.tv/\">plex-media-server</a></li>\n <li><a href=\"http://pliny.cch.kcl.ac.uk\">pliny</a></li>\n <li><a href=\"http://stenoknight.com/wiki/Main_Page\">plover</a></li>\n <li><a href=\"http://www.plugformac.com/\">plug</a></li>\n <li><a href=\"http://www.plycount.com\">plycounter</a></li>\n <li><a href=\"http://www.echomist.co.uk/software/PNGCommentator.html\">pngcommentator</a></li>\n <li><a href=\"http://nukesaq88.github.io/Pngyu/\">pngyu</a></li>\n <li><a href=\"http://www.poedit.net\">poedit</a></li>\n <li><a href=\"http://tox.im\">poison</a></li>\n <li><a href=\"http://pokemonshowdown.com\">pokemon-showdown</a></li>\n <li><a href=\"http://www.pokerstars.com/\">pokerstars</a></li>\n <li><a href=\"https://www.pokertracker.com\">pokertracker</a></li>\n <li><a href=\"http://www.codingmonkeys.de/portmap\">port-map</a></li>\n <li><a href=\"http://getporthole.com/\">porthole</a></li>\n <li><a href=\"http://www.postbox-inc.com/\">postbox</a></li>\n <li><a href=\"http://postgresapp.com/\">postgres</a></li>\n <li><a href=\"https://www.dssw.co.uk/powermanager\">power-manager-pro</a></li>\n <li><a href=\"https://www.dssw.co.uk/powermanager\">power-manager</a></li>\n <li><a href=\"http://pkamb.github.io/PowerKey/\">powerkey</a></li>\n <li><a href=\"http://mac.iciba.com\">powerword</a></li>\n <li><a href=\"http://www.fon.hum.uva.nl/praat/\">praat</a></li>\n <li><a href=\"http://anomiesoftware.com/Anomie_Software/Preen.html\">preen</a></li>\n <li><a href=\"http://www.nightproductions.net/prefsetter.html\">pref-setter</a></li>\n <li><a href=\"http://www.digitalrebellion.com/prefman\">preference-manager</a></li>\n <li><a href=\"http://www.echomist.co.uk/software/PreferenceCleaner.shtml\">preferencecleaner</a></li>\n <li><a href=\"http://www.tempel.org/PrefsEditor\">prefs-editor</a></li>\n <li><a href=\"http://alphapixels.com/prepros/\">prepros</a></li>\n <li><a href=\"https://preyproject.com\">prey</a></li>\n <li><a href=\"http://www.prezi.com/\">prezi</a></li>\n <li><a href=\"https://github.com/kliment/Printrun\">printrun</a></li>\n <li><a href=\"http://lightpack.tv/\">prismatik</a></li>\n <li><a href=\"http://radiosilenceapp.com/private-eye\">private-eye</a></li>\n <li><a href=\"https://www.privateinternetaccess.com\">private-internet-access</a></li>\n <li><a href=\"http://www.creaceed.com/prizmo\">prizmo</a></li>\n <li><a href=\"http://processing.org/\">processing</a></li>\n <li><a href=\"http://kaufmann.no/roland/dvorak/\">programmer-dvorak</a></li>\n <li><a href=\"http://www.projectlibre.org/\">projectlibre</a></li>\n <li><a href=\"http://www.prolific.com.tw/US/ShowProduct.aspx?p_id=229&amp;pcid=41\">prolific-usb-serial-driver</a></li>\n <li><a href=\"http://propaneapp.com/\">propane</a></li>\n <li><a href=\"http://www.renewedvision.com/propresenter.php\">propresenter</a></li>\n <li><a href=\"http://protege.stanford.edu/\">protege</a></li>\n <li><a href=\"https://github.com/chockenberry/Provisioning\">provisioning</a></li>\n <li><a href=\"https://github.com/ealeksandrov/ProvisionQL\">provisionql</a></li>\n <li><a href=\"http://www.proxifier.com/mac/\">proxifier</a></li>\n <li><a href=\"https://code.google.com/p/reduxcomputing-proximity/\">proximity</a></li>\n <li><a href=\"http://proxpn.com\">proxpn</a></li>\n <li><a href=\"http://www.ps3mediaserver.org/\">ps3-media-server</a></li>\n <li><a href=\"http://psi-im.org/\">psi</a></li>\n <li><a href=\"http://www.psychopy.org/\">psychopy</a></li>\n <li><a href=\"http://punto.yandex.ru\">punto-switcher</a></li>\n <li><a href=\"http://pupil.io/\">pupil</a></li>\n <li><a href=\"https://github.com/noodlewerk/NWPusher\">pusher</a></li>\n <li><a href=\"https://github.com/nicoSWD/put.io-adder\">putio-adder</a></li>\n <li><a href=\"http://puush.me/\">puush</a></li>\n <li><a href=\"http://www.chiark.greenend.org.uk/~sgtatham/puzzles/\">puzzles</a></li>\n <li><a href=\"http://blog.iphone-dev.org/tagged/PwnageTool\">pwnagetool</a></li>\n <li><a href=\"http://www.jetbrains.com/pycharm\">pycharm-ce</a></li>\n <li><a href=\"http://www.jetbrains.com/pycharm/\">pycharm</a></li>\n</ul>\n\n<h4 id=\"q\">Q</h4>\n\n<ul>\n <li><a href=\"http://www.qbittorrent.org\">qbittorrent</a></li>\n <li><a href=\"http://qvacua.com\">qdesktop</a></li>\n <li><a href=\"http://www.kyngchaos.com/software/qgis\">qgis</a></li>\n <li><a href=\"http://qgroundcontrol.org\">qgroundcontrol</a></li>\n <li><a href=\"http://www.iqiyi.com\">qiyimedia</a></li>\n <li><a href=\"https://code.google.com/p/qlcolorcode/\">qlcolorcode</a></li>\n <li><a href=\"https://github.com/Nyx0uf/qlImageSize\">qlimagesize</a></li>\n <li><a href=\"https://github.com/toland/qlmarkdown\">qlmarkdown</a></li>\n <li><a href=\"https://github.com/atnan/QLPrettyPatch\">qlprettypatch</a></li>\n <li><a href=\"https://github.com/cluther/qlrest\">qlrest</a></li>\n <li><a href=\"http://whomwah.github.io/qlstephen/\">qlstephen</a></li>\n <li><a href=\"http://qvacua.com\">qmind</a></li>\n <li><a href=\"http://im.qq.com/macqq/index.shtml\">qq</a></li>\n <li><a href=\"http://browser.qq.com/mac/\">qqbrowser</a></li>\n <li><a href=\"http://qq.pinyin.cn/\">qqinput</a></li>\n <li><a href=\"http://y.qq.com\">qqmusic</a></li>\n <li><a href=\"https://saghul.github.io/qrfcview-osx\">qrfcview</a></li>\n <li><a href=\"http://fkurz.net/ham/qrq.html\">qrq</a></li>\n <li><a href=\"http://qt-project.org/\">qt-creator</a></li>\n <li><a href=\"http://spimsimulator.sourceforge.net/\">qtspim</a></li>\n <li><a href=\"http://quassel-irc.org\">quassel-client</a></li>\n <li><a href=\"http://www.araelium.com/querious/\">querious</a></li>\n <li><a href=\"http://www.google.com/quicksearchbox/\">quick-search-box</a></li>\n <li><a href=\"http://quickcast.io/\">quickcast</a></li>\n <li><a href=\"https://github.com/danparsons/QuickHue\">quickhue</a></li>\n <li><a href=\"https://github.com/p2/quicklook-csv\">quicklook-csv</a></li>\n <li><a href=\"http://www.sagtau.com/quicklookjson.html\">quicklook-json</a></li>\n <li><a href=\"https://code.google.com/p/quicklook-pfm/\">quicklook-pfm</a></li>\n <li><a href=\"https://github.com/planbnet/QuickNFO\">quicknfo</a></li>\n <li><a href=\"http://www.quickradar.com/\">quickradar</a></li>\n <li><a href=\"http://qsapp.com/\">quicksilver</a></li>\n <li><a href=\"http://quiterss.org/\">quiterss</a></li>\n <li><a href=\"https://github.com/robertklep/quotefixformac\">quotefixformac</a></li>\n <li><a href=\"http://www.qvodcd.com/\">qvod-player</a></li>\n</ul>\n\n<h4 id=\"r\">R</h4>\n\n<ul>\n <li><a href=\"http://www.jacek-dom.net/software/R-Name/\">r-name</a></li>\n <li><a href=\"http://www.r-project.org/\">r</a></li>\n <li><a href=\"http://racket-lang.org/\">racket</a></li>\n <li><a href=\"http://store.radiusnetworks.com/collections/all/products/radbeacon-config\">radbeacon</a></li>\n <li><a href=\"http://kbhomes.github.io/google-music-mac/\">radiant-player</a></li>\n <li><a href=\"http://realmacsoftware.com/rapidweaver\">rapidweaver</a></li>\n <li><a href=\"http://www.raw-photo-processor.com/RPP/Overview.html\">raw-photo-processor</a></li>\n <li><a href=\"http://rawtherapee.com\">raw-therapee</a></li>\n <li><a href=\"http://www.razerzone.com/synapse2\">razer-synapse</a></li>\n <li><a href=\"http://razorsql.com/download_mac.html\">razorsql</a></li>\n <li><a href=\"http://www.rubicode.com/Software/RCDefaultApp/\">rcdefaultapp</a></li>\n <li><a href=\"http://www.rubicode.com/Software/RCEnvironment/\">rcenvironment</a></li>\n <li><a href=\"http://www.rdio.com\">rdio</a></li>\n <li><a href=\"http://redisdesktop.com\">rdm</a></li>\n <li><a href=\"http://readefine.anirudhsasikumar.net/\">readefine-desktop</a></li>\n <li><a href=\"https://www.readytalk.com/\">readytalk</a></li>\n <li><a href=\"http://www.reaper.fm/\">reaper</a></li>\n <li><a href=\"http://recordit.co/\">recordit</a></li>\n <li><a href=\"http://support.apple.com/kb/HT4848\">recovery-disk-assistant</a></li>\n <li><a href=\"http://mac.reedditapp.com\">reeddit</a></li>\n <li><a href=\"http://www.airsquirrels.com/reflector/\">reflector</a></li>\n <li><a href=\"http://soderhavet.com/refresh/refresh-finder/\">refresh-finder</a></li>\n <li><a href=\"http://reggyapp.com/\">reggy</a></li>\n <li><a href=\"http://rekordbox.com/en/\">rekordbox</a></li>\n <li><a href=\"http://zef.io/remonit/\">remonit</a></li>\n <li><a href=\"http://www.microsoft.com/en-us/download/details.aspx?id=18140\">remote-desktop-connection</a></li>\n <li><a href=\"http://renamer.com\">renamer</a></li>\n <li><a href=\"http://www.repetier.com/\">repetier-host</a></li>\n <li><a href=\"https://www.rescuetime.com\">rescuetime</a></li>\n <li><a href=\"http://www.retinacapture.com\">retinacapture</a></li>\n <li><a href=\"http://retinizer.mikelpr.com/\">retinizer</a></li>\n <li><a href=\"http://retroshare.sourceforge.net/\">retroshare</a></li>\n <li><a href=\"http://revealapp.com/\">reveal</a></li>\n <li><a href=\"http://keldon.net/rftg/\">rftg</a></li>\n <li><a href=\"http://ridibooks.com/support/introduce_appdown\">ridibooks</a></li>\n <li><a href=\"http://www.sonomawireworks.com/T4/\">riffworkst4</a></li>\n <li><a href=\"http://www.blazingtools.com/right_zoom_mac.html\">rightzoom</a></li>\n <li><a href=\"http://thelittleappfactory.com/ringtones/\">ringtones</a></li>\n <li><a href=\"http://thelittleappfactory.com/ripit/\">ripit</a></li>\n <li><a href=\"http://robomongo.org\">robomongo</a></li>\n <li><a href=\"http://www.artsoft.org/rocksndiamonds/\">rocks-n-diamonds</a></li>\n <li><a href=\"http://www.royaltsx.com\">royal-tsx</a></li>\n <li><a href=\"http://workram.com/games/rrootage/\">rrootage</a></li>\n <li><a href=\"http://www.rssapplication.com/\">rss</a></li>\n <li><a href=\"http://www.rstudio.com/\">rstudio</a></li>\n <li><a href=\"http://www.rtxapp.com/mac/\">rtx</a></li>\n <li><a href=\"http://www.rubitrack.com/\">rubitrack</a></li>\n <li><a href=\"http://www.jetbrains.com/ruby/\">rubymine</a></li>\n <li><a href=\"https://www.runtastic.com/connect\">runtastic-connect</a></li>\n <li><a href=\"https://github.com/nst/RuntimeBrowser\">runtimebrowser</a></li>\n <li><a href=\"http://www.rust-lang.org/\">rust</a></li>\n <li><a href=\"https://github.com/AlloyTeam/Rythem\">rythem</a></li>\n</ul>\n\n<h4 id=\"s\">S</h4>\n\n<ul>\n <li><a href=\"http://sabnzbd.org/\">sabnzbd</a></li>\n <li><a href=\"https://github.com/rs/SafariTabSwitching\">safaritabswitching</a></li>\n <li><a href=\"http://www.safe-in-cloud.com\">safe-in-cloud</a></li>\n <li><a href=\"https://www.safemonk.com/\">safemonk</a></li>\n <li><a href=\"http://www.sagemath.org/\">sage</a></li>\n <li><a href=\"http://www.mikey-san.net/sandbox/\">sandbox</a></li>\n <li><a href=\"http://www.karelia.com/products/sandvox/\">sandvox</a></li>\n <li><a href=\"http://satelliteeyes.tomtaylor.co.uk/\">satellite-eyes</a></li>\n <li><a href=\"https://saucelabs.com/mac\">sauce</a></li>\n <li><a href=\"http://sauerbraten.org\">sauerbraten</a></li>\n <li><a href=\"http://scala-ide.org/\">scala-ide</a></li>\n <li><a href=\"http://www.fujitsu.com/global/support/computing/peripheral/scanners/software/\">scansnap-manager</a></li>\n <li><a href=\"https://www.literatureandlatte.com/scapple.php\">scapple</a></li>\n <li><a href=\"http://schnappsformac.com/\">schnapps</a></li>\n <li><a href=\"https://www.scilab.org\">scilab</a></li>\n <li><a href=\"http://mhs.github.io/scout-app/\">scout</a></li>\n <li><a href=\"http://scratch.mit.edu/scratch2download/\">scratch</a></li>\n <li><a href=\"http://www.araelium.com/screenflick/\">screenflick</a></li>\n <li><a href=\"http://www.telestream.net/screenflow/\">screenflow</a></li>\n <li><a href=\"http://screenhero.com\">screenhero</a></li>\n <li><a href=\"http://www.screenmailer.com\">screenmailer</a></li>\n <li><a href=\"https://screensconnect.com\">screens-connect</a></li>\n <li><a href=\"http://screenstagram.s3.amazonaws.com/download.html\">screenstagram</a></li>\n <li><a href=\"http://www.bluemangolearning.com/\">screensteps</a></li>\n <li><a href=\"http://scribbleton.com/\">scribbleton</a></li>\n <li><a href=\"http://www.scribus.net/canvas/Scribus\">scribus</a></li>\n <li><a href=\"http://www.kainjow.com/\">scriptql</a></li>\n <li><a href=\"http://literatureandlatte.com/scrivener.php\">scrivener</a></li>\n <li><a href=\"https://pilotmoon.com/scrollreverser/\">scroll-reverser</a></li>\n <li><a href=\"https://github.com/rsms/scrup\">scrup</a></li>\n <li><a href=\"http://scummvm.org/\">scummvm</a></li>\n <li><a href=\"https://www.sdcard.org\">sdformatter</a></li>\n <li><a href=\"http://fyngyrz.com/?p=915\">sdrdx</a></li>\n <li><a href=\"http://seafile.com/\">seafile-client</a></li>\n <li><a href=\"http://www.seamonkey-project.org/\">seamonkey</a></li>\n <li><a href=\"http://seashore.sourceforge.net/\">seashore</a></li>\n <li><a href=\"http://secondlife.com/\">second-life-viewer</a></li>\n <li><a href=\"http://blog.boastr.net/?page_id=79\">secondbar</a></li>\n <li><a href=\"http://secrets.blacktree.com\">secrets</a></li>\n <li><a href=\"https://pqrs.org/macosx/keyremap4macbook/seil.html.en\">seil</a></li>\n <li><a href=\"http://selfcontrolapp.com/\">selfcontrol</a></li>\n <li><a href=\"http://selflanguage.org/\">selflanguage-self-control</a></li>\n <li><a href=\"http://www.kainjow.com\">semulov</a></li>\n <li><a href=\"http://www.amazon.com/gp/sendtokindle/mac\">send-to-kindle</a></li>\n <li><a href=\"http://desktop.sensiolabs.org\">sensiolabsdesktop</a></li>\n <li><a href=\"http://www.thirdstreetsoftware.com\">sente</a></li>\n <li><a href=\"http://www.sequelpro.com/\">sequel-pro</a></li>\n <li><a href=\"http://sequentialx.com\">sequential</a></li>\n <li><a href=\"http://www.serfdom.io/\">serf</a></li>\n <li><a href=\"http://www.w7ay.net/site/Applications/Serial%20Tools/\">serial-tools</a></li>\n <li><a href=\"http://serialbasics.free.fr/Serial_Cloner.html\">serialcloner</a></li>\n <li><a href=\"http://zqueue.com/servetome/\">servetome</a></li>\n <li><a href=\"http://serviio.org/\">serviio</a></li>\n <li><a href=\"https://servus.io/\">servus</a></li>\n <li><a href=\"http://sixtyfive.xmghosting.com/products/7zx/\">sevenzx</a></li>\n <li><a href=\"http://www.charcoaldesign.co.uk/shades\">shades</a></li>\n <li><a href=\"https://github.com/shadowsocks/shadowsocks-iOS/wiki/Shadowsocks-for-OSX-Help\">shadowsocksx</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/labs/\">shadowsweeper</a></li>\n <li><a href=\"http://bainsware.com/\">sharetool</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/Shelf-Leveler\">shelf-leveler</a></li>\n <li><a href=\"https://github.com/fikovnik/ShiftIt\">shiftit</a></li>\n <li><a href=\"http://www.chungwasoft.com/shimo/\">shimo</a></li>\n <li><a href=\"http://aki-null.net/shiori/\">shiori</a></li>\n <li><a href=\"http://shoesrb.com/\">shoes</a></li>\n <li><a href=\"http://shortcatapp.com/\">shortcat</a></li>\n <li><a href=\"http://www.shotcut.org/\">shotcut</a></li>\n <li><a href=\"http://fitztrev.github.io/shuttle/\">shuttle</a></li>\n <li><a href=\"http://sickbeard.lad1337.de/\">sickbeard-anime</a></li>\n <li><a href=\"http://sickbeard.lad1337.de/\">sickbeard</a></li>\n <li><a href=\"http://oomphalot.com/sidekick/\">sidekick</a></li>\n <li><a href=\"http://chetansurpur.com/projects/sidestep\">sidestep</a></li>\n <li><a href=\"http://www.sidmusic.org/sidplay/mac/\">sidplay</a></li>\n <li><a href=\"http://code.google.com/p/sigil/\">sigil</a></li>\n <li><a href=\"http://nevercenter.com/silo/\">silo</a></li>\n <li><a href=\"http://silverbackapp.com/\">silverback</a></li>\n <li><a href=\"http://www.microsoft.com/silverlight/\">silverlight</a></li>\n <li><a href=\"http://www.dejal.com/simon/\">simon</a></li>\n <li><a href=\"http://simpholders.com/\">simpholders</a></li>\n <li><a href=\"http://dancingtortoise.com/simplecomic/\">simple-comic</a></li>\n <li><a href=\"http://www.hostm.com/css\">simple-css</a></li>\n <li><a href=\"http://xcatsan.com/simplecap-en/\">simplecap</a></li>\n <li><a href=\"http://www.splook.com/Software/Simple_Floating_Clock.html\">simplefloatingclock</a></li>\n <li><a href=\"http://wearekiss.com/simpless\">simpless</a></li>\n <li><a href=\"http://notahat.com/simplesynth/\">simplesynth</a></li>\n <li><a href=\"http://sourceforge.net/projects/simpletag/\">simpletag</a></li>\n <li><a href=\"http://nimbleworks.co.uk/blog/simulator-folders/\">simulator-folders</a></li>\n <li><a href=\"http://www.sitesucker.us/mac/mac.html\">sitesucker</a></li>\n <li><a href=\"http://sixtyforce.com/\">sixtyforce</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/sizeup/index.html\">sizeup</a></li>\n <li><a href=\"http://www.yellowmug.com/sk4it/\">sizzlingkeys</a></li>\n <li><a href=\"http://bohemiancoding.com/sketch/tool/\">sketch-tool</a></li>\n <li><a href=\"http://sketchtoolbox.com\">sketch-toolbox</a></li>\n <li><a href=\"http://www.bohemiancoding.com/sketch/\">sketch</a></li>\n <li><a href=\"http://www.sketchup.com/intl/en/\">sketchup</a></li>\n <li><a href=\"http://www.sketchup.com/intl/en/\">sketchupviewer</a></li>\n <li><a href=\"http://skim-app.sourceforge.net/\">skim</a></li>\n <li><a href=\"http://evernote.com/skitch/\">skitch</a></li>\n <li><a href=\"https://code.google.com/p/skreenics/\">skreenics</a></li>\n <li><a href=\"http://windows.microsoft.com/en-us/skydrive/download\">skydrive</a></li>\n <li><a href=\"http://www.skype.com\">skype</a></li>\n <li><a href=\"http://slack.com\">slack</a></li>\n <li><a href=\"https://github.com/jigish/slate\">slate</a></li>\n <li><a href=\"https://www.dssw.co.uk/sleepmonitor\">sleep-monitor</a></li>\n <li><a href=\"http://dragonforged.com/slender/\">slender</a></li>\n <li><a href=\"http://slic3r.org/\">slic3r</a></li>\n <li><a href=\"http://sliceeq.com/\">slice</a></li>\n <li><a href=\"http://macrabbit.com/slicy/\">slicy</a></li>\n <li><a href=\"http://teaksoftware.com/app/slidemode\">slidemode</a></li>\n <li><a href=\"http://www.orange-carb.org/SBM/\">slimbatterymonitor</a></li>\n <li><a href=\"http://www.slimboat.com\">slimboat</a></li>\n <li><a href=\"http://www.airsquirrels.com/slingshot/\">slingshot</a></li>\n <li><a href=\"http://sveinbjorn.org/sloth\">sloth</a></li>\n <li><a href=\"http://slowyapp.com/\">slowy</a></li>\n <li><a href=\"http://smallerapp.com/\">smaller</a></li>\n <li><a href=\"http://www.syntevo.com\">smartgithg</a></li>\n <li><a href=\"http://picturelife.com\">smartloader</a></li>\n <li><a href=\"http://www.syntevo.com\">smartsynchronize</a></li>\n <li><a href=\"http://www.eidac.de/?p=243\">smcfancontrol</a></li>\n <li><a href=\"http://smoothmouse.com\">smoothmouse</a></li>\n <li><a href=\"http://www.techsmith.com/snagit.html\">snagit</a></li>\n <li><a href=\"http://www.snes9x.com/\">snes9x</a></li>\n <li><a href=\"http://snip.qq.com/\">snip</a></li>\n <li><a href=\"http://cocoaholic.com/snippet_edit/\">snippet-edit</a></li>\n <li><a href=\"http://snippets.me/\">snippets</a></li>\n <li><a href=\"http://www.sococo.com\">sococo</a></li>\n <li><a href=\"http://www.sofortbildapp.com/\">sofortbild</a></li>\n <li><a href=\"http://pinyin.sogou.com/mac/\">sogouinput</a></li>\n <li><a href=\"http://eduo.info/apps/soleol\">soleol</a></li>\n <li><a href=\"http://www.sonicvisualiser.org/\">sonic-visualiser</a></li>\n <li><a href=\"http://getsonora.com/\">sonora</a></li>\n <li><a href=\"http://www.sonos.com/\">sonos</a></li>\n <li><a href=\"http://www.sopcast.org\">sopcast</a></li>\n <li><a href=\"http://www.sophos.com/en-us/products/free-tools/sophos-antivirus-for-mac-home-edition.aspx/\">sophos-anti-virus-home-edition</a></li>\n <li><a href=\"http://www.pocketsoap.com/osx/soqlx/\">soqlxplorer</a></li>\n <li><a href=\"http://www.soulseekqt.net/\">soulseek</a></li>\n <li><a href=\"http://www.acqualia.com/soulver/\">soulver</a></li>\n <li><a href=\"http://salomvary.github.io/soundcleod/\">soundcleod</a></li>\n <li><a href=\"https://code.google.com/p/soundflower/\">soundflower</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/SoundNote\">soundnote</a></li>\n <li><a href=\"http://www.sourcetreeapp.com/\">sourcetree</a></li>\n <li><a href=\"https://www.spacemonkey.com\">spacemonkey</a></li>\n <li><a href=\"http://www.iospirit.com/products/spacious\">spacious</a></li>\n <li><a href=\"http://sparkinspector.com/\">spark-inspector</a></li>\n <li><a href=\"http://www.shadowlab.org/softwares/spark.php\">spark</a></li>\n <li><a href=\"http://www.icyblaze.com/sparkbox\">sparkbox</a></li>\n <li><a href=\"http://sparkle-project.org/\">sparkle</a></li>\n <li><a href=\"http://sparkleshare.org/\">sparkleshare</a></li>\n <li><a href=\"http://www.sparrowmailapp.com/\">sparrow</a></li>\n <li><a href=\"http://spectacleapp.com/\">spectacle</a></li>\n <li><a href=\"http://www.speedcrunch.org\">speedcrunch</a></li>\n <li><a href=\"http://mschrag.github.io/\">speedlimit</a></li>\n <li><a href=\"http://www.speedtao.net/\">speedtao</a></li>\n <li><a href=\"http://spek.cc\">spek</a></li>\n <li><a href=\"http://spideroak.com\">spideroak</a></li>\n <li><a href=\"http://bananafishsoftware.com/products/spillo/\">spillo</a></li>\n <li><a href=\"http://drikin.com/2010/11/spirited-away.html\">spirited-away</a></li>\n <li><a href=\"http://www.splashtop.com/personal\">splashtop-personal</a></li>\n <li><a href=\"http://www.splashtop.com/downloads\">splashtop-streamer</a></li>\n <li><a href=\"https://bitbucket.org/Tomasen/splayerx/wiki/Home\">splayerx</a></li>\n <li><a href=\"http://spotdox.com/get-started/\">spotdox</a></li>\n <li><a href=\"http://spotifree.gordinskiy.com\">spotifree</a></li>\n <li><a href=\"http://lifeupnorth.co.uk/Spotify-Menubar/\">spotify-menubar</a></li>\n <li><a href=\"http://spotify-notifications.citruspi.io/\">spotify-notifications</a></li>\n <li><a href=\"https://www.spotify.com\">spotify</a></li>\n <li><a href=\"https://code.google.com/p/spyderlib/\">spyder</a></li>\n <li><a href=\"http://www.malcolmhardie.com/sqleditor/\">sqleditor</a></li>\n <li><a href=\"http://eclipsesql.sourceforge.net/\">sqlexplorer</a></li>\n <li><a href=\"http://sqlitebrowser.org\">sqlite-database-browser</a></li>\n <li><a href=\"https://www.sqlitepro.com\">sqlite-professional</a></li>\n <li><a href=\"http://sqlitestudio.pl\">sqlitestudio</a></li>\n <li><a href=\"http://squidman.net/squidman/\">squidman</a></li>\n <li><a href=\"http://squireapp.com\">squire</a></li>\n <li><a href=\"https://github.com/lotem/squirrel\">squirrel</a></li>\n <li><a href=\"https://www.sqwiggle.com\">sqwiggle</a></li>\n <li><a href=\"https://srclib.org/\">srclib</a></li>\n <li><a href=\"http://osxfuse.github.io/\">sshfs</a></li>\n <li><a href=\"http://chris.schleifer.net/ssX/index.cgi/index.html\">ssx</a></li>\n <li><a href=\"http://docs.stackato.com/user/client/index.html\">stackato</a></li>\n <li><a href=\"http://www.geocities.jp/aromaticssoft/stackroom/index.html\">stackroom</a></li>\n <li><a href=\"http://www.allvu.com/index.php/products/startninja.html\">startninja</a></li>\n <li><a href=\"http://cordlessdog.com/stay/\">stay</a></li>\n <li><a href=\"http://store.steampowered.com/about/\">steam</a></li>\n <li><a href=\"http://plentycom.jp/en/steermouse/\">steermouse</a></li>\n <li><a href=\"http://stella.sourceforge.net\">stella</a></li>\n <li><a href=\"http://stellarium.org\">stellarium</a></li>\n <li><a href=\"http://midnightsuyama.org\">stockbarjp</a></li>\n <li><a href=\"https://github.com/nytlabs/streamtools\">streamtools</a></li>\n <li><a href=\"http://strongvpn.com/vpnclient.shtml\">strongvpn-client</a></li>\n <li><a href=\"http://spring.io/tools/sts\">sts</a></li>\n <li><a href=\"http://www.subclassed.com/apps/mnemosyne/details\">subclassed-mnemosyne</a></li>\n <li><a href=\"https://github.com/dhoulb/subl\">subl</a></li>\n <li><a href=\"https://code.google.com/p/subler/\">subler</a></li>\n <li><a href=\"https://code.google.com/p/subler/\">sublercli</a></li>\n <li><a href=\"http://www.sublimetext.com/2\">sublime-text</a></li>\n <li><a href=\"http://subnetcalc.free.fr/\">subnetcalc</a></li>\n <li><a href=\"http://www.cocoawithchurros.com/subsmarine.php\">subsmarine</a></li>\n <li><a href=\"http://subsurface.hohndel.org/\">subsurface</a></li>\n <li><a href=\"http://subtitlemaster.com/\">subtitle-master</a></li>\n <li><a href=\"http://subtitlesapp.com\">subtitles</a></li>\n <li><a href=\"http://sunlogin.oray.com\">sunlogin-remote</a></li>\n <li><a href=\"http://apfel-a.macbay.de/super-otr/\">super-otr</a></li>\n <li><a href=\"http://supercollider.sourceforge.net/\">supercollider</a></li>\n <li><a href=\"http://www.shirt-pocket.com/SuperDuper/SuperDuperDescription.html\">superduper</a></li>\n <li><a href=\"http://supersync.com/\">supersync</a></li>\n <li><a href=\"http://supertuxkart.sourceforge.net\">supertuxkart</a></li>\n <li><a href=\"http://www.skoobysoft.com/utilities/utilities.html#surplusmeter\">surplusmeter</a></li>\n <li><a href=\"http://www.mothersruin.com/software/SuspiciousPackage/\">suspicious-package</a></li>\n <li><a href=\"https://code.google.com/p/svnx/\">svnx</a></li>\n <li><a href=\"http://www.sweethome3d.com/\">sweet-home3d</a></li>\n <li><a href=\"http://cloakedcode.com/swingfish.html\">swingfish</a></li>\n <li><a href=\"http://swinsian.com\">swinsian</a></li>\n <li><a href=\"http://www.madrau.com\">switchresx</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/switchup/\">switchup</a></li>\n <li><a href=\"http://synergy-foss.org/\">synergy</a></li>\n <li><a href=\"http://www.synology.com/\">synology-assistant</a></li>\n <li><a href=\"http://www.synology.com/\">synology-cloud-station</a></li>\n <li><a href=\"http://www.synology.com/\">synology-photo-station-uploader</a></li>\n <li><a href=\"http://www.synthesiagame.com\">synthesia</a></li>\n</ul>\n\n<h4 id=\"t\">T</h4>\n\n<ul>\n <li><a href=\"http://tabula.nerdpower.org\">tabula</a></li>\n <li><a href=\"http://onflapp.wordpress.com/tactor/\">tactor</a></li>\n <li><a href=\"http://sbooth.org/Tag/\">tag</a></li>\n <li><a href=\"http://thelittleappfactory.com/tagalicious/\">tagalicious</a></li>\n <li><a href=\"http://bilalh.github.io/projects/tagger/\">tagger</a></li>\n <li><a href=\"http://onflapp.wordpress.com/tagoman\">tagoman</a></li>\n <li><a href=\"http://www.entwicklungsfreu.de/tagr.html\">tagr</a></li>\n <li><a href=\"http://www.tagspaces.org\">tagspaces</a></li>\n <li><a href=\"http://www.tapaal.net\">tapaal</a></li>\n <li><a href=\"http://www.hogbaysoftware.com/products/taskpaper\">taskpaper</a></li>\n <li><a href=\"http://tau.uoregon.edu/\">tau</a></li>\n <li><a href=\"http://tcpblock.wordpress.com/\">tcpblock</a></li>\n <li><a href=\"http://www.fluentd.org/\">td-agent</a></li>\n <li><a href=\"http://toolbelt.treasuredata.com/\">td-toolbelt</a></li>\n <li><a href=\"http://www.teamspeak.com/\">teamspeak-client</a></li>\n <li><a href=\"http://www.teamviewer.com/\">teamviewer</a></li>\n <li><a href=\"http://www.teamviz.com/\">teamviz</a></li>\n <li><a href=\"http://pjrc.com/teensy/loader_mac.html\">teensy</a></li>\n <li><a href=\"https://www.teeworlds.com/\">teeworlds</a></li>\n <li><a href=\"https://vk.com/telegram_osx\">telegram</a></li>\n <li><a href=\"https://code.google.com/p/telephone/\">telephone</a></li>\n <li><a href=\"http://www.abyssoft.com/software/teleport/\">teleport</a></li>\n <li><a href=\"http://testflightapp.com\">testflight</a></li>\n <li><a href=\"https://code.google.com/p/mactlmgr/\">tex-live-utility</a></li>\n <li><a href=\"http://www.texmacs.org/\">texmacs</a></li>\n <li><a href=\"http://www.xm1math.net/texmaker\">texmaker</a></li>\n <li><a href=\"http://www.bobsoft-mac.de/texnicle/texnicle.html\">texnicle</a></li>\n <li><a href=\"https://www.texpadapp.com/osx\">texpad</a></li>\n <li><a href=\"http://pages.uoregon.edu/koch/texshop\">texshop</a></li>\n <li><a href=\"http://texstudio.sourceforge.net/\">texstudio</a></li>\n <li><a href=\"http://foicica.com/textadept/\">textadept</a></li>\n <li><a href=\"http://www.smilesoftware.com/TextExpander/index.html\">textexpander</a></li>\n <li><a href=\"http://macromates.com/\">textmate</a></li>\n <li><a href=\"https://code.google.com/p/textroom/\">textroom</a></li>\n <li><a href=\"http://www.texts.io\">texts</a></li>\n <li><a href=\"http://www.unmarked.com/textsoap/\">textsoap</a></li>\n <li><a href=\"http://www.codeandweb.com/texturepacker\">texturepacker</a></li>\n <li><a href=\"http://www.barebones.com/products/textwrangler\">textwrangler</a></li>\n <li><a href=\"http://ww2.unime.it/flr/tftpserver/\">tftpserver</a></li>\n <li><a href=\"https://tw3.herokuapp.com/\">thaiwitter</a></li>\n <li><a href=\"http://archivebrowser.c3.cx\">the-archive-browser</a></li>\n <li><a href=\"http://www.thebrain.com/\">the-brain</a></li>\n <li><a href=\"http://www.theescapers.com/flux/\">the-escapers-flux</a></li>\n <li><a href=\"http://www.potionfactory.com/thehitlist\">the-hit-list</a></li>\n <li><a href=\"http://unarchiver.c3.cx/\">the-unarchiver</a></li>\n <li><a href=\"https://github.com/TheStalwart/Theremin\">theremin</a></li>\n <li><a href=\"http://www.equinux.com/us/products/thetube/index.html\">thetube</a></li>\n <li><a href=\"http://culturedcode.com/things/\">things</a></li>\n <li><a href=\"http://mediaserver.thinkorswim.com/installer/install.html#macosx\">thinkorswim</a></li>\n <li><a href=\"http://www.edenwaith.com/products/33rpm/\">thirty-three-rpm</a></li>\n <li><a href=\"http://wafflesoftware.net/thisservice/\">thisservice</a></li>\n <li><a href=\"http://thong.fousa.be/\">thong</a></li>\n <li><a href=\"http://www.devontechnologies.com/products/freeware.html#c966\">thumbsup</a></li>\n <li><a href=\"http://mac.xunlei.com/\">thunder</a></li>\n <li><a href=\"http://www.mozilla.org/en-US/thunderbird/\">thunderbird</a></li>\n <li><a href=\"http://joaomoreno.github.io/thyme/\">thyme</a></li>\n <li><a href=\"http://www.irradiatedsoftware.com/tickets/\">tickets</a></li>\n <li><a href=\"https://github.com/Jermolene/TiddlyDesktop\">tiddlywiki</a></li>\n <li><a href=\"https://github.com/fredokun/TikZ-Editor\">tikz-editor</a></li>\n <li><a href=\"http://www.mapeditor.org/\">tiled</a></li>\n <li><a href=\"http://www.mapbox.com/tilemill/\">tilemill</a></li>\n <li><a href=\"http://www.dejal.com/timeout/\">time-out</a></li>\n <li><a href=\"http://manytricks.com/timesink/\">time-sink</a></li>\n <li><a href=\"https://code.google.com/p/time-tracker-mac\">time-tracker</a></li>\n <li><a href=\"http://timesoftware.free.fr/timemachineeditor/\">timemachineeditor</a></li>\n <li><a href=\"http://www.klieme.com/TimeMachineScheduler.html\">timemachinescheduler</a></li>\n <li><a href=\"http://mediaatelier.com/Timings\">timings</a></li>\n <li><a href=\"http://www.bresink.com/osx/TinkerTool.html\">tinkertool</a></li>\n <li><a href=\"http://www.tinygrab.com\">tinygrab</a></li>\n <li><a href=\"http://blog.firmwareumbrella.com/\">tinyumbrella</a></li>\n <li><a href=\"https://my.appcelerator.com/resources\">titanium-studio</a></li>\n <li><a href=\"http://agfeo.de/agfeo_web/hp3.nsf/lu/2064\">tk-suite-client</a></li>\n <li><a href=\"http://www.toadworld.com/products/toad-mac-edition/default.aspx\">toad-mac</a></li>\n <li><a href=\"http://toauapp.com\">toau</a></li>\n <li><a href=\"https://todoist.com\">todoist</a></li>\n <li><a href=\"http://dbachrach.com/opensoft/index.php?page=Todos\">todos</a></li>\n <li><a href=\"http://amarsagoo.info/tofu/\">tofu</a></li>\n <li><a href=\"https://www.toggl.com\">toggldesktop</a></li>\n <li><a href=\"https://github.com/tokaido/tokaidoapp/releases\">tokaido</a></li>\n <li><a href=\"http://www.tomahawk-player.org/\">tomahawk</a></li>\n <li><a href=\"http://www.tomighty.org/\">tomighty</a></li>\n <li><a href=\"http://www.tongbu.com\">tongbu</a></li>\n <li><a href=\"http://www.tonido.com/\">tonido</a></li>\n <li><a href=\"https://www.toodledo.com/tools/mac_menubar.php\">toodledo</a></li>\n <li><a href=\"https://www.torproject.org/projects/torbrowser.html\">torbrowser</a></li>\n <li><a href=\"https://usetorpedo.com\">torpedo</a></li>\n <li><a href=\"http://tortoisehg.bitbucket.org/\">tortoisehg</a></li>\n <li><a href=\"http://workram.com/games/\">torustrooper</a></li>\n <li><a href=\"http://totalfinder.binaryage.com\">totalfinder</a></li>\n <li><a href=\"http://www.kedisoft.com/totals/\">totals</a></li>\n <li><a href=\"http://totalspaces.binaryage.com/\">totalspaces</a></li>\n <li><a href=\"http://totalterminal.binaryage.com\">totalterminal</a></li>\n <li><a href=\"http://www.git-tower.com/\">tower</a></li>\n <li><a href=\"http://dev.housetrip.com/trailer/\">trailer</a></li>\n <li><a href=\"http://trailrunnerx.com/\">trailrunner</a></li>\n <li><a href=\"http://yo-han.github.io/Traktable/\">traktable</a></li>\n <li><a href=\"https://code.google.com/p/transmisson-remote-gui/\">transmission-remote-gui</a></li>\n <li><a href=\"http://www.transmissionbt.com/\">transmission</a></li>\n <li><a href=\"http://panic.com/transmit\">transmit</a></li>\n <li><a href=\"http://www.langorigami.com/science/computational/treemaker/treemaker.php\">treemaker</a></li>\n <li><a href=\"http://strlen.com/treesheets/\">treesheets</a></li>\n <li><a href=\"http://tresorit.com\">tresorit</a></li>\n <li><a href=\"http://www.tribler.org\">tribler</a></li>\n <li><a href=\"http://www.apparentsoft.com/trickster/\">trickster</a></li>\n <li><a href=\"http://www.cindori.org/software/trimenabler/\">trim-enabler</a></li>\n <li><a href=\"http://truecrypt.org/\">truecrypt</a></li>\n <li><a href=\"http://www.celmaro.com/tubbler\">tubbler</a></li>\n <li><a href=\"http://www.tune-instructor.de/com/start.html\">tuneinstructor</a></li>\n <li><a href=\"http://www.tunewiki.com/\">tunewiki</a></li>\n <li><a href=\"https://www.tunnelbear.com/\">tunnelbear</a></li>\n <li><a href=\"https://code.google.com/p/tunnelblick/\">tunnelblick</a></li>\n <li><a href=\"http://www.tuxguitar.com.ar/\">tuxguitar</a></li>\n <li><a href=\"http://www.tvbrowser.org/index.php?setlang=en\">tv-browser</a></li>\n <li><a href=\"http://www.pixelperfectwidgets.com/\">tv-show-tracker</a></li>\n <li><a href=\"http://www.tvmobili.com/\">tvmobili</a></li>\n <li><a href=\"http://tvshowsapp.com/\">tvshows</a></li>\n <li><a href=\"https://github.com/marcw/twentytwo\">twentytwo</a></li>\n <li><a href=\"https://www.twindocs.com\">twindocs</a></li>\n <li><a href=\"http://twinery.org/\">twine</a></li>\n <li><a href=\"http://twitterrific.com/mac\">twitterrific</a></li>\n <li><a href=\"http://llllll.li/typewriter\">typewriter</a></li>\n <li><a href=\"http://www.ergonis.com/\">typinator</a></li>\n</ul>\n\n<h4 id=\"u\">U</h4>\n\n<ul>\n <li><a href=\"http://nickapedia.com/2012/01/10/breaking-new-ground-an-uber-tool-for-the-mac/\">uber-network-fuser</a></li>\n <li><a href=\"http://megapov.inetart.net/uberpov_mac/index.html\">uberpov</a></li>\n <li><a href=\"http://tracesof.net/uebersicht\">ubersicht</a></li>\n <li><a href=\"http://one.ubuntu.com\">ubuntu-one</a></li>\n <li><a href=\"http://scripts.sil.org/ukelele\">ukelele</a></li>\n <li><a href=\"http://ultrastardx.sourceforge.net/\">ultrastardeluxe</a></li>\n <li><a href=\"https://github.com/ryanmaxwell/UncrustifyX\">uncrustifyx</a></li>\n <li><a href=\"http://www.orbicule.com/undercover/mac/\">undercover</a></li>\n <li><a href=\"http://unetbootin.sourceforge.net/\">unetbootin</a></li>\n <li><a href=\"http://earthlingsoft.net/UnicodeChecker/\">unicodechecker</a></li>\n <li><a href=\"http://www.unifiedremote.com\">unified-remote</a></li>\n <li><a href=\"http://www.corecode.at/uninstallpkg/\">uninstallpkg</a></li>\n <li><a href=\"http://www.cis.upenn.edu/~bcpierce/unison/\">unison</a></li>\n <li><a href=\"https://unity3d.com/webplayer\">unity-web-player</a></li>\n <li><a href=\"http://unity3d.com/unity/\">unity3d</a></li>\n <li><a href=\"www.universalmediaserver.com\">universal-media-server</a></li>\n <li><a href=\"http://www.timdoug.com/unpkg/\">unpkg</a></li>\n <li><a href=\"http://www.unrarx.com\">unrarx</a></li>\n <li><a href=\"http://www.usboverdrive.com/\">usb-overdrive</a></li>\n <li><a href=\"https://github.com/netik/UTCMenuClock\">utc-menu-clock</a></li>\n <li><a href=\"http://utopiadocs.com/\">utopia</a></li>\n <li><a href=\"http://www.utorrent.com/\">utorrent</a></li>\n</ul>\n\n<h4 id=\"v\">V</h4>\n\n<ul>\n <li><a href=\"http://vagrantmanager.com/\">vagrant-manager</a></li>\n <li><a href=\"http://www.vagrantup.com\">vagrant</a></li>\n <li><a href=\"http://www.valentina-db.com/\">valentina-studio</a></li>\n <li><a href=\"http://www.vassalengine.org\">vassal</a></li>\n <li><a href=\"http://versionsapp.com/\">versions</a></li>\n <li><a href=\"http://awvessel.github.io\">vessel</a></li>\n <li><a href=\"http://viber.com\">viber</a></li>\n <li><a href=\"http://www.vicoapp.com\">vico</a></li>\n <li><a href=\"http://videomonkey.org/\">videomonkey</a></li>\n <li><a href=\"http://videospec.free.fr/english/\">videospec</a></li>\n <li><a href=\"http://www.vienna-rss.org\">vienna</a></li>\n <li><a href=\"http://mariusth.channelwood.org/vimediamanager/\">vimediamanager</a></li>\n <li><a href=\"http://vimr.org/\">vimr</a></li>\n <li><a href=\"http://www.testplant.com/products/vine/vine-server/\">vine-server</a></li>\n <li><a href=\"http://www.vinotekasoft.com/\">vinoteka</a></li>\n <li><a href=\"http://virtaal.translatehouse.org/\">virtaal</a></li>\n <li><a href=\"http://www.virtualbox.org\">virtualbox</a></li>\n <li><a href=\"http://clickontyler.com/virtualhostx/\">virtualhostx</a></li>\n <li><a href=\"https://www.virustotal.com/\">virustotaluploader</a></li>\n <li><a href=\"http://www.sparklabs.com/viscosity/\">viscosity</a></li>\n <li><a href=\"https://wci.llnl.gov/codes/visit/home.html\">visit</a></li>\n <li><a href=\"http://www.vistrails.org/index.php/Main_Page\">vistrails</a></li>\n <li><a href=\"http://blog.kowalczyk.info/software/vack/\">visualack</a></li>\n <li><a href=\"http://visualvm.java.net\">visualvm</a></li>\n <li><a href=\"http://www.publicspace.net/Vitamin-R/\">vitamin-r</a></li>\n <li><a href=\"http://hobbyistsoftware.com/vlc\">vlc-remote</a></li>\n <li><a href=\"http://www.videolan.org/vlc/\">vlc</a></li>\n <li><a href=\"http://hobbyistsoftware.com/vlcstreamer\">vlcstreamer</a></li>\n <li><a href=\"http://www.vmware.com/products/fusion/\">vmware-fusion</a></li>\n <li><a href=\"http://www.vmware.com/\">vmware-horizon-view-client</a></li>\n <li><a href=\"http://vocabulistapp.com/\">vocabulist</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/VoiceMac\">voicemac</a></li>\n <li><a href=\"http://www.volatilityfoundation.org/\">volatility</a></li>\n <li><a href=\"http://coppertino.com/vox/addon.html\">vox-preference-pane</a></li>\n <li><a href=\"http://www.hamrick.com\">vuescan</a></li>\n <li><a href=\"http://www.goldenfrog.com/vyprvpn\">vyprvpn</a></li>\n</ul>\n\n<h4 id=\"w\">W</h4>\n\n<ul>\n <li><a href=\"http://wabbit.codeplex.com\">wabbitemu</a></li>\n <li><a href=\"http://us.wacom.com/en/support/drivers\">wacom-bamboo-tablet</a></li>\n <li><a href=\"http://www.wacom.com/\">wacom-tablet</a></li>\n <li><a href=\"http://www.readpixel.com/wakeonlan/\">wake-on-lan</a></li>\n <li><a href=\"http://wallwiz.com\">wallpaper-wizard</a></li>\n <li><a href=\"http://wasted.werk01.de\">wasted</a></li>\n <li><a href=\"http://www.hanynet.com/waterroof/index.html\">waterroof</a></li>\n <li><a href=\"https://github.com/pje/wavtap\">wavtap</a></li>\n <li><a href=\"http://www.wdc.com/en/\">wd-security</a></li>\n <li><a href=\"http://clickontyler.com/web-sharing/\">web-sharing</a></li>\n <li><a href=\"https://github.com/dchest/webp-quicklook\">webp-quicklook</a></li>\n <li><a href=\"http://www.jetbrains.com/webstorm/\">webstorm</a></li>\n <li><a href=\"http://weixin.qq.com/cgi-bin/readtemplate?t=mac\">wechat</a></li>\n <li><a href=\"http://wedge.natestedman.com\">wedge</a></li>\n <li><a href=\"http://weiboformac.sinaapp.com\">weibox</a></li>\n <li><a href=\"http://www.cs.waikato.ac.nz/ml/weka/\">weka</a></li>\n <li><a href=\"https://code.google.com/p/welly/\">welly</a></li>\n <li><a href=\"http://wesnoth.org\">wesnoth</a></li>\n <li><a href=\"http://www.whatpulse.org/\">whatpulse</a></li>\n <li><a href=\"http://www.fireebok.com/whatsapp-pocket.html\">whatsapp-pocket</a></li>\n <li><a href=\"http://whatsizemac.com/\">whatsize</a></li>\n <li><a href=\"http://www.taimila.com/?p=1221\">whiteclock</a></li>\n <li><a href=\"https://wl.widelands.org/\">widelands</a></li>\n <li><a href=\"http://www.lianwifi.com/\">wifimasterkey</a></li>\n <li><a href=\"http://xpra.org/\">window-switch</a></li>\n <li><a href=\"http://www.binarybakery.com/aprod/index.html\">windownaut</a></li>\n <li><a href=\"http://wineskin.urgesoftware.com/\">wineskin-winery</a></li>\n <li><a href=\"http://www.wings3d.com/\">wings3d</a></li>\n <li><a href=\"https://winxound.codeplex.com/\">winxound</a></li>\n <li><a href=\"http://www.wireover.com/\">wireover</a></li>\n <li><a href=\"http://www.wireshark.org\">wireshark</a></li>\n <li><a href=\"http://www.ambrosiasw.com/utilities/wiretap/\">wiretap-studio</a></li>\n <li><a href=\"http://manytricks.com/witch/\">witch</a></li>\n <li><a href=\"http://desairem.altervista.org/witgui/wordpress/\">witgui</a></li>\n <li><a href=\"http://www.wiznote.com/\">wiznote</a></li>\n <li><a href=\"https://code.google.com/p/rest-client\">wiztoolsorg-restclient</a></li>\n <li><a href=\"https://code.google.com/p/wjoy/\">wjoy</a></li>\n <li><a href=\"http://www.wondershare.com/video-player/\">wondershare-player</a></li>\n <li><a href=\"https://github.com/phinze/woodhouse/\">woodhouse</a></li>\n <li><a href=\"http://www.devontechnologies.com/products/freeware.html#c1115\">wordservice</a></li>\n <li><a href=\"http://www.worksnaps.net/\">worksnaps-client</a></li>\n <li><a href=\"http://wowhead.com\">wowhead-client</a></li>\n <li><a href=\"http://www.digicowsoftware.com/detail?_app=Wraparound\">wraparound</a></li>\n <li><a href=\"http://wuala.com\">wuala</a></li>\n <li><a href=\"http://wyzo.com\">wyzo</a></li>\n</ul>\n\n<h4 id=\"x\">X</h4>\n\n<ul>\n <li><a href=\"http://www.counterpath.com/x-lite.html\">x-lite</a></li>\n <li><a href=\"http://www.x-mirage.com/x-mirage/\">x-mirage</a></li>\n <li><a href=\"http://xmoto.tuxfamily.org\">x-moto</a></li>\n <li><a href=\"http://x2go.org\">x2goclient</a></li>\n <li><a href=\"http://blog.sharkus.com/2012/08/osx-hp48-emulators.html\">x48</a></li>\n <li><a href=\"http://xact.scottcbrown.org\">xact</a></li>\n <li><a href=\"http://xamarin.com/android\">xamarin-android</a></li>\n <li><a href=\"http://xamarin.com/ios\">xamarin-ios</a></li>\n <li><a href=\"http://xamarin.com/studio\">xamarin-studio</a></li>\n <li><a href=\"http://xamarin.com/platform\">xamarin</a></li>\n <li><a href=\"http://www.apachefriends.org/index.html\">xampp</a></li>\n <li><a href=\"http://matek.hu/xaos\">xaos</a></li>\n <li><a href=\"http://xbench.com/\">xbench</a></li>\n <li><a href=\"http://xbmc.org/\">xbmc</a></li>\n <li><a href=\"http://tattiebogle.net/index.php/ProjectRoot/Xbox360Controller/OsxDriver\">xbox360-controller-driver</a></li>\n <li><a href=\"http://xca.sourceforge.net/\">xca</a></li>\n <li><a href=\"http://xee.c3.cx/\">xee</a></li>\n <li><a href=\"http://www.xiami.com/\">xiami</a></li>\n <li><a href=\"http://tmkk.undo.jp/xld/index_e.html\">xld</a></li>\n <li><a href=\"http://www.xmarks.com/\">xmarks-safari</a></li>\n <li><a href=\"http://www.xmind.net\">xmind</a></li>\n <li><a href=\"http://www1.miwifi.com/\">xmrouter</a></li>\n <li><a href=\"http://www.xnview.com/en/xnconvert/\">xnconvert</a></li>\n <li><a href=\"http://www.xnview.com/\">xnviewmp</a></li>\n <li><a href=\"http://xquartz.macosforge.org/\">xquartz</a></li>\n <li><a href=\"http://www.gauchosoft.com/Products/XRG/\">xrg</a></li>\n <li><a href=\"http://iconfactory.com/software/xscope\">xscope</a></li>\n <li><a href=\"http://www.jwz.org/xscreensaver/\">xscreensaver</a></li>\n <li><a href=\"http://latenitesoft.com/xslimmer/\">xslimmer</a></li>\n <li><a href=\"http://www.xtorrent.com\">xtorrent</a></li>\n <li><a href=\"http://www.trankynam.com/xtrafinder/\">xtrafinder</a></li>\n</ul>\n\n<h4 id=\"y\">Y</h4>\n\n<ul>\n <li><a href=\"https://yabumi.cc/\">yabumi</a></li>\n <li><a href=\"http://www.yacreader.com\">yacreader</a></li>\n <li><a href=\"http://browser.yandex.com/\">yandex</a></li>\n <li><a href=\"https://disk.yandex.com/\">yandexdisk</a></li>\n <li><a href=\"http://yasuapp.net\">yasu</a></li>\n <li><a href=\"http://www.yellowmug.com/yemuzip\">yemuzip</a></li>\n <li><a href=\"http://www.youneedabudget.com/\">ynab</a></li>\n <li><a href=\"http://www.barebones.com/products/yojimbo/\">yojimbo</a></li>\n <li><a href=\"https://sites.google.com/site/yorufukurou/home-en\">yorufukurou</a></li>\n <li><a href=\"http://cidian.youdao.com/mac/\">youdao</a></li>\n <li><a href=\"https://github.com/iSECPartners/yontma-mac\">youll-never-take-me-alive</a></li>\n <li><a href=\"http://www.younited.com/index.html\">younited</a></li>\n <li><a href=\"https://mrgeckosmedia.com/applications/info/YouView\">youview</a></li>\n <li><a href=\"http://www.yubico.com/products/services-software/personalization-tools/use/\">yubikey-personalization-gui</a></li>\n <li><a href=\"https://github.com/pallotron/yubiswitch\">yubiswitch</a></li>\n</ul>\n\n<h4 id=\"z\">Z</h4>\n\n<ul>\n <li><a href=\"http://zedapp.org\">zed</a></li>\n <li><a href=\"http://www.zend.com/en/products/server/\">zendserver</a></li>\n <li><a href=\"http://www.zend.com/en/products/studio/\">zendstudio</a></li>\n <li><a href=\"http://candysquare.com/products/zepheer/\">zepheer</a></li>\n <li><a href=\"https://github.com/sdegutis/zephyros\">zephyros</a></li>\n <li><a href=\"http://www.play0ad.com/\">zeroad</a></li>\n <li><a href=\"http://0install.net\">zeroinstall</a></li>\n <li><a href=\"http://www.jetbrains.com/dbe/\">zeroxdbe-eap</a></li>\n <li><a href=\"http://www.suavetech.com/0xed/\">zeroxed</a></li>\n <li><a href=\"http://roger-jolly.nl/software/#zipcleaner\">zipcleaner</a></li>\n <li><a href=\"http://www.zipeg.net/\">zipeg</a></li>\n <li><a href=\"http://www.emtec.com/zoc/\">zoc</a></li>\n <li><a href=\"http://www.zoom.us\">zoomus</a></li>\n <li><a href=\"http://coderage-software.com/zooom\">zooom</a></li>\n <li><a href=\"http://www.zotero.org/\">zotero</a></li>\n <li><a href=\"http://www.dalverson.com/zterm/\">zterm</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "chai",
"title": "Chai.js",
"url": "/chai",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"assert\">Assert</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">const { assert } = require('chai')\n</code></pre>\n\n<pre><code class=\"language-js\">assert(val)\nassert.fail(actual, expected)\nassert.ok(val) // is truthy\nassert.equal(actual, expected) // compare with ==\nassert.strictEqual(actual, expected) // compare with ===\nassert.deepEqual(actual, expected) // deep equal check\n</code></pre>\n\n<pre><code class=\"language-js\">assert.isTrue(val)\nassert.isFalse(val)\n</code></pre>\n\n<pre><code class=\"language-js\">assert.isNull(val)\nassert.isNotNull(val)\nassert.isUndefined(val)\nassert.isDefined(val)\nassert.isFunction(val)\nassert.isObject(val)\nassert.isArray(val)\nassert.isString(val)\nassert.isNumber(val)\nassert.isBoolean(val)\n</code></pre>\n\n<pre><code class=\"language-js\">assert.typeOf(/tea/, 'regexp') // Object.prototype.toString()\nassert.instanceOf(chai, Tea)\nassert.include([ a,b,c ], a)\nassert.match(val, /regexp/)\nassert.property(obj, 'tea') // 'tea' in object\nassert.deepProperty(obj, 'tea.green')\nassert.propertyVal(person, 'name', 'John')\nassert.deepPropertyVal(post, 'author.name', 'John')\n</code></pre>\n\n<pre><code class=\"language-js\">assert.lengthOf(object, 3)\nassert.throws(function() { ... })\nassert.throws(function() { ... }, /reference error/)\nassert.doesNotThrow\n</code></pre>\n\n<pre><code class=\"language-js\">assert.operator(1, '&lt;', 2)\nassert.closeTo(actual, expected)\n</code></pre>\n\n<p>See: <a href=\"http://chaijs.com/api/assert/\">Assert API</a> <em>(chaijs.com)</em></p>\n\n<h3 id=\"bdd-syntax\">BDD syntax</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">const { expect } = require('chai')\n</code></pre>\n\n<pre><code class=\"language-js\">expect(object)\n .to.equal(expected)\n .to.eql(expected) // deep equality\n .to.deep.equal(expected) // same as .eql\n .to.be.a('string')\n .to.include(val)\n</code></pre>\n\n<pre><code class=\"language-js\"> .be.ok(val)\n .be.true\n .be.false\n .to.exist\n</code></pre>\n\n<pre><code class=\"language-js\"> .to.be.null\n .to.be.undefined\n .to.be.empty\n .to.be.arguments\n .to.be.function\n .to.be.instanceOf\n</code></pre>\n\n<pre><code class=\"language-js\"> .to.be.gt(5) // aka: .above .greaterThan\n .to.be.gte(5) // aka: .at.least\n .to.be.lt(5) // aka: .below\n</code></pre>\n\n<pre><code class=\"language-js\"> .to.respondTo('bar')\n .to.satisfy((n) =&gt; n &gt; 0)\n</code></pre>\n\n<pre><code class=\"language-js\"> .to.have.members([2, 3, 4])\n .to.have.keys(['foo'])\n .to.have.key('foo')\n .to.have.lengthOf(3)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(() =&gt; { ··· })\n .to.throw(/not a function/)\n</code></pre>\n\n<p>See: <a href=\"http://chaijs.com/api/bdd/\">BDD</a> <em>(chaijs.com)</em></p>\n\n<h3 id=\"should-chains\">Should: chains</h3>\n\n<pre><code>.to .be .been .is .that .and .have .with .at .of .same\n</code></pre>\n\n<p>These don’t do anything and can be chained.</p>\n\n<h3 id=\"should-not\">Should not</h3>\n\n<pre><code class=\"language-js\">expect(object).not.equal('x')\n</code></pre>\n\n<h2 id=\"chai-with-jquery\">Chai with jQuery</h2>\n\n<h3 id=\"using-chai-jquery\">Using chai-jquery</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">global.jQuery = ···\nchai.use(require('chai-jquery'))\n</code></pre>\n\n<pre><code class=\"language-js\">expect($body)\n .have.attr('foo')\n .have.prop('disabled')\n .have.css('background')\n .have.css('background-color', '#ffffff')\n .have.data('foo')\n</code></pre>\n\n<pre><code class=\"language-js\"> .have.class('active')\n .have.id('id')\n</code></pre>\n\n<pre><code class=\"language-js\"> .have.html('&lt;em&gt;hi&lt;/em&gt;')\n .have.text('hello')\n .have.value('2013')\n</code></pre>\n\n<h3 id=\"continued\">Continued</h3>\n\n<pre><code class=\"language-js\">expect($body)\n</code></pre>\n\n<pre><code class=\"language-js\"> .be.visible\n .be.hidden\n</code></pre>\n\n<pre><code class=\"language-js\"> .be.checked\n .be.selected\n</code></pre>\n\n<pre><code class=\"language-js\"> .be.enabled\n .be.disabled\n</code></pre>\n\n<pre><code class=\"language-js\"> .be.empty\n .to.exist\n .to.contain('text')\n .to.have('.selector')\n</code></pre>",
"intro_html": "",
"description_html": "<p>expect(x).to.be.equal(y) 〉 assert.equal(x, y) 〉 .to.be.true 〉 jQuery, assertions, TDD and BDD, and other Chai examples.</p>",
"tags": null,
"updated": "2017-08-30"
},{
"id": "cheatsheet-styles",
"title": "Cheatsheet styles",
"url": "/cheatsheet-styles",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"intro\">Intro</h2>\n\n<h2 class=\"-three-column\" id=\"variants\">Variants</h2>\n\n<h3 id=\"h2-sections\">H2 sections</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>-one-column</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-two-column</code></td>\n <td><em>(default)</em></td>\n </tr>\n <tr>\n <td><code>-three-column</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-left-reference</code></td>\n <td>3 columns<br /><em>(short first column)</em></td>\n </tr>\n <tr>\n <td><code>-no-hide</code></td>\n <td>Don’t hide H2</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#two-columns\">H2 sections</a></p>\n\n<h3 id=\"h3-sections\">H3 sections</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>-prime</code></td>\n <td>Highlight</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#h3-sections-1\">H3 sections</a></p>\n\n<h3 id=\"tables\">Tables</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>-bold-first</code></td>\n <td>Bold first column</td>\n </tr>\n <tr>\n <td><code>-headers</code></td>\n <td>Show headers</td>\n </tr>\n <tr>\n <td><code>-left-align</code></td>\n <td>Don’t right align last column</td>\n </tr>\n <tr>\n <td><code>-mute-em</code></td>\n <td>Lower opacity for italics</td>\n </tr>\n <tr>\n <td><code>-no-wrap</code></td>\n <td>Don’t wrap text</td>\n </tr>\n <tr>\n <td><code>-shortcuts</code></td>\n <td>Shortcut keys</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#tables-1\">Tables</a></p>\n\n<h3 id=\"code\">Code</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>-box-chars</code></td>\n <td>Less line height<br /><em>for box drawing chars</em></td>\n </tr>\n <tr>\n <td><code>-setup</code></td>\n <td>Gray background</td>\n </tr>\n <tr>\n <td><code>-wrap</code></td>\n <td>Enables line-wrapping</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#code-1\">Code</a></p>\n\n<h3 id=\"paragraphs\">Paragraphs</h3>\n\n<table class=\"-gray\">\n <tbody>\n <tr>\n <td><code>-setup</code></td>\n <td>Gray background</td>\n </tr>\n <tr>\n <td><code>-crosslink</code></td>\n <td>Has arrow on the link</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#paragraphs-1\">Paragraphs</a></p>\n\n<h3 id=\"lists\">Lists</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>-also-see</code></td>\n <td>Lighter background</td>\n </tr>\n <tr>\n <td><code>-four-column</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-six-column</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"#lists-1\">Lists</a></p>\n\n<h3 class=\"-prime\" id=\"adding-variants\">Adding variants</h3>\n\n<pre><code>## Section\n{: .-two-column}\n</code></pre>\n\n<p>Devhints uses Kramdown, and supports adding classes via Kramdown’s syntax.</p>\n\n<h2 class=\"-three-column\" id=\"h3-sections-1\">H3 sections</h2>\n\n<h3 id=\"supported\">Supported</h3>\n\n<p>Each section can have the following children:</p>\n\n<h4 id=\"white\">White</h4>\n\n<ul>\n <li><code>pre</code></li>\n <li><code>ul</code></li>\n <li><code>table</code></li>\n</ul>\n\n<h4 id=\"gray\">Gray</h4>\n\n<ul>\n <li><code>p</code></li>\n <li><code>h4</code></li>\n</ul>\n\n<h3 class=\"-prime\" id=\"prime-section\">Prime section</h3>\n\n<p>This is a section with <code>{: .-prime}</code>. Notice the fancy highlight! Great for “getting started” kind of snippets.</p>\n\n<h3 id=\"h3-section\">H3 section</h3>\n\n<p>Every box is an H3 section. The box will encompass everything inside the body of the H3.</p>\n\n<p>This is a basic section with paragraphs in it.</p>\n\n<h2 class=\"-three-column\" id=\"code-1\">Code</h2>\n\n<h3 id=\"basic-code\">Basic code</h3>\n\n<pre><code class=\"language-js\">here.is(() =&gt; {\n some.code()\n})\n</code></pre>\n\n<pre><code class=\"language-js\">here.is.some.more()\n</code></pre>\n\n<p>Code blocks can be placed one after the other.</p>\n\n<p>See: <a href=\"/\">Cheatsheets</a></p>\n\n<h3 id=\"code-with-headings\">Code with headings</h3>\n\n<h4 class=\"-file\" id=\"indexjs\">index.js</h4>\n\n<pre><code class=\"language-js\">here.is(() =&gt; {\n some.code()\n})\n</code></pre>\n\n<h4 class=\"-file\" id=\"otherjs\">other.js</h4>\n\n<pre><code class=\"language-js\">here.is.some.more()\n</code></pre>\n\n<p>Code blocks can have headings.</p>\n\n<h3 id=\"highlighted-lines\">Highlighted lines</h3>\n\n<pre data-line=\"3\"><code class=\"language-js\">app.start(() =&gt; {\n const port = app.server.port\n console.log(`Started at ${port}`)\n})\n</code></pre>\n\n<p>Add <code>{: data-line=\"3\"}</code> to add line highlights.</p>\n\n<h3 id=\"multiple-highlights\">Multiple highlights</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">app.start(() =&gt; {\n const port = app.server.port\n console.log(`Started at ${port}`)\n})\n</code></pre>\n\n<p>Add <code>{: data-line=\"2,3\"}</code> to add multiple line highlights.</p>\n\n<h3 id=\"setup-blocks\">Setup blocks</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import React from 'react'\n</code></pre>\n\n<pre><code class=\"language-js\">class Hello extends React.Component {\n render () {\n return &lt;span&gt;Hello&lt;/span&gt;\n }\n}\n</code></pre>\n\n<p>Add <code>{: .-setup}</code> to a <code>pre</code> or <code>table</code> or <code>ul</code>.</p>\n\n<h3 id=\"long-lines\">Long lines</h3>\n\n<pre><code class=\"language-js\">function createNode(nodeName: string, options: { key: string }) {\n return true\n}\n</code></pre>\n\n<p>Long lines will have scrollbars.</p>\n\n<h3 id=\"line-wrapping\">Line wrapping</h3>\n\n<pre class=\"-wrap\"><code class=\"language-js\">&lt;script&gt;(function(d,s){if(window.Promise&amp;&amp;[].includes&amp;&amp;Object.assign&amp;&amp;window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))&lt;/script&gt;\n</code></pre>\n\n<p>Add <code>-wrap</code> to wrap long lines.</p>\n\n<h2 class=\"-three-column\" id=\"lists-1\">Lists</h2>\n\n<h3 id=\"lists-2\">Lists</h3>\n\n<ul>\n <li>This is</li>\n <li>a list</li>\n <li>with a few items</li>\n</ul>\n\n<p>Here’s an extra paragraph after the list.</p>\n\n<h3 id=\"lists-with-headings\">Lists with headings</h3>\n\n<h4 id=\"part-1\">Part 1</h4>\n\n<ul>\n <li><code>createElement()</code></li>\n <li><code>componentDidMount()</code></li>\n <li><code>componentWillUnmount()</code></li>\n</ul>\n\n<h4 id=\"part-2\">Part 2</h4>\n\n<ul>\n <li><code>shouldComponentUpdate()</code></li>\n <li><code>componentWillReceiveProps()</code></li>\n</ul>\n\n<p>Here’s an extra paragraph after the list.</p>\n\n<h2 class=\"-one-column\" id=\"list-columns\">List columns</h2>\n\n<h3 id=\"six-columns\">Six columns</h3>\n\n<ul class=\"-six-column\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n <li>Four</li>\n <li>Five</li>\n <li>Six</li>\n <li>Seven</li>\n <li>Eight</li>\n <li>Nine</li>\n <li>Ten</li>\n <li>Eleven</li>\n</ul>\n\n<p>Add <code>{: .-six-column}</code> to make large lists.</p>\n\n<h3 id=\"four-columns\">Four columns</h3>\n\n<ul class=\"-four-column\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n <li>Four</li>\n <li>Five</li>\n <li>Six</li>\n <li>Seven</li>\n <li>Eight</li>\n <li>Nine</li>\n <li>Ten</li>\n <li>Eleven</li>\n</ul>\n\n<p>Add <code>{: .-four-column}</code> to make large lists.</p>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul class=\"-also-see\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n <li>Four</li>\n <li>Five</li>\n <li>Six</li>\n <li>Seven</li>\n <li>Eight</li>\n <li>Nine</li>\n <li>Ten</li>\n</ul>\n\n<p>Add <code>{: .-also-see}</code>.</p>\n\n<h2 class=\"-three-column\" id=\"paragraphs-1\">Paragraphs</h2>\n\n<h3 id=\"basic-paragraphs\">Basic paragraphs</h3>\n\n<p>This is a basic section with paragraphs in it. When paragraphs are the first elements in an H3 section’s body, they appear as white.</p>\n\n<h3 id=\"basic-paragraphs-1\">Basic paragraphs</h3>\n\n<pre><code>···\n</code></pre>\n\n<p>When paragraphs appear after <code>pre</code>/<code>table</code>/<code>ul</code>, they appear with a gray background.</p>\n\n<h3 id=\"preludes\">Preludes</h3>\n\n<p class=\"-setup\">Here’s a prelude paragraph. Add <code>{: .-setup}</code> to make paragraphs appear with a gray background.</p>\n\n<pre><code>···\n</code></pre>\n\n<h3 id=\"crosslink\">Crosslink</h3>\n\n<p>Add <code>{: .-crosslink}</code> to make big loud external links:</p>\n\n<pre><code>···\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"/\">Home</a></p>\n\n<h2 class=\"-three-column\" id=\"tables-1\">Tables</h2>\n\n<h3 id=\"basic-table\">Basic table</h3>\n\n<h4 id=\"date\">Date</h4>\n\n<table>\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%m/%d/%Y</code></td>\n <td><code>06/05/2013</code></td>\n </tr>\n <tr>\n <td><code>%A, %B %e, %Y</code></td>\n <td><code>Sunday, June 5, 2013</code></td>\n </tr>\n <tr>\n <td><code>%b %e %a</code></td>\n <td><code>Jun 5 Sun</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"time\">Time</h4>\n\n<table>\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%H:%M</code></td>\n <td><code>23:05</code></td>\n </tr>\n <tr>\n <td><code>%I:%M %p</code></td>\n <td><code>11:05 PM</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>This is a basic table with h4’s.</p>\n\n<h3 id=\"shortcuts\">Shortcuts</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>V</code></td>\n <td>Vector</td>\n </tr>\n <tr>\n <td><code>P</code></td>\n <td>Pencil</td>\n </tr>\n <tr>\n <td><code>T</code></td>\n <td>Text</td>\n </tr>\n <tr>\n <td><code>L</code></td>\n <td>Line</td>\n </tr>\n <tr>\n <td><code>R</code></td>\n <td>Rectangle</td>\n </tr>\n <tr>\n <td><code>O</code></td>\n <td>Oval</td>\n </tr>\n <tr>\n <td><code>U</code></td>\n <td>Rounded</td>\n </tr>\n </tbody>\n</table>\n\n<p>Add <code>{: .-shortcuts}</code> to tables.</p>\n\n<h3 id=\"with-headers\">With headers</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Prefix</th>\n <th>Example</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>//</code></td>\n <td><code>//hr[@class='edge']</code></td>\n <td>Anywhere</td>\n </tr>\n <tr>\n <td><code>./</code></td>\n <td><code>./a</code></td>\n <td>Relative</td>\n </tr>\n <tr>\n <td><code>/</code></td>\n <td><code>/html/body/div</code></td>\n <td>Root</td>\n </tr>\n </tbody>\n</table>\n\n<p>Add <code>{: .-headers}</code> to add headers.</p>\n\n<h2 id=\"two-columns\">Two columns</h2>\n\n<h3 id=\"one\">One</h3>\n\n<pre><code>···\n</code></pre>\n\n<h3 id=\"two\">Two</h3>\n\n<pre><code>···\n</code></pre>\n\n<h2 class=\"-left-reference\" id=\"left-reference\">Left reference</h2>\n\n<h3 id=\"one-1\">One</h3>\n\n<pre><code>···\n···\n···\n···\n···\n···\n···\n···\n</code></pre>\n\n<h3 id=\"two-1\">Two</h3>\n\n<pre><code>···\n</code></pre>\n\n<h3 id=\"three\">Three</h3>\n\n<pre><code>···\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"one-column\">One column</h2>\n\n<h3 id=\"one-2\">One</h3>\n\n<pre><code>···\n</code></pre>",
"intro_html": "<p>This is a reference of styles that you can use on Devhints cheatsheets. How\nmeta!\nYou can refer to this when contributing your own cheatsheets to the <a href=\"https://github.com/rstacruz/cheatsheets/\">GitHub repo</a>.</p>",
"description_html": "",
"tags": ["WIP"],
"updated": "2017-09-22"
},{
"id": "chef",
"title": "Chef",
"url": "/chef",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"install\">Install</h3>\n\n<p class=\"-setup\">In your server:</p>\n\n<pre><code class=\"language-bash\">$ sudo apt-get install curl\n</code></pre>\n\n<pre><code class=\"language-bash\">$ curl -L https://omnitruck.chef.io/install.sh | sudo bash\nThank you for installing Chef!\n</code></pre>\n\n<pre><code class=\"language-bash\">$ chef-solo -v\n...\nChef: 14.5.33\n</code></pre>\n\n<h3 id=\"start-the-cookbook\">Start the cookbook</h3>\n\n<pre><code class=\"language-bash\"> wget http://github.com/chef-cookbooks/chef-repo/tarball/master -O - | tar xzf - --strip-components=1\n</code></pre>\n\n<h3 id=\"knife\">Knife</h3>\n\n<pre><code class=\"language-bash\">$ knife supermarket download mysql\n</code></pre>\n\n<h3 id=\"invoking-chef-solo\">Invoking chef-solo</h3>\n\n<pre><code class=\"language-bash\">$ chef-solo -c solo.rb -j web.json\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"simple-compile-from-source\">Simple compile-from-source</h3>\n\n<pre><code class=\"language-ruby\">execute \"tar --no-same-owner -zxf hi.tar.gz\" do\n cwd \"/usr/local/src\"\n creates \"/usr/local/src/node-v#{version}\"\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">bash \"compile\" do\n cwd \"/usr/local/src/node-v#{version}\"\n code %[\n PATH=/usr/local/bin:$PATH\n ./configure\n make\n ]\n creates \"/usr/local/src/node-v#{version}/node\"\nend\n</code></pre>\n\n<h3 id=\"remote-file\">remote file</h3>\n\n<pre><code class=\"language-ruby\">remote_file \"/usr/local/src/hi.tar.gz\" do\n source \"http://...\"\n checksum \"ab83be...\"\n mode 0644\n action :create_if_missing\nend\n</code></pre>\n\n<h3 id=\"ruby_block\">ruby_block</h3>\n\n<pre><code class=\"language-ruby\">ruby_block \"name\" do\n block { File.read ... }\n not_if { File.exists?(...) }\nend\n</code></pre>\n\n<h3 id=\"execute\">Execute</h3>\n\n<pre><code class=\"language-ruby\">execute \"name\" do\n cwd \"...\"\n environment({ \"PATH\" =&gt; \"...\" })\n command \"make install\"\n creates \"...\"\nend\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<pre><code class=\"language-ruby\"> creates \"/usr/local/src/node-v#{version}/node\"\n not_if { File.exists?('...') }\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://learn.chef.io\">Learn Chef Rally</a> <em>(learn.chef.io)</em></li>\n <li><a href=\"https://github.com/mdxp/nodejs-cookbook/blob/master/recipes/install_from_source.rb\">install_from_source.rb recipe</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "chunky_png",
"title": "Chunky PNG",
"url": "/chunky_png",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"loading\">Loading</h3>\n\n<pre><code class=\"language-ruby\">image = ChunkyPNG::Image.from_file('file.png')\n</code></pre>\n\n<h4 id=\"alternate-ways\">Alternate ways</h4>\n\n<pre><code class=\"language-ruby\">image = ChunkyPNG::Image.from_blob(File.read('file.png'))\nimage = ChunkyPNG::Image.from_io(io) \n</code></pre>\n\n<p>Loads from <code>file.png</code>.</p>\n\n<h3 id=\"saving\">Saving</h3>\n\n<pre><code class=\"language-ruby\">image.save('filename.png')\n</code></pre>\n\n<h4 id=\"alternate-ways-1\">Alternate ways</h4>\n\n<pre><code class=\"language-ruby\">File.open('newfile.png', 'wb') { |io| image.write(io) }\nbinary_string = image.to_blob\n</code></pre>\n\n<p>Writes an image to <code>newfile.png</code>.</p>\n\n<h3 id=\"drawing\">Drawing</h3>\n\n<pre><code class=\"language-ruby\">image[0, 0] = ChunkyPNG::Color.rgba(255, 0,0, 128)\nimage.line(1, 1, 10, 1, ChunkyPNG::Color.from_hex('#aa007f'))\n</code></pre>\n\n<h3 id=\"canvas\">Canvas</h3>\n\n<pre><code class=\"language-ruby\">crop(x, y, w, h)\n</code></pre>\n\n<h3 id=\"transforms\">Transforms</h3>\n\n<pre><code class=\"language-ruby\">new_image = image.flip_horizontally.rotate_right\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "cidr",
"title": "CIDR",
"url": "/cidr",
"category": "Misc",
"keywords": null,
"content_html": "<h3 id=\"cidr-ranges\">CIDR ranges</h3>\n\n<table>\n <thead>\n <tr>\n <th>Range</th>\n <th>First IP</th>\n <th>Last IP</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>10.0.0.0/24</strong></td>\n <td>10.0.0.0</td>\n <td>10.0.0.255</td>\n </tr>\n <tr>\n <td><strong>10.0.0.0/16</strong></td>\n <td>10.0.0.0</td>\n <td>10.0.255.255</td>\n </tr>\n <tr>\n <td><strong>10.0.0.0/8</strong></td>\n <td>10.0.0.0</td>\n <td>10.255.255.255</td>\n </tr>\n <tr>\n <td><strong>0.0.0.0/0</strong></td>\n <td>(all)</td>\n <td>(all)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"resources\">Resources</h3>\n\n<ul>\n <li><a href=\"http://ipaddressguide.com/cidr#range\">CIDR range calculator</a> <em>(ipaddressguide.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-05-14"
},{
"id": "circle",
"title": "CircleCI",
"url": "/circle",
"category": "Devops",
"keywords": null,
"content_html": "<h2 id=\"circleyml\">circle.yml</h2>\n\n<ul>\n <li><strong>machine</strong>: adjusting the VM to your preferences and requirements</li>\n <li><strong>checkout</strong>: checking out and cloning your git repo</li>\n <li><strong>dependencies</strong>: setting up your project’s language-specific dependencies</li>\n <li><strong>database</strong>: preparing the databases for your tests</li>\n <li><strong>test</strong>: running your tests</li>\n <li><strong>deployment</strong>: deploying your code to your web servers</li>\n</ul>\n\n<p>See: <a href=\"https://circleci.com/docs/configuration\">https://circleci.com/docs/configuration</a></p>\n\n<h2 id=\"sample\">Sample</h2>\n\n<pre><code class=\"language-yml\">## Customize the test machine\nmachine:\n\n timezone:\n America/Los_Angeles # Set the timezone\n\n # Version of ruby to use\n ruby:\n version:\n 1.8.7-p358-falcon-perf\n\n # Override /etc/hosts\n hosts:\n circlehost: 127.0.0.1\n dev.mycompany.com: 127.0.0.1\n\n # Add some environment variables\n environment:\n CIRCLE_ENV: test\n DATABASE_URL: postgres://ubuntu:@127.0.0.1:5432/circle_test\n\n## Customize checkout\ncheckout:\n post:\n - git submodule sync\n - git submodule update --init # use submodules\n\n## Customize dependencies\ndependencies:\n pre:\n - npm install coffeescript # install from a different package manager\n - gem uninstall bundler # use a custom version of bundler\n - gem install bundler --pre\n\n override:\n - bundle install: # note ':' here\n timeout: 180 # fail if command has no output for 3 minutes\n\n # we automatically cache and restore many dependencies between\n # builds. If you need to, you can add custom paths to cache:\n cache_directories:\n - \"custom_1\" # relative to the build directory\n - \"~/custom_2\" # relative to the user's home directory\n\n## Customize database setup\ndatabase:\n override:\n # replace CircleCI's generated database.yml\n - cp config/database.yml.ci config/database.yml\n - bundle exec rake db:create db:schema:load\n\n## Customize test commands\ntest:\n override:\n - phpunit test/unit-tests # use PHPunit for testing\n post:\n - bundle exec rake jasmine:ci: # add an extra test type\n environment:\n RAILS_ENV: test\n RACK_ENV: test\n\n## Customize deployment commands\ndeployment:\n staging:\n branch: master\n heroku:\n appname: foo-bar-123\n\n## Custom notifications\nnotify:\n webhooks:\n # A list of hashes representing hooks. Only the url field is supported.\n - url: https://someurl.com/hooks/circle\n</code></pre>\n\n<p>See: <a href=\"https://circleci.com/docs/config-sample\">https://circleci.com/docs/config-sample</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "co",
"title": "co",
"url": "/co",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"running-generators\">Running generators</h3>\n\n<pre><code class=\"language-js\">co(function * () {\n yield Promise.resolve(true)\n}).then(...)\n</code></pre>\n\n<p>A generator can <code>yield</code> a thunk or promise. Using <code>co()</code> will immediately invoke the block inside it.</p>\n\n<h3 id=\"generator--promise\">Generator → Promise</h3>\n\n<pre><code class=\"language-js\">var fn = co.wrap(function * (val) {\n return yield Promise.resolve(val)\n})\n\nfn().then(...)\n</code></pre>\n\n<p>Use <code>co.wrap()</code>. Most of the time, you’ll be using co.wrap.</p>\n\n<h3 id=\"generator--node-callback\">Generator → Node callback</h3>\n\n<pre><code class=\"language-js\">var get = unyield(function * () {\n})\n\nget(function (err, res) { ... })\n</code></pre>\n\n<p>Use <a href=\"https://github.com/MatthewMueller/unyield\">unyield</a>. (You can <a href=\"https://github.com/visionmedia/node-thunkify\">thunkify</a> this later)</p>\n\n<h3 id=\"node-callback--thunk\">Node callback → Thunk</h3>\n\n<pre><code class=\"language-js\">var readFile = thunkify(fs.readFile)\n\nco(function * () {\n var data = yield readFile('index.txt', 'utf-8')\n})\n</code></pre>\n\n<p>Use <a href=\"https://github.com/visionmedia/node-thunkify\">thunkify</a>. You can yield this. You can also use <a href=\"https://www.npmjs.com/package/thenify\">thenify</a> too.</p>\n\n<h3 id=\"using-nodejs-api\">Using Node.js API</h3>\n\n<pre><code class=\"language-js\">var readFile = require('mz/fs').readFile\n\nvar getLines = co.wrap(function * (filename) {\n var data = yield readFile(filename, 'utf-8')\n return data.split('\\n')\n})\n\ngetLines('file.txt').then((lines) =&gt; { ... })\n</code></pre>\n\n<p>Use <a href=\"https://www.npmjs.com/package/mz\">mz</a> for async Node.js API. You can also either <a href=\"https://github.com/visionmedia/node-thunkify\">thunkify</a> or <a href=\"https://www.npmjs.com/package/thenify\">thenify</a> them instead.</p>",
"intro_html": "<p><a href=\"https://github.com/tj/co\">co</a> allows you to use generators to manage async flow.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-27"
},{
"id": "command_line",
"title": "Command line stuff",
"url": "/command_line",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"list-ls\">List (ls)</h2>\n\n<pre><code>ls [options] [paths]\n</code></pre>\n\n<h3 id=\"format\">Format</h3>\n\n<table class=\"shortcuts\">\n <thead>\n <tr>\n <th>Switch</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-1</code></td>\n <td>One entry per line</td>\n </tr>\n <tr>\n <td><code>-l</code></td>\n <td>Long view</td>\n </tr>\n <tr>\n <td><code>-o</code></td>\n <td>Long view (without groups)</td>\n </tr>\n <tr>\n <td><code>-C</code></td>\n <td>Multicolumn (sorted horizontally)</td>\n </tr>\n <tr>\n <td><code>-x</code></td>\n <td>Multicolumn (sorted vertically)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-F</code></td>\n <td>Add / after directories</td>\n </tr>\n <tr>\n <td><code>-G</code></td>\n <td>Color</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"options\">Options</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-R</code></td>\n <td>Recurse</td>\n </tr>\n <tr>\n <td><code>-a</code></td>\n <td>Include hidden (dotfiles)</td>\n </tr>\n <tr>\n <td><code>-A</code></td>\n <td>Include hidden (but not . and ..)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"sorting\">Sorting</h3>\n\n<table class=\"shortcuts\">\n <thead>\n <tr>\n <th>Switch</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-r</code></td>\n <td>reverse order</td>\n </tr>\n <tr>\n <td><code>-S</code></td>\n <td>sort by size</td>\n </tr>\n <tr>\n <td><code>-t</code></td>\n <td>sort by time modified</td>\n </tr>\n <tr>\n <td><code>-u</code></td>\n <td>sort by time accessed</td>\n </tr>\n <tr>\n <td><code>-U</code></td>\n <td>sort by time created</td>\n </tr>\n <tr>\n <td><code>-c</code></td>\n <td>sort by time status was changed</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-h</code></td>\n <td>Human-readable size (3k)</td>\n </tr>\n </tbody>\n</table>\n\n<p><br /></p>\n\n<h2 id=\"tail\">Tail</h2>\n\n<pre><code>tail [-F | -f | -r] [-bN | -cN | -nN] [file ...]\n</code></pre>\n\n<h3 id=\"modes\">Modes</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-f</code></td>\n <td>follow</td>\n </tr>\n <tr>\n <td><code>-F</code></td>\n <td>follow by filename (accounts for log rotation)</td>\n </tr>\n <tr>\n <td><code>-r</code></td>\n <td>Reverse order</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"options-1\">Options</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-bN</code></td>\n <td>N*512 bytes</td>\n </tr>\n <tr>\n <td><code>-cN</code></td>\n <td>N bytes</td>\n </tr>\n <tr>\n <td><code>-nN</code></td>\n <td>N lines</td>\n </tr>\n <tr>\n <td><code>+N</code></td>\n <td>Start from line N</td>\n </tr>\n </tbody>\n</table>\n\n<p><br /></p>\n\n<h2 id=\"sudo\">Sudo</h2>\n\n<pre><code>sudo [options] &lt;command&gt;\n</code></pre>\n\n<h3 id=\"listing\">Listing</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-l</code></td>\n <td>List allowed commands</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"options-2\">Options</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-A</code></td>\n <td>Use $SUDO_ASKPASS</td>\n </tr>\n <tr>\n <td><code>-b</code></td>\n <td>Run in background</td>\n </tr>\n <tr>\n <td><code>-E</code></td>\n <td>Preserve environment</td>\n </tr>\n <tr>\n <td><code>-H</code></td>\n <td>use target’s $HOME</td>\n </tr>\n <tr>\n <td><code>-n</code></td>\n <td>Don’t prompt for password</td>\n </tr>\n <tr>\n <td><code>-P</code></td>\n <td>Preserve group vector</td>\n </tr>\n <tr>\n <td><code>-S</code></td>\n <td>Read password from stdin</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"file-descriptors\">File descriptors</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-C fd</code></td>\n <td>Close all open file descriptors</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"prompt\">Prompt</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-p prompt</code></td>\n <td>Custom prompt (-p “%p password:”)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"interactive\">Interactive</h3>\n\n<table class=\"shortcuts\">\n <thead>\n <tr>\n <th>Switch</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-i [cmd]</code></td>\n <td>Interactive shell without variables</td>\n </tr>\n <tr>\n <td><code>-s [cmd]</code></td>\n <td>Interactive shell</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-u user</code></td>\n <td>run as this user</td>\n </tr>\n <tr>\n <td><code>-g group</code></td>\n <td>run as this group</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"timestamp\">Timestamp</h3>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-v</code></td>\n <td>revalidate timestamp for 5 mins</td>\n </tr>\n <tr>\n <td><code>-k</code></td>\n <td>invalidate timestamp</td>\n </tr>\n <tr>\n <td><code>-K</code></td>\n <td>just like -k</td>\n </tr>\n </tbody>\n</table>\n\n<p><br /></p>\n\n<h2 id=\"wc-word-count\">wc (Word count)</h2>\n\n<pre><code>... | wc [options]\n</code></pre>\n\n<table class=\"shortcuts\">\n <tbody>\n <tr>\n <td><code>-c</code></td>\n <td>Bytes</td>\n </tr>\n <tr>\n <td><code>-l</code></td>\n <td>Lines</td>\n </tr>\n <tr>\n <td><code>-m</code></td>\n <td>Characters (incl multi-byte)</td>\n </tr>\n <tr>\n <td><code>-w</code></td>\n <td>Words</td>\n </tr>\n </tbody>\n</table>\n\n<p><br /></p>\n\n<h2 id=\"search-and-replace-in-all-files\">Search-and-replace in all files</h2>\n\n<pre><code>perl -p -i -e 's/hello/HELLO/g' **/*\n</code></pre>\n\n<p><br /></p>\n\n<h2 id=\"grep\">Grep</h2>\n\n<pre><code>grep [options] [pattern] [file ...]\n</code></pre>\n\n<h3 id=\"options-3\">Options</h3>\n\n<table class=\"shortcuts\">\n <thead>\n <tr>\n <th>Switch</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-A num</code></td>\n <td>Print <code>num</code> lines of training context</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-G</code></td>\n <td>–basic-regexp (default)</td>\n </tr>\n <tr>\n <td><code>-E</code></td>\n <td>–extended-regexp</td>\n </tr>\n <tr>\n <td><code>-P</code></td>\n <td>–perl-regexp</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-f file</code></td>\n <td>–file (Get patterns for file)</td>\n </tr>\n <tr>\n <td><code>-F</code></td>\n <td>–fixed-strings</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-h</code></td>\n <td>–no-filename</td>\n </tr>\n <tr>\n <td><code>-H</code></td>\n <td>–with-filename</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-l</code></td>\n <td>–files-with-matches (just print filenames)</td>\n </tr>\n <tr>\n <td><code>-L</code></td>\n <td>–files-without-match</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-r, -R</code></td>\n <td>–recursive</td>\n </tr>\n <tr>\n <td><code>-v</code></td>\n <td>–invert-match</td>\n </tr>\n <tr>\n <td><code>-i</code></td>\n <td>–ignore-case</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"synonyms\">Synonyms</h3>\n\n<pre><code>egrep =&gt; grep -E\nfgrep =&gt; grep -F\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "commander.js",
"title": "Commander.js",
"url": "/commander.js",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"initialize\">Initialize</h3>\n\n<pre><code>var cli = require('commander');\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code>cli\n .version(require('../package').version)\n .usage('[options] &lt;command&gt;')\n .option('-w, --words &lt;n&gt;', 'generate &lt;n&gt; words')\n .option('-i, --interval &lt;n&gt;', 'interval [1000]', 1000)\n .option('-s, --symbols', 'include symbols')\n .parse(process.argv);\n</code></pre>\n\n<h3 id=\"help\">Help</h3>\n\n<pre><code>.on('--help', function() {\n console.log('');\n})\n</code></pre>\n\n<h3 id=\"commands\">Commands</h3>\n\n<pre><code>cli.outputHelp();\ncli.args == [\"hello\"];\n</code></pre>\n\n<h3 id=\"other-useful-things\">Other useful things</h3>\n\n<pre><code>process.exit(0);\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "composer",
"title": "composer",
"url": "/composer",
"category": "CLI",
"keywords": null,
"content_html": "<p>All composer commands, depending on your install, may need to use <code>php composer.phar</code> in the install folder for composer, instead of plain <code>composer</code>.</p>\n\n<h3 id=\"installing-dependencies\">Installing dependencies</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>composer install</code></td>\n <td>Downloads and installs all the libraries and dependencies outlined in the <code>composer.lock</code> file. If the file does not exist it will look for composer.json and do the same, creating a <code>composer.lock</code> file.</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>composer install --dry-run</code></td>\n <td>Simulates the install without installing anything</td>\n </tr>\n </tbody>\n</table>\n\n<p>This command doesn’t change any file. If <code>composer.lock</code> is not present, it will create it.</p>\n\n<p><code>composer.lock</code> <strong>should always</strong> be committed to the repository. It has all the information needed to bring the \nlocal dependencies to the last committed state. If that file is modified on the repository, you will need to run \n<code>composer install</code> again after fetching the changes to update your local dependencies to those on that file.</p>\n\n<h3 id=\"updating-packages\">Updating packages</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>composer update</code></td>\n <td>Updates all packages</td>\n </tr>\n <tr>\n <td><code>composer update --with-dependencies</code></td>\n <td>Updates all packages and its dependencies</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>composer update vendor/package</code></td>\n <td>Updates a certain <code>package</code> from <code>vendor</code></td>\n </tr>\n <tr>\n <td><code>composer update vendor/*</code></td>\n <td>Updates all packages from <code>vendor</code></td>\n </tr>\n <tr>\n <td><code>composer update --lock</code></td>\n <td>Updates <code>composer.lock</code> hash without updating any packages</td>\n </tr>\n </tbody>\n</table>\n\n<p>This command changes only the <code>composer.lock</code> file.</p>\n\n<h3 id=\"updating-autoloader\">Updating autoloader</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>composer dumpautoload -o</code></td>\n <td>Generates optimized autoload files</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"adding-packages\">Adding packages</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>composer require vendor/package</code>.</td>\n <td>Adds <code>package</code> from <code>vendor</code> to composer.json’s <code>require</code> section and installs it</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>composer require vendor/package --dev</code></td>\n <td>Adds <code>package</code> from <code>vendor</code> to composer.json’s <code>require-dev</code> section and installs it.</td>\n </tr>\n </tbody>\n</table>\n\n<p>This command changes both the <code>composer.json</code> and <code>composer.lock</code> files.</p>\n\n<h3 id=\"removing-packages\">Removing packages</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>composer remove vendor/package</code></td>\n <td>Removes <code>vendor/package</code> from composer.json and uninstalls it</td>\n </tr>\n </tbody>\n</table>\n\n<p>This command changes both the <code>composer.json</code> and <code>composer.lock</code> files.</p>",
"intro_html": "",
"description_html": "<p>Basic guide on how to use Composer, the PHP Package manager.</p>",
"tags": null,
"updated": "2018-03-06"
},{
"id": "cordova",
"title": "Cordova",
"url": "/cordova",
"category": "Others",
"keywords": null,
"content_html": "<pre><code>cordova plugin ls\ncordova plugin search facebook\ncordova plugin add com.phonegap.plugins.facebookconnect\n\ncordova platform add ios\ncordova platform ls\ncordova platform update ios\ncordova platform check\n</code></pre>\n\n<h3 id=\"some-plugins\">Some plugins</h3>\n\n<p>You’ll likely need these:</p>\n\n<ul>\n <li><a href=\"https://github.com/apache/cordova-plugin-console\">org.apache.cordova.console</a></li>\n <li><a href=\"https://github.com/apache/cordova-plugin-inappbrowser\">org.apache.cordova.inappbrowser</a></li>\n <li><a href=\"https://github.com/apache/cordova-plugin-statusbar\">org.apache.cordova.statusbar</a></li>\n <li>org.apache.cordova.splashscreen</li>\n</ul>\n\n<p>Also:</p>\n\n<ul>\n <li>com.phonegap.plugins.facebookconnect</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "cron",
"title": "Cron",
"url": "/cron",
"category": "CLI",
"keywords": null,
"content_html": "<h2 class=\"-two-column\" id=\"format\">Format</h2>\n\n<h3 id=\"format-1\">Format</h3>\n\n<pre class=\"-setup\"><code>Min Hour Day Mon Weekday\n</code></pre>\n\n<pre><code>* * * * * command to be executed\n</code></pre>\n\n<pre class=\"-setup -box-chars\"><code>┬ ┬ ┬ ┬ ┬\n│ │ │ │ └─ Weekday (0=Sun .. 6=Sat)\n│ │ │ └────── Month (1..12)\n│ │ └─────────── Day (1..31)\n│ └──────────────── Hour (0..23)\n└───────────────────── Minute (0..59)\n</code></pre>\n\n<h3 id=\"examples\">Examples</h3>\n\n<table>\n <thead>\n <tr>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>0 * * * *</code></td>\n <td>every hour</td>\n </tr>\n <tr>\n <td><code>*/15 * * * *</code></td>\n <td>every 15 mins</td>\n </tr>\n <tr>\n <td><code>0 */2 * * *</code></td>\n <td>every 2 hours</td>\n </tr>\n <tr>\n <td><code>0 0 * * 0</code></td>\n <td>every Sunday midnight</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>@reboot</code></td>\n <td>every reboot</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"crontab\">Crontab</h3>\n\n<pre><code class=\"language-bash\"># Adding tasks easily\necho \"@reboot echo hi\" | crontab\n</code></pre>\n\n<pre><code class=\"language-bash\"># Open in editor\ncrontab -e\n</code></pre>\n\n<pre><code class=\"language-bash\"># List tasks\ncrontab -l [-u user]\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "crypto",
"title": "Cryptography",
"url": "/crypto",
"category": "Others",
"keywords": null,
"content_html": "<ul>\n <li>\n <p><a href=\"http://en.wikipedia.org/wiki/PBKDF2\">PBKDF2</a> - password-based key derivation \n function</p>\n </li>\n <li>\n <p><a href=\"http://en.wikipedia.org/wiki/HMAC\">HMAC</a> - Hash-based message authentication \n code</p>\n </li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "csharp7",
"title": "C# 7",
"url": "/csharp7",
"category": "C-like",
"keywords": null,
"content_html": "<h3 id=\"out-variables\">Out Variables</h3>\n\n<pre><code class=\"language-csharp\">public void PrintCoordinates(Point p)\n{\n p.GetCoordinates(out int x, out int y);\n WriteLine($\"({x}, {y})\");\n}\n</code></pre>\n\n<p><code>out</code> is used to declare a variable at the point where it is passed as an argument.</p>\n\n<h3 id=\"pattern-matching\">Pattern Matching</h3>\n\n<h4 id=\"is-expressions-with-patterns\">Is-expressions with patterns</h4>\n\n<pre><code class=\"language-csharp\">public void PrintStars(object o)\n{\n if (o is null) return; // constant pattern \"null\"\n if (!(o is int i)) return; // type pattern \"int i\"\n WriteLine(new string('*', i));\n}\n</code></pre>\n\n<h4 id=\"switch-statements-with-patterns\">Switch statements with patterns</h4>\n\n<pre><code class=\"language-csharp\">switch(shape)\n{\n case Circle c:\n WriteLine($\"circle with radius {c.Radius}\");\n break;\n case Rectangle s when (s.Length == s.Height):\n WriteLine($\"{s.Length} x {s.Height} square\");\n break;\n case Rectangle r:\n WriteLine($\"{r.Length} x {r.Height} rectangle\");\n break;\n default:\n WriteLine(\"&lt;unknown shape&gt;\");\n break;\n case null:\n throw new ArgumentNullException(nameof(shape));\n}\n</code></pre>\n\n<h3 id=\"tuples\">Tuples</h3>\n\n<h4 id=\"tuple-type\">Tuple type</h4>\n\n<pre><code class=\"language-csharp\">(string, string, string) LookupName(long id) // tuple return type\n{\n ... // retrieve first, middle and last from data storage\n return (first, middle, last); // tuple literal\n}\n</code></pre>\n\n<pre><code class=\"language-csharp\">var names = LookupName(id);\nWriteLine($\"found {names.Item1} {names.Item3}.\");\n</code></pre>\n\n<h4 id=\"tuple-elements-with-name\">Tuple elements with name</h4>\n\n<pre><code class=\"language-csharp\">(string first, string middle, string last) LookupName(long id) // tuple elements have names\n</code></pre>\n\n<pre><code class=\"language-csharp\">var names = LookupName(id);\nWriteLine($\"found {names.first} {names.last}.\");\n</code></pre>\n\n<h4 id=\"tuple-literals\">Tuple Literals</h4>\n\n<pre><code class=\"language-csharp\"> return (first: first, middle: middle, last: last); // named tuple elements in a literal\n</code></pre>\n\n<h4 id=\"tuple-deconstruction\">Tuple Deconstruction</h4>\n\n<pre><code class=\"language-csharp\">(var first, var middle, var last) = LookupName(id1);\nWriteLine($\"found {first} {last}.\");\n</code></pre>\n<p>or</p>\n<pre><code class=\"language-csharp\">var (first, middle, last) = LookupName(id1); // var outside\n</code></pre>\n<p>or</p>\n<pre><code class=\"language-csharp\">(first, middle, last) = LookupName(id2); // assign onto existing variables\n</code></pre>\n\n<h3 id=\"local-functions\">Local Functions</h3>\n\n<pre><code class=\"language-csharp\">public int Fibonacci(int x)\n{\n if (x &lt; 0) throw new ArgumentException(\"Less negativity please!\", nameof(x));\n return Fib(x).current;\n\n (int current, int previous) Fib(int i)\n {\n if (i == 0) return (1, 0);\n var (p, pp) = Fib(i - 1);\n return (p + pp, p);\n }\n}\n</code></pre>\n\n<h3 id=\"literal-improvements\">Literal Improvements</h3>\n\n<h4 id=\"digit-separator-inside-numbers-literals\">Digit Separator inside numbers literals</h4>\n\n<pre><code class=\"language-csharp\">var d = 123_456;\nvar x = 0xAB_CD_EF;\n</code></pre>\n\n<h4 id=\"binary-literals\">Binary Literals</h4>\n\n<pre><code class=\"language-csharp\">var b = 0b1010_1011_1100_1101_1110_1111;\n</code></pre>\n\n<h3 id=\"ref-returns-and-locals\">Ref Returns and Locals</h3>\n\n<pre><code class=\"language-csharp\">public ref int Find(int number, int[] numbers)\n{\n for (int i = 0; i &lt; numbers.Length; i++)\n {\n if (numbers[i] == number) \n {\n return ref numbers[i]; // return the storage location, not the value\n }\n }\n throw new IndexOutOfRangeException($\"{nameof(number)} not found\");\n}\n\nint[] array = { 1, 15, -39, 0, 7, 14, -12 };\nref int place = ref Find(7, array); // aliases 7's place in the array\nplace = 9; // replaces 7 with 9 in the array\nWriteLine(array[4]); // prints 9\n</code></pre>\n\n<h3 id=\"more-expression-bodied-members\">More Expression Bodied Members</h3>\n\n<p>C# 7.0 adds accessors, constructors and finalizers to the list of things that can have expression bodies:</p>\n\n<pre><code class=\"language-csharp\">class Person\n{\n private static ConcurrentDictionary&lt;int, string&gt; names = new ConcurrentDictionary&lt;int, string&gt;();\n private int id = GetId();\n\n public Person(string name) =&gt; names.TryAdd(id, name); // constructors\n ~Person() =&gt; names.TryRemove(id, out *); // destructors\n public string Name\n {\n get =&gt; names[id]; // getters\n set =&gt; names[id] = value; // setters\n }\n}\n</code></pre>\n\n<h3 id=\"throw-expressions\">Throw Expressions</h3>\n\n<pre><code class=\"language-csharp\">class Person\n{\n public string Name { get; }\n public Person(string name) =&gt; Name = name ?? throw new ArgumentNullException(name);\n public string GetFirstName()\n {\n var parts = Name.Split(\" \");\n return (parts.Length &gt; 0) ? parts[0] : throw new InvalidOperationException(\"No name!\");\n }\n public string GetLastName() =&gt; throw new NotImplementedException();\n}\n</code></pre>",
"intro_html": "",
"description_html": "<p>A quick overview of C# 7</p>",
"tags": null,
"updated": "2018-12-06"
},{
"id": "css-antialias",
"title": "CSS antialiasing",
"url": "/css-antialias",
"category": "CSS",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"antialias\">Antialias</h3>\n\n<pre><code class=\"language-css\">* {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n</code></pre>\n\n<h3 id=\"support\">Support</h3>\n\n<ul>\n <li>Firefox 25+ on OSX</li>\n <li>Webkits (Chrome, Safari, etc)</li>\n</ul>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://maxvoltar.com/archive/-webkit-font-smoothing\">maxvoltar.com</a></li>\n <li><a href=\"http://maximilianhoffmann.com/posts/better-font-rendering-on-osx\">maximilianhoffman.com</a></li>\n <li><a href=\"http://ilikekillnerds.com/2010/12/a-solution-to-stop-font-face-fonts-looking-bold-on-mac-browsers/\">ilikekillnerds.com</a></li>\n</ul>",
"intro_html": "<p>Here’s a 4-line snippet on how to get beautiful, antialiased text with CSS.</p>",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "css-flexbox",
"title": "CSS flexbox",
"url": "/css-flexbox",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"simple-example\">Simple example</h3>\n\n<pre><code class=\"language-css\">.container {\n display: flex;\n}\n</code></pre>\n\n<pre><code class=\"language-css\">.container &gt; div {\n flex: 1 1 auto;\n}\n</code></pre>\n\n<h3 id=\"container\">Container</h3>\n\n<pre class=\"-setup\"><code class=\"language-css\">.container {\n</code></pre>\n\n<pre><code class=\"language-css\"> display: flex;\n display: inline-flex;\n</code></pre>\n\n<pre><code class=\"language-css\"> flex-direction: row; /* ltr - default */\n flex-direction: row-reverse; /* rtl */\n flex-direction: column; /* top-bottom */\n flex-direction: column-reverse; /* bottom-top */\n</code></pre>\n\n<pre><code class=\"language-css\"> flex-wrap: nowrap; /* one-line */\n flex-wrap: wrap; /* multi-line */\n</code></pre>\n\n<pre><code class=\"language-css\"> align-items: flex-start; /* vertical-align to top */\n align-items: flex-end; /* vertical-align to bottom */\n align-items: center; /* vertical-align to center */\n align-items: stretch; /* same height on all (default) */\n</code></pre>\n\n<pre><code class=\"language-css\"> justify-content: flex-start; /* [xxx ] */\n justify-content: center; /* [ xxx ] */\n justify-content: flex-end; /* [ xxx] */\n justify-content: space-between; /* [x x x] */\n justify-content: space-around; /* [ x x x ] */\n justify-content: space-evenly; /* [ x x x ] */\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-css\">}\n</code></pre>\n\n<h3 id=\"child\">Child</h3>\n\n<pre class=\"-setup\"><code class=\"language-css\">.container &gt; div {\n</code></pre>\n\n<pre><code class=\"language-css\"> /* This: */\n flex: 1 0 auto;\n\n /* Is equivalent to this: */\n flex-grow: 1;\n flex-shrink: 0;\n flex-basis: auto;\n</code></pre>\n\n<pre><code class=\"language-css\"> order: 1;\n</code></pre>\n\n<pre><code class=\"language-css\"> align-self: flex-start; /* left */\n margin-left: auto; /* right */\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-css\">}\n</code></pre>\n\n<h2 id=\"tricks\">Tricks</h2>\n\n<h3 id=\"vertical-center\">Vertical center</h3>\n\n<pre><code class=\"language-css\">.container {\n display: flex;\n}\n\n.container &gt; div {\n width: 100px;\n height: 100px;\n margin: auto;\n}\n</code></pre>\n\n<h3 id=\"vertical-center-2\">Vertical center (2)</h3>\n\n<pre><code class=\"language-css\">.container {\n display: flex;\n align-items: center; /* vertical */\n justify-content: center; /* horizontal */\n}\n</code></pre>\n\n<h3 id=\"reordering\">Reordering</h3>\n\n<pre><code class=\"language-css\">.container &gt; .top {\n order: 1;\n}\n\n.container &gt; .bottom {\n order: 2;\n}\n</code></pre>\n\n<h3 id=\"mobile-layout\">Mobile layout</h3>\n\n<pre><code class=\"language-css\">.container {\n display: flex;\n flex-direction: column;\n}\n\n.container &gt; .top {\n flex: 0 0 100px;\n}\n\n.container &gt; .content {\n flex: 1 0 auto;\n}\n</code></pre>\n\n<p>A fixed-height top bar and a dynamic-height content area.</p>\n\n<h3 id=\"table-like\">Table-like</h3>\n\n<pre><code class=\"language-css\">.container {\n display: flex;\n}\n\n/* the 'px' values here are just suggested percentages */\n.container &gt; .checkbox { flex: 1 0 20px; }\n.container &gt; .subject { flex: 1 0 400px; }\n.container &gt; .date { flex: 1 0 120px; }\n</code></pre>\n\n<p>This creates columns that have different widths, but size accordingly according\nto the circumstances.</p>\n\n<h3 id=\"vertical\">Vertical</h3>\n\n<pre><code class=\"language-css\">.container {\n align-items: center;\n}\n</code></pre>\n\n<p>Vertically-center all items.</p>\n\n<h3 id=\"left-and-right\">Left and right</h3>\n\n<pre><code class=\"language-css\">.menu &gt; .left { align-self: flex-start; }\n.menu &gt; .right { align-self: flex-end; }\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\">MDN: Using CSS flexbox</a></li>\n <li><a href=\"http://www.sketchingwithcss.com/samplechapter/cheatsheet.html\">Ultimate flexbox cheatsheet</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-29"
},{
"id": "css-grid",
"title": "CSS Grid",
"url": "/css-grid",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"container\">Container</h3>\n\n<pre class=\"-setup\"><code class=\"language-css\">.grid-container {\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Display properties */\n display: grid;\n display: inline-grid;\n display: subgrid;\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Columns and rows */\n grid-template-columns: 1rem 2rem 1rem; /* Measurement units */\n grid-template-columns: 25% 50% 25%; /* Percentage units */\n grid-template-columns: 1rem auto 1rem 2fr; /* Fill remaining widths with auto or fr units */\n grid-template-columns: repeat(12, 1fr); /* Repeat columns without needing to write them */\n \n grid-template-rows: 1rem 10% auto repeat(5, 10px); /* Mix any group, same rules work for rows */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Automatic columns and rows */\n\n grid-auto-columns: 10px; /* No matter how many columns of content end up in the grid, each column will be this same width */\n grid-auto-rows: 1rem; /* No matter how many rows of content end up in the grid, each row will be this same height */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Areas */\n grid-template-areas:\n \"header header\"\n \"main aside\"\n \"footer footer\"; /* Grid-style */\n\n grid-template-areas: \"header header\" \"main aside\" \"footer footer\"; /* Inline-style */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Template shorthand */\n grid-template:\n \"header header\" auto\n \"main aside\" 100vh\n \"footer footer\" 10rem\n / 80% 20%;\n\n /* The above is the same as below long-hand */\n grid-template-columns: 80% 20%;\n grid-template-rows: auto 100vh 10rem;\n grid-template-areas:\n \"header header\"\n \"main aside\"\n \"footer footer\";\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Gaps */\n grid-row-gap: 1rem;\n grid-column-gap: 0.5rem; /* Define values separately */\n\n grid-gap: 1rem 0.5rem; /* Short-hand for row / column */\n grid-gap: 1rem; /* Gap in both dimensions */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Item justification (horizontal or column alignment) */\n justify-items: start; /* Align items to the left */\n justify-items: center; /* Align items centered within its column */\n justify-items: end; /* Align items to the right */\n justify-items: stretch; /* (default) Fills available area (horizontally) */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Item alignment (vertical or row alignment) */\n align-items: start; /* Align items to the top */\n align-items: center; /* Align items centered within its row */\n align-items: end; /* Align items to the bottom */\n align-items: stretch; /* (default) Fills available area (vertically) */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Place item shorthand */\n place-items: start stretch;\n\n /* The above is the same as below long-hand */\n align-items: start;\n justify-items: stretch;\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Content justification (horizontal or column alignment) */\n justify-content: start; /* Align content to the left */\n justify-content: center; /* Align content centered horizontally within the grid */\n justify-content: end; /* Align content to the right */\n justify-content: stretch; /* (default) Fills available area (horizontally) */\n\n justify-content: space-around; /* Chooses a space for both sides of the columns like a left and right margin */\n justify-content: space-between; /* Chooses a space to go between columns, no margins on outside of content */\n justify-content: space-evenly; /* Chooses a space that goes between all columns and edges consistently */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Content alignment (horizontal or column alignment) */\n align-content: start; /* Align content to the top */\n align-content: center; /* Align content centered vertically within the grid */\n align-content: end; /* Align content to the bottom */\n align-content: stretch; /* (default) Fills available area (vertically) */\n\n align-content: space-around; /* Chooses a space for the top and bottom of the rows like a top and bottom margin */\n align-content: space-between; /* Chooses a space to go between rows, no margins on outside of content */\n align-content: space-evenly; /* Chooses a space that goes between all rows and edges consistently */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Place item shorthand */\n place-content: center start;\n\n /* The above is the same as below long-hand */\n align-content: center;\n justify-content: start;\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Automatic grid positioning */\n\n grid-auto-flow: row; /* Left-to-right rows, then top-to-bottom*/\n grid-auto-flow: column; /* Top-to-bottom columns, then left-to-right */\n grid-auto-flow: dense; /* Responds with best-guess on left-to-right, top-to-bottom order with advanced layouts */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* There is one final shorthand for all container properties in one */\n\n /* Explicit grid columns, rows, and areas */\n grid:\n \"header header\" auto\n \"main aside\" 100vh\n \"footer footer\" 10rem\n / 80% 20%; /* You can include a template as the only value, which is equivalent to below */\n grid-template:\n \"header header\" auto\n \"main aside\" 100vh\n \"footer footer\" 10rem\n / 80% 20%; /* Which is again equivalent to below */\n grid-template-columns: 80% 20%;\n grid-template-rows: auto 100vh 10rem;\n grid-template-areas:\n \"header header\"\n \"main aside\"\n \"footer footer\";\n\n /* Automatic grid flows */\n grid: 1rem / auto-flow dense 1fr; /* You can include rows, a flow, and automatic columns, which is equivalent to below */\n grid-template-rows: 1rem;\n grid-auto-flow: dense;\n grid-auto-columns: 1fr;\n\n grid: auto-flow dense 1rem / repeat(10, 10%); /* Conversely, you can do the same thing with automatic rows, and defined columns */\n grid-auto-flow: dense;\n grid-auto-rows: 1rem;\n grid-template-columns: repeat(10, 10%);\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-css\">}\n</code></pre>\n\n<h3 id=\"child\">Child</h3>\n\n<pre class=\"-setup\"><code class=\"language-css\">.grid-child {\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Column position */\n grid-column-start: 1;\n grid-column-end: 2;\n\n grid-column: 1 / 2; /* Short hand */\n grid-column: 1 / span 2; /* Span 2 columns without explicitly defining an endpoint */\n grid-column: 1; /* Start in and occupy a single column */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Row position */\n grid-row-start: 2;\n grid-row-end: 4;\n\n grid-row: 2 / 4; /* Short hand */\n grid-row: 2 / span 3;/* Span 3 rows without explicitly defining an endpoint */\n grid-row: 1; /* Start in and occupy a single row */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Area positioning */\n grid-area: header; /* You can use a named grid area from the container */\n\n grid-area: 2 / 1 / 4 / 2; /* Or you can use positioning. This is equivalent to... */\n grid-row-start: 2;\n grid-column-start: 1;\n grid-row-end: 4;\n grid-column-end: 2;\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Self justification (horizontal or column alignment) */\n justify-self: start; /* Align item to the left */\n justify-self: center; /* Align item centered within its column */\n justify-self: end; /* Align item to the right */\n justify-self: stretch; /* (default) Fills available area (horizontally) */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Self alignment (vertical or row alignment) */\n align-self: start; /* Align item to the top */\n align-self: center; /* Align item centered within its row */\n align-self: end; /* Align item to the bottom */\n align-self: stretch; /* (default) Fills available area (vertically) */\n</code></pre>\n\n<pre><code class=\"language-css\"> /* Placement shorthand */\n place-self: start stretch;\n\n /* The above is the same as below long-hand */\n align-self: start;\n justify-self: stretch;\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-css\">}\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://grid.malven.co/\">GRID: A simple visual cheatsheet</a></li>\n <li><a href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\">CSS Tricks: A Complete Guide to Grid</a></li>\n <li><a href=\"https://caniuse.com/#feat=css-grid\">Browser support</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-12-06"
},{
"id": "css-system-font-stack",
"title": "CSS system fonts",
"url": "/css-system-font-stack",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"system-fonts\">System fonts</h3>\n\n<pre><code class=\"language-css\">font-family: -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\",\n \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n</code></pre>\n\n<p>This uses whatever system font is available. See: <a href=\"https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544\">System shock - Designing Medium</a> <em>(medium.com)</em></p>\n\n<h3 id=\"explanation\">Explanation</h3>\n\n<table>\n <thead>\n <tr>\n <th>Font</th>\n <th>OS</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-apple-system</code></td>\n <td>OS X (10.11+), iOS (9+)</td>\n </tr>\n <tr>\n <td><code>BlinkMacSystemFont</code></td>\n <td>OS X, Chrome</td>\n </tr>\n <tr>\n <td><code>Segoe UI</code></td>\n <td>Windows</td>\n </tr>\n <tr>\n <td><code>Roboto</code></td>\n <td>Android 4.0+</td>\n </tr>\n <tr>\n <td><code>Oxygen</code></td>\n <td>Linux, KDE</td>\n </tr>\n <tr>\n <td><code>Ubuntu</code></td>\n <td>Linux, Ubuntu</td>\n </tr>\n <tr>\n <td><code>Cantarell</code></td>\n <td>Linux, GNOME</td>\n </tr>\n <tr>\n <td><code>Fira Sans</code></td>\n <td>Firefox OS</td>\n </tr>\n <tr>\n <td><code>Droid Sans</code></td>\n <td>Android (until 3.2)</td>\n </tr>\n <tr>\n <td><code>Helvetica Neue</code></td>\n <td>OS X (10.9)</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": null
},{
"id": "css-tricks",
"title": "CSS tricks",
"url": "/css-tricks",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"heading-kerning-pairs-and-ligature\">Heading kerning pairs and ligature</h3>\n\n<pre><code class=\"language-css\">h1, h2, h3 {\n text-rendering: optimizeLegibility;\n}\n</code></pre>\n\n<h3 id=\"native-like-ios-scrolling\">Native-like iOS scrolling</h3>\n\n<pre><code class=\"language-css\">-webkit-overflow-scrolling: touch;\noverflow-y: auto;\n</code></pre>\n\n<h3 id=\"gradient-text\">Gradient text</h3>\n\n<pre><code class=\"language-css\">background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));\n-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\n</code></pre>\n\n<h3 id=\"text-stroke\">Text stroke</h3>\n\n<pre><code class=\"language-css\">-webkit-text-stroke: 3px black;\n</code></pre>\n\n<p>See: <a href=\"http://www.webkit.org/blog/85/introducing-text-stroke/\">Introducing text stroke</a></p>\n\n<h3 id=\"ios-scrolling-prevention\">iOS Scrolling prevention</h3>\n\n<pre><code class=\"language-css\">document.ontouchstart = (e) -&gt;\n $pane = $(e.target).closest('.scrollable&gt;div')\n if $pane.length is 0 or $pane[0].scrollHeight &lt;= $pane.innerHeight()\n e.preventDefault()\n</code></pre>\n\n<pre><code class=\"language-scss\">%ios-scrollable {\n &amp;, &gt;div {\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n }\n\n &gt;div {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n}\n</code></pre>\n\n<p>Relevant in iOS6, but maybe not anymore.</p>\n\n<h3 id=\"uiwebview-optimizations\">UIWebView optimizations</h3>\n\n<pre><code class=\"language-css\">* {\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n -webkit-user-select: none; /* disable text select */\n -webkit-touch-callout: none; /* disable callout, image save panel (popup) */\n -webkit-tap-highlight-color: transparent; /* \"turn off\" link highlight */\n}\n\na:focus {\n outline: 0; // Firefox (remove border on link click)\n}\n</code></pre>\n\n<p>See: <a href=\"http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/\">http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/</a></p>\n\n<p>See: <a href=\"http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/\">http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/</a></p>\n\n<h2 class=\"-three-column\" id=\"browser-hacks\">Browser hacks</h2>\n\n<h3 id=\"disclaimer\">Disclaimer</h3>\n\n<p>Not recommended, but here they are if you ever need them. Note that vendor\nprefixes may go away eventually.</p>\n\n<h3 id=\"mozilla-only\">Mozilla-only</h3>\n\n<pre><code class=\"language-css\">@-moz-document url-prefix() {\n .box { color: blue; }\n}\n</code></pre>\n\n<h3 id=\"webkit-only\">Webkit-only</h3>\n\n<pre><code class=\"language-css\">@media all and (-webkit-min-device-pixel-ratio: 1) {\n}\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "css",
"title": "CSS",
"url": "/css",
"category": "CSS",
"keywords": ["margin, padding, border","div, .class, #id, [attr]","font, background","display: block, inline, flex","Selectors","Properties"],
"content_html": "<h2 id=\"basics\">Basics</h2>\n\n<h3 class=\"-three-column\" id=\"selectors\">Selectors</h3>\n\n<pre><code class=\"language-css\">.class {\n font-weight: bold;\n}\n</code></pre>\n\n<table class=\"-setup\">\n <thead>\n <tr>\n <th>Selector</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>*</code></td>\n <td>All elements</td>\n </tr>\n <tr>\n <td><code>div</code></td>\n <td>Element</td>\n </tr>\n <tr>\n <td><code>.class</code></td>\n <td>Class</td>\n </tr>\n <tr>\n <td><code>#id</code></td>\n <td>ID</td>\n </tr>\n <tr>\n <td><code>[disabled]</code></td>\n <td>Attribute</td>\n </tr>\n <tr>\n <td><code>[role=\"dialog\"]</code></td>\n <td>Attribute</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"combinators\">Combinators</h3>\n\n<table>\n <thead>\n <tr>\n <th>Selector</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.parent .child</code></td>\n <td>Descendant</td>\n </tr>\n <tr>\n <td><code>.parent &gt; .child</code></td>\n <td>Direct descendant</td>\n </tr>\n <tr>\n <td><code>.child + .sibling</code></td>\n <td>Adjacent sibling</td>\n </tr>\n <tr>\n <td><code>.child ~ .sibling</code></td>\n <td>Far sibling</td>\n </tr>\n <tr>\n <td><code>.class1.class2</code></td>\n <td>Have both classes</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"attribute-selectors\">Attribute selectors</h3>\n\n<table>\n <thead>\n <tr>\n <th>Selector</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>[role=\"dialog\"]</code></td>\n <td><code>=</code> Exact</td>\n </tr>\n <tr>\n <td><code>[class~=\"box\"]</code></td>\n <td><code>~=</code> Has word</td>\n </tr>\n <tr>\n <td><code>[class|=\"box\"]</code></td>\n <td><code>|=</code> Exact or prefix (eg, <code>value-</code>)</td>\n </tr>\n <tr>\n <td><code>[href$=\".doc\"]</code></td>\n <td><code>$=</code> Ends in</td>\n </tr>\n <tr>\n <td><code>[href^=\"/index\"]</code></td>\n <td><code>^=</code> Begins with</td>\n </tr>\n <tr>\n <td><code>[class*=\"-is-\"]</code></td>\n <td><code>*=</code> Contains</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"pseudo-classes\">Pseudo-classes</h3>\n\n<table>\n <thead>\n <tr>\n <th>Selector</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:target</code></td>\n <td>eg, <code>h2#foo:target</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:disabled</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>:focus</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>:active</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:nth-child(3)</code></td>\n <td>3rd child</td>\n </tr>\n <tr>\n <td><code>:nth-child(3n+2)</code></td>\n <td>2nd child in groups of 3</td>\n </tr>\n <tr>\n <td><code>:nth-child(-n+4)</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:nth-last-child(2)</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>:nth-of-type(2)</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:checked</code></td>\n <td>Checked inputs</td>\n </tr>\n <tr>\n <td><code>:disabled</code></td>\n <td>Disabled elements</td>\n </tr>\n <tr>\n <td><code>:default</code></td>\n <td>Default element in a group</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:empty</code></td>\n <td>Elements without children</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"pseudo-class-variations\">Pseudo-class variations</h3>\n\n<table>\n <thead>\n <tr>\n <th>Selector</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:first-of-type</code></td>\n </tr>\n <tr>\n <td><code>:last-of-type</code></td>\n </tr>\n <tr>\n <td><code>:nth-of-type(2)</code></td>\n </tr>\n <tr>\n <td><code>:only-of-type</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:first-child</code></td>\n </tr>\n <tr>\n <td><code>:last-child</code></td>\n </tr>\n <tr>\n <td><code>:nth-child(2)</code></td>\n </tr>\n <tr>\n <td><code>:only-child</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-left-align\" id=\"fonts\">Fonts</h2>\n\n<h3 class=\"-left-reference\" id=\"properties\">Properties</h3>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>font-family:</code></td>\n <td><code>&lt;font&gt;, &lt;fontN&gt;</code></td>\n </tr>\n <tr>\n <td><code>font-size:</code></td>\n <td><code>&lt;size&gt;</code></td>\n </tr>\n <tr>\n <td><code>letter-spacing:</code></td>\n <td><code>&lt;size&gt;</code></td>\n </tr>\n <tr>\n <td><code>line-height:</code></td>\n <td><code>&lt;number&gt;</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>font-weight:</code></td>\n <td><code>bold</code> <code>normal</code></td>\n </tr>\n <tr>\n <td><code>font-style:</code></td>\n <td><code>italic</code> <code>normal</code></td>\n </tr>\n <tr>\n <td><code>text-decoration:</code></td>\n <td><code>underline</code> <code>none</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>text-align:</code></td>\n <td><code>left</code> <code>right</code> <code>center</code> <code>justify</code></td>\n </tr>\n <tr>\n <td><code>text-transform:</code></td>\n <td><code>capitalize</code> <code>uppercase</code> <code>lowercase</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-key-values\" id=\"shorthand\">Shorthand</h3>\n\n<table class=\"-prime\">\n <thead>\n <tr>\n <th> </th>\n <th>style</th>\n <th>weight</th>\n <th>size (required)</th>\n <th> </th>\n <th>line-height</th>\n <th>family</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>font:</code></td>\n <td><code>italic</code></td>\n <td><code>400</code></td>\n <td><code>14px</code></td>\n <td><code>/</code></td>\n <td><code>1.5</code></td>\n <td><code>sans-serif</code></td>\n </tr>\n <tr>\n <td> </td>\n <td>style</td>\n <td>weight</td>\n <td>size (required)</td>\n <td> </td>\n <td>line-height</td>\n <td>family (required)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-css-breakdown\" id=\"example\">Example</h3>\n\n<pre><code class=\"language-css\">font-family: Arial;\nfont-size: 12pt;\nline-height: 1.5;\nletter-spacing: 0.02em;\ncolor: #aa3322;\n</code></pre>\n\n<h3 id=\"case\">Case</h3>\n\n<pre><code class=\"language-css\">text-transform: capitalize; /* Hello */\ntext-transform: uppercase; /* HELLO */\ntext-transform: lowercase; /* hello */\n</code></pre>\n\n<h2 id=\"background\">Background</h2>\n\n<h3 class=\"-left-reference\" id=\"properties-1\">Properties</h3>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>background:</code></td>\n <td><em>(Shorthand)</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>background-color:</code></td>\n <td><code>&lt;color&gt;</code></td>\n </tr>\n <tr>\n <td><code>background-image:</code></td>\n <td><code>url(...)</code></td>\n </tr>\n <tr>\n <td><code>background-position:</code></td>\n <td><code>left/center/right</code> <code>top/center/bottom</code></td>\n </tr>\n <tr>\n <td><code>background-size:</code></td>\n <td><code>cover</code> <code>X Y</code></td>\n </tr>\n <tr>\n <td><code>background-clip:</code></td>\n <td><code>border-box</code> <code>padding-box</code> <code>content-box</code></td>\n </tr>\n <tr>\n <td><code>background-repeat:</code></td>\n <td><code>no-repeat</code> <code>repeat-x</code> <code>repeat-y</code></td>\n </tr>\n <tr>\n <td><code>background-attachment:</code></td>\n <td><code>scroll</code> <code>fixed</code> <code>local</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-key-values\" id=\"shorthand-1\">Shorthand</h3>\n\n<table>\n <thead>\n <tr>\n <th> </th>\n <th>color</th>\n <th>image</th>\n <th>positionX</th>\n <th>positionY</th>\n <th> </th>\n <th>size</th>\n <th>repeat</th>\n <th>attachment</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>background:</code></td>\n <td><code>#ff0</code></td>\n <td><code>url(bg.jpg)</code></td>\n <td><code>left</code></td>\n <td><code>top</code></td>\n <td><code>/</code></td>\n <td><code>100px</code> <code>auto</code></td>\n <td><code>no-repeat</code></td>\n <td><code>fixed;</code></td>\n </tr>\n <tr>\n <td><code>background:</code></td>\n <td><code>#abc</code></td>\n <td><code>url(bg.png)</code></td>\n <td><code>center</code></td>\n <td><code>center</code></td>\n <td><code>/</code></td>\n <td><code>cover</code></td>\n <td><code>repeat-x</code></td>\n <td><code>local;</code></td>\n </tr>\n <tr>\n <td> </td>\n <td>color</td>\n <td>image</td>\n <td>positionX</td>\n <td>positionY</td>\n <td> </td>\n <td>size</td>\n <td>repeat</td>\n <td>attachment</td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-css-breakdown\" id=\"multiple-backgrounds\">Multiple backgrounds</h3>\n\n<pre><code class=\"language-css\">background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),\n url('background.jpg') center center / cover, #333;\n</code></pre>\n\n<h2 id=\"animation\">Animation</h2>\n\n<h3 class=\"-left-reference\" id=\"properties-2\">Properties</h3>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Value</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>animation:</code></td>\n <td><em>(shorthand)</em></td>\n </tr>\n <tr>\n <td><code>animation-name:</code></td>\n <td><code>&lt;name&gt;</code></td>\n </tr>\n <tr>\n <td><code>animation-duration:</code></td>\n <td><code>&lt;time&gt;ms</code></td>\n </tr>\n <tr>\n <td><code>animation-timing-function:</code></td>\n <td><code>ease</code> <code>linear</code> <code>ease-in</code> <code>ease-out</code> <code>ease-in-out</code></td>\n </tr>\n <tr>\n <td><code>animation-delay:</code></td>\n <td><code>&lt;time&gt;ms</code></td>\n </tr>\n <tr>\n <td><code>animation-iteration-count:</code></td>\n <td><code>infinite</code> <code>&lt;number&gt;</code></td>\n </tr>\n <tr>\n <td><code>animation-direction:</code></td>\n <td><code>normal</code> <code>reverse</code> <code>alternate</code> <code>alternate-reverse</code></td>\n </tr>\n <tr>\n <td><code>animation-fill-mode:</code></td>\n <td><code>none</code> <code>forwards</code> <code>backwards</code> <code>both</code> <code>initial</code> <code>inherit</code></td>\n </tr>\n <tr>\n <td><code>animation-play-state:</code></td>\n <td><code>normal</code> <code>reverse</code> <code>alternate</code> <code>alternate-reverse</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-key-values\" id=\"shorthand-2\">Shorthand</h3>\n\n<table>\n <thead>\n <tr>\n <th> </th>\n <th>name</th>\n <th>duration</th>\n <th>timing-function</th>\n <th>delay</th>\n <th>count</th>\n <th>direction</th>\n <th>fill-mode</th>\n <th>play-state</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>animation:</code></td>\n <td><code>bounce</code></td>\n <td><code>300ms</code></td>\n <td><code>linear</code></td>\n <td><code>100ms</code></td>\n <td><code>infinite</code></td>\n <td><code>alternate-reverse</code></td>\n <td><code>both</code></td>\n <td><code>reverse</code></td>\n </tr>\n <tr>\n <td> </td>\n <td>name</td>\n <td>duration</td>\n <td>timing-function</td>\n <td>delay</td>\n <td>count</td>\n <td>direction</td>\n <td>fill-mode</td>\n <td>play-state</td>\n </tr>\n </tbody>\n</table>\n\n<h3 class=\"-css-breakdown\" id=\"example-1\">Example</h3>\n\n<pre><code class=\"language-css\">animation: bounce 300ms linear 0s infinite normal;\nanimation: bounce 300ms linear infinite;\nanimation: bounce 300ms linear infinite alternate-reverse;\nanimation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;\n</code></pre>\n\n<h3 id=\"event\">Event</h3>\n\n<pre><code class=\"language-js\">.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "cssnext",
"title": "cssnext",
"url": "/cssnext",
"category": "CSS",
"keywords": null,
"content_html": "<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-scss\">:root {\n --text-color: #30333a;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">body {\n background: var(--text-color);\n background: color(var(--text-color) shade(30%));\n}\n</code></pre>\n\n<h3 id=\"colors\">Colors</h3>\n\n<pre><code class=\"language-scss\">a {\n /* Adjustments */\n color: color(red alpha(-10%));\n color: color(red tint(-10%)); /* lighten */\n color: color(red shade(-10%)); /* darken */\n\n /* Absolute */\n color: color(red alpha(50%));\n color: color(red hue(225));\n color: color(red saturation(100%));\n color: color(red lightness(50%));\n\n color: gray(33); /* rgb(33, 33, 33) */\n color: gray(33%); /* rgb(84, 84, 84) */\n color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */\n color: #0000ff80; /* rgba(0, 0, 255, 0.5) */\n\n color: hwb(90, 0%, 0%, 0.5); /* like hsl() but easier for humans */\n color: hsl(90deg 90% 70%); /* hsl(180, 90%, 70%) -- supports deg */\n color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */\n color: rgb(30 60 90 / 30%); /* rgba(30, 60, 90, 0.3) */\n}\n</code></pre>\n\n<p>Also see <a href=\"http://colorme.io/\">colorme.io</a>.</p>\n\n<h3 id=\"mixins\">Mixins</h3>\n\n<pre><code class=\"language-scss\">:root {\n --centered: {\n display: flex;\n align-items: center;\n justify-content: center;\n };\n}\n\n.centered {\n @apply --centered;\n}\n</code></pre>\n\n<h2 id=\"selectors\">Selectors</h2>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre><code class=\"language-scss\">.class-name {\n &amp; .nesting { ··· } /* direct nesting starts with &amp; */\n @nest span &amp; { ··· } /* complex nesting */\n @media (min-width: 30em) { ··· }\n}\n</code></pre>\n\n<h3 id=\"custom-selectors\">Custom selectors</h3>\n\n<pre><code class=\"language-scss\">@custom-selector :--button input[type='submit'], input[type='button'];\n@custom-selector :--enter :hover, :focus;\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-scss\">:--button { ··· }\n:--button:--enter { ··· }\n</code></pre>\n\n<h3 id=\"future-selectors\">Future selectors</h3>\n\n<pre><code class=\"language-scss\">:any-link { ··· } /* :link, :visited */\np:matches(.a, .b) { ··· } /* p.a, p.b */\np:not(.a, .b) { ··· } /* p:not(.a), p:not(.b) */\na::before { ··· } /* a:before -- for IE compatibility */\n[frame=hsides i] { ··· } /* [frame=hsides] -- but case insensitive */\n</code></pre>\n\n<h2 id=\"media-queries\">Media queries</h2>\n\n<h3 id=\"custom-media-queries\">Custom media queries</h3>\n\n<pre><code class=\"language-scss\">@custom-media --viewport-medium (width &lt;= 50rem);\n</code></pre>\n\n<pre><code class=\"language-scss\">@media (--viewport-medium) { ··· }\n</code></pre>\n\n<h3 id=\"media-query-ranges\">Media query ranges</h3>\n\n<pre><code class=\"language-scss\">@media (width &gt;= 500px) { ··· } /* (min-width: 500px) */\n</code></pre>\n\n<h2 id=\"properties\">Properties</h2>\n\n<h3 id=\"property-fallbacks\">Property fallbacks</h3>\n\n<pre><code class=\"language-scss\">/* font-feature-settings fallback */\nh2 { font-variant-caps: small-caps; }\ntable { font-variant-numeric: lining-nums; }\n</code></pre>\n\n<pre><code class=\"language-scss\">div { filter: blur(4px); } /* svg filter fallback */\ndiv { overflow-wrap: break-word; } /* word-wrap fallback */\n</code></pre>\n\n<h3 id=\"autoprefixing\">Autoprefixing</h3>\n\n<pre><code class=\"language-scss\">div {\n display: flex;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">/*\n * display: -webkit-box;\n * display: -ms-flexbox;\n * display: flex;\n */\n</code></pre>\n\n<h3 id=\"reset\">Reset</h3>\n\n<pre><code class=\"language-scss\">div {\n all: initial;\n}\n</code></pre>\n\n<p>Sets animation, background, margin, padding, and so on.</p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li>Based on cssnext 2.9.0.</li>\n <li><a href=\"http://cssnext.io/features/\">http://cssnext.io/features/</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-08-30"
},{
"id": "curl",
"title": "Curl",
"url": "/curl",
"category": "CLI",
"keywords": null,
"content_html": "<h2 id=\"options\">Options</h2>\n\n<h3 id=\"options-1\">Options</h3>\n\n<pre><code class=\"language-bash\">-o &lt;file&gt; # --output: write to file\n-u user:pass # --user: Authentication\n</code></pre>\n\n<pre><code class=\"language-bash\">-v # --verbose\n-vv # Even more verbose\n-s # --silent\n</code></pre>\n\n<pre><code class=\"language-bash\">-i # --include: Include the HTTP-header in the output\n-I # --head: headers only\n</code></pre>\n\n<h3 id=\"request\">Request</h3>\n\n<pre><code class=\"language-bash\">-X POST # --request\n-L # follow link if page redirects \n</code></pre>\n\n<h3 id=\"data\">Data</h3>\n\n<pre><code class=\"language-bash\">-d 'data' # --data: HTTP post data, URL encoded (eg, status=\"Hello\")\n-d @file # --data via file\n-G # --get: send -d data via get\n</code></pre>\n\n<h3 id=\"headers\">Headers</h3>\n\n<pre><code class=\"language-bash\">-A &lt;str&gt; # --user-agent\n-b name=val # --cookie\n-b FILE # --cookie\n-H \"X-Foo: y\" # --header\n--compressed # use deflate/gzip\n</code></pre>\n\n<h3 id=\"ssl\">SSL</h3>\n\n<pre><code class=\"language-bash\"> --cacert &lt;file&gt;\n --capath &lt;dir&gt;\n</code></pre>\n\n<pre><code class=\"language-bash\">-E, --cert &lt;cert&gt; # --cert: Client cert file\n --cert-type # der/pem/eng\n-k, --insecure # for self-signed certs\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"examples\">Examples</h2>\n\n<pre><code class=\"language-bash\"># Post data:\ncurl -d password=x http://x.com/y\n</code></pre>\n\n<pre><code class=\"language-bash\"># Auth/data:\ncurl -u user:pass -d status=\"Hello\" http://twitter.com/statuses/update.xml\n</code></pre>\n\n<pre><code class=\"language-bash\"># multipart file upload\ncurl -v -include --form key1=value1 --form upload=@localfilename URL\n</code></pre>\n\n<pre><code class=\"language-bash\"># Use Curl to Check if a remote resource is available\n# details: https://matthewsetter.com/check-if-file-is-available-with-curl/\ncurl -o /dev/null --silent -Iw \"%{http_code}\" https://example.com/my.remote.tarball.gz\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "datetime",
"title": "Date & time formats",
"url": "/datetime",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"common-time-formats\">Common time formats</h2>\n\n<ul>\n <li><a href=\"./strftime\">UNIX strftime</a> - Used by Ruby, <code>date</code>, and more</li>\n <li><a href=\"./moment#formatting\">Moment.js</a> - Used by Moment.js, date-fns, and more</li>\n</ul>\n\n<h2 class=\"-three-column\" id=\"strftime-format\">strftime format</h2>\n\n<h3 id=\"presets\">Presets</h3>\n\n<h4 id=\"date\">Date</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%m/%d/%Y</code></td>\n <td><code>06/05/2013</code></td>\n </tr>\n <tr>\n <td><code>%A, %B %e, %Y</code></td>\n <td><code>Sunday, June 5, 2013</code></td>\n </tr>\n <tr>\n <td><code>%b %e %a</code></td>\n <td><code>Jun 5 Sun</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"time\">Time</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%H:%M</code></td>\n <td><code>23:05</code></td>\n </tr>\n <tr>\n <td><code>%I:%M %p</code></td>\n <td><code>11:05 PM</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Used by Ruby, UNIX <code>date</code>, and many more.</p>\n\n<h3 id=\"date-1\">Date</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%a</code></td>\n <td><code>Sun</code></td>\n <td><strong>Weekday</strong></td>\n </tr>\n <tr>\n <td><code>%A</code></td>\n <td><code>Sunday</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>%w</code></td>\n <td><code>0</code>..<code>6</code> <em>(Sunday is 0)</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%y</code></td>\n <td><code>13</code></td>\n <td><strong>Year</strong></td>\n </tr>\n <tr>\n <td><code>%Y</code></td>\n <td><code>2013</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%b</code></td>\n <td><code>Jan</code></td>\n <td><strong>Month</strong></td>\n </tr>\n <tr>\n <td><code>%B</code></td>\n <td><code>January</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>%m</code></td>\n <td><code>01</code>..<code>12</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%d</code></td>\n <td><code>01</code>..<code>31</code></td>\n <td><strong>Day</strong></td>\n </tr>\n <tr>\n <td><code>%e</code></td>\n <td><code>1</code>..<code>31</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"time-1\">Time</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%l</code></td>\n <td><code>1</code></td>\n <td>Hour</td>\n </tr>\n <tr>\n <td><code>%H</code></td>\n <td><code>00</code>..<code>23</code></td>\n <td>24h Hour</td>\n </tr>\n <tr>\n <td><code>%I</code></td>\n <td><code>01</code>..<code>12</code></td>\n <td>12h Hour</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%M</code></td>\n <td><code>00</code>..<code>59</code></td>\n <td>Minute</td>\n </tr>\n <tr>\n <td><code>%S</code></td>\n <td><code>00</code>..<code>60</code></td>\n <td>Second</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%p</code></td>\n <td><code>AM</code></td>\n <td>AM or PM</td>\n </tr>\n <tr>\n <td><code>%Z</code></td>\n <td><code>+08</code></td>\n <td>Time zone</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%j</code></td>\n <td><code>001</code>..<code>366</code></td>\n <td>Day of the year</td>\n </tr>\n <tr>\n <td><code>%%</code></td>\n <td><code>%</code></td>\n <td>Literal % character</td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-three-column\" id=\"momentjs-format\">Moment.js format</h2>\n\n<h3 id=\"examples\">Examples</h3>\n\n<h4 id=\"date-2\">Date</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>YYYY-MM-DD</code></td>\n <td><code>2014-01-01</code></td>\n </tr>\n <tr>\n <td><code>dddd, MMMM Do YYYY</code></td>\n <td><code>Friday, May 16th 2014</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"time-2\">Time</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>hh:mm a</code></td>\n <td><code>12:30 pm</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Used by <a href=\"http://momentjs.com/docs/#/displaying/\">Moment.js</a> and <a href=\"https://date-fns.org/v1.28.5/docs/format\">date-fns/format</a>. Similar to Java <a href=\"https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html\">SimpleDateFormat</a>.</p>\n\n<h3 id=\"date-3\">Date</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d</code></td>\n <td><code>0</code>..<code>6</code></td>\n <td><strong>Weekday</strong></td>\n </tr>\n <tr>\n <td><code>dd</code></td>\n <td><code>Su</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ddd</code></td>\n <td><code>Sun</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>dddd</code></td>\n <td><code>Sunday</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>YY</code></td>\n <td><code>13</code></td>\n <td><strong>Year</strong></td>\n </tr>\n <tr>\n <td><code>YYYY</code></td>\n <td><code>2013</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>M</code></td>\n <td><code>1</code>..<code>12</code> <em>(Jan is 1)</em></td>\n <td><strong>Month</strong></td>\n </tr>\n <tr>\n <td><code>Mo</code></td>\n <td><code>1st</code>..<code>12th</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MM</code></td>\n <td><code>01</code>..<code>12</code> <em>(Jan is 1)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MMM</code></td>\n <td><code>Jan</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MMMM</code></td>\n <td><code>January</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Q</code></td>\n <td><code>1</code>..<code>4</code></td>\n <td><strong>Quarter</strong></td>\n </tr>\n <tr>\n <td><code>Qo</code></td>\n <td><code>1st</code>..<code>4th</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>D</code></td>\n <td><code>1</code>..<code>31</code></td>\n <td><strong>Day</strong></td>\n </tr>\n <tr>\n <td><code>Do</code></td>\n <td><code>1st</code>..<code>31st</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>DD</code></td>\n <td><code>01</code>..<code>31</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>DDD</code></td>\n <td><code>1</code>..<code>365</code></td>\n <td><strong>Day of year</strong></td>\n </tr>\n <tr>\n <td><code>DDDo</code></td>\n <td><code>1st</code>..<code>365th</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>DDDD</code></td>\n <td><code>001</code>..<code>365</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>w</code></td>\n <td><code>1</code>..<code>53</code></td>\n <td><strong>Week of year</strong></td>\n </tr>\n <tr>\n <td><code>wo</code></td>\n <td><code>1st</code>..<code>53rd</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ww</code></td>\n <td><code>01</code>..<code>53</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"time-3\">Time</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>H</code></td>\n <td><code>0</code>..<code>23</code></td>\n <td><strong>24h hour</strong></td>\n </tr>\n <tr>\n <td><code>HH</code></td>\n <td><code>00</code>..<code>23</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>h</code></td>\n <td><code>1</code>..<code>12</code></td>\n <td><strong>12h hour</strong></td>\n </tr>\n <tr>\n <td><code>hh</code></td>\n <td><code>01</code>..<code>12</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>m</code></td>\n <td><code>0</code>..<code>59</code></td>\n <td><strong>Minutes</strong></td>\n </tr>\n <tr>\n <td><code>mm</code></td>\n <td><code>00</code>..<code>59</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>s</code></td>\n <td><code>0</code>..<code>59</code></td>\n <td><strong>Seconds</strong></td>\n </tr>\n <tr>\n <td><code>ss</code></td>\n <td><code>00</code>..<code>59</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>a</code></td>\n <td><code>am</code></td>\n <td><strong>AM/PM</strong></td>\n </tr>\n <tr>\n <td><code>A</code></td>\n <td><code>AM</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Z</code></td>\n <td><code>+07:00</code></td>\n <td><strong>Timezone offset</strong></td>\n </tr>\n <tr>\n <td><code>ZZ</code></td>\n <td><code>+0730</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>S</code></td>\n <td><code>0</code>..<code>9</code></td>\n <td>Deciseconds</td>\n </tr>\n <tr>\n <td><code>SS</code></td>\n <td><code>00</code>..<code>99</code></td>\n <td>Centiseconds</td>\n </tr>\n <tr>\n <td><code>SSS</code></td>\n <td><code>000</code>..<code>999</code></td>\n <td>Milliseconds</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>X</code></td>\n <td> </td>\n <td>Unix timestamp</td>\n </tr>\n <tr>\n <td><code>x</code></td>\n <td> </td>\n <td>Millisecond Unix timestamp</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"presets-1\">Presets</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>LT</code></td>\n <td><code>8:30 PM</code></td>\n </tr>\n <tr>\n <td><code>LTS</code></td>\n <td><code>8:30:25 PM</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LL</code></td>\n <td><code>August 2 1985</code></td>\n </tr>\n <tr>\n <td><code>ll</code></td>\n <td><code>Aug 2 1985</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LLL</code></td>\n <td><code>August 2 1985 08:30 PM</code></td>\n </tr>\n <tr>\n <td><code>lll</code></td>\n <td><code>Aug 2 1985 08:30 PM</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LLLL</code></td>\n <td><code>Thursday, August 2 1985 08:30 PM</code></td>\n </tr>\n <tr>\n <td><code>llll</code></td>\n <td><code>Thu, Aug 2 1985 08:30 PM</code></td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-04"
},{
"id": "deis",
"title": "Deis",
"url": "/deis",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"deploy\">Deploy</h3>\n\n<pre><code>deis create app-name\ngit push deis master\ndeis open\n</code></pre>\n\n<h3 id=\"deploy-dockerfile\">Deploy dockerfile</h3>\n\n<pre><code class=\"language-sh\">$ deis create app-name\n$ deis pull redis:latest\n Creating build... done, v2\n# default process type is `cmd`\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n\n<pre><code>deis config:list\ndeis config:set FOO=bar BAZ=foo\ndeis config:unset FOO\ndeis config:pull # writes to .env\ndeis config:push # reads from .env\n</code></pre>\n\n<h3 id=\"managing-instances\">Managing instances</h3>\n\n<pre><code>deis logs\ndeis run rake db:migrate\ndeis ps\n</code></pre>\n\n<h3 id=\"custom-domains\">Custom domains</h3>\n\n<pre><code>deis domains:list\ndeis domains:add www.myapp.com\ndeis domains:remove www.myapp.com\n</code></pre>\n\n<h3 id=\"limits\">Limits</h3>\n\n<pre><code class=\"language-sh\">deis limits:set web=1G\ndeis limits:set web=1024 --cpu\n# (`web` is a process type)\n</code></pre>\n\n<h3 id=\"sharing\">Sharing</h3>\n\n<pre><code>deis perms:create otheruser\n</code></pre>\n\n<h3 id=\"ssl\">SSL</h3>\n\n<pre><code>deis certs:add server.crt server.key\n</code></pre>\n\n<p>See: <a href=\"http://docs.deis.io/en/latest/using_deis/app-ssl/\">SSL</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "deku",
"title": "Deku v2",
"url": "/deku",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"components\">Components</h2>\n\n<pre><code class=\"language-js\">/** @jsx element */\nimport { element } from 'deku'\n\nfunction render ({ props, children, context, path }) {\n // props = properties object\n // children = children array\n // path = path to current component (like 0.1.5.2)\n // context = common properties in all components\n return (\n &lt;div class='App' hidden={props.hidden} color={context.theme.color}&gt;\n {children}\n &lt;/div&gt;\n }\n}\n\nfunction onCreate ({ props, dispatch, path }) { ... }\nfunction onUpdate ({ props, dispatch, path }) { ... }\nfunction onRemove ({ props, dispatch, path }) { ... }\n// actually { children, props, path, context }\n\nexport default { render, onCreate, onRemove }\n</code></pre>\n\n<h2 id=\"rendering\">Rendering</h2>\n\n<pre><code class=\"language-js\">import { createStore } from 'redux'\nimport { dom, element } from 'deku'\n\n// Create a Redux store to handle all UI actions and side-effects\nlet store = createStore(reducer)\n\n// Create a renderer that can turn vnodes into real DOM elements\nlet render = createRenderer(document.body, store.dispatch)\n\n// Update the page and add redux state to the context\nrender(\n &lt;MyButton&gt;Hello World!&lt;/MyButton&gt;,\n store.getState()\n )\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "deku@1",
"title": "Deku v1",
"url": "/deku@1",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<p>This is for Deku v1. See <a href=\"./deku\">deku</a> for a more updated cheatsheet.</p>\n\n<pre><code class=\"language-js\">/** @jsx element */\nimport element from 'virtual-element' // replacement for React.createElement\nimport {render, tree} from 'deku'\n\nvar app = &lt;div class='my-app'&gt;Hello World!&lt;/div&gt;\n\nrender(tree(app), document.body)\n</code></pre>\n\n<h2 id=\"components\">Components</h2>\n\n<pre><code class=\"language-js\">Button = {\n render () { return &lt;button&gt;Submit&lt;/button&gt; }\n}\n\nApp = {\n render () { return &lt;div&gt;&lt;Button /&gt;&lt;/div&gt; }\n}\n\nrender(tree(&lt;App /&gt;), document.body)\nrender(tree(element(App)), document.body)\n</code></pre>\n\n<h2 id=\"component-propsstate\">Component props/state</h2>\n\n<pre><code class=\"language-js\">App = {\n render ({ props, state }) {\n return &lt;div&gt;{ /*...use state.store here*/ }&lt;/div&gt;\n }\n\n initialState (props) {\n return { store: store.getState() }\n },\n\n afterMount (comp, el, setState) {\n store.subscribe(() =&gt; setState({ store: store.getState() }))\n }\n}\n\nrender(tree(&lt;App /&gt;), document.body)\n</code></pre>\n\n<h2 id=\"events\">Events</h2>\n\n<pre><code class=\"language-js\">&lt;a onClick={onClick}&gt;{props.text}&lt;/a&gt;\n</code></pre>\n\n<h2 id=\"magic-virtual-element\">Magic virtual element</h2>\n<p>Use <a href=\"https://github.com/dekujs/magic-virtual-element\">magic-virtual-element</a> to enable nice classnames.</p>\n\n<pre><code>import element from 'magic-virtual-element'\n&lt;div style={style} class={[ 'button', '-active' ]}&gt;\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<pre><code>name = 'MyComponent'\n\n// Defaults\ninitialState (props) {...} // return initial state\ndefaultProps = { hi: 'hello' }\n\n// Render\nrender ({props, state}, setState) {...}\n\n// Lifecycle\nbeforeUpdate ({props, state, id}, nextProps, nextState) {}\nafterRender ({props, state, id}, el) {}\nafterUpdate ({props, state, id}, prevProps, prevState, setState) {}\nafterMount ({props, state, id}, el, setState) {}\nbeforeUnmount ({props, state, id}, el) {}\n</code></pre>\n\n<p>See: <a href=\"https://www.npmjs.com/package/deku\">https://www.npmjs.com/package/deku</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "devise",
"title": "Devise",
"url": "/devise",
"category": "Others",
"keywords": null,
"content_html": "<p><a href=\"https://github.com/plataformatec/devise\">Devise</a> is a flexible authentication \ngem.</p>\n\n<h2 id=\"installation\">Installation</h2>\n\n<p>Rails 3: Add the following to your Gemfile</p>\n\n<pre><code>gem \"devise\"\ngem \"hpricot\"\ngem \"ruby_parser\"\n</code></pre>\n\n<p>Install devise in your project</p>\n\n<pre><code>$ rails generate devise:install\n</code></pre>\n\n<p>Generate devise for your model</p>\n\n<pre><code>$ rails generate devise MODEL\n$ rake db:migrate\n</code></pre>\n\n<p>(Optional) Generate devise views</p>\n\n<pre><code>$ rails generate devise:views\n</code></pre>\n\n<h2 id=\"helpers\">Helpers</h2>\n\n<pre><code>user_signed_in?\ncurrent_user\nuser_session\ndestroy_user_session_path (Logout)\nnew_user_session_path (Login)\nedit_user_registration_path (Edit registration)\nnew_user_registration_path (Register new user)\n</code></pre>\n\n<h2 id=\"controller-stuff\">Controller stuff</h2>\n\n<pre><code>before_filter :authenticate_user!\n</code></pre>\n\n<h2 id=\"model\">Model</h2>\n\n<h3 id=\"model-options\">Model options</h3>\n\n<pre><code>class User &lt; ActiveRecord::Base\n devise :database_authenticatable,\n :registerable,\n :confirmable,\n :recoverable,\n :rememberable,\n :trackable,\n :validatable\nend\n</code></pre>\n\n<h3 id=\"migration-helpers\">Migration helpers</h3>\n\n<pre><code>create_table :users do |t|\n t.database_authenticatable\n t.confirmable\n t.recoverable\n t.rememberable\n t.trackable\n t.timestamps\nend\n</code></pre>\n\n<h2 id=\"routing\">Routing</h2>\n\n<h3 id=\"authenticated-and-unauthenticated-routes\">Authenticated and unauthenticated routes</h3>\n\n<pre><code>unauthenticated do\n root :to =&gt; 'home#index'\nend\n\nauthenticated do\n root :to =&gt; 'dashboard#index'\nend\n</code></pre>\n\n<h3 id=\"as\">As</h3>\n<pre><code>as :user do\n get 'sign_in', :to =&gt; 'devise/sessions#new'\nend\n</code></pre>\n\n<h3 id=\"devise_for-magic\">Devise_for magic</h3>\n\n<pre><code>devise_for :users\n\n # Session routes for Authenticatable (default)\n new_user_session GET /users/sign_in {:controller=&gt;\"devise/sessions\", :action=&gt;\"new\"}\n user_session POST /users/sign_in {:controller=&gt;\"devise/sessions\", :action=&gt;\"create\"}\n destroy_user_session GET /users/sign_out {:controller=&gt;\"devise/sessions\", :action=&gt;\"destroy\"}\n \n # Password routes for Recoverable, if User model has :recoverable configured\n new_user_password GET /users/password/new(.:format) {:controller=&gt;\"devise/passwords\", :action=&gt;\"new\"}\n edit_user_password GET /users/password/edit(.:format) {:controller=&gt;\"devise/passwords\", :action=&gt;\"edit\"}\n user_password PUT /users/password(.:format) {:controller=&gt;\"devise/passwords\", :action=&gt;\"update\"}\n POST /users/password(.:format) {:controller=&gt;\"devise/passwords\", :action=&gt;\"create\"}\n \n # Confirmation routes for Confirmable, if User model has :confirmable configured\n new_user_confirmation GET /users/confirmation/new(.:format) {:controller=&gt;\"devise/confirmations\", :action=&gt;\"new\"}\n user_confirmation GET /users/confirmation(.:format) {:controller=&gt;\"devise/confirmations\", :action=&gt;\"show\"}\n POST /users/confirmation(.:format) {:controller=&gt;\"devise/confirmations\", :action=&gt;\"create\"}\n</code></pre>\n\n<h3 id=\"customizing-devise_for\">Customizing devise_for</h3>\n\n<pre><code>devise_for :users,\n :path =&gt; \"usuarios\",\n :path_names =&gt; {\n :sign_in =&gt; 'login',\n :sign_out =&gt; 'logout',\n :password =&gt; 'secret',\n :confirmation =&gt; 'verification',\n :unlock =&gt; 'unblock',\n :registration =&gt; 'register',\n :sign_up =&gt; 'cmon_let_me_in' }\n</code></pre>\n\n<h2 id=\"test-helpers\">Test helpers</h2>\n\n<pre><code>include Devise::TestHelpers\nhttps://github.com/plataformatec/devise/blob/1094ba65aac1d37713f2cba71f9edad76b5ca274/lib/devise/test_helpers.rb\n\nsign_in @user\nsign_out @user\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "divshot",
"title": "Divshot",
"url": "/divshot",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"install-divshot-cli\">Install divshot-cli</h3>\n\n<pre><code>$ npm install -g divshot-cli\n$ divshot login\n</code></pre>\n\n<h3 id=\"create-divshotjson\">Create divshot.json</h3>\n\n<pre><code class=\"language-json\">{\n \"name\": \"yourapp\",\n \"root\": \"./app\"\n}\n</code></pre>\n\n<h3 id=\"push-your-app\">Push your app</h3>\n\n<pre><code>$ divshot push\n</code></pre>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>See <a href=\"https://docs.divshot.com/guides/configuration\">configuration reference</a> and <a href=\"https://docs.divshot.com/guides/routing\">routing guide</a>.</p>\n\n<pre><code class=\"language-json\">{\n \"name\": \"yourapp\",\n \"root\": \"./app\",\n \"clean_urls\": true,\n \"clean_urls\": [\"/app/**\", \"/!components/**\"],,\n \"error_page\": \"error.html\",\n \"exclude\": [ \"Gruntfile.js\" ],\n \"cache_control\": {},\n \"routes\": {\n \"/*.html\": \"index.html\",\n \"/app/**/*.html\": \"app.html\",\n \"**\": \"index.html\"\n },\n \"redirects\": {\n \"/old/:segment/path\": \"/new/path/:segment\",\n \"/some/old/path\": {\n \"status\": 302,\n \"url\": \"/some/new/path\"\n }\n },\n \"headers\": {\n \"/cors-stuff/**\": {\n \"Access-Control-Allow-Origin\": \"*\"\n },\n \"/scripts/**\": {\n \"content-type\": \"text/javascript\"\n }\n }\n}\n</code></pre>\n\n<h2 id=\"cli\">CLI</h2>\n\n<pre><code class=\"language-sh\">divshot s # server\n\ndivshot push [staging|production|development]\ndivshot pull [staging|production|development]\ndivshot purge # cleans cache\ndivshot files\n\ndivshot promote development production\n\ndivshot open [&lt;env&gt;]\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n<p>Edits <code>divshot.json</code></p>\n\n<pre><code>\ndivshot config:add name your-app-name\ndivshot config:remove name\n</code></pre>\n\n<h3 id=\"environment-vars\">Environment vars</h3>\n\n<pre><code>divshot env:add &lt;env&gt; KEY=value\ndivshot env:remove &lt;env&gt; KEY\ndivshot env:pull &lt;env&gt;\n</code></pre>\n\n<h3 id=\"app-management\">App management</h3>\n\n<pre><code>divshot create &lt;appname&gt;\ndivshot rename &lt;newname&gt;\ndivshot status\ndivshot destroy\n</code></pre>\n\n<p>divshot apps\ndivshot account</p>\n<pre><code>\n### Password protect\n\n```sh\ndivshot protect &lt;env&gt; &lt;username:password&gt;\n</code></pre>\n\n<h2 id=\"custom-domains\">Custom domains</h2>\n\n<p>See <a href=\"http://docs.divshot.com/guides/domains\">custom domains guide</a>.</p>\n\n<pre><code class=\"language-sh\">divshot domains:add foo.bar.com\n</code></pre>\n\n<p>In your DNS create a <code>CNAME</code>: (no apex domains are supported)</p>\n\n<pre><code>www. CNAME yourname.divshot.io\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "do",
"title": "Do gem",
"url": "/do",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<ul>\n <li><a href=\"https://github.com/DAddYE/do\">DAddYE/do</a></li>\n</ul>\n\n<h3 id=\"connection\">Connection</h3>\n\n<pre><code>server = DO::Server.new('srv1', 'srv1.domain.local', 'root', :key =&gt; \n %w[srv1.pem]\n</code></pre>\n\n<h3 id=\"run\">Run</h3>\n<pre><code>server.run 'uname'\n# root@srv1 ~ # uname\n# Linux\n\nserver.run 'uname', '-a'\n# root@srv1 ~ # uname -a\n# Linux srv1.lipsiasoft.net 2.6.18-194.32.1.el5 x86_64 x86_64 x86_64 GNU/Linux\n\nserver.run 'mysqladmin -u root -p password \"oldone\"', 'newpassword'\n# root@srv1 ~ # mysqladmin -u root -p password 'oldone'\n# Enter password: oldone\n# mysqladmin: connect to server at 'localhost' failed\n# error: 'Access denied for user 'root'@'localhost' (using password: YES)'\n</code></pre>\n\n<h3 id=\"files\">Files</h3>\n\n<pre><code>server.exist?('~/.ssh')\n# root@srv1 ~ # test -e ~/.ssh &amp;&amp; echo True\n# =&gt; true\n\nserver.read('/etc/redhat-release')\n# root@srv1 ~ # cat /etc/redhat-release\n# =&gt; \"CentOS release 5.5 (Final)\"\n</code></pre>\n\n<h3 id=\"uploaddownload\">Upload/download</h3>\n\n<pre><code>server.upload '/tmp/file', '/tmp/foo'\n# root@srv1 ~ # upload from '/tmp/file' to '/tmp/foo'\n\nserver.download '/tmp/foo', '/tmp/file2'\n# root@srv1 ~ # download from '/tmp/foo' to '/tmp/file2'\n</code></pre>\n\n<h3 id=\"replace\">Replace</h3>\n\n<pre><code>server.replace :all, 'new content', '/tmp/file'\n# root@srv1 ~ # replace all in '/tmp/foo'\n\nserver.read('/tmp/foo')\n# root@srv1 ~ # cat /tmp/foo\n# =&gt; \"new content\"\n</code></pre>\n\n<h3 id=\"replace-via-regex\">Replace via regex</h3>\n\n<pre><code>server.replace /content$/, 'changed content', '/tmp/foo'\n# root@srv1 ~ # replace /content$/ in '/tmp/foo'\n\nserver.read('/tmp/foo')\n# root@srv1 ~ # cat /tmp/foo\n# =&gt; \"new changed content\"\n</code></pre>\n\n<h3 id=\"append\">Append</h3>\n\n<pre><code>server.append('appended', '/tmp/foo')\n# root@srv1 ~ # append to 'bottom' in '/tmp/foo'\n\nserver.read('/tmp/foo')\n# root@srv1 ~ # cat /tmp/foo\n# =&gt; \"new changed contentappended\"\n</code></pre>\n\n<h3 id=\"append-to-top\">Append to top</h3>\n\n<pre><code>server.append('---', '/tmp/foo', :top)\n# root@srv1 ~ # append to 'top' in '/tmp/foo'\n\nserver.read('/tmp/foo')\n# root@srv1 ~ # cat /tmp/foo\n# =&gt; \"---new changed contentappended\"\n</code></pre>\n\n<h3 id=\"prompt\">Prompt</h3>\n\n<pre><code>server.ask \"Please choose\"\n# root@srv1 ~ # Please choose: foo\n# =&gt; \"foo\"\n\nserver.yes? \"Do you want to proceed\"\n# root@srv1 ~ # Do you want to proceed? (y/n): y\n# =&gt; 0\n\nserver.wait\n# Press ENTER to continue...\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "docker-compose",
"title": "docker-compose",
"url": "/docker-compose",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"basic-example\">Basic example</h3>\n\n<pre><code class=\"language-yaml\"># docker-compose.yml\nversion: '2'\n\nservices:\n web:\n build: .\n # build from Dockerfile\n context: ./Path\n dockerfile: Dockerfile\n ports:\n - \"5000:5000\"\n volumes:\n - .:/code\n redis:\n image: redis\n</code></pre>\n\n<h3 id=\"commands\">Commands</h3>\n\n<pre><code class=\"language-sh\">docker-compose start\ndocker-compose stop\n</code></pre>\n\n<pre><code class=\"language-sh\">docker-compose pause\ndocker-compose unpause\n</code></pre>\n\n<pre><code class=\"language-sh\">docker-compose ps\ndocker-compose up\ndocker-compose down\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"reference\">Reference</h2>\n\n<h3 id=\"building\">Building</h3>\n\n<pre><code class=\"language-yaml\">web:\n # build from Dockerfile\n build: .\n args: # Add build arguments\n APP_HOME: app\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # build from custom Dockerfile\n build:\n context: ./dir\n dockerfile: Dockerfile.dev\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # build from image\n image: ubuntu\n image: ubuntu:14.04\n image: tutum/influxdb\n image: example-registry:4000/postgresql\n image: a4bc65fd\n</code></pre>\n\n<h3 id=\"ports\">Ports</h3>\n\n<pre><code class=\"language-yaml\"> ports:\n - \"3000\"\n - \"8000:80\" # host:container\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # expose ports to linked services (not to host)\n expose: [\"3000\"]\n</code></pre>\n\n<h3 id=\"commands-1\">Commands</h3>\n\n<pre><code class=\"language-yaml\"> # command to execute\n command: bundle exec thin -p 3000\n command: [bundle, exec, thin, -p, 3000]\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # override the entrypoint\n entrypoint: /app/start.sh\n entrypoint: [php, -d, vendor/bin/phpunit]\n</code></pre>\n\n<h3 id=\"environment-variables\">Environment variables</h3>\n\n<pre><code class=\"language-yaml\"> # environment vars\n environment:\n RACK_ENV: development\n environment:\n - RACK_ENV=development\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # environment vars from file\n env_file: .env\n env_file: [.env, .development.env]\n</code></pre>\n\n<h3 id=\"dependencies\">Dependencies</h3>\n\n<pre><code class=\"language-yaml\"> # makes the `db` service available as the hostname `database`\n # (implies depends_on)\n links:\n - db:database\n - redis\n</code></pre>\n\n<pre><code class=\"language-yaml\"> # make sure `db` is alive before starting\n depends_on:\n - db\n</code></pre>\n\n<h3 id=\"other-options\">Other options</h3>\n\n<pre><code class=\"language-yaml\"> # make this service extend another\n extends:\n file: common.yml # optional\n service: webapp\n</code></pre>\n\n<pre><code class=\"language-yaml\"> volumes:\n - /var/lib/mysql\n - ./_data:/var/lib/mysql\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"advanced-features\">Advanced features</h2>\n\n<h3 id=\"labels\">Labels</h3>\n\n<pre><code class=\"language-yaml\">services:\n web:\n labels:\n com.example.description: \"Accounting web app\"\n</code></pre>\n\n<h3 id=\"dns-servers\">DNS servers</h3>\n\n<pre><code class=\"language-yaml\">services:\n web:\n dns: 8.8.8.8\n dns:\n - 8.8.8.8\n - 8.8.4.4\n</code></pre>\n\n<h3 id=\"devices\">Devices</h3>\n\n<pre><code class=\"language-yaml\">services:\n web:\n devices:\n - \"/dev/ttyUSB0:/dev/ttyUSB0\"\n</code></pre>\n\n<h3 id=\"external-links\">External links</h3>\n\n<pre><code class=\"language-yaml\">services:\n web:\n external_links:\n - redis_1\n - project_db_1:mysql\n</code></pre>\n\n<h3 id=\"hosts\">Hosts</h3>\n\n<pre><code class=\"language-yaml\">services:\n web:\n extra_hosts:\n - \"somehost:192.168.1.100\"\n</code></pre>\n\n<h3 id=\"network\">Network</h3>\n\n<pre><code class=\"language-yaml\"># creates a custom network called `frontend`\nnetworks:\n frontend:\n</code></pre>\n\n<h3 id=\"external-network\">External network</h3>\n\n<pre><code class=\"language-yaml\"># join a pre-existing network\nnetworks:\n default:\n external:\n name: frontend\n</code></pre>\n\n<h3 id=\"volume\">Volume</h3>\n\n<pre><code class=\"language-yaml\"># Mount host paths or named volumes, specified as sub-options to a service\n db:\n image: postgres:latest\n volumes:\n - \"/var/run/postgres/postgres.sock:/var/run/postgres/postgres.sock\"\n - \"dbdata:/var/lib/postgresql/data\"\n\nvolumes:\n dbdata:\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-06-26"
},{
"id": "docker",
"title": "Docker CLI",
"url": "/docker",
"category": "Devops",
"keywords": null,
"content_html": "<h2 id=\"manage-images\">Manage images</h2>\n\n<h3 id=\"docker-build\"><code>docker build</code></h3>\n\n<pre><code class=\"language-yml\">docker build [options] .\n -t \"app/container_name\" # name\n --build-arg APP_HOME=$APP_HOME # Set build-time variables\n</code></pre>\n\n<p>Create an <code>image</code> from a Dockerfile.</p>\n\n<h3 id=\"docker-run\"><code>docker run</code></h3>\n\n<pre><code class=\"language-yml\">docker run [options] IMAGE\n # see `docker create` for options\n</code></pre>\n\n<h4 id=\"example\">Example</h4>\n\n<pre><code>$ docker run -it debian:buster /bin/bash\n</code></pre>\n<p>Run a command in an <code>image</code>.</p>\n\n<h2 id=\"manage-containers\">Manage containers</h2>\n\n<h3 id=\"docker-create\"><code>docker create</code></h3>\n\n<pre><code class=\"language-yml\">docker create [options] IMAGE\n -a, --attach # attach stdout/err\n -i, --interactive # attach stdin (interactive)\n -t, --tty # pseudo-tty\n --name NAME # name your image\n -p, --publish 5000:5000 # port map\n --expose 5432 # expose a port to linked containers\n -P, --publish-all # publish all ports\n --link container:alias # linking\n -v, --volume `pwd`:/app # mount (absolute paths needed)\n -e, --env NAME=hello # env vars\n</code></pre>\n\n<h4 id=\"example-1\">Example</h4>\n\n<pre><code>$ docker create --name app_redis_1 \\\n --expose 6379 \\\n redis:3.0.2\n</code></pre>\n\n<p>Create a <code>container</code> from an <code>image</code>.</p>\n\n<h3 id=\"docker-exec\"><code>docker exec</code></h3>\n\n<pre><code class=\"language-yml\">docker exec [options] CONTAINER COMMAND\n -d, --detach # run in background\n -i, --interactive # stdin\n -t, --tty # interactive\n</code></pre>\n\n<h4 id=\"example-2\">Example</h4>\n\n<pre><code>$ docker exec app_web_1 tail logs/development.log\n$ docker exec -t -i app_web_1 rails c\n</code></pre>\n\n<p>Run commands in a <code>container</code>.</p>\n\n<h3 id=\"docker-start\"><code>docker start</code></h3>\n\n<pre><code class=\"language-yml\">docker start [options] CONTAINER\n -a, --attach # attach stdout/err\n -i, --interactive # attach stdin\n\ndocker stop [options] CONTAINER\n</code></pre>\n\n<p>Start/stop a <code>container</code>.</p>\n\n<h3 id=\"docker-ps\"><code>docker ps</code></h3>\n\n<pre><code>$ docker ps\n$ docker ps -a\n$ docker kill $ID\n</code></pre>\n\n<p>Manage <code>container</code>s using ps/kill.</p>\n\n<h3 id=\"docker-logs\"><code>docker logs</code></h3>\n\n<pre><code>$ docker logs $ID\n$ docker logs $ID 2&gt;&amp;1 | less\n$ docker logs -f $ID # Follow log output\n</code></pre>\n\n<p>See what’s being logged in an <code>container</code>.</p>\n\n<h2 id=\"images\">Images</h2>\n\n<h3 id=\"docker-images\"><code>docker images</code></h3>\n\n<pre><code class=\"language-sh\">$ docker images\n REPOSITORY TAG ID\n ubuntu 12.10 b750fe78269d\n me/myapp latest 7b2431a8d968\n</code></pre>\n\n<pre><code class=\"language-sh\">$ docker images -a # also show intermediate\n</code></pre>\n\n<p>Manages <code>image</code>s.</p>\n\n<h3 id=\"docker-rmi\"><code>docker rmi</code></h3>\n\n<pre><code class=\"language-yml\">docker rmi b750fe78269d\n</code></pre>\n\n<p>Deletes <code>image</code>s.</p>\n\n<h2 id=\"clean-up\">Clean up</h2>\n\n<h3 id=\"clean-all\">Clean all</h3>\n\n<pre><code class=\"language-sh\">docker system prune\n</code></pre>\n\n<p>Cleans up dangling images, containers, volumes, and networks (ie, not associated with a container)</p>\n\n<pre><code class=\"language-sh\">docker system prune -a\n</code></pre>\n\n<p>Additionally remove any stopped containers and all unused images (not just dangling images)</p>\n\n<h3 id=\"containers\">Containers</h3>\n\n<pre><code class=\"language-sh\"># Stop all running containers\ndocker stop $(docker ps -a -q)\n\n# Delete stopped containers\ndocker container prune\n</code></pre>\n\n<h3 id=\"images-1\">Images</h3>\n\n<pre><code class=\"language-sh\">docker image prune [-a]\n</code></pre>\n\n<p>Delete all the images</p>\n\n<h3 id=\"volumes\">Volumes</h3>\n\n<pre><code class=\"language-sh\">docker volume prune\n</code></pre>\n\n<p>Delete all the volumes</p>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://www.docker.io/gettingstarted/\">Getting Started</a> <em>(docker.io)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "dockerfile",
"title": "Dockerfile",
"url": "/dockerfile",
"category": "Devops",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"reference\">Reference</h2>\n\n<h3 id=\"inheritance\">Inheritance</h3>\n\n<pre><code class=\"language-docker\">FROM ruby:2.2.2\n</code></pre>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-docker\">ENV APP_HOME /myapp\nRUN mkdir $APP_HOME\n</code></pre>\n\n<pre><code class=\"language-docker\">ARG APP_HOME=\"\"\nRUN mkdir $APP_HOME\n</code></pre>\n\n<h3 id=\"initialization\">Initialization</h3>\n\n<pre><code class=\"language-docker\">RUN bundle install\n</code></pre>\n\n<pre><code class=\"language-docker\">WORKDIR /myapp\n</code></pre>\n\n<pre><code class=\"language-docker\">VOLUME [\"/data\"]\n# Specification for mount point\n</code></pre>\n\n<pre><code class=\"language-docker\">ADD file.xyz /file.xyz\nCOPY --chown=user:group host_file.xyz /path/container_file.xyz\n</code></pre>\n\n<h3 id=\"onbuild\">Onbuild</h3>\n\n<pre><code class=\"language-docker\">ONBUILD RUN bundle install\n# when used with another file\n</code></pre>\n\n<h3 id=\"commands\">Commands</h3>\n\n<pre><code class=\"language-docker\">EXPOSE 5900\nCMD [\"bundle\", \"exec\", \"rails\", \"server\"]\n</code></pre>\n\n<h3 id=\"entrypoint\">Entrypoint</h3>\n\n<pre><code class=\"language-docker\">ENTRYPOINT [\"executable\", \"param1\", \"param2\"]\nENTRYPOINT command param1 param2\n</code></pre>\n\n<p>Configures a container that will run as an executable.</p>\n\n<pre><code class=\"language-docker\">ENTRYPOINT exec top -b\n</code></pre>\n\n<p>This will use shell processing to substitute shell variables, and will ignore any <code>CMD</code> or <code>docker run</code> command line arguments.</p>\n\n<h3 id=\"metadata\">Metadata</h3>\n\n<pre><code class=\"language-docker\">LABEL version=\"1.0\"\n</code></pre>\n\n<pre><code class=\"language-docker\">LABEL \"com.example.vendor\"=\"ACME Incorporated\"\nLABEL com.example.label-with-value=\"foo\"\n</code></pre>\n\n<pre><code class=\"language-docker\">LABEL description=\"This text illustrates \\\nthat label-values can span multiple lines.\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"https://docs.docker.com/engine/reference/builder/\">https://docs.docker.com/engine/reference/builder/</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-03-17"
},{
"id": "dom-range",
"title": "DOM Range",
"url": "/dom-range",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"creating-ranges\">Creating ranges</h3>\n<p>See <a href=\"http://devdocs.io/dom/document/createrange\">http://devdocs.io/dom/document/createrange</a></p>\n\n<pre><code class=\"language-js\">var range = document.createRange()\n</code></pre>\n\n<h2 id=\"methods\">Methods</h2>\n<p>See <a href=\"http://devdocs.io/dom/range\">http://devdocs.io/dom/range</a></p>\n\n<pre><code class=\"language-js\">range\n .setStart(startNode, startOffset)\n .setEnd(endNode, endOffset)\n\n .setStartBefore(node)\n .setStartAfter(node)\n .setEndBefore(node)\n .setEndAfter(node)\n\n .selectNode(node)\n .selectNodeContents(node)\n</code></pre>\n\n<h3 id=\"collapsing\">Collapsing</h3>\n\n<pre><code class=\"language-js\">range\n .collapse() // to end (a single point)\n .collapse(true) // to start (a single point)\n .collapsed // true | false\n</code></pre>\n\n<h3 id=\"operations\">Operations</h3>\n\n<pre><code class=\"language-js\">range\n .cloneContents() // copy =&gt; DocumentFragment\n .extractContents() // cut =&gt; DocumentFragment\n .deleteContents() // delete\n\n .insertNode(node)\n</code></pre>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code class=\"language-js\">range\n .toString()\n</code></pre>\n\n<h3 id=\"read-only-attributes\">Read-only attributes</h3>\n\n<pre><code class=\"language-js\">range\n .collapsed // true/false\n .startContainer // Node\n .startOffset\n .endContainer // Node\n .endOffset\n .commonAncestorContainer // closest of start and end containers\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "dom-selection",
"title": "DOM Selection",
"url": "/dom-selection",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 id=\"selection\">Selection</h2>\n<p>See <a href=\"http://devdocs.io/dom/selection\">http://devdocs.io/dom/selection</a></p>\n\n<pre><code class=\"language-js\">var selection = document.getSelection()\n</code></pre>\n\n<h2 id=\"methods\">Methods</h2>\n\n<pre><code class=\"language-js\">selection\n .removeAllRanges() // deselects\n .addRange(range) // sets a selection\n .removeRange(range) // remove a range\n</code></pre>\n\n<pre><code class=\"language-js\">selection\n .rangeCount // ranges\n .getRangeAt(0) // get the 0th range\n</code></pre>\n\n<h3 id=\"collapsing\">Collapsing</h3>\n\n<pre><code class=\"language-js\">selection\n .collapse(parent, offset)\n .collapseToEnd()\n .collapseToStart()\n .isCollapsed\n</code></pre>\n\n<pre><code class=\"language-js\">selection\n .containsNode(node)\n</code></pre>\n\n<h3 id=\"deleting\">Deleting</h3>\n\n<pre><code class=\"language-js\">selection\n .deleteFromDocument()\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-js\">document.addEventListener('selectionchange', () =&gt; {})\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ec2",
"title": "EC2 API tools",
"url": "/ec2",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"install\">Install</h3>\n\n<pre><code>$ sudo apt-get install ec2-api-tools ec2-ami-tools\n$ brew install ec2-api-tools ec2-ami-tools\n</code></pre>\n\n<h3 id=\"pem-files\">Pem files</h3>\n\n<pre><code>$ brew info ec2-api-tools\n</code></pre>\n\n<ul>\n <li>\n <p>Before you can use these tools you must export some variables to your $SHELL\nand download your X.509 certificate and private key from Amazon Web Services.</p>\n </li>\n <li>\n <p>Your certificate and private key are available at\n<a href=\"http://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key\">aws-portal.amazon.com</a>.</p>\n </li>\n <li>\n <p>Download two <code>.pem</code> files, one starting with <code>pk-</code>, and one starting with <code>cert-</code>.\nYou need to put both into a folder in your home directory, <code>~/.ec2</code>.</p>\n </li>\n</ul>\n\n<h3 id=\"key-pair\">Key pair</h3>\n\n<pre><code># To use public images (AMI's), you need an SSH keypair from EC2.\n ec2-add-keypair my-keypair &gt; ~/.ec2/my-keypair.pem\n chmod 600 ec2-keypair.pem\n</code></pre>\n\n<h3 id=\"start-an-instance\">Start an instance</h3>\n\n<pre><code># Start an instance using a given AMI image:\n# (Use the Ubuntu locator, or ec2-describe-images)\n ec2-run-instances ami-xxxxxx -k ec2-keypair\n\n# Open up ports (in the 'default' security group):\n ec2-authorize default -p 22\n ec2-authorize default -p 80\n\n# Connect\n ssh -i ~/.ec2/my-keypair.pem root@ec2-xxx.amazonaws.com\n</code></pre>\n\n<h3 id=\"management\">Management</h3>\n\n<pre><code># Show running instances\n ec2-describe-instances\n\n# Kill an instance\n ec2-terminate-instances i-yourinstance\n</code></pre>\n\n<h3 id=\"misc\">Misc</h3>\n\n<pre><code># Create a security group\n ec2-add-group group_name -d \"Description\"\n\n# Show images (AMI's) owned by amazon, or me\n ec2-describe-images -o self -o amazon\n</code></pre>\n\n<h3 id=\"ubuntu-images\">Ubuntu images</h3>\n\n<ul>\n <li><a href=\"http://cloud-images.ubuntu.com/locator/ec2/\">Ubuntu EC2 AMI locator</a></li>\n</ul>\n\n<h3 id=\"change-certificates\">Change certificates</h3>\n\n<pre><code>EC2_CERT_PATH=\"$HOME/.ec2\"\nexport EC2_PRIVATE_KEY=\"$(/bin/ls $EC2_CERT_PATH/pk-*.pem | /usr/bin/head -1)\"\nexport EC2_CERT=\"$(/bin/ls $EC2_CERT_PATH/cert-*.pem | /usr/bin/head -1)\"\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "editorconfig",
"title": "editorconfig",
"url": "/editorconfig",
"category": "Apps",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"short-example\">Short example</h3>\n\n<pre><code class=\"language-ini\"># editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\ntab_width = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n</code></pre>\n\n<p>This example should be fine for most projects indented by 2 spaces. See: <a href=\"https://github.com/daneden/animate.css/blob/master/.editorconfig\">animate.css editorconfig</a></p>\n\n<h3 id=\"properties\">Properties</h3>\n\n<pre><code class=\"language-ini\">indent_style = {space|tab}\nindent_size = {4|tab}\ntab_width = 2\nend_of_line = {cr|lf|crlf}\ncharset = {utf-8|utf-16be|utf-16le|latin1}\ntrim_trailing_whitespace = false\ninsert_final_newline = true\nmax_line_length = 80\n</code></pre>\n\n<h3 id=\"full-example\">Full example</h3>\n\n<pre><code class=\"language-ini\"># top-most EditorConfig file\nroot = true\n\n# Unix-style newlines with a newline ending every file\n[*]\nend_of_line = lf\ninsert_final_newline = true\n\n# 4 space indentation\n[*.py]\nindent_style = space\nindent_size = 4\n\n# Tab indentation (no size specified)\n[*.js]\nindent_style = tab\n\n# Indentation override for all JS under lib directory\n[lib/**.js]\nindent_style = space\nindent_size = 2\n\n# Matches the exact files either package.json or .travis.yml\n[{package.json,.travis.yml}]\nindent_style = space\nindent_size = 2\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://EditorConfig.org\">https://EditorConfig.org</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-04"
},{
"id": "elixir-metaprogramming",
"title": "Elixir metaprogramming",
"url": "/elixir-metaprogramming",
"category": "Elixir",
"keywords": null,
"content_html": "<h2 id=\"kernel\">Kernel</h2>\n\n<p>Most of these magic is defined in <a href=\"http://devdocs.io/elixir/elixir/kernel.specialforms\">Kernel.SpecialForms</a>.</p>\n\n<h3 id=\"pseudo-variables\">Pseudo-variables</h3>\n\n<pre><code class=\"language-elixir\">__DIR__ # current dir\n__MODULE__ # current module\n__CALLER__ # caller of the function\n</code></pre>\n\n<h3 id=\"__env__\"><a href=\"http://devdocs.io/elixir/elixir/kernel.specialforms#__ENV__/0\"><code>__ENV__</code></a></h3>\n\n<pre><code class=\"language-elixir\">Map.keys(__ENV__)\n[:__struct__, :aliases, :context, :context_modules, :export_vars, :file,\n :function, :functions, :lexical_tracker, :line, :macro_aliases, :macros,\n :module, :requires, :vars]\n</code></pre>\n\n<pre><code class=\"language-elixir\">__CALLER__.module |&gt; Module.definitions_in |&gt; IO.inspect\n</code></pre>\n\n<pre><code class=\"language-elixir\">apply(Enum, :reverse, [[1, 2, 3]])\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "elixir",
"title": "Elixir",
"url": "/elixir",
"category": "Elixir",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"hello-world\">Hello world</h3>\n\n<pre><code class=\"language-elixir\"># hello.exs\ndefmodule Greeter do\n def greet(name) do\n message = \"Hello, \" &lt;&gt; name &lt;&gt; \"!\"\n IO.puts message\n end\nend\n\nGreeter.greet(\"world\")\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-bash\">elixir hello.exs\n# Hello, world!\n</code></pre>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-elixir\">age = 23\n</code></pre>\n\n<h3 id=\"maps\">Maps</h3>\n\n<pre><code class=\"language-elixir\">user = %{\n name: \"John\",\n city: \"Melbourne\"\n}\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">IO.puts \"Hello, \" &lt;&gt; user.name\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre data-line=\"1\"><code class=\"language-elixir\">users = [ \"Tom\", \"Dick\", \"Harry\" ]\n</code></pre>\n\n<pre><code class=\"language-elixir\">Enum.map(users, fn user -&gt;\n IO.puts \"Hello \" &lt;&gt; user\nend)\n</code></pre>\n\n<h3 id=\"piping\">Piping</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-elixir\">source\n|&gt; transform(:hello)\n|&gt; print()\n</code></pre>\n\n<pre><code class=\"language-elixir\"># Same as:\nprint(transform(source, :hello))\n</code></pre>\n\n<p>These two are equivalent.</p>\n\n<h3 id=\"pattern-matching\">Pattern matching</h3>\n\n<pre data-line=\"2\"><code class=\"language-elixir\">user = %{name: \"Tom\", age: 23}\n%{name: username} = user\n</code></pre>\n\n<p>This sets <code>username</code> to <code>\"Tom\"</code>.</p>\n\n<h3 id=\"pattern-matching-in-functions\">Pattern matching in functions</h3>\n\n<pre data-line=\"1\"><code class=\"language-elixir\">def greet(%{name: username}) do\n IO.puts \"Hello, \" &lt;&gt; username\nend\n\nuser = %{name: \"Tom\", age: 23}\n</code></pre>\n\n<p>Pattern matching works in function parameters too.</p>\n\n<h2 class=\"-three-column\" id=\"control-flow\">Control flow</h2>\n\n<h3 id=\"if\">If</h3>\n\n<pre><code class=\"language-elixir\">if false do\n \"This will never be seen\"\nelse\n \"This will\"\nend\n</code></pre>\n<h3 id=\"case\">Case</h3>\n\n<pre><code class=\"language-elixir\">case {1, 2, 3} do\n {4, 5, 6} -&gt;\n \"This clause won't match\"\n {1, x, 3} -&gt;\n \"This will match and bind x to 2\"\n _ -&gt;\n \"This will match any value\"\nend\n</code></pre>\n\n<h3 id=\"cond\">Cond</h3>\n\n<pre><code class=\"language-elixir\">cond do\n 1 + 1 == 3 -&gt;\n \"I will never be seen\"\n 2 * 5 == 12 -&gt;\n \"Me neither\"\n true -&gt;\n \"But I will (this is essentially an else)\"\nend\n</code></pre>\n\n<h3 id=\"errors\">Errors</h3>\n\n<pre><code class=\"language-elixir\">try do\n throw(:hello)\ncatch\n message -&gt; \"Got #{message}.\"\nafter\n IO.puts(\"I'm the after clause.\")\nend\n</code></pre>\n\n<h2 id=\"types\">Types</h2>\n\n<h3 id=\"primitives\">Primitives</h3>\n\n<table>\n <thead>\n <tr>\n <th>Sample</th>\n <th>Type</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>nil</code></td>\n <td>Nil/null</td>\n </tr>\n <tr>\n <td><code>true</code> <em>/</em> <code>false</code></td>\n <td>Boolean</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>?a</code></td>\n <td>Integer (ASCII)</td>\n </tr>\n <tr>\n <td><code>23</code></td>\n <td>Integer</td>\n </tr>\n <tr>\n <td><code>3.14</code></td>\n <td>Float</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>'hello'</code></td>\n <td>Charlist</td>\n </tr>\n <tr>\n <td><code>&lt;&lt;2, 3&gt;&gt;</code></td>\n <td>Binary</td>\n </tr>\n <tr>\n <td><code>\"hello\"</code></td>\n <td>Binary string</td>\n </tr>\n <tr>\n <td><code>:hello</code></td>\n <td>Atom</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[a, b]</code></td>\n <td>List</td>\n </tr>\n <tr>\n <td><code>{a, b}</code></td>\n <td>Tuple</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%{a: \"hello\"}</code></td>\n <td>Map</td>\n </tr>\n <tr>\n <td><code>%MyStruct{a: \"hello\"}</code></td>\n <td>Struct</td>\n </tr>\n <tr>\n <td><code>fn -&gt; ... end</code></td>\n <td>Function</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"type-checks\">Type checks</h3>\n\n<pre><code class=\"language-elixir\">is_atom/1\nis_bitstring/1\nis_boolean/1\nis_function/1\nis_function/2\nis_integer/1\nis_float/1\n</code></pre>\n\n<pre><code class=\"language-elixir\">is_binary/1\nis_list/1\nis_map/1\nis_tuple/1\n</code></pre>\n\n<pre><code class=\"language-elixir\">is_nil/1\nis_number/1\nis_pid/1\nis_port/1\nis_reference/1\n</code></pre>\n\n<h3 id=\"operators\">Operators</h3>\n\n<pre><code class=\"language-elixir\">left != right # equal\nleft !== right # match\nleft ++ right # concat lists\nleft &lt;&gt; right # concat string/binary\nleft =~ right # regexp\n</code></pre>\n\n<h2 id=\"modules\">Modules</h2>\n\n<h3 id=\"importing\">Importing</h3>\n\n<pre><code class=\"language-elixir\">require Redux # compiles a module\nimport Redux # compiles, and you can use without the `Redux.` prefix\n\nuse Redux # compiles, and runs Redux.__using__/1\nuse Redux, async: true\n\nimport Redux, only: [duplicate: 2]\nimport Redux, only: :functions\nimport Redux, only: :macros\n\nimport Foo.{Bar, Baz}\n</code></pre>\n\n<h3 id=\"aliases\">Aliases</h3>\n\n<pre><code class=\"language-elixir\">alias Foo.Bar, as: Bar\nalias Foo.Bar # same as above\n\nalias Foo.{Bar, Baz}\n</code></pre>\n\n<h2 id=\"string\">String</h2>\n\n<h3 id=\"functions\">Functions</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import String\n</code></pre>\n\n<pre><code class=\"language-elixir\">str = \"hello\"\nstr |&gt; length() # → 5\nstr |&gt; codepoints() # → [\"h\", \"e\", \"l\", \"l\", \"o\"]\nstr |&gt; slice(2..-1) # → \"llo\"\nstr |&gt; split(\" \") # → [\"hello\"]\nstr |&gt; capitalize() # → \"Hello\"\nstr |&gt; match(regex)\n</code></pre>\n\n<h3 id=\"inspecting-objects\">Inspecting objects</h3>\n\n<pre><code class=\"language-elixir\">inspect(object, opts \\\\ [])\n</code></pre>\n<pre><code class=\"language-elixir\">value |&gt; IO.inspect()\n</code></pre>\n<pre><code class=\"language-elixir\">value |&gt; IO.inspect(label: \"value\")\n</code></pre>\n\n<h2 id=\"numbers\">Numbers</h2>\n\n<h3 id=\"operations\">Operations</h3>\n\n<pre><code class=\"language-elixir\">abs(n)\nround(n)\nrem(a, b) # remainder (modulo)\ndiv(a, b) # integer division\n</code></pre>\n\n<h3 id=\"float\">Float</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import Float\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">n = 10.3\n</code></pre>\n\n<pre><code class=\"language-elixir\">n |&gt; ceil() # → 11.0\nn |&gt; ceil(2) # → 11.30\nn |&gt; to_string() # → \"1.030000+e01\"\nn |&gt; to_string([decimals: 2, compact: true])\n</code></pre>\n\n<pre><code class=\"language-elixir\">Float.parse(\"34\") # → { 34.0, \"\" }\n</code></pre>\n\n<h3 id=\"integer\">Integer</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import Integer\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">n = 12\n</code></pre>\n\n<pre><code class=\"language-elixir\">n |&gt; digits() # → [1, 2]\nn |&gt; to_charlist() # → '12'\nn |&gt; to_string() # → \"12\"\nn |&gt; is_even()\nn |&gt; is_odd()\n</code></pre>\n\n<pre><code class=\"language-elixir\"># Different base:\nn |&gt; digits(2) # → [1, 1, 0, 0]\nn |&gt; to_charlist(2) # → '1100'\nn |&gt; to_string(2) # → \"1100\"\n</code></pre>\n\n<pre><code class=\"language-elixir\">parse(\"12\") # → {12, \"\"}\nundigits([1, 2]) # → 12\n</code></pre>\n\n<h3 id=\"type-casting\">Type casting</h3>\n\n<pre><code class=\"language-elixir\">Float.parse(\"34.1\") # → {34.1, \"\"}\nInteger.parse(\"34\") # → {34, \"\"}\n</code></pre>\n\n<pre><code class=\"language-elixir\">Float.to_string(34.1) # → \"3.4100e+01\"\nFloat.to_string(34.1, [decimals: 2, compact: true]) # → \"34.1\"\n</code></pre>\n\n<h2 id=\"map\">Map</h2>\n\n<h3 id=\"defining\">Defining</h3>\n\n<pre><code class=\"language-elixir\">m = %{name: \"hi\"} # atom keys (:name)\nm = %{\"name\" =&gt; \"hi\"} # string keys (\"name\")\n</code></pre>\n\n<h3 id=\"updating\">Updating</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import Map\n</code></pre>\n\n<pre><code class=\"language-elixir\">m = %{m | name: \"yo\"} # key must exist\n</code></pre>\n\n<pre><code class=\"language-elixir\">m |&gt; put(:id, 2) # → %{id: 2, name: \"hi\"}\nm |&gt; put_new(:id, 2) # only if `id` doesn't exist (`||=`)\n</code></pre>\n\n<pre><code class=\"language-elixir\">m |&gt; put(:b, \"Banana\")\nm |&gt; merge(%{b: \"Banana\"})\nm |&gt; update(:a, &amp;(&amp;1 + 1))\nm |&gt; update(:a, fun a -&gt; a + 1 end)\n</code></pre>\n\n<pre><code class=\"language-elixir\">m |&gt; get_and_update(:a, &amp;(&amp;1 || \"default\"))\n# → {old, new}\n</code></pre>\n\n<h3 id=\"deleting\">Deleting</h3>\n\n<pre><code class=\"language-elixir\">m |&gt; delete(:name) # → %{}\nm |&gt; pop(:name) # → {\"John\", %{}}\n</code></pre>\n\n<h3 id=\"reading\">Reading</h3>\n\n<pre><code class=\"language-elixir\">m |&gt; get(:id) # → 1\nm |&gt; keys() # → [:id, :name]\nm |&gt; values() # → [1, \"hi\"]\n</code></pre>\n\n<pre><code class=\"language-elixir\">m |&gt; to_list() # → [id: 1, name: \"hi\"]\n # → [{:id, 1}, {:name, \"hi\"}]\n</code></pre>\n\n<h3 id=\"deep\">Deep</h3>\n\n<pre><code class=\"language-elixir\">put_in(map, [:b, :c], \"Banana\")\nput_in(map[:b][:c], \"Banana\") # via macros\n</code></pre>\n\n<pre><code class=\"language-elixir\">get_and_update_in(users, [\"john\", :age], &amp;{&amp;1, &amp;1 + 1})\n</code></pre>\n\n<h3 id=\"constructing-from-lists\">Constructing from lists</h3>\n\n<pre><code class=\"language-elixir\">Map.new([{:b, 1}, {:a, 2}])\nMap.new([a: 1, b: 2])\nMap.new([:a, :b], fn x -&gt; {x, x} end) # → %{a: :a, b: :b}\n</code></pre>\n\n<h2 id=\"list\">List</h2>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import List\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">l = [ 1, 2, 3, 4 ]\n</code></pre>\n\n<pre><code class=\"language-elixir\">l = l ++ [5] # push (append)\nl = [ 0 | list ] # unshift (prepend)\n</code></pre>\n\n<pre><code class=\"language-elixir\">l |&gt; first()\nl |&gt; last()\n</code></pre>\n\n<pre><code class=\"language-elixir\">l |&gt; flatten()\nl |&gt; flatten(tail)\n</code></pre>\n\n<p>Also see <a href=\"#enum\">Enum</a>.</p>\n\n<h2 id=\"enum\">Enum</h2>\n\n<h3 id=\"usage\">Usage</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import Enum\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">list = [:a, :b, :c]\n</code></pre>\n\n<pre><code class=\"language-elixir\">list |&gt; at(0) # → :a\nlist |&gt; count() # → 3\nlist |&gt; empty?() # → false\nlist |&gt; any?() # → true\n</code></pre>\n\n<pre><code class=\"language-elixir\">list |&gt; concat([:d]) # → [:a, :b, :c, :d]\n</code></pre>\n\n<p>Also, consider streams instead.</p>\n\n<h3 id=\"mapreduce\">Map/reduce</h3>\n\n<pre><code class=\"language-elixir\">list |&gt; reduce(fn)\nlist |&gt; reduce(acc, fn)\nlist |&gt; map(fn)\nlist |&gt; reject(fn)\nlist |&gt; any?(fn)\nlist |&gt; empty?(fn)\n</code></pre>\n\n<pre><code class=\"language-elixir\">[1, 2, 3, 4]\n|&gt; Enum.reduce(0, fn(x, acc) -&gt; x + acc end)\n</code></pre>\n\n<h2 id=\"tuple\">Tuple</h2>\n\n<h3 id=\"tuples\">Tuples</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">import Tuple\n</code></pre>\n\n<pre><code class=\"language-elixir\">t = { :a, :b }\n</code></pre>\n\n<pre><code class=\"language-elixir\">t |&gt; elem(1) # like tuple[1]\nt |&gt; put_elem(index, value)\nt |&gt; tuple_size()\n</code></pre>\n\n<h3 id=\"keyword-lists\">Keyword lists</h3>\n\n<pre><code class=\"language-elixir\">list = [{ :name, \"John\" }, { :age, 15 }]\nlist[:name]\n</code></pre>\n\n<pre><code class=\"language-elixir\"># For string-keyed keyword lists\nlist = [{\"size\", 2}, {\"type\", \"shoe\"}]\nList.keyfind(list, \"size\", 0) # → {\"size\", 2}\n</code></pre>\n\n<h2 id=\"functions-1\">Functions</h2>\n\n<h3 id=\"lambdas\">Lambdas</h3>\n\n<pre><code class=\"language-elixir\">square = fn n -&gt; n*n end\nsquare.(20)\n</code></pre>\n\n<h3 id=\"-syntax\">&amp; syntax</h3>\n\n<pre><code class=\"language-elixir\">square = &amp;(&amp;1 * &amp;1)\nsquare.(20)\n\nsquare = &amp;Math.square/1\n</code></pre>\n\n<h3 id=\"running\">Running</h3>\n\n<pre><code class=\"language-elixir\">fun.(args)\napply(fun, args)\napply(module, fun, args)\n</code></pre>\n\n<h3 id=\"function-heads\">Function heads</h3>\n\n<pre><code class=\"language-elixir\">def join(a, b \\\\ nil)\ndef join(a, b) when is_nil(b) do: a\ndef join(a, b) do: a &lt;&gt; b\n</code></pre>\n\n<h2 id=\"structs\">Structs</h2>\n\n<h3 id=\"structs-1\">Structs</h3>\n\n<pre><code class=\"language-elixir\">defmodule User do\n defstruct name: \"\", age: nil\nend\n\n%User{name: \"John\", age: 20}\n\n%User{}.struct # → User\n</code></pre>\n\n<p>See: <a href=\"http://elixir-lang.org/getting-started/structs.html\">Structs</a></p>\n\n<h2 id=\"protocols\">Protocols</h2>\n\n<h3 id=\"defining-protocols\">Defining protocols</h3>\n\n<pre><code class=\"language-elixir\">defprotocol Blank do\n @doc \"Returns true if data is considered blank/empty\"\n def blank?(data)\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">defimpl Blank, for: List do\n def blank?([]), do: true\n def blank?(_), do: false\nend\n\nBlank.blank?([]) # → true\n</code></pre>\n\n<h3 id=\"any\">Any</h3>\n\n<pre><code class=\"language-elixir\">defimpl Blank, for: Any do ... end\n\ndefmodule User do\n @derive Blank # Falls back to Any\n defstruct name: \"\"\nend\n</code></pre>\n\n<h3 id=\"examples\">Examples</h3>\n\n<ul>\n <li><code>Enumerable</code> and <code>Enum.map()</code></li>\n <li><code>Inspect</code> and <code>inspect()</code></li>\n</ul>\n\n<h2 id=\"comprehensions\">Comprehensions</h2>\n\n<h3 id=\"for\">For</h3>\n\n<pre><code class=\"language-elixir\">for n &lt;- [1, 2, 3, 4], do: n * n\nfor n &lt;- 1..4, do: n * n\n</code></pre>\n\n<pre><code class=\"language-elixir\">for {key, val} &lt;- %{a: 10, b: 20}, do: val\n# → [10, 20]\n</code></pre>\n\n<pre><code class=\"language-elixir\">for {key, val} &lt;- %{a: 10, b: 20}, into: %{}, do: {key, val*val}\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<pre><code class=\"language-elixir\">for n &lt;- 1..10, rem(n, 2) == 0, do: n\n# → [2, 4, 6, 8, 10]\n</code></pre>\n\n<h3 id=\"complex\">Complex</h3>\n\n<pre><code class=\"language-elixir\">for dir &lt;- dirs,\n file &lt;- File.ls!(dir), # nested comprehension\n path = Path.join(dir, file), # invoked\n File.regular?(path) do # condition\n IO.puts(file)\nend\n</code></pre>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"metaprogramming\">Metaprogramming</h3>\n\n<pre><code class=\"language-elixir\">__MODULE__\n__MODULE__.__info__\n\n@after_compile __MODULE__\ndef __before_compile__(env)\ndef __after_compile__(env, _bytecode)\ndef __using__(opts) # invoked on `use`\n\n@on_definition {__MODULE__, :on_def}\ndef on_def(_env, kind, name, args, guards, body)\n\n@on_load :load_check\ndef load_check\n</code></pre>\n\n<h3 id=\"regexp\">Regexp</h3>\n\n<pre><code class=\"language-elixir\">exp = ~r/hello/\nexp = ~r/hello/i\n\"hello world\" =~ exp\n</code></pre>\n\n<h3 id=\"sigils\">Sigils</h3>\n\n<pre><code class=\"language-elixir\">~r/regexp/\n~w(list of strings)\n~s|strings with #{interpolation} and \\x20 escape codes|\n~S|no interpolation and no escapes|\n~c(charlist)\n</code></pre>\n\n<p>Allowed chars: <code>/</code> <code>|</code> <code>\"</code> <code>'</code> <code>(</code> <code>[</code> <code>{</code> <code>&lt;</code> <code>\"\"\"</code>.\nSee: <a href=\"http://elixir-lang.org/getting-started/sigils.html\">Sigils</a></p>\n\n<h3 id=\"type-specs\">Type specs</h3>\n\n<pre><code class=\"language-elixir\">@spec round(number) :: integer\n\n@type number_with_remark :: {number, String.t}\n@spec add(number, number) :: number_with_remark\n</code></pre>\n\n<p>Useful for <a href=\"http://www.erlang.org/doc/man/dialyzer.html\">dialyzer</a>.\nSee: <a href=\"http://elixir-lang.org/getting-started/typespecs-and-behaviours.html\">Typespecs</a></p>\n\n<h3 id=\"behaviours\">Behaviours</h3>\n\n<pre><code class=\"language-elixir\">defmodule Parser do\n @callback parse(String.t) :: any\n @callback extensions() :: [String.t]\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">defmodule JSONParser do\n @behaviour Parser\n\n def parse(str), do: # ... parse JSON\n def extensions, do: [\"json\"]\nend\n</code></pre>\n\n<p>See: <a href=\"http://elixir-lang.org/docs/stable/elixir/Module.html\">Module</a></p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://learnxinyminutes.com/docs/elixir/\">Learn Elixir in Y minutes</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["New"],
"updated": "2017-08-26"
},{
"id": "emacs",
"title": "Emacs",
"url": "/emacs",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"movements\">Movements</h3>\n\n<p>^n ^p # up/down\n ^f ^b # left/right</p>\n\n<p>^v Mv # up/down page</p>\n\n<p>^a ^e # begin/end of line\n Ma Me # begin/end of sentence</p>\n\n<h3 id=\"basic\">Basic</h3>\n\n<p>^x ^f # find file\n ^x ^s # save file</p>\n\n<h3 id=\"command-line\">Command line</h3>\n\n<p>Mx</p>\n\n<h3 id=\"packages\">Packages</h3>\n\n<p>Mx package-install RET evil RET</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ember",
"title": "Ember.js",
"url": "/ember",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"routes\">Routes</h3>\n\n<pre><code>App.Router.map(function() {\n this.resource('trips', function() {\n this.route('item', { path: '/:trip_id' });\n });\n\n this.route('upcoming');\n this.route('about', { path: '/about' });\n this.route('schedules');\n this.route('history');\n this.route('post');\n});\n</code></pre>\n\n<h3 id=\"a-route\">A route</h3>\n\n<pre><code>App.IndexRoute = Ember.Route.extend({\n setupController: function(controller) {\n controller.set('title', 'my app');\n // &lt;h1&gt;{{title}}&lt;/h1&gt;\n },\n\n setupController: function(controller, model) {\n controller.set(\"model\", model);\n this.controllerFor('topPost').set('model', model);\n },\n\n model: function(params) {\n return this.store.find('posts');\n return this.store.find('post', params.post_id);\n },\n \n serialize: function(model) {\n // this will make the URL `/posts/foo-post`\n return { post_slug: model.get('slug') };\n }\n});\n</code></pre>\n\n<h3 id=\"view\">View</h3>\n\n<pre><code>App.InfoView = Ember.View.extend({\n templateName: 'input', /* optional */\n\n fooName: \"Hello\" /* {{ view.fooName }} */\n\n click: function(e) {\n \"I was clicked\";\n }\n\n});\n</code></pre>\n\n<h3 id=\"markup\">markup</h3>\n\n<pre><code>&lt;img {{bindAttr src=\"avatarURL\"}}&gt;\n&lt;button {{action follow}}&gt;\n</code></pre>\n\n<p>Value binding:</p>\n\n<pre><code>{{view Ember.TextField class=\"input block\" valuebinding=\"emailAddresses\"}}\n</code></pre>\n\n<p>Actions:</p>\n\n<pre><code>&lt;button {{action invite emailAddresses}}&gt;Invite&gt;&lt;/button&gt;\n\n&lt;a href=\"#\" {{action set \"isEditingContacts\" true target=\"view\"}} \n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "emmet",
"title": "Emmet",
"url": "/emmet",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"child-\">Child: &gt;</h3>\n\n<pre><code class=\"language-css\">nav&gt;ul&gt;li\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;nav&gt;\n &lt;ul&gt;\n &lt;li&gt;&lt;/li&gt;\n &lt;/ul&gt;\n&lt;/nav&gt;\n</code></pre>\n\n<h3 id=\"sibling-\">Sibling: +</h3>\n\n<pre><code class=\"language-css\">section&gt;p+p+p\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;section&gt;\n &lt;pt&gt;&lt;/p&gt;\n &lt;p&gt;&lt;/p&gt;\n &lt;p&gt;&lt;/p&gt;\n&lt;/section&gt;\n</code></pre>\n\n<h3 id=\"climb-up-\">Climb Up: ^</h3>\n\n<pre><code class=\"language-css\">section&gt;header&gt;h1^footer\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;section&gt;\n &lt;header&gt;\n &lt;h1&gt;&lt;/h1&gt;\n &lt;/header&gt;\n &lt;footer&gt;&lt;/footer&gt;\n&lt;/section&gt;\n</code></pre>\n\n<h3 id=\"grouping-\">Grouping: ()</h3>\n\n<pre><code class=\"language-css\">section&gt;(header&gt;nav&gt;ul&gt;li)+footer&gt;p\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;section&gt;\n &lt;header&gt;\n &lt;nav&gt;\n &lt;ul&gt;\n &lt;li&gt;&lt;/li&gt;\n &lt;/ul&gt;\n &lt;/nav&gt;\n &lt;/header&gt;\n &lt;footer&gt;\n &lt;p&gt;&lt;/p&gt;\n &lt;/footer&gt;\n&lt;/section&gt;\n</code></pre>\n\n<h3 id=\"multiplication-\">Multiplication: *</h3>\n\n<pre><code class=\"language-css\">ul&gt;li*3\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;ul&gt;\n &lt;li&gt;&lt;/li&gt;\n &lt;li&gt;&lt;/li&gt;\n &lt;li&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<h3 id=\"ids-and-classes-\">IDs and Classes: .</h3>\n\n<pre><code class=\"language-css\">ul.menu&gt;li.menu__item+li#id_item+li.menu__item#id_2\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;ul&gt;\n &lt;li class=\"menu__item\"&gt;&lt;/li&gt;\n &lt;li id=\"id_item\"&gt;&lt;/li&gt;\n &lt;li class=\"menu__item\" id=\"id_2\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<h3 id=\"numbering-\">Numbering: $</h3>\n\n<pre><code class=\"language-css\">ul&gt;li.item$*3\nul&gt;li.item$$*3\nul&gt;li.item$@-*3\nul&gt;li.item$@3*5\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;ul&gt;\n &lt;li class=\"item1\"&gt;&lt;/li&gt;\n &lt;li class=\"item2\"&gt;&lt;/li&gt;\n &lt;li class=\"item3\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;ul&gt;\n &lt;li class=\"item01\"&gt;&lt;/li&gt;\n &lt;li class=\"item02\"&gt;&lt;/li&gt;\n &lt;li class=\"item03\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;ul&gt;\n &lt;li class=\"item3\"&gt;&lt;/li&gt;\n &lt;li class=\"item2\"&gt;&lt;/li&gt;\n &lt;li class=\"item1\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;ul&gt;\n &lt;li class=\"item3\"&gt;&lt;/li&gt;\n &lt;li class=\"item4\"&gt;&lt;/li&gt;\n &lt;li class=\"item5\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<h3 id=\"attributes-\">Attributes: []</h3>\n\n<pre><code class=\"language-css\">input[type=\"text\"]\ndiv[data-attr=\"test\"]\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;input type=\"text\" /&gt;\n&lt;div data-attr=\"test\"&gt;&lt;/div&gt;\n</code></pre>\n\n<h3 id=\"text-\">Text: {}</h3>\n\n<pre><code class=\"language-css\">p{Lorem ipsum}\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;p&gt;Lorem ipsum&lt;/p&gt;\n</code></pre>\n\n<h3 id=\"implicit-tags\">Implicit tags</h3>\n\n<pre><code class=\"language-css\">.default-block\nem&gt;.default-inline\nul&gt;.default-list\ntable&gt;.default-table-row&gt;.default-table-column\n</code></pre>\n<p>Expands to</p>\n<pre><code class=\"language-html\">&lt;div class=\"default-block\"&gt;&lt;/div&gt;\n&lt;em&gt;&lt;span class=\"default-inline\"&gt;&lt;/span&gt;&lt;/em&gt;\n&lt;ul&gt;\n &lt;li class=\"default-list\"&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;table&gt;\n &lt;tr class=\"default-table-row\"&gt;\n &lt;td class=\"default-table-column\"&gt;&lt;/td&gt;\n &lt;/tr&gt;\n&lt;/table&gt;\n</code></pre>",
"intro_html": "<p>Emmet is a markup language for expanding CSS rules into HTML</p>",
"description_html": "",
"tags": null,
"updated": "2018-11-10"
},{
"id": "enzyme",
"title": "Enzyme",
"url": "/enzyme",
"category": "React",
"keywords": ["shallow()","mount()","wrap.setProps()","wrap.find().simulate('click')","wrap.contains(<div/>)"],
"content_html": "<h2 id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"mounting\">Mounting</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import {shallow, mount} from 'enzyme'\n</code></pre>\n\n<pre><code class=\"language-js\">wrap = shallow(&lt;MyComponent /&gt;)\n</code></pre>\n\n<pre><code class=\"language-js\">wrap = mount(&lt;MyComponent /&gt;)\n</code></pre>\n\n<p>Shallow wrapping doesn’t descend down to sub-components.\nA full mount also mounts sub-components.</p>\n\n<p>See: <a href=\"http://airbnb.io/enzyme/docs/api/shallow.html\">Shallow rendering</a>,\n<a href=\"http://airbnb.io/enzyme/docs/api/mount.html\">Full rendering</a></p>\n\n<h3 id=\"debugging\">Debugging</h3>\n\n<pre><code class=\"language-js\">console.log(wrap.debug())\n</code></pre>\n\n<p>Shows HTML for debugging purposes.</p>\n\n<p>See: <a href=\"http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html\">debug()</a></p>\n\n<h2 class=\"-three-column\" id=\"examples\">Examples</h2>\n\n<h3 class=\"-prime\" id=\"basic-example\">Basic example</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import { shallow } from 'enzyme'\nimport MyComponent from '../MyComponent'\n</code></pre>\n\n<pre><code class=\"language-js\">it('works', () =&gt; {\n const wrap = shallow(\n &lt;MyComponent name='Groot' /&gt;\n )\n\n expect(wrap.text()).toEqual('I am Groot')\n})\n</code></pre>\n\n<h3 id=\"props-and-state\">Props and state</h3>\n\n<h4 id=\"setting\">Setting</h4>\n\n<pre><code class=\"language-js\">wrap.setProps({ name: 'Moe' })\nwrap.setState({ show: true })\n</code></pre>\n\n<h4 id=\"asserting\">Asserting</h4>\n\n<pre><code class=\"language-js\">expect(wrap.prop('name')).toEqual('Moe')\nexpect(wrap.state('show')).toEqual(true)\n</code></pre>\n\n<pre><code class=\"language-js\">expect('name' in wrap.props()).toEqual('Moe')\nexpect('show' in wrap.state()).toEqual(true)\n</code></pre>\n\n<h3 id=\"matching-elements\">Matching elements</h3>\n\n<pre><code class=\"language-js\">expect(\n wrap.containsMatchingElement(\n &lt;span&gt;I am groot&lt;/span&gt;\n )\n).toBeTruthy()\n</code></pre>\n\n<p><code>containsMatchingElement()</code> is probably the most useful assertion in Jest.</p>\n\n<h3 id=\"snapshots\">Snapshots</h3>\n\n<pre><code class=\"language-js\">expect(wrap).toMatchSnapshot()\n</code></pre>\n\n<p>Be sure you’ve set up enzyme-to-json for snapshots (see <a href=\"#installing\">Installing</a> below).</p>\n\n<h3 id=\"traversions\">Traversions</h3>\n\n<pre><code class=\"language-js\">expect(\n wrap.find('button').text()\n).toEqual('Submit')\n</code></pre>\n\n<p>Use <code>.find()</code> to traverse down to nodes. It will return wrapper objects, too.</p>\n\n<h3 id=\"simulating-events\">Simulating events</h3>\n\n<pre><code class=\"language-js\">wrap.find('input').simulate('click')\n</code></pre>\n\n<h4 id=\"with-event-object-props\">With event object props</h4>\n\n<pre><code class=\"language-js\">wrap.find('input').simulate('change', {\n target: { value: 'hello' }\n})\n</code></pre>\n\n<h2 id=\"installing\">Installing</h2>\n\n<h3 id=\"initial-setup\">Initial setup</h3>\n\n<pre class=\"-setup\"><code>npm install --save-dev enzyme \\\n enzyme-adapter-react-16 \\\n react-test-renderer\n</code></pre>\n\n<h4 id=\"testsetupjs\">test/setup.js</h4>\n\n<pre><code class=\"language-js\">import Enzyme from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n\nEnzyme.configure({ adapter: new Adapter() })\n</code></pre>\n\n<h4 id=\"packagejson\">package.json</h4>\n\n<pre><code class=\"language-js\">\"jest\": {\n \"setupFiles\": [\n \"test/setup.js\"\n ]\n}\n</code></pre>\n\n<p>This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme’s installation instructions.</p>\n\n<p>See: <a href=\"http://airbnb.io/enzyme/#installation\">Installation</a></p>\n\n<h3 id=\"jest-snapshots\">Jest snapshots</h3>\n\n<pre class=\"-setup\"><code>npm install --save-dev enzyme-to-json\n</code></pre>\n\n<h4 id=\"packagejson-1\">package.json</h4>\n\n<pre><code class=\"language-js\">\"jest\": {\n \"snapshotSerializers\": [\n \"enzyme-to-json/serializer\"\n ]\n}\n</code></pre>\n\n<h4 id=\"test\">Test</h4>\n\n<pre><code class=\"language-js\">it('works', () =&gt; {\n wrap = mount(&lt;MyComponent /&gt;)\n expect(wrap).toMatchSnapshot()\n})\n</code></pre>\n\n<p>Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.</p>\n\n<p>See: <a href=\"https://www.npmjs.com/package/enzyme-to-json\">enzyme-to-json</a></p>\n\n<h2 id=\"reactwrapper\">ReactWrapper</h2>\n\n<h3 id=\"traversing\">Traversing</h3>\n\n<pre><code class=\"language-js\">wrap.find('button') // → ReactWrapper\nwrap.filter('button') // → ReactWrapper\nwrap.not('span') // → ReactWrapper (inverse of filter())\nwrap.children() // → ReactWrapper\nwrap.parent() // → ReactWrapper\nwrap.closest('div') // → ReactWrapper\nwrap.childAt(0) // → ReactWrapper\nwrap.at(0) // → ReactWrapper\nwrap.first() // → ReactWrapper\nwrap.last() // → ReactWrapper\n</code></pre>\n\n<pre><code class=\"language-js\">wrap.get(0) // → ReactElement\nwrap.getElement() // → ReactElement\nwrap.getElements() // → Array&lt;ReactElement&gt;\nwrap.getDOMNode() // → DOMComponent\n</code></pre>\n\n<p>See: <a href=\"http://airbnb.io/enzyme/docs/api/mount.html\">Full rendering API</a></p>\n\n<h3 id=\"actions\">Actions</h3>\n\n<pre><code class=\"language-js\">wrap.simulate('click')\n</code></pre>\n\n<h3 id=\"react-components\">React components</h3>\n\n<pre><code class=\"language-js\">wrap.setState({ ··· })\nwrap.setProps({ ··· })\nwrap.setContext({ ··· })\n</code></pre>\n\n<pre><code class=\"language-js\">wrap.state() // get full state\nwrap.props() // get full props\nwrap.context() // get full context\n</code></pre>\n\n<pre><code class=\"language-js\">wrap.state('key') // → any\nwrap.prop('key') // → any\nwrap.context('key') // → any\n</code></pre>\n\n<pre><code class=\"language-js\">wrap.instance() // → ReactComponent\n</code></pre>\n\n<h3 id=\"mount\">Mount</h3>\n\n<pre><code class=\"language-js\">wrap.mount()\nwrap.unmount()\nwrap.update() // calls forceUpdate()\n</code></pre>\n\n<h3 id=\"tests\">Tests</h3>\n\n<pre><code class=\"language-js\">wrap.debug() // → string\nwrap.html() // → string\nwrap.text() // → string\nwrap.type() // → string | function\nwrap.name() // → string\nwrap.is('.classname') // → boolean\nwrap.hasClass('class') // → boolean\nwrap.exists() // → boolean\nwrap.contains(&lt;div /&gt;) // → boolean\nwrap.contains([ &lt;div /&gt; ]) // → boolean\nwrap.some('.child') // → boolean\n\nwrap.someWhere(n =&gt; n.hasClass('foo'))\n\nwrap.containsMatchingElement(&lt;div /&gt;) // → boolean\nwrap.containsAllMatchingElements([ &lt;div /&gt; ]) // → boolean\nwrap.containsAnyMatchingElements([ &lt;div /&gt; ]) // → boolean\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://airbnb.io/enzyme\">Enzyme website</a> <em>(airbnb.io)</em></li>\n <li><a href=\"./enzyme@2\">Enzyme v2 cheatsheet</a> <em>(devhints.io)</em> (old version)</li>\n</ul>",
"intro_html": "<p><a href=\"http://airbnb.io/enzyme\">Enzyme</a> lets you write unit tests for React components. This guide covers Enzyme 3.x.</p>",
"description_html": "",
"tags": ["Featured"],
"updated": "2018-04-27"
},{
"id": "enzyme@2",
"title": "Enzyme v2",
"url": "/enzyme@2",
"category": "React",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"mounting\">Mounting</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import {shallow, mount} from 'enzyme'\n</code></pre>\n\n<pre><code class=\"language-js\">wrap = shallow(&lt;MyComponent /&gt;)\n</code></pre>\n\n<pre><code class=\"language-js\">wrap = mount(&lt;MyComponent /&gt;)\n</code></pre>\n\n<p>Shallow wrapping doesn’t descend down to sub-components.\nA full mount also mounts sub-components.\nSee: <a href=\"http://airbnb.io/enzyme/docs/api/shallow.html\">Shallow rendering</a>,\n<a href=\"http://airbnb.io/enzyme/docs/api/mount.html\">Full rendering</a></p>\n\n<h3 id=\"jest\">Jest</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import toJson from 'enzyme-to-json'\n</code></pre>\n\n<pre><code class=\"language-js\">it('works', () =&gt; {\n wrap = mount(&lt;MyComponent /&gt;)\n expect(toJson(wrap)).toMatchSnapshot()\n})\n</code></pre>\n\n<p>Converts an Enzyme wrapper to a format compatible with Jest snapshots. See: <a href=\"https://www.npmjs.com/package/enzyme-to-json\">enzyme-to-json</a></p>\n\n<h3 id=\"debugging\">Debugging</h3>\n\n<pre><code class=\"language-js\">console.log(wrap.debug())\n</code></pre>\n\n<p>Shows HTML for debugging purposes. See: <a href=\"http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html\">debug()</a></p>\n\n<h2 id=\"reactwrapper\">ReactWrapper</h2>\n\n<h3 id=\"traversing\">Traversing</h3>\n\n<pre><code class=\"language-js\">wrap.find('button') // =&gt; ReactWrapper\nwrap.filter('button') // =&gt; ReactWrapper\nwrap.not('span') // =&gt; ReactWrapper (inverse of filter())\nwrap.children() // =&gt; ReactWrapper\nwrap.parent() // =&gt; ReactWrapper\nwrap.closest('div') // =&gt; ReactWrapper\nwrap.childAt(0) // =&gt; ReactWrapper\nwrap.at(0) // =&gt; ReactWrapper\nwrap.first() // =&gt; ReactWrapper\nwrap.last() // =&gt; ReactWrapper\n</code></pre>\n\n<pre><code class=\"language-js\">wrap.get(0) // =&gt; ReactElement\nwrap.getNode() // =&gt; ReactElement\nwrap.getNodes() // =&gt; Array&lt;ReactElement&gt;\nwrap.getDOMNode() // =&gt; DOMComponent\n</code></pre>\n\n<p>See: <a href=\"http://airbnb.io/enzyme/docs/api/mount.html\">Full rendering API</a></p>\n\n<h3 id=\"actions\">Actions</h3>\n\n<pre><code class=\"language-js\">wrap.simulate('click')\n</code></pre>\n\n<h3 id=\"react-components\">React components</h3>\n\n<pre><code class=\"language-js\">wrap.setState({ ... })\nwrap.setProps({ ... })\nwrap.setContext({ ... })\n\nwrap.state() // =&gt; Any (get state)\nwrap.props() // =&gt; object (get props)\nwrap.context() // =&gt; Any (get context)\n\nwrap.instance() // =&gt; ReactComponent\n</code></pre>\n\n<h3 id=\"mount\">Mount</h3>\n\n<pre><code class=\"language-js\">wrap.mount()\nwrap.unmount()\nwrap.update() // calls forceUpdate()\n</code></pre>\n\n<h3 id=\"tests\">Tests</h3>\n\n<pre><code class=\"language-js\">wrap.debug() // =&gt; string\nwrap.html() // =&gt; string\nwrap.text() // =&gt; string\nwrap.type() // =&gt; string | function\nwrap.name() // =&gt; string\nwrap.is('.classname') // =&gt; boolean\nwrap.hasClass('class') // =&gt; boolean\nwrap.exists() // =&gt; boolean\nwrap.contains(&lt;div /&gt;) // =&gt; boolean\nwrap.contains([ &lt;div /&gt; ]) // =&gt; boolean\n\nwrap.containsMatchingElement(&lt;div /&gt;) // =&gt; boolean\nwrap.containsAllMatchingElements([ &lt;div /&gt; ]) // =&gt; boolean\nwrap.containsAnyMatchingElements([ &lt;div /&gt; ]) // =&gt; boolean\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://airbnb.io/enzyme\">https://airbnb.io/enzyme</a></li>\n</ul>",
"intro_html": "<p><a href=\"http://airbnb.io/enzyme\">Enzyme</a> lets you write unit tests for React components. This guide covers Enzyme 2.x.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-14"
},{
"id": "es6",
"title": "ES2015+",
"url": "/es6",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"block-scoping\">Block scoping</h3>\n\n<h4 id=\"let\">Let</h4>\n\n<pre data-line=\"2,4\"><code class=\"language-js\">function fn () {\n let x = 0\n if (true) {\n let x = 1 // only inside this `if`\n }\n}\n</code></pre>\n\n<h4 id=\"const\">Const</h4>\n\n<pre><code class=\"language-js\">const a = 1\n</code></pre>\n\n<p><code>let</code> is the new <code>var</code>. Constants work just like <code>let</code>, but can’t be reassigned.\nSee: <a href=\"https://babeljs.io/learn-es2015/#let--const\">Let and const</a></p>\n\n<h3 id=\"backtick-strings\">Backtick strings</h3>\n\n<h4 id=\"interpolation\">Interpolation</h4>\n\n<pre><code class=\"language-js\">const message = `Hello ${name}`\n</code></pre>\n\n<h4 id=\"multiline-strings\">Multiline strings</h4>\n\n<pre><code class=\"language-js\">const str = `\nhello\nworld\n`\n</code></pre>\n\n<p>Templates and multiline strings.\nSee: <a href=\"https://babeljs.io/learn-es2015/#template-strings\">Template strings</a></p>\n\n<h3 id=\"binary-and-octal-literals\">Binary and octal literals</h3>\n\n<pre><code class=\"language-js\">let bin = 0b1010010\nlet oct = 0o755\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#binary-and-octal-literals\">Binary and octal literals</a></p>\n\n<h3 id=\"new-methods\">New methods</h3>\n\n<h4 id=\"new-string-methods\">New string methods</h4>\n\n<pre><code class=\"language-js\">\"hello\".repeat(3)\n\"hello\".includes(\"ll\")\n\"hello\".startsWith(\"he\")\n\"hello\".padStart(8) // \" hello\"\n\"hello\".padEnd(8) // \"hello \" \n\"hello\".padEnd(8, '!') // hello!!!\n\"\\u1E9B\\u0323\".normalize(\"NFC\")\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#math--number--string--object-apis\">New methods</a></p>\n\n<h3 id=\"classes\">Classes</h3>\n\n<pre><code class=\"language-js\">class Circle extends Shape {\n</code></pre>\n\n<h4 id=\"constructor\">Constructor</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\"> constructor (radius) {\n this.radius = radius\n }\n</code></pre>\n\n<h4 id=\"methods\">Methods</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\"> getArea () {\n return Math.PI * 2 * this.radius\n }\n</code></pre>\n\n<h4 id=\"calling-superclass-methods\">Calling superclass methods</h4>\n\n<pre data-line=\"2\"><code class=\"language-js\"> expand (n) {\n return super.expand(n) * Math.PI\n }\n</code></pre>\n\n<h4 id=\"static-methods\">Static methods</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\"> static createFromDiameter(diameter) {\n return new Circle(diameter / 2)\n }\n}\n</code></pre>\n\n<p>Syntactic sugar for prototypes.\nSee: <a href=\"https://babeljs.io/learn-es2015/#classes\">Classes</a></p>\n\n<h3 id=\"exponent-operator\">Exponent operator</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">const byte = 2 ** 8\n// Same as: Math.pow(2, 8)\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"promises\">Promises</h2>\n\n<h3 id=\"making-promises\">Making promises</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">new Promise((resolve, reject) =&gt; {\n if (ok) { resolve(result) }\n else { reject(error) }\n})\n</code></pre>\n\n<p>For asynchronous programming.\nSee: <a href=\"https://babeljs.io/learn-es2015/#promises\">Promises</a></p>\n\n<h3 id=\"using-promises\">Using promises</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">promise\n .then((result) =&gt; { ··· })\n .catch((error) =&gt; { ··· })\n</code></pre>\n\n<h3 id=\"using-promises-with-finally\">Using promises with finally</h3>\n\n<pre data-line=\"4\"><code class=\"language-js\">promise\n .then((result) =&gt; { ··· })\n .catch((error) =&gt; { ··· })\n .finally(() =&gt; { // logic independent of success/error })\n</code></pre>\n\n<p>The handler is called when the promise is fulfilled or rejected.</p>\n\n<h3 id=\"promise-functions\">Promise functions</h3>\n\n<pre><code class=\"language-js\">Promise.all(···)\nPromise.race(···)\nPromise.reject(···)\nPromise.resolve(···)\n</code></pre>\n\n<h3 id=\"async-await\">Async-await</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">async function run () {\n const user = await getUser()\n const tweets = await getTweets(user)\n return [user, tweets]\n}\n</code></pre>\n\n<p><code>async</code> functions are another way of using functions.</p>\n\n<p>See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function\">async function</a></p>\n\n<h2 class=\"-three-column\" id=\"destructuring\">Destructuring</h2>\n\n<h3 id=\"destructuring-assignment\">Destructuring assignment</h3>\n\n<h4 id=\"arrays\">Arrays</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">const [first, last] = ['Nikola', 'Tesla']\n</code></pre>\n\n<h4 id=\"objects\">Objects</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">let {title, author} = {\n title: 'The Silkworm',\n author: 'R. Galbraith'\n}\n</code></pre>\n\n<p>Supports for matching arrays and objects.\nSee: <a href=\"https://babeljs.io/learn-es2015/#destructuring\">Destructuring</a></p>\n\n<h3 id=\"default-values\">Default values</h3>\n\n<pre><code class=\"language-js\">const scores = [22, 33]\nconst [math = 50, sci = 50, arts = 50] = scores\n</code></pre>\n\n<pre><code class=\"language-js\">// Result:\n// math === 22, sci === 33, arts === 50\n</code></pre>\n\n<p>Default values can be assigned while destructuring arrays or objects.</p>\n\n<h3 id=\"function-arguments\">Function arguments</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">function greet({ name, greeting }) {\n console.log(`${greeting}, ${name}!`)\n}\n</code></pre>\n\n<pre><code class=\"language-js\">greet({ name: 'Larry', greeting: 'Ahoy' })\n</code></pre>\n\n<p>Destructuring of objects and arrays can also be done in function arguments.</p>\n\n<h3 id=\"default-values-1\">Default values</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">function greet({ name = 'Rauno' } = {}) {\n console.log(`Hi ${name}!`);\n}\n</code></pre>\n\n<pre><code class=\"language-js\">greet() // Hi Rauno!\ngreet({ name: 'Larry' }) // Hi Larry!\n</code></pre>\n\n<h3 id=\"reassigning-keys\">Reassigning keys</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">function printCoordinates({ left: x, top: y }) {\n console.log(`x: ${x}, y: ${y}`)\n}\n</code></pre>\n\n<pre><code class=\"language-js\">printCoordinates({ left: 25, top: 90 })\n</code></pre>\n\n<p>This example assigns <code>x</code> to the value of the <code>left</code> key.</p>\n\n<h3 id=\"loops\">Loops</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">for (let {title, artist} of songs) {\n ···\n}\n</code></pre>\n\n<p>The assignment expressions work in loops, too.</p>\n\n<h3 id=\"object-destructuring\">Object destructuring</h3>\n\n<pre data-line=\"1\"><code class=\"language-js\">const { id, ...detail } = song;\n</code></pre>\n\n<p>Extract some keys individually and remaining keys in the object using rest (…) operator</p>\n\n<h2 id=\"spread\">Spread</h2>\n\n<h3 id=\"object-spread\">Object spread</h3>\n\n<h4 id=\"with-object-spread\">with Object spread</h4>\n\n<pre data-line=\"2\"><code class=\"language-js\">const options = {\n ...defaults,\n visible: true\n}\n</code></pre>\n\n<h4 id=\"without-object-spread\">without Object spread</h4>\n\n<pre><code class=\"language-js\">const options = Object.assign(\n {}, defaults,\n { visible: true })\n</code></pre>\n\n<p>The Object spread operator lets you build new objects from other objects.</p>\n\n<p>See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\">Object spread</a></p>\n\n<h3 id=\"array-spread\">Array spread</h3>\n\n<h4 id=\"with-array-spread\">with Array spread</h4>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">const users = [\n ...admins,\n ...editors,\n 'rstacruz'\n]\n</code></pre>\n\n<h4 id=\"without-array-spread\">without Array spread</h4>\n\n<pre><code class=\"language-js\">const users = admins\n .concat(editors)\n .concat([ 'rstacruz' ])\n</code></pre>\n\n<p>The spread operator lets you build new arrays in the same way.</p>\n\n<p>See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\">Spread operator</a></p>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 id=\"function-arguments-1\">Function arguments</h3>\n\n<h4 id=\"default-arguments\">Default arguments</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">function greet (name = 'Jerry') {\n return `Hello ${name}`\n}\n</code></pre>\n\n<h4 id=\"rest-arguments\">Rest arguments</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">function fn(x, ...y) {\n // y is an Array\n return x * y.length\n}\n</code></pre>\n\n<h4 id=\"spread-1\">Spread</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">fn(...[1, 2, 3])\n// same as fn(1, 2, 3)\n</code></pre>\n\n<p>Default, rest, spread.\nSee: <a href=\"https://babeljs.io/learn-es2015/#default--rest--spread\">Function arguments</a></p>\n\n<h3 id=\"fat-arrows\">Fat arrows</h3>\n\n<h4 id=\"fat-arrows-1\">Fat arrows</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">setTimeout(() =&gt; {\n ···\n})\n</code></pre>\n\n<h4 id=\"with-arguments\">With arguments</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">readFile('text.txt', (err, data) =&gt; {\n ...\n})\n</code></pre>\n\n<h4 id=\"implicit-return\">Implicit return</h4>\n<pre data-line=\"1,4,5,6\"><code class=\"language-js\">numbers.map(n =&gt; n * 2)\n// No curly braces = implicit return\n// Same as: numbers.map(function (n) { return n * 2 })\nnumbers.map(n =&gt; ({\n result: n * 2\n}))\n// Implicitly returning objects requires parentheses around the object\n</code></pre>\n\n<p>Like functions but with <code>this</code> preserved.\nSee: <a href=\"https://babeljs.io/learn-es2015/#arrows-and-lexical-this\">Fat arrows</a></p>\n\n<h2 id=\"objects-1\">Objects</h2>\n\n<h3 id=\"shorthand-syntax\">Shorthand syntax</h3>\n\n<pre><code class=\"language-js\">module.exports = { hello, bye }\n// Same as: module.exports = { hello: hello, bye: bye }\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#enhanced-object-literals\">Object literal enhancements</a></p>\n\n<h3 id=\"methods-1\">Methods</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">const App = {\n start () {\n console.log('running')\n }\n}\n// Same as: App = { start: function () {···} }\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#enhanced-object-literals\">Object literal enhancements</a></p>\n\n<h3 id=\"getters-and-setters\">Getters and setters</h3>\n\n<pre data-line=\"2,5\"><code class=\"language-js\">const App = {\n get closed () {\n return this.status === 'closed'\n },\n set closed (value) {\n this.status = value ? 'closed' : 'open'\n }\n}\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#enhanced-object-literals\">Object literal enhancements</a></p>\n\n<h3 id=\"computed-property-names\">Computed property names</h3>\n\n<pre data-line=\"3\"><code class=\"language-js\">let event = 'click'\nlet handlers = {\n [`on${event}`]: true\n}\n// Same as: handlers = { 'onclick': true }\n</code></pre>\n\n<p>See: <a href=\"https://babeljs.io/learn-es2015/#enhanced-object-literals\">Object literal enhancements</a></p>\n\n<h3 id=\"extract-values\">Extract values</h3>\n\n<pre><code class=\"language-js\">const fatherJS = { age: 57, name: \"Brendan Eich\" }\n\nObject.values(fatherJS)\n// [57, \"Brendan Eich\"]\nObject.entries(fatherJS)\n// [[\"age\", 57], [\"name\", \"Brendan Eich\"]]\n</code></pre>\n\n<h2 data-line=\"3,5\" id=\"modules\">Modules</h2>\n\n<h3 id=\"imports\">Imports</h3>\n\n<pre><code class=\"language-js\">import 'helpers'\n// aka: require('···')\n</code></pre>\n\n<pre><code class=\"language-js\">import Express from 'express'\n// aka: const Express = require('···').default || require('···')\n</code></pre>\n\n<pre><code class=\"language-js\">import { indent } from 'helpers'\n// aka: const indent = require('···').indent\n</code></pre>\n\n<pre><code class=\"language-js\">import * as Helpers from 'helpers'\n// aka: const Helpers = require('···')\n</code></pre>\n\n<pre><code class=\"language-js\">import { indentSpaces as indent } from 'helpers'\n// aka: const indent = require('···').indentSpaces\n</code></pre>\n\n<p><code>import</code> is the new <code>require()</code>.\nSee: <a href=\"https://babeljs.io/learn-es2015/#modules\">Module imports</a></p>\n\n<h3 id=\"exports\">Exports</h3>\n\n<pre><code class=\"language-js\">export default function () { ··· }\n// aka: module.exports.default = ···\n</code></pre>\n\n<pre><code class=\"language-js\">export function mymethod () { ··· }\n// aka: module.exports.mymethod = ···\n</code></pre>\n\n<pre><code class=\"language-js\">export const pi = 3.14159\n// aka: module.exports.pi = ···\n</code></pre>\n\n<p><code>export</code> is the new <code>module.exports</code>.\nSee: <a href=\"https://babeljs.io/learn-es2015/#modules\">Module exports</a></p>\n\n<h2 id=\"generators\">Generators</h2>\n\n<h3 id=\"generators-1\">Generators</h3>\n\n<pre><code class=\"language-js\">function* idMaker () {\n let id = 0\n while (true) { yield id++ }\n}\n</code></pre>\n\n<pre><code class=\"language-js\">let gen = idMaker()\ngen.next().value // → 0\ngen.next().value // → 1\ngen.next().value // → 2\n</code></pre>\n\n<p>It’s complicated.\nSee: <a href=\"https://babeljs.io/learn-es2015/#generators\">Generators</a></p>\n\n<h3 id=\"forof-iteration\">For..of iteration</h3>\n\n<pre><code class=\"language-js\">for (let i of iterable) {\n ···\n}\n</code></pre>\n\n<p>For iterating through generators and arrays.\nSee: <a href=\"https://babeljs.io/learn-es2015/#iterators--forof\">For..of iteration</a></p>",
"intro_html": "<p>A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond.</p>",
"description_html": "",
"tags": ["Featured"],
"updated": "2017-10-21"
},{
"id": "ets",
"title": "Erlang ETS",
"url": "/ets",
"category": "Elixir",
"keywords": null,
"content_html": "<h2 id=\"ets\">ETS</h2>\n\n<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-elixir\">iex&gt; table = :ets.new(:my_table, [])\n 8211\n</code></pre>\n\n<pre><code class=\"language-elixir\">iex&gt; :ets.insert(table, {:fruit, \"Apple\"})\niex&gt; :ets.lookup(table, :fruit)\n [{:fruit, \"Apple\"}]\n</code></pre>\n\n<pre><code class=\"language-elixir\">iex&gt; :ets.delete(table)\niex&gt; :ets.delete_all_objects(table)\n</code></pre>\n\n<h3 id=\"flags\">Flags</h3>\n\n<pre class=\"-setup\"><code class=\"language-elixir\">iex&gt; table = :ets.new(:my_table, [:set, :protected])\n</code></pre>\n\n<table>\n <tbody>\n <tr>\n <td><code>:set</code></td>\n <td>no duplicate keys (or: <code>:ordered_set</code>, <code>:bag</code>, <code>:duplicate_bag</code>)</td>\n </tr>\n <tr>\n <td><code>:protected</code></td>\n <td>only this process can use it (or: <code>:public</code>, <code>:private</code>)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"ordered-sets\">Ordered sets</h3>\n\n<pre><code class=\"language-elixir\">:ets.first(table)\n:ets.last(table)\n:ets.next(table, key)\n:ets.prev(table, key)\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://erlang.org/doc/man/ets.html\">http://erlang.org/doc/man/ets.html</a></li>\n <li><a href=\"http://learnyousomeerlang.com/ets\">http://learnyousomeerlang.com/ets</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "expectjs",
"title": "expect.js",
"url": "/expectjs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"using\">Using</h3>\n\n<pre class=\"-setup\"><code>npm install --save-dev expect\n</code></pre>\n\n<pre><code class=\"language-js\">// using ES6 modules\nimport expect, { createSpy, spyOn, isSpy } from 'expect'\n</code></pre>\n\n<pre><code class=\"language-js\">// using CommonJS modules\nvar expect = require('expect')\nvar createSpy = expect.createSpy\nvar spyOn = expect.spyOn\nvar isSpy = expect.isSpy\n</code></pre>\n\n<p>Expect is a library for assertions in tests.\nSee: <a href=\"https://github.com/mjackson/expect\">mjackson/expect</a></p>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code class=\"language-js\">expect(x).toBe(y)\n .toBe(val)\n .toEqual(val)\n .toThrow(err)\n .toExist() // aka: toBeTruthy()\n .toNotExist() // aka: toBeFalsy()\n .toBeA(constructor)\n .toBeA('string')\n .toMatch(/expr/)\n .toBeLessThan(n)\n .toBeGreaterThan(n)\n .toBeLessThanOrEqualTo(n)\n .toBeGreaterThanOrEqualTo(n)\n .toInclude(val) // aka: toContain(val)\n .toExclude(val)\n .toIncludeKey(key)\n .toExcludeKey(key)\n</code></pre>\n\n<p>Also: <code>toNotBe</code>, <code>toNotEqual</code>, etc for negatives.</p>\n\n<h3 id=\"chaining-assertions\">Chaining assertions</h3>\n\n<pre><code class=\"language-js\">expect(3.14)\n .toExist()\n .toBeLessThan(4)\n .toBeGreaterThan(3)\n</code></pre>\n\n<p>Assertions can be chained.</p>\n\n<h3 id=\"spies\">Spies</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">const video = {\n play: function () { ··· }\n}\n</code></pre>\n\n<pre><code class=\"language-js\">spy = expect.spyOn(video, 'play')\n</code></pre>\n\n<pre><code class=\"language-js\">spy = expect.spyOn(···)\n .andCallThrough() // pass through\n .andCall(fn)\n .andThrow(exception)\n .andReturn(value)\n</code></pre>\n\n<h3 id=\"assertions-on-spies\">Assertions on spies</h3>\n\n<pre><code class=\"language-js\">expect(spy.calls.length).toEqual(1)\nexpect(spy.calls[0].context).toBe(video)\nexpect(spy.calls[0].arguments).toEqual([ 'some', 'args' ])\nexpect(spy.getLastCall().arguments).toEqual(...)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(spy).toHaveBeenCalled()\nexpect(spy).toHaveBeenCalledWith('some', 'args')\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://www.npmjs.com/package/expect\">https://www.npmjs.com/package/expect</a></li>\n <li><a href=\"https://github.com/mjackson/expect\">https://github.com/mjackson/expect</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-02"
},{
"id": "express",
"title": "Express.js",
"url": "/express",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"settings\">Settings</h3>\n\n<pre><code class=\"language-js\">app.set('x', 'yyy')\napp.get('x') //=&gt; 'yyy'\n\napp.enable('trust proxy')\napp.disable('trust proxy')\n\napp.enabled('trust proxy') //=&gt; true\n</code></pre>\n\n<h3 id=\"env\">Env</h3>\n\n<pre><code class=\"language-js\">app.get('env')\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n\n<pre><code class=\"language-js\">app.configure('production', function() {\n app.set...\n})\n</code></pre>\n\n<h3 id=\"wares\">Wares</h3>\n\n<pre><code class=\"language-js\">app.use(express.static(__dirname + '/public'))\napp.use(express.logger())\n</code></pre>\n\n<h3 id=\"helpers\">Helpers</h3>\n\n<pre><code class=\"language-js\">app.locals({\n title: \"MyApp\",\n})\n</code></pre>\n\n<h2 id=\"request--response\">Request &amp; response</h2>\n\n<h3 id=\"request\">Request</h3>\n\n<pre><code class=\"language-js\">// GET /user/tj\nreq.path //=&gt; \"/user/tj\"\nreq.url //=&gt; \"/user/tj\"\nreq.xhr //=&gt; true|false\nreq.method //=&gt; \"GET\"\nreq.params\nreq.params.name //=&gt; \"tj\"\nreq.params[0]\n</code></pre>\n\n<pre><code class=\"language-js\">// GET /search?q=tobi+ferret\nreq.query.q // =&gt; \"tobi ferret\"\n</code></pre>\n\n<pre><code class=\"language-js\">req.cookies\n</code></pre>\n\n<pre><code class=\"language-js\">req.accepted\n// [ { value: 'application/json', quality: 1, type: 'application', subtype: 'json' },\n// { value: 'text/html', quality: 0.5, type: 'text',subtype: 'html' } ]\n</code></pre>\n\n<pre><code class=\"language-js\">req.is('html')\nreq.is('text/html')\n</code></pre>\n\n<pre><code class=\"language-js\">req.headers\nreq.headers['host']\nreq.headers['user-agent']\nreq.headers['accept-encoding']\nreq.headers['accept-language']\n</code></pre>\n\n<h3 id=\"response\">Response</h3>\n\n<pre><code class=\"language-js\">res.redirect('/')\nres.redirect(301, '/')\n</code></pre>\n\n<pre><code class=\"language-js\">res.set('Content-Type', 'text/html')\n</code></pre>\n\n<pre><code class=\"language-js\">res.send('hi')\nres.send(200, 'hi')\n</code></pre>\n\n<pre><code class=\"language-js\">res.json({ a: 2 })\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "exunit",
"title": "ExUnit",
"url": "/exunit",
"category": "Elixir",
"keywords": null,
"content_html": "<h3 id=\"test-cases\">Test cases</h3>\n\n<pre><code class=\"language-elixir\">defmodule MyTest do\n use ExUnit.Case\n use ExUnit.Case, async: true # for async\n\n test \"the truth\" do\n assert 1 + 1 == 2\n end\nend\n</code></pre>\n\n<h3 id=\"capture-io\">Capture IO</h3>\n\n<pre><code class=\"language-elixir\">import ExUnit.CaptureIO\n\ntest \"capture io\" do\n result = capture_io(fn -&gt;\n IO.puts \"sup\"\n end)\n\n assert result == \"sup\\n\"\nend\n</code></pre>\n\n<h3 id=\"capture-logs\">Capture logs</h3>\n\n<pre><code class=\"language-elixir\">config :ex_unit, capture_logs: true\n</code></pre>\n\n<h3 id=\"async\">Async</h3>\n\n<pre><code class=\"language-elixir\">defmodule AssertionTest do\n # run concurrently with other test cases\n use ExUnit.Case, async: true\nend\n</code></pre>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code class=\"language-elixir\">assert x == y\nrefute x == y\n\nassert_raise ArithmeticError, fn -&gt;\n 1 + \"test\"\nend\n\nassert_raise ArithmeticError, \"message\", fn -&gt; ...\nassert_raise ArithmeticError, ~r/message/, fn -&gt; ...\n\nflunk \"This should've been an error\"\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/elixir/ex_unit/exunit.assertions\">Assertions</a></p>\n\n<h2 id=\"setup\">Setup</h2>\n\n<h3 id=\"pattern-matching\">Pattern matching</h3>\n\n<pre><code class=\"language-elixir\">setup do\n {:ok, name: \"John\"}\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">test \"it works\", %{name: name} do\n assert name == \"John\"\nend\n</code></pre>\n\n<h3 id=\"setup-1\">Setup</h3>\n\n<pre><code class=\"language-elixir\">defp my_hook(_context) do\n # Invoked in every block in \"a block\"\n {:ok, name: \"John\", age: 54}\nend\n\ndescribe \"a block\" do\n setup [:my_hook]\n \n test \"John's age\", context do\n assert context[:name] == \"John\"\n assert context[:age] == 54\n end\nend\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://devdocs.io/elixir/ex_unit/exunit#configure/1\">ExUnit Docs</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "factory_bot",
"title": "Factory Bot",
"url": "/factory_bot",
"category": "Ruby libraries",
"keywords": ["FactoryBot.define do","factory :user","first_name 'John'","sequence(:username) { |n| \"user#{n}\" }"],
"content_html": "<h2 class=\"-three-column\" id=\"factories\">Factories</h2>\n\n<h3 id=\"defining-factories\">Defining factories</h3>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">FactoryBot.define do\n factory :user do\n first_name { 'John' }\n last_name { 'Doe' }\n birthdate { 21.years.ago }\n admin { false }\n\n sequence(:username) { |n| \"user#{n}\" }\n end\nend\n</code></pre>\n\n<p>See: <a href=\"http://www.rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md#Defining_factories\">Defining factories</a></p>\n\n<h3 id=\"extra-options\">Extra options</h3>\n\n<h4 id=\"custom-class-names\">Custom class names</h4>\n\n<pre><code class=\"language-ruby\">factory :user, class: 'User' do\n ···\nend\n</code></pre>\n\n<h4 id=\"aliases\">Aliases</h4>\n\n<pre><code class=\"language-ruby\">factory :user, aliases: [:author] do\n ···\nend\n</code></pre>\n\n<h3 id=\"using\">Using</h3>\n\n<h4 id=\"build-a-model\">Build a model</h4>\n\n<pre><code class=\"language-ruby\">FactoryBot.build(:user)\n</code></pre>\n\n<h4 id=\"other-ways\">Other ways</h4>\n\n<pre><code class=\"language-ruby\">build(:user) # → model (not saved)\ncreate(:user) # → model (saved)\nattributes_for(:user) # → hash\nbuild_stubbed(:user) # stubbed out attributes\n</code></pre>\n\n<h4 id=\"with-options\">With options</h4>\n\n<pre><code class=\"language-ruby\">build(:user, name: 'John')\n</code></pre>\n\n<h4 id=\"lists\">Lists</h4>\n\n<pre><code class=\"language-ruby\">create_list(:user, 3)\nbuild_list(:user, 3)\n</code></pre>\n\n<h2 id=\"associations\">Associations</h2>\n\n<h3 id=\"defining\">Defining</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-ruby\">factory :post do\n association :author, factory: :user\n association :author, factory: [:user, :admin]\nend\n</code></pre>\n\n<h4 id=\"or\">or</h4>\n\n<pre><code class=\"language-ruby\">factory :post do\n author # assumes there's a factory :author\nend\n</code></pre>\n\n<h3 id=\"after-create-hooks\">After-create hooks</h3>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">factory :post do\n after :create do |post|\n create :theme, post: post # has_one\n create_list :comment, 3, post: post # has_many\n end\nend\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"other-features\">Other features</h2>\n\n<h3 id=\"traits\">Traits</h3>\n\n<pre data-line=\"2,3,4\"><code class=\"language-ruby\">factory :user do\n trait :admin do\n admin { true }\n end\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">create :user, :admin\n</code></pre>\n\n<p>Traits allow you to group attributes together.\nSee: <a href=\"http://www.rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md#Traits\">Traits</a></p>\n\n<h3 id=\"nested-factories\">Nested factories</h3>\n\n<pre data-line=\"4,5,6\"><code class=\"language-ruby\">factory :user do\n first_name { 'John' }\n\n factory :sample_user do\n first_name { FFaker::Name.first_name }\n end\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">create :sample_user\n</code></pre>\n\n<p>See: <a href=\"http://www.rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md#Inheritance\">Inheritance</a></p>\n\n<h3 id=\"sub-factories\">Sub-factories</h3>\n\n<pre><code class=\"language-ruby\">factory :user do\n ···\nend\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-ruby\">factory :sample_user, parent: :user do\n first_name { FFaker::Name.first_name }\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">create :sample_user\n</code></pre>\n\n<p>Works the same as nested factories.</p>\n\n<h3 id=\"options-transients\">Options (transients)</h3>\n\n<pre data-line=\"2,3,4\"><code class=\"language-ruby\">factory :user do\n transient do\n upcased { true }\n end\n\n after :create do |user, options|\n user.name.upcase! if options.upcased\n end\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">create(user, upcased: true)\n</code></pre>\n\n<p>Transient attributes will not get passed to the model, but will be available in after-create hooks.\nSee: <a href=\"http://www.rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md#Transient_Attributes\">Transient attributes</a></p>\n\n<h3 id=\"paths\">Paths</h3>\n\n<ul>\n <li>test/factories.rb</li>\n <li>spec/factories.rb</li>\n <li>test/factories/*.rb</li>\n <li>spec/factories/*.rb</li>\n</ul>\n\n<p class=\"-setup\">Place your factories in these locations.</p>\n\n<h2 class=\"-one-column\" id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"http://rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md\">http://rubydoc.info/gems/factory_bot/file/GETTING_STARTED.md</a></li>\n</ul>",
"intro_html": "<p><a href=\"http://www.rubydoc.info/gems/factory_bot/\">Factory Bot</a> is a helper for writing factories for Ruby tests.\nIt was previously known as Factory Girl. For older versions, use <code>FactoryGirl</code> instead of <code>FactoryBot</code>.</p>",
"description_html": "",
"tags": ["Featurable"],
"updated": "2020-06-24"
},{
"id": "fastify",
"title": "Fastify",
"url": "/fastify",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"hello-world\">Hello world</h3>\n\n<pre><code class=\"language-js\">const fastify = require('fastify')()\n\nfastify.get('/', (req, reply) =&gt; {\n reply.send({ hello: 'world' })\n})\n\nfastify.listen(3000, err =&gt; {\n if (err) throw err\n const port = fastify.server.address().port\n console.log(`server listening on ${port}`)\n})\n</code></pre>\n\n<h3 id=\"plugins\">Plugins</h3>\n\n<h4 id=\"appjs\">app.js</h4>\n\n<pre><code class=\"language-js\">fastify.register(require('./route'))\n</code></pre>\n\n<h4 id=\"routejs\">route.js</h4>\n\n<pre><code class=\"language-js\">function (fastify, opts, next) {\n fastify.get('/', (req, reply) =&gt; {\n reply.send({ hello: 'world' })\n })\n\n next()\n})\n</code></pre>\n\n<p>Compose your app functionality into plugins. Plugins are simply functions.</p>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Plugins.md\">Plugins</a></p>\n\n<h2 id=\"routes\">Routes</h2>\n\n<h3 id=\"writing-routes\">Writing routes</h3>\n\n<pre><code class=\"language-js\">fastify.route({\n method: 'GET',\n url: '/',\n schema: { ··· },\n handler: (req, reply) =&gt; { ··· }\n beforeHandler: (req, reply, done) =&gt; { ··· }\n})\n</code></pre>\n\n<h3 id=\"shorthand-declarations\">Shorthand declarations</h3>\n\n<pre><code class=\"language-js\">fastify.get(path, [options], handler)\nfastify.head(···)\nfastify.post(···)\nfastify.put(···)\nfastify.delete(···)\nfastify.options(···)\nfastify.patch(···)\n</code></pre>\n\n<h3 id=\"asyncawait\">Async/await</h3>\n\n<pre><code class=\"language-js\">fastify.get('/', options, async (req, reply) =&gt; {\n return data\n // or\n reply.send(data)\n})\n</code></pre>\n\n<p>When using async functions, you can either <code>return</code> data or use <code>reply.send</code>.</p>\n\n<h2 id=\"requestreply\">Request/reply</h2>\n\n<h3 id=\"request\">Request</h3>\n\n<pre><code class=\"language-js\">request.query\nrequest.body\nrequest.params\nrequest.headers\nrequest.req // Node.js core\nrequest.log.info('hello')\n</code></pre>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Request.md\">Request</a></p>\n\n<h3 id=\"reply\">Reply</h3>\n\n<h4 id=\"response-headers\">Response headers</h4>\n\n<pre><code class=\"language-js\">reply.code(404)\nreply.header('Content-Type', 'text/html')\nreply.type('text/html')\n</code></pre>\n\n<h4 id=\"redirects\">Redirects</h4>\n\n<pre><code class=\"language-js\">reply.redirect('/foo')\nreply.redirect(302, '/foo')\n</code></pre>\n\n<h4 id=\"sending\">Sending</h4>\n\n<pre><code class=\"language-js\">reply.send(payload)\nreply.sent // → true|false\n</code></pre>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Reply.md\">Reply</a></p>\n\n<h3 id=\"json-schema\">JSON schema</h3>\n\n<h4 id=\"define-a-json-schema\">Define a JSON schema</h4>\n\n<pre><code class=\"language-js\">const schema = {\n querystring: {\n name: { type: 'string' },\n excitement: { type: 'integer' }\n },\n response: {\n 200: {\n type: 'object',\n properties: {\n hello: { type: 'string' }\n }\n }\n }\n}\n</code></pre>\n\n<h4 id=\"pass-it-to-the-route\">Pass it to the route</h4>\n\n<pre data-line=\"1\"><code class=\"language-js\">fastify.get('/', { schema }, (req, reply) =&gt; {\n ···\n})\n</code></pre>\n\n<h4 id=\"or-same-as-above\">or (same as above)</h4>\n\n<pre data-line=\"4\"><code class=\"language-js\">fastify.route({\n method: 'GET',\n url: '/',\n schema,\n handler: (req, reply) =&gt; { ··· }\n})\n</code></pre>\n\n<p>By defining a JSON schema, you get validation and improved performance.</p>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Validation-And-Serialize.md\">Validation and serialize</a></p>\n\n<h2 id=\"plugins-1\">Plugins</h2>\n\n<h3 id=\"with-function\">With function</h3>\n\n<pre data-line=\"3\"><code class=\"language-js\">fastify.register(\n require('./route'),\n err =&gt; { if (err) throw err }\n)\n</code></pre>\n\n<h4 id=\"routejs-1\">route.js</h4>\n\n<pre><code class=\"language-js\">module.exports = (fastify, options, next) =&gt; {\n fastify.get('/', ···)\n next()\n}\n</code></pre>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Getting-Started.md#register\">Register</a></p>\n\n<h3 id=\"multiple\">Multiple</h3>\n\n<pre><code class=\"language-js\">fastify.register([\n require('./another-route'),\n require('./yet-another-route')\n], opts, (err) =&gt; {\n if (err) throw err\n})\n</code></pre>\n\n<p>You can pass arrays to <code>register()</code>.</p>\n\n<h3 id=\"register-with-prefix\">Register with prefix</h3>\n\n<pre><code class=\"language-js\">fastify.register(\n require('./route'),\n { prefix: '/v1' }\n)\n</code></pre>\n\n<p>This prefixes all routes in that module.</p>\n\n<h3 id=\"helmet\">Helmet</h3>\n\n<pre><code class=\"language-js\">const helmet = require('fastify-helmet')\n\nfastify.register(helmet)\n</code></pre>\n\n<p>See: <a href=\"https://github.com/fastify/fastify-helmet\">fastify-helmet</a></p>\n\n<h3 id=\"fastify-plugin\">fastify-plugin</h3>\n\n<pre><code class=\"language-js\">const fp = require('fastify-plugin')\n\nmodule.exports = fp((fastify, opts, next) =&gt; {\n // your plugin code\n fastify.decorate('utility', () =&gt; {})\n\n next()\n}, '0.x')\n</code></pre>\n\n<p>Allows you to limit Fastify versions via semver, and allows you not make a new Fastify scope.</p>\n\n<p>See: <a href=\"https://github.com/fastify/fastify-plugin\">fastify-plugin</a></p>\n\n<h3 id=\"decorators\">Decorators</h3>\n\n<h2 id=\"middleware\">Middleware</h2>\n\n<h3 id=\"middleware-1\">Middleware</h3>\n\n<pre><code class=\"language-js\">fastify.use(require('cors')())\nfastify.use(require('dns-prefetch-control')())\nfastify.use(require('frameguard')())\nfastify.use(require('hide-powered-by')())\nfastify.use(require('hsts')())\nfastify.use(require('ienoopen')())\nfastify.use(require('x-xss-protection')())\n</code></pre>\n\n<p>Compatible with Express and Restify middlewares. (Don’t use these middleware, these are covered by <a href=\"https://github.com/fastify/fastify-helmet\">fastify-helmet</a>.)</p>\n\n<p>See: <a href=\"https://github.com/fastify/fastify/blob/master/docs/Middlewares.md\">Middlewares</a></p>\n\n<h2 id=\"template-rendering\">Template rendering</h2>\n\n<h3 id=\"point-of-view\">point-of-view</h3>\n\n<pre data-line=\"3\"><code class=\"language-js\">const fastify = require('fastify')()\n\nfastify.register(require('point-of-view'), {\n engine: {\n ejs: require('ejs')\n }\n})\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-js\">fastify.get('/', (req, reply) =&gt; {\n reply.view('/templates/index.ejs', { text: 'text' })\n})\n</code></pre>\n\n<p>Support <code>ejs</code>, <code>pug</code>, <code>handlebars</code> and <code>marko</code>.</p>\n\n<p>See: <a href=\"https://github.com/fastify/point-of-view\">point-of-view</a></p>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-js\">fastify.register(require('point-of-view'), {\n engine: {\n ejs: require('ejs')\n },\n templates: '/templates',\n options: {}\n})\n</code></pre>\n\n<p><code>templates</code> lets you update the templates folder. <code>options</code> are options passed onto the template engines.</p>",
"intro_html": "<p><a href=\"https://github.com/fastify/fastify\">Fastify</a> lets you create HTTP servers in Node.js with good performance. This guide targets fastify v0.28.x.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-21"
},{
"id": "ffaker",
"title": "FFaker",
"url": "/ffaker",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"ffaker\">FFaker</h2>\n\n<h3 id=\"installing\">Installing</h3>\n\n<pre><code class=\"language-ruby\"># gem install ffaker\nrequire 'ffaker'\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakeraddress\">Faker::Address</h2>\n\n<pre><code class=\"language-ruby\">Faker::Address.city #=&gt; \"Autumnside\"\n #=&gt; \"South Brielleberg\"\n #=&gt; \"West Alvera\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Address.street_name #=&gt; \"Greyson Rapid\"\n #=&gt; \"Hoppe Grove\"\n #=&gt; \"Reichert Lights\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Address.street_address #=&gt; \"98786 Neal Motorway\"\n #=&gt; \"6619 Yvonne Dale\"\n #=&gt; \"6143 Bailey Plaza\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Address.secondary_address #=&gt; \"Suite 560\"\n #=&gt; \"Apt. 332\"\n #=&gt; \"Apt. 411\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakercompany\">Faker::Company</h2>\n\n<pre><code class=\"language-ruby\">Faker::Company.name #=&gt; \"Pouros-Ondricka\"\n #=&gt; \"Ward Group\"\n #=&gt; \"Walter-Romaguera\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Company.suffix #=&gt; \"and Sons\"\n #=&gt; \"LLC\"\n #=&gt; \"and Sons\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Company.catch_phrase #=&gt; \"Versatile mobile help-desk\"\n #=&gt; \"Extended fresh-thinking utilisation\"\n #=&gt; \"Reactive coherent flexibility\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Company.bs #=&gt; \"extend one-to-one convergence\"\n #=&gt; \"architect 24/7 interfaces\"\n #=&gt; \"revolutionize viral vortals\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Company.position #=&gt; \"General Corporate President\"\n #=&gt; \"Executive Department Consultant\"\n #=&gt; \"Associate Director\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakereducation\">Faker::Education</h2>\n\n<pre><code class=\"language-ruby\">Faker::Education.school #=&gt; \"Larkwood Institution\"\n #=&gt; \"Whiteshire School\"\n #=&gt; \"California International College\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Education.degree #=&gt; \"Bachelor of Science in Political Administration\"\n #=&gt; \"Doctor of Medicine in Marketing Economics\"\n #=&gt; \"Bachelor of Music in Marketing Development\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Education.degree_short #=&gt; \"MD in Industrial Arts\"\n #=&gt; \"DPhil in Social Management\"\n #=&gt; \"AB in Political Science\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Education.major #=&gt; \"Financial Philosophy\"\n #=&gt; \"Social Arts\"\n #=&gt; \"Business Accountancy\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Education.school_name #=&gt; \"Larkfield\"\n #=&gt; \"Northshire\"\n #=&gt; \"Lakepoint\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakergeolocation\">Faker::Geolocation</h2>\n\n<pre><code class=\"language-ruby\">Faker::Geolocation.lat #=&gt; 40.89505\n #=&gt; 41.77117\n #=&gt; 41.022921\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Geolocation.lng #=&gt; -115.120716573\n #=&gt; -118.427610513239\n #=&gt; -72.204989\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerinternet\">Faker::Internet</h2>\n\n<pre><code class=\"language-ruby\">Faker::Internet.email #=&gt; \"dayna@auer.name\"\n #=&gt; \"joy@nienowbradtke.info\"\n #=&gt; \"bernhard@wyman.ca\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.user_name #=&gt; \"emory\"\n #=&gt; \"janelle_schamberger\"\n #=&gt; \"brigitte.dooley\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.domain_name #=&gt; \"langworth.biz\"\n #=&gt; \"corkery.info\"\n #=&gt; \"schroeder.uk\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.disposable_email #=&gt; \"barrett_schroeder@spamherelots.com\"\n #=&gt; \"nicholaus@suremail.info\"\n #=&gt; \"gladys@safetymail.info\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.free_email #=&gt; \"lemuel@yahoo.com\"\n #=&gt; \"nickolas.gulgowski@gmail.com\"\n #=&gt; \"isaac_ankunding@gmail.com\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.domain_word #=&gt; \"purdykutch\"\n #=&gt; \"sauer\"\n #=&gt; \"trantowmaggio\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Internet.domain_suffix #=&gt; \"us\"\n #=&gt; \"info\"\n #=&gt; \"biz\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerjob\">Faker::Job</h2>\n\n<pre><code class=\"language-ruby\">Faker::Job.title #=&gt; \"Future Data Assistant\"\n #=&gt; \"Product Division Technician\"\n #=&gt; \"Product Research Developer\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerlorem\">Faker::Lorem</h2>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.word #=&gt; \"sint\"\n #=&gt; \"sit\"\n #=&gt; \"omnis\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.sentence #=&gt; \"Expedita et aspernatur eum sit ipsam culpa.\"\n #=&gt; \"Rem sunt voluptatem laborum dolores.\"\n #=&gt; \"Ad explicabo atque culpa.\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.paragraph #=&gt; \"Quidem deserunt qui atque labore sunt quis laborum. Et iste\n # laudantium nobis adipisci delectus. Quod vero repudiandae m\n # agni repellat totam. Id ullam a aperiam et laboriosam. Volup\n # tas aut perspiciatis o...\"\n #=&gt; \"Dolor et quae quisquam placeat. Accusantium quidem totam no\n # n et deleniti accusamus hic. Iure quidem inventore molestiae\n # harum magni dolor. Deleniti ex a voluptas nihil temporibus.\n # \"\n #=&gt; \"Fugiat sapiente vero voluptatum natus assumenda quam beatae\n # in. Nemo velit incidunt dolor perspiciatis. Ipsum minima oc\n # caecati est laudantium ducimus libero. Et fugit et adipisci\n # molestias. Cupiditate ...\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.words(4) #=&gt; [\"repellat\", \"quos\", \"amet\", \"voluptatem\"]\n #=&gt; [\"porro\", \"molestias\", \"ut\", \"qui\"]\n #=&gt; [\"blanditiis\", \"soluta\", \"enim\", \"fugit\"]\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.sentence(5) #=&gt; \"Laborum sint voluptate voluptatem rem doloremque et incidun\n # t itaque.\"\n #=&gt; \"Autem atque eum laborum alias perspiciatis debitis suscipit\n # deserunt sint.\"\n #=&gt; \"Quaerat nam consectetur eum dolor deleniti tempore doloremq\n # ue et aspernatur.\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.sentences(3) #=&gt; [\"Culpa debitis architecto est.\", \"Quo et voluptatem distinc\n # tio repellendus qui cupiditate.\", \"Quo repellendus ut eius.\"\n # ]\n #=&gt; [\"Quos nihil dolorem quidem maxime.\", \"Expedita ab veniam do\n # lorum at et placeat iure.\", \"In perspiciatis cupiditate amet\n # non saepe consequatur molestias minus.\"]\n #=&gt; [\"Quasi velit et voluptas est.\", \"Dolores ut dolor aut repel\n # lat fuga minima sed quia.\", \"Eum id minus atque ex modi.\"]\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Lorem.paragraphs(3) #=&gt; [\"Iusto mollitia sequi nam perspiciatis fuga aut. Modi moles\n # tiae consectetur architecto et dolorem aut perferendis. Cumq\n # ue rerum aliquam sapiente. Dolorum quo reiciendis nemo vero.\n # Quo earum explicabo pariatur.\", \"Possimus omnis accusamus f\n # uga. Harum sint facere sed dolor itaque quia. Ullam optio at\n # que vel nihil facilis quidem accusantium sint.\", \"Itaque per\n # ferendis saepe pariatur maxime expedita laborum qui. Ea nemo\n # dolor aut. In sed sit minus itaque sit.\"]\n #=&gt; [\"Ducimus non quo qui doloremque aperiam aspernatur. Consequ\n # atur id qui sit occaecati. Incidunt tempora quia et. Esse vo\n # luptatem debitis similique ab totam sit. Illo neque vel face\n # re maxime voluptatum non voluptatem.\", \"Aut eveniet consequa\n # tur laudantium veniam qui dolores. Provident pariatur perspi\n # ciatis id. Eum iste id quasi. Esse nihil quis rerum laudanti\n # um aliquam molestiae eum tempora.\", \"Quia porro sint numquam\n # qui. Ut sint reiciendis quis pariatur veniam nesciunt optio\n # . Officia unde fugit distinctio dolorem voluptatem incidunt.\n # Ex omnis sit et non aut.\"]\n #=&gt; [\"Dicta consequatur sapiente saepe fugiat ut. Necessitatibus\n # enim explicabo qui fugiat occaecati expedita quis. Quo iust\n # o magnam facere nihil earum.\", \"In deleniti explicabo veniam\n # dolorem temporibus enim. Delectus exercitationem ipsum dolo\n # r modi. Aut quia voluptas velit sint aperiam sed eveniet.\",\n # \"Quo doloribus explicabo ut magnam quasi. Voluptatem debitis\n # quaerat aperiam. Accusantium quis voluptatem dolorem.\"]\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerhipsteripsum\">Faker::HipsterIpsum</h2>\n\n<pre><code class=\"language-ruby\">Faker::HipsterIpsum.paragraph #=&gt; \"Wayfarers mustache thundercats pitchfork messenger bag high\n # life. Beard messenger bag wayfarers squid vinyl letterpress\n # party iphone jean shorts. Lomo irony before they sold out e\n # thical wayfarers scene...\"\n #=&gt; \"Tofu stumptown cliche sartorial vhs letterpress keffiyeh wi\n # lliamsburg. Whatever jean shorts williamsburg lomo salvia fo\n # od truck 8-bit. Cosby sweater portland artisan wayfarers vhs\n # photo booth.\"\n #=&gt; \"Skateboard fanny pack wes anderson sartorial cred gluten-fr\n # ee vinyl marfa locavore. Messenger bag master cleanse mlkshk\n # vegan thundercats beard wes anderson brunch. Helvetica mess\n # enger bag lo-fi four l...\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerhtmlipsum\">Faker::HTMLIpsum</h2>\n\n<pre><code class=\"language-ruby\">Faker::HTMLIpsum.body #=&gt; \"&lt;h1&gt;Exercitationem et&lt;/h1&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Eligendi&lt;/t\n # h&gt;&lt;th&gt;Vel&lt;/th&gt;&lt;th&gt;Sed&lt;/th&gt;&lt;th&gt;At&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr\n # &gt;&lt;...\"\n #=&gt; \"&lt;h1&gt;Excepturi sequi&lt;/h1&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Quam&lt;/th&gt;&lt;th&gt;\n # Eius&lt;/th&gt;&lt;th&gt;Quibusdam&lt;/th&gt;&lt;th&gt;Totam&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody\n # &gt;&lt;tr&gt;...\"\n #=&gt; \"&lt;h1&gt;Iusto voluptatem&lt;/h1&gt;&lt;p&gt;Laborum velit ducimus eius. Mol\n # estiae id vel ipsam a accusantium et ut. Sunt et fugiat qui\n # sint ab quia. Eum ut molestiae cumque molestiae error volupt\n # ates. Ipsum molestiae ...\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::HTMLIpsum.table #=&gt; \"&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Voluptatem&lt;/th&gt;&lt;th&gt;Porro&lt;/th&gt;&lt;th&gt;Tene\n # tur&lt;/th&gt;&lt;th&gt;Facilis&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Numquam&lt;\n # /t...\"\n #=&gt; \"&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Impedit&lt;/th&gt;&lt;th&gt;Voluptatem&lt;/th&gt;&lt;th&gt;Qu\n # i&lt;/th&gt;&lt;th&gt;Est&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Nihil&lt;/td&gt;...\"\n #=&gt; \"&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Iste&lt;/th&gt;&lt;th&gt;Et&lt;/th&gt;&lt;th&gt;Sequi&lt;/th&gt;&lt;th\n # &gt;Et&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Blanditiis&lt;/td&gt;...\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::HTMLIpsum.fancy_string #=&gt; \"&lt;a href=\\\"#distinctio\\\" title=\\\"Tenetur explicabo\\\"&gt;Velit e\n # st&lt;/a&gt; &lt;code&gt;aperiam reiciendis&lt;/code&gt; Consectetur aut hic e\n # um quisquam. Dolore aut rerum dolor accusantium ab repellend\n # us magni. Deserunt optio o...\"\n #=&gt; \"Et vel similique ullam accusantium laboriosam. Sit ut ea to\n # tam. Iusto praesentium ut molestiae. Voluptatem laudantium a\n # ut qui adipisci. Est saepe repellendus qui blanditiis volupt\n # ates sed odit ullam. &lt;...\"\n #=&gt; \"Neque et omnis ipsam ad culpa maiores inventore. Laborum cu\n # m est fugit libero repellendus vero. Modi pariatur sunt tene\n # tur soluta inventore ratione. Iste consequuntur quia omnis n\n # umquam excepturi quod ...\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakername\">Faker::Name</h2>\n\n<pre><code class=\"language-ruby\">Faker::Name.name #=&gt; \"Trevion Herman V\"\n #=&gt; \"Aracely Balistreri\"\n #=&gt; \"Daphnee Terry Sr.\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Name.first_name #=&gt; \"Aliza\"\n #=&gt; \"Joseph\"\n #=&gt; \"Orland\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Name.last_name #=&gt; \"Hand\"\n #=&gt; \"Macejkovic\"\n #=&gt; \"Heller\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Name.prefix #=&gt; \"Dr.\"\n #=&gt; \"Ms.\"\n #=&gt; \"Mr.\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Name.suffix #=&gt; \"I\"\n #=&gt; \"III\"\n #=&gt; \"DDS\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerphonenumber\">Faker::PhoneNumber</h2>\n\n<pre><code class=\"language-ruby\">Faker::PhoneNumber.phone_number #=&gt; \"335-364-4549 x430\"\n #=&gt; \"040-278-4021 x753\"\n #=&gt; \"420.645.4382\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::PhoneNumber.short_phone_number #=&gt; \"473-412-3192\"\n #=&gt; \"353-084-1297\"\n #=&gt; \"080-546-2356\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerproduct\">Faker::Product</h2>\n\n<pre><code class=\"language-ruby\">Faker::Product.brand #=&gt; \"Trouffeforge\"\n #=&gt; \"VIG\"\n #=&gt; \"NDZ\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Product.product_name #=&gt; \"Air HD Viewer\"\n #=&gt; \"HD Kit\"\n #=&gt; \"Air HD Bridge\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Product.product #=&gt; \"Amnix Air HD Tuner\"\n #=&gt; \"Panapod Audible Filter\"\n #=&gt; \"Phuffe Disc Receiver\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::Product.model #=&gt; \"I-422\"\n #=&gt; \"J89\"\n #=&gt; \"L6\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakernamecn\">Faker::NameCN</h2>\n\n<pre><code class=\"language-ruby\">Faker::NameCN.name #=&gt; \"姵书虞\"\n #=&gt; \"修男嵇\"\n #=&gt; \"瑜人军\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameCN.last_first #=&gt; \"向坚舜\"\n #=&gt; \"疏骏哲\"\n #=&gt; \"秘合雪\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameCN.first_name #=&gt; \"佑淑\"\n #=&gt; \"燕谦\"\n #=&gt; \"重生\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameCN.last_name #=&gt; \"释\"\n #=&gt; \"巩\"\n #=&gt; \"麻\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakernamede\">Faker::NameDE</h2>\n\n<pre><code class=\"language-ruby\">Faker::NameDE.name #=&gt; \"Noelle Schuster\"\n #=&gt; \"Bendix Schmid\"\n #=&gt; \"Azra Neumann\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameDE.first_name #=&gt; \"Victoria\"\n #=&gt; \"Lotta\"\n #=&gt; \"Mads\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameDE.last_name #=&gt; \"Martin\"\n #=&gt; \"Klein\"\n #=&gt; \"Walter\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameDE.prefix #=&gt; \"Frau\"\n #=&gt; \"Prof.\"\n #=&gt; \"Prof.\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakernameja\">Faker::NameJA</h2>\n\n<pre><code class=\"language-ruby\">Faker::NameJA.name #=&gt; \"飛鳥田部\"\n #=&gt; \"未杉浦\"\n #=&gt; \"功本間\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameJA.last_first #=&gt; \"青木杏子\"\n #=&gt; \"棚原大貴\"\n #=&gt; \"知名翔\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameJA.first_name #=&gt; \"巴\"\n #=&gt; \"浩子\"\n #=&gt; \"沙耶\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameJA.last_name #=&gt; \"小栗\"\n #=&gt; \"高江洲\"\n #=&gt; \"友寄\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakernameru\">Faker::NameRU</h2>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.name #=&gt; \"Стелла Карнилина\"\n #=&gt; \"Евгения Мазовская\"\n #=&gt; \"Кузьма Ваиренко\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.last_name #=&gt; \"Манишева\"\n #=&gt; \"Тюлева\"\n #=&gt; \"Понченко\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.first_name #=&gt; \"Артур\"\n #=&gt; \"Руслана\"\n #=&gt; \"Зинаида\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.patronymic #=&gt; \"Мечеславович\"\n #=&gt; \"Ионович\"\n #=&gt; \"Исаевич\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.name(:male) #=&gt; \"Слежиков Роман Всеволодович\"\n #=&gt; \"Осип Мугрузин\"\n #=&gt; \"Джиджаев Гавриил Леванович\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameRU.name(:female) #=&gt; \"Зиядтдинова Полина Людвиговна\"\n #=&gt; \"Андреева Тереза Арсеновна\"\n #=&gt; \"Дарина Минхазова\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakernamesn\">Faker::NameSN</h2>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.name_sn #=&gt; \"mame Djaly Mbodj\"\n #=&gt; \"Hatab Samy\"\n #=&gt; \"Niouma Dramé\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.name_male #=&gt; \"serigne Yakou Diagne\"\n #=&gt; \"serigne Sécouba Diagne\"\n #=&gt; \"Sihalébé Badji\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.name_female #=&gt; \"Thiomba Niang\"\n #=&gt; \"adjaratou Kiné Panduppy\"\n #=&gt; \"Nini Gakou\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.first_name_male #=&gt; \"Khoudia\"\n #=&gt; \"Sanokho\"\n #=&gt; \"Diomaye\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.first_name_female #=&gt; \"Assa\"\n #=&gt; \"Sahaba\"\n #=&gt; \"Manthita\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.prefix_male #=&gt; \"eladji\"\n #=&gt; \"eladji\"\n #=&gt; \"serigne\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">Faker::NameSN.prefix_female #=&gt; \"adjaratou\"\n #=&gt; \"adja\"\n #=&gt; \"adja\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerphonenumberau\">Faker::PhoneNumberAU</h2>\n\n<pre><code class=\"language-ruby\">Faker::PhoneNumberAU.phone_number #=&gt; \"0495 539 191\"\n #=&gt; \"(05) 6838 2406\"\n #=&gt; \"0496 013 652\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"fakerphonenumbersn\">Faker::PhoneNumberSN</h2>\n\n<pre><code class=\"language-ruby\">Faker::PhoneNumberSN.phone_number #=&gt; \"77-356-93-09\"\n #=&gt; \"33-891-67-75\"\n #=&gt; \"33-886-02-02\"\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-12"
},{
"id": "ffmpeg",
"title": "ffmpeg",
"url": "/ffmpeg",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"common-switches\">Common switches</h3>\n\n<pre><code class=\"language-bash\">-codecs # list codecs\n-c:v # video codec (-vcodec) - 'copy' to copy stream\n-c:a # audio codec (-acodec)\n</code></pre>\n\n<pre><code class=\"language-bash\">-fs SIZE # limit file size (bytes)\n</code></pre>\n\n<h3 id=\"bitrate\">Bitrate</h3>\n\n<pre><code class=\"language-bash\">-b:v 1M # video bitrate (1M = 1Mbit/s)\n-b:a 1M # audio bitrate\n</code></pre>\n\n<h3 id=\"video\">Video</h3>\n\n<pre><code class=\"language-bash\">-aspect RATIO # aspect ratio (4:3, 16:9, or 1.25)\n-r RATE # frame rate per sec\n-s WIDTHxHEIGHT # frame size\n-vn # no video\n</code></pre>\n\n<h3 id=\"audio\">Audio</h3>\n\n<pre><code class=\"language-bash\">-aq QUALITY # audio quality (codec-specific)\n-ar 44100 # audio sample rate (hz)\n-ac 1 # audio channels (1=mono, 2=stereo)\n-an # no audio\n-vol N # volume (256=normal)\n</code></pre>\n\n<h2 id=\"example\">Example</h2>\n\n<h3 id=\"ringtone-conversion-using-ffmpeg\">Ringtone conversion using ffmpeg</h3>\n\n<pre><code class=\"language-bash\">ffmpeg -i foo.mp3 -ac 1 -ab 128000 -f mp4 -acodec libfaac -y target.m4r\n</code></pre>\n\n<h3 id=\"to-web\">To web</h3>\n\n<pre><code class=\"language-bash\"># no audio\nffmpeg -i input.mov -vcodec h264 -an -strict -2 output.mp4\nffmpeg -i input.mov -vcodec libvpx -an output.webm\n</code></pre>\n\n<pre><code class=\"language-bash\">ffmpeg -i input.mov -vcodec h264 -acodec aac -strict -2 output.mp4\nffmpeg -i input.mov -vcodec libvpx -acodec libvorbis output.webm\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;video width=\"320\" height=\"240\" controls&gt;\n &lt;source src=\"movie.mp4\" type='video/mp4'&gt;&lt;/source&gt;\n &lt;source src=\"movie.webm\" type='video/ogg'&gt;&lt;/source&gt;\n&lt;/video&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "figlet",
"title": "Figlet",
"url": "/figlet",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-bash\">echo \"Hamburger\" | figlet -f cybermedium\n</code></pre>\n\n<pre class=\"-figlet\"><code>_ _ ____ _ _ ___ _ _ ____ ____ ____ ____ \n|__| |__| |\\/| |__] | | |__/ | __ |___ |__/ \n| | | | | | |__] |__| | \\ |__] |___ | \\ \n</code></pre>\n\n<p>Run <code>figlet</code> with <code>-f &lt;font&gt;</code> to use a font.</p>\n\n<h3 id=\"toilet-fonts\">Toilet fonts</h3>\n\n<pre><code class=\"language-bash\">echo \"Hello\" | \\\n figlet -f smmono12 -d /usr/local/share/figlet\n</code></pre>\n\n<p>Figlet comes with support for Toilet fonts, which are in <code>{share}/figlet</code>. This is not the default font dir, so you’ll have to use <code>-d &lt;path&gt;</code> to access it.</p>\n\n<h2 id=\"ricos-favorites\">Rico’s favorites</h2>\n\n<h3 id=\"wideterm\">wideterm</h3>\n\n<pre class=\"-figlet\"><code>Ｈａｍｂｕｒｇｅｒ\n</code></pre>\n\n<h3 id=\"stampatello\">stampatello</h3>\n\n<pre class=\"-figlet\"><code>,-_/,. . \n' |_|/ ,-. ,-,-. |-. . . ,-. ,-. ,-. ,-. \n /| | ,-| | | | | | | | | | | |-' | \n `' `' `-^ ' ' ' ^-' `-^ ' `-| `-' ' \n ,| \n `' \n</code></pre>\n\n<h3 id=\"cybermedium\">cybermedium</h3>\n\n<pre class=\"-figlet\"><code>_ _ ____ _ _ ___ _ _ ____ ____ ____ ____ \n|__| |__| |\\/| |__] | | |__/ | __ |___ |__/ \n| | | | | | |__] |__| | \\ |__] |___ | \\ \n</code></pre>\n\n<h3 id=\"cyberlarge\">cyberlarge</h3>\n\n<pre class=\"-figlet\"><code> _ _ _______ _______ ______ _ _ ______ ______ _______ ______\n |_____| |_____| | | | |_____] | | |_____/ | ____ |______ |_____/\n | | | | | | | |_____] |_____| | \\_ |_____| |______ | \\_\n</code></pre>\n\n<h3 id=\"thin\">thin</h3>\n\n<pre class=\"-figlet\"><code>| | | \n|---|,---.,-.-.|---.. .,---.,---.,---.,---.\n| |,---|| | || || || | ||---'| \n` '`---^` ' '`---'`---'` `---|`---'` \n `---' \n</code></pre>\n\n<h3 id=\"smbraille\">smbraille</h3>\n\n<pre class=\"-figlet\"><code> ⣇⣸ ⢀⣀ ⣀⣀ ⣇⡀ ⡀⢀ ⡀⣀ ⢀⡀ ⢀⡀ ⡀⣀\n ⠇⠸ ⠣⠼ ⠇⠇⠇ ⠧⠜ ⠣⠼ ⠏ ⣑⡺ ⠣⠭ ⠏ \n</code></pre>\n\n<h3 id=\"rectangles\">rectangles</h3>\n\n<pre class=\"-figlet\"><code> _____ _ \n| | |___ _____| |_ _ _ ___ ___ ___ ___ \n| | .'| | . | | | _| . | -_| _|\n|__|__|__,|_|_|_|___|___|_| |_ |___|_| \n |___| \n</code></pre>\n\n<h3 id=\"bell\">bell</h3>\n\n<pre class=\"-figlet\"><code> __ __ _ \n | | ___ , _ , _ \\ ___ , . .___ ___. ___ .___ \n |___| / ` |' `|' `. |/ \\ | | / \\ .' ` .' ` / \\\n | | | | | | | | ` | | | ' | | |----' | '\n / / `.__/| / ' / `___,' `._/| / `---| `.___, / \n \\___/ \n</code></pre>\n\n<h2 id=\"figlet-fonts\">Figlet fonts</h2>\n\n<h3 id=\"3-d\">3-d</h3>\n\n<pre class=\"-figlet\"><code> ** ** ** \n/** /** /** ***** \n/** /** ****** ********** /** ** ** ****** **///** ***** ******\n/********** //////** //**//**//**/****** /** /**//**//*/** /** **///**//**//*\n/**//////** ******* /** /** /**/**///**/** /** /** / //******/******* /** / \n/** /** **////** /** /** /**/** /**/** /** /** /////**/**//// /** \n/** /**//******** *** /** /**/****** //******/*** ***** //******/*** \n// // //////// /// // // ///// ////// /// ///// ////// /// \n</code></pre>\n\n<h3 id=\"3x5\">3x5</h3>\n\n<pre class=\"-figlet\"><code># # # \n# # ## ### ### # # ### ### ### ### \n### # # ### # # # # # # # ## # \n# # ### # # ### ### # ## ### # \n# # ### \n</code></pre>\n\n<h3 id=\"5lineoblique\">5lineoblique</h3>\n\n<pre class=\"-figlet\"><code> // / / \n //___ / / ___ _ __ / __ __ ___ ___ __ \n / ___ / // ) ) // ) ) ) ) // ) ) // / / // ) ) // ) ) //___) ) // ) ) \n // / / // / / // / / / / // / / // / / // ((___/ / // // \n// / / ((___( ( // / / / / ((___/ / ((___( ( // //__ ((____ // \n</code></pre>\n\n<h3 id=\"acrobatic\">acrobatic</h3>\n\n<pre class=\"-figlet\"><code> o o o \n &lt;|&gt; &lt;|&gt; &lt;|&gt; \n &lt; &gt; &lt; &gt; / &gt; \n | | o__ __o/ \\o__ __o__ __o \\o__ __o o o \\o__ __o o__ __o/ o__ __o \\o__ __o \n o__/_ _\\__o /v | | | |&gt; | v\\ &lt;|&gt; &lt;|&gt; | |&gt; /v | /v |&gt; | |&gt; \n | | /&gt; / \\ / \\ / \\ / \\ / \\ &lt;\\ &lt; &gt; &lt; &gt; / \\ &lt; &gt; /&gt; / \\ /&gt; // / \\ &lt; &gt; \n &lt;o&gt; &lt;o&gt; \\ \\o/ \\o/ \\o/ \\o/ \\o/ / | | \\o/ \\ \\o/ \\o o/ \\o/ \n | | o | | | | | o o o | o | v\\ /v __o | \n / \\ / \\ &lt;\\__ / \\ / \\ / \\ / \\ / \\ __/&gt; &lt;\\__ __/&gt; / \\ &lt;\\__ &lt; &gt; &lt;\\/&gt; __/&gt; / \\ \n | \n o__ o \n &lt;\\__ __/&gt; \n</code></pre>\n\n<h3 id=\"alligator\">alligator</h3>\n\n<pre class=\"-figlet\"><code> ::: ::: ::: ::: ::: ::::::::: ::: :::::::::::: :::::::: ::::::::::::::::::: \n :+: :+: :+: :+: :+:+: :+:+: :+: :+::+: :+::+: :+::+: :+::+: :+: :+: \n +:+ +:+ +:+ +:+ +:+ +:+:+ +:++:+ +:++:+ +:++:+ +:++:+ +:+ +:+ +:+ \n +#++:++#+++#++:++#++:+#+ +:+ +#++#++:++#+ +#+ +:++#++:++#: :#: +#++:++# +#++:++#: \n +#+ +#++#+ +#++#+ +#++#+ +#++#+ +#++#+ +#++#+ +#+#+#+ +#+ +#+ \n #+# #+##+# #+##+# #+##+# #+##+# #+##+# #+##+# #+##+# #+# #+# \n### ###### ###### ############ ######## ### ### ######## ############# ### \n</code></pre>\n\n<h3 id=\"alligator2\">alligator2</h3>\n\n<pre class=\"-figlet\"><code>::: ::: ::: :::: :::: ::::::::: ::: :::::::::::: :::::::: ::::::::::::::::::: \n:+: :+: :+: :+: +:+:+: :+:+:+:+: :+::+: :+::+: :+::+: :+::+: :+: :+: \n+:+ +:+ +:+ +:+ +:+ +:+:+ +:++:+ +:++:+ +:++:+ +:++:+ +:+ +:+ +:+ \n+#++:++#+++#++:++#++:+#+ +:+ +#++#++:++#+ +#+ +:++#++:++#: :#: +#++:++# +#++:++#: \n+#+ +#++#+ +#++#+ +#++#+ +#++#+ +#++#+ +#++#+ +#+#+#+ +#+ +#+ \n#+# #+##+# #+##+# #+##+# #+##+# #+##+# #+##+# #+##+# #+# #+# \n### ###### ###### ############ ######## ### ### ######## ############# ### \n</code></pre>\n\n<h3 id=\"alphabet\">alphabet</h3>\n\n<pre class=\"-figlet\"><code>H H b \nH H b \nHHHH aa mmmm bbb u u rrr ggg eee rrr \nH H a a m m m b b u u r g g e e r \nH H aaa m m m bbb uuu r ggg ee r \n g \n ggg \n</code></pre>\n\n<h3 id=\"avatar\">avatar</h3>\n\n<pre class=\"-figlet\"><code> _ ____ _ ____ _ ____ _____ _____ ____ \n/ \\ /|/ _ \\/ \\__/|/ _ \\/ \\ /\\/ __\\/ __// __// __\\\n| |_||| / \\|| |\\/||| | //| | ||| \\/|| | _| \\ | \\/|\n| | ||| |-||| | ||| |_\\\\| \\_/|| /| |_//| /_ | /\n\\_/ \\|\\_/ \\|\\_/ \\|\\____/\\____/\\_/\\_\\\\____\\\\____\\\\_/\\_\\\n</code></pre>\n\n<h3 id=\"banner\">banner</h3>\n\n<pre class=\"-figlet\"><code># # \n# # ## # # ##### # # ##### #### ###### ##### \n# # # # ## ## # # # # # # # # # # # \n####### # # # ## # ##### # # # # # ##### # # \n# # ###### # # # # # # ##### # ### # ##### \n# # # # # # # # # # # # # # # # # \n# # # # # # ##### #### # # #### ###### # # \n</code></pre>\n\n<h3 id=\"banner3-d\">banner3-D</h3>\n\n<pre class=\"-figlet\"><code>'##::::'##::::'###::::'##::::'##:'########::'##::::'##:'########:::'######:::'########:'########::\n ##:::: ##:::'## ##::: ###::'###: ##.... ##: ##:::: ##: ##.... ##:'##... ##:: ##.....:: ##.... ##:\n ##:::: ##::'##:. ##:: ####'####: ##:::: ##: ##:::: ##: ##:::: ##: ##:::..::: ##::::::: ##:::: ##:\n #########:'##:::. ##: ## ### ##: ########:: ##:::: ##: ########:: ##::'####: ######::: ########::\n ##.... ##: #########: ##. #: ##: ##.... ##: ##:::: ##: ##.. ##::: ##::: ##:: ##...:::: ##.. ##:::\n ##:::: ##: ##.... ##: ##:.:: ##: ##:::: ##: ##:::: ##: ##::. ##:: ##::: ##:: ##::::::: ##::. ##::\n ##:::: ##: ##:::: ##: ##:::: ##: ########::. #######:: ##:::. ##:. ######::: ########: ##:::. ##:\n..:::::..::..:::::..::..:::::..::........::::.......:::..:::::..:::......::::........::..:::::..::\n</code></pre>\n\n<h3 id=\"banner3\">banner3</h3>\n\n<pre class=\"-figlet\"><code>## ## ### ## ## ######## ## ## ######## ###### ######## ######## \n## ## ## ## ### ### ## ## ## ## ## ## ## ## ## ## ## \n## ## ## ## #### #### ## ## ## ## ## ## ## ## ## ## \n######### ## ## ## ### ## ######## ## ## ######## ## #### ###### ######## \n## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## \n## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## \n## ## ## ## ## ## ######## ####### ## ## ###### ######## ## ## \n</code></pre>\n\n<h3 id=\"banner4\">banner4</h3>\n\n<pre class=\"-figlet\"><code>.##.....##....###....##.....##.########..##.....##.########...######...########.########.\n.##.....##...##.##...###...###.##.....##.##.....##.##.....##.##....##..##.......##.....##\n.##.....##..##...##..####.####.##.....##.##.....##.##.....##.##........##.......##.....##\n.#########.##.....##.##.###.##.########..##.....##.########..##...####.######...########.\n.##.....##.#########.##.....##.##.....##.##.....##.##...##...##....##..##.......##...##..\n.##.....##.##.....##.##.....##.##.....##.##.....##.##....##..##....##..##.......##....##.\n.##.....##.##.....##.##.....##.########...#######..##.....##..######...########.##.....##\n</code></pre>\n\n<h3 id=\"barbwire\">barbwire</h3>\n\n<pre class=\"-figlet\"><code>&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; \n&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; \n&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt; &gt;&lt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt; &gt;&lt;&lt;&lt;\n&gt;&lt;&lt;&lt;&lt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; \n&gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt;&lt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; \n&gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt; &gt;&lt;&lt; \n&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&lt;&gt;&lt;&lt;&lt; &gt;&lt; &gt;&lt;&lt;&gt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&gt;&lt;&lt;&gt;&lt;&lt;&lt; &gt;&lt;&lt; &gt;&lt;&lt;&lt;&lt; &gt;&lt;&lt;&lt; \n &gt;&lt;&lt; \n</code></pre>\n\n<h3 id=\"basic\">basic</h3>\n\n<pre class=\"-figlet\"><code>db db .d8b. .88b d88. d8888b. db db d8888b. d888b d88888b d8888b. \n88 88 d8' `8b 88'YbdP`88 88 `8D 88 88 88 `8D 88' Y8b 88' 88 `8D \n88ooo88 88ooo88 88 88 88 88oooY' 88 88 88oobY' 88 88ooooo 88oobY' \n88~~~88 88~~~88 88 88 88 88~~~b. 88 88 88`8b 88 ooo 88~~~~~ 88`8b \n88 88 88 88 88 88 88 88 8D 88b d88 88 `88. 88. ~8~ 88. 88 `88. \nYP YP YP YP YP YP YP Y8888P' ~Y8888P' 88 YD Y888P Y88888P 88 YD \n</code></pre>\n\n<h3 id=\"bell-1\">bell</h3>\n\n<pre class=\"-figlet\"><code> __ __ _ \n | | ___ , _ , _ \\ ___ , . .___ ___. ___ .___ \n |___| / ` |' `|' `. |/ \\ | | / \\ .' ` .' ` / \\\n | | | | | | | | ` | | | ' | | |----' | '\n / / `.__/| / ' / `___,' `._/| / `---| `.___, / \n \\___/ \n</code></pre>\n\n<h3 id=\"big\">big</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| | | | | | \n| |__| | __ _ _ __ ___ | |__ _ _ _ __ __ _ ___ _ __ \n| __ |/ _` | '_ ` _ \\| '_ \\| | | | '__/ _` |/ _ \\ '__|\n| | | | (_| | | | | | | |_) | |_| | | | (_| | __/ | \n|_| |_|\\__,_|_| |_| |_|_.__/ \\__,_|_| \\__, |\\___|_| \n __/ | \n |___/ \n</code></pre>\n\n<h3 id=\"bigchief\">bigchief</h3>\n\n<pre class=\"-figlet\"><code>_____________________________________________________________\n _ _ \n / / / \n---/___ /-----__---_--_---/__----------)__----__----__---)__-\n / / / ) / / ) / ) / / / ) / ) /___) / )\n_/____/____(___(_/_/__/_(___/_(___(__/_____(___/_(___ _/_____\n / \n (_ / \n</code></pre>\n\n<h3 id=\"binary\">binary</h3>\n\n<pre class=\"-figlet\"><code>01001000 01100001 01101101 01100010 01110101 01110010 01100111 01100101 01110010 \n</code></pre>\n\n<h3 id=\"block\">block</h3>\n\n<pre class=\"-figlet\"><code>_| _| _| \n_| _| _|_|_| _|_|_| _|_| _|_|_| _| _| _| _|_| _|_|_| _|_| _| _|_| \n_|_|_|_| _| _| _| _| _| _| _| _| _| _|_| _| _| _|_|_|_| _|_| \n_| _| _| _| _| _| _| _| _| _| _| _| _| _| _| _| \n_| _| _|_|_| _| _| _| _|_|_| _|_|_| _| _|_|_| _|_|_| _| \n _| \n _|_| \n</code></pre>\n\n<h3 id=\"broadway\">broadway</h3>\n\n<pre class=\"-figlet\"><code> . . \n8 8888 8 .8. ,8. ,8. 8 888888888o 8 8888 88 8 888888888o. ,o888888o. 8 8888888888 8 888888888o. \n8 8888 8 .888. ,888. ,888. 8 8888 `88. 8 8888 88 8 8888 `88. 8888 `88. 8 8888 8 8888 `88. \n8 8888 8 :88888. .`8888. .`8888. 8 8888 `88 8 8888 88 8 8888 `88 ,8 8888 `8. 8 8888 8 8888 `88 \n8 8888 8 . `88888. ,8.`8888. ,8.`8888. 8 8888 ,88 8 8888 88 8 8888 ,88 88 8888 8 8888 8 8888 ,88 \n8 8888 8 .8. `88888. ,8'8.`8888,8^8.`8888. 8 8888. ,88' 8 8888 88 8 8888. ,88' 88 8888 8 888888888888 8 8888. ,88' \n8 8888 8 .8`8. `88888. ,8' `8.`8888' `8.`8888. 8 8888888888 8 8888 88 8 888888888P' 88 8888 8 8888 8 888888888P' \n8 8888888888888 .8' `8. `88888. ,8' `8.`88' `8.`8888. 8 8888 `88. 8 8888 88 8 8888`8b 88 8888 8888888 8 8888 8 8888`8b \n8 8888 8 .8' `8. `88888. ,8' `8.`' `8.`8888. 8 8888 88 ` 8888 ,8P 8 8888 `8b. `8 8888 .8' 8 8888 8 8888 `8b. \n8 8888 8 .888888888. `88888. ,8' `8 `8.`8888. 8 8888 ,88' 8888 ,d8P 8 8888 `8b. 8888 ,88' 8 8888 8 8888 `8b. \n8 8888 8 .8' `8. `88888. ,8' ` `8.`8888. 8 888888888P `Y88888P' 8 8888 `88. `8888888P' 8 888888888888 8 8888 `88. \n</code></pre>\n\n<h3 id=\"bubble\">bubble</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ _ _ _ _ _ _ \n / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\ / \\ \n( H | a | m | b | u | r | g | e | r )\n \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \n</code></pre>\n\n<h3 id=\"bulbhead\">bulbhead</h3>\n\n<pre class=\"-figlet\"><code> _ _ __ __ __ ____ __ __ ____ ___ ____ ____ \n( )_( ) /__\\ ( \\/ )( _ \\( )( )( _ \\ / __)( ___)( _ \\\n ) _ ( /(__)\\ ) ( ) _ &lt; )(__)( ) /( (_-. )__) ) /\n(_) (_)(__)(__)(_/\\/\\_)(____/(______)(_)\\_) \\___/(____)(_)\\_)\n</code></pre>\n\n<h3 id=\"calgphy2\">calgphy2</h3>\n\n<pre class=\"-figlet\"><code> ##### ## / \n ###### / #### / #/ \n /# / / ####/ ## \n/ / / # # ## \n / / # ## \n ## ## # /### ### /### /### ## /### ## #### ### /### /### /## ### /### \n ## ## # / ### / ##/ ###/ /## / ##/ ### / ## ### / ###/ #### / / ### / / ### ###/ #### / \n ## ######## / ###/ ## ###/ ###/ ## ###/ ## ###/ ## ###/ / ###/ / ### ## ###/ \n ## ## # ## ## ## ## ## ## ## ## ## ## ## ## ## ### ## \n ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ######## ## \n # ## ## ## ## ## ## ## ## ## ## ## ## ## ## ####### ## \n / ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## \n /##/ ## ## /# ## ## ## ## /# ## /# ## ## ## #### / ## \n / ##### ## ####/ ## ### ### ### ####/ ######/ ## ### ######## ######/ ### \n/ ## ### ## ### ### ### ### ##### ## ### ### ### ##### ### \n# ### \n ## #### ### \n /###### /# \n / ###/ \n</code></pre>\n\n<h3 id=\"calligraphy\">calligraphy</h3>\n\n<pre class=\"-figlet\"><code> ***** ** * \n ****** * **** * ** \n ** * * ***** ** \n* * * * * ** \n * * * ** ** **** *** **** *** **** \n ** ** * **** *** **** **** ** **** ** *** * **** **** * **** *** **** **** * \n ** ** * * *** * *** **** *** * *** *** * ** **** ** **** * *** * * *** ** **** \n ** ******** * **** ** **** **** ** **** ** ** ** * **** * *** ** \n ** ** * ** ** ** ** ** ** ** ** ** ** ** ** ** *** ** \n ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ******** ** \n * ** ** ** ** ** ** ** ** ** ** ** ** ** ** ******* ** \n * ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** \n **** ** ** ** ** ** ** ** ** ******* ** *** ** ** **** * *** \n * ***** ** ***** ** *** *** *** ***** ***** ** *** ******** ******* *** \n* ** *** ** *** *** *** *** *** *** ***** \n* *** \n ** **** *** \n ******* ** \n * **** \n</code></pre>\n\n<h3 id=\"catwalk\">catwalk</h3>\n\n<pre class=\"-figlet\"><code>_// _// _// \n_// _// _// \n_// _// _// _/// _// _// _// _// _//_/ _/// _// _// _/ _///\n_////// _// _// _// _// _/ _//_// _// _// _// _// _// _// _/ _// _// \n_// _//_// _// _// _/ _//_// _//_// _// _// _// _//_///// _// _// \n_// _//_// _// _// _/ _//_// _//_// _// _// _// _//_/ _// \n_// _// _// _///_/// _/ _//_// _// _//_//_/// _// _//// _/// \n _// \n</code></pre>\n\n<h3 id=\"chunky\">chunky</h3>\n\n<pre class=\"-figlet\"><code> _______ __ \n| | |.---.-.--------.| |--.--.--.----.-----.-----.----.\n| || _ | || _ | | | _| _ | -__| _|\n|___|___||___._|__|__|__||_____|_____|__| |___ |_____|__| \n |_____| \n</code></pre>\n\n<h3 id=\"coinstak\">coinstak</h3>\n\n<pre class=\"-figlet\"><code>O)) O)) O)) \nO)) O)) O)) \nO)) O)) O)) O))) O)) O)) O)) O)) O))O) O))) O)) O)) O) O)))\nO)))))) O)) O)) O)) O)) O) O))O)) O)) O)) O)) O)) O)) O)) O) O)) O)) \nO)) O))O)) O)) O)) O) O))O)) O))O)) O)) O)) O)) O))O))))) O)) O)) \nO)) O))O)) O)) O)) O) O))O)) O))O)) O)) O)) O)) O))O) O)) \nO)) O)) O)) O)))O))) O) O))O)) O)) O))O))O))) O)) O)))) O))) \n O)) \n</code></pre>\n\n<h3 id=\"colossal\">colossal</h3>\n\n<pre class=\"-figlet\"><code>888 888 888 \n888 888 888 \n888 888 888 \n8888888888 8888b. 88888b.d88b. 88888b. 888 888888d888 .d88b. .d88b. 888d888 \n888 888 \"88b888 \"888 \"88b888 \"88b888 888888P\" d88P\"88bd8P Y8b888P\" \n888 888.d888888888 888 888888 888888 888888 888 88888888888888 \n888 888888 888888 888 888888 d88PY88b 888888 Y88b 888Y8b. 888 \n888 888\"Y888888888 888 88888888P\" \"Y88888888 \"Y88888 \"Y8888 888 \n 888 \n Y8b d88P \n \"Y88P\" \n</code></pre>\n\n<h3 id=\"computer\">computer</h3>\n\n<pre class=\"-figlet\"><code>8 8 \n8 8 eeeee eeeeeee eeeee e e eeeee eeeee eeee eeeee \n8eee8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 \n88 8 8eee8 8e 8 8 8eee8e 8e 8 8eee8e 8e 8eee 8eee8e \n88 8 88 8 88 8 8 88 8 88 8 88 8 88 \"8 88 88 8 \n88 8 88 8 88 8 8 88eee8 88ee8 88 8 88ee8 88ee 88 8 \n</code></pre>\n\n<h3 id=\"contessa\">contessa</h3>\n\n<pre class=\"-figlet\"><code>. . . \n|__| _.._ _ |_ . .._. _ _ ._.\n| |(_][ | )[_)(_|[ (_](/,[ \n ._| \n</code></pre>\n\n<h3 id=\"contrast\">contrast</h3>\n\n<pre class=\"-figlet\"><code>.%%..%%...%%%%...%%...%%..%%%%%...%%..%%..%%%%%....%%%%...%%%%%%..%%%%%..\n.%%..%%..%%..%%..%%%.%%%..%%..%%..%%..%%..%%..%%..%%......%%......%%..%%.\n.%%%%%%..%%%%%%..%%.%.%%..%%%%%...%%..%%..%%%%%...%%.%%%..%%%%....%%%%%..\n.%%..%%..%%..%%..%%...%%..%%..%%..%%..%%..%%..%%..%%..%%..%%......%%..%%.\n.%%..%%..%%..%%..%%...%%..%%%%%....%%%%...%%..%%...%%%%...%%%%%%..%%..%%.\n.........................................................................\n</code></pre>\n\n<h3 id=\"cosmic\">cosmic</h3>\n\n<pre class=\"-figlet\"><code> :: .: :::. . : :::::::. ... ::::::::::.. .,-:::::/ .,:::::: :::::::.. \n ,;; ;;, ;;`;; ;;,. ;;; ;;;'';;' ;; ;;;;;;;``;;;; ,;;-'````' ;;;;'''' ;;;;``;;;; \n,[[[,,,[[[ ,[[ '[[, [[[[, ,[[[[, [[[__[[\\.[[' [[[ [[[,/[[[' [[[ [[[[[[/[[cccc [[[,/[[[' \n\"$$$\"\"\"$$$c$$$cc$$$c $$$$$$$$\"$$$ $$\"\"\"\"Y$$$$ $$$ $$$$$$c \"$$c. \"$$ $$\"\"\"\" $$$$$$c \n 888 \"88o888 888,888 Y88\" 888o_88o,,od8P88 .d888 888b \"88bo,`Y8bo,,,o88o888oo,__ 888b \"88bo,\n MMM YMMYMM \"\"` MMM M' \"MMM\"\"YUMMMP\" \"YmmMMMM\"\" MMMM \"W\" `'YMUP\"YMM\"\"\"\"YUMMMMMMM \"W\" \n</code></pre>\n\n<h3 id=\"cosmike\">cosmike</h3>\n\n<pre class=\"-figlet\"><code> :: .: :::. . : :::::::. ... ::::::::::.. .,-:::::/ .,:::::: :::::::.. \n ,;; ;;, ;;`;; ;;,. ;;; ;;;'';;' ;; ;;;;;;;``;;;; ,;;-'````' ;;;;'''' ;;;;``;;;; \n,[[[,,,[[[ ,[[ '[[, [[[[, ,[[[[, [[[__[[\\.[[' [[[ [[[,/[[[' [[[ [[[[[[/[[cccc [[[,/[[[' \n\"$$$\"\"\"$$$c$$$cc$$$c $$$$$$$$\"$$$ $$\"\"\"\"Y$$$$ $$$ $$$$$$c \"$$c. \"$$ $$\"\"\"\" $$$$$$c \n 888 \"88o888 888,888 Y88\" 888o_88o,,od8P88 .d888 888b \"88bo,`Y8bo,,,o88o888oo,__ 888b \"88bo,\n MMM YMMYMM \"\"` MMM M' \"MMM\"\"YUMMMP\" \"YmmMMMM\"\" MMMM \"W\" `'YMUP\"YMM\"\"\"\"YUMMMMMMM \"W\" \n</code></pre>\n\n<h3 id=\"crawford\">crawford</h3>\n\n<pre class=\"-figlet\"><code> __ __ ____ ___ ___ ____ __ __ ____ ____ ___ ____ \n| T T / T| T T| \\ | T T| \\ / T / _]| \\ \n| l |Y o || _ _ || o )| | || D )Y __j / [_ | D )\n| _ || || \\_/ || T| | || / | T |Y _]| / \n| | || _ || | || O || : || \\ | l_ || [_ | \\ \n| | || | || | || |l || . Y| || T| . Y\nl__j__jl__j__jl___j___jl_____j \\__,_jl__j\\_jl___,_jl_____jl__j\\_j\n</code></pre>\n\n<h3 id=\"cricket\">cricket</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ __ \n| Y .---.-.--------| |--.--.--.----.-----.-----.----.\n|. 1 | _ | | _ | | | _| _ | -__| _|\n|. _ |___._|__|__|__|_____|_____|__| |___ |_____|__| \n|: | | |_____| \n|::.|:. | \n`--- ---' \n</code></pre>\n\n<h3 id=\"cursive\">cursive</h3>\n\n<pre class=\"-figlet\"><code> _ , \n' ) / / \n /--/ __. ______ /__. . __ _, _ __ \n/ (_(_/|_/ / / &lt;_/_)(_/_/ (_(_)_&lt;/_/ (_\n /| \n |/ \n</code></pre>\n\n<h3 id=\"cyberlarge-1\">cyberlarge</h3>\n\n<pre class=\"-figlet\"><code> _ _ _______ _______ ______ _ _ ______ ______ _______ ______\n |_____| |_____| | | | |_____] | | |_____/ | ____ |______ |_____/\n | | | | | | | |_____] |_____| | \\_ |_____| |______ | \\_\n</code></pre>\n\n<h3 id=\"cybermedium-1\">cybermedium</h3>\n\n<pre class=\"-figlet\"><code>_ _ ____ _ _ ___ _ _ ____ ____ ____ ____ \n|__| |__| |\\/| |__] | | |__/ | __ |___ |__/ \n| | | | | | |__] |__| | \\ |__] |___ | \\ \n</code></pre>\n\n<h3 id=\"cybersmall\">cybersmall</h3>\n\n<pre class=\"-figlet\"><code> _ _ ____ _ _ ___ _ _ ____ ____ ____ ____\n |--| |--| |\\/| |==] |__| |--&lt; |__, |=== |--&lt;\n</code></pre>\n\n<h3 id=\"decimal\">decimal</h3>\n\n<pre class=\"-figlet\"><code>72 97 109 98 117 114 103 101 114 \n</code></pre>\n\n<h3 id=\"diamond\">diamond</h3>\n\n<pre class=\"-figlet\"><code>/\\\\ /\\\\ /\\\\ \n/\\\\ /\\\\ /\\\\ \n/\\\\ /\\\\ /\\\\ /\\\\\\ /\\\\ /\\\\ /\\\\ /\\\\ /\\\\/\\ /\\\\\\ /\\\\ /\\\\ /\\ /\\\\\\\n/\\\\\\\\\\\\ /\\\\ /\\\\ /\\\\ /\\\\ /\\ /\\\\/\\\\ /\\\\ /\\\\ /\\\\ /\\\\ /\\\\ /\\\\ /\\ /\\\\ /\\\\ \n/\\\\ /\\\\/\\\\ /\\\\ /\\\\ /\\ /\\\\/\\\\ /\\\\/\\\\ /\\\\ /\\\\ /\\\\ /\\\\/\\\\\\\\\\ /\\\\ /\\\\ \n/\\\\ /\\\\/\\\\ /\\\\ /\\\\ /\\ /\\\\/\\\\ /\\\\/\\\\ /\\\\ /\\\\ /\\\\ /\\\\/\\ /\\\\ \n/\\\\ /\\\\ /\\\\ /\\\\\\/\\\\\\ /\\ /\\\\/\\\\ /\\\\ /\\\\/\\\\/\\\\\\ /\\\\ /\\\\\\\\ /\\\\\\ \n /\\\\ \n</code></pre>\n\n<h3 id=\"digital\">digital</h3>\n\n<pre class=\"-figlet\"><code>+-+-+-+-+-+-+-+-+-+\n|H|a|m|b|u|r|g|e|r|\n+-+-+-+-+-+-+-+-+-+\n</code></pre>\n\n<h3 id=\"doh\">doh</h3>\n\n<pre class=\"-figlet\"><code> bbbbbbbb \nHHHHHHHHH HHHHHHHHH b::::::b \nH:::::::H H:::::::H b::::::b \nH:::::::H H:::::::H b::::::b \nHH::::::H H::::::HH b:::::b \n H:::::H H:::::H aaaaaaaaaaaaa mmmmmmm mmmmmmm b:::::bbbbbbbbb uuuuuu uuuuuu rrrrr rrrrrrrrr ggggggggg ggggg eeeeeeeeeeee rrrrr rrrrrrrrr \n H:::::H H:::::H a::::::::::::a mm:::::::m m:::::::mm b::::::::::::::bb u::::u u::::u r::::rrr:::::::::r g:::::::::ggg::::g ee::::::::::::ee r::::rrr:::::::::r \n H::::::HHHHH::::::H aaaaaaaaa:::::a m::::::::::mm::::::::::mb::::::::::::::::b u::::u u::::u r:::::::::::::::::r g:::::::::::::::::g e::::::eeeee:::::eer:::::::::::::::::r \n H:::::::::::::::::H a::::a m::::::::::::::::::::::mb:::::bbbbb:::::::bu::::u u::::u rr::::::rrrrr::::::rg::::::ggggg::::::gge::::::e e:::::err::::::rrrrr::::::r\n H:::::::::::::::::H aaaaaaa:::::a m:::::mmm::::::mmm:::::mb:::::b b::::::bu::::u u::::u r:::::r r:::::rg:::::g g:::::g e:::::::eeeee::::::e r:::::r r:::::r\n H::::::HHHHH::::::H aa::::::::::::a m::::m m::::m m::::mb:::::b b:::::bu::::u u::::u r:::::r rrrrrrrg:::::g g:::::g e:::::::::::::::::e r:::::r rrrrrrr\n H:::::H H:::::H a::::aaaa::::::a m::::m m::::m m::::mb:::::b b:::::bu::::u u::::u r:::::r g:::::g g:::::g e::::::eeeeeeeeeee r:::::r \n H:::::H H:::::H a::::a a:::::a m::::m m::::m m::::mb:::::b b:::::bu:::::uuuu:::::u r:::::r g::::::g g:::::g e:::::::e r:::::r \nHH::::::H H::::::HHa::::a a:::::a m::::m m::::m m::::mb:::::bbbbbb::::::bu:::::::::::::::uur:::::r g:::::::ggggg:::::g e::::::::e r:::::r \nH:::::::H H:::::::Ha:::::aaaa::::::a m::::m m::::m m::::mb::::::::::::::::b u:::::::::::::::ur:::::r g::::::::::::::::g e::::::::eeeeeeee r:::::r \nH:::::::H H:::::::H a::::::::::aa:::am::::m m::::m m::::mb:::::::::::::::b uu::::::::uu:::ur:::::r gg::::::::::::::g ee:::::::::::::e r:::::r \nHHHHHHHHH HHHHHHHHH aaaaaaaaaa aaaammmmmm mmmmmm mmmmmmbbbbbbbbbbbbbbbb uuuuuuuu uuuurrrrrrr gggggggg::::::g eeeeeeeeeeeeee rrrrrrr \n g:::::g \n gggggg g:::::g \n g:::::gg gg:::::g \n g::::::ggg:::::::g \n gg:::::::::::::g \n ggg::::::ggg \n gggggg \n</code></pre>\n\n<h3 id=\"doom\">doom</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| | | | | | \n| |_| | __ _ _ __ ___ | |__ _ _ _ __ __ _ ___ _ __ \n| _ |/ _` | '_ ` _ \\| '_ \\| | | | '__/ _` |/ _ \\ '__|\n| | | | (_| | | | | | | |_) | |_| | | | (_| | __/ | \n\\_| |_/\\__,_|_| |_| |_|_.__/ \\__,_|_| \\__, |\\___|_| \n __/ | \n |___/ \n</code></pre>\n\n<h3 id=\"dotmatrix\">dotmatrix</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n(_) (_) (_) \n(_) (_) _ _ _ _ _ _ _ (_) _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ \n(_) _ _ _ (_) (_)(_)(_) _ (_)(_)_(_)(_) (_)(_)(_)(_)_ (_) (_)(_)_ _ (_)(_)_(_)(_)(_)(_) (_)(_)(_)(_)_(_)_ _ (_)(_) \n(_)(_)(_)(_)(_) _ _ _ (_) (_) (_) (_)(_) (_)(_) (_) (_)(_) (_) (_)(_) _ _ _ (_) (_)(_) \n(_) (_) _(_)(_)(_)(_) (_) (_) (_)(_) (_)(_) (_) (_) (_) (_)(_)(_)(_)(_)(_) (_) \n(_) (_)(_)_ _ _ (_)_ (_) (_) (_)(_) _ _ _(_)(_)_ _ _(_)_ (_) (_)_ _ _ (_)(_)_ _ _ _ (_) \n(_) (_) (_)(_)(_) (_)(_) (_) (_)(_)(_)(_)(_) (_)(_)(_) (_)(_) (_)(_)(_)(_) (_)(_)(_)(_) (_) \n _ _ _ (_) \n (_)(_)(_) \n</code></pre>\n\n<h3 id=\"double\">double</h3>\n\n<pre class=\"-figlet\"><code>__ __ ___ ___ _______ __ ______ ___ ________ \n|| ||// \\\\||\\\\//|||| ))|| |||| \\\\ // \\\\|| || \\\\\n||==||||=|||| \\/ ||||=) || ||||_//(( ___||== ||_//\n|| |||| |||| ||||_))\\\\_//|| \\\\ \\\\_||||___|| \\\\\n</code></pre>\n\n<h3 id=\"drpepper\">drpepper</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| | | ___ ._ _ _ | |_ _ _ _ _ ___ ___ _ _ \n| |&lt;_&gt; || ' ' || . \\| | || '_&gt;/ . |/ ._&gt;| '_&gt;\n|_|_|&lt;___||_|_|_||___/`___||_| \\_. |\\___.|_| \n &lt;___' \n</code></pre>\n\n<h3 id=\"dwhistled\">dwhistled</h3>\n\n<pre class=\"-figlet\"><code>H m ur r\n X X XX \n X . XX \n . . XX \n . . .X \n . . .X \n . . .. \nHamburger\n</code></pre>\n\n<h3 id=\"eftichess\">eftichess</h3>\n\n<pre class=\"-figlet\"><code> ######### ######### ######### ####################################\n [`'`'] ##\\`.'/## ':v:` ##/\\:/\\## |:+:| ##':v:`## \\`.'/ ##[`'`']###'\\v/`####[`'`']###[`'`']#\n |::| ##(o:o)## (o:0) #/(o:o)\\# (o:o) ##(o:0)## (o:o) ###|::|####(o 0)#####| |#####| |##\n |::| ###\\:/:\\# (:) ###(:)### (:) ###(:)### \\:/:\\ ###|::|#####(_)######|__|#####|__|##\n ####\"#### ######### ######### \" ####################################\n</code></pre>\n\n<h3 id=\"eftifont\">eftifont</h3>\n\n<pre class=\"-figlet\"><code> _ _ \n| U |_ _ _ || _ _ _ _ \n| /o\\ |/ \\ \\|o\\U|/_|/oYoY_|\n|_n_\\_,]L_n_n||_|_/L| \\_|(L| \n _) \n</code></pre>\n\n<h3 id=\"eftipiti\">eftipiti</h3>\n\n<pre class=\"-figlet\"><code>[]-|amburger\n</code></pre>\n\n<h3 id=\"eftirobot\">eftirobot</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n( )( ) ( ) \n| L| | ___ __ __ | |_ _ _ __ __ ___ __ \n( __ )( o )( _`'_ )( o \\( U )( _)/o )( o_)( _)\n/_\\/_\\/_^_\\/_\\`'/_\\/___//___\\/_\\ \\__\\ \\( /_\\ \n _|/ \n</code></pre>\n\n<h3 id=\"eftitalic\">eftitalic</h3>\n\n<pre class=\"-figlet\"><code> _ __ \n /// / _ _ /7 _ _ __ _ \n / ` /,'o| / \\'\\ /o\\ /7/7//7,'o|,'o///7\n/_n_/ |_,7/_nn_//_,'/__/// |_,'|_(// \n _// \n</code></pre>\n\n<h3 id=\"eftiwall\">eftiwall</h3>\n\n<pre class=\"-figlet\"><code> | ___ ( ( ( o !!! |\"| !!! \n *** |.===. /_\\ `* '. ___ .' ` /_\\ ' ` _ _ ' __MMM__ _|_|_ ` _ _ ' \n (o o) {}o o{} (o o) ' (&gt; &lt;) ' - (o o) - - (OXO) - (o o) (o o) - (OXO) - \nooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-\n</code></pre>\n\n<h3 id=\"eftiwater\">eftiwater</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n )L`) ___ _ _ )) _ __ ___ __ __ \n(( ( ((_( ((`1( ((_)((_( (| ((_( (('(| \n _)) \n</code></pre>\n\n<h3 id=\"epic\">epic</h3>\n\n<pre class=\"-figlet\"><code> _______ _______ ______ _______ _______ _______ _______ \n|\\ /|( ___ )( )( ___ \\ |\\ /|( ____ )( ____ \\( ____ \\( ____ )\n| ) ( || ( ) || () () || ( ) )| ) ( || ( )|| ( \\/| ( \\/| ( )|\n| (___) || (___) || || || || (__/ / | | | || (____)|| | | (__ | (____)|\n| ___ || ___ || |(_)| || __ ( | | | || __)| | ____ | __) | __)\n| ( ) || ( ) || | | || ( \\ \\ | | | || (\\ ( | | \\_ )| ( | (\\ ( \n| ) ( || ) ( || ) ( || )___) )| (___) || ) \\ \\__| (___) || (____/\\| ) \\ \\__\n|/ \\||/ \\||/ \\||/ \\___/ (_______)|/ \\__/(_______)(_______/|/ \\__/\n</code></pre>\n\n<h3 id=\"fender\">fender</h3>\n\n<pre class=\"-figlet\"><code>'|| ||` '|| \n || || || \n ||''|| '''|. '||),,(|, ||''|, '|| ||` '||''| .|''|, .|''|, '||''| \n || || .|''|| || || || || || || || || || || ||..|| || \n.|| ||. `|..||. .|| ||. .||..|' `|..'|. .||. `|..|| `|... .||. \n || \n `..|' \n</code></pre>\n\n<h3 id=\"fourtops\">fourtops</h3>\n\n<pre class=\"-figlet\"><code>| | | \n|--|/~~||/~\\ /~\\ |~~\\| ||/~\\/~~|/~/|/~\\\n| |\\__|| | ||__/ \\_/|| \\__|\\/_| \n \\__| \n</code></pre>\n\n<h3 id=\"fraktur\">fraktur</h3>\n\n<pre class=\"-figlet\"><code> .. \n .xHL . uW8\" \n .-`8888hxxx~ .. . : `t888 x. . .u . .u . \n .H8X `%888*\" u .888: x888 x888. 8888 . .@88k z88u .d88B :@8c uL .u .d88B :@8c \n 888X ..x.. us888u. ~`8888~'888X`?888f` 9888.z88N ~\"8888 ^8888 =\"8888f8888r .ue888Nc.. ud8888. =\"8888f8888r \n '8888k .x8888888x .@88 \"8888\" X888 888X '888&gt; 9888 888E 8888 888R 4888&gt;'88\" d88E`\"888E` :888'8888. 4888&gt;'88\" \n ?8888X \"88888X 9888 9888 X888 888X '888&gt; 9888 888E 8888 888R 4888&gt; ' 888E 888E d888 '88%\" 4888&gt; ' \n ?8888X '88888&gt; 9888 9888 X888 888X '888&gt; 9888 888E 8888 888R 4888&gt; 888E 888E 8888.+\" 4888&gt; \n H8H %8888 `8888&gt; 9888 9888 X888 888X '888&gt; 9888 888E 8888 ,888B . .d888L .+ 888E 888E 8888L .d888L .+ \n'888&gt; 888\" 8888 9888 9888 \"*88%\"\"*88\" '888!` .8888 888\" \"8888Y 8888\" ^\"8888*\" 888&amp; .888E '8888c. .+ ^\"8888*\" \n \"8` .8\" .. 88* \"888*\"\"888\" `~ \" `\"` `%888*%\" `Y\" 'YP \"Y\" *888\" 888&amp; \"88888% \"Y\" \n ` x8888h. d*\" ^Y\" ^Y' \"` `\" \"888E \"YP' \n !\"\"*888%~ .dWi `88E \n ! `\" . 4888~ J8% \n '-....:~ ^\"===*\"` \n</code></pre>\n\n<h3 id=\"fuzzy\">fuzzy</h3>\n\n<pre class=\"-figlet\"><code>.-..-. .-. \n: :; : : : \n: : .--. ,-.,-.,-.: `-. .-..-..--. .--. .--. .--. \n: :: :' .; ; : ,. ,. :' .; :: :; :: ..'' .; :' '_.': ..'\n:_;:_;`.__,_;:_;:_;:_;`.__.'`.__.':_; `._. ;`.__.':_; \n .-. : \n `._.' \n</code></pre>\n\n<h3 id=\"goofy\">goofy</h3>\n\n<pre class=\"-figlet\"><code> ___ _____ _____ _ ___ ___ _ _____ ___ __ ___\n\\ | | / / \\ | | \\ \\ | | | | | \\ ) ____) \\ ___) | \\ \n | \\_/ | / \\ | |\\/| | | ) | | | | | ) / / __ | (__ | ) \n | _ | / () \\ | | | | | &lt; | | | | | / ( ( ( \\ | __) | / \n | / \\ | | __ | | | | | | ) | \\_/ | | |\\ \\ \\ \\__) ) | (___ | |\\ \\ \n/ |___| \\_| (__) |_| |__| |_/ /___\\ /__| |_\\ \\___) (__/ )_| |_\\ \\_\n</code></pre>\n\n<h3 id=\"gothic\">gothic</h3>\n\n<pre class=\"-figlet\"><code>_-_- ,, \n /, _ || _ \n || __ &lt; \\, \\\\/\\\\/\\\\ ||/|, \\\\ \\\\ ,._-_ / \\\\ _-_ ,._-_ \n ~||- - /-|| || || || || || || || || || || || \\\\ || \n ||===|| (( || || || || || |' || || || || || ||/ || \n ( \\_, | \\/\\\\ \\\\ \\\\ \\\\ \\\\/ \\\\/\\\\ \\\\, \\\\_-| \\\\,/ \\\\, \n ` / \\ \n '----` \n</code></pre>\n\n<h3 id=\"graceful\">graceful</h3>\n\n<pre class=\"-figlet\"><code> _ _ __ _ _ ____ _ _ ____ ___ ____ ____ \n/ )( \\ / _\\ ( \\/ )( _ \\/ )( \\( _ \\ / __)( __)( _ \\\n) __ (/ \\/ \\/ \\ ) _ () \\/ ( ) /( (_ \\ ) _) ) /\n\\_)(_/\\_/\\_/\\_)(_/(____/\\____/(__\\_) \\___/(____)(__\\_)\n</code></pre>\n\n<h3 id=\"gradient\">gradient</h3>\n\n<pre class=\"-figlet\"><code>eee..eee..eeeeee..eee......eee.eeeeeee..eee..eee.eeeeeee...eeeeee..eeeeee.eeeeeee..\n@@@::@@@:@@@@@@@@:@@@@::::@@@@:@@@@@@@@:@@@::@@@:@@@@@@@@:@@@@@@@@:@@@@@@:@@@@@@@@:\n%%%--%%%-%%%--%%%-%%%%%--%%%%%-%%%--%%%-%%%--%%%-%%%--%%%-%%%------%%%----%%%--%%%-\n&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;+&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;+&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;+&amp;&amp;&amp;&amp;&amp;&amp;&amp;++&amp;&amp;&amp;++&amp;&amp;&amp;+&amp;&amp;&amp;&amp;&amp;&amp;&amp;++&amp;&amp;&amp;++++++&amp;&amp;&amp;&amp;&amp;++&amp;&amp;&amp;&amp;&amp;&amp;&amp;++\n||||||||*||||||||*|||*||||*|||*||||||||*|||**|||*||||||***|||*||||*|||||**||||||***\n!!!==!!!=!!!==!!!=!!!==!!==!!!=!!!==!!!=!!!==!!!=!!!=!!!==!!!==!!!=!!!====!!!=!!!==\n:::##:::#:::##:::#:::######:::#::::::::#::::::::#:::##:::#::::::::#::::::#:::##:::#\n...@@...@...@@...@...@@@@@@...@.......@@@......@@...@@...@@......@@......@...@@...@\n</code></pre>\n\n<h3 id=\"graffiti\">graffiti</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___. \n / | \\_____ _____\\_ |__ __ _________ ____ ___________ \n/ ~ \\__ \\ / \\| __ \\| | \\_ __ \\/ ___\\_/ __ \\_ __ \\\n\\ Y // __ \\| Y Y \\ \\_\\ \\ | /| | \\/ /_/ &gt; ___/| | \\/\n \\___|_ /(____ /__|_| /___ /____/ |__| \\___ / \\___ &gt;__| \n \\/ \\/ \\/ \\/ /_____/ \\/ \n</code></pre>\n\n<h3 id=\"hex\">hex</h3>\n\n<pre class=\"-figlet\"><code>48 61 6D 62 75 72 67 65 72 \n</code></pre>\n\n<h3 id=\"hollywood\">hollywood</h3>\n\n<pre class=\"-figlet\"><code> _ \n ' ) ) /' \n /' /' /' \n ,/' /' ____ ,__________ /'__ ____ ____ ____ ____ \n /`---,/' /' ) /' ) ) /' ) /' / )' )--/' ) /' ) )' )--\n /' /' /' /' /' /' /' /' /' /' /' /' /' /' /(___,/' /' \n(,/' (_,(___,/(__/' /' /(__(___,/(__(___,/(__/' (___,/(__(________/' \n /' \n / /' \n (___,/' \n</code></pre>\n\n<h3 id=\"invita\">invita</h3>\n\n<pre class=\"-figlet\"><code> ____ ___) \n (, / / /) \n /---/ _ ___ (/_ __ _ _ __ \n ) / (__(_(_// (_/_) (_(_/ (_(_/__(/_/ (_\n(_/ .-/ \n (_/ \n</code></pre>\n\n<h3 id=\"isometric1\">isometric1</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___ ___ ___ ___ ___ ___ ___ \n /\\__\\ /\\ \\ /\\__\\ /\\ \\ /\\__\\ /\\ \\ /\\ \\ /\\ \\ /\\ \\ \n /:/ / /::\\ \\ /::| | /::\\ \\ /:/ / /::\\ \\ /::\\ \\ /::\\ \\ /::\\ \\ \n /:/__/ /:/\\:\\ \\ /:|:| | /:/\\:\\ \\ /:/ / /:/\\:\\ \\ /:/\\:\\ \\ /:/\\:\\ \\ /:/\\:\\ \\ \n /::\\ \\ ___ /::\\~\\:\\ \\ /:/|:|__|__ /::\\~\\:\\__\\ /:/ / ___ /::\\~\\:\\ \\ /:/ \\:\\ \\ /::\\~\\:\\ \\ /::\\~\\:\\ \\ \n /:/\\:\\ /\\__\\ /:/\\:\\ \\:\\__\\ /:/ |::::\\__\\ /:/\\:\\ \\:|__| /:/__/ /\\__\\ /:/\\:\\ \\:\\__\\ /:/__/_\\:\\__\\ /:/\\:\\ \\:\\__\\ /:/\\:\\ \\:\\__\\\n \\/__\\:\\/:/ / \\/__\\:\\/:/ / \\/__/~~/:/ / \\:\\~\\:\\/:/ / \\:\\ \\ /:/ / \\/_|::\\/:/ / \\:\\ /\\ \\/__/ \\:\\~\\:\\ \\/__/ \\/_|::\\/:/ /\n \\::/ / \\::/ / /:/ / \\:\\ \\::/ / \\:\\ /:/ / |:|::/ / \\:\\ \\:\\__\\ \\:\\ \\:\\__\\ |:|::/ / \n /:/ / /:/ / /:/ / \\:\\/:/ / \\:\\/:/ / |:|\\/__/ \\:\\/:/ / \\:\\ \\/__/ |:|\\/__/ \n /:/ / /:/ / /:/ / \\::/__/ \\::/ / |:| | \\::/ / \\:\\__\\ |:| | \n \\/__/ \\/__/ \\/__/ ~~ \\/__/ \\|__| \\/__/ \\/__/ \\|__| \n</code></pre>\n\n<h3 id=\"isometric2\">isometric2</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___ ___ ___ ___ ___ ___ \n /\\ \\ /\\ \\ /\\ \\ _____ /\\ \\ /\\ \\ /\\__\\ /\\__\\ /\\ \\ \n \\:\\ \\ /::\\ \\ |::\\ \\ /::\\ \\ \\:\\ \\ /::\\ \\ /:/ _/_ /:/ _/_ /::\\ \\ \n \\:\\ \\ /:/\\:\\ \\ |:|:\\ \\ /:/\\:\\ \\ \\:\\ \\ /:/\\:\\__\\ /:/ /\\ \\ /:/ /\\__\\ /:/\\:\\__\\ \n ___ /::\\ \\ /:/ /::\\ \\ __|:|\\:\\ \\ /:/ /::\\__\\ ___ \\:\\ \\ /:/ /:/ / /:/ /::\\ \\ /:/ /:/ _/_ /:/ /:/ / \n /\\ /:/\\:\\__\\ /:/_/:/\\:\\__\\ /::::|_\\:\\__\\ /:/_/:/\\:|__| /\\ \\ \\:\\__\\ /:/_/:/__/___ /:/__\\/\\:\\__\\ /:/_/:/ /\\__\\ /:/_/:/__/___\n \\:\\/:/ \\/__/ \\:\\/:/ \\/__/ \\:\\~~\\ \\/__/ \\:\\/:/ /:/ / \\:\\ \\ /:/ / \\:\\/:::::/ / \\:\\ \\ /:/ / \\:\\/:/ /:/ / \\:\\/:::::/ /\n \\::/__/ \\::/__/ \\:\\ \\ \\::/_/:/ / \\:\\ /:/ / \\::/~~/~~~~ \\:\\ /:/ / \\::/_/:/ / \\::/~~/~~~~ \n \\:\\ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ / \\:\\/:/ / \\:\\~~\\ \\:\\/:/ / \\:\\/:/ / \\:\\~~\\ \n \\:\\__\\ \\:\\__\\ \\:\\__\\ \\::/ / \\::/ / \\:\\__\\ \\::/ / \\::/ / \\:\\__\\ \n \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \n</code></pre>\n\n<h3 id=\"isometric3\">isometric3</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___ ___ ___ ___ ___ ___ \n /__/\\ / /\\ /__/\\ _____ /__/\\ / /\\ / /\\ / /\\ / /\\ \n \\ \\:\\ / /::\\ | |::\\ / /::\\ \\ \\:\\ / /::\\ / /:/_ / /:/_ / /::\\ \n \\__\\:\\ / /:/\\:\\ | |:|:\\ / /:/\\:\\ \\ \\:\\ / /:/\\:\\ / /:/ /\\ / /:/ /\\ / /:/\\:\\ \n ___ / /::\\ / /:/~/::\\ __|__|:|\\:\\ / /:/~/::\\ ___ \\ \\:\\ / /:/~/:/ / /:/_/::\\ / /:/ /:/_ / /:/~/:/ \n /__/\\ /:/\\:\\ /__/:/ /:/\\:\\ /__/::::| \\:\\ /__/:/ /:/\\:| /__/\\ \\__\\:\\ /__/:/ /:/___ /__/:/__\\/\\:\\ /__/:/ /:/ /\\ /__/:/ /:/___\n \\ \\:\\/:/__\\/ \\ \\:\\/:/__\\/ \\ \\:\\~~\\__\\/ \\ \\:\\/:/~/:/ \\ \\:\\ / /:/ \\ \\:\\/:::::/ \\ \\:\\ /~~/:/ \\ \\:\\/:/ /:/ \\ \\:\\/:::::/\n \\ \\::/ \\ \\::/ \\ \\:\\ \\ \\::/ /:/ \\ \\:\\ /:/ \\ \\::/~~~~ \\ \\:\\ /:/ \\ \\::/ /:/ \\ \\::/~~~~ \n \\ \\:\\ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ \\ \\:\\/:/ \\ \\:\\ \\ \\:\\/:/ \\ \\:\\/:/ \\ \\:\\ \n \\ \\:\\ \\ \\:\\ \\ \\:\\ \\ \\::/ \\ \\::/ \\ \\:\\ \\ \\::/ \\ \\::/ \\ \\:\\ \n \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \n</code></pre>\n\n<h3 id=\"isometric4\">isometric4</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___ ___ ___ ___ ___ ___ ___ \n / /\\ / /\\ / /\\ / /\\ / /\\ / /\\ / /\\ / /\\ / /\\ \n / /:/ / /::\\ / /::| / /::\\ / /:/ / /::\\ / /::\\ / /::\\ / /::\\ \n / /:/ / /:/\\:\\ / /:|:| / /:/\\:\\ / /:/ / /:/\\:\\ / /:/\\:\\ / /:/\\:\\ / /:/\\:\\ \n / /::\\ ___ / /::\\ \\:\\ / /:/|:|__ / /::\\ \\:\\ / /:/ / /::\\ \\:\\ / /:/ \\:\\ / /::\\ \\:\\ / /::\\ \\:\\ \n /__/:/\\:\\ /\\ /__/:/\\:\\_\\:\\ /__/:/_|::::\\ /__/:/\\:\\_\\:| /__/:/ /\\ /__/:/\\:\\_\\:\\ /__/:/_\\_ \\:\\ /__/:/\\:\\ \\:\\ /__/:/\\:\\_\\:\\\n \\__\\/ \\:\\/:/ \\__\\/ \\:\\/:/ \\__\\/ /~~/:/ \\ \\:\\ \\:\\/:/ \\ \\:\\ /:/ \\__\\/~|::\\/:/ \\ \\:\\__/\\_\\/ \\ \\:\\ \\:\\_\\/ \\__\\/~|::\\/:/\n \\__\\::/ \\__\\::/ / /:/ \\ \\:\\_\\::/ \\ \\:\\ /:/ | |:|::/ \\ \\:\\ \\:\\ \\ \\:\\ \\:\\ | |:|::/ \n / /:/ / /:/ / /:/ \\ \\:\\/:/ \\ \\:\\/:/ | |:|\\/ \\ \\:\\/:/ \\ \\:\\_\\/ | |:|\\/ \n /__/:/ /__/:/ /__/:/ \\__\\::/ \\ \\::/ |__|:|~ \\ \\::/ \\ \\:\\ |__|:|~ \n \\__\\/ \\__\\/ \\__\\/ ~~ \\__\\/ \\__\\| \\__\\/ \\__\\/ \\__\\| \n</code></pre>\n\n<h3 id=\"italic\">italic</h3>\n\n<pre class=\"-figlet\"><code> )__/_ _ / _ _ _ _ \n/ /(///)()(// (/(-/ \n _/ \n</code></pre>\n\n<h3 id=\"ivrit\">ivrit</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n _ __ ___ __ _ _ __ _ _| |__ _ __ ___ __ _| | | |\n | '__/ _ \\/ _` | '__| | | | '_ \\| '_ ` _ \\ / _` | |_| |\n | | | __/ (_| | | | |_| | |_) | | | | | | (_| | _ |\n |_| \\___|\\__, |_| \\__,_|_.__/|_| |_| |_|\\__,_|_| |_|\n |___/ \n</code></pre>\n\n<h3 id=\"jazmine\">jazmine</h3>\n\n<pre class=\"-figlet\"><code> o o 8 \n 8 8 8 \no8oooo8 .oPYo. ooYoYo. 8oPYo. o o oPYo. .oPYo. .oPYo. oPYo. \n 8 8 .oooo8 8' 8 8 8 8 8 8 8 `' 8 8 8oooo8 8 `' \n 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8. 8 \n 8 8 `YooP8 8 8 8 `YooP' `YooP' 8 `YooP8 `Yooo' 8 \n:..:::..:.....:..:..:..:.....::.....:..:::::....8 :.....:..::::\n:::::::::::::::::::::::::::::::::::::::::::::ooP'.:::::::::::::\n:::::::::::::::::::::::::::::::::::::::::::::...:::::::::::::::\n</code></pre>\n\n<h3 id=\"jerusalem\">jerusalem</h3>\n\n<pre class=\"-figlet\"><code> ______ ________ _ ______ ___ ___ __ __._ _ _ _ _ \n |____ |____ \\ \\ | |____ |_ ||_ | \\ \\ / /| | | | | | | | |\n | | _ | |\\ \\| | | | | | | | \\ V / | | | | | | |_| |\n | || | |_|_\\ ` | | | | |__| |___\\ \\ | |/ /_/ /| _ |\n |_|| | |______| |_| |_|____|______| |_______/ |_| |_|\n |_| \n</code></pre>\n\n<h3 id=\"katakana\">katakana</h3>\n\n<pre class=\"-figlet\"><code> # # ######### ######## ########## # \n ######## # ### # # # ######### # ########## ######### \n # # #### # # # # # # # # # \n# ## # ######## # ######## # # # # # # \n ## # # ## ## # # # # # # # # \n ## # # ## ## ######### ######### # ######### \n ## ####### ######## ## ## # # \n</code></pre>\n\n<h3 id=\"kban\">kban</h3>\n\n<pre class=\"-figlet\"><code>'||' '||' '|| \n || || .... .. .. .. || ... ... ... ... .. ... . .... ... .. \n ||''''|| '' .|| || || || ||' || || || ||' '' || || .|...|| ||' '' \n || || .|' || || || || || | || || || |'' || || \n.||. .||. '|..'|' .|| || ||. '|...' '|..'|. .||. '||||. '|...' .||. \n .|....' \n</code></pre>\n\n<h3 id=\"l4me\">l4me</h3>\n\n<pre class=\"-figlet\"><code>|-|4mbvrg3r\n</code></pre>\n\n<h3 id=\"larry3d\">larry3d</h3>\n\n<pre class=\"-figlet\"><code> __ __ __ \n/\\ \\/\\ \\ /\\ \\ \n\\ \\ \\_\\ \\ __ ___ ___\\ \\ \\____ __ __ _ __ __ __ _ __ \n \\ \\ _ \\ /'__`\\ /' __` __`\\ \\ '__`\\/\\ \\/\\ \\/\\`'__\\/'_ `\\ /'__`\\/\\`'__\\\n \\ \\ \\ \\ \\/\\ \\L\\.\\_/\\ \\/\\ \\/\\ \\ \\ \\L\\ \\ \\ \\_\\ \\ \\ \\//\\ \\L\\ \\/\\ __/\\ \\ \\/ \n \\ \\_\\ \\_\\ \\__/.\\_\\ \\_\\ \\_\\ \\_\\ \\_,__/\\ \\____/\\ \\_\\\\ \\____ \\ \\____\\\\ \\_\\ \n \\/_/\\/_/\\/__/\\/_/\\/_/\\/_/\\/_/\\/___/ \\/___/ \\/_/ \\/___L\\ \\/____/ \\/_/ \n /\\____/ \n \\_/__/ \n</code></pre>\n\n<h3 id=\"lcd\">lcd</h3>\n\n<pre class=\"-figlet\"><code> _ \n| | | | | \n|-+-| - |- - |- |- -| - |- \n| | | | | | | | | | | | | |/ | \n -- - -- - -- \n</code></pre>\n\n<h3 id=\"lean\">lean</h3>\n\n<pre class=\"-figlet\"><code> _/ _/ _/ \n _/ _/ _/_/_/ _/_/_/ _/_/ _/_/_/ _/ _/ _/ _/_/ _/_/_/ _/_/ _/ _/_/ \n _/_/_/_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/ _/ _/_/_/_/ _/_/ \n _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ \n_/ _/ _/_/_/ _/ _/ _/ _/_/_/ _/_/_/ _/ _/_/_/ _/_/_/ _/ \n _/ \n _/_/ \n</code></pre>\n\n<h3 id=\"letters\">letters</h3>\n\n<pre class=\"-figlet\"><code>HH HH bb \nHH HH aa aa mm mm mmmm bb uu uu rr rr gggggg eee rr rr \nHHHHHHH aa aaa mmm mm mm bbbbbb uu uu rrr r gg gg ee e rrr r \nHH HH aa aaa mmm mm mm bb bb uu uu rr ggggggg eeeee rr \nHH HH aaa aa mmm mm mm bbbbbb uuuu u rr gg eeeee rr \n ggggg \n</code></pre>\n\n<h3 id=\"linux\">linux</h3>\n\n<pre class=\"-figlet\"><code>.-. .-..---..-.-.-..--..-..-..---. .---..---..---. \n| |=| || | || | | ||-&lt; | || || |-&lt; | |'_| |- | |-&lt; \n`-' `-'`-^-'`-'-'-'`--'`----'`-'`-'`-'-/`---'`-'`-'\n</code></pre>\n\n<h3 id=\"lockergnome\">lockergnome</h3>\n\n<pre class=\"-figlet\"><code>::| ::| :| \n::::::|.::\\ :\\/| ::'| :\\:| :::| /::| :~~/ :::| \n::| ::|`::| :::| :::| `::| :| \\::| :::, :| \n ,.:/ \n</code></pre>\n\n<h3 id=\"madrid\">madrid</h3>\n\n<pre class=\"-figlet\"><code>/ \\ | \n|=| /=| /=\\=\\ |=\\ | | /= /=| /=\\ /= \n\\ / \\=| | | | |=/ \\=/ | \\=| \\= | \n \\=| \n</code></pre>\n\n<h3 id=\"marquee\">marquee</h3>\n\n<pre class=\"-figlet\"><code>.:: .:: .:: \n.:: .:: .:: \n.:: .:: .:: .::: .:: .:: .:: .:: .::.: .::: .:: .:: .: .:::\n.:::::: .:: .:: .:: .:: .: .::.:: .:: .:: .:: .:: .:: .:: .: .:: .:: \n.:: .::.:: .:: .:: .: .::.:: .::.:: .:: .:: .:: .::.::::: .:: .:: \n.:: .::.:: .:: .:: .: .::.:: .::.:: .:: .:: .:: .::.: .:: \n.:: .:: .:: .:::.::: .: .::.:: .:: .::.::.::: .:: .:::: .::: \n .:: \n</code></pre>\n\n<h3 id=\"maxfour\">maxfour</h3>\n\n<pre class=\"-figlet\"><code>| | | \n|--|/~~||/~\\ /~\\ |~~\\| ||/~\\/~~|/~/|/~\\\n| |\\__|| | ||__/ \\_/|| \\__|\\/_| \n \\__| \n</code></pre>\n\n<h3 id=\"mike\">mike</h3>\n\n<pre class=\"-figlet\"><code> | | _ _ _\n |\\ //| ||\\ |/ |/| | /| |/ | \n | \n</code></pre>\n\n<h3 id=\"mini\">mini</h3>\n\n<pre class=\"-figlet\"><code>|_| _.._ _ |_ .__ _ ._ \n| |(_|| | ||_)|_||(_|(/_| \n _| \n</code></pre>\n\n<h3 id=\"mirror\">mirror</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n __ _ ___ _ __ __ _ _ _ __| | ___ __ _ _ __ | | | |\n |__` / _ \\| '_ \\__` | | | |/ _` |/ _ ' _` | '_ \\| |_| |\n | \\__ | |_) | | | |_| | (_| | | | | | | |_) | _ |\n |_|___/| .__/ |_|_.__/ \\__,_|_| |_| |_|_.__/|_| |_|\n \\___| \n</code></pre>\n\n<h3 id=\"mnemonic\">mnemonic</h3>\n\n<pre class=\"-figlet\"><code>Hamburger\n</code></pre>\n\n<h3 id=\"morse\">morse</h3>\n\n<pre class=\"-figlet\"><code>.... .- -- -... ..- .-. --. . .-. \n</code></pre>\n\n<h3 id=\"moscow\">moscow</h3>\n\n<pre class=\"-figlet\"><code># # # # # #### # # #### ##### ##### #### \n # # # # ## ## # # # # # # # # # # \n # ##### # # # #### # #### # #### #### \n # # # # # # # # # # # # # \n# # # # # # ##### # # # ##### # \n</code></pre>\n\n<h3 id=\"mshebrew210\">mshebrew210</h3>\n\n<pre class=\"-figlet\"><code> \"\"|\"\"|\\ |\"\"|| |\\/|/ |\n || ' \\/ ||_|_\\|_/ \n | -' \n</code></pre>\n\n<h3 id=\"nancyj-fancy\">nancyj-fancy</h3>\n\n<pre class=\"-figlet\"><code>M\"\"MMMMM\"\"MM dP \nM MMMMM MM 88 \nM `M .d8888b. 88d8b.d8b. 88d888b. dP dP 88d888b. .d8888b. .d8888b. 88d888b. \nM MMMMM MM 88' `88 88'`88'`88 88' `88 88 88 88' `88 88' `88 88ooood8 88' `88 \nM MMMMM MM 88. .88 88 88 88 88. .88 88. .88 88 88. .88 88. ... 88 \nM MMMMM MM `88888P8 dP dP dP 88Y8888' `88888P' dP `8888P88 `88888P' dP \nMMMMMMMMMMMM .88 \n d8888P \n</code></pre>\n\n<h3 id=\"nancyj-underlined\">nancyj-underlined</h3>\n\n<pre class=\"-figlet\"><code>dP dP dP \n88 88 88 \n88aaaaa88a .d8888b. 88d8b.d8b. 88d888b. dP dP 88d888b. .d8888b. .d8888b. 88d888b. \n88 88 88' `88 88'`88'`88 88' `88 88 88 88' `88 88' `88 88ooood8 88' `88 \n88 88 88. .88 88 88 88 88. .88 88. .88 88 88. .88 88. ... 88 \ndP dP `88888P8 dP dP dP 88Y8888' `88888P' dP `8888P88 `88888P' dP \nooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo~~~~.88~oooooooooooooooooo\n d8888P \n</code></pre>\n\n<h3 id=\"nancyj\">nancyj</h3>\n\n<pre class=\"-figlet\"><code>dP dP dP \n88 88 88 \n88aaaaa88a .d8888b. 88d8b.d8b. 88d888b. dP dP 88d888b. .d8888b. .d8888b. 88d888b. \n88 88 88' `88 88'`88'`88 88' `88 88 88 88' `88 88' `88 88ooood8 88' `88 \n88 88 88. .88 88 88 88 88. .88 88. .88 88 88. .88 88. ... 88 \ndP dP `88888P8 dP dP dP 88Y8888' `88888P' dP `8888P88 `88888P' dP \n .88 \n d8888P \n</code></pre>\n\n<h3 id=\"nipples\">nipples</h3>\n\n<pre class=\"-figlet\"><code>{__ {__ {__ \n{__ {__ {__ \n{__ {__ {__ {___ {__ {__ {__ {__ {__{_ {___ {__ {__ {_ {___\n{______ {__ {__ {__ {__ {_ {__{__ {__ {__ {__ {__ {__ {__ {_ {__ {__ \n{__ {__{__ {__ {__ {_ {__{__ {__{__ {__ {__ {__ {__{_____ {__ {__ \n{__ {__{__ {__ {__ {_ {__{__ {__{__ {__ {__ {__ {__{_ {__ \n{__ {__ {__ {___{___ {_ {__{__ {__ {__{__{___ {__ {____ {___ \n {__ \n</code></pre>\n\n<h3 id=\"ntgreek\">ntgreek</h3>\n\n<pre class=\"-figlet\"><code> _ _ ___ \n| | | | / _ \\ \n| |_| | __ ___ _| |_) )_ _ ___ _ _ ___ ___ \n| _ |/ \\/ / | | | _ &lt;| | | |/ _ ( \\ / ) __)/ _ \\ \n| | | ( () &lt;| |_| | |_) ) |_| | |_) ) v /&gt; _)| |_) )\n|_| |_|\\__/\\_\\ ._,_| __/ \\___/| __/ | | \\___) __/ \n | | | | | | | | | | \n |_| |_| |_| |_| |_| \n</code></pre>\n\n<h3 id=\"nvscript\">nvscript</h3>\n\n<pre class=\"-figlet\"><code> ,ggg, gg \ndP\"\"Y8b 88 ,dPYb, \nYb, `88 88 IP'`Yb \n `\" 88 88 I8 8I \n 88aaaaaaa88 I8 8' \n 88\"\"\"\"\"\"\"88 ,gggg,gg ,ggg,,ggg,,ggg, I8 dP gg gg ,gggggg, ,gggg,gg ,ggg, ,gggggg, \n 88 88 dP\" \"Y8I ,8\" \"8P\" \"8P\" \"8, I8dP 88ggI8 8I dP\"\"\"\"8I dP\" \"Y8I i8\" \"8i dP\"\"\"\"8I \n 88 88 i8' ,8I I8 8I 8I 8I I8P 8I I8, ,8I ,8' 8I i8' ,8I I8, ,8I ,8' 8I \n 88 Y8,,d8, ,d8b,,dP 8I 8I Yb,,d8b, ,8I ,d8b, ,d8b,,dP Y8,,d8, ,d8I `YbadP' ,dP Y8,\n 88 `Y8P\"Y8888P\"`Y88P' 8I 8I `Y88P'\"Y88P\"' 8P'\"Y88P\"`Y88P `Y8P\"Y8888P\"888888P\"Y8888P `Y8\n ,d8I' \n ,dP'8I \n ,8\" 8I \n I8 8I \n `8, ,8I \n `Y8P\" \n</code></pre>\n\n<h3 id=\"o8\">o8</h3>\n\n<pre class=\"-figlet\"><code>ooooo ooooo oooo \n 888 888 ooooooo oo ooo oooo 888ooooo oooo oooo oo oooooo oooooooo8 ooooooooo8 oo oooooo \n 888ooo888 ooooo888 888 888 888 888 888 888 888 888 888 888 88o 888oooooo8 888 888 \n 888 888 888 888 888 888 888 888 888 888 888 888 888oo888o 888 888 \no888o o888o 88ooo88 8o o888o888o888o o888ooo88 888o88 8o o888o 888 888 88oooo888 o888o \n 888ooo888 \n</code></pre>\n\n<h3 id=\"octal\">octal</h3>\n\n<pre class=\"-figlet\"><code>110 141 155 142 165 162 147 145 162 \n</code></pre>\n\n<h3 id=\"ogre\">ogre</h3>\n\n<pre class=\"-figlet\"><code> _ \n /\\ /\\__ _ _ __ ___ | |__ _ _ _ __ __ _ ___ _ __ \n / /_/ / _` | '_ ` _ \\| '_ \\| | | | '__/ _` |/ _ \\ '__|\n/ __ / (_| | | | | | | |_) | |_| | | | (_| | __/ | \n\\/ /_/ \\__,_|_| |_| |_|_.__/ \\__,_|_| \\__, |\\___|_| \n |___/ \n</code></pre>\n\n<h3 id=\"os2\">os2</h3>\n\n<pre class=\"-figlet\"><code>oo____oo___________________oo______________________________________________\noo____oo__ooooo__oo_oo_oo__oooooo__oo____o_oo_ooo___oooo____ooooo__oo_ooo__\noo____oo_oo___oo_ooo_oo__o_oo___oo_oo____o_ooo___o_oo__oo__oo____o_ooo___o_\noooooooo_oo___oo_oo__oo__o_oo___oo_oo____o_oo______oo___o__ooooooo_oo______\noo____oo_oo___oo_oo__oo__o_oo___oo_ooo___o_oo_______oooooo_oo______oo______\noo____oo__oooo_o_oo______o_oooooo__oo_ooo__oo______o____oo__ooooo__oo______\n____________________________________________________ooooo__________________\n</code></pre>\n\n<h3 id=\"pawp\">pawp</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n(_) (_) (_) _ ____ _ \n(_)___(_) ____ __ __ (_)_ _ _ (_)__ ____ (____)(_)__ \n(_______) (____) (__)_(__) (___)_ (_) (_)(____)(____)(_)_(_)(____)\n(_) (_)( )_( )(_) (_) (_)(_)_(_)(_)_(_)(_) ( )_(_)(__)__ (_) \n(_) (_) (__)_)(_) (_) (_)(____) (___) (_) (____) (____)(_) \n (_)_(_) \n (___) \n</code></pre>\n\n<h3 id=\"peaks\">peaks</h3>\n\n<pre class=\"-figlet\"><code>/^^ /^^ /^^ \n/^^ /^^ /^^ \n/^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^/^ /^^^ /^^ /^^ /^ /^^^\n/^^^^^^ /^^ /^^ /^^ /^^ /^ /^^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ \n/^^ /^^/^^ /^^ /^^ /^ /^^/^^ /^^/^^ /^^ /^^ /^^ /^^/^^^^^ /^^ /^^ \n/^^ /^^/^^ /^^ /^^ /^ /^^/^^ /^^/^^ /^^ /^^ /^^ /^^/^ /^^ \n/^^ /^^ /^^ /^^^/^^^ /^ /^^/^^ /^^ /^^/^^/^^^ /^^ /^^^^ /^^^ \n /^^ \n</code></pre>\n\n<h3 id=\"pebbles\">pebbles</h3>\n\n<pre class=\"-figlet\"><code>o O o \nO o O \no O O \nOoOooOOo o \no O .oOoO' `oOOoOO. OoOo. O o `OoOo. .oOoO .oOo. `OoOo. \nO o O o O o o O o o O o o O OooO' o \no o o O o O O o O O o O O o O O \no O `OoO'o O o o `OoO' `OoO'o o `OoOo `OoO' o \n O \n OoO' \n</code></pre>\n\n<h3 id=\"pepper\">pepper</h3>\n\n<pre class=\"-figlet\"><code> /_/_ _ _ /_ __ _ _\n/ //_|/ / //_//_///_//_'/ \n _/ \n</code></pre>\n\n<h3 id=\"poison\">poison</h3>\n\n<pre class=\"-figlet\"><code>@@@ @@@ @@@@@@ @@@@@@@@@@ @@@@@@@ @@@ @@@ @@@@@@@ @@@@@@@@ @@@@@@@@ @@@@@@@ \n@@@ @@@ @@@@@@@@ @@@@@@@@@@@ @@@@@@@@ @@@ @@@ @@@@@@@@ @@@@@@@@@ @@@@@@@@ @@@@@@@@ \n@@! @@@ @@! @@@ @@! @@! @@! @@! @@@ @@! @@@ @@! @@@ !@@ @@! @@! @@@ \n!@! @!@ !@! @!@ !@! !@! !@! !@ @!@ !@! @!@ !@! @!@ !@! !@! !@! @!@ \n@!@!@!@! @!@!@!@! @!! !!@ @!@ @!@!@!@ @!@ !@! @!@!!@! !@! @!@!@ @!!!:! @!@!!@! \n!!!@!!!! !!!@!!!! !@! ! !@! !!!@!!!! !@! !!! !!@!@! !!! !!@!! !!!!!: !!@!@! \n!!: !!! !!: !!! !!: !!: !!: !!! !!: !!! !!: :!! :!! !!: !!: !!: :!! \n:!: !:! :!: !:! :!: :!: :!: !:! :!: !:! :!: !:! :!: !:: :!: :!: !:! \n:: ::: :: ::: ::: :: :: :::: ::::: :: :: ::: ::: :::: :: :::: :: ::: \n : : : : : : : : :: : :: : : : : : : :: :: : : :: :: : : : \n</code></pre>\n\n<h3 id=\"puffy\">puffy</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n( ) ( ) ( ) \n| |_| | _ _ ___ ___ | |_ _ _ _ __ __ __ _ __ \n| _ | /'_` )/' _ ` _ `\\| '_`\\ ( ) ( )( '__)/'_ `\\ /'__`\\( '__)\n| | | |( (_| || ( ) ( ) || |_) )| (_) || | ( (_) |( ___/| | \n(_) (_)`\\__,_)(_) (_) (_)(_,__/'`\\___/'(_) `\\__ |`\\____)(_) \n ( )_) | \n \\___/' \n</code></pre>\n\n<h3 id=\"pyramid\">pyramid</h3>\n\n<pre class=\"-figlet\"><code> ^ ^ ^ ^ ^ ^ ^ ^ ^ \n /H\\ /a\\ /m\\ /b\\ /u\\ /r\\ /g\\ /e\\ /r\\ \n&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;&lt;___&gt;\n</code></pre>\n\n<h3 id=\"rectangles-1\">rectangles</h3>\n\n<pre class=\"-figlet\"><code> _____ _ \n| | |___ _____| |_ _ _ ___ ___ ___ ___ \n| | .'| | . | | | _| . | -_| _|\n|__|__|__,|_|_|_|___|___|_| |_ |___|_| \n |___| \n</code></pre>\n\n<h3 id=\"relief\">relief</h3>\n\n<pre class=\"-figlet\"><code>___________________________________________________________________________________________________\n/~~\\__/~~\\__/~~~~~~\\__/~~\\__/~~\\_/~~~~~~~\\__/~~\\__/~~\\_/~~~~~~~\\___/~~~~~~\\__/~~~~~~~~\\_/~~~~~~~\\__\n/~~\\__/~~\\_/~~\\__/~~\\_/~~~\\/~~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\_______/~~\\__/~~\\_\n/~~~~~~~~\\_/~~~~~~~~\\_/~~~~~~~~\\_/~~~~~~~\\__/~~\\__/~~\\_/~~~~~~~\\__/~~\\_______/~~~~~~\\___/~~~~~~~\\__\n/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~\\_______/~~\\__/~~\\_\n/~~\\__/~~\\_/~~\\__/~~\\_/~~\\__/~~\\_/~~~~~~~\\___/~~~~~~\\__/~~\\__/~~\\__/~~~~~~~\\_/~~~~~~~~\\_/~~\\__/~~\\_\n________________________________________________________________________/~~\\_______________________\n</code></pre>\n\n<h3 id=\"relief2\">relief2</h3>\n\n<pre class=\"-figlet\"><code>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n/// \\\\/// \\\\/////// \\\\/// \\\\/// \\//////// \\\\/// \\\\/// \\//////// \\\\\\/////// \\\\///////// \\//////// \\\\\n/// \\\\/// \\/// \\\\/// \\//// //// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\\\\\\\\\\\/// \\\\/// \\\n///////// \\///////// \\/// / /// \\//////// \\\\/// \\\\/// \\//////// \\\\/// \\\\\\\\\\\\\\/////// \\\\\\//////// \\\\\n/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\/// \\\\\\\\\\\\\\/// \\\\/// \\\n/// \\\\/// \\/// \\\\/// \\/// \\\\/// \\//////// \\\\\\/////// \\\\/// \\\\/// \\\\//////// \\///////// \\/// \\\\/// \\\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n</code></pre>\n\n<h3 id=\"rev\">rev</h3>\n\n<pre class=\"-figlet\"><code>=========================================================================\n= ==== =================== ===========================================\n= ==== =================== ===========================================\n= ==== =================== ===========================================\n= ==== === === = = === ===== = == = ==== ==== === = ==\n= == = == == === = == = == = == = == = =\n= ==== ===== == = = == = == = == ======== == == ======\n= ==== === == = = == = == = == ========== == ===== ======\n= ==== == = == = = == = == = == ======= = == = == ======\n= ==== === == = = == ==== == ======== ==== === ======\n=========================================================================\n</code></pre>\n\n<h3 id=\"roman\">roman</h3>\n\n<pre class=\"-figlet\"><code>ooooo ooooo .o8 \n`888' `888' \"888 \n 888 888 .oooo. ooo. .oo. .oo. 888oooo. oooo oooo oooo d8b .oooooooo .ooooo. oooo d8b \n 888ooooo888 `P )88b `888P\"Y88bP\"Y88b d88' `88b `888 `888 `888\"\"8P 888' `88b d88' `88b `888\"\"8P \n 888 888 .oP\"888 888 888 888 888 888 888 888 888 888 888 888ooo888 888 \n 888 888 d8( 888 888 888 888 888 888 888 888 888 `88bod8P' 888 .o 888 \no888o o888o `Y888\"\"8o o888o o888o o888o `Y8bod8P' `V88V\"V8P' d888b `8oooooo. `Y8bod8P' d888b \n d\" YD \n \"Y88888P' \n</code></pre>\n\n<h3 id=\"rot13\">rot13</h3>\n\n<pre class=\"-figlet\"><code>Unzohetre\n</code></pre>\n\n<h3 id=\"rounded\">rounded</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n(_) (_) | | \n _______ _____ ____ | |__ _ _ ____ ____ _____ ____ \n| ___ (____ | \\| _ \\| | | |/ ___) _ | ___ |/ ___)\n| | | / ___ | | | | |_) ) |_| | | ( (_| | ____| | \n|_| |_\\_____|_|_|_|____/|____/|_| \\___ |_____)_| \n (_____| \n</code></pre>\n\n<h3 id=\"rowancap\">rowancap</h3>\n\n<pre class=\"-figlet\"><code> dMP dMP .aMMMb dMMMMMMMMb dMMMMb dMP dMP dMMMMb .aMMMMP dMMMMMP dMMMMb \n dMP dMP dMP\"dMP dMP\"dMP\"dMPdMP\"dMP dMP dMP dMP.dMP dMP\" dMP dMP.dMP \n dMMMMMP dMMMMMP dMP dMP dMPdMMMMK\" dMP dMP dMMMMK\" dMP MMP\"dMMMP dMMMMK\" \n dMP dMP dMP dMP dMP dMP dMPdMP.aMF dMP.aMP dMP\"AMF dMP.dMP dMP dMP\"AMF \ndMP dMP dMP dMP dMP dMP dMPdMMMMP\" VMMMP\" dMP dMP VMMMP\" dMMMMMP dMP dMP \n</code></pre>\n\n<h3 id=\"rozzo\">rozzo</h3>\n\n<pre class=\"-figlet\"><code>888 888 888 \n888 888 ,\"Y88b 888 888 8e 888 88e 8888 8888 888,8, e88 888 ,e e, 888,8, \n8888888 \"8\" 888 888 888 88b 888 888b 8888 8888 888 \" d888 888 d88 88b 888 \" \n888 888 ,ee 888 888 888 888 888 888P Y888 888P 888 Y888 888 888 , 888 \n888 888 \"88 888 888 888 888 888 88\" \"88 88\" 888 \"88 888 \"YeeP\" 888 \n , 88P \n \"8\",P\" \n</code></pre>\n\n<h3 id=\"runic\">runic</h3>\n\n<pre class=\"-figlet\"><code>| | \n|\\ | \n| \\ | \n| \\ | \n| \\| \n| | \n</code></pre>\n\n<h3 id=\"runyc\">runyc</h3>\n\n<pre class=\"-figlet\"><code>| | \n|\\ | \n| \\ | \n| \\ | |\\ |\\/| |\\ |\\ |\\ \\ / |\\/| |\\ \n| \\| |\\ |/\\| |&lt; | | |/ X | | |/ \n| | | | | |/ | | |\\ / \\ | | |\\ \n</code></pre>\n\n<h3 id=\"sblood\">sblood</h3>\n\n<pre class=\"-figlet\"><code> @@@ @@@ @@@@@@ @@@@@@@@@@ @@@@@@@ @@@ @@@ @@@@@@@ @@@@@@@ @@@@@@@@ @@@@@@@ \n @@! @@@ @@! @@@ @@! @@! @@! @@! @@@ @@! @@@ @@! @@@ !@@ @@! @@! @@@\n @!@!@!@! @!@!@!@! @!! !!@ @!@ @!@!@!@ @!@ !@! @!@!!@! !@! @!@!@ @!!!:! @!@!!@! \n !!: !!! !!: !!! !!: !!: !!: !!! !!: !!! !!: :!! :!! !!: !!: !!: :!! \n : : : : : : : : :: : :: :.:: : : : : :: :: : : :: ::: : : :\n</code></pre>\n\n<h3 id=\"script\">script</h3>\n\n<pre class=\"-figlet\"><code> , _ \n/| | | | \n |___| __, _ _ _ | | ,_ __, _ ,_ \n | |\\/ | / |/ |/ | |/ \\_| | / | / | |/ / | \n | |/\\_/|_/ | | |_/\\_/ \\_/|_/ |_/\\_/|/|__/ |_/\n /| \n \\| \n</code></pre>\n\n<h3 id=\"serifcap\">serifcap</h3>\n\n<pre class=\"-figlet\"><code> _ _ __ __ __ ___ _ _ ___ __ ___ ___ \n( )( ) ( ) ( \\/ )( ,)( )( )( ,) / _)( _)( ,) \n )__( /__\\ ) ( ) ,\\ )()( ) \\( (/\\ ) _) ) \\ \n(_)(_)(_)(_)(_/\\/\\_)(___/ \\__/ (_)\\_)\\__/(___)(_)\\_)\n</code></pre>\n\n<h3 id=\"shadow\">shadow</h3>\n\n<pre class=\"-figlet\"><code> | | | \n | | _` | __ `__ \\ __ \\ | | __| _` | _ \\ __| \n ___ | ( | | | | | | | | | ( | __/ | \n_| _|\\__,_|_| _| _|_.__/ \\__,_|_| \\__, |\\___|_| \n |___/ \n</code></pre>\n\n<h3 id=\"short\">short</h3>\n\n<pre class=\"-figlet\"><code>|_| ,_ | _ \n| |(|||||)L||`(|(/_|`\n _| \n</code></pre>\n\n<h3 id=\"slant\">slant</h3>\n\n<pre class=\"-figlet\"><code> __ __ __ \n / / / /___ _____ ___ / /_ __ ___________ ____ _____\n / /_/ / __ `/ __ `__ \\/ __ \\/ / / / ___/ __ `/ _ \\/ ___/\n / __ / /_/ / / / / / / /_/ / /_/ / / / /_/ / __/ / \n/_/ /_/\\__,_/_/ /_/ /_/_.___/\\__,_/_/ \\__, /\\___/_/ \n /____/ \n</code></pre>\n\n<h3 id=\"slide\">slide</h3>\n\n<pre class=\"-figlet\"><code>## || ## \n## ||##| ##H H| ## ## H|## H|#HH| #H| ## H| \n##HH|| H| ### HH|##H| ## H|##H|## H|##HH|##H| \n## ||##H| ## H H|## H|## H|## #HH|## ## \n## ||##HH|## H|##H| #HH|## H| #HH|## \n ##H| \n</code></pre>\n\n<h3 id=\"slscript\">slscript</h3>\n\n<pre class=\"-figlet\"><code> _ , \n' ) / / \n /--/ __. ______ /__. . __ _, _ __ \n/ (_(_/|_/ / / &lt;_/_)(_/_/ (_(_)_&lt;/_/ (_\n /| \n |/ \n</code></pre>\n\n<h3 id=\"small\">small</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| || |__ _ _ __ | |__ _ _ _ _ __ _ ___ _ _ \n| __ / _` | ' \\| '_ \\ || | '_/ _` / -_) '_|\n|_||_\\__,_|_|_|_|_.__/\\_,_|_| \\__, \\___|_| \n |___/ \n</code></pre>\n\n<h3 id=\"smisome1\">smisome1</h3>\n\n<pre class=\"-figlet\"><code> ___ ___ ___ ___ ___ ___ ___ ___ ___ \n /\\__\\ /\\ \\ /\\__\\ /\\ \\ /\\__\\ /\\ \\ /\\ \\ /\\ \\ /\\ \\ \n /:/__/_ /::\\ \\ /::L_L_ /::\\ \\ /:/ _/_ /::\\ \\ /::\\ \\ /::\\ \\ /::\\ \\ \n /::\\/\\__\\ /::\\:\\__\\ /:/L:\\__\\ /::\\:\\__\\ /:/_/\\__\\ /::\\:\\__\\ /:/\\:\\__\\ /::\\:\\__\\ /::\\:\\__\\\n \\/\\::/ / \\/\\::/ / \\/_/:/ / \\:\\::/ / \\:\\/:/ / \\;:::/ / \\:\\:\\/__/ \\:\\:\\/ / \\;:::/ /\n /:/ / /:/ / /:/ / \\::/ / \\::/ / |:\\/__/ \\::/ / \\:\\/ / |:\\/__/ \n \\/__/ \\/__/ \\/__/ \\/__/ \\/__/ \\|__| \\/__/ \\/__/ \\|__| \n</code></pre>\n\n<h3 id=\"smkeyboard\">smkeyboard</h3>\n\n<pre class=\"-figlet\"><code> ____ ____ ____ ____ ____ ____ ____ ____ ____ \n||H |||a |||m |||b |||u |||r |||g |||e |||r ||\n||__|||__|||__|||__|||__|||__|||__|||__|||__||\n|/__\\|/__\\|/__\\|/__\\|/__\\|/__\\|/__\\|/__\\|/__\\|\n</code></pre>\n\n<h3 id=\"smscript\">smscript</h3>\n\n<pre class=\"-figlet\"><code> , \n/| | _, |) ,_ _, _ ,_ \n |--| / | /|/|/| |/\\_| | / | / | |/ / | \n | |)\\/|_/ | | |_/\\/ \\/|_/ |/\\/|/|_/ |/\n (| \n</code></pre>\n\n<h3 id=\"smshadow\">smshadow</h3>\n\n<pre class=\"-figlet\"><code> | | | \n __ | _` | ` \\ _ \\ | | _|_` | -_) _| \n_| _|\\__,_|_|_|_|_.__/\\_,_|_|\\__, |\\___|_| \n ____/ \n</code></pre>\n\n<h3 id=\"smslant\">smslant</h3>\n\n<pre class=\"-figlet\"><code> __ __ __ \n / // /__ ___ _ / / __ _________ ____ ____\n / _ / _ `/ ' \\/ _ \\/ // / __/ _ `/ -_) __/\n/_//_/\\_,_/_/_/_/_.__/\\_,_/_/ \\_, /\\__/_/ \n /___/ \n</code></pre>\n\n<h3 id=\"smtengwar\">smtengwar</h3>\n\n<pre class=\"-figlet\"><code>\\ .', _ _ _ _ ? _____ ,' \n/\\ | |_)_) |_)_) | \\/ (_(_| | \\/ \n | (, | (, \n</code></pre>\n\n<h3 id=\"speed\">speed</h3>\n\n<pre class=\"-figlet\"><code>______ __ ______ \n___ / / /_____ _______ ______ /_____ _______________ _____________\n__ /_/ /_ __ `/_ __ `__ \\_ __ \\ / / /_ ___/_ __ `/ _ \\_ ___/\n_ __ / / /_/ /_ / / / / / /_/ / /_/ /_ / _ /_/ // __/ / \n/_/ /_/ \\__,_/ /_/ /_/ /_//_.___/\\__,_/ /_/ _\\__, / \\___//_/ \n /____/ \n</code></pre>\n\n<h3 id=\"stacey\">stacey</h3>\n\n<pre class=\"-figlet\"><code>__________________________________________________________________\n7 7 77 _ 77 77 _ 77 7 77 _ 77 77 77 _ 7\n| ! || _ || _ _ || __|| | || _|| __!| ___!| _|\n| || 7 || 7 7 || _ || | || _ \\ | ! 7| __|_| _ \\ \n| 7 || | || | | || 7 || ! || 7 || || 7| 7 |\n!__!__!!__!__!!__!__!__!!_____!!_____!!__!__!!_____!!_____!!__!__!\n</code></pre>\n\n<h3 id=\"stampatello-1\">stampatello</h3>\n\n<pre class=\"-figlet\"><code>,-_/,. . \n' |_|/ ,-. ,-,-. |-. . . ,-. ,-. ,-. ,-. \n /| | ,-| | | | | | | | | | | |-' | \n `' `' `-^ ' ' ' ^-' `-^ ' `-| `-' ' \n ,| \n `' \n</code></pre>\n\n<h3 id=\"standard\">standard</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| | | | __ _ _ __ ___ | |__ _ _ _ __ __ _ ___ _ __ \n| |_| |/ _` | '_ ` _ \\| '_ \\| | | | '__/ _` |/ _ \\ '__|\n| _ | (_| | | | | | | |_) | |_| | | | (_| | __/ | \n|_| |_|\\__,_|_| |_| |_|_.__/ \\__,_|_| \\__, |\\___|_| \n |___/ \n</code></pre>\n\n<h3 id=\"starwars\">starwars</h3>\n\n<pre class=\"-figlet\"><code> __ __ ___ .___ ___. .______ __ __ .______ _______ _______ .______ \n| | | | / \\ | \\/ | | _ \\ | | | | | _ \\ / _____|| ____|| _ \\ \n| |__| | / ^ \\ | \\ / | | |_) | | | | | | |_) | | | __ | |__ | |_) | \n| __ | / /_\\ \\ | |\\/| | | _ &lt; | | | | | / | | |_ | | __| | / \n| | | | / _____ \\ | | | | | |_) | | `--' | | |\\ \\----.| |__| | | |____ | |\\ \\----.\n|__| |__| /__/ \\__\\ |__| |__| |______/ \\______/ | _| `._____| \\______| |_______|| _| `._____|\n</code></pre>\n\n<h3 id=\"stellar\">stellar</h3>\n\n<pre class=\"-figlet\"><code>`.. `.. `.. \n`.. `.. `.. \n`.. `.. `.. `... `.. `.. `.. `.. `..`. `... `.. `.. `. `...\n`...... `.. `.. `.. `.. `. `..`.. `.. `.. `.. `.. `.. `.. `. `.. `.. \n`.. `..`.. `.. `.. `. `..`.. `..`.. `.. `.. `.. `..`..... `.. `.. \n`.. `..`.. `.. `.. `. `..`.. `..`.. `.. `.. `.. `..`. `.. \n`.. `.. `.. `...`... `. `..`.. `.. `..`..`... `.. `.... `... \n `.. \n</code></pre>\n\n<h3 id=\"stop\">stop</h3>\n\n<pre class=\"-figlet\"><code> _ _ _ \n| | | | | | \n| |__ | | ____ ____ | | _ _ _ ____ ____ ____ ____ \n| __)| |/ _ | \\| || \\| | | |/ ___) _ |/ _ )/ ___)\n| | | ( ( | | | | | |_) ) |_| | | ( ( | ( (/ /| | \n|_| |_|\\_||_|_|_|_|____/ \\____|_| \\_|| |\\____)_| \n (_____| \n</code></pre>\n\n<h3 id=\"straight\">straight</h3>\n\n<pre class=\"-figlet\"><code>|__| _ _ |_ _ _ _ _ \n| |(_|||||_)|_|| (_)(-| \n _/ \n</code></pre>\n\n<h3 id=\"tanja\">tanja</h3>\n\n<pre class=\"-figlet\"><code>H) hh b) \nH) hh b) \nH)hhhhhh a)AAAA m)MM MMM b)BBBB u) UU r)RRR g)GGG e)EEEEE r)RRR \nH) hh a)AAA m) MM MM b) BB u) UU r) RR g) GG e)EEEE r) RR \nH) hh a) A m) MM MM b) BB u) UU r) g) GG e) r) \nH) hh a)AAAA m) MM b)BBBB u)UUU r) g)GGGG e)EEEE r) \n GG \n g)GGGG \n</code></pre>\n\n<h3 id=\"tengwar\">tengwar</h3>\n\n<pre class=\"-figlet\"><code>`Yb. db dP\"Yb. .dP' \n `Yb db db `b 'Yb dP' \n Yb \"Ybaaaaaaaaad8' \n Yb 'Yb `Yb d88b d88b `Yb d88b d88b 'Yb `Yb dP' .dP' dP' 88 'Yb `Yb dP' \n dPYb 88 88P 88 8b 88P 8Y 8b 88 Yb dP 88 88 88 88 Yb dP \n ,dP Yb 88 88 8P 88 88 8P 88 88 YbdP Y8 Y8 .88 88 YbdP \n.dP' `Yb. .8P 88 .dP .dP 88 .dP' .dP' .8P .8P `Y88P`Y88P'88 .8P .8P \n .888888888888b. 888888888888b. dP' b 88 dP' b \n 88 Y. ,P 88 Y. ,P \n .8P `\"\"' Y8. `\"\"' \n</code></pre>\n\n<h3 id=\"term\">term</h3>\n\n<pre class=\"-figlet\"><code>Hamburger\n</code></pre>\n\n<h3 id=\"thick\">thick</h3>\n\n<pre class=\"-figlet\"><code>8 8 8 \n8www8 .d88 8d8b.d8b. 88b. 8 8 8d8b .d88 .d88b 8d8b \n8 8 8 8 8P Y8P Y8 8 8 8b d8 8P 8 8 8.dP' 8P \n8 8 `Y88 8 8 8 88P' `Y8P8 8 `Y88 `Y88P 8 \n wwdP \n</code></pre>\n\n<h3 id=\"thin-1\">thin</h3>\n\n<pre class=\"-figlet\"><code>| | | \n|---|,---.,-.-.|---.. .,---.,---.,---.,---.\n| |,---|| | || || || | ||---'| \n` '`---^` ' '`---'`---'` `---|`---'` \n `---' \n</code></pre>\n\n<h3 id=\"threepoint\">threepoint</h3>\n\n<pre class=\"-figlet\"><code>|_| _ _ _ |_ _ _ _ _\n| |(_|| | ||_)|_|| (_|(/_| \n _| \n</code></pre>\n\n<h3 id=\"ticks\">ticks</h3>\n\n<pre class=\"-figlet\"><code>_/\\/\\____/\\/\\______________________________/\\/\\___________________________________________________________________\n_/\\/\\____/\\/\\__/\\/\\/\\______/\\/\\/\\__/\\/\\____/\\/\\________/\\/\\__/\\/\\__/\\/\\__/\\/\\____/\\/\\/\\/\\____/\\/\\/\\____/\\/\\__/\\/\\_\n_/\\/\\/\\/\\/\\/\\______/\\/\\____/\\/\\/\\/\\/\\/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\/\\__/\\/\\/\\/\\/\\__/\\/\\/\\/\\___\n_/\\/\\____/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__________/\\/\\/\\/\\__/\\/\\________/\\/\\_______\n_/\\/\\____/\\/\\__/\\/\\/\\/\\/\\__/\\/\\______/\\/\\__/\\/\\/\\/\\______/\\/\\/\\/\\__/\\/\\______________/\\/\\____/\\/\\/\\/\\__/\\/\\_______\n_______________________________________________________________________________/\\/\\/\\/\\___________________________\n</code></pre>\n\n<h3 id=\"ticksslant\">ticksslant</h3>\n\n<pre class=\"-figlet\"><code> _/\\/\\____/\\/\\______________________________/\\/\\___________________________________________________________________\n _/\\/\\____/\\/\\__/\\/\\/\\______/\\/\\/\\__/\\/\\____/\\/\\________/\\/\\__/\\/\\__/\\/\\__/\\/\\____/\\/\\/\\/\\____/\\/\\/\\____/\\/\\__/\\/\\_ \n _/\\/\\/\\/\\/\\/\\______/\\/\\____/\\/\\/\\/\\/\\/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\/\\__/\\/\\/\\/\\/\\__/\\/\\/\\/\\___ \n _/\\/\\____/\\/\\__/\\/\\/\\/\\____/\\/\\__/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__/\\/\\__________/\\/\\/\\/\\__/\\/\\________/\\/\\_______ \n _/\\/\\____/\\/\\__/\\/\\/\\/\\/\\__/\\/\\______/\\/\\__/\\/\\/\\/\\______/\\/\\/\\/\\__/\\/\\______________/\\/\\____/\\/\\/\\/\\__/\\/\\_______ \n_______________________________________________________________________________/\\/\\/\\/\\___________________________ \n</code></pre>\n\n<h3 id=\"tinker-toy\">tinker-toy</h3>\n\n<pre class=\"-figlet\"><code>o o o \n| | | \nO--O oo o-O-o O-o o o o-o o--o o-o o-o \n| | | | | | | | | | | | | | |-' | \no o o-o-o o o o-o o--o o o--O o-o o \n | \n o--o \n</code></pre>\n\n<h3 id=\"tombstone\">tombstone</h3>\n\n<pre class=\"-figlet\"><code> _,_ _, _, _ __, _,_ __, _, __, __,\n |_| /_\\ |\\/| |_) | | |_) / _ |_ |_)\n | | | | | | |_) | | | \\ \\ / | | \\\n ~ ~ ~ ~ ~ ~ ~ `~' ~ ~ ~ ~~~ ~ ~\n</code></pre>\n\n<h3 id=\"trek\">trek</h3>\n\n<pre class=\"-figlet\"><code> dBP dBP dBBBBBb dBBBBBBb dBBBBb dBP dBP dBBBBBb dBBBBb dBBBP dBBBBBb\n BB dBP dBP dBP dBP\n dBBBBBP dBP BB dBPdBPdBP dBBBK' dBP dBP dBBBBK dBBBB dBBP dBBBBK \n dBP dBP dBP BB dBPdBPdBP dB' db dBP_dBP dBP BB dB' BB dBP dBP BB \n dBP dBP dBBBBBBB dBPdBPdBP dBBBBP' dBBBBBP dBP dB' dBBBBBB dBBBBP dBP dB' \n</code></pre>\n\n<h3 id=\"tsalagi\">tsalagi</h3>\n\n<pre class=\"-figlet\"><code> __ __ -|- __ __ ___ ___ __ \n/ ' | \\ | ` \\ , |~, / ' |_-_ | / ' \n\\_ | \\ | _ |@| | | ,_ `\\/\\ |_, | ,_ \n/ _ | / | _ | | | | / | ' | | | | ' | ' | \n\\__, |__/ _| \\_|_/ \\/ \\__/ \\/ _|_ \\__/ \n</code></pre>\n\n<h3 id=\"twopoint\">twopoint</h3>\n\n<pre class=\"-figlet\"><code>|_| _ ._ _ |_ ._(~| _._\n| |(_|| | ||_)|_|| _|}_| \n</code></pre>\n\n<h3 id=\"univers\">univers</h3>\n\n<pre class=\"-figlet\"><code>88 88 88 \n88 88 88 \n88 88 88 \n88aaaaaaaa88 ,adPPYYba, 88,dPYba,,adPYba, 88,dPPYba, 88 88 8b,dPPYba, ,adPPYb,d8 ,adPPYba, 8b,dPPYba, \n88\"\"\"\"\"\"\"\"88 \"\" `Y8 88P' \"88\" \"8a 88P' \"8a 88 88 88P' \"Y8 a8\" `Y88 a8P_____88 88P' \"Y8 \n88 88 ,adPPPPP88 88 88 88 88 d8 88 88 88 8b 88 8PP\"\"\"\"\"\"\" 88 \n88 88 88, ,88 88 88 88 88b, ,a8\" \"8a, ,a88 88 \"8a, ,d88 \"8b, ,aa 88 \n88 88 `\"8bbdP\"Y8 88 88 88 8Y\"Ybbd8\"' `\"YbbdP'Y8 88 `\"YbbdP\"Y8 `\"Ybbd8\"' 88 \n aa, ,88 \n \"Y8bbdP\" \n</code></pre>\n\n<h3 id=\"usaflag\">usaflag</h3>\n\n<pre class=\"-figlet\"><code> ::: === :::==== :::======= :::==== ::: === :::==== :::===== :::===== :::==== \n ::: === ::: === ::: === === ::: === ::: === ::: === ::: ::: ::: ===\n ======== ======== === === === ======= === === ======= === ===== ====== ======= \n === === === === === === === === === === === === === === === === === \n === === === === === === ======= ====== === === ======= ======== === ===\n</code></pre>\n\n<h3 id=\"weird\">weird</h3>\n\n<pre class=\"-figlet\"><code> / | / \n(___| ___ _ _ (___ ___ ___ ___ ___ \n| )| )| | )| )| )| )| )|___)| )\n| / |__/|| / |__/ |__/ | |__/ |__ | \n __/ \n</code></pre>\n\n<h3 id=\"whimsy\">whimsy</h3>\n\n<pre class=\"-figlet\"><code> d8b d8b \n ?88 ?88 \n 88b 88b \n 888888b d888b8b 88bd8b,d88b 888888b ?88 d8P 88bd88b d888b8b d8888b 88bd88b\n 88P `?8bd8P' ?88 88P'`?8P'?8b 88P `?8bd88 88 88P' `d8P' ?88 d8b_,dP 88P' `\n d88 88P88b ,88b d88 d88 88P d88, d88?8( d88 d88 88b ,88b 88b d88 \nd88' 88b`?88P'`88bd88' d88' 88bd88'`?88P'`?88P'?8bd88' `?88P'`88b`?888P'd88' \n )88 \n ,88P \n `?8888P \n</code></pre>\n\n<h2 id=\"toilet-fonts-1\">Toilet fonts</h2>\n\n<h3 id=\"ascii12\">ascii12</h3>\n\n<pre class=\"-figlet\"><code> mm mm mm \n ## ## ## \n ## ## m#####m ####m##m ##m###m ## ## ##m#### m###m## m####m ##m#### \n ######## \" mmm## ## ## ## ##\" \"## ## ## ##\" ##\" \"## ##mmmm## ##\" \n ## ## m##\"\"\"## ## ## ## ## ## ## ## ## ## ## ##\"\"\"\"\"\" ## \n ## ## ##mmm### ## ## ## ###mm##\" ##mmm### ## \"##mm### \"##mmmm# ## \n \"\" \"\" \"\"\"\" \"\" \"\" \"\" \"\" \"\" \"\"\" \"\"\"\" \"\" \"\" m\"\"\" ## \"\"\"\"\" \"\" \n \"####\"\" \n</code></pre>\n\n<h3 id=\"ascii9\">ascii9</h3>\n\n<pre class=\"-figlet\"><code> m m # \n # # mmm mmmmm #mmm m m m mm mmmm mmm m mm \n #mmmm# \" # # # # #\" \"# # # #\" \" #\" \"# #\" # #\" \"\n # # m\"\"\"# # # # # # # # # # # #\"\"\"\" # \n # # \"mm\"# # # # ##m#\" \"mm\"# # \"#m\"# \"#mm\" # \n m # \n \"\" \n</code></pre>\n\n<h3 id=\"bigascii12\">bigascii12</h3>\n\n<pre class=\"-figlet\"><code> ## ## ## \n ## ## ## \n ## ## ## \n ## ## :#### ## #:##: ##.###: ## ## ##.#### :###:## .####: ##.#### \n ## ## ###### ######## #######: ## ## ####### .####### .######: ####### \n ######## #: :## ##.##.## ### ### ## ## ###. ### ### ##: :## ###. \n ######## :##### ## ## ## ##. .## ## ## ## ##. .## ######## ## \n ## ## .####### ## ## ## ## ## ## ## ## ## ## ######## ## \n ## ## ## . ## ## ## ## ##. .## ## ## ## ##. .## ## ## \n ## ## ##: ### ## ## ## ### ### ##: ### ## ### ### ###. :# ## \n ## ## ######## ## ## ## #######: ####### ## .####### .####### ## \n ## ## ###.## ## ## ## ##.###: ###.## ## :###:## .#####: ## \n #. :## \n ###### \n :####: \n</code></pre>\n\n<h3 id=\"bigascii9\">bigascii9</h3>\n\n<pre class=\"-figlet\"><code> # \n # # # \n # # # \n # # .###. ## # # ## # # #:##: ## # ### #:##:\n # # #: :# #:#:# # # # # ## # # # :# ## #\n ###### # # # # # # # # # # # # # # \n # # :#### # # # # # # # # # # ##### # \n # # #: # # # # # # # # # # # # # \n # # #. # # # # # # #: # # # # # # \n # # :##:# # # # # ## :##:# # ##:# ###: # \n # \n :# \n :##. \n</code></pre>\n\n<h3 id=\"bigmono12\">bigmono12</h3>\n\n<pre class=\"-figlet\"><code> ██ ██ ██ \n ██ ██ ██ \n ██ ██ ██ \n ██ ██ ▒████▓ ██▓█▒██▒ ██░███▒ ██ ██ ██░████ ▒███▒██ ░████▒ ██░████ \n ██ ██ ██████▓ ████████ ███████▒ ██ ██ ███████ ░███████ ░██████▒ ███████ \n ████████ █▒ ▒██ ██░██░██ ███ ███ ██ ██ ███░ ███ ███ ██▒ ▒██ ███░ \n ████████ ▒█████ ██ ██ ██ ██░ ░██ ██ ██ ██ ██░ ░██ ████████ ██ \n ██ ██ ░███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ \n ██ ██ ██▓░ ██ ██ ██ ██ ██░ ░██ ██ ██ ██ ██░ ░██ ██ ██ \n ██ ██ ██▒ ███ ██ ██ ██ ███ ███ ██▒ ███ ██ ███ ███ ███░ ▒█ ██ \n ██ ██ ████████ ██ ██ ██ ███████▒ ▓███████ ██ ░███████ ░███████ ██ \n ██ ██ ▓███░██ ██ ██ ██ ██░███▒ ▓███░██ ██ ▒███▒██ ░█████▒ ██ \n █░ ▒██ \n ██████▓ \n ▒████▒ \n</code></pre>\n\n<h3 id=\"bigmono9\">bigmono9</h3>\n\n<pre class=\"-figlet\"><code> █ \n █ █ █ \n █ █ █ \n █ █ ░███░ ██▓█▓ █▓██ █ █ █▒██▒ ██▓█ ███ █▒██▒\n █ █ █▒ ▒█ █▒█▒█ █▓ ▓█ █ █ ██ █ █▓ ▓█ ▓▓ ▒█ ██ █\n ██████ █ █ █ █ █ █ █ █ █ █ █ █ █ █ \n █ █ ▒████ █ █ █ █ █ █ █ █ █ █ █████ █ \n █ █ █▒ █ █ █ █ █ █ █ █ █ █ █ █ █ \n █ █ █░ ▓█ █ █ █ █▓ ▓█ █▒ ▓█ █ █▓ ▓█ ▓▓ █ █ \n █ █ ▒██▒█ █ █ █ █▓██ ▒██▒█ █ ██▒█ ███▒ █ \n █ \n ▓ ▒█ \n ▒██░ \n</code></pre>\n\n<h3 id=\"circle\">circle</h3>\n\n<pre class=\"-figlet\"><code>Ⓗⓐⓜⓑⓤⓡⓖⓔⓡ\n</code></pre>\n\n<h3 id=\"emboss\">emboss</h3>\n\n<pre class=\"-figlet\"><code>┃ ┃┏━┃┏┏ ┏━ ┃ ┃┏━┃┏━┛┏━┛┏━┃\n┏━┃┏━┃┃┃┃┏━┃┃ ┃┏┏┛┃ ┃┏━┛┏┏┛\n┛ ┛┛ ┛┛┛┛━━ ━━┛┛ ┛━━┛━━┛┛ ┛\n</code></pre>\n\n<h3 id=\"emboss2\">emboss2</h3>\n\n<pre class=\"-figlet\"><code>║ ║╔═║╔╔ ╔═ ║ ║╔═║╔═╝╔═╝╔═║\n╔═║╔═║║║║╔═║║ ║╔╔╝║ ║╔═╝╔╔╝\n╝ ╝╝ ╝╝╝╝══ ══╝╝ ╝══╝══╝╝ ╝\n</code></pre>\n\n<h3 id=\"future\">future</h3>\n\n<pre class=\"-figlet\"><code>╻ ╻┏━┓┏┳┓┏┓ ╻ ╻┏━┓┏━╸┏━╸┏━┓\n┣━┫┣━┫┃┃┃┣┻┓┃ ┃┣┳┛┃╺┓┣╸ ┣┳┛\n╹ ╹╹ ╹╹ ╹┗━┛┗━┛╹┗╸┗━┛┗━╸╹┗╸\n</code></pre>\n\n<h3 id=\"letter\">letter</h3>\n\n<pre class=\"-figlet\"><code>H H A M M BBBB U U RRRR GGG EEEEE RRRR \nH H A A MM MM B B U U R R G E R R \nHHHHH AAAAA M M M BBBB U U RRRR G GG EEEE RRRR \nH H A A M M B B U U R R G G E R R \nH H A A M M BBBB UUU R R GGG EEEEE R R \n</code></pre>\n\n<h3 id=\"mono12\">mono12</h3>\n\n<pre class=\"-figlet\"><code> ▄▄ ▄▄ ▄▄ \n ██ ██ ██ \n ██ ██ ▄█████▄ ████▄██▄ ██▄███▄ ██ ██ ██▄████ ▄███▄██ ▄████▄ ██▄████ \n ████████ ▀ ▄▄▄██ ██ ██ ██ ██▀ ▀██ ██ ██ ██▀ ██▀ ▀██ ██▄▄▄▄██ ██▀ \n ██ ██ ▄██▀▀▀██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▀▀▀▀▀▀ ██ \n ██ ██ ██▄▄▄███ ██ ██ ██ ███▄▄██▀ ██▄▄▄███ ██ ▀██▄▄███ ▀██▄▄▄▄█ ██ \n ▀▀ ▀▀ ▀▀▀▀ ▀▀ ▀▀ ▀▀ ▀▀ ▀▀ ▀▀▀ ▀▀▀▀ ▀▀ ▀▀ ▄▀▀▀ ██ ▀▀▀▀▀ ▀▀ \n ▀████▀▀ \n</code></pre>\n\n<h3 id=\"mono9\">mono9</h3>\n\n<pre class=\"-figlet\"><code> ▄ ▄ █ \n █ █ ▄▄▄ ▄▄▄▄▄ █▄▄▄ ▄ ▄ ▄ ▄▄ ▄▄▄▄ ▄▄▄ ▄ ▄▄ \n █▄▄▄▄█ ▀ █ █ █ █ █▀ ▀█ █ █ █▀ ▀ █▀ ▀█ █▀ █ █▀ ▀\n █ █ ▄▀▀▀█ █ █ █ █ █ █ █ █ █ █ █▀▀▀▀ █ \n █ █ ▀▄▄▀█ █ █ █ ██▄█▀ ▀▄▄▀█ █ ▀█▄▀█ ▀█▄▄▀ █ \n ▄ █ \n ▀▀ \n</code></pre>\n\n<h3 id=\"pagga\">pagga</h3>\n\n<pre class=\"-figlet\"><code>░█░█░█▀█░█▄█░█▀▄░█░█░█▀▄░█▀▀░█▀▀░█▀▄\n░█▀█░█▀█░█░█░█▀▄░█░█░█▀▄░█░█░█▀▀░█▀▄\n░▀░▀░▀░▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀\n</code></pre>\n\n<h3 id=\"smascii12\">smascii12</h3>\n\n<pre class=\"-figlet\"><code>., ., ., \n][ ][ ][ \n][ ][ dWW,]WbW,]bWb ][ ][ WdW[ dWd[ dWb WdW[\n]WWW[ `md[][W][]P T[][ ][ W` ]P T[]bmd[ W` \n][ ][.W\"T[][W][][ ][][ ][ W ][ ][]P\"\"` W \n][ ][]bmW[][W][]WmW`]bmW[ W 'WmW['Wmm[ W \n'` '` \"\"'`'`\"'`'`\"` \"\"'` \" /\"][ '\"\" \" \n TWP` \n</code></pre>\n\n<h3 id=\"smascii9\">smascii9</h3>\n\n<pre class=\"-figlet\"><code>. , ] \n] [ m, .mm ]m, . . ,m mm m, ,m \n]mm[' ] ]]] ]`T ] ] P `]`T ]`] P `\n] [.\"T ]]] ] ] ] ] [ ] ] ]\"\" [ \n] ['mT ]]] ]bP 'mT [ 'bT 'b/ [ \n ,] \n '` \n</code></pre>\n\n<h3 id=\"smblock\">smblock</h3>\n\n<pre class=\"-figlet\"><code>▌ ▌ ▌ \n▙▄▌▝▀▖▛▚▀▖▛▀▖▌ ▌▙▀▖▞▀▌▞▀▖▙▀▖\n▌ ▌▞▀▌▌▐ ▌▌ ▌▌ ▌▌ ▚▄▌▛▀ ▌ \n▘ ▘▝▀▘▘▝ ▘▀▀ ▝▀▘▘ ▗▄▘▝▀▘▘ \n</code></pre>\n\n<h3 id=\"smbraille-1\">smbraille</h3>\n\n<pre class=\"-figlet\"><code> ⣇⣸ ⢀⣀ ⣀⣀ ⣇⡀ ⡀⢀ ⡀⣀ ⢀⡀ ⢀⡀ ⡀⣀\n ⠇⠸ ⠣⠼ ⠇⠇⠇ ⠧⠜ ⠣⠼ ⠏ ⣑⡺ ⠣⠭ ⠏ \n</code></pre>\n\n<h3 id=\"smmono12\">smmono12</h3>\n\n<pre class=\"-figlet\"><code>▗▖ ▗▖ ▗▖ \n▐▌ ▐▌ ▐▌ \n▐▌ ▐▌ ▟██▖▐█▙█▖▐▙█▙ ▐▌ ▐▌ █▟█▌ ▟█▟▌ ▟█▙ █▟█▌\n▐███▌ ▘▄▟▌▐▌█▐▌▐▛ ▜▌▐▌ ▐▌ █▘ ▐▛ ▜▌▐▙▄▟▌ █▘ \n▐▌ ▐▌▗█▀▜▌▐▌█▐▌▐▌ ▐▌▐▌ ▐▌ █ ▐▌ ▐▌▐▛▀▀▘ █ \n▐▌ ▐▌▐▙▄█▌▐▌█▐▌▐█▄█▘▐▙▄█▌ █ ▝█▄█▌▝█▄▄▌ █ \n▝▘ ▝▘ ▀▀▝▘▝▘▀▝▘▝▘▀▘ ▀▀▝▘ ▀ ▞▀▐▌ ▝▀▀ ▀ \n ▜█▛▘ \n</code></pre>\n\n<h3 id=\"smmono9\">smmono9</h3>\n\n<pre class=\"-figlet\"><code>▗ ▖ ▐ \n▐ ▌ ▄▖ ▗▄▄ ▐▄▖ ▗ ▗ ▖▄ ▄▄ ▄▖ ▖▄ \n▐▄▄▌▝ ▐ ▐▐▐ ▐▘▜ ▐ ▐ ▛ ▘▐▘▜ ▐▘▐ ▛ ▘\n▐ ▌▗▀▜ ▐▐▐ ▐ ▐ ▐ ▐ ▌ ▐ ▐ ▐▀▀ ▌ \n▐ ▌▝▄▜ ▐▐▐ ▐▙▛ ▝▄▜ ▌ ▝▙▜ ▝▙▞ ▌ \n ▖▐ \n ▝▘ \n</code></pre>\n\n<h3 id=\"wideterm-1\">wideterm</h3>\n\n<pre class=\"-figlet\"><code>Ｈａｍｂｕｒｇｅｒ\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-08"
},{
"id": "find",
"title": "Find",
"url": "/find",
"category": "CLI",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-bash\">find &lt;path&gt; &lt;conditions&gt; &lt;actions&gt;\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<pre><code class=\"language-bash\">-name \"*.c\"\n</code></pre>\n\n<pre><code class=\"language-bash\">-user jonathan\n-nouser\n</code></pre>\n\n<pre><code class=\"language-bash\">-type f # File\n-type d # Directory\n-type l # Symlink\n</code></pre>\n\n<pre><code class=\"language-bash\">-depth 2 # At least 3 levels deep\n-regex PATTERN\n</code></pre>\n\n<pre><code class=\"language-bash\">-size 8 # Exactly 8 512-bit blocks \n-size -128c # Smaller than 128 bytes\n-size 1440k # Exactly 1440KiB\n-size +10M # Larger than 10MiB\n-size +2G # Larger than 2GiB\n</code></pre>\n\n<pre><code class=\"language-bash\">-newer file.txt\n-newerm file.txt # modified newer than file.txt\n-newerX file.txt # [c]hange, [m]odified, [B]create\n-newerXt \"1 hour ago\" # [t]imestamp\n</code></pre>\n\n<h3 id=\"access-time-conditions\">Access time conditions</h3>\n\n<pre><code class=\"language-bash\">-atime 0 # Last accessed between now and 24 hours ago\n-atime +0 # Accessed more than 24 hours ago\n-atime 1 # Accessed between 24 and 48 hours ago\n-atime +1 # Accessed more than 48 hours ago\n-atime -1 # Accessed less than 24 hours ago (same a 0)\n-ctime -6h30m # File status changed within the last 6 hours and 30 minutes\n-mtime +1w # Last modified more than 1 week ago\n</code></pre>\n\n<p>These conditions only work in MacOS and BSD-like systems (no GNU/Linux support).</p>\n\n<h3 id=\"condition-flow\">Condition flow</h3>\n\n<pre><code class=\"language-bash\">\\! -name \"*.c\"\n\\( x -or y \\)\n</code></pre>\n\n<h3 id=\"actions\">Actions</h3>\n\n<pre><code class=\"language-bash\">-exec rm {} \\;\n-print\n-delete\n</code></pre>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-bash\">find . -name '*.jpg'\nfind . -name '*.jpg' -exec rm {} \\;\n</code></pre>\n\n<pre><code class=\"language-bash\">find . -newerBt \"24 hours ago\"\n</code></pre>\n\n<pre><code class=\"language-bash\">find . -type f -mtime +29 # find files modified more than 30 days ago\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2019-10-01"
},{
"id": "firebase",
"title": "Firebase",
"url": "/firebase",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"authenticating\">Authenticating</h3>\n\n<pre><code class=\"language-js\">FB = new Firebase('https://xxx.firebase.io')\nFB.auth(TOKEN, (err, result) =&gt; { ···})\n</code></pre>\n\n<pre><code class=\"language-js\">FB.authAnonymously(···)\nFB.authWithPassword(···)\nFB.authWithOAuthPopup(···)\nFB.authWithOAuthToken(···)\n</code></pre>\n\n<h3 id=\"using\">Using</h3>\n\n<pre><code class=\"language-js\">Users = FB.child('users')\n</code></pre>\n\n<pre><code class=\"language-js\">// Create\nuser = Users.push(first: \"Frank\", last: \"Sinatra\")\n</code></pre>\n\n<pre><code class=\"language-js\">// Retrieve\nuser = Users.child('alan') // gets `users/alan`\n</code></pre>\n\n<pre><code class=\"language-js\">// Update\nuser.set(first: \"Miles\", last: \"Davis\")\nuser.update(first: \"Miles\")\nuser.setWithPriority({ ··· }, priority)\n</code></pre>\n\n<pre><code class=\"language-js\">// Destroy\nuser.remove()\n</code></pre>\n\n<pre><code class=\"language-js\">// Getting\nuser.name() // primary id\n\nuser.once('value', (snap) =&gt; {\n snap.name() // primary id\n snap.val() // value\n}, (err) =&gt; {\n ···\n})\n</code></pre>\n\n<pre><code class=\"language-js\">// traversal\nuser.parent()\n</code></pre>\n\n<h3 id=\"querying\">Querying</h3>\n\n<pre><code class=\"language-coffeescript\">Users = FB.child('users')\nUsers\n .startAt(1000)\n .limit(50)\n .equalTo(priority, [name])\n .on 'child_added', (snap) -&gt; ···\n</code></pre>\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-coffeescript\">Posts = FB.child('posts')\npost = Posts.push({ title: \"How to do things\", author: \"alan\" })\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://www.firebase.com/docs/web/api/\">https://www.firebase.com/docs/web/api/</a></li>\n <li><a href=\"https://www.firebase.com/docs/web/recipes.html\">https://www.firebase.com/docs/web/recipes.html</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": null
},{
"id": "firefox",
"title": "Firefox",
"url": "/firefox",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"firefox-31-july-2014\"><a href=\"https://www.mozilla.org/en-US/firefox/31.0/releasenotes/\">Firefox 31</a> (July 2014)</h3>\n\n<ul>\n <li>CSS: variables</li>\n</ul>\n\n<h3 id=\"firefox-30-june-2014\"><a href=\"https://developer.mozilla.org/en-US/Firefox/Releases/30\">Firefox 30</a> (June 2014)</h3>\n\n<ul>\n <li>CSS: Allow <code>line-height</code> in <code>&lt;input type='button'&gt;</code></li>\n <li>JS: <code>Console.count()</code></li>\n <li>JS: ES6 array and generator comprehensions</li>\n</ul>\n\n<h3 id=\"firefox-29-april-2014\">Firefox 29 (April 2014)</h3>\n\n<ul>\n <li>New UI</li>\n <li>CSS: Unprefixed <code>box-shadow</code></li>\n</ul>\n\n<h3 id=\"firefox-18-jan-2013\">Firefox 18 (Jan 2013)</h3>\n\n<ul>\n <li>Faster JS compiler (IonMonkey)</li>\n <li>Mac retina support</li>\n <li>JS: <code>window.devicePixelRatio</code></li>\n <li>JS: unprefixed <code>ontouchstart</code></li>\n <li>HTML: <code>&lt;input type='number'&gt;</code></li>\n <li>HTML: <code>&lt;input type='color'&gt;</code></li>\n</ul>\n\n<h3 id=\"firefox-17-nov-2012\">Firefox 17 (Nov 2012)</h3>\n\n<ul>\n <li>No more support for Mac OSX 10.5 and below</li>\n <li>SVG <code>FillPaint</code> and <code>StrokePaint</code></li>\n <li>HTML <code>&lt;iframe sandbox=...&gt;</code> (<a href=\"https://developer.mozilla.org/en-US/docs/HTML/Element/iframe#attr-sandbox\">docs</a>)</li>\n <li>Official support for Windows 8 (<a href=\"http://www.mozilla.org/en-US/firefox/17.0/system-requirements/\">link</a>)</li>\n</ul>\n\n<h3 id=\"firefox-16-oct-2012\">Firefox 16 (Oct 2012)</h3>\n\n<ul>\n <li>Web app support (<a href=\"https://developer.mozilla.org/en-US/docs/Apps/Getting_Started\">docs</a>)</li>\n <li>Unprefixed CSS animations, transitions, transforms, gradients</li>\n</ul>\n\n<h3 id=\"firefox-15-aug-2012\">Firefox 15 (Aug 2012)</h3>\n\n<ul>\n <li>Background updates</li>\n <li>SPDY v3</li>\n <li>Opus audio codec</li>\n <li>HTML <code>&lt;audio played&gt;</code> (and <code>&lt;video&gt;</code>)</li>\n <li>HTML <code>&lt;source media=...&gt;</code></li>\n</ul>\n\n<h3 id=\"firefox-14-jul-2012\">Firefox 14 (Jul 2012)</h3>\n\n<ul>\n <li>Full screen support for OSX Lion</li>\n <li>JS pointer lock API (<a href=\"https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API\">docs</a>)</li>\n <li>JS display sleep API (<a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=697132\">docs</a>)</li>\n</ul>\n\n<h3 id=\"firefox-13-jun-2012\">Firefox 13 (Jun 2012)</h3>\n\n<ul>\n <li>Smooth scrolling by default</li>\n <li>SPDY on by default</li>\n <li>CSS <code>column-fill</code> (<a href=\"https://developer.mozilla.org/en/CSS/column-fill\">docs</a>)</li>\n <li>ECMA 6 <code>Map</code> and <code>Set</code></li>\n <li>CSS <code>background-position</code> extended syntax</li>\n <li>CSS <code>:invalid</code></li>\n <li>CSS turn unit (<code>rotate(0.5turn)</code>)</li>\n</ul>\n\n<h3 id=\"firefox-12-apr-2012\">Firefox 12 (Apr 2012)</h3>\n\n<ul>\n <li>CSS <code>text-align-last</code> (<a href=\"https://developer.mozilla.org/en/CSS/text-align-last\">docs</a>)</li>\n</ul>\n\n<h3 id=\"firefox-11-mar-2012\">Firefox 11 (Mar 2012)</h3>\n\n<ul>\n <li><code>element.outerHTML</code> (<a href=\"https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML\">docs</a>)</li>\n <li>Dev tools: Style editor, 3D page inspector (<a href=\"https://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/\">docs</a>)</li>\n <li>Unprefixed web sockets</li>\n <li>CSS <code>text-size-adjust</code> (<a href=\"https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust\">docs</a>)</li>\n</ul>\n\n<h3 id=\"firefox-10-jan-2012\">Firefox 10 (Jan 2012)</h3>\n\n<ul>\n <li>CSS 3D transforms</li>\n <li>HTML <code>&lt;bdi&gt;</code> element</li>\n <li>JS fullscreen API (<a href=\"https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs\">docs</a>)</li>\n <li>IndexedDB APIs</li>\n <li>Dev tools: CSS Style inspector</li>\n</ul>\n\n<h3 id=\"firefox-9-dec-2011\">Firefox 9 (Dec 2011)</h3>\n\n<ul>\n <li>Two-finger swipe in Mac OSX Lion</li>\n <li>CSS <code>font-stretch</code></li>\n <li>CSS improved <code>text-overflow</code></li>\n <li>JS <code>navigator.doNotTrack</code></li>\n</ul>\n\n<h3 id=\"firefox-8-nov-2011\">Firefox 8 (Nov 2011)</h3>\n\n<h3 id=\"firefox-7-sep-2011\">Firefox 7 (Sep 2011)</h3>\n\n<ul>\n <li>CSS <code>text-overflow: ellipsis</code></li>\n <li>Hidden <code>http://</code> prefix in address bar</li>\n</ul>\n\n<h3 id=\"firefox-6-aug-2011\">Firefox 6 (Aug 2011)</h3>\n\n<ul>\n <li>JS <code>window.matchMedia</code></li>\n <li>Websockets (!)</li>\n <li>JS EvetnSource / server-sent events</li>\n</ul>\n\n<h3 id=\"firefox-5-jun-2011\">Firefox 5 (Jun 2011)</h3>\n\n<ul>\n <li>CSS animations</li>\n <li>Background tab <code>setTimeout</code> and <code>setInterval</code> clamped to 1000ms</li>\n</ul>\n\n<h3 id=\"firefox-4-mar-2011\">Firefox 4 (Mar 2011)</h3>\n\n<ul>\n <li>Do Not Track (DNT) header</li>\n <li>New JS endinge (JagerMonkey)</li>\n <li>Hardware-accelerated rendering</li>\n <li>WebM video</li>\n <li>OpenType ligatures/kerning/font variants</li>\n <li>CSS transitions partial support</li>\n <li>JS audio data API</li>\n <li>JS <code>mozRequestAnimationFrame</code></li>\n <li>HTML5 forms API</li>\n <li><code>&lt;video buffered&gt;</code></li>\n <li>HTML5 history API</li>\n <li>New HTML5 parser</li>\n <li>…</li>\n</ul>\n\n<h3 id=\"firefox-36-jan-2010\">Firefox 3.6 (Jan 2010)</h3>\n\n<ul>\n <li>CSS gradients</li>\n <li>CSS pointer events</li>\n <li>HTML drag &amp; drop API</li>\n <li>HTML <code>&lt;script async&gt;</code></li>\n</ul>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li><a href=\"https://www.mozilla.org/en-US/firefox/releases/\">Firefox releases</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "fish-shell",
"title": "Fish shell",
"url": "/fish-shell",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"keys\">Keys</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>Alt ←</code> <em>/</em> <code>Alt →</code></td>\n <td>Move word</td>\n </tr>\n <tr>\n <td><code>^U</code></td>\n <td>Delete to beginning</td>\n </tr>\n <tr>\n <td><code>^W</code></td>\n <td>Delete to previous <code>/</code></td>\n </tr>\n <tr>\n <td><code>^D</code></td>\n <td>Delete next character</td>\n </tr>\n <tr>\n <td><code>Alt D</code></td>\n <td>Delete next word</td>\n </tr>\n <tr>\n <td><code>^C</code></td>\n <td>Cancel line</td>\n </tr>\n <tr>\n <td><code>Alt P</code></td>\n <td>Page output</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Alt ↑</code> <em>/</em> <code>Alt ↓</code></td>\n <td>Previous <em>/</em> next arguments</td>\n </tr>\n <tr>\n <td><code>Alt E</code> <em>/</em> <code>Alt V</code></td>\n <td>Open in external editor</td>\n </tr>\n <tr>\n <td><code>^L</code></td>\n <td>Repaint screen</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"help\">Help</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>Alt H</code></td>\n <td>Help on word (man)</td>\n </tr>\n <tr>\n <td><code>Alt W</code></td>\n <td>Help on word (short descriptions)</td>\n </tr>\n <tr>\n <td><code>Alt L</code></td>\n <td>List directory on cursor</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"function\">Function</h2>\n\n<h3 id=\"writing-functions\">Writing functions</h3>\n\n<pre><code class=\"language-fish\">function my_function --description \"My description\"\n ···\nend\n</code></pre>\n\n<h3 id=\"conditional\">Conditional</h3>\n\n<pre><code class=\"language-fish\">if test -f foo.txt\n ···\nelse if test -f bar.txt\n ···\nelse\n ···\nend\n</code></pre>\n\n<h3 id=\"combining-tests\">Combining tests</h3>\n\n<pre><code class=\"language-fish\">if test -f foo.txt &amp;&amp; test -f bar.txt\n</code></pre>\n\n<pre><code class=\"language-fish\">if test -f foo.txt -a -f bar.txt\n</code></pre>\n\n<pre><code class=\"language-fish\">if test \\( -f foo.txt \\) -a -f \\( bar.txt \\)\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<h4 id=\"emitting\">Emitting</h4>\n\n<pre><code class=\"language-fish\">emit my_event\n</code></pre>\n\n<h4 id=\"listening\">Listening</h4>\n\n<pre><code class=\"language-fish\">function myhook --on-event my_event\n ···\nend\n</code></pre>\n\n<p>This lets you hook onto events, such as <code>fish_prompt</code>.</p>\n\n<h2 id=\"completions\">Completions</h2>\n\n<h3 id=\"creating-completions\">Creating completions</h3>\n\n<h4 id=\"fishcompletionsmycommandfish\">~/.fish/completions/mycommand.fish</h4>\n\n<pre><code class=\"language-fish\">complete -c mycommand ...\ncomplete -c mycommand ...\ncomplete -c mycommand ...\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-fish\">complete \\\n -c # command\n -s # short option\n -l # long option\n -r, --require-parameter\n -f, --no-files\n -x # exclusive (-r -f)\n -n '__fish_use_subcommand' # condition\n --description \"..\"\n</code></pre>\n\n<h4 id=\"example\">Example</h4>\n\n<pre><code class=\"language-fish\"> complete -c $cmd \\\n-n '__fish_use_subcommand' \\\n-x -a hello \\\n--description 'lol'\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<table>\n <thead>\n <tr>\n <th>Condition</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-n __fish_complete_directories STRING DESCRIPTION</code></td>\n <td>performs path completion on STRING, allowing only directories, and giving them the description DESCRIPTION.</td>\n </tr>\n <tr>\n <td><code>-n __fish_complete_path STRING DESCRIPTION</code></td>\n <td>performs path completion on STRING, giving them the description DESCRIPTION.</td>\n </tr>\n <tr>\n <td><code>-n __fish_complete_groups</code></td>\n <td>prints a list of all user groups with the groups members as description.</td>\n </tr>\n <tr>\n <td><code>-n __fish_complete_pids</code></td>\n <td>prints a list of all processes IDs with the command name as description.</td>\n </tr>\n <tr>\n <td><code>-n __fish_complete_suffix SUFFIX</code></td>\n <td>performs file completion allowing only files ending in SUFFIX. The mimetype database is used to find a suitable description.</td>\n </tr>\n <tr>\n <td><code>-n __fish_complete_users</code></td>\n <td>prints a list of all users with their full name as description.</td>\n </tr>\n <tr>\n <td><code>-n __fish_print_filesystems</code></td>\n <td>prints a list of all known file systems. Currently, this is a static list, and not dependent on what file systems the host operating system actually understands.</td>\n </tr>\n <tr>\n <td><code>-n __fish_print_hostnames</code></td>\n <td>prints a list of all known hostnames. This functions searches the fstab for nfs servers, ssh for known hosts and checks the /etc/hosts file.</td>\n </tr>\n <tr>\n <td><code>-n __fish_print_interfaces</code></td>\n <td>prints a list of all known network interfaces.</td>\n </tr>\n <tr>\n <td><code>-n __fish_print_packages</code></td>\n <td>prints a list of all installed packages. This function currently handles Debian, rpm and Gentoo packages.</td>\n </tr>\n <tr>\n <td><code>-n __fish_use_subcommand</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-n __fish_seen_subcommand_from init</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"example-1\">Example</h4>\n\n<pre><code class=\"language-fish\">complete -c ruby -s X -x -a '(__fish_complete_directories (commandline -ct))' --description 'Directory'\n</code></pre>\n\n<h3 id=\"examples\">Examples</h3>\n\n<p>Start each example with <code>complete -c cmdname</code></p>\n\n<pre><code class=\"language-fish\">-x\n # no filename completion\n</code></pre>\n\n<pre><code class=\"language-fish\">-s d -x -a \"read skip\"\n # -d {read|skip}\n</code></pre>\n\n<pre><code class=\"language-fish\">-s d -x\n # -d &lt;something&gt;\n</code></pre>\n\n<pre><code class=\"language-fish\">-s f -r\n # -f FILE\n</code></pre>\n\n<pre><code class=\"language-fish\">-s f -l force\n # -f, --force\n</code></pre>\n\n<pre><code class=\"language-fish\">-a \"(cat /etc/passwd | cut -d : -f 1)\"\n # first argument as filename\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-16"
},{
"id": "flashlight",
"title": "Flashlight",
"url": "/flashlight",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"commands\">Commands</h2>\n\n<h3 id=\"events-and-reminders\">Events and reminders</h3>\n\n<ul>\n <li><code>add Dinner with Rico 5 pm tomorrow</code></li>\n <li><code>remind Go to school at 2:30pm</code></li>\n <li><code>remind Go to school in 15 mins</code></li>\n</ul>\n\n<h3 id=\"duckduckgo\">DuckDuckGo</h3>\n\n<ul>\n <li><code>!g foo</code></li>\n <li><code>!mdn settimeout</code></li>\n</ul>\n\n<h3 id=\"system\">System</h3>\n\n<ul>\n <li><code>shutdown</code></li>\n <li><code>restart</code></li>\n <li><code>logout</code></li>\n <li><code>sleep</code></li>\n <li><code>ejall</code></li>\n <li><code>screen saver</code></li>\n</ul>\n\n<h3 id=\"emoji\">Emoji</h3>\n\n<ul>\n <li><code>emoji grin</code></li>\n <li><code>:rocket:</code></li>\n</ul>\n\n<h3 id=\"web-search\">Web search</h3>\n\n<ul>\n <li><code>/react</code></li>\n</ul>\n\n<p>Prefix with <code>/</code> to do a web search.</p>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"http://flashlight.nateparrott.com/\">Flashlight</a></li>\n <li><a href=\"https://github.com/nate-parrott/Flashlight\">Flashlight on GitHub</a></li>\n <li><a href=\"https://github.com/nate-parrott/Flashlight/wiki/Creating-a-Plugin\">Creating a plugin</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "flow",
"title": "Flow",
"url": "/flow",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"simple-example\">Simple example</h3>\n\n<pre data-line=\"1,2\"><code class=\"language-js\">/* @flow */\nfunction square (n: number) {\n return n * n\n}\n\nconst four = square(2)\n</code></pre>\n\n<p>Most of what you need to do is to simply add annotations to function arguments!</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/\">flow.org docs</a></p>\n\n<h3 id=\"type-inference\">Type inference</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">function square (n: number) {\n const result = n * n\n}\n</code></pre>\n\n<p><code>result</code> is inferred to be a number because <code>number * number</code> will result in a number. There’s no need to give it annotations.</p>\n\n<h3 id=\"type-aliases\">Type aliases</h3>\n\n<pre data-line=\"1,2,3,4,5,6\"><code class=\"language-js\">type Person = {\n name: string,\n age: number,\n isAdmin: boolean,\n likes: Array&lt;string&gt;\n}\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-js\">function greet(user: Person) {\n console.log('hello', user.name)\n}\n</code></pre>\n\n<pre><code class=\"language-js\">greet({ name: 'Miles Davis', ··· })\n</code></pre>\n\n<p>This is the typical way to define the shape of complex objects.</p>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-js\">const count: number = 200\n</code></pre>\n\n<p>You typically don’t need to do this, function args are often enough.</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/variables/\">Variable types</a></p>\n\n<h3 id=\"importing-and-exporting\">Importing and exporting</h3>\n\n<pre><code class=\"language-js\">import type { Person } from './types'\n</code></pre>\n\n<pre><code class=\"language-js\">export type Person = {\n ···\n}\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/modules\">Module types</a></p>\n\n<h3 id=\"union-types\">Union types</h3>\n\n<pre><code class=\"language-js\">type Action = number | string\n</code></pre>\n\n<pre><code class=\"language-js\">type Direction = 'left' | 'right'\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/unions/\">Unions</a></p>\n\n<h2 id=\"optionals\">Optionals</h2>\n\n<h3 id=\"maybe-types\">Maybe types</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">type Album = {\n name: ?string\n}\n</code></pre>\n\n<pre><code class=\"language-js\">const a: Album = { } // ✗ Error\nconst a: Album = { name: 'Blue' } // ✓ OK\nconst a: Album = { name: null } // ✓ OK\nconst a: Album = { name: undefined } // ✓ OK\n</code></pre>\n\n<p>This makes <code>name</code> either a string or null.</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/primitives/#toc-maybe-types\">Maybe types</a></p>\n\n<h3 id=\"optional-properties\">Optional properties</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">type Album = {\n name?: string\n}\n</code></pre>\n\n<pre><code class=\"language-js\">const a: Album = { } // ✓ OK\na.name = 'Blue' // ✓ OK\na.name = null // ✗ Error\na.name = undefined // ✓ OK\n</code></pre>\n\n<p>This makes an <code>Album</code> valid even if <code>name</code> is not part of the keys. This is different from “maybe” types.</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/primitives/#toc-optional-object-properties\">Optional properties</a></p>\n\n<h2 class=\"-three-column\" id=\"objects\">Objects</h2>\n\n<h3 id=\"extra-object-fields\">Extra object fields</h3>\n\n<pre><code class=\"language-js\">type Artist = {\n name: string,\n label: string\n}\n</code></pre>\n\n<pre data-line=\"6\"><code class=\"language-js\">const a: Artist = {\n name: 'Miguel Migs',\n label: 'Naked Music'\n}\n\na.genre = 'House' // ✓ OK\n</code></pre>\n\n<p>You can add more fields to an object.</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/lang/width-subtyping/\">Width subtyping</a></p>\n\n<h3 id=\"exact-object-types\">Exact object types</h3>\n\n<pre data-line=\"1,4\"><code class=\"language-js\">type Artist = {|\n name: string,\n label: string\n|}\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-js\">const a: Artist = { ··· }\na.genre = 'House' // ✗ Error\n</code></pre>\n\n<p>Exact object types prevent extra properties from being added to an object.</p>\n\n<p>See: <a href=\"https://flow.org/en/docs/types/objects/#toc-exact-object-types\">Exact object types</a></p>\n\n<h3 id=\"dynamic-keys\">Dynamic keys</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">type Items = {\n [key: string]: Item\n}\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/objects.html#objects-as-maps\">Dynamic object keys</a></p>\n\n<h2 id=\"advanced-features\">Advanced features</h2>\n\n<h3 id=\"primitives\">Primitives</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>any</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>boolean</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>mixed</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>number</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>string</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>void</code></td>\n <td>undefined</td>\n </tr>\n <tr>\n <td><code>null</code></td>\n <td>null (but not undefined)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>{a: Number}</code></td>\n <td>Object with a shape</td>\n </tr>\n <tr>\n <td><code>[any, number]</code></td>\n <td>Tuples (fixed-length arrays)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Array&lt;T&gt;</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>Class&lt;T&gt;</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>Function</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>Object</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>?number</code></td>\n <td>Maybe (number, void, null)</td>\n </tr>\n <tr>\n <td><code>a | b</code></td>\n <td>Union types</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"enums\">Enums</h3>\n\n<pre><code class=\"language-js\">type Suit = \"Diamonds\" | \"Clubs\" | \"Hearts\" | \"Spades\"\n\nconst countries = {\n US: \"United States\",\n IT: \"Italy\",\n FR: \"France\"\n}\n\ntype Country = $Keys&lt;typeof countries&gt;\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/utility-types.html#keyst\">Enums</a></p>\n\n<h3 id=\"type-aliases-1\">Type aliases</h3>\n\n<pre><code class=\"language-js\">type Tree = {\n foo: string,\n bar: number,\n qux: (foo: string, bar: number) =&gt; boolean\n}\n\ntype Generic&lt;T&gt; = {\n foo: T\n}\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/quick-reference.html#type-aliases\">Type aliases</a></p>\n\n<h3 id=\"generic-classes\">Generic classes</h3>\n\n<pre><code class=\"language-js\">class GenericClass&lt;T&gt; {\n x: T\n constructor (x: T) { ... }\n}\n\nvar n: GenericClass&lt;number&gt; = new GenericClass(0)\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/quick-reference.html#generics\">Generic classes</a></p>\n\n<h3 id=\"interfaces\">Interfaces</h3>\n\n<pre><code class=\"language-js\">interface Jsonable {\n toJSON(): string\n}\n\nclass Foo {\n toJSON() { return '{}' }\n}\n\n(new Foo: Jsonable)\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/quick-reference.html#interfaces\">Interfaces</a></p>\n\n<h3 id=\"functions\">Functions</h3>\n\n<pre><code class=\"language-js\">const callback: () =&gt; void = function () {}\n</code></pre>\n\n<pre><code class=\"language-js\">function filter&lt;T&gt; (\n list: Array&lt;T&gt;,\n callback: (item: T) =&gt; boolean\n): Array&lt;T&gt; {\n ···\n}\n</code></pre>\n\n<p>See: <a href=\"https://flow.org/docs/functions.html\">Functions</a></p>\n\n<h3 id=\"imports\">Imports</h3>\n\n<pre><code class=\"language-js\">import type { Person } from '../person'\nimport typeof Config from '../config'\n</code></pre>\n\n<pre><code class=\"language-js\">export type Person = { id: string }\n</code></pre>\n\n<h3 id=\"comment-syntax\">Comment syntax</h3>\n\n<pre><code class=\"language-js\">/*::\n export type Foo = { ... }\n*/\n\nfunction add(n /*: number */) { ... }\n</code></pre>\n\n<h3 id=\"react\">React</h3>\n\n<pre><code class=\"language-js\">type Props = {\n bar: number,\n}\n\ntype State = {\n open: boolean,\n}\n\nclass Foo extends React.Component&lt;Props, State&gt; {\n // Component code\n}\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"examples-1\">Examples</h3>\n\n<pre><code class=\"language-js\">var myNumbers: Array&lt;number&gt; = [42]\nfunction foo(): any { return 42 }\nvar b: boolean = false\nvar b: ?boolean = false /* maybe */\nvar b: string | boolean = false\n\nvar a: Class&lt;MyClass&gt; = MyClass\nvar b: MyClass = new a()\n</code></pre>\n\n<h3 id=\"function-signature\">Function signature</h3>\n\n<pre><code class=\"language-js\">type Callback = (?Error, string) =&gt; any\n\nfunction fetch (callback: Callback) {\n ···\n}\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://www.saltycrane.com/flow-type-cheat-sheet/latest/\">Flow website</a> <em>(flow.org)</em></li>\n <li><a href=\"https://flow.org/en/docs/getting-started/\">Getting started with Flow</a> <em>(flow.org)</em></li>\n <li><a href=\"https://www.saltycrane.com/flow-type-cheat-sheet/latest/\">Flow type cheatsheet</a> <em>(saltycrane.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-20"
},{
"id": "flux",
"title": "Flux architecture",
"url": "/flux",
"category": "React",
"keywords": null,
"content_html": "<h2 id=\"architecture\">Architecture</h2>\n\n<ul>\n <li>\n <p><strong>Dispatchers</strong> receive <em>actions</em> that get dispatched to its listeners.</p>\n </li>\n <li>\n <p><strong>Stores</strong> are objects that store data, usually changed from a dispatcher listener.</p>\n </li>\n <li>\n <p><strong>Views</strong> are React components that listen to Store changes, or emit <em>actions</em> to the dispatcher.</p>\n </li>\n</ul>\n\n<hr />\n\n<h2 id=\"dispatcher\">Dispatcher</h2>\n\n<h3 id=\"pub-sub\">Pub-sub</h3>\n<p><a href=\"http://facebook.github.io/flux/docs/dispatcher.html\">A dispatcher</a> emits events (<code>.dispatch()</code>) to its listeners (<code>.register(fn)</code>).</p>\n\n<pre><code class=\"language-js\">var Dispatcher = require('flux').Dispatcher;\n\nd = new Dispatcher();\n\n// send\nd.dispatch({ action: 'edit', ... };\n\n// receive\ntoken = d.register(function (payload) {\n payload.action === 'edit'\n})\n</code></pre>\n\n<h3 id=\"ensuring-proper-order\">Ensuring proper order</h3>\n\n<p>With multiple listeners, you can ensure one is fired after another using <code>.waitFor()</code>.</p>\n\n<pre><code class=\"language-js\">token1 = d.register(...);\n\ntoken2 = d.register(function (payload) {\n\n // ensure receiver 1 is fired before this\n d.waitFor([ token1 ]);\n \n // process here\n})\n</code></pre>\n\n<h3 id=\"subclassing\">Subclassing</h3>\n\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\">Object.assign</a> is the preferred way to subclass Dispatcher (think <code>$.extend</code>).<br />\nYou can also make <em>action creators</em>, which are shortcuts for <code>dispatch()</code>.</p>\n\n<pre><code class=\"language-js\">var Dispatcher = require('flux').Dispatcher;\nvar assign = require('object-assign');\n\nvar AppDispatcher = assign({}, Dispatcher.prototype, {\n\n // action creator\n handleViewAction(action) {\n this.dispatch({\n source: 'VIEW_ACTION',\n action: action\n })\n } \n\n})\n</code></pre>\n\n<hr />\n\n<h2 id=\"stores\">Stores</h2>\n\n<h3 id=\"plain-objects\">Plain objects</h3>\n<p>Stores are just like objects.</p>\n\n<pre><code class=\"language-js\">var TodoStore = { list: [] };\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n<p>Sometimes they’re eventemitters, too. Usually it’s used to emit <code>change</code> events for views to pick up.</p>\n\n<pre><code class=\"language-js\">var TodoStore = assign({}, EventEmitter.prototype, {\n ...\n});\n\nTodoStore.emit('change');\nTodoStore.on('change', function () { ... });\n</code></pre>\n\n<h3 id=\"model-logic\">Model logic</h3>\n<p>Logic can sometimes belong in stores.</p>\n\n<pre><code class=\"language-js\">{\n isAllActive() {\n return this.list.every(item =&gt; item.active);\n }\n}\n</code></pre>\n\n<hr />\n\n<h2 id=\"stores-and-dispatchers\">Stores and dispatchers</h2>\n\n<h3 id=\"instantiate\">Instantiate</h3>\n<p>Make a Dispatcher and Stores.</p>\n\n<pre><code class=\"language-js\">d = new Dispatcher();\nTabStore = { tab: 'home' };\n</code></pre>\n\n<h3 id=\"updating-data\">Updating data</h3>\n<p>Dispatch events to alter the store.</p>\n\n<pre><code class=\"language-js\">d.dispatch({ action: 'tab.change', tab: 'timeline' });\n\nd.register(function (data) {\n if (data.action === 'tab.change') {\n TabStore.tab = data.tab;\n }\n});\n</code></pre>\n\n<hr />\n\n<h2 id=\"with-views\">With Views</h2>\n\n<h3 id=\"listen-to-dispatchers\">Listen to dispatchers</h3>\n<p>Views (React Components) can listen to Dispatchers.</p>\n\n<pre><code class=\"language-js\">var TodoApp = React.createClass({\n\n componentDidMount() {\n this.token = AppDispatcher.register((payload) =&gt; {\n switch (payload.action) {\n case 'tab.change':\n this.render();\n // ...\n }\n });\n },\n \n componentDidUnmount() {\n AppDispatcher.unregister(this.token);\n }\n \n});\n</code></pre>\n\n<h3 id=\"listen-to-stores\">Listen to Stores</h3>\n<p>Or to Stores’s <code>change</code> events.</p>\n\n<pre><code class=\"language-js\">{\n componentDidMount() {\n TodoStore.on('change', this.onChange);\n },\n \n componentDidUnmount() {\n TodoState.removeListener('change', this.onChange);\n },\n \n onChange(data) {\n // ...\n }\n}\n</code></pre>\n\n<hr />\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"http://facebook.github.io/flux/docs/dispatcher.html\">Dispatcher API</a></li>\n <li><a href=\"react.html\">React cheatsheet</a></li>\n <li><a href=\"https://github.com/facebook/flux/blob/master/src/Dispatcher.js\">Dispatcher.js source</a></li>\n <li><a href=\"https://github.com/facebook/flux/tree/master/examples/flux-todomvc\">Flux-todomvc explanation</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "flynn",
"title": "Flynn",
"url": "/flynn",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"general-workflow\">General workflow</h3>\n\n<ul>\n <li>Start a flynn cluster (on amazon or vagrant)</li>\n <li><code>flynn cluster add</code> to add that cluster</li>\n <li><code>flynn create NAME</code> in your app</li>\n <li><code>git push flynn master</code> to deploy</li>\n</ul>\n\n<h3 id=\"creating-a-cluster-aws\">Creating a cluster (AWS)</h3>\n\n<pre><code class=\"language-bash\">flynn install # (provisions AWS EC2 stuff)\nflynn key add # (adds your pubkey to AWS)\n</code></pre>\n\n<h4 id=\"what-it-does\">What it does</h4>\n\n<ul>\n <li>This creates <code>XXXX.flynnhub.com</code></li>\n <li>Dashboard in <code>dashboard.XXXX.flynnhub.com</code></li>\n <li>Use <code>flynn -a dashboard env get LOGIN_TOKEN</code> to get login token</li>\n <li>Apps live in <code>APP.XXXX.flynnhub.com</code></li>\n</ul>\n\n<h3 id=\"using-a-flynn-cluster\">Using a flynn cluster</h3>\n\n<p class=\"-setup\">Managed in <code>~/.flynnrc</code>:</p>\n\n<pre><code class=\"language-bash\">flynn cluster\nflynn cluster add [-g githost] [-p pin] NAME URL KEY\nflynn cluster remove NAME\nflynn cluster default NAME # use this current\n</code></pre>\n\n<h3 id=\"setting-up-a-new-app\">Setting up a new app</h3>\n\n<pre><code class=\"language-bash\">cd ~/project\nflynn create example # adds the `flynn` remote\nflynn route # prints http routes\ngit push flynn master\n</code></pre>\n\n<h2 id=\"commands\">Commands</h2>\n\n<h3 id=\"environment-vars\">Environment vars</h3>\n\n<pre><code class=\"language-bash\">flynn env\nflynn env set FOO=bar BAZ=foobar\nflynn env unset FOO\n</code></pre>\n\n<h3 id=\"scale\">Scale</h3>\n\n<pre><code class=\"language-bash\">flynn ps\nflynn scale web=3\n</code></pre>\n\n<h3 id=\"logs\">Logs</h3>\n\n<pre><code class=\"language-bash\">flynn log\nflynn log flynn-d55c7a...\n</code></pre>\n\n<h3 id=\"running-commands\">Running commands</h3>\n\n<pre><code class=\"language-bash\">flynn run rake db:migrate\n</code></pre>\n\n<h3 id=\"manage-routes\">Manage routes</h3>\n\n<pre><code class=\"language-bash\">flynn route\nflynn route add http example.com\n# then make a CNAME from example.com to myapp.xxxx.flynnhub.com\n</code></pre>\n\n<h3 id=\"more\">More</h3>\n\n<pre><code class=\"language-bash\">flynn ps\nflynn kill &lt;job&gt;\n\nflynn meta\nflynn meta set foo=baz\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://flynn.io/\">Flynn website</a> <em>(flynn.io)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "freenode",
"title": "Freenode",
"url": "/freenode",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"ircfreenodenet\">irc.freenode.net</h3>\n\n<pre><code>/msg nickserv identify [nick] &lt;password&gt;\n/msg nickserv info &lt;nick&gt;\n</code></pre>\n\n<h3 id=\"add-a-nick\">Add a nick</h3>\n\n<pre><code>/nick newnick\n/msg nickserv identify &lt;oldnick&gt; &lt;password&gt;\n/msg nickserv group\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "frequency-separation-retouching",
"title": "Frequency separation retouching",
"url": "/frequency-separation-retouching",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"frequency-separation-retouching-in-photoshop\">Frequency separation retouching in Photoshop</h3>\n\n<p class=\"-setup\">Duplicate the layer twice. Perform these in each layer:</p>\n\n<h4 id=\"lower-layer\">Lower layer</h4>\n\n<ul>\n <li>Apply <strong>Gaussian Blur</strong></li>\n</ul>\n\n<h4 id=\"upper-layer\">Upper layer</h4>\n\n<ul>\n <li>Set layer mask to <strong>Linear light</strong></li>\n <li>Image → <strong>Apply Image</strong>\n <ul>\n <li>Layer: <em>(select the lower layer)</em></li>\n <li>Blending mode: <code>Subtract</code></li>\n <li>Scale: <code>2</code></li>\n <li>Offset: <code>128</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul class=\"-also-see\">\n <li><a href=\"https://phlearn.com/amazing-power-frequency-separation-retouching-photoshop\">https://phlearn.com/amazing-power-frequency-separation-retouching-photoshop</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "fitness/general",
"title": "General fitness notes",
"url": "/fitness/general",
"category": "Fitness",
"keywords": null,
"content_html": "<h3 id=\"target-heart-rate\">Target heart rate</h3>\n\n<pre><code>max heart rate = (220 - age)\n</code></pre>\n\n<p>“The target heart rate method is a simple formula: take 220 and minus your age.\nThen take that number and multiply it by .75 - .85, which will give you your\npercentages of 75% – 85% of your Max. HR.”</p>\n\n<p>See: <a href=\"http://www.bodybuilding.com/fun/mike1.htm\">http://www.bodybuilding.com/fun/mike1.htm</a></p>\n\n<h3 id=\"warmup-sets\">Warmup sets</h3>\n\n<ul>\n <li>5 x Bar</li>\n <li>5 x 60%</li>\n <li>3 x 70%</li>\n <li>2 x 80%</li>\n <li>5 x 100% (work set)</li>\n</ul>\n\n<p>See: <a href=\"http://corw.in/warmup/\">http://corw.in/warmup/</a></p>\n\n<h3 id=\"bench\">Bench</h3>\n\n<p>Jennifer Thompson video: <a href=\"http://www.youtube.com/watch?v=34XRmd3a8_0\">http://www.youtube.com/watch?v=34XRmd3a8_0</a></p>\n\n<h3 id=\"metabolism\">Metabolism</h3>\n\n<ul>\n <li>\n <p>At rest, 33% of the body’s energy comes from carbohydrates, or glycogen, \nstored within the muscles and liver. 66% comes from fat.</p>\n </li>\n <li>\n <p>During aerobic work, 50-60% of the energy comes from fats</p>\n </li>\n <li>\n <p>Primarily carbohydrates are used during the first several minutes of exercise</p>\n </li>\n <li>\n <p>For an average fit person, it takes 20 to 30 minutes of continuous aerobic \nactivity to burn 50% fat and 50% carbohydrate</p>\n </li>\n <li>\n <p>There is approximately a 7 fold increase of fat mobilization after 1 hour of \nexercise</p>\n </li>\n <li>\n <p>Low intense exercise (less than 30% VO2 max) relies primarily on fat whereas \nhigh intense exercise (greater than 70% VO2 max) primarily utilized \ncarbohydrate.</p>\n </li>\n</ul>\n\n<p>See: <a href=\"http://www.exrx.net/Nutrition/Substrates.html\">Substrates</a> <em>(exrx.net)</em></p>\n\n<h3 id=\"deloads-on-a-cut\">Deloads on a cut</h3>\n\n<ul>\n <li>\n <p>“I would never recommend traditional style deloads on a cut, regardless of \n training regimen.”</p>\n </li>\n <li>\n <p>“increase the rest day interval between sessions”</p>\n </li>\n</ul>\n\n<p>See: <a href=\"https://www.facebook.com/permalink.php?story_fbid=273265046115238&amp;id=116211138487297&amp;comment_id=1262284&amp;offset=0&amp;total_comments=34\">Link</a> <em>(facebook.com)</em></p>\n\n<h3 id=\"conditioning-with-531\">Conditioning with 5/3/1</h3>\n\n<ul>\n <li>“For conditioning, I highly recommend 30-40 minutes of walking every day.<br />\n Yes, walking. If you’re asking why something so non-strenuous: if physique \n goals are your only concern, do not let the conditioning take away from your \n recovery.”</li>\n</ul>\n\n<p>See: <a href=\"http://www.jimwendler.com/2012/09/531-and-bodybuilding/\">531 and Bodybuilding</a> <em>(jimwendler.com)</em></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "gh-pages",
"title": "GitHub pages",
"url": "/gh-pages",
"category": "Jekyll",
"keywords": null,
"content_html": "<h2 id=\"custom-domains\">Custom domains</h2>\n\n<h3 id=\"custom-domains-1\">Custom domains</h3>\n\n<pre><code class=\"language-sh\">$ echo \"foobar.com\" &gt; CNAME\n$ git commit &amp;&amp; git push\n</code></pre>\n\n<p>Create a <code>CNAME</code> file with your domain on it.</p>\n\n<p>See: <a href=\"https://help.github.com/articles/quick-start-setting-up-a-custom-domain/\">Setting up a custom domain</a> <em>(github.com)</em></p>\n\n<h3 id=\"set-up-your-domain\">Set up your domain</h3>\n\n<p class=\"-setup\">Subdomain (like www):</p>\n\n<pre><code> CNAME =&gt; username.github.io\n</code></pre>\n\n<p class=\"-setup\">Apex domains:</p>\n\n<pre><code> ALIAS =&gt; username.github.io\n</code></pre>\n\n<p class=\"-setup\">Apex domains (alternative):</p>\n\n<pre><code>A =&gt; 192.30.252.153\nA =&gt; 192.30.252.154\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://pages.github.com\">https://pages.github.com</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "git-branch",
"title": "Git branches",
"url": "/git-branch",
"category": "Git",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"working-with-branches\">Working with branches</h2>\n\n<h3 id=\"creating\">Creating</h3>\n\n<pre><code class=\"language-bash\">git checkout -b $branchname\ngit push origin $branchname --set-upstream\n</code></pre>\n\n<p>Creates a new branch locally then pushes it.</p>\n\n<h3 id=\"getting-from-remote\">Getting from remote</h3>\n\n<pre><code class=\"language-bash\">git fetch origin\ngit checkout --track origin/$branchname\n</code></pre>\n\n<p>Gets a branch in a remote.</p>\n\n<h3 id=\"delete-local-remote-tracking-branches\">Delete local remote-tracking branches</h3>\n\n<pre><code class=\"language-bash\">git remote prune origin\n</code></pre>\n\n<p>Deletes <code>origin/*</code> branches in your local copy. Doesn’t affect the remote.</p>\n\n<h3 id=\"list-existing-branches\">List existing branches</h3>\n\n<pre><code class=\"language-bash\">git branch --list\n</code></pre>\n\n<p>Existing branches are listed. Current branch will be highlighted with an asterisk.</p>\n\n<h3 id=\"list-merged-branches\">List merged branches</h3>\n\n<pre><code class=\"language-bash\">git branch -a --merged\n</code></pre>\n\n<p>List outdated branches that have been merged into the current one.</p>\n\n<h3 id=\"delete-a-local-branch\">Delete a local branch</h3>\n\n<pre><code class=\"language-bash\">git branch -d $branchname\n</code></pre>\n\n<p>Deletes the branch only if the changes have been pushed and merged with remote.</p>\n\n<h3 id=\"delete-branch-forcefully\">Delete branch forcefully</h3>\n\n<pre><code class=\"language-bash\">git branch -D $branchname\n</code></pre>\n\n<pre><code class=\"language-bash\">git branch -d $branchname\n</code></pre>\n\n<blockquote>\n <p>Note: You can also use the -D flag which is synonymous with –delete –force instead of -d. This will delete the branch regardless of its merge status.\nDelete a branch irrespective of its merged status.</p>\n</blockquote>\n\n<h3 id=\"delete-remote-branch\">Delete remote branch</h3>\n\n<pre><code class=\"language-bash\">git push origin --delete :$branchname\n</code></pre>\n\n<p>Works for tags, too!</p>\n\n<h3 id=\"get-current-sha1\">Get current sha1</h3>\n\n<pre><code class=\"language-bash\">git show-ref HEAD -s\n</code></pre>\n<h3 id=\"reset-branch-and-remove-all-changes\">Reset branch and remove all changes</h3>\n\n<pre><code class=\"language-bash\">git reset --hard\n</code></pre>\n\n<h3 id=\"undo-commits-to-a-specific-commit\">Undo commits to a specific commit</h3>\n\n<pre><code class=\"language-bash\">git reset --hard $commit_id\n\n# Now push to your branch\ngit push --force\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "git-extras",
"title": "Git extras",
"url": "/git-extras",
"category": "Git",
"keywords": null,
"content_html": "<h3 id=\"git-flow\">Git-flow</h3>\n\n<pre><code>$ git feature myfeature\n switched to branch 'feature/rofl'\n\n$ ...\n$ git checkout develop\n$ git feature finish myfeature\n merging 'feature/rofl' into develop\n deleted branch 'feature/rofl'\n</code></pre>\n\n<p>Also <code>git-bug</code> and <code>git-refactor</code>.</p>\n\n<h3 id=\"branches\">Branches</h3>\n\n<pre><code>$ git delete-merged-branches\n # hint: do `git remote prune origin` after\n\n$ git create-branch development\n$ git delete-branch development\n\n$ git fresh-branch gh-pages\n</code></pre>\n\n<h3 id=\"inspecting\">Inspecting</h3>\n\n<pre><code>$ git summary # repo age, commits, active days, etc\n$ git impact # impact graph\n$ git effort # commits per file\n</code></pre>\n\n<h3 id=\"github\">Github</h3>\n\n<pre><code>$ git fork strongloop/express\n# sync your fork with the original repository:\n$ git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git\n$ git fetch upstream; git merge upstream/master\n</code></pre>\n\n<h3 id=\"tags\">Tags</h3>\n\n<pre><code>$ git release v1.0.0 # commit, tag, push-tags\n$ git delete-tag v1.0.0\n</code></pre>\n\n<h3 id=\"conveniences\">Conveniences</h3>\n\n<pre><code>$ git ignore \"*.log\"\n</code></pre>\n\n<h3 id=\"locking\">Locking</h3>\n\n<p>Assumes that changes will not be committed.</p>\n\n<pre><code>$ git lock config/database.yml\n$ git unlock config/database.yml\n</code></pre>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code>$ git obliterate secret.yml # remove all references to it\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>https://github.com/visionmedia/git-extras</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "git-log-format",
"title": "Git log format string",
"url": "/git-log-format",
"category": "Git",
"keywords": ["git log --pretty=format:%H","%H - Commit hash","%an - Author","%aD - Author date"],
"content_html": "<h2 class=\"-three-column\" id=\"log-format\">Log format</h2>\n\n<h3 class=\"-prime\" id=\"pretty-format\">Pretty format</h3>\n\n<pre><code class=\"language-bash\">git log --pretty=\"format:%H\"\n</code></pre>\n\n<p>See the next tables on format variables.</p>\n\n<h3 id=\"hash\">Hash</h3>\n\n<h4 id=\"commit\">Commit</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%H</code></td>\n <td>commit hash</td>\n </tr>\n <tr>\n <td><code>%h</code></td>\n <td>(abbrev) commit hash</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"tree\">Tree</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%T</code></td>\n <td>tree hash</td>\n </tr>\n <tr>\n <td><code>%t</code></td>\n <td>(abbrev) tree hash</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"parent\">Parent</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%P</code></td>\n <td>parent hash</td>\n </tr>\n <tr>\n <td><code>%p</code></td>\n <td>(abbrev) parent hash</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"commit-1\">Commit</h3>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%s</code></td>\n <td>commit subject</td>\n </tr>\n <tr>\n <td><code>%f</code></td>\n <td>commit subject, filename style</td>\n </tr>\n <tr>\n <td><code>%b</code></td>\n <td>commit body</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%d</code></td>\n <td>ref names</td>\n </tr>\n <tr>\n <td><code>%e</code></td>\n <td>encoding</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"author-and-committer\">Author and committer</h2>\n\n<h3 id=\"author\">Author</h3>\n\n<h4 id=\"name\">Name</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%an</code></td>\n <td>author</td>\n </tr>\n <tr>\n <td><code>%aN</code></td>\n <td>author, respecting mailmap</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"email\">Email</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%ae</code></td>\n <td>author email</td>\n </tr>\n <tr>\n <td><code>%aE</code></td>\n <td>author email, respecting mailmap</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"date\">Date</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%aD</code></td>\n <td>author date (rfc2882)</td>\n </tr>\n <tr>\n <td><code>%ar</code></td>\n <td>author date (relative)</td>\n </tr>\n <tr>\n <td><code>%at</code></td>\n <td>author date (unix timestamp)</td>\n </tr>\n <tr>\n <td><code>%ai</code></td>\n <td>author date (iso8601)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"committer\">Committer</h3>\n\n<h4 id=\"name-1\">Name</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%cn</code></td>\n <td>committer name</td>\n </tr>\n <tr>\n <td><code>%cN</code></td>\n <td>committer name, respecting mailmap</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"email-1\">Email</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%ce</code></td>\n <td>committer email</td>\n </tr>\n <tr>\n <td><code>%cE</code></td>\n <td>committer email, respecting mailmap</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"date-1\">Date</h4>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>%cD</code></td>\n <td>committer date (rfc2882)</td>\n </tr>\n <tr>\n <td><code>%cr</code></td>\n <td>committer date (relative)</td>\n </tr>\n <tr>\n <td><code>%ct</code></td>\n <td>committer date (unix timestamp)</td>\n </tr>\n <tr>\n <td><code>%ci</code></td>\n <td>committer date (iso8601)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"./git-log\">Git log cheatsheet</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-18"
},{
"id": "git-log",
"title": "git log",
"url": "/git-log",
"category": "Git",
"keywords": null,
"content_html": "<h3 id=\"revision-ranges\">Revision ranges</h3>\n\n<pre><code class=\"language-bash\">git log master # branch\ngit log origin/master # branch, remote\ngit log v1.0.0 # tag\n\ngit log master develop\n\ngit log v2.0..master # reachable from *master* but not *v2.0*\ngit log v2.0...master # reachable from *master* and *v2.0*, but not both\n</code></pre>\n\n<p>See <a href=\"./git-revisions\">gitrevisions</a>.</p>\n\n<h3 id=\"basic-filters\">Basic filters</h3>\n\n<pre><code class=\"language-bash\">-n, --max-count=2\n --skip=2\n</code></pre>\n\n<pre><code class=\"language-bash\"> --since=\"1 week ago\"\n --until=\"yesterday\"\n</code></pre>\n\n<pre><code class=\"language-bash\"> --author=\"Rico\"\n --committer=\"Rico\"\n</code></pre>\n\n<h3 id=\"search\">Search</h3>\n\n<pre><code class=\"language-bash\"> --grep=\"Merge pull request\" # in commit messages\n -S\"console.log\" # in code\n -G\"foo.*\" # in code (regex)\n</code></pre>\n\n<pre><code class=\"language-bash\"> --invert-grep\n --all-match # AND in multi --grep\n</code></pre>\n\n<h3 id=\"limiting\">Limiting</h3>\n\n<pre><code class=\"language-bash\"> --merges\n --no-merges\n</code></pre>\n\n<pre><code class=\"language-bash\"> --first-parent # no stuff from merged branches\n</code></pre>\n\n<pre><code class=\"language-bash\"> --branches=\"feature/*\"\n --tags=\"v*\"\n --remotes=\"origin\"\n</code></pre>\n\n<h3 id=\"simplification\">Simplification</h3>\n\n<pre><code class=\"language-bash\">git log -- app/file.rb # only file\n --simplify-by-decoration # tags and branches\n</code></pre>\n\n<h3 id=\"ordering\">Ordering</h3>\n\n<pre><code class=\"language-bash\"> --date-order\n --author-date-order\n --topo-order # \"smart\" ordering\n --reverse\n</code></pre>\n\n<h3 id=\"formatting\">Formatting</h3>\n\n<pre><code class=\"language-bash\"> --abbrev-commit\n --oneline\n --graph\n</code></pre>\n\n<h3 id=\"custom-formats\">Custom formats</h3>\n\n<pre><code class=\"language-bash\"> --pretty=\"format:%H\"\n</code></pre>\n\n<p>See: <a href=\"./git-log-format\">Git log format cheatsheet</a></p>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"./git-log-format\">Git log format cheatsheet</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "git-revisions",
"title": "Git revisions",
"url": "/git-revisions",
"category": "Git",
"keywords": null,
"content_html": "<h3 id=\"example-usages\">Example usages</h3>\n\n<table class=\"-mute-em\">\n <tbody>\n <tr>\n <td><em><code>git log</code></em> <code>master...develop</code></td>\n <td>inspect differences in branches</td>\n </tr>\n <tr>\n <td><em><code>git rebase -i</code></em> <code>HEAD~3</code></td>\n <td>rebase last 3 commits</td>\n </tr>\n <tr>\n <td><em><code>git reset --hard</code></em> <code>HEAD@{2}</code></td>\n <td>undo last operation that changed HEAD</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>v2^{}</code></td>\n <td>checkout the <code>v2</code> tag (not <code>v2</code> branch)</td>\n </tr>\n </tbody>\n</table>\n\n<p>The 3rd argument in each of these commands is a <code>gitrevision</code>. These gitrevisions can be passed to many Git commands.</p>\n\n<h3 id=\"common-git-revisions\">Common git revisions</h3>\n\n<table class=\"-mute-em\">\n <thead>\n <tr>\n <th>Reference</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><em><code>git show</code></em> <code>dae68e1</code></td>\n <td>sha1</td>\n </tr>\n <tr>\n <td><em><code>git show</code></em> <code>HEAD</code></td>\n <td>reference</td>\n </tr>\n <tr>\n <td><em><code>git show</code></em> <code>v1.0.0</code></td>\n <td>tag</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git show</code></em> <code>master</code></td>\n <td>local branch</td>\n </tr>\n <tr>\n <td><em><code>git show</code></em> <code>origin/master</code></td>\n <td>remote branch</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git show</code></em> <code>master~2</code></td>\n <td>2 commits back from master</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git show</code></em> <code>master..fix</code></td>\n <td>reachable from <em>fix</em> but not <em>master</em></td>\n </tr>\n <tr>\n <td><em><code>git show</code></em> <code>master...fix</code></td>\n <td>reachable from <em>fix</em> and <em>master</em>, but not both</td>\n </tr>\n </tbody>\n</table>\n\n<p>These are just the common ones, there’s a lot more below! (These work in many other commands, not just <code>git show</code>.)</p>\n\n<h2 id=\"reference\">Reference</h2>\n\n<h3 id=\"commits\">Commits</h3>\n\n<table class=\"-mute-em\">\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>dae68e1</code></td>\n <td>sha1</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"references\">References</h3>\n\n<table class=\"-mute-em\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>HEAD</code></td>\n <td>reference</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master</code></td>\n <td>branch</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>v1.0.0</code></td>\n <td>tag</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>origin/master</code></td>\n <td>aka, <em>refs/remotes/origin/master</em></td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>heads/master</code></td>\n <td>aka, <em>refs/heads/master</em></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"searching-back\">Searching back</h3>\n\n<table class=\"-mute-em\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>master@{yesterday}</code></td>\n <td>also <em>1 day ago</em>, etc</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master@{2}</code></td>\n <td>2nd prior value</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master@{push}</code></td>\n <td>where <em>master</em> would push to</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>master^</code></td>\n <td>parent commit</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master^2</code></td>\n <td>2nd parent, eg, what it merged</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master~5</code></td>\n <td>5 parents back</td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>master^0</code></td>\n <td>this commit; disambiguates from tags</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>v0.99.8^{tag}</code></td>\n <td>can be <em>commit</em>, <em>tag</em>, <em>tree</em>, <em>object</em></td>\n </tr>\n <tr>\n <td><em><code>git checkout</code></em> <code>v0.99.8^{}</code></td>\n <td>defaults to <em>{tag}</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em><code>git checkout</code></em> <code>\":/fix bug\"</code></td>\n <td>searches commit messages</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"other\">Other</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>HEAD:README</code></td>\n <td>…</td>\n </tr>\n <tr>\n <td><code>0:README</code></td>\n <td>(0 to 3) …</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"ranges\">Ranges</h2>\n\n<h3 id=\"ranges-1\">Ranges</h3>\n\n<table class=\"-mute-em\">\n <tbody>\n <tr>\n <td><em><code>git log</code></em> <code>master</code></td>\n <td>reachable parents from master</td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>^master</code></td>\n <td>exclude reachable parents from master</td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>master..fix</code></td>\n <td>reachable from <em>fix</em> but not <em>master</em></td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>master...fix</code></td>\n <td>reachable from <em>fix</em> and <em>master</em>, but not both</td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>HEAD^@</code></td>\n <td>parents of <em>HEAD</em></td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>HEAD^!</code></td>\n <td><em>HEAD</em>, then excluding parents’s ancestors</td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>HEAD^{:/fix}</code></td>\n <td>search previous <em>HEAD</em>s matching criteria</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"ranges-illustration\">Ranges illustration</h3>\n\n<pre class=\"-box-chars -setup\"><code class=\"language-nohighlight\">A ─┬─ E ── F ── G master\n │\n └─ B ── C ── D fix\n</code></pre>\n\n<table class=\"-mute-em\">\n <tbody>\n <tr>\n <td><em><code>git log</code></em> <code>master..fix</code></td>\n <td>BCD</td>\n </tr>\n <tr>\n <td><em><code>git log</code></em> <code>master...fix</code></td>\n <td>BCD and EFG</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"references-1\">References</h2>\n\n<ul>\n <li><a href=\"https://www.kernel.org/pub/software/scm/git/docs/gitrevisions.html\">Git Tools - Revision Selection</a> <em>(git-scm.com)</em></li>\n <li><a href=\"https://www.kernel.org/pub/software/scm/git/docs/gitrevisions.html\">gitrevisions(7)</a> <em>(kernel.org)</em></li>\n</ul>",
"intro_html": "<p>A list of revision specifications you can use with <code>git log</code> and many other Git commands. Summarized from <code>gitrevisions(7)</code> man page.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-11"
},{
"id": "git-tricks",
"title": "Git tricks",
"url": "/git-tricks",
"category": "Git",
"keywords": null,
"content_html": "<h2 id=\"refs\">Refs</h2>\n\n<pre><code>HEAD^ # 1 commit before head\nHEAD^^ # 2 commits before head\nHEAD~5 # 5 commits before head\n</code></pre>\n\n<h2 id=\"branches\">Branches</h2>\n\n<pre><code># create a new branch\n git checkout -b $branchname\n git push origin $branchname --set-upstream\n\n# get a remote branch\n git fetch origin\n git checkout --track origin/$branchname\n\n# delete local remote-tracking branches (lol)\n git remote prune origin\n\n# list merged branches\n git branch -a --merged\n\n# delete remote branch\n git push origin :$branchname\n \n# go back to previous branch\n git checkout -\n</code></pre>\n\n<h2 id=\"collaboration\">Collaboration</h2>\n\n<pre><code># Rebase your changes on top of the remote master\n git pull --rebase upstream master\n \n# Squash multiple commits into one for a cleaner git log\n# (on the following screen change the word pick to either 'f' or 's')\n git rebase -i $commit_ref\n</code></pre>\n\n<h2 id=\"submodules\">Submodules</h2>\n\n<pre><code># Import .gitmodules\n git submodule init\n\n# Clone missing submodules, and checkout commits\n git submodule update --init --recursive\n\n# Update remote URLs in .gitmodules\n# (Use when you changed remotes in submodules)\n git submodule sync\n</code></pre>\n\n<h2 id=\"diff\">Diff</h2>\n\n<h3 id=\"diff-with-stats\">Diff with stats</h3>\n\n<pre><code>git diff --stat\napp/a.txt | 2 +-\napp/b.txt | 8 ++----\n2 files changed, 10 insertions(+), 84 deletions(-)\n</code></pre>\n\n<h3 id=\"just-filenames\">Just filenames</h3>\n\n<pre><code>git diff --summary\n</code></pre>\n\n<h2 id=\"log-options\">Log options</h2>\n\n<pre><code>--oneline\n e11e9f9 Commit message here\n\n--decorate\n shows \"(origin/master)\"\n\n--graph\n shows graph lines\n\n--date=relative\n \"2 hours ago\"\n</code></pre>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"cherry-pick\">Cherry pick</h3>\n\n<pre><code>git rebase 76acada^\n</code></pre>\n\n<h3 id=\"misc-1\">Misc</h3>\n\n<pre><code># get current sha1 (?)\n git show-ref HEAD -s\n\n# show single commit info\n git log -1 f5a960b5\n\n# Go back up to root directory\n cd \"$(git rev-parse --show-top-level)\"\n</code></pre>\n\n<h2 id=\"short-log\">Short log</h2>\n\n<pre><code> $ git shortlog\n $ git shortlog HEAD~20.. # last 20 commits\n\n James Dean (1):\n Commit here\n Commit there\n\n Frank Sinatra (5):\n Another commit\n This other commit\n</code></pre>\n\n<h2 id=\"bisect\">Bisect</h2>\n\n<pre><code>git bisect start HEAD HEAD~6\ngit bisect run npm test\ngit checkout refs/bisect/bad # this is where it screwed up\ngit bisect reset\n</code></pre>\n\n<h3 id=\"manual-bisection\">Manual bisection</h3>\n\n<pre><code>git bisect start\ngit bisect good # current version is good\n\ngit checkout HEAD~8\nnpm test # see if it's good\ngit bisect bad # current version is bad\n\ngit bisect reset # abort\n</code></pre>\n\n<h2 id=\"searching\">Searching</h2>\n\n<pre><code>git log --grep=\"fixes things\" # search in commit messages\ngit log -S\"window.alert\" # search in code\ngit log -G\"foo.*\" # search in code (regex)\n</code></pre>\n\n<h2 id=\"gpg-signing\">GPG Signing</h2>\n\n<pre><code>git config set user.signingkey &lt;GPG KEY ID&gt; # Sets GPG key to use for signing\n\ngit commit -m \"Implement feature Y\" --gpg-sign # Or -S, GPG signs commit\n\ngit config set commit.gpgsign true # Sign commits by default\ngit commit -m \"Implement feature Y\" --no-gpg-sign # Do not sign\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "gmail",
"title": "Gmail",
"url": "/gmail",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"imap\">IMAP</h3>\n\n<ul>\n <li><code>imap.gmail.com:993</code></li>\n <li>SSL: yes</li>\n <li>Username: full <code>username@gmail.com</code></li>\n</ul>\n\n<h3 id=\"smtp\">SMTP</h3>\n\n<ul>\n <li><code>smtp.gmail.com</code></li>\n <li>SSL port: 465</li>\n <li>TLS/STARTTLS port: 587</li>\n <li>Use authentication: yes</li>\n</ul>\n\n<h3 id=\"pop3\">POP3</h3>\n\n<ul>\n <li><code>pop.gmail.com:995</code></li>\n <li>SSL: yes</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "gnupg",
"title": "GnuPG",
"url": "/gnupg",
"category": "CLI",
"keywords": null,
"content_html": "<h2 id=\"basics\">Basics</h2>\n\n<h3 id=\"exporting-keys\">Exporting keys</h3>\n\n<pre><code class=\"language-bash\">gpg -o key.gpg --export &lt;KEY ID&gt;\n</code></pre>\n\n<p><strong>Export key in ASCII:</strong></p>\n\n<pre><code class=\"language-bash\">gpg -o key.asc --armor --export &lt;KEY ID&gt;\n</code></pre>\n\n<p><strong>Note:</strong> Omitting the <code>-o|--output</code> option will print the key to <code>stdout</code>.</p>\n\n<h3 id=\"importing-keys\">Importing keys</h3>\n\n<pre><code class=\"language-bash\">gpg --import key.gpg\ngpg --import key.asc\n</code></pre>\n\n<p>Only merge updates for keys already in key-ring:</p>\n\n<pre><code class=\"language-bash\">gpg --import key.asc --merge-options merge-only\n</code></pre>\n\n<h3 id=\"managing-your-keyring\">Managing your keyring</h3>\n\n<p class=\"-setup\">Generate a new key:</p>\n\n<pre><code class=\"language-bash\">gpg --gen-key\n# or, generate a new key with dialogs for all options\ngpg --full-gen-key\n</code></pre>\n\n<p>List public keys:</p>\n\n<pre><code class=\"language-bash\">gpg -k\ngpg --list-keys\n</code></pre>\n\n<p>List secret keys:</p>\n\n<pre><code class=\"language-bash\">gpg -K\ngpg --list-secret-keys\n</code></pre>\n\n<h3 id=\"using-a-keyserver\">Using a keyserver</h3>\n\n<p class=\"-setup\">Import keys from keyserver:</p>\n\n<pre><code class=\"language-bash\">gpg --receive-keys &lt;KEY IDS&gt;\n</code></pre>\n\n<p>Upload keys to keyserver:</p>\n\n<pre><code class=\"language-bash\">gpg --send-keys &lt;KEY IDS&gt;\n</code></pre>\n\n<p>Request updates from keyserver for keys already in your keyring:</p>\n\n<pre><code class=\"language-bash\">gpg --refresh-keys\n</code></pre>\n\n<p>Search keys from keyserver:</p>\n\n<pre><code class=\"language-bash\">gpg --search-keys \"&lt;SEARCH STRING&gt;\"\n</code></pre>\n\n<p>Override keyserver from <code>~/.gnupg/gpg.conf</code></p>\n\n<pre><code class=\"language-bash\">gpg --keyserver &lt;URL&gt; ...\n</code></pre>\n\n<h3 id=\"trusting-a-key\">Trusting a key</h3>\n\n<pre><code class=\"language-bash\">gpg --edit-key &lt;KEY ID&gt;\n# In the interactive prompt:\ngpg&gt; sign\ngpg&gt; save\n</code></pre>\n\n<p><strong>NOTE:</strong> You can use the owner’s email or name (or part thereof) instead of the key ID for <code>--edit-key</code></p>\n\n<h2 class=\"-two-column\" id=\"encrypting\">Encrypting</h2>\n\n<h3 id=\"public-key-encryption\">Public key encryption</h3>\n<p>This will produce an encrypted file, <code>secret.txt.gpg</code>, that can only be decrypted by the recipient:</p>\n\n<pre><code class=\"language-bash\">gpg -e -o secret.txt.gpg -r &lt;RECIPIENT&gt; secret.txt\n</code></pre>\n\n<p>For <code>&lt;RECIPIENT&gt;</code> you can use their key ID, their email, or their name (or part thereof).</p>\n\n<pre><code class=\"language-bash\">gpg -e -r &lt;KEY ID&gt; ...\ngpg -e -r \"Bez\" ...\ngpg -e -r \"bezalelhermoso@gmail.com\" ...\n</code></pre>\n\n<p>Specifying multiple recipients</p>\n\n<pre><code class=\"language-bash\">gpg -e -r &lt;RECIPIENT&gt; -r &lt;ANOTHER RECIPIENT&gt; ... secret.txt\n</code></pre>\n\n<p><strong>NOTE</strong>: Omitting <code>-o|--output</code> will produce an encrypted file named <code>&lt;ORIGINAL FILENAME&gt;.gpg</code> by default.</p>\n\n<h3 id=\"symmetric-encryption\">Symmetric encryption</h3>\n\n<p>Encrypt file using a shared key. You will be prompted for a passphrase.</p>\n\n<pre><code class=\"language-bash\">gpg --symmetric secret.txt\n# or\ngpg -c secret.txt\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"decrypting\">Decrypting</h2>\n\n<h3 id=\"decrypting-a-file\">Decrypting a file</h3>\n\n<pre><code class=\"language-bash\">gpg -d -o secret.txt secret.txt.gpg\n</code></pre>\n\n<p>If the file is encrypted via symmetric encryption, you will be prompted for the passphrase.</p>\n\n<p><strong>NOTE</strong>: Omitting <code>-o|--output</code> will print the unencrypted contents to <code>stdout</code></p>\n\n<h2 class=\"-two-column\" id=\"signing--verifying\">Signing &amp; Verifying</h2>\n\n<h3 id=\"signing\">Signing</h3>\n\n<pre><code class=\"language-bash\">gpg -o signed-file.txt.gpg -s file.txt\n</code></pre>\n\n<p>This can be used during encryption to also sign encrypted files:</p>\n\n<pre><code class=\"language-bash\">gpg -s -o secret.txt.gpg \\\n -r &lt;RECIPIENT&gt; secret.txt\n</code></pre>\n\n<h3 id=\"verifying-a-signature\">Verifying a signature</h3>\n\n<pre><code class=\"language-bash\">gpg --verify file.txt.gpg\n</code></pre>\n\n<h3 id=\"viewing-content-of-signed-file\">Viewing content of signed file</h3>\n\n<pre><code class=\"language-bash\">gpg -d signed-file.txt.gpg\n</code></pre>\n\n<h2 class=\"-two-column\" id=\"miscellaneous\">Miscellaneous</h2>\n\n<h3 id=\"components\">Components</h3>\n\n<p class=\"-setup\">List all components:</p>\n\n<pre><code class=\"language-bash\">gpgconf --list-components\n</code></pre>\n\n<p>Kill a component:</p>\n\n<pre><code class=\"language-bash\">gpgconf --kill &lt;COMPONENT&gt; # i.e. gpgconf --kill dirmngr\n</code></pre>\n\n<p>Kill all components:</p>\n<pre><code class=\"language-bash\">gpgconf --kill all\n</code></pre>\n\n<h3 id=\"parsing-keyring-data\">Parsing keyring data</h3>\n\n<p>Use <code>--with-colons</code> to produce an output that can easily be parsed i.e. with <code>awk</code>, <code>grep</code>. Fields are colon-separated.</p>\n\n<pre><code class=\"language-bash\">gpg -k --with-colons\n</code></pre>\n\n<p>Field Quick Reference:</p>\n\n<table>\n <tbody>\n <tr>\n <td>Field #</td>\n <td>Description</td>\n </tr>\n <tr>\n <td>1</td>\n <td>Record type</td>\n </tr>\n <tr>\n <td>2</td>\n <td>Validity</td>\n </tr>\n <tr>\n <td>3</td>\n <td>Key length in bits</td>\n </tr>\n <tr>\n <td>4</td>\n <td>Public key algorithm</td>\n </tr>\n <tr>\n <td>5</td>\n <td>Key ID</td>\n </tr>\n <tr>\n <td>6</td>\n <td>Creation date</td>\n </tr>\n <tr>\n <td>7</td>\n <td>Expiry date</td>\n </tr>\n <tr>\n <td>8</td>\n <td>Certificate S/N, UID hash, trust signature info</td>\n </tr>\n <tr>\n <td>9</td>\n <td>Ownertrust</td>\n </tr>\n <tr>\n <td>10</td>\n <td>User ID</td>\n </tr>\n <tr>\n <td>11</td>\n <td>Signature class</td>\n </tr>\n <tr>\n <td>12</td>\n <td>Key capabilities</td>\n </tr>\n <tr>\n <td>13</td>\n <td>Issuer fingerprint</td>\n </tr>\n <tr>\n <td>14</td>\n <td>Flag field</td>\n </tr>\n <tr>\n <td>15</td>\n <td>S/N of token</td>\n </tr>\n <tr>\n <td>16</td>\n <td>Hash algorithm</td>\n </tr>\n <tr>\n <td>17</td>\n <td>Curve name</td>\n </tr>\n <tr>\n <td>18</td>\n <td>Compliance flags</td>\n </tr>\n <tr>\n <td>19</td>\n <td>Last update timestamp</td>\n </tr>\n <tr>\n <td>20</td>\n <td>Origin</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"https://git.gnupg.org/cgi-bin/gitweb.cgi?p=gnupg.git;a=blob_plain;f=doc/DETAILS\">GnuPG Details</a> for more details.</p>",
"intro_html": "<p><a href=\"https://gnupg.org/\">GnuPG</a> is a complete and free implementation of the OpenPGP standard.</p>",
"description_html": "",
"tags": [],
"updated": "2017-10-18"
},{
"id": "go",
"title": "Go",
"url": "/go",
"category": "C-like",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"hello-world\">Hello world</h3>\n\n<h4 class=\"-file\" id=\"hellogo\">hello.go</h4>\n\n<pre><code class=\"language-go\">package main\n\nimport \"fmt\"\n\nfunc main() {\n message := greetMe(\"world\")\n fmt.Println(message)\n}\n\nfunc greetMe(name string) string {\n return \"Hello, \" + name + \"!\"\n}\n</code></pre>\n\n<pre><code class=\"language-bash\">$ go build\n</code></pre>\n\n<p>Or try it out in the <a href=\"https://repl.it/languages/go\">Go repl</a>, or <a href=\"https://tour.golang.org/welcome/1\">A Tour of Go</a>.</p>\n\n<h3 id=\"variables\">Variables</h3>\n\n<h4 id=\"variable-declaration\">Variable declaration</h4>\n\n<pre><code class=\"language-go\">var msg string\nmsg = \"Hello\"\n</code></pre>\n\n<h4 id=\"shortcut-of-above-infers-type\">Shortcut of above (Infers type)</h4>\n\n<pre><code class=\"language-go\">msg := \"Hello\"\n</code></pre>\n\n<h3 id=\"constants\">Constants</h3>\n\n<pre><code class=\"language-go\">const Phi = 1.618\n</code></pre>\n\n<p>Constants can be character, string, boolean, or numeric values.</p>\n\n<p>See: <a href=\"https://tour.golang.org/basics/15\">Constants</a></p>\n\n<h2 class=\"-three-column\" id=\"basic-types\">Basic types</h2>\n\n<h3 id=\"strings\">Strings</h3>\n\n<pre><code class=\"language-go\">str := \"Hello\"\n</code></pre>\n\n<pre><code class=\"language-go\">str := `Multiline\nstring`\n</code></pre>\n\n<p>Strings are of type <code>string</code>.</p>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<h4 id=\"typical-types\">Typical types</h4>\n\n<pre><code class=\"language-go\">num := 3 // int\nnum := 3. // float64\nnum := 3 + 4i // complex128\nnum := byte('a') // byte (alias for uint8)\n</code></pre>\n\n<h4 id=\"other-types\">Other types</h4>\n\n<pre><code class=\"language-go\">var u uint = 7 // uint (unsigned)\nvar p float32 = 22.7 // 32-bit float\n</code></pre>\n\n<h3 id=\"arrays\">Arrays</h3>\n\n<pre><code class=\"language-go\">// var numbers [5]int\nnumbers := [...]int{0, 0, 0, 0, 0}\n</code></pre>\n\n<p>Arrays have a fixed size.</p>\n\n<h3 id=\"slices\">Slices</h3>\n\n<pre><code class=\"language-go\">slice := []int{2, 3, 4}\n</code></pre>\n\n<pre><code class=\"language-go\">slice := []byte(\"Hello\")\n</code></pre>\n\n<p>Slices have a dynamic size, unlike arrays.</p>\n\n<h3 id=\"pointers\">Pointers</h3>\n\n<pre data-line=\"2\"><code class=\"language-go\">func main () {\n b := *getPointer()\n fmt.Println(\"Value is\", b)\n}\n</code></pre>\n\n<pre data-line=\"3\"><code class=\"language-go\">func getPointer () (myPointer *int) {\n a := 234\n return &amp;a\n}\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-go\">a := new(int)\n*a = 234\n</code></pre>\n\n<p>Pointers point to a memory location of a variable. Go is fully garbage-collected.</p>\n\n<p>See: <a href=\"https://tour.golang.org/moretypes/1\">Pointers</a></p>\n\n<h3 id=\"type-conversions\">Type conversions</h3>\n\n<pre><code class=\"language-go\">i := 2\nf := float64(i)\nu := uint(i)\n</code></pre>\n\n<p>See: <a href=\"https://tour.golang.org/basics/13\">Type conversions</a></p>\n\n<h2 class=\"-three-column\" id=\"flow-control\">Flow control</h2>\n\n<h3 id=\"conditional\">Conditional</h3>\n\n<pre data-line=\"1,3,5\"><code class=\"language-go\">if day == \"sunday\" || day == \"saturday\" {\n rest()\n} else if day == \"monday\" &amp;&amp; isTired() {\n groan()\n} else {\n work()\n}\n</code></pre>\n\n<p>See: <a href=\"https://tour.golang.org/flowcontrol/5\">If</a></p>\n\n<h3 id=\"statements-in-if\">Statements in if</h3>\n\n<pre data-line=\"1\"><code class=\"language-go\">if _, err := getResult(); err != nil {\n fmt.Println(\"Uh oh\")\n}\n</code></pre>\n\n<p>A condition in an <code>if</code> statement can be preceded with a statement before a <code>;</code>.</p>\n\n<p>See: <a href=\"https://tour.golang.org/flowcontrol/6\">If with a short statement</a></p>\n\n<h3 id=\"switch\">Switch</h3>\n\n<pre><code class=\"language-go\">switch day {\n case \"sunday\":\n // cases don't \"fall through\" by default!\n fallthrough\n\n case \"saturday\":\n rest()\n\n default:\n work()\n}\n</code></pre>\n\n<p>See: <a href=\"https://github.com/golang/go/wiki/Switch\">Switch</a></p>\n\n<h3 id=\"for-loop\">For loop</h3>\n\n<pre><code class=\"language-go\">for count := 0; count &lt;= 10; count++ {\n fmt.Println(\"My counter is at\", count)\n}\n</code></pre>\n\n<p>See: <a href=\"https://tour.golang.org/flowcontrol/1\">For loops</a></p>\n\n<h3 id=\"for-range-loop\">For-Range loop</h3>\n\n<pre><code class=\"language-go\">entry := []string{\"Jack\",\"John\",\"Jones\"}\nfor i, val := range entry {\n fmt.Printf(\"At position %d, the character %s is present\\n\", i, val)\n}\n</code></pre>\n\n<p>See: <a href=\"https://gobyexample.com/range\">For-Range loops</a></p>\n\n<h2 class=\"-three-column\" id=\"functions\">Functions</h2>\n\n<h3 id=\"lambdas\">Lambdas</h3>\n\n<pre data-line=\"1\"><code class=\"language-go\">myfunc := func() bool {\n return x &gt; 10000\n}\n</code></pre>\n\n<p>Functions are first class objects.</p>\n\n<h3 id=\"multiple-return-types\">Multiple return types</h3>\n\n<pre><code class=\"language-go\">a, b := getMessage()\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-go\">func getMessage() (a string, b string) {\n return \"Hello\", \"World\"\n}\n</code></pre>\n\n<h3 id=\"named-return-values\">Named return values</h3>\n\n<pre data-line=\"4\"><code class=\"language-go\">func split(sum int) (x, y int) {\n x = sum * 4 / 9\n y = sum - x\n return\n}\n</code></pre>\n\n<p>By defining the return value names in the signature, a <code>return</code> (no args) will return variables with those names.</p>\n\n<p>See: <a href=\"https://tour.golang.org/basics/7\">Named return values</a></p>\n\n<h2 class=\"-three-column\" id=\"packages\">Packages</h2>\n\n<h3 id=\"importing\">Importing</h3>\n\n<pre><code class=\"language-go\">import \"fmt\"\nimport \"math/rand\"\n</code></pre>\n\n<pre><code class=\"language-go\">import (\n \"fmt\" // gives fmt.Println\n \"math/rand\" // gives rand.Intn\n)\n</code></pre>\n\n<p>Both are the same.</p>\n\n<p>See: <a href=\"https://tour.golang.org/basics/1\">Importing</a></p>\n\n<h3 id=\"aliases\">Aliases</h3>\n\n<pre data-line=\"1\"><code class=\"language-go\">import r \"math/rand\"\n</code></pre>\n\n<pre><code class=\"language-go\">r.Intn()\n</code></pre>\n\n<h3 id=\"exporting-names\">Exporting names</h3>\n\n<pre><code class=\"language-go\">func Hello () {\n ···\n}\n</code></pre>\n\n<p>Exported names begin with capital letters.</p>\n\n<p>See: <a href=\"https://tour.golang.org/basics/3\">Exported names</a></p>\n\n<h3 id=\"packages-1\">Packages</h3>\n\n<pre><code class=\"language-go\">package hello\n</code></pre>\n\n<p>Every package file has to start with <code>package</code>.</p>\n\n<h2 class=\"-three-column\" id=\"concurrency\">Concurrency</h2>\n\n<h3 id=\"goroutines\">Goroutines</h3>\n\n<pre data-line=\"3,6,7,8,13\"><code class=\"language-go\">func main() {\n // A \"channel\"\n ch := make(chan string)\n\n // Start concurrent routines\n go push(\"Moe\", ch)\n go push(\"Larry\", ch)\n go push(\"Curly\", ch)\n\n // Read 3 results\n // (Since our goroutines are concurrent,\n // the order isn't guaranteed!)\n fmt.Println(&lt;-ch, &lt;-ch, &lt;-ch)\n}\n</code></pre>\n\n<pre data-line=\"3\"><code class=\"language-go\">func push(name string, ch chan string) {\n msg := \"Hey, \" + name\n ch &lt;- msg\n}\n</code></pre>\n\n<p>Channels are concurrency-safe communication objects, used in goroutines.</p>\n\n<p>See: <a href=\"https://tour.golang.org/concurrency/1\">Goroutines</a>, <a href=\"https://tour.golang.org/concurrency/2\">Channels</a></p>\n\n<h3 id=\"buffered-channels\">Buffered channels</h3>\n\n<pre data-line=\"1\"><code class=\"language-go\">ch := make(chan int, 2)\nch &lt;- 1\nch &lt;- 2\nch &lt;- 3\n// fatal error:\n// all goroutines are asleep - deadlock!\n</code></pre>\n\n<p>Buffered channels limit the amount of messages it can keep.</p>\n\n<p>See: <a href=\"https://tour.golang.org/concurrency/3\">Buffered channels</a></p>\n\n<h3 id=\"closing-channels\">Closing channels</h3>\n\n<h4 id=\"closes-a-channel\">Closes a channel</h4>\n\n<pre data-line=\"4\"><code class=\"language-go\">ch &lt;- 1\nch &lt;- 2\nch &lt;- 3\nclose(ch)\n</code></pre>\n\n<h4 id=\"iterates-across-a-channel-until-its-closed\">Iterates across a channel until its closed</h4>\n\n<pre data-line=\"1\"><code class=\"language-go\">for i := range ch {\n ···\n}\n</code></pre>\n\n<h4 id=\"closed-if-ok--false\">Closed if <code>ok == false</code></h4>\n\n<pre><code class=\"language-go\">v, ok := &lt;- ch\n</code></pre>\n\n<p>See: <a href=\"https://tour.golang.org/concurrency/4\">Range and close</a></p>\n\n<h3 id=\"waitgroup\">WaitGroup</h3>\n\n<pre data-line=\"1,4,8,12\"><code class=\"language-go\">import \"sync\"\n\nfunc main() {\n var wg sync.WaitGroup\n \n for _, item := range itemList {\n // Increment WaitGroup Counter\n wg.Add(1)\n go doOperation(item)\n }\n // Wait for goroutines to finish\n wg.Wait()\n \n}\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-go\">func doOperation(item string) {\n defer wg.Done()\n // do operation on item\n // ...\n}\n</code></pre>\n\n<p>A WaitGroup waits for a collection of goroutines to finish. The main goroutine calls Add to set the number of goroutines to wait for. The goroutine calls <code>wg.Done()</code> when it finishes.\nSee: <a href=\"https://golang.org/pkg/sync/#WaitGroup\">WaitGroup</a></p>\n\n<h2 id=\"error-control\">Error control</h2>\n\n<h3 id=\"defer\">Defer</h3>\n\n<pre data-line=\"2\"><code class=\"language-go\">func main() {\n defer fmt.Println(\"Done\")\n fmt.Println(\"Working...\")\n}\n</code></pre>\n\n<p>Defers running a function until the surrounding function returns.\nThe arguments are evaluated immediately, but the function call is not ran until later.</p>\n\n<p>See: <a href=\"https://blog.golang.org/defer-panic-and-recover\">Defer, panic and recover</a></p>\n\n<h3 id=\"deferring-functions\">Deferring functions</h3>\n\n<pre><code class=\"language-go\">func main() {\n defer func() {\n fmt.Println(\"Done\")\n }()\n fmt.Println(\"Working...\")\n}\n</code></pre>\n\n<p data-line=\"2,3,4\">Lambdas are better suited for defer blocks.</p>\n\n<pre data-line=\"3,4,5\"><code class=\"language-go\">func main() {\n var d = int64(0)\n defer func(d *int64) {\n fmt.Printf(\"&amp; %v Unix Sec\\n\", *d)\n }(&amp;d)\n fmt.Print(\"Done \")\n d = time.Now().Unix()\n}\n</code></pre>\n<p>The defer func uses current value of d, unless we use a pointer to get final value at end of main.</p>\n\n<h2 class=\"-three-column\" id=\"structs\">Structs</h2>\n\n<h3 id=\"defining\">Defining</h3>\n\n<pre data-line=\"1,2,3,4\"><code class=\"language-go\">type Vertex struct {\n X int\n Y int\n}\n</code></pre>\n\n<pre><code class=\"language-go\">func main() {\n v := Vertex{1, 2}\n v.X = 4\n fmt.Println(v.X, v.Y)\n}\n</code></pre>\n\n<p>See: <a href=\"https://tour.golang.org/moretypes/2\">Structs</a></p>\n\n<h3 id=\"literals\">Literals</h3>\n\n<pre><code class=\"language-go\">v := Vertex{X: 1, Y: 2}\n</code></pre>\n\n<pre><code class=\"language-go\">// Field names can be omitted\nv := Vertex{1, 2}\n</code></pre>\n\n<pre><code class=\"language-go\">// Y is implicit\nv := Vertex{X: 1}\n</code></pre>\n\n<p>You can also put field names.</p>\n\n<h3 id=\"pointers-to-structs\">Pointers to structs</h3>\n\n<pre><code class=\"language-go\">v := &amp;Vertex{1, 2}\nv.X = 2\n</code></pre>\n\n<p>Doing <code>v.X</code> is the same as doing <code>(*v).X</code>, when <code>v</code> is a pointer.</p>\n\n<h2 id=\"methods\">Methods</h2>\n\n<h3 id=\"receivers\">Receivers</h3>\n\n<pre><code class=\"language-go\">type Vertex struct {\n X, Y float64\n}\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-go\">func (v Vertex) Abs() float64 {\n return math.Sqrt(v.X * v.X + v.Y * v.Y)\n}\n</code></pre>\n\n<pre><code class=\"language-go\">v := Vertex{1, 2}\nv.Abs()\n</code></pre>\n\n<p>There are no classes, but you can define functions with <em>receivers</em>.</p>\n\n<p>See: <a href=\"https://tour.golang.org/methods/1\">Methods</a></p>\n\n<h3 id=\"mutation\">Mutation</h3>\n\n<pre data-line=\"1\"><code class=\"language-go\">func (v *Vertex) Scale(f float64) {\n v.X = v.X * f\n v.Y = v.Y * f\n}\n</code></pre>\n\n<pre><code class=\"language-go\">v := Vertex{6, 12}\nv.Scale(0.5)\n// `v` is updated\n</code></pre>\n\n<p>By defining your receiver as a pointer (<code>*Vertex</code>), you can do mutations.</p>\n\n<p>See: <a href=\"https://tour.golang.org/methods/4\">Pointer receivers</a></p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://tour.golang.org/welcome/1\">A tour of Go</a> <em>(tour.golang.org)</em></li>\n <li><a href=\"https://github.com/golang/go/wiki/\">Golang wiki</a> <em>(github.com)</em></li>\n <li><a href=\"https://awesome-go.com/\">Awesome Go</a> <em>(awesome-go.com)</em></li>\n <li><a href=\"https://gobyexample.com/\">Go by Example</a> <em>(gobyexample.com)</em></li>\n <li><a href=\"https://golang.org/doc/effective_go.html\">Effective Go</a> <em>(golang.org)</em></li>\n <li><a href=\"https://www.youtube.com/channel/UC_BzFbxG2za3bp5NRRRXJSw\">JustForFunc Youtube</a> <em>(youtube.com)</em></li>\n <li><a href=\"https://github.com/golang/go/wiki/CodeReviewComments\">Style Guide</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featured"],
"updated": "2017-09-15"
},{
"id": "goby",
"title": "Goby",
"url": "/goby",
"category": "Ruby",
"keywords": null,
"content_html": "<h2 id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"hello-world\">Hello world</h3>\n\n<h4 class=\"-file\" id=\"hellogb\">hello.gb</h4>\n\n<pre><code class=\"language-ruby\">class Greet\n attr_accessor :audience, :head, :tail\n \n def initialize\n @head = \"Hello, \"\n @tail = \"!\"\n end\n\n def name\n audience.name\n end\n\n def say\n puts head + name + tail\n end\nend\n\nmodule MyName\n attr_reader :name\n\n def initialize\n @name = self.class.to_s\n end\nend\n\nclass World\n include MyName\nend\n\ngreet = Greet.new\ngreet.audience = World.new\ngreet.say\n</code></pre>\n\n<p>Then run:</p>\n\n<pre><code class=\"language-bash\">$ goby hello.gb\n#=&gt; Hello, World!\n</code></pre>\n\n<h3 id=\"repl-igb\">REPL (igb)</h3>\n\n<pre><code class=\"language-bash\">$ goby -i\n</code></pre>\n\n<ul>\n <li><code>reset</code>: reset the VM</li>\n <li><code>exit</code>: exit REPL</li>\n <li><code>help</code>: show help</li>\n <li>ctrl-c: cancel the block entered, or exit (on top level)</li>\n</ul>\n\n<p>See <a href=\"https://github.com/goby-lang/goby/blob/master/igb/manual_test.md\">igb manual &amp; test script</a>. You can use <code>readline</code> features such as command history by arrow keys.</p>\n\n<h2 class=\"-three-column\" id=\"variables\">Variables</h2>\n\n<h3 id=\"local-variable\">Local variable</h3>\n\n<pre><code class=\"language-ruby\">zip101 = \"233-7383\"\nmagic_number = 42\n</code></pre>\n\n<p>Should be “<code>[a-z][a-z0-9_]+</code>“(snake_case).</p>\n\n<h3 id=\"instance-variable\">Instance variable</h3>\n\n<pre><code class=\"language-ruby\">module State\n def initialize(state)\n @state = state # declaring an instance variable by assignment\n end\n def show\n @state # accessible from other instance methods\n end\nend\n\nstate = State.new \"success\"\nstate.show\n#=&gt; success\n</code></pre>\n\n<p>Should be “<code>@[a-z][a-z0-9_]+</code>“(snake_case).</p>\n\n<h3 id=\"multiple-assignment\">Multiple assignment</h3>\n\n<pre><code class=\"language-ruby\"># array literal\na, b, c = [1, 2, 3]\n\n# array with '*'\na = [1, 2, 3]\nx, y, z = *a\n\n# array literal with '*'\na, b, c = *[1, 2, 3]\n\n# bare assignment: unsupported\na, b, c = 1, 2, 3 #=&gt; unexpected 3 Line: 0\n</code></pre>\n\n<h3 id=\"black-hole-variable\">Black hole variable</h3>\n\n<pre><code class=\"language-ruby\"># '_' is write-only\na, _ = [1, 2]\n</code></pre>\n\n<h3 id=\"class-variable\">Class variable</h3>\n\n<p>Unsupported.</p>\n\n<h3 id=\"global-variable\">Global variable</h3>\n\n<p>Unsupported.</p>\n\n<h2 id=\"method-definition\">Method definition</h2>\n\n<h3 id=\"method-definition-and-calling\">Method definition and calling</h3>\n\n<pre><code class=\"language-ruby\">def foo_bar?(baz)\n if baz == \"Hi, Goby!\"\n true\n else\n false\n end\nend\n\nfoo_bar? \"Hi, Goby!\" #=&gt; true\n</code></pre>\n\n<p>Method name should be “<code>[a-z][a-z0-9_]+\\??</code>” (snake_case). You can omit the trailing “<code>()</code>” only if no parameters are taken. Trailing using “<code>!</code>” is <strong>unsupported</strong>.</p>\n\n<h3 id=\"order-of-method-parameter\">Order of method parameter</h3>\n\n<pre><code class=\"language-ruby\">def foo(normal, default=\"value\", hash={}, ary=[], keyword:, keyword_default:\"key\", *sprat)\nend\n</code></pre>\n\n<p>If a default value is provided to a parameter, the parameter can be omitted when calling. <code>()</code> can be omitted. The order of parameters in method definition is restricted as follows:</p>\n\n<ol>\n <li><strong>normal parameters</strong> (like <code>a</code>)</li>\n <li><strong>normal parameters with default value</strong> (like <code>a=1</code>)</li>\n <li><strong>optional parameters</strong> (array or hash, like <code>ary=[]</code> or <code>hs={}</code>)</li>\n <li><strong>keyword parameters</strong> (like <code>kwd:</code>)</li>\n <li><strong>keyword parameters with default value</strong> (like <code>kwd: 1</code> or <code>ary: [1,2,3]</code> or <code>hsh: {key: \"value\"}</code>)</li>\n <li><strong>splat parameters</strong> (like <code>*sp</code>)</li>\n</ol>\n\n<p>Or you will receive an error.</p>\n\n<h3 id=\"keyword-parameter-wip\">Keyword parameter (WIP)</h3>\n\n<pre><code class=\"language-ruby\">def foo(process:, verb: :GET, opt:{ csp: :enabled }, ary: [1, 2, 3])\nend\n</code></pre>\n\n<h3 id=\"returning-value\">Returning value</h3>\n\n<pre><code class=\"language-ruby\">PI = 3.14\ndef area(radius)\n radius * PI # returns the result of evaluation\nend\n\narea 6 #=&gt; 18.84\n</code></pre>\n\n<h3 id=\"returning-multiple-value\">Returning multiple value</h3>\n\n<pre><code class=\"language-ruby\">def my_array\n [1, 2, 3]\nend\n\nmy_array #=&gt; [1, 2, 3]\n</code></pre>\n\n<h3 id=\"instance-method\">Instance method</h3>\n\n<pre><code class=\"language-ruby\">module Foo\n def bar # defining instance method\n puts \"bar\"\n end\n \n def baz(count, email: \"goby@example.com\")\n count.times do\n puts email\n end\n end\nend\n\nfoo = Foo.new\nfoo.bar #=&gt; bar\nfoo.baz(3) #↓\ngoby@example.com\ngoby@example.com\ngoby@example.com\n</code></pre>\n\n<h3 id=\"singleton-method-1\">Singleton method #1</h3>\n\n<pre><code class=\"language-ruby\">str = \"Goby\"\ndef str.foo #1 singleton method on the object\n self * 2\nend\n\nstr.foo\n#=&gt; GobyGoby\n</code></pre>\n\n<h3 id=\"singleton-method-2\">Singleton method #2</h3>\n\n<pre><code class=\"language-ruby\">module Foo\n def self.bar #2 singleton method with `self.`\n 92\n end\nend\n</code></pre>\n\n<h3 id=\"singleton-method-3\">Singleton method #3</h3>\n\n<pre><code class=\"language-ruby\">module Foo \n def Foo.bar #3 singleton method with a class name (unrecommended)\n 88\n end\nend\n</code></pre>\n\n<h3 id=\"singleton-method-4\">Singleton method #4</h3>\n\n<pre><code class=\"language-ruby\">module Foo end\n\ndef Foo.bar #4 singleton methods outside the Foo\n 9999\nend\n\nFoo.bar #=&gt; 9999\n</code></pre>\n\n<h3 id=\"attribute-accessor-method\">Attribute accessor method</h3>\n\n<pre><code class=\"language-ruby\">class Foo\n attr_accessor :bar, :baz\n\n def initialize\n @bar = 42\n @baz = 99\n end\nend\n\nfoo = Foo.new\n\nfoo.bar = 77\nfoo.baz = 88\n</code></pre>\n\n<p>You can use the following shorthands to declare attribute accessor methods in classes/modules:</p>\n\n<ul>\n <li><code>attr_accessor</code></li>\n <li><code>attr_reader</code></li>\n <li><code>attr_writer</code></li>\n</ul>\n\n<h3 id=\"private-method-to-be-implemented\">Private method (to be implemented)</h3>\n\n<pre><code class=\"language-ruby\">class Foo\n def bar\n 42\n end\n \n def _baz # leading '_' means private method\n 99\n end\nend\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"moduleclass-definition\">Module/Class definition</h2>\n\n<h3 id=\"module-definition-and-include\">Module definition and <code>include</code></h3>\n\n<pre><code class=\"language-ruby\">module Foo\n def foo\n \"Foo's instance method\"\n end\nend\n\nclass Bar\n include Foo # to include Foo\nend\n\nBar.new.foo #=&gt; Foo's instance method\n</code></pre>\n\n<p>Module names should be “<code>[A-Z][A-Za-z0-9_]+</code>” (UpperCamelCase). Modules cannot be inherited.</p>\n\n<h3 id=\"module-definition-and-extend\">Module definition and <code>extend</code></h3>\n\n<pre><code class=\"language-ruby\">module Foo\n def foo\n \"Foo's instance method will be a singleton method\"\n end\nend\n\nclass Bar\n extend Foo # to extend Foo \nend\n\nBar.foo #=&gt; Foo's instance method will be a singleton method\n</code></pre>\n\n<p><code>extend</code> is to use the instance methods in the specified modules as <strong>singleton methods</strong> in your class or module.</p>\n\n<h3 id=\"module-instantiation\">Module instantiation</h3>\n\n<pre><code class=\"language-ruby\">module Foo #module definition\n def foo \n 99\n end\nend\n\nFoo.new.foo #=&gt; 99\n</code></pre>\n\n<p>Actually, Goby’s module can be even <strong>instantiated</strong> via “<code>new</code>” like “<code>Foo.new</code>”.</p>\n\n<h3 id=\"class-definition-and-inheritance\">Class definition and inheritance</h3>\n\n<pre><code class=\"language-ruby\">class Foo # class definition\n def bar\n 99\n end\nend\n\nclass Baz &lt; Foo # inheritance\nend\n\nBaz.new.bar #=&gt; 99\n</code></pre>\n\n<p>Class names should be “<code>[A-Z][A-Za-z0-9]+</code>” (UpperCamelCase). Inheritance with “<code>&lt;</code>” is supported.</p>\n\n<h3 id=\"constants\">Constants</h3>\n\n<pre><code class=\"language-ruby\">HTTP_ERROR_404 = 404\nHTTP_ERROR_404 = 500 # error\n</code></pre>\n\n<p>Constants should be “<code>[A-Z][A-Za-z0-9_]+</code>” (UPPER_SNAKECASE). Constants are <strong>not reentrant</strong> and the scope is <strong>global</strong>.</p>\n\n<h3 id=\"redefining-classmodules\">Redefining class/modules</h3>\n\n<pre><code class=\"language-ruby\">class Foo\n def bar\n 99\n end\nend\n\nclass Foo\n def bar # redefining is possible\n 77\n end\nend\n</code></pre>\n\n<h3 id=\"namespaces\">Namespaces</h3>\n\n<pre><code class=\"language-ruby\">class Foo\n module Bar\n MAGIC = 99\n def baz\n 99\n end\n end\nend\n\nFoo::Bar.new.baz # Use '::' for namespacing\nFoo::Bar::MAGIC # Use '::' for namespacing\n</code></pre>\n\n<h2 id=\"load-library\">Load library</h2>\n\n<h3 id=\"require\"><code>require</code></h3>\n\n<pre><code class=\"language-ruby\">require(\"uri\") # to activate URL class\n\nu = URI.parse(\"http://example.com\")\nu.scheme #=&gt; \"http\"\n</code></pre>\n\n<h3 id=\"require_relative\"><code>require_relative</code></h3>\n\n<pre><code class=\"language-ruby\">require_relative(\"bar\") # loading the local bar.gb\n\nclass Foo\n def self.bar(x)\n Bar.foo do |ten|\n x * ten\n end\n end\n\n def self.baz\n yield(100)\n end\nend\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"literal\">Literal</h2>\n\n<h3 id=\"keyword\">Keyword</h3>\n\n<p><code>def</code>, <code>true</code>, <code>false</code>, <code>nil</code>, <code>if</code>, <code>elsif</code>, <code>else</code>, <code>case</code>, <code>when</code>, <code>return</code>, <code>self</code>, <code>end</code>, <code>while</code>, <code>do</code>, <code>yield</code>, <code>get_block</code>, <code>next</code>, <code>class</code>, <code>module</code>, <code>break</code></p>\n\n<h3 id=\"string-literal\">String literal</h3>\n\n<pre><code class=\"language-ruby\">\"double quote\"\n'single quote'\n</code></pre>\n\n<p>Double and single quotation can be used.</p>\n\n<h3 id=\"symbol-literal\">Symbol literal</h3>\n\n<pre><code class=\"language-ruby\">:symbol # equivalent to \"symbol\"\n{ symbol: \"value\" }\n</code></pre>\n\n<p>Goby’s symbol (using <code>:</code>) is always <code>String</code> class.</p>\n\n<h3 id=\"numeric-literal\">Numeric literal</h3>\n\n<pre><code class=\"language-ruby\">year = 2018 # Integer\noffset = -42 # Integer\nPI = 3.14 # Float\nG = -9.8 # Float\n</code></pre>\n\n<h3 id=\"array-literal\">Array literal</h3>\n\n<pre><code class=\"language-ruby\">[1, 2, 3, \"hello\", :goby, { key: \"value\"}]\n[1, 2, [3, 4], 5, 6]\n</code></pre>\n\n<h3 id=\"hash-literal\">Hash literal</h3>\n\n<pre><code class=\"language-ruby\">h = { key: \"value\", key2: \"value2\" }\nh[:key2] #=&gt; value2\n</code></pre>\n\n<p>Hash literal’s keys should always be <strong>symbol literals</strong>.</p>\n\n<h3 id=\"range-literal\">Range literal</h3>\n\n<pre><code class=\"language-ruby\">(1..10).each do |x| # '..' represents a range\n puts x*x\nend\n</code></pre>\n\n<h3 id=\"boolean-and-nil\">Boolean and <code>nil</code></h3>\n\n<pre><code class=\"language-ruby\">true # Boolean class\nfalse # Boolean class\nnil # Null class\n\n!nil #=&gt; true\n</code></pre>\n\n<p>Any objects except <code>nil</code> and <code>false</code> will be treated as <code>true</code> on conditionals.</p>\n\n<h2 id=\"operator\">Operator</h2>\n\n<h3 id=\"arithmeticlogicalassignment-operators\">Arithmetic/logical/assignment operators</h3>\n\n<pre><code class=\"language-ruby\">+ # unary\n** # power\n- # unary\n* / % # multiplication, division, modulus\n+ - # addition, subtraction\n! # logical inversion\n&gt; &gt;= &lt; &lt;= # inequality comparison\n== != # equality comparison, negative comparison\n&amp;&amp; # logical AND\n|| # logical OR\n+= -= # shorthand of addition/subtraction\n= # assignment\n</code></pre>\n\n<p>*Priority of operators are TBD</p>\n\n<h3 id=\"other-operators\">Other operators</h3>\n\n<pre><code class=\"language-ruby\">() # chaning priority of interpretation\n[] # array literal\n* # multiple assignment\n.. # range\n</code></pre>\n\n<p>*Priority of operators are TBD</p>\n\n<h3 id=\"delimiter\">Delimiter</h3>\n\n<pre><code class=\"language-ruby\">class Foo; end # ';' to delimit\n\nclass Bar end # recommended\n</code></pre>\n\n<h3 id=\"string-interpolation-to-be-implemented\">String interpolation (to be implemented)</h3>\n\n<pre><code class=\"language-ruby\">puts \"Error: #{error_message}\" # double quotation is required\n</code></pre>\n\n<h3 id=\"comment\">Comment</h3>\n\n<pre><code class=\"language-ruby\">puts \"Goby\" # comments\n</code></pre>\n\n<p>Use the annotations to keep the comments concise.</p>\n\n<ul>\n <li><code>TODO</code></li>\n <li><code>FIXME</code></li>\n <li><code>OPTIMIZE</code></li>\n <li><code>HACK</code></li>\n <li><code>REVIEW</code></li>\n</ul>\n\n<h3 id=\"io\">I/O</h3>\n\n<ul>\n <li>\n <p><code>#puts</code></p>\n </li>\n <li>\n <p>special constants: <code>ARGV</code>, <code>STDIN</code>, <code>STDOUT</code>, <code>STDERR</code>, <code>ENV</code></p>\n </li>\n</ul>\n\n<h2 class=\"-three-column\" id=\"flow-control\">Flow control</h2>\n\n<h3 id=\"if-else-elsif\"><code>if</code>, <code>else</code>, <code>elsif</code></h3>\n\n<pre><code class=\"language-ruby\">def foo(str)\n if str.size &gt; 10\n puts \"too big!\"\n elsif str.size &lt; 3\n puts \"too short!\"\n else\n puts \"moderate\"\n end\nend\n</code></pre>\n\n<p><code>then</code> is <strong>not</strong> supported.</p>\n\n<h3 id=\"break\">Break</h3>\n\n<pre><code class=\"language-ruby\">def foo(tail)\n (5..tail).each do |t|\n if t % 2 == 0 &amp;&amp; t % 5 == 0\n puts \"ouch!\"\n break # finish the block\n else\n puts t\n end\n end\n puts \"out of the block\"\nend\n\nfoo 20\n#=&gt; 5 6 7 8 9\n#=&gt; ouch!\n#=&gt; out of the block\n</code></pre>\n\n<h3 id=\"case\">Case</h3>\n\n<pre><code class=\"language-ruby\">def foo(str)\n case str\n when \"Elf\"\n puts \"You might be Aragorn II!\"\n when \"Aragorn\"\n puts \"Long time no see, Aragorn!\"\n when \"Frodo\", \"Sam\", \"Gandalf\"\n puts \"One of us!\"\n else\n puts \"You're not yourself\"\n end\nend\n</code></pre>\n\n<h3 id=\"while\">While</h3>\n\n<pre><code class=\"language-ruby\">decr = 10\nwhile decr do\n if decr &lt; 1\n break\n end\n puts decr\n decr -= 1\nend\n</code></pre>\n\n<p><code>while</code>, conditional and a <code>do</code>/<code>end</code> block can be used for a loop.</p>\n\n<h3 id=\"rescue\">Rescue</h3>\n\n<p>Under construction. Join <a href=\"https://github.com/goby-lang/goby/issues/605\">#605</a>.</p>\n\n<h2 class=\"-three-column\" id=\"block\">Block</h2>\n\n<h3 id=\"block-1\">Block</h3>\n\n<pre><code class=\"language-ruby\">def foo(ary: [1, 2, 3])\n ary.each do |s| # start of the block with |block variable|\n puts s\n end # end of the block\nend\n</code></pre>\n\n<p><code>{ }</code> cannot be used for forming a block.</p>\n\n<h3 id=\"yield\"><code>yield</code></h3>\n\n<pre><code class=\"language-ruby\">def foo\n yield(10) # executes the block given\nend\n\nfoo do |ten|\n ten + 20\nend\n</code></pre>\n\n<h3 id=\"block-object-and-call\">Block object and <code>call</code></h3>\n\n<pre><code class=\"language-ruby\">b = Block.new do\n 100\nend\n\nb.call #=&gt; 100\n</code></pre>\n\n<p><code>Block.new</code> can take a block and then <code>call</code>.</p>\n\n<h3 id=\"passing-a-block\">Passing a block</h3>\n\n<pre><code class=\"language-ruby\">def baz\n 1000\nend\n\nclass Foo\n def exec_block(block)\n\tblock.call\n end\n\n def baz\n 100\n end\nend\n\nb = Block.new do\n baz\nend\n\nf = Foo.new\nf.exec_block(b)\n</code></pre>\n\n<h3 id=\"passing-a-block-with-block-arguments\">Passing a block with block arguments</h3>\n\n<pre><code class=\"language-ruby\">b = Block.new do |arg, offset|\n arg + 1000 - offset\nend\n\nb.call(49, 500) #=&gt; 549\n</code></pre>\n\n<h3 id=\"special-get_block-keyword\">Special <code>get_block</code> keyword</h3>\n\n<pre><code class=\"language-ruby\">def bar(block)\n # runs the block object and the block arg simultaneously\n block.call + get_block.call\nend\n\ndef foo\n bar(get_block) do # passes two blocks to `bar`\n 20\n end\nend\n\nfoo do\n 10\nend\n</code></pre>\n\n<p><code>get_block</code> is not a method but a <strong>keyword</strong> to retrive a given block argument as a block object. By this, you can pass around or <code>call</code> the given block arguments as block objects.</p>\n\n<h3 id=\"closure\">Closure</h3>\n\n<pre><code class=\"language-ruby\">count = 0 # the declaration is used\nb = Block.new do\n count += 1 # the block looks preserving the `count`\nend\n\nclass Foo\n def bar(blk)\n count = 9 # (does not affect)\n puts blk.call # local variable is resolved to the one above\n end\nend\n\nFoo.new.bar b #=&gt; 1\nFoo.new.bar b #=&gt; 2\nFoo.new.bar b #=&gt; 3\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"native-class-primary\">Native class (Primary)</h2>\n\n<p>Goby’s most “native” classes cannot instantiate with <code>new</code> in principle.</p>\n\n<h3 id=\"object\"><code>Object</code></h3>\n\n<pre><code class=\"language-ruby\">Bar.ancestors\n#» [Bar, Foo, Object]\nBar.singleton_class.ancestors\n#» [#&lt;Class:Bar&gt;, #&lt;Class:Object&gt;, Class, Object]\n</code></pre>\n\n<p><code>Object</code> is actually just for creating singleton classes. See <code>Class</code>.</p>\n\n<ul>\n <li>\n <p><strong><code>Object.methods</code></strong>: <code>!</code>, <code>!=</code>, <code>==</code>, <code>block_given?</code>, <code>class</code>, <code>exit</code>, <code>instance_eval</code>, <code>instance_variable_get</code>, <code>instance_variable_set</code>, <code>is_a?</code>, <code>methods</code>, <code>nil?</code>, <code>object_id</code>, <code>puts</code>, <code>raise</code>, <code>require</code>, <code>require_relative</code>, <code>send</code>, <code>singleton_class</code>, <code>sleep</code>, <code>thread</code>, <code>to_s</code>, <code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>ancestors</code>, <code>attr_accessor</code>, <code>attr_reader</code>, <code>attr_writer</code>, <code>extend</code>, <code>include</code>, <code>name</code>, <code>new</code>, <code>superclass</code></p>\n </li>\n <li>\n <p><strong><code>Object.new.methods</code></strong>: <code>!</code>, <code>!=</code>, <code>==</code>, <code>block_given?</code>, <code>class</code>, <code>exit</code>, <code>instance_eval</code>, <code>instance_variable_get</code>, <code>instance_variable_set</code>, <code>is_a?</code>, <code>methods</code>, <code>nil?</code>, <code>object_id</code>, <code>puts</code>, <code>raise</code>, <code>require</code>, <code>require_relative</code>, <code>send</code>, <code>singleton_class</code>, <code>sleep</code>, <code>thread</code>, <code>to_s</code></p>\n </li>\n</ul>\n\n<h3 id=\"class\"><code>Class</code></h3>\n\n<pre><code class=\"language-ruby\">String.ancestors #=&gt; [String, Object]\n</code></pre>\n\n<p><code>Class</code> and <code>Object</code>can actually be regarded as the same and you don’t need to distinguish them in almost all the cases.</p>\n\n<ul>\n <li><strong><code>Class.methods</code></strong>: <code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>ancestors</code>, <code>attr_accessor</code>, <code>attr_reader</code>, <code>attr_writer</code>, <code>extend</code>, <code>include</code>, <code>name</code>, <code>new</code>, <code>superclass</code>, <code>!</code>, <code>!=</code>, <code>==</code>, <code>block_given?</code>, <code>class</code>, <code>exit</code>, <code>instance_eval</code>, <code>instance_variable_get</code>, <code>instance_variable_set</code>, <code>is_a?</code>, <code>methods</code>, <code>nil?</code>, <code>object_id</code>, <code>puts</code>, <code>raise</code>, <code>require</code>, <code>require_relative</code>, <code>send</code>, <code>singleton_class</code>, <code>sleep</code>, <code>thread</code>, <code>to_s</code></li>\n</ul>\n\n<h3 id=\"string\"><code>String</code></h3>\n\n<pre><code class=\"language-ruby\">puts \"Hello\" + ' ' + 'world' #=&gt; Hello world\n</code></pre>\n\n<p>Fixed to <strong>UTF-8</strong> with mb4 support.</p>\n\n<ul>\n <li><strong><code>String.methods</code></strong>: <code>fmt</code>,\n <ul>\n <li>the rest: <code>Class.methods</code></li>\n </ul>\n </li>\n <li><strong><code>\"a\".methods</code></strong>: <code>!=</code>, <code>*</code>, <code>+</code>, <code>&lt;</code>, <code>&lt;=&gt;</code>, <code>==</code>, <code>=~</code>, <code>&gt;</code>, <code>[]</code>, <code>[]=</code>, <code>capitalize</code>, <code>chop</code>, <code>concat</code>, <code>count</code>, <code>delete</code>, <code>downcase</code>, <code>each_byte</code>, <code>each_char</code>, <code>each_line</code>, <code>empty?</code>, <code>end_with?</code>, <code>eql?</code>, <code>fmt</code>, <code>include?</code>, <code>insert</code>, <code>length</code>, <code>ljust</code>, <code>match</code>, <code>new</code>, <code>replace</code>, <code>replace_once</code>, <code>reverse</code>, <code>rjust</code>, <code>size</code>, <code>slice</code>, <code>split</code>, <code>start_with</code>, <code>strip</code>, <code>to_a</code>, <code>to_bytes</code>, <code>to_d</code>, <code>to_f</code>, <code>to_i</code>, <code>to_s</code>, <code>upcase</code>,\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"integer\"><code>Integer</code></h3>\n\n<pre><code class=\"language-ruby\">37037 * 27 #=&gt; 999999\n</code></pre>\n\n<ul>\n <li><strong><code>Integer.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>1.methods</code></strong>: <code>!=</code>, <code>%</code>, <code>*</code>, <code>**</code>, <code>+</code>, <code>-</code>, <code>/</code>, <code>&lt;</code>, <code>&lt;=</code>, <code>&lt;=&gt;</code>, <code>==</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>even?</code>, <code>new</code>, <code>next</code>, <code>odd?</code>, <code>pred</code>, <code>ptr</code>, <code>times</code>, <code>to_f</code>, <code>to_float32</code>, <code>to_float64</code>, <code>to_i</code>, <code>to_int</code>, <code>to_int16</code>, <code>to_int32</code>, <code>to_int64</code>, <code>to_int8</code>, <code>to_s</code>, <code>to_uint</code>, <code>to_uint16</code>, <code>to_uint32</code>, <code>to_uint64</code>, <code>to_uint8</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"array\"><code>Array</code></h3>\n\n<pre><code class=\"language-ruby\">[1, \"2\", :card, [4, 5], { john: \"doe\" }]\n</code></pre>\n\n<ul>\n <li><strong><code>Array.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>[1].methods</code></strong>: <code>*</code>, <code>+</code>, <code>[]</code>, <code>[]=</code>, <code>any?</code>, <code>at</code>, <code>clear</code>, <code>concat</code>, <code>count</code>, <code>delete_at</code>, <code>dig</code>, <code>each</code>, <code>each_index</code>, <code>empty?</code>, <code>first</code>, <code>flatten</code>, <code>include?</code>, <code>join</code>, <code>last</code>, <code>lazy</code>, <code>length</code>, <code>map</code>, <code>new</code>, <code>pop</code>, <code>push</code>, <code>reduce</code>, <code>reverse</code>, <code>reverse_each</code>, <code>rotate</code>, <code>select</code>, <code>shift</code>, <code>to_enum</code>, <code>unshift</code>, <code>values_at</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"hash\"><code>Hash</code></h3>\n\n<pre><code class=\"language-ruby\">h = { key: \"value\" }\nh = { \"key\": \"value\" } #=&gt; error\n\nh[\"key\"] #=&gt; value\nh[:key] #=&gt; value\n</code></pre>\n\n<p>Keys in hash literals should be <strong>symbol literals</strong>, while Hash index can be either string or symbol literals.</p>\n\n<ul>\n <li><strong><code>Hash.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>{ key: \"value\" }.methods</code></strong>: <code>[]</code>, <code>[]=</code>, <code>any?</code>, <code>clear</code>, <code>default</code>, <code>default=</code>, <code>delete</code>, <code>delete_if</code>, <code>dig</code>, <code>each</code>, <code>each_key</code>, <code>each_value</code>, <code>empty?</code>, <code>eql?</code>, <code>fetch</code>, <code>fetch_values</code>, <code>has_key?</code>, <code>has_value?</code>, <code>keys</code>, <code>length</code>, <code>map_values</code>, <code>merge</code>, <code>new</code>, <code>select</code>, <code>sorted_keys</code>, <code>to_a</code>, <code>to_json</code>, <code>to_s</code>, <code>transform_values</code>, <code>values</code>, <code>values_at</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"range\"><code>Range</code></h3>\n\n<pre><code class=\"language-ruby\">(1..10).each do |i|\n puts i ** 2\nend\n</code></pre>\n\n<ul>\n <li><strong><code>Range.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>(1..10).methods</code></strong>: <code>!=</code>, <code>==</code>, <code>bsearch</code>, <code>each</code>, <code>first</code>, <code>include?</code>, <code>last</code>, <code>lazy</code>, <code>map</code>, <code>new</code>, <code>size</code>, <code>step</code>, <code>to_a</code>, <code>to_enum</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"block-2\"><code>Block</code></h3>\n\n<pre><code class=\"language-ruby\">b = Block.new do\n 100\nend\n\nb.call #=&gt; 100\n</code></pre>\n\n<ul>\n <li><strong><code>Block.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>(Block.new do end).methods</code></strong>: <code>call</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h2 class=\"-three-column\" id=\"native-class-secondary\">Native class (secondary)</h2>\n\n<h3 id=\"float\"><code>Float</code></h3>\n\n<pre><code class=\"language-ruby\">1.1 + 1.1 # =&gt; -2.2\n2.1 * -2.1 # =&gt; -4.41\n</code></pre>\n\n<p>Float literals like <code>3.14</code> or <code>-273.15</code>. <code>Float</code> class is based on Golang’s <code>float64</code> type.</p>\n\n<ul>\n <li><strong><code>Float.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>3.14.methods</code></strong>: <code>!=</code>, <code>%</code>, <code>*</code>, <code>**</code>, <code>+</code>, <code>-</code>, <code>/</code>, <code>&lt;</code>, <code>&lt;=</code>, <code>&lt;=&gt;</code>, <code>==</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>new</code>, <code>ptr</code>, <code>to_d</code>, <code>to_i</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"decimal\"><code>Decimal</code></h3>\n\n<pre><code class=\"language-ruby\">\"3.14\".to_d # =&gt; 3.14\n\"-0.7238943\".to_d # =&gt; -0.7238943\n\"355/113\".to_d \n# =&gt; 3.1415929203539823008849557522123893805309734513274336283185840\n\na = \"16.1\".to_d\nb = \"1.1\".to_d\ne = \"17.2\".to_d\na + b # =&gt; 0.1\na + b == e # =&gt; true\n\n('16.1'.to_d + \"1.1\".to_d).to_s #=&gt; 17.2\n('16.1'.to_f + \"1.1\".to_f).to_s #=&gt; 17.200000000000003\n</code></pre>\n\n<p>Experimental: the size is arbitrary and internally a fraction from Golang’s <code>big.Rat</code> type. Decimal literal is TBD for now and you can get <code>Decimal</code> number via <code>to_d</code> method from <code>Integer</code>/<code>Float</code>/<code>String</code>.</p>\n\n<ul>\n <li><strong><code>Decimal.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>(1.1).to_d.methods</code></strong>: <code>!=</code>, <code>*</code>, <code>**</code>, <code>+</code>, <code>-</code>, <code>/</code>, <code>&lt;</code>, <code>&lt;=</code>, <code>&lt;=&gt;</code>, <code>==</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>denominator</code>, <code>fraction</code>, <code>inverse</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"regexp\"><code>Regexp</code></h3>\n\n<pre><code class=\"language-ruby\">a = Regexp.new(\"orl\")\na.match?(\"Hello World\") #=&gt; true\na.match?(\"Hello Regexp\") #=&gt; false\n\nb = Regexp.new(\"😏\")\nb.match?(\"🤡 😏 😐\") #=&gt; true\nb.match?(\"😝 😍 😊\") #=&gt; false\n\nc = Regexp.new(\"居(ら(?=れ)|さ(?=せ)|る|ろ|れ(?=[ばる])|よ|(?=な[いかくけそ]|ま[しすせ]|そう|た|て))\")\nc.match?(\"居られればいいのに\") #=&gt; true\nc.match?(\"居ずまいを正す\") #=&gt; false\n</code></pre>\n\n<p>Using <code>/ /</code> is to be implemented.</p>\n\n<ul>\n <li><strong><code>Regexp.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>Regexp.new(\"^aa$\").methods</code></strong>: <code>==</code>, <code>match?</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"matchdata\"><code>MatchData</code></h3>\n\n<pre><code class=\"language-ruby\"># numbered capture\n'abcd'.match(Regexp.new('(b.)'))\n#=&gt; #&lt;MatchData 0:\"bc\" 1:\"bc\"&gt;\n\n# named capture\n'abcd'.match(Regexp.new('a(?&lt;first&gt;b)(?&lt;second&gt;c)'))\n#=&gt; #&lt;MatchData 0:\"abc\" first:\"b\" second:\"c\"&gt;\n\n# converting to hash\n» 'abcd'.match(Regexp.new('a(?&lt;first&gt;b)(?&lt;second&gt;c)')).to_h\n#» { 0: \"abc\", first: \"b\", second: \"c\" }\n</code></pre>\n\n<p>The number keys in the captures are actually <code>String</code> class.The key <code>0</code> is the mached string.</p>\n\n<ul>\n <li><strong><code>MatchData.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>'abcd'.match(Regexp.new('(b.)')).methods</code></strong>: <code>captures</code>, <code>length</code>, <code>new</code>, <code>to_a</code>, <code>to_h</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"file\"><code>File</code></h3>\n\n<pre><code class=\"language-ruby\">f = File.new(\"../test_fixtures/file_test/size.gb\")\nf.name #=&gt; \"../test_fixtures/file_test/size.gb\"\n</code></pre>\n\n<ul>\n <li><strong><code>File.methods</code></strong>: <code>basename</code>, <code>chmod</code>, <code>delete</code>, <code>exist?</code>, <code>extname</code>, <code>join</code>\n <ul>\n <li>the rest: <code>Class.methods</code></li>\n </ul>\n </li>\n <li><strong><code>File.new.methods</code></strong>: <code>basename</code>, <code>chmod</code>, <code>close</code>, <code>delete</code>, <code>exist?</code>, <code>extname</code>, <code>join</code>, <code>name</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h2 class=\"-three-column\" id=\"native-class-golang-oriented\">Native class (Golang-oriented)</h2>\n\n<h3 id=\"gomap\"><code>GoMap</code></h3>\n\n<pre><code class=\"language-ruby\">h = { foo: \"bar\" }\nm = GoMap.new(h) # to pass values to Golang's code\nh2 = m.to_hash\nh2[:foo] #=&gt; \"bar\"\n</code></pre>\n\n<ul>\n <li><strong><code>GoMap.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>GoMap.new.methods</code></strong>: <code>get</code>, <code>set</code>, <code>to_hash</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"channel\"><code>Channel</code></h3>\n\n<pre><code class=\"language-ruby\">c = Channel.new\n\n1001.times do |i| # i start from 0 to 1000\n thread do\n \tc.deliver(i)\n end\nend\n\nr = 0\n1001.times do\n r = r + c.receive\nend\n\nr #=&gt; 500500\n</code></pre>\n\n<p><code>Channel</code> class is to hold channels to work with <code>#thread</code>. See <code>thread</code>.</p>\n\n<ul>\n <li><strong><code>Channel.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>Channel.new.methods</code></strong>: <code>close</code>, <code>deliver</code>, <code>new</code>, <code>receive</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h2 id=\"enumerator--lazy\">Enumerator &amp; lazy</h2>\n\n<p>Pretty new experimental library.</p>\n\n<h3 id=\"lazyenumerator\"><code>LazyEnumerator</code></h3>\n\n<pre><code class=\"language-ruby\"># creating a lazy enumerator\nenumerator = LazyEnumerator.new(ArrayEnumerator.new([1, 2, 3])) do |value|\n\t2 * value\nend\nresult = []\n\nenumerator.each do |value|\n\tresult.push(value)\nend\n\nresult #=&gt; [2, 4, 6]\n</code></pre>\n\n<p>A shorthand <code>#lazy</code> method is also provided in <code>Array</code> and <code>Range</code> by now. See “Tips &amp; tricks” below.</p>\n\n<ul>\n <li><strong><code>LazyEnumerator.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>[1, 2].lazy</code></strong>: <code>each</code>, <code>first</code>, <code>has_next?</code>, <code>initialize</code>, <code>map</code>, <code>next</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"arrayenumerator\"><code>ArrayEnumerator</code></h3>\n\n<pre><code class=\"language-ruby\">iterated_values = []\n\nenumerator = ArrayEnumerator.new([1, 2, 4])\n\nwhile enumerator.has_next? do\n\titerated_values.push(enumerator.next)\nend\n\niterated_values #=&gt; [1, 2, 4]\n</code></pre>\n\n<ul>\n <li><strong><code>ArrayEnumerator.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>ArrayEnumerator.new([1, 2, 3]).methods</code></strong>: <code>has_next?</code>, <code>initialize</code>, <code>next</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"rangeenumerator\"><code>RangeEnumerator</code></h3>\n\n<pre><code class=\"language-ruby\">iterated_values = []\n\nenumerator = RangeEnumerator.new((1..4))\n\nwhile enumerator.has_next? do\n\titerated_values.push(enumerator.next)\nend\n\niterated_values #=&gt; [1, 2, 3, 4]\n</code></pre>\n\n<ul>\n <li><strong><code>RangeEnumerator.methods</code></strong>: the same as <code>Class.methods</code></li>\n <li><strong><code>RangeEnumerator.new(1..2).methods</code></strong>: <code>has_next?</code>, <code>initialize</code>, <code>next</code>\n <ul>\n <li>the rest: <code>Object.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h2 id=\"special-class\">Special class</h2>\n\n<h3 id=\"boolean\"><code>Boolean</code></h3>\n\n<pre><code class=\"language-ruby\">true.class #=&gt; Boolean\nfalse.class #=&gt; Boolean\n</code></pre>\n\n<p>A special class that just to hold <code>true</code> and <code>false</code>. Cannot be instantiate.</p>\n\n<h3 id=\"null\"><code>Null</code></h3>\n\n<pre><code class=\"language-ruby\">nil.class #=&gt; Null\n</code></pre>\n\n<p>A special class that just to hold <code>nil</code>. Cannot be instantiate.</p>\n\n<h3 id=\"method\"><code>Method</code></h3>\n\n<p>(A special dummy class that just holds methods defined by Goby code.)</p>\n\n<h3 id=\"diggable\"><code>Diggable</code></h3>\n\n<p>Provides <code>#dig</code> method. Currently. <code>Array</code> and <code>Hash</code> classes’ instance can be <code>Diggable</code>.</p>\n\n<pre><code class=\"language-ruby\">[1, 2].dig(0, 1) #=&gt; TypeError: Expect target to be Diggable, got Integer\n</code></pre>\n\n<h2 id=\"testing-framework\">Testing framework</h2>\n\n<h3 id=\"spec\"><code>Spec</code></h3>\n\n<pre><code class=\"language-ruby\">require \"spec\"\n\nSpec.describe Spec do\n it \"fails and exit with code 1\" do\n\texpect(1).to eq(2)\n end\nend\n\nSpec.run\n</code></pre>\n\n<ul>\n <li><strong><code>Spec.methods</code></strong>: <code>describe</code>, <code>describes</code>, <code>instance</code>, <code>run</code>\n <ul>\n <li>the rest: <code>Object.methods</code></li>\n </ul>\n </li>\n <li><strong><code>Spec.new.methods</code></strong>: <code>describes</code>, <code>initialize</code>, <code>run</code>, <code>session_successful</code>, <code>session_successful=</code>\n <ul>\n <li>the rest: <code>Hash.new.methods</code></li>\n </ul>\n </li>\n</ul>\n\n<h2 id=\"tips--tricks\">Tips &amp; tricks</h2>\n\n<h3 id=\"showing-methods\">Showing methods</h3>\n\n<pre><code class=\"language-ruby\">» \"string\".methods\n#» [\"!=\", \"*\", \"+\", \"&lt;\", \"&lt;=&gt;\", \"==\", \"=~\", \"&gt;\", \"[]\", \"[]=\", \"capitalize\", \"chop\", \"concat\", \"count\", \"delete\", \"downcase\", \"each_byte\", \"each_char\", \"each_line\", \"empty?\", \"end_with?\", \"eql?\", \"fmt\", \"include?\", \"insert\", \"length\", \"ljust\", \"match\", \"new\", \"replace\", \"replace_once\", \"reverse\", \"rjust\", \"size\", \"slice\", \"split\", \"start_with\", \"strip\", \"to_a\", \"to_bytes\", \"to_d\", \"to_f\", \"to_i\", \"to_s\", \"upcase\", \"!\", \"block_given?\", \"class\", \"exit\", \"instance_eval\", \"instance_variable_get\", \"instance_variable_set\", \"is_a?\", \"methods\", \"nil?\", \"object_id\", \"puts\", \"raise\", \"require\", \"require_relative\", \"send\", \"singleton_class\", \"sleep\", \"thread\"]\n</code></pre>\n\n<h3 id=\"showing-class\">Showing class</h3>\n\n<pre><code class=\"language-ruby\">» \"string\".class\n#» String\n</code></pre>\n\n<h3 id=\"showing-singleton-class\">Showing singleton class</h3>\n\n<pre><code class=\"language-ruby\">» \"moji\".singleton_class\n#» #&lt;Class:#&lt;String:842352325152&gt;&gt;\n\n» \"moji\".class.singleton_class\n#» #&lt;Class:String&gt;\n</code></pre>\n\n<h3 id=\"showing-ancestors\">Showing ancestors</h3>\n\n<pre><code class=\"language-ruby\">» Integer.ancestors\n#» [Integer, Object]\n\n» \"moji\".class.ancestors\n#» [String, Object]\n</code></pre>\n\n<h3 id=\"showing-singleton-classes-ancestors\">Showing singleton classes’ ancestors</h3>\n\n<pre><code class=\"language-ruby\">» \"moji\".class.singleton_class.ancestors\n#» [#&lt;Class:String&gt;, #&lt;Class:Object&gt;, Class, Object]\n</code></pre>\n\n<h3 id=\"showing-objects-id\">Showing object’s id</h3>\n\n<pre><code class=\"language-ruby\">» \"moji\".object_id\n#» 842352977920\n</code></pre>\n\n<h3 id=\"to_json\"><code>#to_json</code></h3>\n\n<pre><code class=\"language-ruby\">h = { a: 1, b: [1, \"2\", [4, 5, nil]]}\nh.to_json # converts hash to JSON\n#=&gt; {\"a\":1, \"b\":[1, \"2\", [4, 5, null]]}\n</code></pre>\n\n<h3 id=\"customize-to_json\">Customize <code>#to_json</code></h3>\n\n<p>Overwrite the <code>#to_json</code> in your class:</p>\n\n<pre><code class=\"language-ruby\">class JobTitle\n def initialize(name)\n @name = name\n end\n\n def to_json\n { title: @name }.to_json\n end\nend\n\nclass Person\n def initialize(name, age)\n @name = name\n @age = age\n @job = JobTitle.new(\"software engineer\")\n end\n\n def to_json\n { name: @name, age: @age, job: @job }.to_json\n end\nend\n\nstan = Person.new(\"Stan\", 23)\nh = { person: stan }\nh.to_json #=&gt; {\"person\":{\"name\":\"Stan\",\"job\":{\"title\":\"software engineer\"},\"age\":23}}\n</code></pre>\n\n<h3 id=\"lazy-enumeration\">Lazy enumeration</h3>\n\n<p>To avoid N + 1 query.</p>\n\n<pre><code class=\"language-ruby\">enumerator = [1, 2, 3].lazy.map do |value|\n\t2 * value\nend\nresult = []\n\nenumerator.each do |value|\n\tresult.push(value)\nend\n\nresult #=&gt; [2, 4, 6]\n</code></pre>\n\n<p>You can call <code>#lazy.map</code> on <code>Array</code>, <code>Range</code>, or <code>JSON</code> objects.</p>\n\n<h2 id=\"styling\">Styling</h2>\n\n<h3 id=\"quick-style-guide\">Quick style guide</h3>\n\n<ul>\n <li>UTF-8 should be used.</li>\n <li>Only two spaces ` ` should be used for one indentation.\n <ul>\n <li>Tab cannot be used for indentation.</li>\n </ul>\n </li>\n <li>For more, follow <a href=\"https://github.com/bbatsov/ruby-style-guide\">RuboCop’s style guide</a> in principle.</li>\n</ul>\n\n<h3 id=\"document-notation\">Document notation</h3>\n\n<ul>\n <li><code>Class#instance_method</code> – use <code>#</code> to represent instance methods in documents</li>\n <li><code>Class.class_method</code></li>\n <li><code>Module.module_method</code></li>\n</ul>\n\n<h3 id=\"syntax-highlighting\">Syntax highlighting</h3>\n\n<p>Ready for Vim and Sublime text. You can also use Ruby’s syntax highlighting so far.</p>\n\n<h2 id=\"references\">References</h2>\n\n<h3 id=\"official\">Official</h3>\n\n<ul>\n <li>Official site: <a href=\"https://goby-lang.org/\">https://goby-lang.org/</a></li>\n <li>Repository: <a href=\"https://github.com/goby-lang/goby/\">https://github.com/goby-lang/goby/</a></li>\n <li>DevHints: <a href=\"https://devhints.io/goby\">https://devhints.io/goby</a> (this page)</li>\n</ul>\n\n<h3 id=\"readings-for-goby-developers\">Readings for Goby developers</h3>\n\n<ul>\n <li><a href=\"https://interpreterbook.com/\">Write an Interpreter in Go</a></li>\n <li><a href=\"https://www.coursera.org/learn/nand2tetris2/home/welcome\">Nand2Tetris II</a></li>\n <li><a href=\"http://patshaughnessy.net/ruby-under-a-microscope\">Ruby under a microscope</a></li>\n <li><a href=\"http://www.atdot.net/yarv/insnstbl.html\">YARV’s instruction table</a></li>\n</ul>\n\n<h3 id=\"jp-resource\">JP resource</h3>\n\n<ul>\n <li><a href=\"https://techracho.bpsinc.jp/hachi8833/2017_11_10/47787\">Goby: Rubyライクな言語（1）Gobyを動かしてみる</a></li>\n <li><a href=\"https://qiita.com/hanachin_/items/efc1c976a4f5749514ef\">Gobyの組み込みクラスにメソッドを追加する方法</a></li>\n</ul>",
"intro_html": "<p>Goby’s language design is based on Ruby language’s, slim and shaped up. Differences in syntax between them is very small.</p>",
"description_html": "",
"tags": null,
"updated": "2018-04-07"
},{
"id": "google-webfonts",
"title": "Google Webfonts",
"url": "/google-webfonts",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"link-tag\">Link tag</h3>\n\n<pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;\n</code></pre>\n\n<h3 id=\"css-import\">CSS import</h3>\n\n<pre><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans);\n@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic|Montserrat:400,700);\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "google_analytics",
"title": "Google Analytics",
"url": "/google_analytics",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"pageview\">Pageview</h3>\n\n<pre><code>// Analytics.js\nga('create', 'UA-XXXX-Y', 'auto');\nga('send', 'pageview');\n</code></pre>\n\n<h3 id=\"track-events\">Track events</h3>\n\n<pre><code>// ga.js\n// [..., category, action, label, value (int), noninteraction (bool)]\n_gaq.push(['_trackEvent', 'Videos', 'Play', 'Birthday video', true])\n_gaq.push(['_trackEvent', 'Projects', 'Donate', 'Project name'])\n_gaq.push(['_trackEvent', 'Accounts', 'Login'])\n\n// Analytics.js\n// , , category, action, label, value (int)\nga('send', 'event', 'button', 'click', 'nav buttons', 4);\n</code></pre>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code>// [..., index, name, value, scope (optional)]\n_gaq.push(['_setCustomVar', 1, 'Logged in', 'Yes', 2]);\n\n// Scope = 1 (visitor), 2 (session), 3 (page, default)\n</code></pre>\n\n<p>https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables\nhttps://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "graphql",
"title": "GraphQL",
"url": "/graphql",
"category": "API",
"keywords": null,
"content_html": "<h2 id=\"intro\">Intro</h2>\n\n<h2 class=\"-three-column\" id=\"queries\">Queries</h2>\n\n<h3 id=\"basic-query\">Basic query</h3>\n\n<pre><code class=\"language-js\">{ status }\n</code></pre>\n\n<h4>↓</h4>\n\n<pre class=\"-setup\"><code class=\"language-js\">{ status: 'available' }\n</code></pre>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre><code class=\"language-js\">{ hero { name height } }\n</code></pre>\n\n<h4 id=\"-1\">↓</h4>\n\n<pre class=\"-setup\"><code class=\"language-js\">{ hero:\n { name: \"Luke Skywalker\",\n height: 1.74 } }\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-js\">{ friends { name } }\n</code></pre>\n\n<h4 id=\"-2\">↓</h4>\n\n<pre class=\"-setup\"><code class=\"language-js\">{ friends:\n [ { name: \"Luke Skywalker\" },\n { name: \"Han Solo\" },\n { name: \"R2D2\" } ] }\n</code></pre>\n\n<p>GraphQL queries look the same for both single items or lists of items.</p>\n\n<h3 id=\"lookups\">Lookups</h3>\n\n<pre><code class=\"language-js\">{\n hero(id: \"1000\") { id name }\n}\n</code></pre>\n\n<h4 id=\"-3\">↓</h4>\n\n<pre class=\"-setup\"><code class=\"language-js\">{ hero:\n { id: \"1000\",\n { name: \"Luke Skywalker\" } }\n</code></pre>\n\n<h3 id=\"aliases\">Aliases</h3>\n\n<pre><code class=\"language-js\">{\n luke: hero(id: \"1000\") { name }\n han: hero(id: \"1001\") { name }\n}\n</code></pre>\n\n<h4 id=\"-4\">↓</h4>\n\n<pre class=\"-setup\"><code class=\"language-js\">{ luke:\n { name: \"Luke Skywalker\" },\n han:\n { name: \"Han Solo\" } }\n</code></pre>\n\n<h3 id=\"operation-names-and-variables\">Operation names and variables</h3>\n\n<h4 id=\"query\">Query</h4>\n<pre><code class=\"language-js\">query FindHero($id: String!) {\n hero(id: $id) { name }\n}\n</code></pre>\n\n<p>Just to make things less ambiguous. Also, to use variables, you need an operation name.</p>\n\n<h4 id=\"variables\">Variables</h4>\n\n<pre><code class=\"language-js\">{ id: '1000' }\n</code></pre>\n\n<h3 id=\"mutations\">Mutations</h3>\n\n<h4 id=\"query-1\">Query</h4>\n\n<pre><code class=\"language-js\">{ createReview($review) { id } }\n</code></pre>\n\n<h4 id=\"variables-1\">Variables</h4>\n\n<pre><code class=\"language-js\">{ review: { stars: 5 } }\n</code></pre>\n\n<h4 id=\"-5\">↓</h4>\n\n<pre><code class=\"language-js\">{ createReview: { id: 5291 } }\n</code></pre>\n\n<p>Mutations are just fields that do something when queried.</p>\n\n<h3 id=\"multiple-types\">Multiple types</h3>\n\n<pre><code class=\"language-js\">{\n search(q: \"john\") {\n id\n ... on User { name }\n ... on Comment { body author { name } }\n }\n}\n</code></pre>\n\n<p>Great for searching.</p>\n\n<h2 id=\"over-http\">Over HTTP</h2>\n\n<h4 id=\"get\">GET</h4>\n\n<pre><code class=\"language-js\">fetch('http://myapi/graphql?query={ me { name } }')\n</code></pre>\n\n<h4 id=\"post\">POST</h4>\n\n<pre><code class=\"language-js\">fetch('http://myapi/graphql', {\n body: JSON.stringify({\n query: '...',\n operationName: '...',\n variables: { ... }\n })\n})\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"schema\">Schema</h2>\n\n<h3 id=\"basic-schemas\">Basic schemas</h3>\n\n<pre><code class=\"language-js\">type Query {\n me: User\n users(limit: Int): [User]\n}\n\ntype User {\n id: ID!\n name: String\n}\n</code></pre>\n\n<p>See: <a href=\"https://raw.githubusercontent.com/sogko/graphql-shorthand-notation-cheat-sheet/master/graphql-shorthand-notation-cheat-sheet.png\">sogko/graphql-shorthand-notation-cheat-sheet</a></p>\n\n<h3 id=\"built-in-types\">Built in types</h3>\n\n<h4 id=\"scalar-types\">Scalar types</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>Int</code></td>\n <td>Integer</td>\n </tr>\n <tr>\n <td><code>Float</code></td>\n <td>Float</td>\n </tr>\n <tr>\n <td><code>String</code></td>\n <td>String</td>\n </tr>\n <tr>\n <td><code>Boolean</code></td>\n <td>Boolean</td>\n </tr>\n <tr>\n <td><code>ID</code></td>\n <td>ID</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"type-definitions\">Type definitions</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>scalar</code></td>\n <td>Scalar type</td>\n </tr>\n <tr>\n <td><code>type</code></td>\n <td>Object type</td>\n </tr>\n <tr>\n <td><code>interface</code></td>\n <td>Interface type</td>\n </tr>\n <tr>\n <td><code>union</code></td>\n <td>Union type</td>\n </tr>\n <tr>\n <td><code>enum</code></td>\n <td>Enumerable type</td>\n </tr>\n <tr>\n <td><code>input</code></td>\n <td>Input object type</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"type-modifiers\">Type modifiers</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>String</code></td>\n <td>Nullable string</td>\n </tr>\n <tr>\n <td><code>String!</code></td>\n <td>Required string</td>\n </tr>\n <tr>\n <td><code>[String]</code></td>\n <td>List of strings</td>\n </tr>\n <tr>\n <td><code>[String]!</code></td>\n <td>Required list of strings</td>\n </tr>\n <tr>\n <td><code>[String!]!</code></td>\n <td>Required list of required strings</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"mutations-1\">Mutations</h3>\n\n<pre><code class=\"language-js\">type Mutation {\n users(params: ListUsersInput) [User]!\n}\n</code></pre>\n\n<h3 id=\"interfaces\">Interfaces</h3>\n\n<pre><code class=\"language-js\">interface Entity {\n id: ID!\n}\n\ntype User implements Entity {\n id: ID!\n name: String\n}\n</code></pre>\n\n<h3 id=\"enums\">Enums</h3>\n\n<pre data-line=\"1,2,3,4\"><code class=\"language-js\">enum DIRECTION {\n LEFT\n RIGHT\n}\n\ntype Root {\n direction: DIRECTION!\n}\n</code></pre>\n\n<h3 id=\"unions\">Unions</h3>\n\n<pre data-line=\"4\"><code class=\"language-js\">type Artist { ··· }\ntype Album { ··· }\n\nunion Result = Artist | Album\n\ntype Query {\n search(q: String) [Result]\n}\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://graphql.org/learn/queries/\">http://graphql.org/learn/queries/</a></li>\n <li><a href=\"http://graphql.org/learn/serving-over-http/\">http://graphql.org/learn/serving-over-http/</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-23"
},{
"id": "gremlins",
"title": "Gremlins.js",
"url": "/gremlins",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"example\">Example</h2>\n\n<h3 id=\"simple-example\">Simple example</h3>\n\n<pre><code class=\"language-html\">&lt;script src='https://cdn.jsdelivr.net/npm/gremlins/dist/gremlins.js'&gt;&lt;/script&gt;\n&lt;script&gt;\ngremlins.createHorde().unleash()\n&lt;/script&gt;\n</code></pre>\n\n<p><img src=\"https://camo.githubusercontent.com/130e101ee69d4d9b6f065df0a0404c861eb5ce18/687474703a2f2f7374617469632e6d61726d656c61622e636f6d2f746f646f2e676966?q=99\" alt=\"\" /></p>\n\n<h3 id=\"custom-gremlins\">Custom gremlins</h3>\n\n<pre data-line=\"3,4,5\"><code class=\"language-js\">gremlins.createHorde()\n .allGremlins()\n .gremlin(function () {\n document.activeElement.blur()\n })\n</code></pre>\n\n<p>Runs the given function at regular intervals.</p>\n\n<h3 id=\"full-example\">Full example</h3>\n\n<pre><code class=\"language-js\">gremlins.createHorde()\n .gremlin(gremlins.species.formFiller())\n .gremlin(gremlins.species.clicker()\n .clickTypes(['click'])\n .canClick(element =&gt; { ··· })\n .showAction((x, y) =&gt; { ··· }))\n .gremlin(gremlins.species.scroller())\n .mogwai(gremlins.mogwais.alert())\n .mogwai(gremlins.mogwais.fps())\n .mogwai(gremlins.mogwais.gizmo().maxErrors(2))\n .unleash()\n</code></pre>\n\n<p>By default, all gremlins and mogwais species are added to the horde. Do it this way to customize gremlins.</p>\n\n<p>See: <a href=\"https://github.com/marmelab/gremlins.js#setting-gremlins-and-mogwais-to-use-in-a-test\">Specifying gremlins</a></p>\n\n<h2 id=\"hooks\">Hooks</h2>\n\n<h3 id=\"before-and-after\">Before and after</h3>\n\n<pre data-line=\"2,6\"><code class=\"language-js\">gremlins.createHorde()\n .before(function () {\n this.log('sync')\n console.profile('gremlins')\n })\n .after(function () {\n this.log('done')\n console.profileEnd()\n })\n</code></pre>\n\n<h3 id=\"asynchronous\">Asynchronous</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">gremlins.createHorde()\n .before(function (done) {\n setTimeout(() =&gt; {\n this.log('async')\n done()\n }, 500)\n })\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://github.com/marmelab/gremlins.js\">marmelab/gremlins.js</a></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/marmelab/gremlins.js\">Gremlins</a> is a JavaScript library to do “monkey-testing” by providing random user input (clicks, scrolls, and so on).</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-11"
},{
"id": "gulp",
"title": "Gulp",
"url": "/gulp",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<ul>\n <li>gulp-ruby-sass</li>\n <li>gulp-autoprefixer</li>\n <li>gulp-minify-css</li>\n <li>gulp-jshint</li>\n <li>gulp-concat</li>\n <li>gulp-uglify</li>\n <li>gulp-imagemin</li>\n <li>gulp-livereload (requires tiny-lr)</li>\n <li>gulp-clean</li>\n <li>gulp-cache</li>\n <li>\n <p>gulp-notify</p>\n </li>\n <li>gulp-header (headers in files)</li>\n <li>gulp-mocha</li>\n <li>gulp-stylus</li>\n <li>gulp-compass</li>\n <li>gulp-nodemon</li>\n <li>gulp-size (displays size)</li>\n</ul>\n\n<h3 id=\"example\">Example</h3>\n\n<pre><code>// gulpfile.js\n// Load plugins\nvar gulp = require('gulp'),\n sass = require('gulp-ruby-sass'),\n autoprefixer = require('gulp-autoprefixer'),\n minifycss = require('gulp-minify-css'),\n jshint = require('gulp-jshint'),\n uglify = require('gulp-uglify'),\n imagemin = require('gulp-imagemin'),\n rename = require('gulp-rename'),\n clean = require('gulp-clean'),\n concat = require('gulp-concat'),\n notify = require('gulp-notify'),\n cache = require('gulp-cache'),\n livereload = require('gulp-livereload'),\n lr = require('tiny-lr'),\n server = lr();\n\n// Styles\ngulp.task('styles', function() {\n return gulp.src('src/styles/main.scss')\n .pipe(sass({ style: 'expanded', }))\n .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))\n .pipe(gulp.dest('dist/styles'))\n .pipe(rename({ suffix: '.min' }))\n .pipe(minifycss())\n .pipe(livereload(server))\n .pipe(gulp.dest('dist/styles'))\n .pipe(notify({ message: 'Styles task complete' }));\n});\n\n// Scripts\ngulp.task('scripts', function() {\n return gulp.src('src/scripts/**/*.js')\n .pipe(jshint('.jshintrc'))\n .pipe(jshint.reporter('default'))\n .pipe(concat('main.js'))\n .pipe(gulp.dest('dist/scripts'))\n .pipe(rename({ suffix: '.min' }))\n .pipe(uglify())\n .pipe(livereload(server))\n .pipe(gulp.dest('dist/scripts'))\n .pipe(notify({ message: 'Scripts task complete' }));\n});\n\n// Images\ngulp.task('images', function() {\n return gulp.src('src/images/**/*')\n .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))\n .pipe(livereload(server))\n .pipe(gulp.dest('dist/images'))\n .pipe(notify({ message: 'Images task complete' }));\n});\n\n// Clean\ngulp.task('clean', function() {\n return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})\n .pipe(clean());\n});\n\n// Default task\ngulp.task('default', ['clean'], function() {\n gulp.start('styles', 'scripts', 'images');\n});\n\n// Watch\ngulp.task('watch', function() {\n\n // Listen on port 35729\n server.listen(35729, function (err) {\n if (err) {\n return console.log(err)\n };\n\n // Watch .scss files\n gulp.watch('src/styles/**/*.scss', ['styles']);\n\n // Watch .js files\n gulp.watch('src/scripts/**/*.js', ['scripts']);\n\n // Watch image files\n gulp.watch('src/images/**/*', ['images']);\n\n });\n\n});\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<p>https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started</p>\n\n<h3 id=\"livereload\">Livereload</h3>\n\n<pre><code>var lr = require('tiny-lr')();\n\nfunction notify (lr, root) {\n return function (event) {\n var fname = require('path').relative(root, event.path);\n lr.changed({ body: { files: [ fname ] }});\n };\n}\n\ngulp.task('livereload', function () {\n lr.listen(35729)\n gulp.watch('public/**/*', notify(lr, __dirname+'/public'));\n});\n\n// Express\napp.use(require('connect-livereload')())\n&lt;!-- livereload --&gt;&lt;script&gt;document.write('&lt;script src=\"'+(location.protocol||'http:')+'//'+(location.hostname||'localhost')+':35729/livereload.js?snipver=1\"&gt;&lt;\\/scr'+'ipt&gt;')&lt;/script&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "haml",
"title": "Haml",
"url": "/haml",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"doctype\">Doctype</h3>\n\n<pre><code class=\"language-haml\">!!! 5\n</code></pre>\n\n<h3 id=\"tags\">Tags</h3>\n\n<pre><code class=\"language-haml\">%html\n %head\n %title\n %body\n %h1 Hello World\n %br/\n</code></pre>\n\n<h3 id=\"classes-and-ids\">Classes and ID’s</h3>\n\n<pre><code class=\"language-haml\">%p.class-example\n.no-tag-defaults-to-div\n%div#butItCanBeIncluded\n</code></pre>\n\n<h3 id=\"inline-attributes\">Inline Attributes</h3>\n\n<p>Either hash syntax works</p>\n\n<pre><code class=\"language-haml\">%meta{ name: \"viewport\", content: \"width=device-width, initial-scale=1.0\" }\n%input{ :type =&gt; \"text\", :required =&gt; true }\n</code></pre>\n\n<h3 id=\"ruby\">Ruby</h3>\n\n<pre><code class=\"language-haml\">-# This is a comment\n-# Anything starting with a hyphen signals to Haml that Ruby is coming\n- @arr = [1, 2, 3]\n- @str = \"test\"\n-# Equal signals output\n= render partial: \"shared/header\"\n= yield\n= link_to page_url\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "handlebars.js",
"title": "Handlebars.js",
"url": "/handlebars.js",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"helpers\">Helpers</h3>\n\n<pre><code class=\"language-js\">Handlebars.registerHelper('link_to', function() {\n return \"&lt;a href='\" + this.url + \"'&gt;\" + this.body + \"&lt;/a&gt;\";\n})\n</code></pre>\n\n<pre><code class=\"language-js\">var context = { posts: [{url: \"/hello-world\", body: \"Hello World!\"}] }\nvar source = \"&lt;ul&gt;{{#posts}}&lt;li&gt;{{{link_to}}}&lt;/li&gt;{{/posts}}&lt;/ul&gt;\"\n</code></pre>\n\n<pre><code class=\"language-js\">var template = Handlebars.compile(source)\ntemplate(context)\n</code></pre>\n\n<p>Would render:</p>\n\n<pre><code class=\"language-html\">&lt;ul&gt;\n &lt;li&gt;&lt;a href='/hello-world'&gt;Hello World!&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "harvey.js",
"title": "Harvey.js",
"url": "/harvey.js",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-js\">Harvey.attach('(min-width: 600px)', {\n setup: function () {\n // Called on first enter\n },\n on: function () {\n // Called on every enter\n },\n off: function () {\n // Called on every exit\n }\n})\n</code></pre>\n\n<h3 id=\"deprecated\">Deprecated</h3>\n\n<p>Harvey.js hasn’t been updated in a while, as of time of writing. Consider <a href=\"https://github.com/WickyNilliams/enquire.js\">enquire.js</a> instead.</p>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"http://harvesthq.github.io/harvey\">http://harvesthq.github.io/harvey</a></li>\n</ul>",
"intro_html": "<p><a href=\"http://harvesthq.github.io/harvey/\">Harvey.js</a> helps you build responsive interfaces.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "heroku",
"title": "Heroku",
"url": "/heroku",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"create---create-an-app\"><code>create</code> - Create an app</h3>\n\n<pre><code class=\"language-bash\">heroku create sushi\n</code></pre>\n\n<pre><code class=\"language-bash\">git push heroku master\n</code></pre>\n\n<h3 id=\"access---collaboration\"><code>access</code> - Collaboration</h3>\n\n<h4 id=\"manage-collaborators\">Manage collaborators</h4>\n\n<pre><code class=\"language-bash\">heroku access # List\nheroku access:add me@xy.com\nheroku access:remove me@xy.com\n</code></pre>\n\n<h4 id=\"transfer-to-another-owner\">Transfer to another owner</h4>\n\n<pre><code class=\"language-bash\">heroku apps:transfer new@owner.com\n</code></pre>\n\n<h3 id=\"logs---show-logs\"><code>logs</code> - Show logs</h3>\n\n<pre><code class=\"language-bash\">heroku logs\nheroku logs -t # --tail (stream)\nheroku logs -s app # --source (only on app logs)\n</code></pre>\n\n<h3 id=\"releases\"><code>releases</code></h3>\n\n<pre><code class=\"language-bash\">heroku releases\nheroku releases:info v25\nheroku rollback\n</code></pre>\n\n<h3 id=\"pg---postgresql\"><code>pg</code> - PostgreSQL</h3>\n\n<h4 id=\"start-a-database\">Start a database</h4>\n\n<pre><code class=\"language-bash\">heroku addons:add heroku-postgresql\n</code></pre>\n\n<h4 id=\"enable-backups\">Enable backups</h4>\n\n<pre><code class=\"language-bash\">heroku addons:add pgbackups:auto-month\n</code></pre>\n\n<p>See: <a href=\"https://devcenter.heroku.com/articles/heroku-postgresql\">Heroku PostgreSQL</a> <em>(devcenter.heroku.com)</em></p>\n\n<h3 id=\"config---environment-var-configuration\"><code>config</code> - Environment var configuration</h3>\n\n<h4 id=\"listing\">Listing</h4>\n\n<pre><code class=\"language-bash\">heroku config # List\nheroku config -s # List in shell format\n</code></pre>\n\n<h4 id=\"getting\">Getting</h4>\n\n<pre><code class=\"language-bash\">heroku config:get KEY\n</code></pre>\n\n<h4 id=\"setting\">Setting</h4>\n\n<pre><code class=\"language-bash\">heroku config:set KEY=val\nheroku config:set KEY1=val KEY2=val ...\n</code></pre>\n\n<pre><code class=\"language-bash\">heroku config:unset KEY1\n</code></pre>\n\n<h3 id=\"apps---applications\"><code>apps</code> - Applications</h3>\n\n<pre><code class=\"language-bash\">heroku apps # list\nheroku apps:create [NAME]\nheroku apps:destroy --app APP\nheroku apps:info\nheroku apps:open # open in browser\nheroku apps:rename NEWNAME\n</code></pre>\n\n<h3 id=\"maintenance\"><code>maintenance</code></h3>\n\n<pre><code class=\"language-bash\">heroku maintenance:on\n</code></pre>\n\n<pre><code class=\"language-bash\">heroku maintenance:off\n</code></pre>\n\n<h2 id=\"processes\">Processes</h2>\n\n<h3 id=\"ps---managing-processes\"><code>ps</code> - Managing processes</h3>\n\n<pre><code class=\"language-bash\">heroku ps # list\nheroku ps:scale web=1 # spawn more dynos\n</code></pre>\n\n<h3 id=\"restart\"><code>restart</code></h3>\n\n<pre><code class=\"language-bash\">heroku restart\n</code></pre>\n\n<h3 id=\"run---running-tasks\"><code>run</code> - Running tasks</h3>\n\n<pre><code class=\"language-bash\">heroku run bash\nheroku run console # Rails console\nheroku run rake assets:precompile\n</code></pre>\n\n<h2 id=\"domains\">Domains</h2>\n\n<h3 id=\"domains---custom-domains\"><code>domains</code> - Custom domains</h3>\n\n<h4 id=\"add-both\">Add both!</h4>\n\n<pre><code class=\"language-bash\">heroku domains:add example.com\nheroku domains:add www.example.com\n</code></pre>\n\n<h4 id=\"removing\">Removing</h4>\n\n<pre><code class=\"language-bash\">heroku domains:clear\nheroku domains:remove example.com\n</code></pre>\n\n<p>See: <a href=\"https://devcenter.heroku.com/articles/custom-domains\">Custom domains</a> <em>(devcenter.heroku.com)</em></p>\n\n<h3 id=\"wildcard-domains\">Wildcard domains</h3>\n\n<pre><code class=\"language-bash\">heroku addons:add wildcard_domains\n</code></pre>\n\n<pre><code class=\"language-bash\">*.yourdomain.com =&gt; heroku.com\n</code></pre>\n\n<h2 id=\"other-tricks\">Other tricks</h2>\n\n<h3 id=\"htpasswd-for-php-apps\">htpasswd (for PHP apps)</h3>\n\n<p>Create an <code>.htaccess</code> file in the webroot:</p>\n\n<pre><code class=\"language-bash\">AuthUserFile /app/www/.htpasswd\nAuthType Basic\nAuthName \"Restricted Access\"\nRequire valid-user\n</code></pre>\n\n<p>Create a <code>.htpasswd</code> file:</p>\n\n<pre><code class=\"language-bash\">$ htpasswd -c .htpasswd [username]\n</code></pre>\n\n<p>See: <a href=\"https://gist.github.com/3316425\">gist.github.com</a></p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://addons.heroku.com/\">https://addons.heroku.com/</a></li>\n <li><a href=\"https://devcenter.heroku.com/\">https://devcenter.heroku.com/</a></li>\n</ul>",
"intro_html": "<p><a href=\"http://heroku.com/\">Heroku</a> is a web hosting platform supporting many languages, and this guide is a reference to Heroku’s <a href=\"http://heroku.com/\">command-line interface</a>.</p>",
"description_html": "<p>A one-page reference to common Heroku-CLI commands.</p>",
"tags": null,
"updated": "2017-10-11"
},{
"id": "hledger",
"title": "Hledger",
"url": "/hledger",
"category": "Ledger",
"keywords": null,
"content_html": "<h2 id=\"reporting\">Reporting</h2>\n\n<pre class=\"large terminal\"><code>hledger bal {query}\nhledger reg {query}\n</code></pre>\n\n<h2 id=\"query\">Query</h2>\n\n<p>Queries are used on all commands (<code>bal</code>, <code>reg</code>, etc). <a href=\"http://hledger.org/manual.html#queries\">(docs)</a></p>\n\n<pre><code>Assets # An account (regex)\nacct:Assets # same\n^Assets # Starting with Assets (eg, not 'Expenses:Assets')\n\nacctonly:A # no subaccounts\n\namt:2000 # amount (in absolute value)\namt:&lt;200 # amount comparison (in absolute value)\namt:&lt;+200 # amount comparison\n # also: &lt;=, &gt;, &gt;=\n\ndesc:REGEX # description\ncode:REGEX # transaction code (check number?)\ntag:REGEX\ncur:'\\$'\n\nreal: # real posts\nreal:0 # virtual posts\n\ndepth:N # --depth 2\nnot:... # eg, not:status:!\n</code></pre>\n\n<h3 id=\"filter-by-statustype\">Filter by status/type</h3>\n\n<pre><code>real:1 # -R, --real, no virtuals\nstatus:! # --pending\nstatus:* # -C, --cleared\nstatus: # --uncleared\n</code></pre>\n\n<h3 id=\"periods\">Periods</h3>\n<p>For dates and intervals (see above).</p>\n\n<pre><code>date:2015/01/01\ndate:2015/01/01- # -b, --begin\ndate:-2015/01/01 # -e, --end\ndate2:PERIODEXPR\n</code></pre>\n\n<pre><code>-p, --period=...\n -p \"2009/01/01\"\n -p \"2009/01/01 to 2009/12/31\"\n -p \"2009/01/01to2009/12/31\" # spaces optional\n -p \"1/1 to 12/31\"\n -p \"to 2009\"\n -p \"weekly\" # -W, --weekly\n -p \"weekly 2009/01/01 to 2009/12/31\"\n</code></pre>\n\n<h3 id=\"intervals\">Intervals</h3>\n<p>Used on all commands (<code>bal</code>, <code>reg</code>, etc). Displays in multi-column mode. In <code>ledger-cli</code>, only <code>reg</code> is supported. Can also specified via <code>-p</code> (period).</p>\n\n<pre><code>-D, --daily\n-W, --weekly\n-M, --monthly\n-Q, --quarterly\n-Y, --yearly\n</code></pre>\n\n<h3 id=\"smart-dates\">Smart dates</h3>\n<p>Used for <code>--period</code>, <code>--begin</code> and <code>--end</code> (<code>-p</code> <code>-b</code> <code>-e</code>).</p>\n\n<pre><code>-p 2015/01/01\n-p 2015/01\n-p 2015\n-p january\n-p jan\n-p 05/25\n</code></pre>\n\n<pre><code>-b today\n-b yesterday\n-e tomorrow\n</code></pre>\n\n<pre><code>-p this week\n-p last month\n-p this year\n</code></pre>\n\n<h2 id=\"display-formats\">Display formats</h2>\n\n<pre><code> --tree # only in bal\n --flat\n\n --depth 2 # collapse those under this depth\n --drop 1 # drop top-level accounts\n-B, --cost # convert to default currency\n-E, --empty # don't strip out $0 accounts\n --date2 # use date2 when available\n</code></pre>\n\n<h2 id=\"multi-column-mode\">Multi-column mode</h2>\n<p>When used with intervals (like <code>--weekly</code>):</p>\n\n<pre><code>-T, --row-total\n-N, --no-total\n</code></pre>\n\n<p>Also: (only in <code>bal</code>)</p>\n\n<pre><code> --cumulative # show ending balance per period\n-I, --historical # like --cumulative but only for --begin\n-A, --average\n</code></pre>\n\n<h2 id=\"accounts\">Accounts</h2>\n\n<pre><code>hledger accounts [--tree]\n</code></pre>\n\n<h2 id=\"other-commands\">Other commands</h2>\n\n<pre><code>hledger balancesheet # bs\nhledger incomestatement # is\nhledger cashflow # cf\nhledger print\nhledger activity\nhledger stats\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<pre><code># Current balance\n hledger bal Assets\n hledger balancesheet\n\n hledger balancesheet Assets [--cleared --cost --empty -e tomorrow]\n # ...discard future stuff; convert foreign currencies\n\n# Monthly changes in assets\n hledger bal Assets Liabilities --monthly --tree --historical [--cleared --cost --empty -e tomorrow]\n\n# Weekly expenses\n hledger bal Expenses --weekly --average --tree -b 'last month' [--cleared --cost --empty -e tomorrow]\n</code></pre>\n\n<h2 id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"http://hledger.org/manual.html\">http://hledger.org/manual.html</a></li>\n <li><a href=\"http://ledger-cli.org/3.0/doc/ledger3.html\">http://ledger-cli.org/3.0/doc/ledger3.html</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "homebrew",
"title": "Homebrew",
"url": "/homebrew",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"commands\">Commands</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>brew install git</code></td>\n <td>Install a package</td>\n </tr>\n <tr>\n <td><code>brew uninstall git</code></td>\n <td>Remove/Uninstall a package</td>\n </tr>\n <tr>\n <td><code>brew upgrade git</code></td>\n <td>Upgrade a package</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>brew unlink git</code></td>\n <td>Unlink</td>\n </tr>\n <tr>\n <td><code>brew link git</code></td>\n <td>Link</td>\n </tr>\n <tr>\n <td><code>brew switch git 2.5.0</code></td>\n <td>Change versions</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>brew list --versions git</code></td>\n <td>See what versions you have</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"more-package-commands\">More package commands</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>brew info git</code></td>\n <td>List versions, caveats, etc</td>\n </tr>\n <tr>\n <td><code>brew cleanup git</code></td>\n <td>Remove old versions</td>\n </tr>\n <tr>\n <td><code>brew edit git</code></td>\n <td>Edit this formula</td>\n </tr>\n <tr>\n <td><code>brew cat git</code></td>\n <td>Print this formula</td>\n </tr>\n <tr>\n <td><code>brew home git</code></td>\n <td>Open homepage</td>\n </tr>\n <tr>\n <td><code>brew search git</code></td>\n <td>Search for formulas</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"global-commands\">Global commands</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>brew update</code></td>\n <td>Update brew and cask</td>\n </tr>\n <tr>\n <td><code>brew upgrade</code></td>\n <td>Upgrade all packages</td>\n </tr>\n <tr>\n <td><code>brew list</code></td>\n <td>List installed</td>\n </tr>\n <tr>\n <td><code>brew outdated</code></td>\n <td>What’s due for upgrades?</td>\n </tr>\n <tr>\n <td><code>brew doctor</code></td>\n <td>Diagnose brew issues</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"brew-cask-commands\">Brew Cask commands</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>brew cask install firefox</code></td>\n <td>Install the Firefox browser</td>\n </tr>\n <tr>\n <td><code>brew cask list</code></td>\n <td>List installed applications</td>\n </tr>\n </tbody>\n</table>\n\n<p>Cask commands are used for interacting with graphical applications.</p>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"https://brew.sh/\">Homebrew homepage</a> <em>brew.sh</em></li>\n <li><a href=\"https://docs.brew.sh\">Homebrew docs</a> <em>docs.brew.sh</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "html-email",
"title": "HTML emails",
"url": "/html-email",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"properties-to-avoid\">Properties to avoid</h3>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Where</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>position</code></td>\n <td>(Outlook, Gmail, Yahoo)</td>\n </tr>\n <tr>\n <td><code>display</code></td>\n <td>(Outlook, Gmail)</td>\n </tr>\n <tr>\n <td><code>float</code></td>\n <td>(Outlook)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>height</code></td>\n <td>(Outlook)</td>\n </tr>\n <tr>\n <td><code>width</code> <em>in p/div</em></td>\n <td>(Outlook)</td>\n </tr>\n <tr>\n <td><code>padding</code> <em>in p/div</em></td>\n <td>(Outlook)</td>\n </tr>\n <tr>\n <td><code>background</code></td>\n <td>(Outlook, Gmail)</td>\n </tr>\n <tr>\n <td><code>min-width</code></td>\n <td>(Outlook)</td>\n </tr>\n <tr>\n <td><code>max-width</code></td>\n <td>(Outlook)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>opacity</code></td>\n <td>(Outlook, Gmail, Yahoo)</td>\n </tr>\n <tr>\n <td><code>box-shadow</code></td>\n <td>(Outlook, Gmail, Yahoo)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>rgba()</code></td>\n <td>(Outlook)</td>\n </tr>\n <tr>\n <td><code>data-uri</code></td>\n <td>(all webmail)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"selectors-to-avoid\">Selectors to avoid</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>E[attr]</code></td>\n <td>(Outlook, Gmail)</td>\n </tr>\n <tr>\n <td><code>E:nth-child(n)</code></td>\n <td>(Outlook, Gmail)</td>\n </tr>\n <tr>\n <td><code>::before</code> <em>and</em> <code>::after</code></td>\n <td>(Outlook, Yahoo, Gmail)</td>\n </tr>\n <tr>\n <td><code>E F</code></td>\n <td>(Gmail)</td>\n </tr>\n <tr>\n <td><code>E + F</code>, <code>E &gt; F</code> <em>etc</em></td>\n <td>(Outlook, Gmail)</td>\n </tr>\n </tbody>\n</table>\n\n<p>Inline your CSS as much as possible.</p>\n\n<h3 id=\"basic-layout\">Basic layout</h3>\n\n<pre><code class=\"language-html\">&lt;table cellpadding=\"0\" cellspacing=\"0\"&gt;\n &lt;tr&gt;\n &lt;td width=\"auto\"&gt;&lt;/td&gt;\n &lt;td width=\"600\" background=\"#ffffff\"&gt;\n ···\n &lt;/td&gt;\n &lt;td width=\"auto\"&gt;&lt;/td&gt;\n &lt;/tr&gt;\n&lt;/table&gt;\n</code></pre>\n\n<h3 id=\"responsive\">Responsive</h3>\n\n<pre><code class=\"language-html\">&lt;style&gt;\n@media only screen and (max-device-width: 480px)\n&lt;/style&gt;\n</code></pre>\n\n<p><code>&lt;style&gt;</code> is supported in the head and body by everything except Gmail. Only use them for responsive styles.</p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://www.campaignmonitor.com/css/\">CSS support matrix</a> <em>campaignmonitor.com</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-29"
},{
"id": "html-input",
"title": "Input tag",
"url": "/html-input",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"input\">Input</h3>\n\n<pre><code class=\"language-html\"> &lt;input ...\n disabled\n required\n checked\n</code></pre>\n\n<pre><code class=\"language-html\"> autofocus\n</code></pre>\n\n<pre><code class=\"language-html\"> autocomplete='off' &lt;!-- autocomplete --&gt;\n autocompletetype='cc-exp'\n autocapitalize='off' &lt;!-- for mobiles --&gt;\n pattern='\\d*' &lt;!-- force numeric input in iOS --&gt;\n</code></pre>\n\n<h3 id=\"input-types\">Input types</h3>\n\n<h4 id=\"text\">Text</h4>\n\n<ul class=\"-four-column\">\n <li>email</li>\n <li>hidden</li>\n <li><strong>password</strong></li>\n <li>tel</li>\n <li><strong>text</strong></li>\n <li>search</li>\n</ul>\n\n<h4 id=\"time\">Time</h4>\n\n<ul class=\"-four-column\">\n <li>date</li>\n <li>time</li>\n</ul>\n\n<h4 id=\"time-not-widely-supported\">Time (not widely supported)</h4>\n\n<ul class=\"-four-column\">\n <li>month</li>\n <li>week</li>\n <li>datetime</li>\n <li>datetime-local</li>\n</ul>\n\n<h4 id=\"etc\">Etc</h4>\n\n<ul class=\"-four-column\">\n <li><strong>file</strong></li>\n <li><strong>radio</strong></li>\n <li><strong>checkbox</strong></li>\n</ul>\n\n<h4 id=\"buttons\">Buttons</h4>\n\n<ul class=\"-four-column\">\n <li>button</li>\n <li>reset</li>\n <li>submit</li>\n <li>image</li>\n</ul>\n\n<h4 id=\"numeric\">Numeric</h4>\n\n<ul class=\"-four-column\">\n <li>number</li>\n <li>range</li>\n</ul>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"dates\">Dates</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>type='date'</code></td>\n <td><input type=\"date\" /></td>\n </tr>\n <tr>\n <td><code>type='time'</code></td>\n <td><input type=\"time\" /></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"datetime\">Datetime</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>type='datetime'</code></td>\n <td><input type=\"datetime\" /></td>\n </tr>\n <tr>\n <td><code>type='datetime-local'</code></td>\n <td><input type=\"datetime-local\" /></td>\n </tr>\n </tbody>\n</table>\n\n<p><code>datetime</code> and <code>datetime-local</code> fields are not widely supported.</p>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>type='number'</code></td>\n <td><input type=\"number\" /></td>\n </tr>\n <tr>\n <td><code>type='range'</code></td>\n <td><input type=\"range\" /></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"text-1\">Text</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>type='text'</code></td>\n <td><input type=\"text\" /></td>\n </tr>\n <tr>\n <td><code>type='password'</code></td>\n <td><input type=\"password\" /></td>\n </tr>\n <tr>\n <td><code>type='search'</code></td>\n <td><input type=\"search\" /></td>\n </tr>\n <tr>\n <td><code>type='tel'</code></td>\n <td><input type=\"tel\" /></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-29"
},{
"id": "html-meta",
"title": "HTML meta tags",
"url": "/html-meta",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"meta-tags\">Meta tags</h3>\n\n<pre><code class=\"language-html\">&lt;meta charset='utf-8'&gt;\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;!-- title --&gt;\n&lt;title&gt;···&lt;/title&gt;\n&lt;meta property='og:title' content='···'&gt;\n&lt;meta name='twitter:title' content='···'&gt;\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;!-- url --&gt;\n&lt;link rel='canonical' href='http://···'&gt;\n&lt;meta property='og:url' content='http://···'&gt;\n&lt;meta name='twitter:url' content='http://···'&gt;\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;!-- description --&gt;\n&lt;meta name='description' content='···'&gt;\n&lt;meta property='og:description' content='···'&gt;\n&lt;meta name='twitter:description' content='···'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- image --&gt;\n&lt;meta property=\"og:image\" content=\"http://···\"&gt;\n&lt;meta name=\"twitter:image\" content=\"http://···\"&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- ua --&gt;\n&lt;meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- viewport --&gt;\n&lt;meta name='viewport' content='width=device-width'&gt;\n&lt;meta name='viewport' content='width=1024'&gt;\n</code></pre>\n\n<h3 id=\"more-opengraph\">More opengraph</h3>\n\n<pre><code class=\"language-html\">&lt;meta property='og:site_name' content='···'&gt;\n&lt;meta property='og:type' content='website'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;meta property='fb:app_id' content='···'&gt;\n&lt;meta property='fb:admins' content='UID1,UID2'&gt;\n&lt;!-- ···unless there's app_id --&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;meta property='og:audio' content='http://···/theme.mp3'&gt;\n&lt;meta property='og:video' content='http://···/trailer.swf'&gt;\n</code></pre>\n\n<p>See: <a href=\"https://developers.facebook.com/docs/opengraphprotocol/\">OpenGraph protocol</a> <em>(developers.facebook.com)</em></p>\n\n<h3 id=\"opengraph-for-articles\">Opengraph for articles</h3>\n\n<ul>\n <li><code>article:published_time</code></li>\n <li><code>article:modified_time</code></li>\n <li><code>article:expiration_time</code></li>\n <li><code>article:author</code></li>\n <li><code>article:section</code></li>\n <li><code>article:tag</code></li>\n</ul>\n\n<h3 id=\"apple-only\">Apple-only</h3>\n\n<pre><code class=\"language-html\">&lt;meta name='format-detection' content='telephone=no'&gt;\n</code></pre>\n\n<h2 id=\"progressive-web-apps\">Progressive web apps</h2>\n\n<h3 id=\"add-to-homescreen\">Add to homescreen</h3>\n\n<pre><code class=\"language-html\">&lt;meta name='mobile-web-app-capable' content='yes'&gt;\n&lt;meta name='apple-mobile-web-app-capable' content='yes'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;meta name='apple-mobile-web-app-status-bar-style' content='black'&gt;\n&lt;!-- black | black-translucent | default --&gt;\n</code></pre>\n\n<h3 id=\"theme-color\">Theme color</h3>\n\n<pre><code class=\"language-html\">&lt;meta name='theme-color' content='#ff00ff'&gt;\n</code></pre>\n\n<p>Android-only.\nSee: <a href=\"https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android\">Theme color</a></p>\n\n<h3 id=\"manifest\">Manifest</h3>\n\n<pre><code class=\"language-html\">&lt;link rel='manifest' href='/manifest.json'&gt;\n</code></pre>\n\n<p>Android-only.\nSee: <a href=\"https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/\">Manifest</a></p>\n\n<h3 id=\"icons\">Icons</h3>\n\n<pre><code class=\"language-html\">&lt;!-- Minimal --&gt;\n&lt;link rel='icon' type='image/png' href='favicon@32.png'&gt;\n&lt;link rel='icon' sizes='192x192' href='icon@192.png'&gt;\n&lt;link rel='apple-touch-icon' href='icon@152.png'&gt;\n&lt;meta name='msapplication-square310x310logo' content='icon@310.png'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- Apple --&gt;\n&lt;link rel='apple-touch-icon' href='touch-icon-iphone.png'&gt;\n&lt;link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'&gt;\n&lt;link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'&gt;\n&lt;link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- Microsoft --&gt;\n&lt;meta name='msapplication-square70x70logo' content='icon_smalltile.png'&gt;\n&lt;meta name='msapplication-square150x150logo' content='icon_mediumtile.png'&gt;\n&lt;meta name='msapplication-wide310x150logo' content='icon_widetile.png'&gt;\n</code></pre>\n\n<p>Chrome on Android recommends <a href=\"https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android\">192x192</a>.\nSee: <a href=\"https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/\">Icons</a></p>\n\n<h2 class=\"-one-column\" id=\"reference\">Reference</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"https://dev.twitter.com/cards\">https://dev.twitter.com/cards</a></li>\n <li><a href=\"https://developers.facebook.com/docs/opengraphprotocol/#types\">https://developers.facebook.com/docs/opengraphprotocol/#types</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "html-microformats",
"title": "Microformats",
"url": "/html-microformats",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"author\">Author</h3>\n\n<pre><code class=\"language-html\">&lt;span class=\"entry-author\" itemprop=\"author\" itemscope=\"itemscope\" itemtype=\"http://schema.org/Person\"&gt;\n &lt;a href=\"http://AUTHORPAGE\" class=\"entry-author-link\" itemprop=\"url\" rel=\"author\"&gt;\n &lt;span class=\"entry-author-name\" itemprop=\"name\"&gt;AUTHORNAME&lt;/span&gt;\n &lt;/a&gt;\n&lt;/span&gt;\n</code></pre>\n\n<h3 id=\"time\">Time</h3>\n\n<pre><code class=\"language-html\">&lt;time class=\"entry-time\" itemprop=\"datePublished\" datetime=\"2009-02-09T20:04:00+00:00\"&gt;February 9, 2009&lt;/time&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "html-share",
"title": "Share links",
"url": "/html-share",
"category": "HTML",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"share-links\">Share links</h2>\n\n<p class=\"-setup\">Facebook:</p>\n\n<pre><code class=\"language-html\">&lt;a href='https://www.facebook.com/sharer/sharer.php?u=URL' target='share'&gt;\n</code></pre>\n\n<p class=\"-setup\">Twitter:</p>\n\n<pre><code class=\"language-html\">&lt;a href='https://twitter.com/intent/tweet?text=DESCRIPTION+URL' target='share'&gt;\n</code></pre>\n\n<p class=\"-setup\">Google Plus:</p>\n\n<pre><code class=\"language-html\">&lt;a href='https://plus.google.com/share?url=URL' target='share'&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-04"
},{
"id": "html",
"title": "HTML",
"url": "/html",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"head-stuff\">Head stuff</h3>\n\n<pre><code>&lt;link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\"&gt;\n&lt;link rel=\"shortcut icon\" type=\"image/png\" href=\"/favicon.png\"&gt;\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"&gt;\n</code></pre>\n\n<h3 id=\"iphone-viewport\">iPhone viewport</h3>\n\n<pre><code>&lt;meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=1.0\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n&lt;meta name=\"viewport\" content=\"width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\"/&gt; &lt;!-- full example --&gt;\n</code></pre>\n\n<h3 id=\"default-opengraph-meta-tags\">Default OpenGraph meta tags</h3>\n\n<pre><code>&lt;meta content=\"...\" name=\"description\"&gt;\n&lt;meta content=\"...\" property=\"og:description\"&gt;\n&lt;meta content=\"http://.../preview.jpg\" property=\"og:image\"&gt;\n&lt;meta content=\"Hello There\" property=\"og:title\"&gt;\n&lt;meta content=\"Hello There\" property=\"og:site_name\"&gt;\n&lt;meta content=\"hellothere\" property=\"fb:admins\"&gt;\n&lt;meta content=\"website\" property=\"og:type\"&gt;\n</code></pre>\n\n<h3 id=\"webfonts\">Webfonts</h3>\n\n<pre><code>&lt;script&gt;WebFontConfig={ },function(a,b){var c=a.createElement(b);c.src=\"//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js\",c.async=1;var d=a.getElementsByTagName(b)[0];d.parentNode.insertBefore(c,d)}(document,\"script\")&lt;/script&gt;\n\n// {typekit{id:\"...\"}}\n// {google:{families:['Exo:400']}}\n</code></pre>\n\n<h3 id=\"google-analytics\">Google Analytics</h3>\n\n<pre><code>&lt;script&gt;location.hostname.match(/helloworld\\.com/)&amp;&amp;(_gaq=[[\"_setAccount\",\"UA-XXXXX-1\"],[\"_trackPageview\"]],function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.async=1,c.src=(\"https:\"==location.protocol?\"//ssl\":\"//www\")+\".google-analytics.com/ga.js\",d.parentNode.insertBefore(c,d)}(document,\"script\"))&lt;/script&gt;\n</code></pre>\n\n<h3 id=\"fbtwitter\">FB/Twitter</h3>\n\n<pre><code>&lt;div id=\"fb-root\"&gt;&lt;/div&gt;&lt;script&gt;fbAsyncInit=function(){FB.init({\"appId\":\"___APPIDGOESHERE___\",\"status\":true,\"cookie\":true,\"xfbml\":true})};!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src='//connect.facebook.net/en_US/all.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','facebook-jssdk');&lt;/script&gt;\n\n&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src=\"//platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");&lt;/script&gt;\n</code></pre>\n\n<h3 id=\"html5-shiv-for-ie8\">HTML5 Shiv for IE8</h3>\n\n<pre><code>&lt;!--[if lte IE 8]&gt;&lt;script src='//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js'&gt;&lt;/script&gt;&lt;![endif]--&gt;\n</code></pre>\n\n<h3 id=\"h5bp-html-tag-ie8-and-ie9-only\">H5BP HTML tag (IE8 and IE9 only)</h3>\n\n<pre><code>&lt;!--[if lte IE 8]&gt;&lt;html class=\"ie8\"&gt;&lt;![endif]--&gt;&lt;!--[if IE 9]&gt;&lt;html class=\"ie9\"&gt;&lt;![endif]--&gt;&lt;!--[if gt IE 9]&gt;&lt;!--&gt;\n&lt;html&gt;&lt;!--&lt;![endif]--&gt;\n</code></pre>\n\n<h3 id=\"touch-icons\">Touch icons</h3>\n\n<ul>\n <li>apple-touch-icon-precomposed.png</li>\n <li>apple-touch-icon-57x57-precomposed.png</li>\n <li>apple-touch-icon-72x72-precomposed.png</li>\n <li>apple-touch-icon-114x114-precomposed.png</li>\n <li>apple-touch-icon-144x144-precomposed.png</li>\n</ul>\n\n<h3 id=\"icons\">Icons</h3>\n\n<pre><code>&lt;link rel=\"shortcut icon\" type=\"image/png\" href=\"favicon.png\"&gt;\n&lt;link href=\"apple-touch-icon-precomposed.png\" rel=\"apple-touch-icon\"&gt;\n&lt;link href=\"apple-touch-icon-57x57-precomposed.png\" size=\"57x57\" rel=\"apple-touch-icon\"&gt;\n&lt;link href=\"apple-touch-icon-72x72-precomposed.png\" size=\"72x72\" rel=\"apple-touch-icon\"&gt;\n&lt;link href=\"apple-touch-icon-114x114-precomposed.png\" size=\"114x114\" rel=\"apple-touch-icon\"&gt;\n&lt;link href=\"apple-touch-icon-144x144-precomposed.png\" size=\"144x144\" rel=\"apple-touch-icon\"&gt;\n</code></pre>\n\n<p>Only do this if you’re not placing the site in the root!</p>\n\n<h3 id=\"h5bp-html-tag\">H5BP HTML tag</h3>\n\n<pre><code>&lt;!--[if lt IE 7 ]&gt; &lt;html class=\"ie6\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 7 ]&gt; &lt;html class=\"ie7\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 8 ]&gt; &lt;html class=\"ie8\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 9 ]&gt; &lt;html class=\"ie9\"&gt; &lt;![endif]--&gt;\n&lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt; &lt;html class=\"\"&gt; &lt;!--&lt;![endif]--&gt;\n</code></pre>\n\n<h3 id=\"google-jquery\">Google jQuery</h3>\n\n<pre><code>&lt;script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"&gt;&lt;/script&gt;\n</code></pre>\n\n<h3 id=\"unsupported-message\">Unsupported message</h3>\n\n<pre><code>&lt;!--[if lt IE 8]&gt;\n&lt;div class=\"unsupported-browser\"&gt;\n &lt;strong&gt;\n You are using an outdated browser.\n &lt;/strong&gt;\n &lt;span&gt;\n Please &lt;a class=\"upgrade-browser\"\n href=\"http://browsehappy.com/\"&gt;\n upgrade your browser&lt;/a&gt; or &lt;a class=\"chrome-frame\"\n href=\"http://www.google.com/chromeframe/?redirect=true\"&gt;activate Google \n Chrome Frame&lt;/a&gt; to improve your experience.\n &lt;/span&gt;\n&lt;/div&gt;\n&lt;![endif]--&gt;\n</code></pre>\n\n<h3 id=\"html-compatibility-inspector\">HTML Compatibility inspector</h3>\n\n<pre><code>&lt;script src=\"http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js\"&gt;&lt;/script&gt;\n</code></pre>\n\n<p>More info here: <a href=\"http://ie.microsoft.com/testdrive/HTML5/CompatInspector/\">microsoft.com</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "http-status",
"title": "HTTP Status",
"url": "/http-status",
"category": "API",
"keywords": null,
"content_html": "<h3 id=\"informational-responses\">Informational Responses</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>100</code></td>\n <td>Continue</td>\n <td><a href=\"https://httpstatuses.com/100\">?</a></td>\n </tr>\n <tr>\n <td><code>101</code></td>\n <td>Switching Protocols</td>\n <td><a href=\"https://httpstatuses.com/101\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"success-responses\">Success Responses</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>200</code></td>\n <td>OK</td>\n <td><a href=\"https://httpstatuses.com/200\">?</a></td>\n </tr>\n <tr>\n <td><code>201</code></td>\n <td>Created</td>\n <td><a href=\"https://httpstatuses.com/201\">?</a></td>\n </tr>\n <tr>\n <td><code>202</code></td>\n <td>Accepted</td>\n <td><a href=\"https://httpstatuses.com/202\">?</a></td>\n </tr>\n <tr>\n <td><code>203</code></td>\n <td>Non-Authoritive Information</td>\n <td><a href=\"https://httpstatuses.com/203\">?</a></td>\n </tr>\n <tr>\n <td><code>204</code></td>\n <td>No Content</td>\n <td><a href=\"https://httpstatuses.com/204\">?</a></td>\n </tr>\n <tr>\n <td><code>205</code></td>\n <td>Reset Content</td>\n <td><a href=\"https://httpstatuses.com/205\">?</a></td>\n </tr>\n <tr>\n <td><code>206</code></td>\n <td>Partial Content</td>\n <td><a href=\"https://httpstatuses.com/206\">?</a></td>\n </tr>\n <tr>\n <td><code>226</code></td>\n <td>IM Used</td>\n <td><a href=\"https://httpstatuses.com/226\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"redirection-responses\">Redirection Responses</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>300</code></td>\n <td>Multiple Choices</td>\n <td><a href=\"https://httpstatuses.com/300\">?</a></td>\n </tr>\n <tr>\n <td><code>301</code></td>\n <td>Moved Permanently</td>\n <td><a href=\"https://httpstatuses.com/301\">?</a></td>\n </tr>\n <tr>\n <td><code>302</code></td>\n <td>Found</td>\n <td><a href=\"https://httpstatuses.com/302\">?</a></td>\n </tr>\n <tr>\n <td><code>303</code></td>\n <td>See Other</td>\n <td><a href=\"https://httpstatuses.com/303\">?</a></td>\n </tr>\n <tr>\n <td><code>304</code></td>\n <td>Not Modified</td>\n <td><a href=\"https://httpstatuses.com/304\">?</a></td>\n </tr>\n <tr>\n <td><code>305</code></td>\n <td>Use Proxy</td>\n <td><a href=\"https://httpstatuses.com/305\">?</a></td>\n </tr>\n <tr>\n <td><code>306</code></td>\n <td><em>Switch Proxy</em></td>\n <td><a href=\"https://httpstatusdogs.com/306-switch-proxy\">?</a></td>\n </tr>\n <tr>\n <td><code>307</code></td>\n <td>Temporary Redirect</td>\n <td><a href=\"https://httpstatuses.com/307\">?</a></td>\n </tr>\n <tr>\n <td><code>308</code></td>\n <td>Permanent Redirect</td>\n <td><a href=\"https://httpstatuses.com/308\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"client-error-responses\">Client Error Responses</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>400</code></td>\n <td>Bad Request</td>\n <td><a href=\"https://httpstatuses.com/400\">?</a></td>\n </tr>\n <tr>\n <td><code>401</code></td>\n <td>Unauthorized</td>\n <td><a href=\"https://httpstatuses.com/401\">?</a></td>\n </tr>\n <tr>\n <td><code>402</code></td>\n <td>Payment Required</td>\n <td><a href=\"https://httpstatuses.com/402\">?</a></td>\n </tr>\n <tr>\n <td><code>403</code></td>\n <td>Forbidden</td>\n <td><a href=\"https://httpstatuses.com/403\">?</a></td>\n </tr>\n <tr>\n <td><code>404</code></td>\n <td>Not Found</td>\n <td><a href=\"https://httpstatuses.com/404\">?</a></td>\n </tr>\n <tr>\n <td><code>405</code></td>\n <td>Method Not Allowed</td>\n <td><a href=\"https://httpstatuses.com/405\">?</a></td>\n </tr>\n <tr>\n <td><code>406</code></td>\n <td>Not Acceptable</td>\n <td><a href=\"https://httpstatuses.com/406\">?</a></td>\n </tr>\n <tr>\n <td><code>407</code></td>\n <td>Proxy Authentication Required</td>\n <td><a href=\"https://httpstatuses.com/407\">?</a></td>\n </tr>\n <tr>\n <td><code>408</code></td>\n <td>Request Timeout</td>\n <td><a href=\"https://httpstatuses.com/408\">?</a></td>\n </tr>\n <tr>\n <td><code>409</code></td>\n <td>Conflict</td>\n <td><a href=\"https://httpstatuses.com/409\">?</a></td>\n </tr>\n <tr>\n <td><code>410</code></td>\n <td>Gone</td>\n <td><a href=\"https://httpstatuses.com/410\">?</a></td>\n </tr>\n <tr>\n <td><code>411</code></td>\n <td>Length Required</td>\n <td><a href=\"https://httpstatuses.com/411\">?</a></td>\n </tr>\n <tr>\n <td><code>412</code></td>\n <td>Precondition Failed</td>\n <td><a href=\"https://httpstatuses.com/412\">?</a></td>\n </tr>\n <tr>\n <td><code>413</code></td>\n <td>Payload Too Large</td>\n <td><a href=\"https://httpstatuses.com/413\">?</a></td>\n </tr>\n <tr>\n <td><code>414</code></td>\n <td>URI Too Long</td>\n <td><a href=\"https://httpstatuses.com/414\">?</a></td>\n </tr>\n <tr>\n <td><code>415</code></td>\n <td>Unsupported Media Type</td>\n <td><a href=\"https://httpstatuses.com/415\">?</a></td>\n </tr>\n <tr>\n <td><code>416</code></td>\n <td>Range Not Satisfiable</td>\n <td><a href=\"https://httpstatuses.com/416\">?</a></td>\n </tr>\n <tr>\n <td><code>417</code></td>\n <td>Expectation Failed</td>\n <td><a href=\"https://httpstatuses.com/417\">?</a></td>\n </tr>\n <tr>\n <td><code>418</code></td>\n <td>I’m a teapot</td>\n <td><a href=\"https://httpstatuses.com/418\">?</a></td>\n </tr>\n <tr>\n <td><code>421</code></td>\n <td>Misdirected Request</td>\n <td><a href=\"https://httpstatuses.com/421\">?</a></td>\n </tr>\n <tr>\n <td><code>426</code></td>\n <td>Upgrade Required</td>\n <td><a href=\"https://httpstatuses.com/426\">?</a></td>\n </tr>\n <tr>\n <td><code>428</code></td>\n <td>Precondition Required</td>\n <td><a href=\"https://httpstatuses.com/428\">?</a></td>\n </tr>\n <tr>\n <td><code>429</code></td>\n <td>Too Many Requests</td>\n <td><a href=\"https://httpstatuses.com/429\">?</a></td>\n </tr>\n <tr>\n <td><code>431</code></td>\n <td>Request Header Fields Too Large</td>\n <td><a href=\"https://httpstatuses.com/431\">?</a></td>\n </tr>\n <tr>\n <td><code>451</code></td>\n <td>Unavailable For Legal Reasons</td>\n <td><a href=\"https://httpstatuses.com/451\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"server-error-responses\">Server Error Responses</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>500</code></td>\n <td>Internal Server Error</td>\n <td><a href=\"https://httpstatuses.com/500\">?</a></td>\n </tr>\n <tr>\n <td><code>501</code></td>\n <td>Not Implemented</td>\n <td><a href=\"https://httpstatuses.com/501\">?</a></td>\n </tr>\n <tr>\n <td><code>502</code></td>\n <td>Bad Gateway</td>\n <td><a href=\"https://httpstatuses.com/502\">?</a></td>\n </tr>\n <tr>\n <td><code>503</code></td>\n <td>Service Unavailable</td>\n <td><a href=\"https://httpstatuses.com/503\">?</a></td>\n </tr>\n <tr>\n <td><code>504</code></td>\n <td>Gateway Timeout</td>\n <td><a href=\"https://httpstatuses.com/504\">?</a></td>\n </tr>\n <tr>\n <td><code>505</code></td>\n <td>HTTP Version Not Supported</td>\n <td><a href=\"https://httpstatuses.com/505\">?</a></td>\n </tr>\n <tr>\n <td><code>506</code></td>\n <td>Variant Also Negotiates</td>\n <td><a href=\"https://httpstatuses.com/506\">?</a></td>\n </tr>\n <tr>\n <td><code>510</code></td>\n <td>Not Extended</td>\n <td><a href=\"https://httpstatuses.com/510\">?</a></td>\n </tr>\n <tr>\n <td><code>511</code></td>\n <td>Network Authentication Required</td>\n <td><a href=\"https://httpstatuses.com/511\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"webdav-status-codes\">WebDAV Status Codes</h2>\n\n<p>WebDAV is an extension of HTTP that allows clients to perform remote Web content authoring operations. It provides a framework for users to create, change and move documents on a server. It adds the following status codes on top of HTTP.</p>\n\n<p><a href=\"https://en.wikipedia.org/wiki/WebDAV\">Read more.</a></p>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>Code</th>\n <th>Name</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>102</code></td>\n <td>Processing</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#102\">?</a></td>\n </tr>\n <tr>\n <td><code>207</code></td>\n <td>Multi-Status</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#207\">?</a></td>\n </tr>\n <tr>\n <td><code>208</code></td>\n <td>Already Reported</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#208\">?</a></td>\n </tr>\n <tr>\n <td><code>422</code></td>\n <td>Unprocessable Entity</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#422\">?</a></td>\n </tr>\n <tr>\n <td><code>423</code></td>\n <td>Locked</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#423\">?</a></td>\n </tr>\n <tr>\n <td><code>424</code></td>\n <td>Failed Dependency</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#424\">?</a></td>\n </tr>\n <tr>\n <td><code>507</code></td>\n <td>Insufficient Storage</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#507\">?</a></td>\n </tr>\n <tr>\n <td><code>508</code></td>\n <td>Loop Detected</td>\n <td><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#508\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://en.wikipedia.org/wiki/List_of_HTTP_status_codes\">https://en.wikipedia.org/wiki/List_of_HTTP_status_codes</a></li>\n <li><a href=\"https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html\">https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html</a></li>\n <li><a href=\"https://httpstatuses.com/\">https://httpstatuses.com/</a></li>\n</ul>",
"intro_html": "",
"description_html": "<p>List of HTTP Status codes and links to description.</p>",
"tags": null,
"updated": null
},{
"id": "httpie",
"title": "httpie",
"url": "/httpie",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"parameters\">Parameters</h3>\n\n<pre><code class=\"language-bash\">$ http POST http://example.com/posts/3 \\\n Origin:example.com \\ # : HTTP headers\n name=\"John Doe\" \\ # = string\n q==\"search\" \\ # == URL parameters (?q=search)\n age:=29 \\ # := for non-strings\n list:='[1,3,4]' \\ # := json\n file@file.bin \\ # @ attach file\n token=@token.txt \\ # =@ read from file (text)\n user:=@user.json # :=@ read from file (json)\n</code></pre>\n\n<h3 id=\"forms\">Forms</h3>\n\n<pre><code class=\"language-bash\">$ http --form POST example.com \\\n name=\"John Smith\" \\\n cv=@document.txt\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<p class=\"-setup\">Print options:</p>\n\n<pre><code class=\"language-bash\">-v, --verbose # same as --print=HhBb --all\n-h, --headers # same as --print=h\n-b, --body # same as --print=b\n --all # print intermediate requests\n --print=HhBb # H: request headers\n # B: request body\n # h: response headers\n # b: response body\n --pretty=none # all | colors | format\n --json | -j # Response is serialized as a JSON object.\n</code></pre>\n\n<h4 id=\"authentication\">Authentication</h4>\n\n<pre><code class=\"language-bash\"> --session NAME\n-a, --auth USER:PASS\n --auth-type basic\n --auth-type digest\n</code></pre>\n\n<h4 id=\"session\">Session</h4>\n\n<pre><code class=\"language-bash\"> --session NAME # store auth and cookies\n --session-read-only NAME\n</code></pre>\n\n<h4 id=\"downloading\">Downloading</h4>\n\n<pre><code class=\"language-bash\">-d, --download # like wget\n-c, --continue\n-o, --output FILE\n</code></pre>\n\n<h4 id=\"others\">Others</h4>\n\n<pre><code class=\"language-bash\">-F, --follow # follow redirects\n --max-redirects N # maximum for --follow\n --timeout SECONDS\n --verify no # skip SSL verification\n --proxy http:http://foo.bar:3128\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://github.com/jakubroztocil/httpie\">https://github.com/jakubroztocil/httpie</a></li>\n</ul>",
"intro_html": "<p><a href=\"https://httpie.org/\">HTTPie</a> is a command-line HTTP client.</p>",
"description_html": "<p>$ http POST http://example.com name=”John” Host:example.com — JSON, cookies, files, auth, and other httpie examples.</p>",
"tags": null,
"updated": "2017-09-04"
},{
"id": "ie",
"title": "Internet Explorer",
"url": "/ie",
"category": "HTML",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"support-table\">Support table</h2>\n\n<h3 id=\"css-selectors\">CSS Selectors</h3>\n\n<table class=\"-headers -no-wrap\">\n <thead>\n <tr>\n <th>Feature</th>\n <th>IE6</th>\n <th>IE7</th>\n <th>IE8</th>\n <th>IE9</th>\n <th>IE10</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&gt;</code> <em>(descendant)</em></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>[attr]</code> <em>(attribute)</em></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>.class1.class2</code> <em>(multiple classes)</em></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>~</code> <em>(sibling)</em></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>+</code> <em>(adjacent)</em></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:first-child</code> <sup>*</sup></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:focus</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:before</code> <code>:after</code> <em>(single colon only)</em></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:lang</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:first-of-type</code>, <code>:last-of-type</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:last-child</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:empty</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:enabled</code> <code>:disabled</code> <code>:checked</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:not()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:nth-child()</code> <code>:nth-last-child()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:nth-of-type()</code> <code>:nth-last-of-type()</code> <code>:only-of-type()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:only-child()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:target</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>::selection</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>:root</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>first-child:</code> doesn’t work for elements inserted via JS.</p>\n\n<h3 id=\"css-properties\">CSS properties</h3>\n\n<table class=\"-headers -no-wrap\">\n <thead>\n <tr>\n <th>Feature</th>\n <th>IE6</th>\n <th>IE7</th>\n <th>IE8</th>\n <th>IE9</th>\n <th>IE10</th>\n <th>IE11</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>max-width</code></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>position: fixed</code></td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>outline</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>display: inline-block</code> <sup>*</sup></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>display: table</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>border-collapse</code>, <code>border-spacing</code>, <code>table-layout</code>, …</td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>whitespace: pre-wrap</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>whitespace: pre-line</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>box-sizing</code></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>background-clip</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>background-origin</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>background-size</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>background: x, y, z</code> <em>(multiple backgrounds)</em></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>opacity</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>border-radius</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>box-shadow</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>rgba()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>transform</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>animation</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>transition</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>linear-gradient()</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td><code>text-shadow</code> — <a href=\"https://github.com/heygrady/textshadow\">polyfill</a></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>border-image</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>11 ✓</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>inline-block:</code> IE6/7 can only support inline-block for elements that are naturally inline, like span</p>\n\n<h3 id=\"features\">Features</h3>\n\n<table class=\"-headers -no-wrap\">\n <thead>\n <tr>\n <th>Feature</th>\n <th>IE6</th>\n <th>IE7</th>\n <th>IE8</th>\n <th>IE9</th>\n <th>IE10</th>\n <th>IE11</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>PNG alpha transparency</td>\n <td> </td>\n <td>7 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>data URI <a href=\"https://caniuse.com/#feat=datauri\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>JS: JSON parsing <a href=\"https://caniuse.com/#feat=json\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>JS: Cross-origin resource sharing <a href=\"https://caniuse.com/#feat=cors\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>JS: Local storage <a href=\"https://caniuse.com/#feat=localstorage\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td>8 ✓</td>\n <td>✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>CSS: <code>@media</code> queries — <a href=\"https://github.com/scottjehl/Respond\">polyfill</a></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: new HTML5 elements - <a href=\"https://code.google.com/p/html5shiv/\">polyfill</a></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;canvas&gt;</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;svg&gt;</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;img src='image.svg'&gt;</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>9 ✓</td>\n <td>✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>CSS: flexbox <a href=\"https://caniuse.com/#feat=flexbox\">⊙</a> <sup>*</sup></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;input placeholder='..'&gt;</code> <a href=\"https://caniuse.com/#feat=input-placeholder\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;input type='range'&gt;</code></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>HTML: <code>&lt;input required&gt;</code> <a href=\"https://caniuse.com/#search=validation\">⊙</a></td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n <tr>\n <td>JS: Web sockets</td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>10 ✓</td>\n <td>✓</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>JS: Fullscreen mode</td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td> </td>\n <td>11 ✓</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>flexbox:</code> IE10 only supports the 2012 syntax with -ms- prefix.</p>\n\n<h2 id=\"polyfills\">Polyfills</h2>\n\n<h3 id=\"ie-polyfills\">IE polyfills</h3>\n\n<p>Always install these in almost every project:</p>\n\n<ul>\n <li><a href=\"https://github.com/douglascrockford/JSON-js\">json2</a> for JSON parsing (for IE7 below)</li>\n <li><a href=\"http://selectivizr.com/\">selectivizr</a> for selectors (for IE8 below)</li>\n <li><a href=\"https://code.google.com/p/html5shiv/\">html5shiv</a> for new HTML tags (for IE8 below)</li>\n <li><a href=\"https://github.com/scottjehl/Respond\">respond</a> for media queries (for IE8 below)</li>\n <li>See <a href=\"http://ricostacruz.com/til/ie-polyfills.html\">this article</a> for info</li>\n</ul>\n\n<pre><code class=\"language-html\">&lt;!--[if lt IE 9]&gt;\n&lt;script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'&gt;&lt;/script&gt;\n&lt;script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'&gt;\n&lt;script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'&gt;&lt;/script&gt;\n&lt;script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'&gt;\n&lt;script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'&gt;\n&lt;![endif]--&gt; \n</code></pre>\n\n<h3 id=\"you-may-also-need\">You may also need</h3>\n\n<ul>\n <li><a href=\"https://modernizr.com\">modernizr</a> for feature detection</li>\n</ul>\n\n<h3 id=\"for-css3-decorations\">for CSS3 decorations</h3>\n\n<ul>\n <li><a href=\"http://css3pie.com/\">css3pie</a></li>\n <li><a href=\"https://github.com/zoltan-dulac/cssSandpaper\">cssSandpaper</a></li>\n <li><a href=\"http://ecsstender.org/\">ecsstender</a></li>\n</ul>\n\n<p>See: <a href=\"https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills\">Cross-browser polyfills list</a></p>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"ie-conditional-comment-html\">IE Conditional comment HTML</h3>\n\n<pre><code class=\"language-html\">&lt;!--[if lt IE 7 ]&gt; &lt;html class=\"ie6\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 7 ]&gt; &lt;html class=\"ie7\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 8 ]&gt; &lt;html class=\"ie8\"&gt; &lt;![endif]--&gt;\n&lt;!--[if IE 9 ]&gt; &lt;html class=\"ie9\"&gt; &lt;![endif]--&gt;\n&lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt; &lt;html class=\"\"&gt; &lt;!--&lt;![endif]--&gt;\n</code></pre>\n\n<h3 id=\"ie-conditionals\">IE conditionals</h3>\n\n<pre><code class=\"language-html\">&lt;!--[if IE]&gt; I'm IE &lt;![endif]--&gt;\n&lt;!--[if !IE]&gt; --&gt; Not IE &lt;!-- &lt;![endif]--&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "ie_bugs",
"title": "Legacy IE bugs",
"url": "/ie_bugs",
"category": "HTML",
"keywords": null,
"content_html": "<h3 id=\"ie8-change-event\">IE8: ‘change’ event</h3>\n\n<p>The ‘change’ event doesn’t always fire. Not for checkboxes, radios, multi-select lists. Use the <code>click</code> handler instead.</p>\n\n<ul>\n <li><a href=\"http://stackoverflow.com/questions/8005442/checkbox-change-event-works-when-click-the-label-in-ie8-ie7\">(1)</a></li>\n</ul>\n\n<h3 id=\"ie8-label-with-input\">IE8: label with input</h3>\n\n<p>Clicking label with input inside doesn’t focus the input.</p>\n\n<ul>\n <li><a href=\"http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/LabelForWithImage.html\">(1)</a></li>\n</ul>\n\n<h3 id=\"ie8-opacity-propagation\">IE8: Opacity propagation</h3>\n\n<p>An element’s ‘opacity’ value isn’t propagated to its positioned descendants.</p>\n\n<ul>\n <li><a href=\"http://jhop.me/tests/bugs/ie8/opacity_positioned.html\">test case</a></li>\n</ul>",
"intro_html": "<p>A bunch of bugs to take care of if you’re going to target legacy IE browsers.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-29"
},{
"id": "imagemagick",
"title": "Imagemagick",
"url": "/imagemagick",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"stuff\">Stuff</h3>\n\n<pre><code>-resize 100x40\n-crop 40x30+10+10 # (width)x(height)+(x)+y\n-crop 40x30-10-10 # (width)x(height)+(x)+y\n-flip # vertical\n-flop # horizontal\n-transpose # flip vertical + rotate 90deg\n-transverse # flip horizontal + rotate 270deg\n-trim # trim image edges\n-rotate 90\n</code></pre>\n\n<h3 id=\"resize-to-fit\">Resize to fit</h3>\n\n<pre><code>convert input.jpg -resize 80x80^ -gravity center -extent 80x80 icon.png\n</code></pre>\n\n<h3 id=\"convert-all-images-to-another-format\">Convert all images to another format</h3>\n\n<pre><code>mogrify -format jpg -quality 85 *.png\n</code></pre>\n\n<h3 id=\"make-a-pdf\">Make a pdf</h3>\n\n<pre><code>convert *.jpg hello.pdf\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://www.noah.org/wiki/ImageMagick</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "immutable.js",
"title": "Immutable.js",
"url": "/immutable.js",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"maps\">Maps</h3>\n\n<pre><code class=\"language-js\">var map = Immutable.Map({ a: 1, b: 2, c: 3 })\n</code></pre>\n\n<pre><code class=\"language-js\">map\n .set('b', 50)\n .get('b') // 50\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-js\">var list = Immutable.List.of(1, 2)\n\nlist\n .push(3, 4, 5)\n .unshift(0)\n .concat(list2, list3)\n .get(0)\n .size\n</code></pre>\n\n<h3 id=\"nested-maps\">Nested maps</h3>\n\n<pre><code class=\"language-js\">var nested = Immutable.fromJS({ user: { profile: { name: 'John' } } })\n\nnested\n // Update\n .mergeDeep({ user: { profile: { age: 90 } } })\n .setIn([ 'user', 'profile', 'name' ], 'Jack')\n .updateIn([ 'user', 'profile', 'name' ], (s) =&gt; s.toUpperCase())\n\n // Get\n .getIn(['user', 'profile', 'name']) // 'JACK'\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "inkscape",
"title": "Inkscape",
"url": "/inkscape",
"category": "Apps",
"keywords": null,
"content_html": "<h3 id=\"all\">All</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>-</code> <em>/</em> <code>=</code></td>\n <td>Zoom in/out</td>\n </tr>\n <tr>\n <td><code>3</code> <em>/</em> <code>4</code></td>\n <td>Zoom to selection / drawing</td>\n </tr>\n <tr>\n <td><code>5</code> <em>/</em> <code>6</code></td>\n <td>Zoom to page / page width</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"select-tool-f1\">Select tool (F1)</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>[ ]</code></td>\n <td>Rotate</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"edit-path-f2\">Edit path (F2)</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>Ctrl</code></td>\n <td>constraint</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"dragging-an-anchor-handle\">Dragging an anchor handle</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>Ctrl</code></td>\n <td>snap to 15 degrees</td>\n </tr>\n <tr>\n <td><code>Alt</code></td>\n <td>?</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"bezier-shift-f6\">Bezier (Shift F6)</h3>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": null
},{
"id": "inline-docs",
"title": "Inline documentation",
"url": "/inline-docs",
"category": "Others",
"keywords": null,
"content_html": "<ul>\n <li>Ruby: rdoc</li>\n <li>JavaScript: jsdoc</li>\n</ul>\n\n<h3 id=\"rdoc\">RDoc</h3>\n\n<pre><code># Gets a circle's area\n#\n# @example\n#\n# area(3)\n# #=&gt; 28.27\n#\n# @param [Number] r The radius of the ricle\n# @return [true] If so\n#\n# == Definition lists\n#\n# list:: hi.\n# +foo+:: parameterized\n#\n# == Definition lists\n# [foo] also\n# [bar] like this\n</code></pre>\n\n<p>http://rdoc.rubyforge.org/RDoc/Markup.html</p>\n\n<h3 id=\"jsdoc\">Jsdoc</h3>\n\n<pre><code>/**\n * Ads numbers\n *\n * @this {Circle}\n * @param {Number} r The radius\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "wip/intl-datetime",
"title": "Intl.DateTimeFormat",
"url": "/wip/intl-datetime",
"category": "Hidden",
"keywords": null,
"content_html": "<h3 id=\"parsing\">Parsing</h3>\n\n<h4 id=\"as-local-time\">As local time</h4>\n\n<pre><code class=\"language-js\">const date = new Date(2012, 11, 20, 3, 0, 0)\n</code></pre>\n\n<h4 id=\"as-utc-time\">As UTC time</h4>\n\n<pre><code class=\"language-js\">const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))\n</code></pre>\n\n<h4 id=\"from-iso-strings\">From ISO strings</h4>\n\n<pre><code class=\"language-js\">const date = new Date('2018-04-20T12:00:00Z')\n</code></pre>\n\n<p>Note that JavaScript doesn’t “store” timezones in a date object. All these date objects, when expressed via <code>.toString()</code> or similar, will show the local timezone of the browser, regardless if you parsed UTC dates.</p>\n\n<h3 id=\"formatting-dates\">Formatting dates</h3>\n\n<h4 id=\"default-formatting\">Default formatting</h4>\n\n<pre><code class=\"language-js\">console.log(new Intl.DateTimeFormat().format(date))\n// → '12/19/2012' (assuming America/Los_Angeles)\n</code></pre>\n\n<h4 id=\"custom-locale\">Custom locale</h4>\n\n<pre><code class=\"language-js\">console.log(new Intl.DateTimeFormat('en-GB').format(date))\n// → '19/12/2012' (date-first)\n</code></pre>\n\n<h4 id=\"custom-timezone\">Custom timezone</h4>\n\n<pre><code class=\"language-js\">console.log(new Intl.DateTimeFormat('en-AU', {\n timeZone: 'Australia/Sydney'\n}).format(date))\n// → '19/12/2012'\n</code></pre>\n\n<h3 id=\"custom-formats\">Custom formats</h3>\n\n<h4 id=\"time\">Time</h4>\n\n<pre><code class=\"language-js\">console.log(new Intl.DateTimeFormat('default', {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n}).format(date))\n// → '2:00:00 pm'\n</code></pre>\n\n<h4 id=\"date\">Date</h4>\n\n<pre><code class=\"language-js\">console.log(new Intl.DateTimeFormat('en-US', {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric'\n}).format(date))\n// → '12/19/2012'\n</code></pre>\n\n<p>To specify options without a locale, use <code>'default'</code> as a locale.</p>\n\n<h3 id=\"all-options\">All options</h3>\n\n<pre><code class=\"language-js\">{\n weekday: 'narrow' | 'short' | 'long',\n era: 'narrow' | 'short' | 'long',\n year: 'numeric' | '2-digit',\n month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',\n day: 'numeric' | '2-digit',\n hour: 'numeric' | '2-digit',\n minute: 'numeric' | '2-digit',\n second: 'numeric' | '2-digit',\n timeZoneName: 'short' | 'long',\n\n // Time zone to express it in\n timeZone: 'Asia/Shanghai',\n // Force 12-hour or 24-hour\n hour12: true | false,\n\n // Rarely-used options\n hourCycle: 'h11' | 'h12' | 'h23' | 'h24',\n formatMatcher: 'basic' | 'best fit'\n}\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat</a></li>\n</ul>",
"intro_html": "<p><code>Intl.DateTimeFormat</code> is used to format date strings in JavaScript.</p>",
"description_html": "",
"tags": ["WIP"],
"updated": null
},{
"id": "ios-provision",
"title": "iOS Provisioning Profiles",
"url": "/ios-provision",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"types-of-profiles\">Types of profiles</h3>\n\n<ul>\n <li><strong>Development</strong> - deploy to an iPhone via XCode</li>\n <li><strong>Adhoc</strong> - deploy via testflightapp.com</li>\n <li><strong>Appstore</strong> - only used for submitting to the app store</li>\n</ul>\n\n<h3 id=\"requirements\">Requirements</h3>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Dev</th>\n <th>Adhoc</th>\n <th>Appstore</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>CSR file</td>\n <td> </td>\n <td>√</td>\n <td>√</td>\n </tr>\n <tr>\n <td>Device UDIDs</td>\n <td>√</td>\n <td>√</td>\n <td> </td>\n </tr>\n <tr>\n <td>Developers list</td>\n <td>√</td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"obtaining-a-csr-file\">Obtaining a CSR file</h3>\n\n<p>Needed for Adhoc &amp; Appstore builds.</p>\n\n<ul>\n <li>Open <em>Keychain Access.app</em></li>\n <li><em>Keychain Access</em> menu -&gt; <em>Certificate Assistant</em> menu -&gt; <em>Request a \n certificate…</em>\n <ul>\n <li>User email address is <em>your email</em></li>\n <li>Common name is <em>your name</em></li>\n <li>CA Email address is <em>blank</em></li>\n <li>Request is <em>Saved to disk</em></li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"get-the-cer-files\">Get the <code>.cer</code> files</h3>\n\n<p>Needed for Adhoc &amp; Appstore builds.</p>\n\n<ul>\n <li>in the iOS dev portal, go to <em>Certificates</em>, and download the certificate.<br />\n Install it on the dev machine.</li>\n</ul>\n\n<h3 id=\"obtaining-device-udids\">Obtaining device UDIDs</h3>\n\n<p>Needed for Dev and Adhoc builds.</p>\n\n<ul>\n <li>via iTunes: http://whatsmyudid.com</li>\n <li>via XCode: cmd+shift+2 (Organizer), Devices</li>\n</ul>\n\n<h2 id=\"for-developers\">For developers</h2>\n\n<p>Don’t ever ask Xcode to <em>Fix issue…</em> for you.</p>\n\n<h3 id=\"using-a-provisioning-profile\">Using a provisioning profile</h3>\n\n<p>No need to use <code>.mobileprovision</code> files since XCode 5.</p>\n\n<ul>\n <li>Open the <code>*.mobileprovision</code> file using Finder</li>\n <li>XCode Project -&gt; <em>Build settings</em> tab -&gt; <em>Code signing</em> section -&gt; \n <em>Provisioning Profile</em> section\n <ul>\n <li>Set <em>Debug</em> to the <em>development</em> profile</li>\n <li>Set <em>Release</em> to the <em>ad-hoc</em> profile</li>\n </ul>\n </li>\n</ul>\n\n<h3 id=\"building-an-ipa-adhoc-or-appstore\">Building an .ipa (Adhoc or Appstore)</h3>\n\n<ul>\n <li>In the toolbar, select “iOS Device” as the target</li>\n <li><em>Product</em> menu -&gt; <em>Archive</em></li>\n <li>In the Organizer (Cmd+Shift+2) -&gt; <em>Archives</em> tab -&gt; <em>Distribute…</em> button</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jade",
"title": "Jade",
"url": "/jade",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jasmine",
"title": "Jasmine",
"url": "/jasmine",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"tests\">Tests</h2>\n\n<h3 id=\"writing-tests\">Writing tests</h3>\n\n<pre><code class=\"language-js\">describe('A suite', () =&gt; {\n it('works', () =&gt; {\n expect(true).toBe(true)\n })\n})\n</code></pre>\n\n<p>Note: This cheatsheet may be a little outdated. Also see the <a href=\"./jest\">Jest cheatsheet</a>. Jest uses Jasmine, and therefore has similar API.</p>\n\n<h3 id=\"expectations\">Expectations</h3>\n\n<pre><code class=\"language-js\">expect(true).toBe(true)\nexpect(true).not.toBe(true)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(a).toEqual(bar)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(message).toMatch(/bar/)\nexpect(message).toMatch('bar')\n</code></pre>\n\n<pre><code class=\"language-js\">expect(a.foo).toBeDefined()\nexpect(a.foo).toBeUndefined()\nexpect(a.foo).toBeNull()\n</code></pre>\n\n<pre><code class=\"language-js\">expect(a.foo).toBeTruthy()\nexpect(a.foo).toBeFalsy()\n</code></pre>\n\n<pre><code class=\"language-js\">expect(message).toContain('hello')\n</code></pre>\n\n<pre><code class=\"language-js\">expect(pi).toBeGreaterThan(3)\nexpect(pi).toBeLessThan(4)\nexpect(pi).toBeCloseTo(3.1415, 0.1)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(func).toThrow()\n</code></pre>\n\n<h3 id=\"hooks\">Hooks</h3>\n\n<pre><code class=\"language-js\">beforeEach(() =&gt; {\n ···\n})\n</code></pre>\n\n<pre><code class=\"language-js\">afterEach(() =&gt; {\n ···\n})\n</code></pre>\n\n<h3 id=\"pending\">Pending</h3>\n\n<pre><code class=\"language-js\">xit('this is a pending test', () =&gt; {\n ···\n})\n</code></pre>\n\n<pre><code class=\"language-js\">xdescribe('this is a pending block', () =&gt; {\n ···\n})\n</code></pre>\n\n<h3 id=\"spies\">Spies</h3>\n\n<pre><code class=\"language-js\">spyOn(foo, 'setBar')\nspyOn(foo, 'setBar').andReturn(123)\nspyOn(foo, 'getBar').andCallFake(function() { return 1001; })\nfoo.setBar(123)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(foo.setBar).toHaveBeenCalled()\nexpect(foo.setBar).toHaveBeenCalledWith(123)\nexpect(foo.setBar.calls.length).toEqual(2)\nexpect(foo.setBar.calls[0].args[0]).toEqual(123)\n</code></pre>\n\n<h3 id=\"creating-spies\">Creating spies</h3>\n\n<pre><code class=\"language-js\">stub = jasmine.createSpy('stub')\nstub('hello')\n</code></pre>\n\n<pre><code class=\"language-js\">expect(stub.identity).toEqual('stub')\nexpect(stub).toHaveBeenCalled()\n</code></pre>\n\n<h3 id=\"async\">Async</h3>\n\n<pre><code class=\"language-js\">test('works with promises', () =&gt; {\n return new Promise((resolve, reject) =&gt; {\n ···\n })\n})\n</code></pre>\n\n<p>Make your test return a promise.</p>\n\n<h3 id=\"html-runner\">HTML runner</h3>\n\n<pre><code class=\"language-js\">var jasmineEnv = jasmine.getEnv()\njasmineEnv.updateInterval = 250\n\nvar htmlReporter = new jasmine.HtmlReporter()\njasmineEnv.addReporter(htmlReporter)\n\n$(function() { jasmineEnv.execute() })\n</code></pre>\n\n<h2 id=\"jasmine-jquery\">Jasmine jQuery</h2>\n\n<h3 id=\"expectations-1\">Expectations</h3>\n\n<pre><code class=\"language-js\">expect($('#id')).toBe('div')\nexpect($('input[type=checkbox]')).toBeChecked()\nexpect($('input[type=checkbox]')).toBeDisabled()\nexpect($('input[type=checkbox]')).toBeFocused()\nexpect($('#menu ul')).toBeEmpty()\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('#toolbar')).toBeHidden()\nexpect($('#toolbar')).toBeVisible()\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('#popup')).toHaveCss({ margin: \"10px\" })\nexpect($('option')).toBeSelected()\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('.foo')).toExist()\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('a')).toHaveAttr('rel')\nexpect($('a')).toHaveAttr('rel', 'nofollow')\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('a')).toHaveClass('rel')\nexpect($('a')).toHaveId('home')\n</code></pre>\n\n<pre><code class=\"language-js\">expect($('a')).toHaveHtml('&lt;span&gt;&lt;/span&gt;')\nexpect($('a')).toContainHtml('&lt;span&gt;&lt;/span&gt;')\nexpect($('a')).toHaveText('hi')\n</code></pre>\n\n<pre><code class=\"language-js\">expect($form).toHandle('submit') // event\nexpect($form).toHandleWith('submit', onSumbit)\n</code></pre>\n\n<p>See: <a href=\"https://github.com/velesin/jasmine-jquery\">jasmine-jquery</a></p>\n\n<h3 id=\"event-spies\">Event spies</h3>\n\n<pre><code class=\"language-js\">spyOnEvent($('#some_element'), 'click')\n$('#some_element').click()\nexpect('click').toHaveBeenPreventedOn($('#some_element'))\nexpect('click').toHaveBeenTriggeredOn($('#some_element'))\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li>Also see the <a href=\"./jest\">Jest cheatsheet</a>. Jest uses Jasmine, and therefore has similar API.</li>\n <li><a href=\"https://jasmine.github.io\">https://jasmine.github.io</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jekyll-github",
"title": "Jekyll for GitHub pages",
"url": "/jekyll-github",
"category": "Jekyll",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"jekyll\">Jekyll</h2>\n\n<ul class=\"-four-column\">\n <li>jekyll-avatar</li>\n <li>jekyll-coffeescript</li>\n <li>jekyll-default-layout</li>\n <li>jekyll-feed</li>\n <li>jekyll-gist</li>\n <li>jekyll-github-metadata</li>\n <li>jekyll-mentions</li>\n <li>jekyll-optional-front-matter</li>\n <li>jekyll-paginate</li>\n <li>jekyll-readme-index</li>\n <li>jekyll-redirect-from</li>\n <li>jekyll-relative-links</li>\n <li>jekyll-sass-converter</li>\n <li>jekyll-seo-tag</li>\n <li>jekyll-sitemap</li>\n</ul>\n\n<p>As of github-pages v156. For an updated list, see: <a href=\"https://pages.github.com/versions/\">Dependency versions</a> <em>(pages.github.com)</em></p>\n\n<h2 id=\"github-metadata\">GitHub Metadata</h2>\n\n<h3 id=\"configuration\">Configuration</h3>\n\n<pre><code class=\"language-yaml\">plugins:\n - jekyll-github-metadata\n\nrepository: username/project\n</code></pre>\n\n<p>Put this in your <code>_config.yml</code>.\nSee: <a href=\"https://help.github.com/articles/repository-metadata-on-github-pages/\">Repository metadata on GitHub pages</a></p>\n\n<h3 id=\"listing-repos\">Listing repos</h3>\n\n<pre><code class=\"language-html\">{% for repository in site.github.public_repositories %}\n &lt;a href='{{ repository.html_url }}'&gt;\n {{ repository.name }}\n &lt;/a&gt;\n{% endfor %}\n</code></pre>\n\n<h3 id=\"link-to-repo\">Link to repo</h3>\n\n<pre><code class=\"language-html\">&lt;a href='{{ site.github.repository_url }}'&gt;\n {{ site.github.project_title }}\n&lt;/a&gt;\n</code></pre>\n\n<h2 id=\"gists\">Gists</h2>\n\n<h3 id=\"configuration-1\">Configuration</h3>\n\n<pre><code class=\"language-yaml\">plugins:\n - jekyll-gist\n</code></pre>\n\n<p>See: <a href=\"https://github.com/jekyll/jekyll-gist\">jekyll-gist</a></p>\n\n<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-js\">{% gist parkr/c08ee0f2726fd0e3909d %}\n</code></pre>\n\n<p>This places a Gist in your page.</p>\n\n<h2 id=\"mentions\">Mentions</h2>\n\n<h3 id=\"configuration-2\">Configuration</h3>\n\n<pre><code class=\"language-yaml\">plugins:\n - jekyll-mentions\n</code></pre>\n\n<p>See: <a href=\"https://github.com/jekyll/jekyll-mentions\">jekyll-mentions</a></p>\n\n<h3 id=\"usage-1\">Usage</h3>\n\n<pre><code class=\"language-js\">Hey @rstacruz, what do you think of this?\n</code></pre>\n\n<p>Just mention anyone in any page. Their names will be turned into links.</p>\n\n<h2 class=\"-three-column\" id=\"redirects\">Redirects</h2>\n\n<h3 id=\"configuration-3\">Configuration</h3>\n\n<pre><code class=\"language-yaml\">plugins:\n - jekyll-redirect-from\n</code></pre>\n\n<p>See: <a href=\"https://rubygems.org/gems/jekyll-redirect-from\">jekyll-redirect-from</a></p>\n\n<h3 id=\"usage-2\">Usage</h3>\n\n<pre><code class=\"language-yaml\">---\nredirect_from:\n - /foo\n---\n</code></pre>\n\n<p>Place on any page.</p>\n\n<h3 id=\"redirecting\">Redirecting</h3>\n\n<pre><code class=\"language-yaml\">---\nredirect_to:\n - /foo\n---\n</code></pre>\n\n<p>Place on any page.\nSee: <a href=\"https://github.com/jekyll/jekyll-redirect-from#redirect-to\">redirect to</a></p>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": "2017-08-26"
},{
"id": "jekyll",
"title": "Jekyll",
"url": "/jekyll",
"category": "Jekyll",
"keywords": null,
"content_html": "<h3 id=\"installation\">Installation</h3>\n\n<pre><code class=\"language-bash\"># Install the gems\ngem install jekyll bundler\n</code></pre>\n\n<pre><code class=\"language-bash\"># Create a new site at `./myblog`\njekyll new myblog\ncd myblog\n</code></pre>\n\n<pre><code class=\"language-bash\"># Optional: if you're targeting github-pages,\n# use this Gemfile instead.\ncat &gt; Gemfile &lt;&lt;-END\nsource 'https://rubygems.org'\ngem 'github-pages', group: :jekyll_plugins\nEND\n</code></pre>\n\n<pre><code class=\"language-bash\">bundle exec jekyll serve\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/quickstart/\">Jekyll quickstart</a><br />\nSee: <a href=\"https://github.com/github/pages-gem\">github/pages-gem</a></p>\n\n<h3 id=\"directories\">Directories</h3>\n\n<pre class=\"-box-chars\"><code>./\n├── _config.yml\n│\n├── _data/\n│ └── ...\n│\n├── _drafts/\n│ └── ...\n│\n├── _posts/\n│ └── 2014-01-01-hello.md\n│\n├── _layouts/\n│ ├── default.html\n│ └── post.html\n│\n├── _includes/ - partials\n│ ├── header.html\n│ └── footer.html\n│\n└── _site/\n └── ...\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"front-matter\">Front-matter</h2>\n\n<h3 id=\"basic-frontmatter\">Basic frontmatter</h3>\n\n<pre data-line=\"1,2,3,4\"><code>---\nlayout: post\ntitle: Hello\n---\nHello! this is my post.\n</code></pre>\n\n<p>Attach metadata to a page by adding them on top of the page, delimited by <code>---</code>.\nSee: <a href=\"http://jekyllrb.com/docs/frontmatter/\">Front-matter</a></p>\n\n<h3 id=\"other-frontmatter-stuff\">Other frontmatter stuff</h3>\n\n<pre><code class=\"language-yaml\">permalink: '/hello'\npublished: false\ncategory: apple\ncategories: ['html', 'css']\ntags: ['html', 'css']\n</code></pre>\n\n<h3 id=\"configuration\">Configuration</h3>\n\n<p class=\"-setup\">In <code>_config.yml</code>:</p>\n\n<pre><code class=\"language-yaml\">source: .\ndestination: _site\nexclude:\n- Gemfile\n- Gemfile.lock\ninclude: ['.htaccess']\n</code></pre>\n\n<p>All config keys are optional.\nSee: <a href=\"http://jekyllrb.com/docs/configuration/\">Configuration</a></p>\n\n<h2 class=\"-three-column\" id=\"markup\">Markup</h2>\n\n<h3 id=\"page-variables\">Page variables</h3>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;title&gt;\n {{ page.title }}\n&lt;/title&gt;\n</code></pre>\n\n<h3 id=\"filters\">Filters</h3>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;p&gt;\n {{ page.description | truncate_words: 20 }}\n&lt;/p&gt;\n</code></pre>\n\n<h3 id=\"loops\">Loops</h3>\n\n<pre data-line=\"1,6\"><code class=\"language-html\">{% for post in site.posts %}\n &lt;a href=\"{{ post.url }}\"&gt;\n &lt;h2&gt;{{ post.title }}&lt;/h2&gt;\n &lt;p&gt;{{ post.date | date_to_string }}&lt;/p&gt;\n &lt;/a&gt;\n{% endfor %}\n</code></pre>\n\n<h3 id=\"dates\">Dates</h3>\n\n<pre><code class=\"language-html\">{{ page.date | date: \"%b %d, %Y\" }}\n</code></pre>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre><code class=\"language-html\">{% if page.image.feature %}\n ...\n{% elsif xyz %}\n ...\n{% else %}\n ...\n{% endif %}\n</code></pre>\n\n<pre><code class=\"language-html\">{% if page.category == 'React' %}\n{% if page.category == 'React' or page.featured %}\n{% if page.tags contains 'Featured' %}\n</code></pre>\n\n<h3 id=\"case\">Case</h3>\n\n<pre data-line=\"1,2,4,6,8\"><code class=\"language-html\">{% case shipping.title %}\n {% when 'international' %}\n Arriving in 2-3 weeks\n {% when 'Domestic' %}\n Arriving in 2-3 days\n {% else %}\n Thank you for your order!\n{% endcase %}\n</code></pre>\n\n<h3 id=\"includes-partials\">Includes (partials)</h3>\n\n<pre data-line=\"1\"><code>{% include header.html %}\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;!-- Including local vars --&gt;\n{% include header.html page=page %}\n</code></pre>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre data-line=\"1,3\"><code class=\"language-html\">{% comment %}\n This is a comment!\n{% endcomment %}\n</code></pre>\n\n<h2 id=\"variables\">Variables</h2>\n\n<h3 id=\"top-level-variables\">Top-level variables</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>{{ site }}</code></td>\n <td>Data from <code>config.yml</code></td>\n </tr>\n <tr>\n <td><code>{{ page }}</code></td>\n <td>From frontmatter, and page-specific info</td>\n </tr>\n <tr>\n <td><code>{{ content }}</code></td>\n <td>HTML content (use in layouts)</td>\n </tr>\n <tr>\n <td><code>{{ paginator }}</code></td>\n <td>Paginator</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/variables/\">Variables</a></p>\n\n<h3 id=\"site\">Site</h3>\n\n<pre class=\"-setup\"><code class=\"language-html\">{{ site.time }}\n</code></pre>\n\n<table>\n <tbody>\n <tr>\n <td><code>site.time</code></td>\n <td>Current time</td>\n </tr>\n <tr>\n <td><code>site.pages</code></td>\n <td>List of pages</td>\n </tr>\n <tr>\n <td><code>site.posts</code></td>\n <td>List of blog posts</td>\n </tr>\n <tr>\n <td><code>site.related_posts</code></td>\n <td>List of posts related to current</td>\n </tr>\n <tr>\n <td><code>site.categories.CATEGORY</code></td>\n <td>List</td>\n </tr>\n <tr>\n <td><code>site.tags.TAG</code></td>\n <td>List</td>\n </tr>\n <tr>\n <td><code>site.static_files</code></td>\n <td>List</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"page\">Page</h3>\n\n<pre><code class=\"language-html\">{{ page.content }} - un-rendered content\n{{ page.title }}\n{{ page.excerpt }} - un-rendered excerpt\n{{ page.url }}\n{{ page.date }}\n{{ page.id }} - unique id for RSS feeds\n{{ page.categories }}\n{{ page.tags }}\n{{ page.path }}\n{{ page.dir }}\n{{ page.excerpt | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' }}\n{{ page.excerpt | strip_html }}\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- blog pagination: --&gt;\n{{ page.next }}\n{{ page.previous }}\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"filters-1\">Filters</h2>\n\n<h3 id=\"dates-1\">Dates</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">{{ site.time | date: \"%Y %m %d\" }}\n</code></pre>\n\n<table>\n <tbody>\n <tr>\n <td><code>date_to_xmlschema</code></td>\n <td>→ <code>2008-11-07T13:07:54-08:00</code></td>\n </tr>\n <tr>\n <td><code>date_to_rfc822</code></td>\n <td>→ <code>Mon, 07 Nov 2008 13:07:54 -0800</code></td>\n </tr>\n <tr>\n <td><code>date_to_string</code></td>\n <td>→ <code>07 Nov 2008</code></td>\n </tr>\n <tr>\n <td><code>date_to_long_string</code></td>\n <td>→ <code>07 November 2008</code></td>\n </tr>\n <tr>\n <td><code>date:</code> <em>‘%Y %m %d’</em></td>\n <td>→ <code>2017 Nov 7</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"preprocessors\">Preprocessors</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">{{ page.description | markdownify }}\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Filter</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>textilize</code></td>\n <td>Textile</td>\n </tr>\n <tr>\n <td><code>markdownify</code></td>\n <td>Markdown</td>\n </tr>\n <tr>\n <td><code>jsonify</code></td>\n <td>JSON</td>\n </tr>\n <tr>\n <td><code>sassify</code></td>\n <td>Sass</td>\n </tr>\n <tr>\n <td><code>scssify</code></td>\n <td>SCSS</td>\n </tr>\n <tr>\n <td><code>smartify</code></td>\n <td>Smartypants</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"array-filters\">Array filters</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">{{ site.pages | where: \"year\", \"2014\" }}\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Filter</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>where:</code> <em>“year”, “2014”</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>where_exp:</code> <em>“item”, “item.year &gt;= 2014”</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>group_by:</code> <em>“genre”</em></td>\n <td>→ <code>{name, items}</code></td>\n </tr>\n <tr>\n <td><code>group_by_exp:</code> <em>“item”, “item.genre”</em></td>\n <td>→ <code>{name, items}</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>sort</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>sort:</code> <em>‘author’</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>uniq</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>first</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>last</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>join:</code> <em>’,’</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>array_to_sentence_string</code></td>\n <td>→ <code>\"X, Y and Z\"</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>map:</code> <em>‘post’</em></td>\n <td>Works like ‘pluck’</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>size</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>push:</code> <em>‘xxx’</em></td>\n <td>Adds an item</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"string-filters\">String filters</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">{{ page.title | default: \"xxx\" }}\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Filter</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>default:</code> <em>‘xxx’</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>upcase</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>downcase</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>remove:</code> <em>‘p’</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>replace:</code> <em>‘super’, ‘mega’</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>remove_first:</code> <em>‘p’</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>replace_first:</code> <em>‘super’, ‘mega’</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>truncate:</code> <em>5</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>truncatewords:</code> <em>20</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>prepend:</code> <em>‘Mr. ‘</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>append:</code> <em>‘Jr.’</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>camelize</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>capitalize</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>strip_html</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>strip_newlines</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>newlines_to_br</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>split:</code> <em>’,’</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>escape</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>escape_once</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>slice:</code> <em>-3, 3</em></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://docs.shopify.com/themes/liquid-documentation/filters\">String filters</a></p>\n\n<h3 id=\"string-filters-jekyll-only\">String filters (Jekyll-only)</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">{{ page.excerpt | number_of_words }}\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Filter</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>number_of_words</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>slugify</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>xml_escape</code></td>\n <td>→ <code>CDATA</code></td>\n </tr>\n <tr>\n <td><code>cgi_escape</code></td>\n <td>→ <code>foo%2Cbar</code></td>\n </tr>\n <tr>\n <td><code>uri_escape</code></td>\n <td>→ <code>foo,%20bar</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre class=\"-setup\"><code>{{ site.posts.size | minus: 2 }}\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Filter</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>minus:</code> <em>2</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>plus:</code> <em>2</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>times:</code> <em>2</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>divided_by:</code> <em>2</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>modulo:</code> <em>2</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>ceil</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>floor</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>round</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"paginator\">Paginator</h2>\n\n<h3 id=\"paginator-setup\">Paginator setup</h3>\n\n<p class=\"-setup\">Add this to <code>_config.yml</code>:</p>\n\n<pre><code class=\"language-yml\">paginate: 5\npaginate_path: \"blog/:num\"\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/pagination/\">Paginator</a></p>\n\n<h3 id=\"numbers-1\">Numbers</h3>\n\n<pre><code>{{ paginator.page }} - page number\n{{ paginator.total_posts }}\n{{ paginator.total_pages }}\n{{ paginator.per_page }}\n</code></pre>\n\n<h3 id=\"iterating-through-posts\">Iterating through posts</h3>\n\n<pre><code>{% for post in paginator.posts %} ... {% endfor %}\n</code></pre>\n\n<h3 id=\"previous-button\">Previous button</h3>\n\n<pre><code>{% if paginator.total_pages &gt; 1 %}\n {% if paginator.previous_page %}\n &lt;a href=\"{{ paginator.previous_page_path }}\"&gt;Previous&lt;/a&gt;\n {% else %}\n {% endif %}\n{% endif %}\n</code></pre>\n\n<pre><code>{{ paginator.next_page }} - page number\n{{ paginator.next_page_path }}\n</code></pre>\n\n<h2 id=\"blogging\">Blogging</h2>\n\n<h3 id=\"paths\">Paths</h3>\n\n<pre><code>_posts/YEAR-MONTH-DAY-title.md\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/posts/\">Blogging</a></p>\n\n<h3 id=\"image-paths\">Image paths</h3>\n\n<pre><code>![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/posts/#including-images-and-resources\">Image paths</a></p>\n\n<h3 id=\"drafts\">Drafts</h3>\n\n<pre><code>vi _drafts/a-draft-post.md\njekyll build --drafts\n</code></pre>\n\n<p>Posts in <code>_drafts</code> only show up in development, but not production.\nSee: <a href=\"http://jekyllrb.com/docs/drafts/\">Drafts</a></p>\n\n<h3 id=\"defining-excerpts\">Defining excerpts</h3>\n\n<pre><code>---\ntitle: My blog post\nexcerpt: This post is about cats\n---\n\nHello, let's talk about cats. (···)\n</code></pre>\n\n<p>Put a key <code>excerpt</code> in the frontmatter.\nSee: <a href=\"http://jekyllrb.com/docs/posts/#post-excerpts\">Excerpts</a></p>\n\n<h3 id=\"displaying-excerpts\">Displaying excerpts</h3>\n\n<pre><code class=\"language-html\">{{ post.excerpt }}\n</code></pre>\n\n<pre><code class=\"language-html\">{{ post.excerpt | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' }}\n{{ post.excerpt | strip_html }}\n</code></pre>\n\n<h3 id=\"excerpt-separator\">Excerpt separator</h3>\n\n<pre><code class=\"language-html\">---\nexcerpt_separator: &lt;!--more--&gt;\n---\n\nExcerpt here\n&lt;!--more--&gt;\nMore post body here\n</code></pre>\n\n<p>Alternatively, you can put excerpts inline in your post by defining <code>excerpt_separator</code>.</p>\n\n<h3 id=\"permalinks\">Permalinks</h3>\n\n<pre><code># _config.yml\npermalink: date # /:categories/:year/:month/:day/:title.html\npermalink: pretty # /:categories/:year/:month/:day/:title/\npermalink: none # /:categories/:title.html\npermalink: \"/:title\"\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/permalinks/\">Permalinks</a></p>\n\n<h2 id=\"more-features\">More features</h2>\n\n<h3 id=\"data\">Data</h3>\n\n<pre class=\"-setup\"><code>_data/members.yml\n</code></pre>\n\n<pre><code>{% for member in site.data.members %}\n ...\n{% endfor %}\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/datafiles/\">Data</a></p>\n\n<h3 id=\"collections\">Collections</h3>\n\n<pre class=\"-setup\"><code class=\"language-yml\"># _config.yml\ncollections:\n - authors\n</code></pre>\n\n<pre><code class=\"language-yml\"># _/authors/a-n-roquelaire.md\n---\nname: A. N. Roquelaire\nreal_name: Anne Rice\n---\n</code></pre>\n\n<pre><code>{% for author in site.authors %}\n</code></pre>\n\n<p>See: <a href=\"http://jekyllrb.com/docs/collections/\">Collections</a></p>\n\n<h3 id=\"code-highlighter\">Code highlighter</h3>\n\n<pre><code class=\"language-html\">{% highlight ruby linenos %}\ndef show\n ...\nend\n{% endhighlight %}\n</code></pre>\n\n<h2 id=\"integration\">Integration</h2>\n\n<h3 id=\"bundler\">Bundler</h3>\n\n<p class=\"-setup\">In <code>_plugins/bundler.rb</code>:</p>\n\n<pre><code class=\"language-ruby\">require \"bunder/setup\"\nBundler.require :default\n</code></pre>\n\n<h3 id=\"compass\">Compass</h3>\n\n<ul>\n <li><a href=\"https://gist.github.com/parkr/2874934\">Compass</a></li>\n <li><a href=\"https://github.com/matthodan/jekyll-asset-pipeline\">Asset pipeline</a></li>\n</ul>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://jekyllrb.com/docs/home/\">Jekyll docs</a> <em>jekyllrb.com</em></li>\n <li><a href=\"https://learn.cloudcannon.com/jekyll-cheat-sheet/\">CloudCannon Jekyll cheatsheet</a> <em>cloudcannon.com</em></li>\n <li><a href=\"http://jekyllrb.com/docs/templates/\">Jekyll: templates</a> <em>jekyllrb.com</em></li>\n <li><a href=\"http://docs.shopify.com/themes/liquid-basics/output\">Liquid: output</a> <em>shopify.com</em></li>\n <li><a href=\"http://docs.shopify.com/themes/liquid-basics/logic\">Liquid: logic</a> <em>shopify.com</em></li>\n <li><a href=\"http://docs.shopify.com/themes/liquid-documentation/filters\">Liquid: filters</a> <em>shopify.com</em></li>\n <li><a href=\"https://github.com/Shopify/liquid/wiki/Liquid-for-Designers\">Liquid for designers</a> <em>github.com/Shopify</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-01"
},{
"id": "jest",
"title": "Jest",
"url": "/jest",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"testing\">Testing</h2>\n\n<h3 class=\"-prime\" id=\"quick-start\">Quick start</h3>\n\n<pre data-line=\"1\"><code class=\"language-bash\">npm install --save-dev jest babel-jest\n</code></pre>\n\n<pre><code class=\"language-js\">/* Add to package.json */\n\"scripts\": {\n \"test\": \"jest\"\n}\n</code></pre>\n\n<pre><code class=\"language-bash\"># Run your tests\nnpm test -- --watch\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/getting-started.html\">Getting started</a></p>\n\n<h3 id=\"writing-tests\">Writing tests</h3>\n\n<pre><code class=\"language-js\">describe('My work', () =&gt; {\n test('works', () =&gt; {\n expect(2).toEqual(2)\n })\n})\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/api.html#describename-fn\">describe()</a>, <a href=\"http://facebook.github.io/jest/docs/en/api.html#testname-fn\">test()</a>, <a href=\"http://facebook.github.io/jest/docs/en/expect.html#content\">expect()</a></p>\n\n<h3 id=\"bdd-syntax\">BDD syntax</h3>\n\n<pre><code class=\"language-js\">describe('My work', () =&gt; {\n it('works', () =&gt; {\n ···\n })\n})\n</code></pre>\n\n<p><code>it</code> is an alias for <code>test</code>.\nSee: <a href=\"http://facebook.github.io/jest/docs/en/api.html#testname-fn\">test()</a></p>\n\n<h3 id=\"setup\">Setup</h3>\n\n<pre><code class=\"language-js\">beforeEach(() =&gt; { ... })\nafterEach(() =&gt; { ... })\n</code></pre>\n\n<pre><code class=\"language-js\">beforeAll(() =&gt; { ... })\nafterAll(() =&gt; { ... })\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/api.html#afterallfn\">afterAll() and more</a></p>\n\n<h3 id=\"focusing-tests\">Focusing tests</h3>\n\n<pre><code class=\"language-js\">describe.only(···)\nit.only(···) // alias: fit()\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/api.html#testonlyname-fn\">test.only</a></p>\n\n<h3 id=\"skipping-tests\">Skipping tests</h3>\n\n<pre><code class=\"language-js\">describe.skip(···)\nit.skip(···) // alias: xit()\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/api.html#testskipname-fn\">test.skip</a></p>\n\n<h3 id=\"optional-flags\">Optional flags</h3>\n\n<table>\n <thead>\n <tr>\n <th>Flag</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>--coverage</code></td>\n <td>See a summary of test coverage</td>\n </tr>\n <tr>\n <td><code>--detectOpenHandles</code></td>\n <td>See a summary of ports that didn’t close</td>\n </tr>\n <tr>\n <td><code>--runInBand</code></td>\n <td>Run all tests one after the other</td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-three-column\" id=\"expect\">Expect</h2>\n\n<h3 id=\"basic-expectations\">Basic expectations</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .not\n .toBe(value)\n .toEqual(value)\n .toBeTruthy()\n</code></pre>\n\n<p>Note that <code>toEqual</code> is a deep equality check.\nSee: <a href=\"http://facebook.github.io/jest/docs/en/expect.html#expectvalue\">expect()</a></p>\n\n<h3 id=\"snapshots\">Snapshots</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toMatchSnapshot()\n .toMatchInlineSnapshot()\n</code></pre>\n\n<p>Note that <code>toMatchInlineSnapshot()</code> requires Prettier to be set up for the project.\nSee: <a href=\"https://jestjs.io/docs/en/snapshot-testing#inline-snapshots\">Inline snapshots</a></p>\n\n<h3 id=\"errors\">Errors</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toThrow(error)\n .toThrowErrorMatchingSnapshot()\n</code></pre>\n\n<h3 id=\"booleans\">Booleans</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toBeFalsy()\n .toBeNull()\n .toBeTruthy()\n .toBeUndefined()\n .toBeDefined()\n</code></pre>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toBeCloseTo(number, numDigits)\n .toBeGreaterThan(number)\n .toBeGreaterThanOrEqual(number)\n .toBeLessThan(number)\n .toBeLessThanOrEqual(number)\n</code></pre>\n\n<h3 id=\"objects\">Objects</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toBeInstanceOf(Class)\n .toMatchObject(object)\n .toHaveProperty(keyPath, value)\n</code></pre>\n\n<h3 id=\"objects-1\">Objects</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toContain(item)\n .toContainEqual(item)\n .toHaveLength(number)\n</code></pre>\n\n<h3 id=\"strings\">Strings</h3>\n\n<pre><code class=\"language-js\">expect(value)\n .toMatch(regexpOrString)\n</code></pre>\n\n<h3 id=\"others\">Others</h3>\n\n<pre><code class=\"language-js\">expect.extend(matchers)\nexpect.any(constructor)\nexpect.addSnapshotSerializer(serializer)\n\nexpect.assertions(1)\n</code></pre>\n\n<h2 id=\"more-features\">More features</h2>\n\n<h3 id=\"asynchronous-tests\">Asynchronous tests</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">test('works with promises', () =&gt; {\n return new Promise((resolve, reject) =&gt; {\n ···\n })\n})\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-js\">test('works with async/await', async () =&gt; {\n const hello = await foo()\n ···\n})\n</code></pre>\n\n<p>Return promises, or use async/await.\nSee: <a href=\"http://facebook.github.io/jest/docs/en/tutorial-async.html\">Async tutorial</a></p>\n\n<h3 id=\"snapshots-1\">Snapshots</h3>\n\n<pre data-line=\"3\"><code class=\"language-jsx\">it('works', () =&gt; {\n const output = something()\n expect(output).toMatchSnapshot()\n})\n</code></pre>\n\n<p>First run creates a snapshot. Subsequent runs match the saved snapshot.\nSee: <a href=\"http://facebook.github.io/jest/docs/en/snapshot-testing.html\">Snapshot testing</a></p>\n\n<h3 id=\"react-test-renderer\">React test renderer</h3>\n\n<pre class=\"-setup\"><code class=\"language-jsx\">import renderer from 'react-test-renderer'\n</code></pre>\n\n<pre data-line=\"2,3,4\"><code class=\"language-jsx\">it('works', () =&gt; {\n const tree = renderer.create(\n &lt;Link page=\"http://www.facebook.com\"&gt;Facebook&lt;/Link&gt;\n ).toJSON()\n\n expect(tree).toMatchSnapshot()\n})\n</code></pre>\n\n<p>React’s test renderer can be used for Jest snapshots.\nSee: <a href=\"http://facebook.github.io/jest/docs/en/tutorial-react-native.html#snapshot-test\">Snapshot test</a></p>\n\n<h3 id=\"timers\">Timers</h3>\n\n<pre><code class=\"language-js\">jest.useFakeTimers()\n</code></pre>\n\n<pre><code class=\"language-js\">it('works', () =&gt; {\n jest.runOnlyPendingTimers()\n jest.runTimersToTime(1000)\n jest.runAllTimers()\n})\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/timer-mocks.html\">Timer Mocks</a></p>\n\n<h2 id=\"mock-functions\">Mock functions</h2>\n\n<h3 id=\"mock-functions-1\">Mock functions</h3>\n\n<pre><code class=\"language-js\">const fn = jest.fn()\n</code></pre>\n\n<pre><code class=\"language-js\">const fn = jest.fn(n =&gt; n * n)\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/mock-functions.html#using-a-mock-function\">Mock functions</a></p>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code class=\"language-js\">expect(fn)\n .toHaveBeenCalled()\n .toHaveBeenCalledTimes(number)\n .toHaveBeenCalledWith(arg1, arg2, ...)\n .toHaveBeenLastCalledWith(arg1, arg2, ...)\n</code></pre>\n\n<pre><code class=\"language-js\">expect(fn)\n .toHaveBeenCalledWith(expect.anything())\n .toHaveBeenCalledWith(expect.any(constructor))\n .toHaveBeenCalledWith(expect.arrayContaining([ values ]))\n .toHaveBeenCalledWith(expect.objectContaining({ props }))\n .toHaveBeenCalledWith(expect.stringContaining(string))\n .toHaveBeenCalledWith(expect.stringMatching(regexp))\n</code></pre>\n\n<h3 id=\"instances\">Instances</h3>\n\n<pre><code class=\"language-js\">const Fn = jest.fn()\n\na = new Fn()\nb = new Fn()\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-js\">Fn.mock.instances\n// → [a, b]\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/mock-functions.html#mock-property\">.mock property</a></p>\n\n<h3 id=\"calls\">Calls</h3>\n\n<pre><code class=\"language-js\">const fn = jest.fn()\nfn(123)\nfn(456)\n</code></pre>\n\n<pre data-line=\"1,2,3\"><code class=\"language-js\">fn.mock.calls.length // → 2\nfn.mock.calls[0][0] // → 123\nfn.mock.calls[1][0] // → 456\n</code></pre>\n\n<p>See: <a href=\"http://facebook.github.io/jest/docs/en/mock-functions.html#mock-property\">.mock property</a></p>\n\n<h3 id=\"return-values\">Return values</h3>\n\n<pre><code class=\"language-js\">const fn = jest.fn(() =&gt; 'hello')\n</code></pre>\n\n<h4 id=\"or\">or:</h4>\n\n<pre><code class=\"language-js\">jest.fn().mockReturnValue('hello')\njest.fn().mockReturnValueOnce('hello')\n</code></pre>\n\n<h3 id=\"mock-implementations\">Mock implementations</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">const fn = jest.fn()\n .mockImplementationOnce(() =&gt; 1)\n .mockImplementationOnce(() =&gt; 2)\n</code></pre>\n\n<pre><code class=\"language-js\">fn() // → 1\nfn() // → 2\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://facebook.github.io/jest/\">http://facebook.github.io/jest/</a></li>\n</ul>",
"intro_html": "<p>A quick overview to <a href=\"https://facebook.github.io/jest/\">Jest</a>, a test framework for Node.js. This guide targets Jest v20.</p>",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-01"
},{
"id": "jquery-cdn",
"title": "jQuery CDN",
"url": "/jquery-cdn",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"google-jquery\">Google jQuery</h3>\n\n<pre><code>&lt;script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"&gt;&lt;/script&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jquery",
"title": "jQuery",
"url": "/jquery",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"traversing\">Traversing</h3>\n\n<pre><code class=\"language-js\">$('.box')\n .children()\n .closest('div')\n .filter(':selected')\n .find('div')\n .has('div')\n .first()\n .next('div')\n .nextUntil('div')\n</code></pre>\n\n<h2 id=\"advanced-features\">Advanced features</h2>\n\n<h3 id=\"extending-selectors\">Extending selectors</h3>\n\n<pre><code class=\"language-js\">$.expr[':'].inline = function (el) {\n return $(el).css('display') === 'inline'\n}\n</code></pre>\n\n<p>Enables <code>$(':inline')</code></p>\n\n<h3 id=\"extend-css-properties\">Extend CSS properties</h3>\n\n<pre><code class=\"language-js\">$.cssHooks.someCSSProp = {\n get: function (elem, computed, extra) {\n },\n set: function (elem, value) {\n }\n}\n\n// Disable \"px\"\n$.cssNumber[\"someCSSProp\"] = true\n</code></pre>\n\n<h3 id=\"fnanimate-hooks\">fn.animate() hooks</h3>\n\n<pre><code class=\"language-js\">$.fn.step.someWhatever = function(fx) {\n // ...\n}\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": null
},{
"id": "js-appcache",
"title": "applicationCache",
"url": "/js-appcache",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"reference\">Reference</h2>\n\n<h3 id=\"applicationcache-checking\">applicationCache checking</h3>\n\n<pre><code class=\"language-js\">if (window.applicationCache) {\n // \"Naturally\" reload when an update is available\n var reload = false\n\n window.applicationCache.addEventListener('updateready', () =&gt; {\n if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {\n window.applicationCache.swapCache()\n reload = true\n }\n }, false)\n\n setInterval(() =&gt; {\n try {\n // There's nothing to update for first-time load, browser freaks out :/\n window.applicationCache.update()\n } catch (e) { }\n }, 1000 * 60 * 60) // Every hour\n}\n</code></pre>\n\n<p>This is a deprecated HTML feature. See: <a href=\"https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache\">Using the application cache</a> <em>(developer.mozilla.org)</em></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-array",
"title": "JavaScript Arrays",
"url": "/js-array",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"arrays\">Arrays</h3>\n\n<pre class=\"-setup\"><code class=\"language-bash\">list = [a,b,c,d,e]\n</code></pre>\n\n<pre><code class=\"language-bash\">list[1] // → b\nlist.indexOf(b) // → 1\n</code></pre>\n\n<h3 id=\"subsets\">Subsets</h3>\n\n<h4 id=\"immutable\">Immutable</h4>\n\n<pre><code class=\"language-bash\">list.slice(0,1) // → [a ]\nlist.slice(1) // → [ b,c,d,e]\nlist.slice(1,2) // → [ b ]\n</code></pre>\n\n<h4 id=\"mutative\">Mutative</h4>\n\n<pre><code class=\"language-bash\">re = list.splice(1) // re = [b,c,d,e] list == [a]\nre = list.splice(1,2) // re = [b,c] list == [a,d,e]\n</code></pre>\n\n<h3 id=\"adding-items\">Adding items</h3>\n\n<h4 id=\"immutable-1\">Immutable</h4>\n\n<pre><code class=\"language-bash\">list.concat([X,Y]) // → [_,_,_,_,_,X,Y]\n</code></pre>\n\n<h4 id=\"mutative-1\">Mutative</h4>\n\n<pre><code class=\"language-bash\">list.push(X) // list == [_,_,_,_,_,X]\nlist.unshift(X) // list == [X,_,_,_,_,_]\nlist.splice(2, 0, X) // list == [_,_,X,_,_,_]\n</code></pre>\n\n<h3 id=\"inserting\">Inserting</h3>\n\n<pre><code class=\"language-bash\">// after -- [_,_,REF,NEW,_,_]\nlist.splice(list.indexOf(REF)+1, 0, NEW))\n</code></pre>\n\n<pre><code class=\"language-bash\">// before -- [_,_,NEW,REF,_,_]\nlist.splice(list.indexOf(REF), 0, NEW))\n</code></pre>\n\n<h3 id=\"replace-items\">Replace items</h3>\n\n<pre><code class=\"language-bash\">list.splice(2, 1, X) // list == [a,b,X,d,e]\n</code></pre>\n\n<h3 id=\"removing-items\">Removing items</h3>\n\n<pre><code class=\"language-bash\">list.pop() // → e list == [a,b,c,d]\nlist.shift() // → a list == [b,c,d,e]\nlist.splice(2, 1) // → [c] list == [a,b,d,e]\n</code></pre>\n\n<h3 id=\"iterables\">Iterables</h3>\n\n<pre><code class=\"language-bash\">.filter(n =&gt; ...) =&gt; array\n</code></pre>\n\n<pre><code class=\"language-bash\">.find(n =&gt; ...) // es6\n.findIndex(...) // es6\n</code></pre>\n\n<pre><code class=\"language-bash\">.every(n =&gt; ...) =&gt; Boolean // ie9+\n.some(n =&gt; ..) =&gt; Boolean // ie9+\n</code></pre>\n\n<pre><code class=\"language-bash\">.map(n =&gt; ...) // ie9+\n.reduce((total, n) =&gt; total) // ie9+\n.reduceRight(...)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-date",
"title": "JavaScript Date",
"url": "/js-date",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 class=\"-left-reference\" id=\"date\">Date</h2>\n\n<h3 id=\"constructor\">Constructor</h3>\n\n<pre><code class=\"language-js\">// Now\nnew Date()\n</code></pre>\n\n<pre><code class=\"language-js\">// ms since epoch\nnew Date(1419785527580)\n</code></pre>\n\n<pre><code class=\"language-js\">// Date format\nnew Date(\"May 17, 1995 03:24:00\")\n</code></pre>\n\n<pre><code class=\"language-js\">// ISO date format\nnew Date(\"2013-03-01T01:10:00\")\n</code></pre>\n\n<pre><code class=\"language-js\">new Date(2014, 2, 1, 13, 0, 59, 0)\n</code></pre>\n\n<h3 id=\"constructor-1\">Constructor</h3>\n\n<table class=\"-css-breakdown\">\n <tbody>\n <tr>\n <td><code>new Date(</code></td>\n <td><code>2014,</code></td>\n <td><code>2,</code></td>\n <td><code>1,</code></td>\n <td><code>13,</code></td>\n <td><code>0,</code></td>\n <td><code>59,</code></td>\n <td><code>0)</code></td>\n </tr>\n <tr>\n <td>Date</td>\n <td>Year</td>\n <td>Month</td>\n <td>Day</td>\n <td>Hour</td>\n <td>Min</td>\n <td>Sec</td>\n <td>Milli</td>\n </tr>\n </tbody>\n</table>\n\n<p>Months are zero-indexed (eg, January is <code>0</code>).</p>\n\n<h3 id=\"conversion\">Conversion</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Result</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d.toString()</code></td>\n <td><code>\"Mon Dec 29 2014 00:58:28 GMT+0800 (PHT)\"</code></td>\n </tr>\n <tr>\n <td><code>d.toTimeString()</code></td>\n <td><code>\"00:58:46 GMT+0800 (PHT)\"</code></td>\n </tr>\n <tr>\n <td><code>d.toUTCString()</code></td>\n <td><code>\"Sun, 28 Dec 2014 16:58:59 GMT\"</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>d.toDateString()</code></td>\n <td><code>\"Thu Jan 10 2013\"</code></td>\n </tr>\n <tr>\n <td><code>d.toISOString()</code></td>\n <td><code>\"2013-01-09T16:00:00.000Z\"</code></td>\n </tr>\n <tr>\n <td><code>d.toLocaleString()</code></td>\n <td><code>\"12/29/2014, 12:57:31 AM\"</code></td>\n </tr>\n <tr>\n <td><code>d.toLocaleTimeString()</code></td>\n <td><code>\"12:57:31 AM\"</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>d.getTime()</code></td>\n <td><code>1419785527580</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"accessing\">Accessing</h2>\n\n<h3 id=\"getters\">Getters</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Result</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.getDate()</code></td>\n <td><code>1..31</code></td>\n </tr>\n <tr>\n <td><code>.getDay()</code></td>\n <td><code>0..6</code> (sun..sat)</td>\n </tr>\n <tr>\n <td><code>.getFullYear()</code></td>\n <td><code>2014</code></td>\n </tr>\n <tr>\n <td><code>.getMonth()</code></td>\n <td><code>0..11</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>.getHours()</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.getMinutes()</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.getSeconds()</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.getMilliseconds()</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>.getTime()</code></td>\n <td>ms since epoch</td>\n </tr>\n <tr>\n <td><code>.getTimezoneOffset()</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<p>UTC versions are also available (eg, <code>.getUTCDate()</code>, <code>.getUTCDay()</code>, etc).</p>\n\n<h3 id=\"setters\">Setters</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Result</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.setDate</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setDay</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setFullYear</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setMonth</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>.setHours</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setMinutes</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setSeconds</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setMilliseconds</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>.setTime</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>.setTimezoneOffset</code> <em>(val)</em></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<p>See the getters list.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-fetch",
"title": "fetch()",
"url": "/js-fetch",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"fetch\">Fetch</h3>\n\n<pre data-line=\"4\"><code class=\"language-js\">fetch('/data.json')\n .then(response =&gt; response.json())\n .then(data =&gt; {\n console.log(data)\n })\n .catch(err =&gt; ...)\n</code></pre>\n\n<h3 id=\"response\">Response</h3>\n\n<pre><code class=\"language-js\">fetch('/data.json')\n.then(res =&gt; {\n res.text() // response body (=&gt; Promise)\n res.json() // parse via JSON (=&gt; Promise)\n res.status //=&gt; 200\n res.statusText //=&gt; 'OK'\n res.redirected //=&gt; false\n res.ok //=&gt; true\n res.url //=&gt; 'http://site.com/data.json'\n res.type //=&gt; 'basic'\n // ('cors' 'default' 'error'\n // 'opaque' 'opaqueredirect')\n\n res.headers.get('Content-Type')\n})\n</code></pre>\n\n<h3 id=\"request-options\">Request options</h3>\n\n<pre><code class=\"language-js\">fetch('/data.json', {\n method: 'post',\n body: new FormData(form), // post body\n body: JSON.stringify(...),\n\n headers: {\n 'Accept': 'application/json'\n },\n\n credentials: 'same-origin', // send cookies\n credentials: 'include', // send cookies, even in CORS\n\n})\n</code></pre>\n\n<h3 id=\"catching-errors\">Catching errors</h3>\n\n<pre><code class=\"language-js\">fetch('/data.json')\n .then(checkStatus)\n</code></pre>\n\n<pre><code class=\"language-js\">function checkStatus (res) {\n if (res.status &gt;= 200 &amp;&amp; res.status &lt; 300) {\n return res\n } else {\n let err = new Error(res.statusText)\n err.response = res\n throw err\n }\n}\n</code></pre>\n\n<p>Non-2xx responses are still successful requests. Use another function to turn them to errors.</p>\n\n<h3 id=\"using-with-nodejs\">Using with node.js</h3>\n\n<pre><code class=\"language-js\">const fetch = require('isomorphic-fetch')\n</code></pre>\n\n<p>See: <a href=\"https://npmjs.com/package/isomorphic-fetch\">isomorphic-fetch</a> <em>(npmjs.com)</em></p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://fetch.spec.whatwg.org/\">https://fetch.spec.whatwg.org/</a></li>\n <li><a href=\"https://www.npmjs.com/package/whatwg-fetch\">https://www.npmjs.com/package/whatwg-fetch</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-lazy",
"title": "JavaScript lazy shortcuts",
"url": "/js-lazy",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 class=\"-left-reference\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-js\">n = +'4096' // n === 4096\ns = '' + 200 // s === '200'\n</code></pre>\n\n<pre><code class=\"language-js\">now = +new Date()\nisPublished = !!post.publishedAt\n</code></pre>\n\n<h3 id=\"shortcuts-1\">Shortcuts</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>What</th>\n <th>Lazy mode</th>\n <th>“The right way”</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>String to number</td>\n <td><code>+str</code></td>\n <td><code>parseInt(str, 10)</code> <em>or</em> <code>parseFloat()</code></td>\n </tr>\n <tr>\n <td>Math floor</td>\n <td><code>num | 0</code></td>\n <td><code>Math.floor(num)</code></td>\n </tr>\n <tr>\n <td>Number to string</td>\n <td><code>'' + num</code></td>\n <td><code>num.toString()</code></td>\n </tr>\n <tr>\n <td>Date to UNIX timestamp</td>\n <td><code>+new Date()</code></td>\n <td><code>new Date().getTime()</code></td>\n </tr>\n <tr>\n <td>Any to boolean</td>\n <td><code>!!value</code></td>\n <td><code>Boolean(value)</code></td>\n </tr>\n <tr>\n <td>Check array contents</td>\n <td><code>if (~arr.indexOf(v))</code></td>\n <td><code>if (arr.includes(v))</code></td>\n </tr>\n </tbody>\n</table>\n\n<p><code>.includes</code> is ES6-only, otherwise use <code>.indexOf(val) !== -1</code> if you don’t polyfill.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-model",
"title": "js-model",
"url": "/js-model",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-bash\">Project = Model \"project\", -&gt;\n @extend\n findByTitle: (title) -&gt; ...\n\n @include\n markAsDone: -&gt; ...\n\n # ActiveRecord::Base.include_root_in_json = false\n</code></pre>\n\n<pre><code class=\"language-bash\">project = Project.find(1)\nproject = Project.findByTitle(\"hello\")\n\nproject.markAsDone()\n</code></pre>\n\n<h3 id=\"persistence\">Persistence</h3>\n\n<pre><code class=\"language-bash\">Project \"hi\", -&gt;\n @persistence Model.REST, \"/projects\"\n @persistence Model.localStorage\n</code></pre>\n\n<pre><code class=\"language-bash\">Project.load -&gt;\n # loaded\n</code></pre>\n\n<h3 id=\"attrs\">Attrs</h3>\n\n<pre><code class=\"language-bash\">project = new Project(name: \"Hello\")\n\nproject.attr('name', \"Hey\")\nproject.attr('name')\n\nproject.save()\nproject.destroy()\n</code></pre>\n\n<h3 id=\"collection\">Collection</h3>\n\n<pre><code class=\"language-bash\">Food.add(egg)\nFood.all()\nFood.select (food) -&gt; ...\nFood.first()\n</code></pre>\n\n<pre><code class=\"language-bash\">Food.find(id)\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-bash\"># Classes\nProject.bind \"add\", (obj) -&gt;\nProject.bind \"remove\", (obj) -&gt;\n</code></pre>\n\n<pre><code class=\"language-bash\"># Instances\nproject.bind \"update\", -&gt;\nproject.bind \"destroy\", -&gt;\n</code></pre>\n\n<pre><code class=\"language-bash\">project.trigger \"turn_blue\"\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://benpickles.github.io/js-model/\">http://benpickles.github.io/js-model/</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "js-speech",
"title": "JavaScript speech synthesis",
"url": "/js-speech",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"speechsynthesisutterance\">SpeechSynthesisUtterance</h2>\n\n<pre><code class=\"language-js\">function speak (message) {\n var msg = new SpeechSynthesisUtterance(message)\n var voices = window.speechSynthesis.getVoices()\n msg.voice = voices[0]\n window.speechSynthesis.speak(msg)\n}\n</code></pre>\n\n<pre><code class=\"language-js\">speak('Hello, world')\n</code></pre>\n\n<p>See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance\">SpeechSynthesisUtterance</a> <em>(developer.mozilla.org)</em></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jscoverage",
"title": "jscoverage",
"url": "/jscoverage",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"install\">Install</h3>\n\n<h4 id=\"install-via-npm\">Install via npm</h4>\n\n<pre><code class=\"language-bash\">npm install --save-dev jscoverage\n</code></pre>\n\n<h4 id=\"ignore-output\">Ignore output</h4>\n\n<pre><code class=\"language-bash\">echo coverage.html &gt;&gt; .gitignore\n</code></pre>\n\n<h3 id=\"packagejson\">package.json</h3>\n\n<p class=\"-setup\">The <code>coverage</code> task injects your source files (<code>lib</code>) with jscoverage hooks, runs <code>mocha -R html-cov</code>, then restores later.</p>\n\n<pre class=\"-hard-wrap\"><code class=\"language-bash\">/* directory */\n\"coverage\": \"mv lib lib~; (jscoverage lib~ lib; mocha -R html-cov &gt; coverage.html); rm -rf lib; mv lib~ lib\"\n</code></pre>\n\n<pre class=\"-hard-wrap\"><code class=\"language-bash\">/* single file */\n\"coverage\": \"(cp index.js index.js~; jscoverage index.js; mv index-cov.js index.js; mocha -R html-cov &gt; coverage.html); mv index.js~ index.js\"\n</code></pre>\n\n<h3 id=\"run\">Run</h3>\n\n<pre><code class=\"language-bash\">npm run coverage\n</code></pre>\n\n<pre><code class=\"language-bash\">open coverage.html\n</code></pre>\n\n<h3 id=\"caveats\">Caveats</h3>\n\n<p>If you’re using jsdom, be sure to expose the <code>window._$jscoverage</code> variable into \nthe <code>global</code> scope.</p>",
"intro_html": "<p>A small guide into installing <a href=\"https://npmjs.com/package./jscoverage\">jscoverage</a>. Also see <a href=\"./mocha-blanket\">mocha-blanket</a>.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "jsdoc",
"title": "Jsdoc",
"url": "/jsdoc",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"functions\">Functions</h3>\n\n<pre><code class=\"language-js\">/**\n * This is a function.\n *\n * @param {string} n - A string param\n * @return {string} A good string\n *\n * @example\n *\n * foo('hello')\n */\n\nfunction foo(n) {\n return n\n}\n</code></pre>\n\n<p>See: <a href=\"http://usejsdoc.org/index.html\">http://usejsdoc.org/index.html</a></p>\n\n<h3 id=\"types\">Types</h3>\n\n<table>\n <thead>\n <tr>\n <th>Type</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>@param {string=} n</code></td>\n <td>Optional</td>\n </tr>\n <tr>\n <td><code>@param {string} [n]</code></td>\n <td>Optional</td>\n </tr>\n <tr>\n <td><code>@param {(string|number)} n</code></td>\n <td>Multiple types</td>\n </tr>\n <tr>\n <td><code>@param {*} n</code></td>\n <td>Any type</td>\n </tr>\n <tr>\n <td><code>@param {...string} n</code></td>\n <td>Repeatable arguments</td>\n </tr>\n <tr>\n <td><code>@param {string} [n=\"hi\"]</code></td>\n <td>Optional with default</td>\n </tr>\n <tr>\n <td><code>@param {string[]} n</code></td>\n <td>Array of strings</td>\n </tr>\n <tr>\n <td><code>@return {Promise&lt;string[]&gt;} n</code></td>\n <td>Promise fulfilled by array of strings</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://usejsdoc.org/tags-type.html\">http://usejsdoc.org/tags-type.html</a></p>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-js\">/**\n * @type {number}\n */\nvar FOO = 1\n</code></pre>\n\n<pre><code class=\"language-js\">/**\n * @const {number}\n */\nconst FOO = 1\n</code></pre>\n\n<h3 id=\"typedef\">Typedef</h3>\n\n<pre><code class=\"language-js\">/**\n * A song\n * @typedef {Object} Song\n * @property {string} title - The title\n * @property {string} artist - The artist\n * @property {number} year - The year\n */\n</code></pre>\n\n<pre><code class=\"language-js\">/**\n * Plays a song\n * @param {Song} song - The {@link Song} to be played\n */\n\nfunction play(song) {}\n</code></pre>\n\n<p>See: <a href=\"http://usejsdoc.org/tags-typedef.html\">http://usejsdoc.org/tags-typedef.html</a></p>\n\n<h3 id=\"typedef-shorthand\">Typedef Shorthand</h3>\n\n<pre><code class=\"language-js\">/**\n * A song\n * @typedef {{title: string, artist: string, year: number}} Song\n */\n</code></pre>\n\n<pre><code class=\"language-js\">/**\n * Plays a song\n * @param {Song} song - The {@link Song} to be played\n */\n\nfunction play(song) {}\n</code></pre>\n\n<p>See: <a href=\"http://usejsdoc.org/tags-typedef.html\">http://usejsdoc.org/tags-typedef.html</a></p>\n\n<h3 id=\"importing-types\">Importing types</h3>\n\n<pre><code class=\"language-js\">/**\n * @typedef {import('./Foo').default} Bar\n */\n\n/**\n * @param {Bar} x\n */\n\nfunction test(x) {}\n</code></pre>\n\n<p>This syntax is <a href=\"https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript#import-types\">TypeScript-specific</a>.</p>\n\n<h3 id=\"other-keywords\">Other keywords</h3>\n\n<pre><code class=\"language-js\">/**\n * @throws {FooException}\n * @private\n * @deprecated\n * @see\n *\n * @function\n * @class\n */\n</code></pre>\n\n<h3 id=\"renaming\">Renaming</h3>\n\n<pre><code class=\"language-js\">/*\n * @alias Foo.bar\n * @name Foo.bar\n */\n</code></pre>\n\n<p>Prefer <code>alias</code> over <code>name</code>. See: <a href=\"http://usejsdoc.org/tags-alias.html\">http://usejsdoc.org/tags-alias.html</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2019-01-10"
},{
"id": "jshint",
"title": "Jshint",
"url": "/jshint",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"relaxing\">Relaxing</h3>\n\n<p class=\"-setup\">Enable these options to <em>not</em> throw errors in these conditions.\nSee: <a href=\"http://www.jshint.com/docs/options/#relaxing-options\">Relaxing</a></p>\n\n<pre><code class=\"language-js\">/* jshint asi: true */\nallow()\nmissing_semicolons()\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint boss: true */\nif (m = str.match(/.../))\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint debug: true */\ndebugger;\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint eqnull: true */\nif (x == null)\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint evil: true */\neval('...')\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint expr: true */\nproduction &amp;&amp; minify = true;\ndiv.innerWidth;\nexpect(x).be.true;\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint laxcomma: true */\nvar one = 1\n , two = 2;\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint loopfunc: true */\nfor (i=0; i&lt;10; x++) {\n (function(i) { ... })(i);\n}\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint sub: true */\nprocess.env['name_here']\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint strict: \"global\" */\n\"use strict\";\n</code></pre>\n\n<h3 id=\"enforcing\">Enforcing</h3>\n\n<p class=\"-setup\">Enable these options to catch more errors.\nSee: <a href=\"http://www.jshint.com/docs/options/#enforcing-options\">Enforcing</a></p>\n\n<pre><code class=\"language-js\">/* jshint curly: true */\nwhile (day) // err: use { }'s\n shuffle();\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint eqeqeq: true */\nif (a == null) // err: use ===\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint es3: true */\n// ...for legacy IE compatibility\na.default = function() { ... }; // err: reserved word\narray = [ 1, 2, 3, ]; // err: extra comma\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint forin: true */\nfor (key in obj) { ... } // err: check obj.hasOwnProperty(key)\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint freeze: true */\nArray.prototype.count = ...; // err: don't modify native prototypes\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint indent: 4 */\nif (x) { // err: expected indent of 4, found 2\n ...;\n}\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint quotmark: single */\n/* jshint quotmark: double */\nalert(\"hi\"); // err: only single allowed\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint strict: true */\nfunction() { ... } // err: need \"use strict\"\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint white: true, indent: 4 */\n/* jshint maxdepth: 2 */\n/* jshint maxparams: 3 */\n/* jshint maxstatements: 4 */\n/* jshint maxcomplexity: 5 */\n/* jshint maxlen: 80 */\n</code></pre>\n\n<h3 id=\"ignore\">Ignore</h3>\n\n<pre><code class=\"language-js\">/* jshint ignore:start */\n/* jshint ignore:end */\n</code></pre>\n\n<h3 id=\"globals-and-environments\">Globals and Environments</h3>\n\n<pre><code class=\"language-js\">/* jshint undef: true */\n/* global jQuery */\n/* global -BAD_LIB */\n</code></pre>\n\n<pre><code class=\"language-js\">/* jshint devel: true */ console, alert, ...\n/* jshint browser: true */ window, document, location, ...\n/* jshint node: true */ module, exports, console, process, ...\n/* jshint jquery: true */ jQuery, $\n</code></pre>\n\n<p>See: <a href=\"http://www.jshint.com/docs/options/#environments\">Environments</a></p>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"http://www.jshint.com/docs/options/\">http://www.jshint.com/docs/options/</a></li>\n <li><a href=\"https://gist.github.com/haschek/2595796\">https://gist.github.com/haschek/2595796</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-12"
},{
"id": "knex",
"title": "Knex",
"url": "/knex",
"category": "Databases",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"connect\">Connect</h3>\n\n<pre><code class=\"language-js\">require('knex')({\n client: 'pg',\n connection: 'postgres://user:pass@localhost:5432/dbname'\n})\n</code></pre>\n\n<p>See: <a href=\"#connect-1\">Connect</a></p>\n\n<h3 id=\"create-table\">Create table</h3>\n\n<pre><code class=\"language-js\">knex.schema.createTable('user', (table) =&gt; {\n table.increments('id')\n table.string('name')\n table.integer('age')\n})\n.then(() =&gt; ···)\n</code></pre>\n\n<p>See: <a href=\"#schema\">Schema</a></p>\n\n<h3 id=\"select\">Select</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">knex('users')\n .where({ email: 'hi@example.com' })\n .then(rows =&gt; ···)\n</code></pre>\n\n<p>See: <a href=\"#select-1\">Select</a></p>\n\n<h3 id=\"insert\">Insert</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">knex('users')\n .insert({ email: 'hi@example.com' })\n</code></pre>\n\n<p>See: <a href=\"#insert-1\">Insert</a></p>\n\n<h3 id=\"update\">Update</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">knex('users')\n .where({ id: 135 })\n .update({ email: 'hi@example.com' })\n</code></pre>\n\n<p>See: <a href=\"#update-1\">Update</a></p>\n\n<h3 id=\"migrations\">Migrations</h3>\n\n<pre><code class=\"language-bash\">knex init\nknex migrate:make migration_name\nknex migrate:make migration_name -x ts # Generates a TypeScript migration file\nknex migrate:latest\nknex migrate:rollback\n</code></pre>\n\n<p>See: <a href=\"#migrations-1\">Migrations</a></p>\n\n<h3 id=\"seeds\">Seeds</h3>\n\n<pre><code class=\"language-bash\">knex seed:make seed_name\nknex seed:make seed_name -x ts # Generates a TypeScript seed file\nknex seed:run # Runs all seed files\nknex seed:run --specific=seed-filename.js # Runs a specific seed file\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Seeds\">Seeds</a></p>\n\n<h2 class=\"-three-column\" id=\"connect-1\">Connect</h2>\n\n<h3 id=\"libraries\">Libraries</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>pg</code></td>\n <td>PostgreSQL</td>\n </tr>\n <tr>\n <td><code>mysql</code></td>\n <td>MySQL or MariaDB</td>\n </tr>\n <tr>\n <td><code>sqlite3</code></td>\n <td>Sqlite3</td>\n </tr>\n <tr>\n <td><code>mssql</code></td>\n <td>MSSQL</td>\n </tr>\n </tbody>\n</table>\n\n<p>Install any of these packages along with <code>knex</code>.</p>\n\n<p>See: <a href=\"http://knexjs.org/#Installation-node\">Node.js installation</a></p>\n\n<h3 id=\"connect-via-host\">Connect via host</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">var knex = require('knex')({\n client: 'mysql',\n connection: {\n host: '127.0.0.1',\n user: 'your_database_user',\n password: 'your_database_password',\n database: 'myapp_test'\n },\n pool: { min: 0, max: 7 }\n})\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Installation-client\">Initializing the library</a></p>\n\n<h3 id=\"connect-via-url\">Connect via URL</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">var pg = require('knex')({\n client: 'pg',\n connection: process.env.DATABASE_URL,\n searchPath: 'knex,public',\n pool: { min: 0, max: 7 }\n})\n</code></pre>\n\n<h3 id=\"connect-via-sqlite\">Connect via Sqlite</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-js\">var knex = require('knex')({\n client: 'sqlite3',\n connection: { filename: './mydb.sqlite' }\n})\n</code></pre>\n\n<h2 id=\"select-1\">Select</h2>\n\n<h3 id=\"where\">Where</h3>\n\n<pre><code class=\"language-js\">knex\n .from('books')\n .select('title', 'author', 'year')\n</code></pre>\n\n<h4 id=\"where-1\">Where</h4>\n\n<pre><code class=\"language-js\"> .where('title', 'Hello')\n .where({ title: 'Hello' })\n .whereIn('id', [1, 2, 3])\n .whereNot(···)\n .whereNotIn('id', [1, 2, 3])\n</code></pre>\n\n<h4 id=\"where-conditions\">Where conditions</h4>\n\n<pre><code class=\"language-js\"> .whereNull('updated_at')\n .whereNotNull(···)\n</code></pre>\n\n<pre><code class=\"language-js\"> .whereExists('updated_at')\n .whereNotExists(···)\n</code></pre>\n\n<pre><code class=\"language-js\"> .whereBetween('votes', [1, 100])\n .whereNotBetween(···)\n</code></pre>\n\n<pre><code class=\"language-js\"> .whereRaw('id = ?', [1])\n</code></pre>\n\n<h4 id=\"where-grouping\">Where grouping</h4>\n\n<pre><code class=\"language-js\"> .where(function () {\n this\n .where('id', 1)\n .orWhere('id', '&gt;', 10)\n })\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder-wheres\">Where clauses</a></p>\n\n<h3 id=\"join\">Join</h3>\n\n<pre><code class=\"language-js\">knex('users')\n</code></pre>\n\n<h4 id=\"basic-join\">Basic join</h4>\n\n<pre><code class=\"language-js\"> .join('contacts', 'users.id', '=', 'contacts.id')\n .join('contacts', {'users.id': 'contacts.id'})\n</code></pre>\n\n<h4 id=\"strings\">Strings</h4>\n\n<pre><code class=\"language-js\"> .join('accounts', 'accounts.type', '=', knex.raw('?', ['admin']))\n</code></pre>\n\n<h4 id=\"directions\">Directions</h4>\n\n<pre><code class=\"language-js\"> .leftJoin(···)\n .leftOuterJoin(···)\n .rightJoin(···)\n .rightOuterJoin(···)\n .outerJoin(···)\n .fullOuterJoin(···)\n .crossJoin(···)\n</code></pre>\n\n<h4 id=\"raw\">Raw</h4>\n\n<pre><code class=\"language-js\"> .joinRaw('natural full join table1')\n</code></pre>\n\n<h4 id=\"grouping\">Grouping</h4>\n\n<pre><code class=\"language-js\"> .join('accounts', function () {\n this\n .on('accounts.id', '=', 'users.account_id')\n .orOn('accounts.owner_id', '=', 'users.id')\n\n .onIn('accounts.id', [1, 2, 3, 5, 8])\n .onNotIn(···)\n\n .onNull('accounts.email')\n .onNotNull(···)\n\n .onExists(function () {\n this.select(···)\n })\n .onNotExists(···)\n })\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder-join\">Join methods</a></p>\n\n<h3 id=\"others\">Others</h3>\n\n<pre><code class=\"language-js\">knex('users')\n .distinct()\n</code></pre>\n\n<h4 id=\"group\">Group</h4>\n\n<pre><code class=\"language-js\"> .groupBy('count')\n .groupByRaw('year WITH ROLLUP')\n</code></pre>\n\n<h4 id=\"order\">Order</h4>\n<pre><code class=\"language-js\"> .orderBy('name', 'desc')\n .orderByRaw('name DESC')\n</code></pre>\n\n<h4 id=\"offsetlimit\">Offset/limit</h4>\n\n<pre><code class=\"language-js\"> .offset(10)\n .limit(20)\n</code></pre>\n\n<h4 id=\"having\">Having</h4>\n\n<pre><code class=\"language-js\"> .having('count', '&gt;', 100)\n .havingIn('count', [1, 100])\n</code></pre>\n\n<h4 id=\"union\">Union</h4>\n\n<pre><code class=\"language-js\"> .union(function() {\n this.select(···)\n })\n .unionAll(···)\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder\">Query builder</a></p>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code class=\"language-js\">knex('users')\n .pluck('id')\n .then(ids =&gt; { ··· })\n</code></pre>\n<pre><code class=\"language-js\">knex('users')\n .first()\n .then(user =&gt; { ··· })\n</code></pre>\n\n<h4 id=\"booleans\">Booleans</h4>\n\n<pre><code class=\"language-js\"> .count('active')\n .count('active as is_active')\n</code></pre>\n\n<h4 id=\"numbers\">Numbers</h4>\n\n<pre><code class=\"language-js\"> .min('age')\n .max('age')\n .sum('age')\n .sumDistinct('age')\n .avg('age')\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder\">Query builder</a></p>\n\n<h2 id=\"schema\">Schema</h2>\n\n<h3 id=\"create-table-1\">Create table</h3>\n\n<pre><code class=\"language-js\">knex.schema.createTable('accounts', table =&gt; {\n</code></pre>\n\n<h4 id=\"columns\">Columns</h4>\n\n<pre><code class=\"language-js\"> table.increments('id')\n table.string('account_name')\n table.integer('age')\n table.float('age')\n table.decimal('balance', 8, 2)\n table.boolean('is_admin')\n table.date('birthday')\n table.time('created_at')\n table.timestamp('created_at').defaultTo(knex.fn.now())\n table.json('profile')\n table.jsonb('profile')\n table.uuid('id').primary()\n</code></pre>\n\n<h4 id=\"constraints\">Constraints</h4>\n\n<pre><code class=\"language-js\"> table.unique('email')\n table.unique(['email', 'company_id'])\n table.dropUnique(···)\n</code></pre>\n\n<h4 id=\"indices\">Indices</h4>\n\n<pre><code class=\"language-js\"> table.foreign('company_id')\n .references('companies.id')\n table.dropForeign(···)\n</code></pre>\n\n<h4 id=\"variations\">Variations</h4>\n\n<pre><code class=\"language-js\"> table.integer('user_id')\n .unsigned()\n .references('users.id')\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-js\">})\n.then(() =&gt; ···)\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Schema\">Schema builder</a></p>\n\n<h3 id=\"alter-table\">Alter table</h3>\n\n<pre><code class=\"language-js\">knex.schema.table('accounts', table =&gt; {\n</code></pre>\n\n<h4 id=\"create\">Create</h4>\n\n<pre><code class=\"language-js\"> table.string('first_name')\n</code></pre>\n\n<h4 id=\"alter\">Alter</h4>\n\n<pre><code class=\"language-js\"> table.string('first_name').alter()\n table.renameColumn('admin', 'is_admin')\n</code></pre>\n\n<h4 id=\"drop\">Drop</h4>\n\n<pre><code class=\"language-js\"> table.dropColumn('admin')\n table.dropTimestamps('created_at')\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-js\">})\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Schema\">Schema builder</a></p>\n\n<h3 id=\"other-methods\">Other methods</h3>\n\n<pre><code class=\"language-js\">knex.schema\n .renameTable('persons', 'people')\n .dropTable('persons')\n</code></pre>\n\n<pre><code class=\"language-js\"> .hasTable('users').then(exists =&gt; ···)\n .hasColumn('users', 'id').then(exists =&gt; ···)\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Schema\">Schema builder</a></p>\n\n<h2 class=\"-three-column\" id=\"modifying\">Modifying</h2>\n\n<h3 id=\"insert-1\">Insert</h3>\n\n<pre><code class=\"language-js\">knex('users')\n</code></pre>\n\n<h4 id=\"insert-one\">Insert one</h4>\n\n<pre><code class=\"language-js\"> .insert({ name: 'John' })\n</code></pre>\n\n<h4 id=\"insert-many\">Insert many</h4>\n\n<pre><code class=\"language-js\"> .insert([\n { name: 'Starsky' },\n { name: 'Hutch' }\n ])\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder-insert\">Insert</a></p>\n\n<h3 id=\"update-1\">Update</h3>\n\n<pre><code class=\"language-js\">knex('users')\n .where({ id: 2 })\n .update({ name: 'Homer' })\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder-update\">Update</a></p>\n\n<h3 id=\"delete\">Delete</h3>\n\n<pre><code class=\"language-js\">knex('users')\n .where({ id: 2 })\n .del()\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Builder-del\">Delete</a></p>\n\n<h2 id=\"migrations-1\">Migrations</h2>\n\n<h3 id=\"setting-up\">Setting up</h3>\n\n<h4 id=\"create-knexfilejs\">Create knexfile.js</h4>\n\n<pre><code>./node_modules/.bin/knex init\n</code></pre>\n\n<h4 id=\"create-a-migration\">Create a migration</h4>\n\n<pre><code>knex migrate:make migration_name\nknex migrate:make migration_name --env production\n</code></pre>\n\n<h4 id=\"run-migrations\">Run migrations</h4>\n\n<pre><code>knex migrate:latest\nknex migrate:latest --env production\n</code></pre>\n\n<h4 id=\"rollback\">Rollback</h4>\n\n<pre><code>knex migrate:rollback\nknex migrate:rollback --env production\n</code></pre>\n\n<p>See: <a href=\"http://knexjs.org/#Migrations\">Migrations</a></p>",
"intro_html": "<p><a href=\"http://knexjs.org/\">Knex</a> is an SQL query builder for Node.js.\nThis guide targets v0.13.0.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-23"
},{
"id": "koa",
"title": "Koa",
"url": "/koa",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"reference\">Reference</h3>\n\n<pre><code class=\"language-js\">app.use(function * (next) {\n var ctx = this\n\n ctx.request\n ctx.response\n\n ctx.body = 'hello'\n\n ctx.state.user = yield User.find(id).fetch()\n\n ctx.cookies.set('foo', 'hello', { signed: true })\n ctx.cookies.get('foo')\n\n ctx.throw(403)\n</code></pre>\n\n<h3 id=\"request\">Request</h3>\n\n<pre><code class=\"language-js\"> ctx.header // ctx.headers\n ctx.method // and =\n ctx.url // and =\n ctx.originalUrl\n ctx.origin // =&gt; 'http://example.com'\n ctx.href // =&gt; 'http://example.com/foo?q=hello'\n ctx.path // and =\n ctx.query // { q: 'hello' }\n ctx.query // and =\n ctx.querystring\n ctx.querystring // and =\n ctx.host\n ctx.hostname\n ctx.fresh\n ctx.stale\n ctx.socket\n ctx.protocol\n ctx.secure\n ctx.ip\n ctx.ips\n ctx.subdomains\n ctx.is() // .is('html') .is('text/html')\n ctx.accepts() // .accepts('html') .accepts('html', 'json')\n ctx.acceptsEncodings() // .acceptsEncodings('gzip')\n ctx.acceptsCharsets()\n ctx.acceptsLanguages()\n ctx.get()\n\n ctx.request.type // =&gt; 'image/jpg'\n ctx.request.charset // =&gt; 'utf-8'\n ctx.request.protocol // =&gt; 'https'\n ctx.request.secure // =&gt; true\n ctx.request.ip // (supports X-Forwarded-For if app.proxy)\n ctx.request.ips\n ctx.request.subdomains\n\n ctx.request.fresh\n ctx.request.stale\n</code></pre>\n\n<h3 id=\"response\">Response</h3>\n\n<pre><code class=\"language-js\"> ctx.body = 'hello'\n\n ctx.throw(403)\n ctx.throw('name required', 403)\n ctx.throw(403, 'name required')\n ctx.throw('oops')\n ctx.assert(ctx.state.user, 401, 'You must log in')\n</code></pre>\n\n<h3 id=\"middlewares\">Middlewares</h3>\n\n<pre><code class=\"language-js\">exports.conditionalGet = require('koa-conditional-get');\nexports.responseTime = require('koa-response-time');\nexports.ratelimit = require('koa-ratelimit');\nexports.compress = require('koa-compress');\nexports.rewrite = require('koa-rewrite');\nexports.favicon = require('koa-favicon');\nexports.session = require('koa-session');\nexports.static = require('koa-static');\nexports.logger = require('koa-logger');\nexports.mount = require('koa-mount');\nexports.etag = require('koa-etag');\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "kotlin",
"title": "Kotlin",
"url": "/kotlin",
"category": "Java & JVM",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"variables\">Variables</h2>\n\n<h3 id=\"mutability\">Mutability</h3>\n\n<pre><code class=\"language-kotlin\">var mutableString: String = \"Adam\"\nval immutableString: String = \"Adam\"\nval inferredString = \"Adam\"\n</code></pre>\n\n<h3 id=\"strings\">Strings</h3>\n\n<pre><code class=\"language-kotlin\">val name = \"Adam\"\nval greeting = \"Hello, \" + name\nval greetingTemplate = \"Hello, $name\"\n</code></pre>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre><code class=\"language-kotlin\">val intNum = 10\nval doubleNum = 10.0\nval longNum = 10L\nval floatNum = 10.0F\n</code></pre>\n\n<h3 id=\"booleans\">Booleans</h3>\n\n<pre><code class=\"language-kotlin\">val trueBoolean = true\nval falseBoolean = false\nval andCondition = trueBoolean &amp;&amp; falseBoolean\nval orCondition = trueBoolean || falseBoolean\n</code></pre>\n\n<h3 id=\"static-fields\">Static Fields</h3>\n\n<pre><code class=\"language-kotlin\">class Person {\n companion object {\n val NAME_KEY = \"name_key\"\n }\n}\n\nval key = Person.NAME_KEY\n</code></pre>\n\n<h2 class=\"-two-column\" id=\"null-safety\">Null Safety</h2>\n\n<h3 id=\"nullable-properties\">Nullable properties</h3>\n\n<pre><code class=\"language-kotlin\">val cannotBeNull: String = null // Invalid\nval canBeNull: String? = null // Valid\n\nval cannotBeNull: Int = null // Invalid\nval canBeNull: Int? = null // Valid\n</code></pre>\n\n<h3 id=\"checking-for-null\">Checking for null</h3>\n\n<pre><code class=\"language-kotlin\">val name: String? = \"Adam\"\n\nif (name != null &amp;&amp; name.length &gt; 0) {\n print(\"String length is ${name.length}\")\n} else {\n print(\"String is empty.\")\n}\n</code></pre>\n\n<h3 id=\"safe-operator\">Safe Operator</h3>\n\n<pre><code class=\"language-kotlin\">val nullableStringLength: Int? = nullableString?.length\nval nullableDepartmentHead: String? = person?.department?.head?.name\n</code></pre>\n\n<h3 id=\"elvis-operator\">Elvis Operator</h3>\n\n<pre><code class=\"language-kotlin\">val nonNullStringLength: Int = nullableString?.length ?: 0\nval nonNullDepartmentHead: String = person?.department?.head?.name ?: \"\"\nval nonNullDepartmentHead: String = person?.department?.head?.name.orEmpty()\n</code></pre>\n\n<h3 id=\"safe-casts\">Safe Casts</h3>\n<pre><code class=\"language-kotlin\">// Will not throw ClassCastException\nval nullableCar: Car? = (input as? Car)\n</code></pre>\n\n<h2 class=\"-two-column\" id=\"collections\">Collections</h2>\n\n<h3 id=\"creation\">Creation</h3>\n\n<pre><code class=\"language-kotlin\">val numArray = arrayOf(1, 2, 3)\nval numList = listOf(1, 2, 3)\nval mutableNumList = mutableListOf(1, 2, 3)\n</code></pre>\n\n<h3 id=\"accessing\">Accessing</h3>\n\n<pre><code class=\"language-kotlin\">val firstItem = numList[0]\nval firstItem = numList.first()\nval firstItem = numList.firstOrNull()\n</code></pre>\n\n<h3 id=\"maps\">Maps</h3>\n\n<pre><code class=\"language-kotlin\">val faceCards = mutableMapOf(\"Jack\" to 11, \"Queen\" to 12, \"King\" to 13)\nval jackValue = faceCards[\"Jack\"] // 11\nfaceCards[\"Ace\"] = 1\n</code></pre>\n\n<h3 id=\"mutability-1\">Mutability</h3>\n\n<pre><code class=\"language-kotlin\">val immutableList = listOf(1, 2, 3)\nval mutableList = immutableList.toMutableList()\n\nval immutableMap = mapOf(\"Jack\" to 11, \"Queen\" to 12, \"King\" to 13)\nval mutableMap = immutableMap.toMutableMap()\n</code></pre>\n\n<h3 id=\"iterating\">Iterating</h3>\n\n<pre><code class=\"language-kotlin\">for (item in myList) {\n print(item)\n}\n\nmyList.forEach {\n print(it)\n}\n\nmyList.forEachIndexed { index, item -&gt; \n print(\"Item at $index is: $item\")\n}\n</code></pre>\n\n<h3 id=\"filtering--searching\">Filtering &amp; Searching</h3>\n\n<pre><code class=\"language-kotlin\">val evenNumbers = numList.filter { it % 2 == 0 }\nval containsEven = numList.any { it % 2 == 0 }\nval containsNoEvens = numList.none { it % 2 == 0 }\nval containsNoEvens = numList.all { it % 2 == 1 }\nval firstEvenNumber: Int = numList.first { it % 2 == 0 }\nval firstEvenOrNull: Int? = numList.firstOrNull { it % 2 == 0 }\n</code></pre>\n\n<p>Note: <code>it</code> is the <a href=\"https://kotlinlang.org/docs/reference/lambdas.html#it-implicit-name-of-a-single-parameter\">implicit name for a single parameter</a>.</p>\n\n<h2 class=\"-two-column\" id=\"functions\">Functions</h2>\n\n<h3 id=\"parameters--return-types\">Parameters &amp; Return Types</h3>\n\n<pre><code class=\"language-kotlin\">fun printName() {\n print(\"Adam\")\n}\n\nfun printName(person: Person) {\n print(person.name)\n}\n\nfun getGreeting(person: Person): String {\n return \"Hello, ${person.name}\"\n}\n\nfun getGreeting(person: Person): String = \"Hello, ${person.name}\"\nfun getGreeting(person: Person) = \"Hello, ${person.name}\"\n</code></pre>\n\n<h3 id=\"higher-order-functions\">Higher Order Functions</h3>\n\n<pre><code class=\"language-kotlin\">fun callbackIfTrue(condition: Boolean, callback: () -&gt; Unit) {\n if (condition) {\n callback()\n }\n}\n\ncallbackIfTrue(someBoolean) {\n print(\"Condition was true\")\n}\n</code></pre>\n\n<h3 id=\"extension-functions\">Extension Functions</h3>\n\n<pre><code class=\"language-kotlin\">fun Int.timesTwo(): Int {\n return this * 2\n}\n\nval four = 2.timesTwo()\n</code></pre>\n\n<h3 id=\"default-parameters\">Default Parameters</h3>\n\n<pre><code class=\"language-kotlin\">fun getGreeting(person: Person, intro: String = \"Hello,\") {\n return \"$intro ${person.name}\"\n}\n\n// Returns \"Hello, Adam\"\nval hello = getGreeting(Person(\"Adam\"))\n\n// Returns \"Welcome, Adam\"\nval welcome = getGreeting(Person(\"Adam\"), \"Welcome,\")\n</code></pre>\n\n<h3 id=\"named-parameters\">Named Parameters</h3>\n\n<pre><code class=\"language-kotlin\">class Person(val name: String = \"\", age: Int = 0)\n\n// All valid\nval person = Person()\nval person = Person(\"Adam\", 100)\nval person = Person(name = \"Adam\", age = 100)\nval person = Person(age = 100)\nval person = Person(age = 100, name = \"Adam\")\n</code></pre>\n\n<h3 id=\"static-functions\">Static Functions</h3>\n\n<pre><code class=\"language-kotlin\">class Fragment(val args: Bundle) {\n companion object {\n fun newInstance(args: Bundle): Fragment {\n return Fragment(args)\n }\n }\n}\n\nval fragment = Fragment.newInstance(args)\n</code></pre>\n\n<ul>\n <li><a href=\"https://kotlinlang.org/docs/reference/object-declarations.html#companion-objects\">Companion Objects</a></li>\n</ul>\n\n<h2 class=\"-two-column\" id=\"classes\">Classes</h2>\n\n<h3 id=\"primary-constructor\">Primary Constructor</h3>\n\n<pre><code class=\"language-kotlin\">class Person(val name: String, val age: Int)\nval adam = Person(\"Adam\", 100)\n</code></pre>\n\n<h3 id=\"secondary-constructors\">Secondary Constructors</h3>\n\n<pre><code class=\"language-kotlin\">class Person(val name: String) {\n private var age: Int? = null\n\n constructor(name: String, age: Int) : this(name) {\n this.age = age\n }\n}\n\n// Above can be replaced with default params\nclass Person(val name: String, val age: Int? = null)\n</code></pre>\n\n<h3 id=\"inheritance--implementation\">Inheritance &amp; Implementation</h3>\n\n<pre><code class=\"language-kotlin\">open class Vehicle\nclass Car : Vehicle()\n\ninterface Runner {\n fun run()\n}\n\nclass Machine : Runner {\n override fun run() {\n // ...\n }\n}\n</code></pre>\n\n<h2 class=\"-two-column\" id=\"control-flow\">Control Flow</h2>\n\n<h3 id=\"if-statements\">If Statements</h3>\n\n<pre><code class=\"language-kotlin\">if (someBoolean) {\n doThing()\n} else {\n doOtherThing()\n}\n</code></pre>\n\n<h3 id=\"for-loops\">For Loops</h3>\n\n<pre><code class=\"language-kotlin\">for (i in 0..10) { } // 1 - 10\nfor (i in 0 until 10) // 1 - 9\n(0..10).forEach { }\nfor (i in 0 until 10 step 2) // 0, 2, 4, 6, 8\n</code></pre>\n\n<h3 id=\"when-statements\">When Statements</h3>\n\n<pre><code class=\"language-kotlin\">when (direction) {\n NORTH -&gt; {\n print(\"North\")\n }\n SOUTH -&gt; print(\"South\")\n EAST, WEST -&gt; print(\"East or West\")\n \"N/A\" -&gt; print(\"Unavailable\")\n else -&gt; print(\"Invalid Direction\")\n}\n</code></pre>\n\n<h3 id=\"while-loops\">While Loops</h3>\n\n<pre><code class=\"language-kotlin\">while (x &gt; 0) {\n x--\n}\n\ndo {\n x--\n} while (x &gt; 0)\n</code></pre>\n\n<h2 class=\"-two-column\" id=\"destructuring-declarations\">Destructuring Declarations</h2>\n\n<h3 id=\"objects--lists\">Objects &amp; Lists</h3>\n\n<pre><code class=\"language-kotlin\">val person = Person(\"Adam\", 100)\nval (name, age) = person\n\nval pair = Pair(1, 2)\nval (first, second) = pair\n\nval coordinates = arrayOf(1, 2, 3)\nval (x, y, z) = coordinates\n</code></pre>\n\n<h3 id=\"componentn-functions\">ComponentN Functions</h3>\n\n<pre><code class=\"language-kotlin\">class Person(val name: String, val age: Int) {\n\toperator fun component1(): String {\n\t\treturn name\n\t}\n\n\toperator fun component2(): Int {\n\t\treturn age\n\t}\n}\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://kotlinlang.org/docs/reference/basic-syntax.html#defining-variables\">Defining Variables</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html\">Strings Documentation</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/basic-types.html#string-templates\">String Templates</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/basic-types.html\">Basic Types</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/object-declarations.html#companion-objects\">Companion Objects</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/null-safety.html\">Null Safety</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/collections.html\">Collections Overview</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/index.html\">Collections Documentation</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/functions.html\">Functions Documentation</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/classes.html\">Classes Documentation</a> <em>(kotlinlang.org)</em></li>\n <li><a href=\"https://kotlinlang.org/docs/reference/multi-declarations.html\">Destructuring Declarations</a> <em>(kotlinlang.org)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://kotlinlang.org/\">Kotlin</a> is a statically typed programming language for modern multiplatform applications.</p>",
"description_html": "",
"tags": null,
"updated": "2018-12-06"
},{
"id": "kramdown",
"title": "Kramdown",
"url": "/kramdown",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"configuration\">Configuration</h3>\n\n<ul>\n <li><code>parse_block_html</code> - process kramdown syntax inside blocks</li>\n <li><code>parse_span_html</code> - process kramdown syntax inside inlines</li>\n <li>\n <p><code>html_to_native</code> - convert html elements to native elements</p>\n\n </li>\n</ul>\n\n<p>For the GFM parser:</p>\n\n<ul>\n <li><code>hard_wrap</code></li>\n</ul>\n\n<p>http://kramdown.gettalong.org/parser/gfm.html</p>\n\n<h3 id=\"for-jekyll-gh-pages\">For jekyll (gh-pages)</h3>\n\n<pre><code># _config.yml\nmarkdown: kramdown\nkramdown:\n input: GFM\n</code></pre>\n\n<h3 id=\"footnotes-kramdown\">Footnotes (Kramdown)</h3>\n\n<pre><code>This is some text.[^1]. Other text.[^footnote].\n\n[^1]: Some *crazy* footnote definition.\n</code></pre>\n\n<h3 id=\"abbreviations-kramdown\">Abbreviations (Kramdown)</h3>\n\n<pre><code>This is some text not written in HTML but in another language!\n\n*[another language]: It's called Markdown\n*[HTML]: HyperTextMarkupLanguage\n</code></pre>\n\n<h3 id=\"classes-and-ids-kramdown\">Classes and IDs (Kramdown)</h3>\n\n<pre><code>A simple paragraph with an ID attribute.\n{: #para-one}\n\n&gt; A blockquote with a title\n{:title=\"The blockquote title\"}\n{: #myid}\n\n* {:.cls} This item has the class \"cls\"\n\n{:.ruby}\n Some code here\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://kramdown.gettalong.org/syntax.html</li>\n <li>http://kramdown.gettalong.org/parser/kramdown.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "layout-thrashing",
"title": "Layout thrashing",
"url": "/layout-thrashing",
"category": "HTML",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"layout-thrashing\">Layout thrashing</h2>\n\n<h3 id=\"things-that-cause-invalidation\">Things that cause invalidation</h3>\n\n<h4 id=\"element\">Element</h4>\n\n<ul class=\"-six-column\">\n <li>clientHeight</li>\n <li>clientLeft</li>\n <li>clientTop</li>\n <li>clientWidth</li>\n <li>focus</li>\n <li>getBoundingClientRect</li>\n <li>getClientRects</li>\n <li>innerText</li>\n <li>offsetHeight</li>\n <li>offsetLeft</li>\n <li>offsetParent</li>\n <li>offsetTop</li>\n <li>offsetWidth</li>\n <li>outerText</li>\n <li>scrollByLines</li>\n <li>scrollByPages</li>\n <li>scrollHeight</li>\n <li>scrollIntoView</li>\n <li>scrollIntoViewIfNeeded</li>\n <li>scrollLeft</li>\n <li>scrollTop</li>\n <li>scrollWidth</li>\n</ul>\n\n<h4 id=\"mouseevent\">MouseEvent</h4>\n\n<ul class=\"-six-column\">\n <li>layerX</li>\n <li>layerY</li>\n <li>offsetX</li>\n <li>offsetY</li>\n</ul>\n\n<h4 id=\"window\">Window</h4>\n\n<ul class=\"-six-column\">\n <li>getComputedStyle</li>\n <li>scrollBy</li>\n <li>scrollTo</li>\n <li>scrollX</li>\n <li>scrollY</li>\n</ul>\n\n<h4 id=\"frame-document--image\">Frame, Document &amp; Image</h4>\n\n<ul class=\"-six-column\">\n <li>height</li>\n <li>width</li>\n</ul>\n\n<h4 id=\"jquery\">jQuery</h4>\n\n<ul class=\"-six-column\">\n <li>$.fn.offset</li>\n <li>$.fn.offsetParent</li>\n <li>$.fn.position</li>\n <li>$.fn.scrollLeft</li>\n <li>$.fn.scrollTop</li>\n <li>$.fn.css(‘…’)</li>\n <li>$.fn.text(‘…’)</li>\n <li>$(‘:hidden’)</li>\n <li>$(‘:contains’)</li>\n</ul>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://www.kellegous.com/j/2013/01/26/layout-performance/\">http://www.kellegous.com/j/2013/01/26/layout-performance/</a></li>\n <li><a href=\"https://gist.github.com/desandro/4657744\">https://gist.github.com/desandro/4657744</a></li>\n <li><a href=\"http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing\">http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing</a></li>\n</ul>",
"intro_html": "<p>These are CSS properties that will cause “layout thrashing”. Avoid changing them to prevent bottlenecks in your UI performance.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-19"
},{
"id": "ledger-csv",
"title": "Ledger CSV format",
"url": "/ledger-csv",
"category": "Ledger",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"ledger-csv-format\">Ledger CSV format</h2>\n\n<pre class=\"-setup\"><code>$ ledger csv\n</code></pre>\n\n<pre><code class=\"language-csv\">date , ? , desc , account , currency , amt , pending/cleared , ?\n\"2013/09/02\" , \"\" , \"things\" , \"Assets:Cash\" , \"P\" , \"-2000\" , \"*\" , \"\"\n\"2013/09/02\" , \"\" , \"things\" , \"Liabilities:Card\" , \"P\" , \"-200\" , \"*\" , \"\"\n\"2013/09/02\" , \"\" , \"things\" , \"Expenses:Things\" , \"P\" , \"2200\" , \"*\" , \"\"\n\"2013/09/04\" , \"\" , \"stuff\" , \"Assets:Cash\" , \"P\" , \"-20\" , \"*\" , \"\"\n\"2013/09/04\" , \"\" , \"stuff\" , \"Expneses:Others\" , \"P\" , \"20\" , \"*\" , \"\"\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ledger-examples",
"title": "Ledger examples",
"url": "/ledger-examples",
"category": "Ledger",
"keywords": null,
"content_html": "<p>Inspecting transactions:</p>\n\n<pre><code># show me expenses for october (--period)\n ledger r Expenses -p oct\n\n# what's the most expensive? (--sorted)\n ledger r Expenses -S amount --tail 10\n\n# how much was spent on grocery? (--weekly, --monthly)\n ledger r Grocery\n ledger r Grocery -W\n ledger r Grocery -M\n\n# what did I spend my Mastercard on? (--period, --begin, --end)\n ledger r mastercard\n ledger r mastercard -p \"january\"\n ledger r mastercard -b 01/25 -e 01/31\n</code></pre>\n\n<p>Graphing:</p>\n\n<pre><code># Graph my bank account balance, monthly\n ledger r Savings -M\n\n# Graph my expenses, monthly (-n = --collapse)\n ledger r Expenses -M -n\n\n# ...what's the average per month?\n ledger r Expenses -M -n --average\n</code></pre>\n\n<p>Simple:</p>\n\n<pre><code># what did I do yesterday?\n# ..list transactions on this day\n ledger r -p 01/26\n ledger r -p yesterday\n</code></pre>\n\n<p>Switches:</p>\n\n<pre><code># what's everything I got in USD? (--exchange)\n ledger b Assets -X USD\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ledger-format",
"title": "Ledger format",
"url": "/ledger-format",
"category": "Ledger",
"keywords": null,
"content_html": "<pre><code>2015/01/01 Pay rent\n Assets:Savings -$300\n Expenses:Rent\n</code></pre>\n\n<h3 id=\"first-line\">First line</h3>\n\n<pre><code>2015/01/01 * Pay rent ; tagname:\n^ ^ ^\nDate Flag Description ^ comment/tag\n</code></pre>\n\n<h3 id=\"balance-assertion\">Balance assertion</h3>\n\n<pre><code>2015/01/01 Pay rent\n Assets:Savings -$300 = $1200 ; assert there's $1200 left after\n Expenses:Rent\n</code></pre>\n<p>Flags:</p>\n\n<pre><code>* cleared\n! pending\n</code></pre>\n\n<h2 id=\"accounts\">Accounts</h2>\n<p>Only relevant with <code>--strict</code> or <code>--pedantic</code></p>\n\n<pre><code>account Expenses:Food\n note This account is all about the chicken!\n alias food\n payee ^(KFC|Popeyes)$\n check commodity == \"$\"\n assert commodity == \"$\"\n eval print(\"Hello!\")\n default\n</code></pre>\n\n<h2 id=\"others\">Others</h2>\n\n<pre><code>D $1,000.00 ; set default commodity\n\nalias Cash = Assets:Cash\n\nY2015 ; set default year (you can use 01/25 as date after)\n</code></pre>\n\n<h3 id=\"prefix-all-transactions-with-an-account\">Prefix all transactions with an account</h3>\n\n<pre><code>account Home\ninclude home.journal\nend\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ledger-periods",
"title": "Ledger periods",
"url": "/ledger-periods",
"category": "Ledger",
"keywords": null,
"content_html": "<pre><code>[INTERVAL] [BEGIN] [END]\n</code></pre>\n\n<p>Interval:</p>\n\n<pre><code>every day\nevery week\nevery month\nevery quarter\nevery year\nevery N days # N is any integer\nevery N weeks\nevery N months\nevery N quarters\nevery N years\ndaily\nweekly\nbiweekly\nmonthly\nbimonthly\nquarterly\nyearly\n</code></pre>\n\n<p>Begin:</p>\n\n<pre><code>from &lt;SPEC&gt;\nsince &lt;SPEC&gt;\n</code></pre>\n\n<p>The end time can be either of:</p>\n\n<pre><code>to &lt;SPEC&gt;\nuntil &lt;SPEC&gt;\n</code></pre>\n\n<p>Spec:</p>\n\n<pre><code>2004\n2004/10\n2004/10/1\n10/1\noctober\noct\nthis week # or day, month, quarter, year\nnext week\nlast week\n</code></pre>\n\n<p>Examples:</p>\n\n<pre><code>$ ledger r -p \"since last month\"\n</code></pre>\n\n<p>See: http://ledger-cli.org/3.0/doc/ledger3.html#Period-Expressions</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ledger-query",
"title": "Ledger queries",
"url": "/ledger-query",
"category": "Ledger",
"keywords": null,
"content_html": "<h3 id=\"query-characters\">Query characters</h3>\n\n<table>\n <thead>\n <tr>\n <th>Query</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>@payee</code></td>\n <td>Payee</td>\n </tr>\n <tr>\n <td><code>%tag</code></td>\n <td>Tag</td>\n </tr>\n <tr>\n <td><code>=note</code></td>\n <td>Note</td>\n </tr>\n <tr>\n <td><code>#code</code></td>\n <td>Code</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>TERM and TERM</code></td>\n <td>Boolean and</td>\n </tr>\n <tr>\n <td><code>TERM or TERM</code></td>\n <td>Boolean or</td>\n </tr>\n <tr>\n <td><code>not TERM</code></td>\n <td>Boolean not</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-sh\">ledger r @taco\nledger r comment =~ /landline/\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://ledger-cli.org/3.0/doc/ledger3.html#Complex-expressions\">http://ledger-cli.org/3.0/doc/ledger3.html#Complex-expressions</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ledger",
"title": "Ledger CLI",
"url": "/ledger",
"category": "Ledger",
"keywords": null,
"content_html": "<h3 id=\"basic-usage\">Basic usage</h3>\n\n<pre><code class=\"language-bash\">$ ledger bal\n$ ledger reg\n</code></pre>\n\n<pre><code class=\"language-bash\">$ ledger reg grocery # show entries for 'grocery'\n$ ledger bal assets # check if i'm broke\n</code></pre>\n\n<pre><code class=\"language-bash\"> -b 01/01 # --begin\n -e 01/31 # --end\n -S date # --sort\n -S amount\n</code></pre>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-bash\"># any/all matches\n ledger bal Rent Transportation # any\n ledger bal Income and Job # all\n ledger bal Expenses and not (Drinks or Food)\n</code></pre>\n\n<pre><code class=\"language-bash\"># what did I spend on most? (--sorted)\n ledger reg Expenses -S amount\n</code></pre>\n\n<pre><code class=\"language-bash\"># how much did I have at this date? (--end)\n ledger bal -e 01/15 ^Assets ^Liabilities\n</code></pre>\n\n<pre><code class=\"language-bash\"># how much did I spend and earn this month?\n ledger bal ^Expenses ^Income --invert\n</code></pre>\n\n<pre><code class=\"language-bash\"># how much was spent over the course of 3 days? (totalled)\n ledger reg -b 01/25 -e 01/27 --subtotal\n ledger reg -b 01/25 -e 01/27 --subtotal grocery\n</code></pre>\n\n<h2 id=\"format\">Format</h2>\n\n<h3 id=\"basic-format\">Basic format</h3>\n\n<pre><code>2013/01/03 * Rent for January\n Expenses:Rent $600.00\n Assets:Savings\n</code></pre>\n\n<p><code>*</code> = cleared, <code>!</code> = pending</p>\n\n<h3 id=\"secondary-dates\">Secondary dates</h3>\n\n<pre><code>2008/01/01=2008/01/14 Client invoice\n</code></pre>\n\n<p>It can mean anything you want, eg, for the estimated date you’ll be paid.</p>\n\n<h3 id=\"balance-assertions\">Balance assertions</h3>\n\n<pre data-line=\"3\"><code>2008/01/01 * KFC\n Expenses:Food $20\n Assets:Cash $-20 = $500\n</code></pre>\n\n<p><code>Cash $X = $500</code> ensures Cash is at $500 after the transaction.</p>\n\n<h3 id=\"balance-assignment\">Balance assignment</h3>\n\n<pre data-line=\"2,7\"><code class=\"language-bash\">2008/01/01 * Cash balance\n Assets:Cash = $500\n Equity:Adjustments\n\n2008/01/01 * KFC\n Expenses:Food $20\n Assets:Cash = $500\n</code></pre>\n\n<p><code>ACCOUNT = $500</code> figures out what’s needed to make it $500.</p>\n\n<h3 id=\"payables\">Payables</h3>\n\n<pre data-line=\"2\"><code class=\"language-bash\">2008/04/25 * Rent\n (Assets:Checking) -$200\n Expenses:Rent\n</code></pre>\n\n<h3 id=\"commodities\">Commodities</h3>\n\n<pre data-line=\"3\"><code class=\"language-bash\">; cost per item\n2010/05/31 * Market\n Assets:Fridge 35 apples @ $0.42\n Assets:Cash\n</code></pre>\n\n<pre data-line=\"3\"><code class=\"language-bash\">; total cost\n2010/05/31 * Market\n Assets:Fridge 35 apples @@ $14.70\n Assets:Cash\n</code></pre>\n\n<pre data-line=\"3\"><code class=\"language-bash\">; fixed lot prices\n2010/05/31 * Gas\n Expenses:Gasoline 11 GAL {=$2.299}\n Assets:Cash\n</code></pre>\n\n<h3 id=\"commodity-definitions\">Commodity definitions</h3>\n\n<pre><code>commodity $\n note American Dollars\n format $1,000.00\n nomarket\n default\n</code></pre>\n\n<h3 id=\"budgeting\">Budgeting</h3>\n\n<pre><code>~ Monthly\n Expenses:Rent $500\n Expenses:Food $100\n Expenses $40 ; everything else\n Assets\n\n~ Yearly\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-bash\">ledger bal --budget Expenses\nledger bal --unbudgeted Expenses\n</code></pre>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code>; line comment\n# also line comment\n% also line comment\n| also line comment\n* also line comment\n</code></pre>\n\n<h2 id=\"querying\">Querying</h2>\n\n<h3 id=\"periods\">Periods</h3>\n\n<pre><code>[interval] [begin] [end]\n</code></pre>\n\n<pre><code>interval:\n every day|week|month|quarter|year\n every N days|weeks|...\n daily|weekly|...\n</code></pre>\n\n<pre><code>begin:\n from &lt;spec&gt;\nend:\n to &lt;spec&gt;\n</code></pre>\n\n<pre><code>spec:\n 2004\n 2004/10/1\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-bash\">$ ledger bal|reg --period \"until aug\"\n$ ledger bal|reg --period \"last oct\"\n$ ledger bal|reg --period \"every week\"\n</code></pre>\n\n<h3 id=\"register\">Register</h3>\n\n<pre class=\"-setup\"><code class=\"language-bash\">$ ledger reg\n</code></pre>\n\n<pre><code class=\"language-bash\"> -D, --daily\n -W, --weekly\n -M, --monthly\n --quarterly\n -Y, --yearly\n -s, --subtotal\n --start-of-week monday\n</code></pre>\n\n<pre><code class=\"language-bash\"> -S, --sort date\n -S, --sort amount\n</code></pre>\n\n<h3 id=\"filters\">Filters</h3>\n\n<pre><code class=\"language-bash\">-b, --begin DATE\n-e, --end DATE\n\n-d payee =~ /pioneer/\n\n-C, --cleared # (with *)\n-U, --uncleared # (no *)\n --pending # (with !)\n\n-R, --real # ignore virtual postings (eg: \"(Cash) $-400\")\n-L, --actual # no automated postings (eg: \"= /^Income/\")\n\n-r, --related # show the other side\n # \"reg -r savings\" shows where it comes from)\n</code></pre>\n\n<h3 id=\"queries\">Queries</h3>\n\n<pre><code>^regex$\n@payee\n%tag\n%tag=value\n=note\n#code\nterm and term\nterm or term\nnot term\n\\( term \\)\n</code></pre>\n\n<p>Example:</p>\n\n<pre><code>ledger r ^expenses and @Denny's\nledger r food and @Starbucks and not dining\n</code></pre>\n\n<h3 id=\"display\">Display</h3>\n\n<pre><code class=\"language-bash\">-n, --collapse # [register] collapse entries\n # [balance] no grand total\n-s, --subtotal # [balance] show sub-accounts\n # [other] show subtotals\n--flat\n</code></pre>\n\n<h3 id=\"effective-dates\">Effective dates</h3>\n\n<pre data-line=\"1\"><code class=\"language-bash\">2008/01/01=2008/01/14 Client invoice ; estimated date you'll be paid\n Assets:Accounts Receivable $100.00\n Income: Client name\n</code></pre>\n\n<p>Say you’re in business. If you bill a customer, you can enter something like above.\nThen, when you receive the payment, you change it to:</p>\n\n<pre data-line=\"1\"><code class=\"language-bash\">2008/01/01=2008/01/15 Client invoice ; actual date money received\n Assets:Accounts Receivable $100.00\n Income: Client name\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://ledger-cli.org/3.0/doc/ledger3.html\">http://ledger-cli.org/3.0/doc/ledger3.html</a></li>\n <li><a href=\"https://gist.github.com/agaviria/3317397\">https://gist.github.com/agaviria/3317397</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "less",
"title": "Less.js",
"url": "/less",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"functions\">Functions</h3>\n\n<pre><code>unit(30px / 5px) #=&gt; 6\nunit(5, px) #=&gt; 5px\n\ne(\"ms:stuff()\") #=&gt; ms:stuff() (unquote)\n\n%(\"count: %d\", 1+2) #=&gt; \"count: 3\"\n\niscolor(@x)\nisstring(@x)\nisnumber(@x)\niskeyword(@x)\nisurl(url(...))\nispixel()\nisem()\nispercentage()\nisunit()\n\nhue(@color)\nsaturation(@color)\nlightness(@color)\nluma(@color)\nluminance(@color)\n\nfade(@color, amount)\nfadein(@color, amount)\nfadeout(@color, amount)\nspin(@color, degrees)\nmix(@a, @b, amount)\n</code></pre>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre><code>.image when (luma(@color) &gt; 50%) { }\n.image when (not(...)) { }\n.image when (default()) {}\n.image when (e(@shape) = 'circle') { }\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "licenses",
"title": "Licenses",
"url": "/licenses",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"licenses\">Licenses</h2>\n\n<h3 id=\"mit-license\">MIT License</h3>\n\n<pre><code>The MIT License (MIT)\n\nCopyright (c) 2015 $NAME\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n</code></pre>\n\n<h3 id=\"isc\">ISC</h3>\n\n<pre><code>Copyright (c) 2015, $NAME\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES\nWITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR\nANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN\nACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF\nOR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n</code></pre>\n\n<h3 id=\"bsd-2c\">BSD 2C</h3>\n\n<pre><code>Copyright (c) 2015, $NAME\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n</code></pre>\n\n<h3 id=\"bsd-3c\">BSD 3C</h3>\n\n<pre><code>Copyright (c) 2015, $NAME\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\n* Neither the name of simpler-extend nor the names of its\n contributors may be used to endorse or promote products derived from\n this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "linux",
"title": "Linux",
"url": "/linux",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"mounting-a-ram-drive\">Mounting a RAM drive</h3>\n\n<pre><code>$ mount -t tmpfs -o size=5G,nr_inodes=5k,mode=700 tmpfs /tmp\n</code></pre>\n\n<h3 id=\"visudo\">Visudo</h3>\n\n<pre><code>sudo visudo\n\nusername ALL=(ALL) NOPASSWD:/sbin/restart whatever\n</code></pre>\n\n<h3 id=\"display-the-amount-of-available-disk-space\">Display the amount of available disk space</h3>\n\n<pre><code class=\"language-sh\">df\ndf -h # human-readable format\ndf -a # all filesystems\n</code></pre>\n\n<h3 id=\"display-disk-usage\">Display disk usage</h3>\n\n<pre><code class=\"language-sh\">du\ndu -hsx * | sort -rh | head -10 # largest 10 folders\n</code></pre>\n\n<h3 id=\"answer-yes-in-a-bash-script\">Answer yes in a bash script</h3>\n\n<pre><code class=\"language-bash\">yes | /your/command\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "lodash",
"title": "Lodash",
"url": "/lodash",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"collections\">Collections</h2>\n\n<h3 id=\"finding\">Finding</h3>\n\n<pre><code class=\"language-js\">_.filter(list, (n) =&gt; n % 2) // → Array\n_.find(list, (n) =&gt; n % 2) // → item\n_.findLast(list, ...) // → item\n</code></pre>\n\n<p>Works for both arrays and objects.</p>\n\n<h3 id=\"accessing\">Accessing</h3>\n\n<pre><code class=\"language-js\">_.at([ abcd ], 0) // → [ a ] - same as list[0]\n_.at([ abcd ], [ 0, 1 ]) // → [ ab ]\n</code></pre>\n\n<h3 id=\"setget\">Set/get</h3>\n\n<pre><code class=\"language-js\">_.set(object, 'users[0].name', value)\n_.get(object, 'users[0].name')\n_.get(object, ['users', 0, 'name'])\n</code></pre>\n\n<h3 id=\"iteration\">Iteration</h3>\n\n<pre><code class=\"language-js\">_.forEach(list, (item, i) =&gt; ...)\n_.forEachRight(list, ...)\n\n_.map(list, ...)\n</code></pre>\n\n<pre><code class=\"language-js\">_.every(users, (u) =&gt; u.active) // → true|false (aka _.all)\n_.any(users, ...) // → true|false (aka _.some)\n</code></pre>\n\n<h2 id=\"array\">Array</h2>\n\n<h3 id=\"arrays\">Arrays</h3>\n\n<pre><code class=\"language-js\">_.chunk([ abcd ], 2) // → [ [ab], [cd] ]\n_.compact(list)\n\n_.fill(Array(4), 'x') // → [ 'x', 'x', 'x', 'x' ]\n_.flatten\n_.flattenDeep\n</code></pre>\n\n<h3 id=\"filtering\">Filtering</h3>\n\n<pre><code class=\"language-js\">_.drop([ abcdef ], 2) // → [ cdef ]\n_.dropRight([ abcdef ], 2) // → [ abcd ]\n_.take([ abcdef ], 2) // → [ ab ]\n_.takeRight([ abcdef ], 2) // → [ de ]\n_.slice([ abcdef ], 2, 4) // → [ cd ]\n</code></pre>\n\n<pre><code class=\"language-js\">_.initial([ abcdef ]) // → [ abcde ] - dropRight(list, 1)\n_.rest([ abcdef ]) // → [ bcdef ] - takeRight(list, 1)\n</code></pre>\n\n<pre><code class=\"language-js\">_.dropWhile(list, 'active') // works like filter\n_.dropWhile(list, 'active', true)\n_.dropWhile(list, { active: true })\n_.dropWhile(list, (n) =&gt; ...)\n_.dropRightWhile(list, ...)\n</code></pre>\n\n<pre><code class=\"language-js\">_.without([ abcde ], b) // → [ acde ]\n</code></pre>\n\n<pre><code class=\"language-js\">_.remove(list, (n) =&gt; n % 2)\n</code></pre>\n\n<h3 id=\"accessing-1\">Accessing</h3>\n\n<pre><code class=\"language-js\">_.first([ abcdef ]) // → a\n_.last([ abcdef ]) // → f\n</code></pre>\n\n<h3 id=\"sets\">Sets</h3>\n\n<pre><code class=\"language-js\">_.uniq()\n_.difference([ abc ], [ bc ]) // → [ a ]\n_.intersection([ abc ], [ bcd ]) // → [ bc ]\n_.union([ abc ], [ bcd ]) // → [ abcd ] (unique)\n</code></pre>\n\n<pre><code class=\"language-js\">Array#concat()\n</code></pre>\n\n<h3 id=\"indexes\">Indexes</h3>\n\n<pre><code class=\"language-js\">_.findIndex(list, fn)\n_.findLastIndex(list, fn)\n</code></pre>\n\n<pre><code class=\"language-js\">_.sortedIndex(list, val)\n_.sortedLastIndex(list, val)\n</code></pre>\n\n<pre><code class=\"language-js\">_.indexOf(list, val)\n</code></pre>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 id=\"currying\">Currying</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">greet = (greeting, name) =&gt; `${greeting}, ${name}!`\n</code></pre>\n\n<pre><code class=\"language-js\">fn = _.partial(fn, 'hi')\nfn('joe') // → 'hi, joe!'\n\nfn = _.partial(fn, 'joe')\nfn('yo') // → 'yo, joe!'\n</code></pre>\n\n<pre><code class=\"language-js\">_.curry(greet)('hi') // → function(name)\n_.curryRight(greet)('joe') // → function(greet)\n</code></pre>\n\n<h2 id=\"decorating-functions\">Decorating functions</h2>\n\n<h3 id=\"throttling\">Throttling</h3>\n\n<pre><code class=\"language-js\">_.throttle(fn)\n_.debounce(fn)\n</code></pre>\n\n<h3 id=\"limiting\">Limiting</h3>\n\n<pre><code class=\"language-js\">_.before(5, fn) // only works 5 times\n_.after(5, fn) // works only after 5 times\n_.once(fn) // like _.before(fn, 1)\n</code></pre>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code class=\"language-js\">_.wrap(_.escape, (name) =&gt; `hi ${name}`)\n// same as doing `name = _.escape(name)`\n\n_.delay(fn, 2000)\n\n_.negate(fn)\n\n_.memoize(fn)\n_.memoize(fn, ...)\n</code></pre>\n\n<h2 id=\"strings\">Strings</h2>\n\n<h3 id=\"capitalization\">Capitalization</h3>\n\n<pre><code class=\"language-js\">_.capitalize('hello world') // → 'Hello world'\n_.startCase('hello_world') // → 'Hello World'\n_.snakeCase('hello world') // → 'hello_world'\n_.kebabCase('hello world') // → 'hello-world'\n_.camelCase('hello world') // → 'helloWorld'\n</code></pre>\n\n<h3 id=\"padding\">Padding</h3>\n\n<pre><code class=\"language-js\">_.pad('abc', 3) // → 'abc'\n_.pad('abc', 8) // → ' abc '\n_.pad('abc', 8, '_-') // → '_-abc_-_'\n_.padStart('abc', 3) // → 'abc'\n_.padStart('abc', 6) // → ' abc'\n_.padStart('abc', 6, '_-')// → '_-_abc'\n_.padEnd('abc', 3) // → 'abc'\n_.padEnd('abc', 6) // → 'abc '\n_.padEnd('abc', 6, '_-') // → 'abc_-_'\n</code></pre>\n\n<h3 id=\"trim\">Trim</h3>\n\n<pre><code class=\"language-js\">_.trim(' str ') // → 'str' \n_.trimLeft(' str ') // → 'str '\n_.trimRight(' str ') // → ' str'\n</code></pre>\n\n<h3 id=\"etc-1\">Etc</h3>\n\n<pre><code class=\"language-js\">_.repeat('-', 2) // → '--'\n_.deburr('déjà vu') // → 'deja vu'\n_.trunc('hello world', 5) // → 'hello...'\n</code></pre>\n\n<pre><code class=\"language-js\">_.startsWith('abc', 'a') // → true\n_.endsWith('abc', 'c') // → true\n</code></pre>\n\n<h2 id=\"objects\">Objects</h2>\n\n<h3 id=\"keys-and-values\">Keys and values</h3>\n\n<pre><code class=\"language-js\">_.keys(obj)\n_.values(obj)\n</code></pre>\n\n<h2 id=\"chaining\">Chaining</h2>\n\n<h3 id=\"chain-and-value\">Chain and value</h3>\n\n<pre><code class=\"language-js\">_([1, 2, 3])\n .reduce((total, n) =&gt; total + n)\n .map((n) =&gt; n * n)\n .tap(console.log)\n .thru((n) =&gt; n.reverse())\n .value()\n</code></pre>",
"intro_html": "",
"description_html": "<p>This is not a complete list.</p>",
"tags": null,
"updated": "2017-10-17"
},{
"id": "lua",
"title": "Lua",
"url": "/lua",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"comments\">Comments</h2>\n\n<pre><code>-- comment\n--[[ Multiline\n comment ]]\n</code></pre>\n\n<h2 id=\"invoking-functions\">Invoking functions</h2>\n\n<pre><code>print()\nprint(\"Hi\")\n\n-- You can omit parentheses if the argument is one string or table literal\nprint \"Hello World\" &lt;--&gt; print(\"Hello World\")\ndofile 'a.lua' &lt;--&gt; dofile ('a.lua')\nprint [[a multi-line &lt;--&gt; print([[a multi-line\n message]] message]])\nf{x=10, y=20} &lt;--&gt; f({x=10, y=20})\ntype{} &lt;--&gt; type({})\n</code></pre>\n\n<h2 id=\"tables--arrays\">Tables / arrays</h2>\n\n<pre><code>t = {}\nt = { a = 1, b = 2 }\nt.a = function() ... end\n\nt = { [\"hello\"] = 200 }\nt.hello\n\n-- Remember, arrays are also tables\narray = { \"a\", \"b\", \"c\", \"d\" }\nprint(array[2]) -- \"b\" (one-indexed)\nprint(#array) -- 4 (length)\n</code></pre>\n\n<h2 id=\"loops\">Loops</h2>\n\n<pre><code>while condition do\nend\n\nfor i = 1,5 do\nend\n\nfor i = start,finish,delta do\nend\n\nfor k,v in pairs(tab) do\nend\n\nrepeat\nuntil condition\n\n-- Breaking out:\nwhile x do\n if condition then break end\nend\n</code></pre>\n\n<h2 id=\"conditionals\">Conditionals</h2>\n\n<pre><code>if condition then\n print(\"yes\")\nelseif condition then\n print(\"maybe\")\nelse\n print(\"no\")\nend\n</code></pre>\n\n<h2 id=\"variables\">Variables</h2>\n\n<pre><code>local x = 2\ntwo, four = 2, 4\n</code></pre>\n\n<h2 id=\"functions\">Functions</h2>\n\n<pre><code>function myFunction()\n return 1\nend\n\nfunction myFunctionWithArgs(a, b)\n -- ...\nend\n\nmyFunction()\n\nanonymousFunctions(function()\n -- ...\nend)\n\n-- Not exported in the module\nlocal function myPrivateFunction()\nend\n\n-- Splats\nfunction doAction(action, ...)\n print(\"Doing '\"..action..\"' to\", ...)\n --&gt; print(\"Doing 'write' to\", \"Shirley\", \"Abed\")\nend\n\ndoAction('write', \"Shirley\", \"Abed\")\n</code></pre>\n\n<h2 id=\"lookups\">Lookups</h2>\n\n<pre><code>mytable = { x = 2, y = function() .. end }\n\n-- The same:\nmytable.x\nmytable['x']\n\n-- Syntactic sugar, these are equivalent:\nmytable.y(mytable)\nmytable:y()\n\nmytable.y(mytable, a, b)\nmytable:y(a, b)\n\nfunction X:y(z) .. end\nfunction X.y(self, z) .. end\n</code></pre>\n\n<h2 id=\"metatables\">Metatables</h2>\n\n<pre><code>mt = {}\n\n-- A metatable is simply a table with functions in it.\nmt.__tostring = function() return \"lol\" end\nmt.__add = function(b) ... end -- a + b\nmt.__mul = function(b) ... end -- a * b\nmt.__index = function(k) ... end -- Lookups (a[k] or a.k)\nmt.__newindex = function(k, v) ... end -- Setters (a[k] = v)\n\n-- Metatables allow you to override behavior of another table.\nmytable = {}\nsetmetatable(mytable, mt)\n\nprint(myobject)\n</code></pre>\n\n<h2 id=\"classes\">Classes</h2>\n\n<pre><code>Account = {}\n\nfunction Account:new(balance)\n local t = setmetatable({}, { __index = Account })\n\n -- Your constructor stuff\n t.balance = (balance or 0)\n return t\nend\n\nfunction Account:withdraw(amount)\n print(\"Withdrawing \"..amount..\"...\")\n self.balance = self.balance - amount\n self:report()\nend\n\nfunction Account:report()\n print(\"Your current balance is: \"..self.balance)\nend\n\na = Account:new(9000)\na:withdraw(200) -- method call\n</code></pre>\n\n<h2 id=\"constants\">Constants</h2>\n\n<pre><code>nil\nfalse\ntrue\n</code></pre>\n\n<h2 id=\"operators-and-their-metatable-names\">Operators (and their metatable names)</h2>\n\n<pre><code>-- Relational (binary)\n-- __eq __lt __gt __le __ge\n == &lt; &gt; &lt;= &gt;=\n~= -- Not equal, just like !=\n\n-- Arithmetic (binary)\n-- __add __sub __muv __div __mod __pow\n + - * / % ^\n\n-- Arithmetic (unary)\n-- __unm (unary minus)\n -\n\n-- Logic (and/or)\nnil and false --&gt; nil\nfalse and nil --&gt; false\n0 and 20 --&gt; 20\n10 and 20 --&gt; 20\n\n\n-- Length\n-- __len(array)\n#array\n\n\n-- Indexing\n-- __index(table, key)\nt[key]\nt.key\n\n-- __newindex(table, key, value)\nt[key]=value\n\n-- String concat\n-- __concat(left, right)\n\"hello, \"..name\n\n-- Call\n-- __call(func, ...)\n</code></pre>\n\n<h2 id=\"api-global-functions--ref\">API: Global functions <a href=\"http://lua.gts-stolberg.de/en/Basis.php\">(ref)</a></h2>\n\n<pre><code>dofile(\"hello.lua\")\nloadfile(\"hello.lua\")\n\nassert(x) -- x or (raise an error)\nassert(x, \"failed\")\n\ntype(var) -- \"nil\" | \"number\" | \"string\" | \"boolean\" | \"table\" | \"function\" | \"thread\" | \"userdata\"\n\n-- Does /not/ invoke meta methods (__index and __newindex)\nrawset(t, index, value) -- Like t[index] = value\nrawget(t, index) -- Like t[index]\n\n_G -- Global context\nsetfenv(1, {}) -- 1: current function, 2: caller, and so on -- {}: the new _G\n\npairs(t) -- iterable list of {key, value}\nipairs(t) -- iterable list of {index, value}\n\ntonumber(\"34\")\ntonumber(\"8f\", 16)\n</code></pre>\n\n<h2 id=\"api-strings\">API: Strings</h2>\n\n<pre><code>'string'..'concatenation'\n\ns = \"Hello\"\ns:upper()\ns:lower()\ns:len() -- Just like #s\n\ns:find()\ns:gfind()\n\ns:match()\ns:gmatch()\n\ns:sub()\ns:gsub()\n\ns:rep()\ns:char()\ns:dump()\ns:reverse()\ns:byte()\ns:format()\n</code></pre>\n\n<h2 id=\"api-tables\">API: Tables</h2>\n\n<pre><code>table.foreach(t, function(row) ... end)\ntable.setn\ntable.insert(t, 21) -- append (--&gt; t[#t+1] = 21)\ntable.insert(t, 4, 99)\ntable.getn\ntable.concat\ntable.sort\ntable.remove(t, 4)\n</code></pre>\n\n<h2 id=\"api-math-ref\">API: Math <a href=\"http://lua-users.org/wiki/MathLibraryTutorial\">(ref)</a></h2>\n\n<pre><code>math.abs math.acos math.asin math.atan math.atan2\nmath.ceil math.cos math.cosh math.deg math.exp\nmath.floor math.fmod math.frexp math.ldexp math.log\nmath.log10 math.max math.min math.modf math.pow\nmath.rad math.random math.randomseed math.sin math.sinh\nmath.sqrt math.tan math.tanh\n\nmath.sqrt(144)\nmath\n</code></pre>\n\n<h2 id=\"api-misc\">API: Misc</h2>\n\n<pre><code>io.output(io.open(\"file.txt\", \"w\"))\nio.write(x)\nio.close()\n\nfor line in io.lines(\"file.txt\")\n\nfile = assert(io.open(\"file.txt\", \"r\"))\nfile:read()\nfile:lines()\nfile:close()\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<p>http://www.lua.org/pil/13.html\n http://lua-users.org/wiki/ObjectOrientedProgramming</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "machinist",
"title": "Machinist",
"url": "/machinist",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"installing\">Installing</h3>\n\n<pre><code># Gemfile\ngem 'machinist', '&gt;= 2.0.0.beta2', group: 'test'\n\n# ~$ bundle\n# ~$ rails generate machinist:install\n</code></pre>\n\n<h3 id=\"building-objects\">Building objects</h3>\n\n<pre><code>User.make\n\n# `make` builds it, and `make!` builds+saves it\nUser.make!\nUser.make! name: \"David\"\nUser.make!(:admin)\n</code></pre>\n\n<h3 id=\"defining-blueprints\">Defining blueprints</h3>\n\n<pre><code>User.blueprint do\n name { \"User #{sn}\" }\n email { \"user-#{sn}@example.com\" }\nend\n\nUser.blueprint(:admin) do\n name { \"Admin User #{sn}\" }\n admin { true }\nend\n</code></pre>\n\n<h3 id=\"associations\">Associations</h3>\n\n<pre><code>Post.blueprint do\n author { User.make }\n\n comments(3) # Makes 3 comments (has_many / habtm)\n\n author # autodetect (Assumes there's User.blueprint)\n\nend\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://github.com/notahat/machinist\">https://github.com/notahat/machinist</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "macos-mouse-acceleration",
"title": "Mouse Acceleration",
"url": "/macos-mouse-acceleration",
"category": "macOS",
"keywords": ["defaults write .GlobalPreferences com.apple.mouse.scaling -1"],
"content_html": "<h2 id=\"acceleration\">Acceleration</h2>\n\n<h3 id=\"disabling\">Disabling</h3>\n\n<pre><code class=\"language-bash\">defaults write .GlobalPreferences com.apple.mouse.scaling -1\n</code></pre>\n\n<p>Note: Log out to take effect. If you change <em>Tracking Speed</em> under System Preferences, it will undo this fix. Only affects the mouse, not the trackpad.</p>\n\n<h3 id=\"re-enabling\">Re-enabling</h3>\n\n<p>Under <em>System Preferences</em> → <em>Mouse</em>, change <em>Tracking Speed</em>.</p>\n\n<h3 id=\"trackpad-acceleration\">Trackpad acceleration</h3>\n\n<pre><code class=\"language-bash\">defaults write .GlobalPreferences com.apple.trackpad.scaling -1\n</code></pre>\n\n<p>Works the same way, but only affects trackpads.</p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://stackoverflow.com/questions/5782884/disabling-mouse-acceleration-in-mac-os-x\">Disabling mouse acceleration</a> <em>(stackoverflow.com)</em></li>\n</ul>",
"intro_html": "<p>Disable mouse acceleration with this one weird trick.</p>",
"description_html": "",
"tags": null,
"updated": "2018-03-20"
},{
"id": "make-assets",
"title": "Make for assets",
"url": "/make-assets",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"basic-compiling\">Basic compiling</h2>\n\n<pre><code class=\"language-makefile\">bin := ./node_modules/.bin\n\nall: build/foo.js\n\nbuild/%.js: src/%.coffee\n @$(bin)/coffee &lt; $^ &gt; $@\n</code></pre>\n\n<h2 id=\"stylus--autoprefixer\">Stylus + Autoprefixer</h2>\n\n<pre><code>bin := ./node_modules/.bin\nstylus := $(bin)/stylus\nautoprefixer := $(bin)/autoprefixer\nstyl_files := $(shell find web/ -name \"*.styl\")\n\nall: public/app.css\n\npublic/app.css: css/app.styl\n\n%.css: %.styl $(styl_files)\n @$(stylus) $&lt; | $(autoprefixer) -b \"&gt; 1%\" &gt; $@\n</code></pre>\n\n<h2 id=\"hint\">Hint</h2>\n\n<pre><code>hint:\n $(js_files)\n</code></pre>\n\n<h2 id=\"watching\">Watching</h2>\n\n<pre><code>watch:\n @echo \"... watching for changes\"\n @while true; do make -s; sleep 1; done\n</code></pre>\n\n<h2 id=\"browserify\">Browserify</h2>\n\n<pre><code>js_files := $(shell find web/ -name \"*.js\")\n\npublic/app.js: web/app.js\npublic/vendor.js: web/vendor.js\n\npublic/%.js: web/%.js $(js_files)\n $(browserify) -t [ cssify -x .css ] $&lt; &gt; $@\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "makefile",
"title": "Makefile",
"url": "/makefile",
"category": "CLI",
"keywords": null,
"content_html": "<h2 id=\"var-assignment\">Var assignment</h2>\n\n<pre><code class=\"language-makefile\">uglify = $(uglify) # lazy assignment\ncompressor := $(uglify) # immediate assignment\nprefix ?= /usr/local # safe assignment\nhello += world # append\n</code></pre>\n\n<p><code>=</code> expressions are only evaluated when they’re being used.</p>\n\n<h2 id=\"magic-variables\">Magic variables</h2>\n\n<pre><code class=\"language-makefile\">out.o: src.c src.h\n $@ # \"out.o\" (target)\n $&lt; # \"src.c\" (first prerequisite)\n $^ # \"src.c src.h\" (all prerequisites)\n\n%.o: %.c\n $* # the 'stem' with which an implicit rule matches (\"foo\" in \"foo.c\")\n\nalso:\n $+ # prerequisites (all, with duplication)\n $? # prerequisites (new ones)\n $| # prerequisites (order-only?)\n\n $(@D) # target directory\n</code></pre>\n\n<h2 id=\"command-prefixes\">Command prefixes</h2>\n\n<table>\n <thead>\n <tr>\n <th>Prefix</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-</code></td>\n <td>Ignore errors</td>\n </tr>\n <tr>\n <td><code>@</code></td>\n <td>Don’t print command</td>\n </tr>\n <tr>\n <td><code>+</code></td>\n <td>Run even if Make is in ‘don’t execute’ mode</td>\n </tr>\n </tbody>\n</table>\n\n<pre><code class=\"language-makefile\">build:\n @echo \"compiling\"\n -gcc $&lt; $@\n\n-include .depend\n</code></pre>\n\n<h2 id=\"find-files\">Find files</h2>\n\n<pre><code class=\"language-makefile\">js_files := $(wildcard test/*.js)\nall_files := $(shell find images -name \"*\")\n</code></pre>\n\n<h2 id=\"substitutions\">Substitutions</h2>\n\n<pre><code class=\"language-makefile\">file = $(SOURCE:.cpp=.o) # foo.cpp =&gt; foo.o\noutputs = $(files:src/%.coffee=lib/%.js)\n\noutputs = $(patsubst %.c, %.o, $(wildcard *.c))\nassets = $(patsubst images/%, assets/%, $(wildcard images/*))\n</code></pre>\n\n<h2 id=\"more-functions\">More functions</h2>\n\n<pre><code class=\"language-makefile\">$(strip $(string_var))\n\n$(filter %.less, $(files))\n$(filter-out %.less, $(files))\n</code></pre>\n\n<h2 id=\"building-files\">Building files</h2>\n\n<pre><code class=\"language-makefile\">%.o: %.c\n ffmpeg -i $&lt; &gt; $@ # Input and output\n foo $^\n</code></pre>\n\n<h2 id=\"includes\">Includes</h2>\n\n<pre><code class=\"language-makefile\">-include foo.make\n</code></pre>\n\n<h2 id=\"options\">Options</h2>\n\n<pre><code class=\"language-sh\">make\n -e, --environment-overrides\n -B, --always-make\n -s, --silent\n\n -j, --jobs=N # parallel processing\n</code></pre>\n\n<h2 id=\"conditionals\">Conditionals</h2>\n\n<pre><code class=\"language-makefile\">foo: $(objects)\nifeq ($(CC),gcc)\n $(CC) -o foo $(objects) $(libs_for_gcc)\nelse\n $(CC) -o foo $(objects) $(normal_libs)\nendif\n</code></pre>\n\n<h2 id=\"recursive\">Recursive</h2>\n\n<pre><code class=\"language-makefile\">deploy:\n $(MAKE) deploy2\n</code></pre>\n\n<h2 id=\"further-reading\">Further reading</h2>\n\n<ul>\n <li><a href=\"https://gist.github.com/isaacs/62a2d1825d04437c6f08\">isaacs’s Makefile</a></li>\n <li><a href=\"https://tech.davis-hansson.com/p/make/\">Your Makefiles are wrong</a></li>\n <li><a href=\"https://www.gnu.org/software/make/manual/html_node/index.html\">Manual</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "man",
"title": "Man",
"url": "/man",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"man-paths\">Man paths</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>1</code></td>\n <td>General User Commands</td>\n </tr>\n <tr>\n <td><code>2</code></td>\n <td>System Calls</td>\n </tr>\n <tr>\n <td><code>3</code></td>\n <td>Library Routines</td>\n </tr>\n <tr>\n <td><code>4</code></td>\n <td>Special Files and Sockets</td>\n </tr>\n <tr>\n <td><code>5</code></td>\n <td>File formats and Conventions</td>\n </tr>\n <tr>\n <td><code>6</code></td>\n <td>Games and Fun Stuff</td>\n </tr>\n <tr>\n <td><code>7</code></td>\n <td>Miscellaneous Documentation</td>\n </tr>\n <tr>\n <td><code>8</code></td>\n <td>System Administration</td>\n </tr>\n <tr>\n <td><code>9</code></td>\n <td>Kernel and Programming Style</td>\n </tr>\n <tr>\n <td><code>n</code></td>\n <td>Tcl/Tk</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "markdown",
"title": "Markdown",
"url": "/markdown",
"category": "Markup",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"reference\">Reference</h2>\n\n<h3 id=\"headers\">Headers</h3>\n\n<pre><code class=\"language-markdown\"># h1\n## h2\n### h3\n</code></pre>\n\n<pre><code class=\"language-markdown\">Header 1\n========\n</code></pre>\n\n<pre><code class=\"language-markdown\">Header 2\n--------\n</code></pre>\n\n<h3 id=\"emphasis\">Emphasis</h3>\n\n<pre><code class=\"language-markdown\">*italic*\n_italic_\n</code></pre>\n\n<pre><code class=\"language-markdown\">**bold**\n__bold__\n</code></pre>\n\n<pre><code class=\"language-markdown\">`code`\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-markdown\">* Item 1\n* Item 2\n</code></pre>\n\n<pre><code class=\"language-markdown\">- Item 1\n- Item 2\n</code></pre>\n\n<h3 id=\"links\">Links</h3>\n\n<pre><code class=\"language-markdown\">[link](http://google.com)\n</code></pre>\n\n<pre><code class=\"language-markdown\">[link][google]\n[google]: http://google.com\n</code></pre>\n\n<pre><code class=\"language-markdown\">&lt;http://google.com&gt;\n</code></pre>\n\n<h3 id=\"images\">Images</h3>\n\n<pre><code class=\"language-markdown\">![Image alt text](/path/to/img.jpg)\n![Image alt text](/path/to/img.jpg \"title\")\n![Image alt text][img]\n</code></pre>\n\n<pre><code class=\"language-markdown\">[img]: http://foo.com/img.jpg\n</code></pre>\n\n<h3 id=\"code\">Code</h3>\n\n<pre><code> 4 space indent\n makes a code block\n</code></pre>\n\n<pre><code class=\"language-markdown\">```\ncode fences\n```\n</code></pre>\n\n<pre><code class=\"language-markdown\">```js\ncodeFences.withLanguage()\n```\n</code></pre>\n\n<h3 id=\"blockquotes\">Blockquotes</h3>\n\n<pre><code class=\"language-markdown\">&gt; This is\n&gt; a blockquote\n&gt;\n&gt; &gt; Nested\n&gt; &gt; Blockquote\n</code></pre>\n\n<h3 id=\"horizontal-line\">Horizontal line</h3>\n\n<pre><code class=\"language-markdown\">----\n</code></pre>\n\n<pre><code class=\"language-markdown\">****\n</code></pre>\n\n<h3 id=\"tables\">Tables</h3>\n\n<pre><code class=\"language-markdown\">| Column 1 Heading | Column 2 Heading |\n| ---------------- | ---------------- |\n| Some content | Other content |\n</code></pre>\n\n<pre><code class=\"language-markdown\">Column 1 Heading | Column 2 Heading\n--- | ---\nSome content | Other content\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "meow",
"title": "Meow",
"url": "/meow",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"typical-settings\">Typical settings</h3>\n\n<pre><code class=\"language-js\">const cli = require('meow')(`\n Usage: appname [options]\n\n Options:\n --lang LANG set the language\n\n Other options:\n -h, --help show usage information\n -v, --version print version info and exit\n`, {\n string: ['lang'],\n boolean: ['help', 'version'],\n alias: { h: 'help', v: 'version' }\n})\n</code></pre>\n\n<p><code>string</code> and <code>boolean</code> lets meow/minimist know which flags expect arguments (<code>string</code>) and which don’t (<code>boolean</code>).</p>\n\n<h3 id=\"using-the-result\">Using the result</h3>\n\n<pre><code class=\"language-js\">cli.flags // { lang: 'en' }\ncli.input // []\n</code></pre>\n\n<p>Yes, flags are automatically camelCased!</p>\n\n<h3 id=\"lesser-used-settings\">Lesser-used settings</h3>\n\n<pre><code class=\"language-js\">meow(`...`, {\n // Default values if flags are not specified\n default: { lang: 'en' },\n\n // allow using -- to stop processing flags\n '--': true,\n\n // Populate `_` with first non-option\n stopEarly: true,\n\n // Invoked on unknown param\n unknown: function () { ... }\n})\n</code></pre>\n\n<p>Also see <a href=\"minimist.html\">minimist</a>.</p>",
"intro_html": "<p><a href=\"https://npmjs.com/package/meow\">meow</a> is the easiest way to write command line apps for Node.js.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-30"
},{
"id": "meta-tags",
"title": "Meta-tags gem",
"url": "/meta-tags",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"titles\">Titles</h3>\n\n<pre><code class=\"language-ruby\">set_meta_tags title: 'Member Login'\n# &lt;title&gt;Some Page Title&lt;/title&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags site: 'Site Title', title: 'Member Login'\n# &lt;title&gt;Site Title | Page Title&lt;/title&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags(\n site: 'Site Title',\n title: 'Member Login',\n reverse: true,\n separator: '&amp;middot;'.html_safe\n)\n# &lt;title&gt;Page Title · Site Title&lt;/title&gt;\n</code></pre>\n\n<p>Works in a controller or a view.</p>\n\n<h3 id=\"setting-defaults\">Setting defaults</h3>\n\n<pre><code>rails generate meta_tags:install\n</code></pre>\n\n<p>This creates <code>config/initializers/meta_tags.rb</code> that you can edit.</p>\n\n<h3 id=\"others\">Others</h3>\n\n<pre><code class=\"language-ruby\">set_meta_tags site: 'Site name'\nset_meta_tags title: 'Title'\nset_meta_tags description: \"All text about keywords\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags keywords: %w[abc def ghi]\nset_meta_tags canonical: 'http://...'\nset_meta_tags icon: 'favicon.ico'\nset_meta_tags author: 'http://...'\nset_meta_tags alternate: { 'fr' =&gt; 'http://...' }\nset_meta_tags prev: 'http://...'\nset_meta_tags next: 'http://...'\nset_meta_tags image_src: 'http://...'\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags noindex: true\nset_meta_tags nofollow: true\nset_meta_tags follow: true\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags og: { image: ['...'] }\nset_meta_tags twitter: { description: '...' }\n</code></pre>\n<pre><code class=\"language-ruby\">set_meta_tags separator: '·' # Site · Page title\nset_meta_tags prefix: ' ' # Around the separator\nset_meta_tags suffix: ' '\n</code></pre>\n\n<pre><code class=\"language-ruby\">set_meta_tags lowercase: true # Lowercase page title\nset_meta_tags reverse: true # Site name last\n</code></pre>\n\n<h3 id=\"in-views\">In views</h3>\n\n<pre><code class=\"language-ruby\"># Displaying tags\n&lt;%= display_meta_tags %&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Displaying tags individually\n&lt;h1&gt;&lt;%= title %&gt;&lt;/h1&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Setting tags\n&lt;% title 'Member Login' %&gt;\n&lt;% description 'My page' %&gt;\n&lt;% keywords '..' %&gt;\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li>Accurate as of 2.1.0. See: <a href=\"https://github.com/kpumuk/meta-tags\">https://github.com/kpumuk/meta-tags</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-08"
},{
"id": "fitness/micronutrients",
"title": "Essential micronutrients",
"url": "/fitness/micronutrients",
"category": "Fitness",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"vitamins\">Vitamins</h2>\n\n<h3 id=\"vitamin-d\">Vitamin D</h3>\n\n<ul>\n <li>Sources: sunlight, fish/eggs</li>\n <li>Dosage: 2000iu daily (10,000iu max)</li>\n <li>Major benefits: test boost</li>\n <li>Fat-soluble</li>\n <li>Best taken with meals or a source of fat</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Vitamin+D/\">Examine.com</a></p>\n\n<h3 id=\"zinc\">Zinc</h3>\n\n<ul>\n <li>Sources: meat, egg, legumes</li>\n <li>Major benefits: test boost, immune boost</li>\n <li>Doesn’t go well with <a href=\"#iron\">Iron</a>, <a href=\"#magnesium\">Magnesium</a></li>\n <li>Dosage: 5-10mg daily</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Zinc/\">Examine.com</a></p>\n\n<h3 id=\"magnesium\">Magnesium</h3>\n\n<ul>\n <li>Sources: grains, nuts, leafy vegetables</li>\n <li>Dosage: 200-450mg daily</li>\n <li>Major benefits: lower blood glucose, sleep, insulin sensitivity</li>\n <li>Don’t get Magnesium Oxide (low bioavailability), get Magnesium Citrate</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Magnesium/\">Examine.com</a></p>\n\n<h3 id=\"selenium\">Selenium</h3>\n\n<ul>\n <li>Sources: nuts, fish (tuna, halibut), meat</li>\n <li>Major benefits: anti-oxidant, anti-cancer</li>\n <li>Dosage: 200-300ug daily</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Selenium/\">Examine.com</a></p>\n\n<h3 id=\"vitamin-e\">Vitamin E</h3>\n\n<ul>\n <li>Sources: Nuts, needs, veg oils, leafy veggies</li>\n <li>Major benefits: anti-oxidant, skin</li>\n <li>Dosage: up to 22IU daily for adults? (RDA)</li>\n <li>Fat-soluble</li>\n</ul>\n\n<p>See: <a href=\"http://ods.od.nih.gov/factsheets/VitaminE-HealthProfessional/\">nih.gov</a></p>\n\n<h3 id=\"vitamin-c\">Vitamin C</h3>\n\n<ul>\n <li>Sources: fruits (esp citrus), leafy veggies</li>\n <li>Dosage: 75mg daily (females), 90mg (males)</li>\n <li>Major benefits: anti-oxidant</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Vitamin+C/\">Examine.com</a></p>\n\n<h3 id=\"vitamin-k\">Vitamin K</h3>\n\n<ul>\n <li>Sources: beans (legumes), green tea, veggies (mostly leafy), egg yolk,\n chicken thigh</li>\n <li>Major benefits: bone health</li>\n <li>Fat-soluble</li>\n</ul>\n\n<p>See: <a href=\"http://examine.com/supplements/Vitamin+K/\">Examine.com</a></p>\n\n<h3 id=\"thiamin-vitamin-b1\">Thiamin (Vitamin B1)</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"riboflavin-vitamin-b2\">Riboflavin (Vitamin B2)</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"niacin-vitamin-b3\">Niacin (Vitamin B3)</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"vitamin-b6\">Vitamin B6</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"vitamin-b12\">Vitamin B12</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"potassium\">Potassium</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"omega-3\">Omega 3</h3>\n\n<ul>\n <li>···</li>\n</ul>\n\n<h3 id=\"calcium\">Calcium</h3>\n\n<ul>\n <li>Sources: dairy</li>\n <li>Dosage: 1000mg daily for adults</li>\n <li>Major benefits: bone mass/strength</li>\n</ul>\n\n<p>See: <a href=\"http://ods.od.nih.gov/factsheets/calcium.asp\">nih.gov</a></p>\n\n<h3 id=\"iodine\">Iodine</h3>\n\n<ul>\n <li>Sources: dairy (yogurt, milk, eggs)</li>\n <li>Major benefits: thyroid gland regulation</li>\n</ul>\n\n<p>See: <a href=\"http://www.whfoods.com/genpage.php?tname=nutrient&amp;dbid=69\">whfoods.com</a></p>\n\n<h3 id=\"vitamin-a\">Vitamin A</h3>\n\n<ul>\n <li>Sources: meat, poultry, fish, fruits, leafy veggies, orange veggies\n(squash/carrots)</li>\n <li>Dosage: 10,000iu for adults</li>\n <li>Major benefits: vision, immune boost, reproduction</li>\n <li>Fat-soluble</li>\n</ul>\n\n<p>See: <a href=\"http://ods.od.nih.gov/factsheets/Vitam-HealthProfessional/\">nih.gov</a></p>\n\n<h3 id=\"iron\">Iron</h3>\n\n<ul>\n <li>Sources: soybeans, nuts/beans/lentils, beef, whole grains</li>\n <li>Major benefits: oxygen transport, energy metabolism</li>\n</ul>\n\n<p>See: <a href=\"http://www.whfoods.com/genpage.php?tname=nutrient&amp;dbid=70\">whfoods.com</a></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "middleman",
"title": "Middleman 3",
"url": "/middleman",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<p><strong>NB:</strong> This is for Middleman 3, not Middleman 4+.</p>\n\n<h3 id=\"compass-config\">Compass config</h3>\n\n<pre><code>compass_config do |config|\n config.output_style = :compact\nend\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n\n<pre><code># Automatic image dimensions on image_tag helper\nactivate :automatic_image_sizes\n</code></pre>\n\n<h3 id=\"gems\">Gems</h3>\n\n<pre><code># Susy grids in Compass\n# First: gem install compass-susy-plugin\nrequire 'susy'\n\n# CodeRay syntax highlighting in Haml\n# First: gem install haml-coderay\nrequire 'haml-coderay'\n\n# CoffeeScript filters in Haml\n# First: gem install coffee-filter\nrequire 'coffee-filter'\n</code></pre>\n\n<h3 id=\"page-command\">Page command</h3>\n\n<pre><code># With no layout\npage \"/path/to/file.html\", :layout =&gt; false\n\n# With alternative layout\npage \"/path/to/file.html\", :layout =&gt; :otherlayout\n\n# A path which all have the same layout\nwith_layout :admin do\n page \"/admin/*\"\nend\n\n# Proxy (fake) files\npage \"/this-page-has-no-template.html\", :proxy =&gt; \"/template-file.html\" do\n @which_fake_page = \"Rendering a fake page with a variable\"\nend\n</code></pre>\n\n<h3 id=\"helpers\">Helpers</h3>\n\n<pre><code>helpers do\n def some_helper\n \"Helping\"\n end\nend\n</code></pre>\n\n<h3 id=\"directories\">Directories</h3>\n\n<pre><code>set :css_dir, \"alternative_css_directory\"\nset :js_dir, \"alternative_js_directory\"\nset :images_dir, \"alternative_image_directory\"\n</code></pre>\n\n<h1 id=\"build-specific-configuration\">Build-specific configuration</h1>\n\n<pre><code>configure :build do\n activate :minify_css\n activate :minify_javascript\n\n # Enable cache buster\n activate :cache_buster\n\n # Use relative URLs\n activate :relative_assets\n\n # Compress PNGs after build\n # First: gem install middleman-smusher\n # require \"middleman-smusher\"\n activate :smusher\n\n # Or use a different image path\n set :http_path, \"/Content/images/\"\nend\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "minimist",
"title": "minimist",
"url": "/minimist",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">var minimist = require('minimist')\n</code></pre>\n\n<pre><code class=\"language-js\">var args = minimist(process.argv.slice(2), {\n string: 'lang', // --lang xml\n boolean: ['version'], // --version\n alias: { v: 'version' }\n})\n</code></pre>\n\n<pre><code class=\"language-js\">console.log(args)\n</code></pre>\n\n<p>All options are optional, but it’s recommended you set <code>string</code> and <code>boolean</code> at least.</p>\n\n<h3 id=\"all-options\">All options</h3>\n\n<pre><code class=\"language-js\">var args = minimist(process.argv.slice(2), {\n string: [ 'lang' ],\n boolean: [ 'pager' ],\n alias: { h: 'help', v: 'version' },\n default: { lang: 'en' },\n '--': true,\n stopEarly: true, /* populate _ with first non-option */\n unknown: function () { ... } /* invoked on unknown param */\n})\n</code></pre>\n\n<p>All options are optional.</p>\n\n<h3 id=\"result\">Result</h3>\n\n<p class=\"-setup\">With <code>--lang xml --no-pager -h index.js package.json</code>, you get:</p>\n\n<pre><code>args == {\n lang: 'xml',\n version: false,\n h: true,\n help: true,\n _: [ 'index.js', 'package.json' ]\n}\n</code></pre>\n\n<h2 id=\"meow\">Meow</h2>\n\n<h3 id=\"help-and-version\">Help and version</h3>\n\n<p class=\"-setup\">Use <a href=\"https://www.npmjs.com/package/meow\">meow</a> to automatically add support for <code>--help</code>, <code>--version</code> and more.</p>\n\n<pre><code class=\"language-js\">meow(`\n Usage:\n $0 FILES [options]\n\n Options:\n -h, --help print usage information\n -v, --version show version info and exit\n`, {\n alias: { h: 'help', v: 'version' }\n /* minimist options */\n})\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li><a href=\"https://www.npmjs.org/package/minimist\">https://www.npmjs.org/package/minimist</a></li>\n <li><a href=\"https://github.com/substack/minimist\">https://github.com/substack/minimist</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "minitest",
"title": "Minitest",
"url": "/minitest",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code>require 'minitest/autorun'\n\ndescribe \"X\" do\n before do .. end\n after do .. end\n subject { .. }\n let(:list) { Array.new }\n\n it \"should work\" do\n assert true\n end\nend\n</code></pre>\n\n<h3 id=\"specs-mustwont\">Specs (.must/.wont)</h3>\n\n<pre><code>expect(x)\n.must_be :==, 0\n.must_equal b\n.must_be_close_to 2.99999\n.must_be_same_as b\n\n.must_include needle\n.must_be_empty\n\n.must_be_kind_of\n.must_be_instance_of\n.must_be_nil\n.must_match /regex/\n.must_be :&lt;=, 42\n.must_respond_to msg\n\n.must_be_silent ( proc { \"no stdout or stderr\" }.must_be_silent)\n.must_output \"hi\"\n\nproc { ... }.must_output out_or_nil [, err]\nproc { ... }.must_raise exception\nproc { ... }.must_throw sym\n</code></pre>\n\n<h3 id=\"unittestcase\">Unit::TestCase</h3>\n\n<pre><code>class TestHipster &lt; MiniTest::Unit::TestCase\n def setup\n @subject = [\"silly hats\", \"skinny jeans\"]\n end\n\n def teardown\n @hipster.destroy!\n end\n\n def test_for_helvetica_font\n assert_equal \"helvetica!\", @hipster.preferred_font\n end\n\n def test_not_mainstream\n refute @hipster.mainstream?\n end\nend\n</code></pre>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code>assert\nassert_block { ... }\nassert_empty\nassert_equal 2, @size\nassert_in_delta @size, 1, 1\nassert_in_epsilon\nassert_includes @list, \"item\"\nassert_instance_of Array, @list\nassert_kind_of Enumerable, @list\nassert_match @str, /regex/\nassert_nil\nassert_operator @n, :==, 0\nassert_output\nassert_raises\nassert_respond_to\nassert_same\nassert_send\nassert_silent\nassert_throws\n</code></pre>\n\n<h3 id=\"minitestmock\">MiniTest::Mock</h3>\n\n<p>A simple and clean mock system. There two essential methods at our disposal: expect and verify.</p>\n\n<pre><code>require 'minitest/autorun'\n\ndescribe Twipster, \"Make every tweet a hipster tweet.\" do\n before do\n @twitter = MiniTest::Mock.new\n @twipster = Twipster.new(@twitter)\n end\n\n it \"should append a #lolhipster hashtag and update Twitter with our status\" do\n tweet = \"Skyrim? Too mainstream.\"\n @twitter.expect :update, true, [\"#{tweet} #lolhipster\"]\n @twipster.submit(tweet)\n assert @twitter.verify # verifies tweet and hashtag was passed to `@twitter.update`\n end\nend\n</code></pre>\n\n<h3 id=\"reporters\">Reporters</h3>\n\n<pre><code>gem 'minitest-reporters'\n\nrequire 'minitest/reporters'\nMinitest::Reporters.use! Minitest::Reporters::SpecReporter.new\n\n[Default, Spec, Progress, RubyMate, RubyMine, JUnit]\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mixpanel",
"title": "Mixpanel",
"url": "/mixpanel",
"category": "Analytics",
"keywords": null,
"content_html": "<h3 id=\"identify\">Identify</h3>\n\n<pre><code class=\"language-js\">mixpanel.identify('284')\nmixpanel.people.set({ $email: 'hi@gmail.com' })\n</code></pre>\n\n<pre><code class=\"language-js\">// Set common properties\nmixpanel.register({ age: 28, gender: 'male' })\n</code></pre>\n\n<h3 id=\"track-events\">Track events</h3>\n\n<pre><code class=\"language-js\">mixpanel.track('Login success')\nmixpanel.track('Search', { query: 'cheese' })\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://mixpanel.com/help/reference/javascript\">https://mixpanel.com/help/reference/javascript</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mobx",
"title": "Mobx",
"url": "/mobx",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"properties\">Properties</h3>\n\n<pre><code class=\"language-js\">import {observable, computed} from 'mobx'\n\nclass Page {\n @observable title = ''\n @observable published = false\n @observable author = null\n\n @computed get authorName () {\n return this.author || 'Anonymous'\n }\n}\n</code></pre>\n\n<h3 id=\"actions\">Actions</h3>\n\n<pre><code class=\"language-js\">class Page {\n @action publish () {\n this.published = true\n // do ajax/async here if you like\n }\n}\n</code></pre>\n\n<h3 id=\"plain-objects\">Plain objects</h3>\n\n<pre><code class=\"language-js\">const person = observable({\n name: 'Ella Fitzgerald'\n})\n</code></pre>\n\n<pre><code class=\"language-js\">const temp = observable(23)\ntemp.get()\ntemp.set(25)\ntemp.observe(...)\n</code></pre>\n\n<h2 id=\"reactions\">Reactions</h2>\n\n<h3 id=\"importing\">Importing</h3>\n\n<pre><code class=\"language-js\">import {autorun, autorunAsync, when} from 'mobx'\n</code></pre>\n\n<h3 id=\"autorun\">autorun()</h3>\n\n<pre><code class=\"language-js\">// Runs it, finds out what it accessed, then observe those\nautorun(() =&gt; {\n console.log(page.title)\n})\n</code></pre>\n\n<h3 id=\"when\">when()</h3>\n\n<pre><code class=\"language-js\">class Foo {\n constructor () {\n when(\n () =&gt; !this.isVisible,\n () =&gt; this.doSomething())\n }\n}\n</code></pre>\n\n<h3 id=\"expr\">expr()</h3>\n\n<pre><code class=\"language-js\">// A temporary computed value. Its result is cached.\nrender () {\n const isPublished = expr(() =&gt; page.published === true)\n if (isPublished) { ... }\n}\n</code></pre>\n\n<h2 id=\"modifiers\"><a href=\"http://mobxjs.github.io/mobx/refguide/modifiers.html\">Modifiers</a></h2>\n\n<ul>\n <li><code>asMap(obj)</code> - JS map (dynamic keys)</li>\n <li><code>asReference(fn)</code> - don’t observe me</li>\n <li><code>asStructure(obj)</code> - JS object (observe as deepEqual)</li>\n <li><code>asFlat(array)</code> - JS array (observe its children)</li>\n</ul>\n\n<h2 id=\"react\">React</h2>\n\n<h3 id=\"mobx-react\">mobx-react</h3>\n\n<pre><code class=\"language-js\">import { observer } from 'mobx-react'\n\n@observer\nclass PageView extends React.Component {\n render () {\n return &lt;div&gt;{this.props.page.title}&lt;/div&gt;\n }\n}\n\n&lt;PageView page={page} /&gt;\n</code></pre>\n\n<h3 id=\"functional-components\">Functional components</h3>\n\n<pre><code class=\"language-js\">import { observer } from 'mobx-react'\n\nconst PageView = observer(({page}) =&gt; {\n &lt;div&gt;{page.title}&lt;/div&gt;\n})\n\n&lt;PageView page={page} /&gt;\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://github.com/mobxjs/mobx\">https://github.com/mobxjs/mobx</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-05-14"
},{
"id": "mocha-blanket",
"title": "Mocha blanket",
"url": "/mocha-blanket",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"quickstart-guide\">Quickstart guide</h3>\n\n<p class=\"-setup\">Install blanket:</p>\n\n<pre><code class=\"language-bash\">npm i --save-dev blanket\n</code></pre>\n\n<p>In your test helpers, use Blanket before <code>require</code>ing:</p>\n\n<pre><code class=\"language-js\">if (process.env.COVERAGE) {\n require('blanket')({\n pattern: require('path').resolve('./index.js')\n });\n}\nthing = require('../index');\n</code></pre>\n\n<p>Add to <code>package.json</code>:</p>\n\n<pre><code class=\"language-json\">\"scripts\": {\n \"coverage\": \"env COVERAGE=1 mocha -R html-cov &gt; coverage.html &amp;&amp; open coverage.html\"\n}\n</code></pre>\n\n<p>Be sure to ignore it:</p>\n\n<pre><code class=\"language-bash\">echo \"coverage.html\" &gt;&gt; .gitignore\n</code></pre>\n\n<p>Then run:</p>\n\n<pre><code class=\"language-bash\">npm run coverage\n</code></pre>\n\n<h3 id=\"travis--coverallsio-support\">Travis + coveralls.io support</h3>\n\n<p class=\"-setup\">Visit <a href=\"http://coveralls.io\">coveralls.io</a> then activate your repo. Then install the appropriate packages:</p>\n\n<pre><code class=\"language-bash\">npm i --save-dev mocha-lcov-reporter coveralls\n</code></pre>\n\n<p>Add this to <code>.travis.yml</code>:</p>\n\n<pre><code class=\"language-yml\">after_success:\n - ./node_modules/.bin/mocha -R mocha-lcov-reporter | ./node_modules/coveralls/bin/coveralls.js\n</code></pre>\n\n<p>Commit, push, wait for Travis to finish.</p>",
"intro_html": "<p>Use <a href=\"https://npmjs.com/package/blanket\">blanket</a> for easy coverage reporting for Mocha JavaScript tests.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mocha-html",
"title": "Mocha HTML",
"url": "/mocha-html",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<p>This is a mocha template that loads js/css from cdn.</p>\n\n<pre><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;html&gt;\n&lt;head&gt;\n &lt;meta charset='utf-8'&gt;\n &lt;title&gt;Mocha&lt;/title&gt;\n &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;\n &lt;link href='https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css' rel='stylesheet' /&gt;\n&lt;/head&gt;\n&lt;body&gt;\n &lt;div id='mocha'&gt;&lt;/div&gt;\n &lt;script src='https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js'&gt;&lt;/script&gt;\n &lt;script src='https://cdn.rawgit.com/chaijs/chai/2.3.0/chai.js'&gt;&lt;/script&gt;\n &lt;script&gt;window.onerror=function(msg,url,line){document.getElementById('mocha').innerHTML+='&lt;h1&gt;'+msg+'&lt;/'+'h1&gt;'+'&lt;h2&gt;'+url+':'+line+'&lt;/'+'h2&gt;';return false}&lt;/script&gt;\n &lt;script&gt;mocha.setup('bdd')&lt;/script&gt;\n &lt;!-- what to test: --&gt;\n &lt;script src='../index.js'&gt;&lt;/script&gt;\n &lt;!-- tests to run: --&gt;\n &lt;script src='first_test.js'&gt;&lt;/script&gt;\n &lt;script src='second_test.js'&gt;&lt;/script&gt;\n &lt;script&gt;mocha.run()&lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mocha-tdd",
"title": "Mocha.js TDD interface",
"url": "/mocha-tdd",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"tdd\">TDD</h3>\n\n<pre><code>mocha.setup('tdd');\n\nsuite('something', function() {\n setup(function() {\n });\n\n test('should work', function() {\n });\n\n teardown(function() {\n });\n});\n</code></pre>\n\n<h3 id=\"async\">Async</h3>\n\n<pre><code>test('should save', function(done) {\n var user = new User();\n user.save(function(err) {\n if (err) throw err;\n done();\n });\n});\n</code></pre>\n\n<h3 id=\"chai-expect\">Chai: Expect</h3>\n\n<pre><code>var expect = chai.expect;\n\nexpect(foo).to.be.a('string');\nexpect(foo).to.equal('bar');\nexpect(foo).to.have.length(3);\nexpect(tea).to.have.property('flavors').with.length(3);\n</code></pre>\n\n<h3 id=\"see-also\">See also</h3>\n\n<ul>\n <li><a href=\"mocha.html\">Mocha BDD</a></li>\n <li><a href=\"mocha-html.html\">Mocha HTML</a></li>\n <li><a href=\"chai.html\">Chai</a></li>\n <li><a href=\"sinon.html\">Sinon</a></li>\n <li><a href=\"sinon-chai.html\">Sinon Chai</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mocha",
"title": "Mocha.js",
"url": "/mocha",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"bdd\">BDD</h3>\n\n<pre><code>mocha.setup('bdd');\n\ndescribe('something', function() {\n beforeEach(function() {\n });\n\n it('should work', function() {\n });\n});\n</code></pre>\n\n<h3 id=\"async\">Async</h3>\n\n<pre><code>it('should save', function(done) {\n var user = new User();\n user.save(function(err) {\n if (err) throw err;\n done();\n });\n});\n</code></pre>\n\n<h3 id=\"chai-shoulds\">Chai: Shoulds</h3>\n\n<pre><code>chai.should();\n\nfoo.should.be.a('string');\nfoo.should.equal('bar');\nfoo.should.have.length(3);\ntea.should.have.property('flavors').with.length(3);\n</code></pre>\n\n<h3 id=\"see-also\">See also</h3>\n\n<ul>\n <li><a href=\"mocha-tdd.html\">Mocha TDD</a></li>\n <li><a href=\"mocha-html.html\">Mocha HTML</a></li>\n <li><a href=\"chai.html\">Chai</a></li>\n <li><a href=\"sinon.html\">Sinon</a></li>\n <li><a href=\"sinon-chai.html\">Sinon Chai</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "modella",
"title": "Modella",
"url": "/modella",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"defining-models\">Defining models</h3>\n\n<pre><code class=\"language-coffeescript\">User = Modella('User')\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .attr('name')\n .attr('email', { required: true })\n .use(require('modella-validators'))\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .validator (u) -&gt;\n u.error('username', 'is required') unless u.has('username')\n</code></pre>\n\n<h3 id=\"instances\">Instances</h3>\n\n<pre><code class=\"language-coffeescript\">user\n .name()\n .name('John')\n .set(name: 'John')\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .has('name') # → true\n .isNew()\n .isValid()\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .save (err) -&gt;\n .remove (err) -&gt;\n .removed\n .model # === User\n</code></pre>\n\n<h2 id=\"events\">Events</h2>\n\n<h3 id=\"emitting\">Emitting</h3>\n\n<pre><code class=\"language-coffeescript\">Model.emit('event', [data...])\n</code></pre>\n\n<pre><code class=\"language-coffeescript\">record.emit('event', [data...])\n</code></pre>\n\n<h3 id=\"list-of-events\">List of events</h3>\n\n<pre><code class=\"language-coffeescript\">user\n .on 'save', -&gt;\n .on 'create', -&gt;\n .on 'saving', (data, done) -&gt; done()\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'remove', -&gt;\n .on 'removing', (data, done) -&gt; done()\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'valid', -&gt;\n .on 'invalid', -&gt;\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'change', -&gt;\n .on 'change email', -&gt;\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'initializing', (instance, attrs) -&gt;\n .on 'initialize', -&gt;\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'error', -&gt; failed to save model\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .on 'setting', (instance, attrs) -&gt; # on Model#set()\n .on 'attr', -&gt; # new attr via Model.attr()\n</code></pre>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"plugins\">Plugins</h3>\n\n<pre><code class=\"language-coffeescript\">MyPlugin = -&gt;\n return (Model) -&gt;\n\n Model.method = ...\n Model.prototype.method = ...\n Model.attr(...)\n\n Model\n</code></pre>\n\n<p>A plugin is a function that returns a model decorator (ie, a function that takes in a model and returns a model).</p>\n\n<h3 id=\"memory\">Memory</h3>\n\n<pre><code class=\"language-coffeescript\">User\n .all (err, users) -&gt;\n .find id, (err, user) -&gt;\n</code></pre>\n\n<pre><code class=\"language-coffeescript\"> .remove -&gt;\n .save -&gt;\n .update -&gt;\n</code></pre>",
"intro_html": "<p><a href=\"https://www.npmjs.com/package/modella\">Modella</a> allows you to create simple models in JavaScript. This is a guide on basic usage of Modella in CoffeeScript.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "modernizr",
"title": "Modernizr",
"url": "/modernizr",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"script\">Script</h3>\n\n<pre><code>&lt;script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js'&gt;&lt;/script&gt;\n</code></pre>\n\n<h3 id=\"detections\">Detections</h3>\n\n<p>JavaScript</p>\n\n<ul>\n <li>js</li>\n</ul>\n\n<p>CSS</p>\n\n<ul>\n <li>flexbox</li>\n <li>rgba</li>\n <li>hsla</li>\n <li>multiplebgs</li>\n <li>backgroundsize</li>\n <li>borderimage</li>\n <li>borderradius</li>\n <li>boxshadow</li>\n <li>textshadow</li>\n <li>opacity</li>\n <li>cssanimations</li>\n <li>csscolumns</li>\n <li>cssgradients</li>\n <li>cssreflections</li>\n <li>csstransforms</li>\n <li>csstransforms3d</li>\n <li>csstransitions</li>\n <li>fontface</li>\n <li>generatedcontent</li>\n</ul>\n\n<p>HTML5</p>\n\n<ul>\n <li>canvas</li>\n <li>canvastext</li>\n <li>webgl</li>\n <li>touch</li>\n <li>geolocation</li>\n <li>postmessage</li>\n <li>websqldatabase</li>\n <li>indexeddb</li>\n <li>hashchange</li>\n <li>history</li>\n <li>draganddrop</li>\n <li>websockets</li>\n <li>video</li>\n <li>audio</li>\n <li>localstorage</li>\n <li>sessionstorage</li>\n <li>webworkers</li>\n <li>applicationcache</li>\n <li>svg</li>\n <li>inlinesvg</li>\n <li>smil</li>\n <li>svgclippaths</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "moment",
"title": "Moment.js",
"url": "/moment",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"parsing\">Parsing</h3>\n\n<pre><code class=\"language-js\">m = moment('2013-03-01', 'YYYY-MM-DD')\n</code></pre>\n\n<p>This parses the given date using the given format. Returns a moment object.</p>\n\n<h3 id=\"formatting\">Formatting</h3>\n\n<pre><code class=\"language-js\">m.format() // \"2013-03-01T00:00:00+01:00\"\nm.format('dddd') // \"Friday\"\nm.format('MMM Do YY') // \"Mar 1st 13\"\nm.fromNow() // \"7 years ago\"\nm.calendar() // \"03/01/2013\"\n</code></pre>\n\n<h3 id=\"add\">Add</h3>\n\n<pre><code class=\"language-js\">m.add(1, 'day')\nm.subtract(2, 'days')\n</code></pre>\n\n<pre><code class=\"language-js\">m.startOf('day')\nm.endOf('day')\nm.startOf('hour')\n</code></pre>\n\n<h3 id=\"internationalization\">Internationalization</h3>\n\n<pre><code class=\"language-js\">.format('L') // 06/09/2014\n.format('l') // 6/9/2014\n.format('LL') // June 9 2014\n.format('ll') // Jun 9 2014\n.format('LLL') // June 9 2014 9:32 PM\n.format('lll') // Jun 9 2014 9:32 PM\n.format('LLLL') // Monday, June 9 2014 9:32 PM\n.format('llll') // Mon, Jun 9 2014 9:32 PM\n</code></pre>\n\n<p>See <a href=\"./datetime\">datetime</a> for more.</p>\n\n<h2 class=\"-three-column\" id=\"formatting-1\">Formatting</h2>\n\n<h3 id=\"examples\">Examples</h3>\n\n<h4 id=\"date\">Date</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>YYYY-MM-DD</code></td>\n <td><code>2014-01-01</code></td>\n </tr>\n <tr>\n <td><code>dddd, MMMM Do YYYY</code></td>\n <td><code>Friday, May 16th 2014</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"time\">Time</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>hh:mm a</code></td>\n <td><code>12:30 pm</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Used by <a href=\"http://momentjs.com/docs/#/displaying/\">Moment.js</a> and <a href=\"https://date-fns.org/v1.28.5/docs/format\">date-fns/format</a>. Similar to Java <a href=\"https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html\">SimpleDateFormat</a>.</p>\n\n<h3 id=\"date-1\">Date</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d</code></td>\n <td><code>0</code>..<code>6</code></td>\n <td><strong>Weekday</strong></td>\n </tr>\n <tr>\n <td><code>dd</code></td>\n <td><code>Su</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ddd</code></td>\n <td><code>Sun</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>dddd</code></td>\n <td><code>Sunday</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>YY</code></td>\n <td><code>13</code></td>\n <td><strong>Year</strong></td>\n </tr>\n <tr>\n <td><code>YYYY</code></td>\n <td><code>2013</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>M</code></td>\n <td><code>1</code>..<code>12</code> <em>(Jan is 1)</em></td>\n <td><strong>Month</strong></td>\n </tr>\n <tr>\n <td><code>Mo</code></td>\n <td><code>1st</code>..<code>12th</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MM</code></td>\n <td><code>01</code>..<code>12</code> <em>(Jan is 1)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MMM</code></td>\n <td><code>Jan</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>MMMM</code></td>\n <td><code>January</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Q</code></td>\n <td><code>1</code>..<code>4</code></td>\n <td><strong>Quarter</strong></td>\n </tr>\n <tr>\n <td><code>Qo</code></td>\n <td><code>1st</code>..<code>4th</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>D</code></td>\n <td><code>1</code>..<code>31</code></td>\n <td><strong>Day</strong></td>\n </tr>\n <tr>\n <td><code>Do</code></td>\n <td><code>1st</code>..<code>31st</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>DD</code></td>\n <td><code>01</code>..<code>31</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>DDD</code></td>\n <td><code>1</code>..<code>365</code></td>\n <td><strong>Day of year</strong></td>\n </tr>\n <tr>\n <td><code>DDDo</code></td>\n <td><code>1st</code>..<code>365th</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>DDDD</code></td>\n <td><code>001</code>..<code>365</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>w</code></td>\n <td><code>1</code>..<code>53</code></td>\n <td><strong>Week of year</strong></td>\n </tr>\n <tr>\n <td><code>wo</code></td>\n <td><code>1st</code>..<code>53rd</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ww</code></td>\n <td><code>01</code>..<code>53</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"time-1\">Time</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Symbol</th>\n <th>Example</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>H</code></td>\n <td><code>0</code>..<code>23</code></td>\n <td><strong>24h hour</strong></td>\n </tr>\n <tr>\n <td><code>HH</code></td>\n <td><code>00</code>..<code>23</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>h</code></td>\n <td><code>1</code>..<code>12</code></td>\n <td><strong>12h hour</strong></td>\n </tr>\n <tr>\n <td><code>hh</code></td>\n <td><code>01</code>..<code>12</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>m</code></td>\n <td><code>0</code>..<code>59</code></td>\n <td><strong>Minutes</strong></td>\n </tr>\n <tr>\n <td><code>mm</code></td>\n <td><code>00</code>..<code>59</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>s</code></td>\n <td><code>0</code>..<code>59</code></td>\n <td><strong>Seconds</strong></td>\n </tr>\n <tr>\n <td><code>ss</code></td>\n <td><code>00</code>..<code>59</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>a</code></td>\n <td><code>am</code></td>\n <td><strong>AM/PM</strong></td>\n </tr>\n <tr>\n <td><code>A</code></td>\n <td><code>AM</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>Z</code></td>\n <td><code>+07:00</code></td>\n <td><strong>Timezone offset</strong></td>\n </tr>\n <tr>\n <td><code>ZZ</code></td>\n <td><code>+0730</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>S</code></td>\n <td><code>0</code>..<code>9</code></td>\n <td>Deciseconds</td>\n </tr>\n <tr>\n <td><code>SS</code></td>\n <td><code>00</code>..<code>99</code></td>\n <td>Centiseconds</td>\n </tr>\n <tr>\n <td><code>SSS</code></td>\n <td><code>000</code>..<code>999</code></td>\n <td>Milliseconds</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>X</code></td>\n <td> </td>\n <td>Unix timestamp</td>\n </tr>\n <tr>\n <td><code>x</code></td>\n <td> </td>\n <td>Millisecond Unix timestamp</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"presets\">Presets</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Example</th>\n <th>Output</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>LT</code></td>\n <td><code>8:30 PM</code></td>\n </tr>\n <tr>\n <td><code>LTS</code></td>\n <td><code>8:30:25 PM</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LL</code></td>\n <td><code>August 2 1985</code></td>\n </tr>\n <tr>\n <td><code>ll</code></td>\n <td><code>Aug 2 1985</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LLL</code></td>\n <td><code>August 2 1985 08:30 PM</code></td>\n </tr>\n <tr>\n <td><code>lll</code></td>\n <td><code>Aug 2 1985 08:30 PM</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>LLLL</code></td>\n <td><code>Thursday, August 2 1985 08:30 PM</code></td>\n </tr>\n <tr>\n <td><code>llll</code></td>\n <td><code>Thu, Aug 2 1985 08:30 PM</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"references\">References</h2>\n\n<h3 id=\"alternatives\">Alternatives</h3>\n\n<ul>\n <li><a href=\"https://github.com/you-dont-need/You-Dont-Need-Momentjs\">You don’t need Moment.js</a> <em>(github.com)</em></li>\n</ul>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"./datetime\">Datetime cheatsheet</a> <em>(devhints.io)</em></li>\n <li><a href=\"http://momentjs.com/\">Moment website</a> <em>(momentjs.com)</em></li>\n <li><a href=\"http://momentjs.com/docs/\">Moment docs</a> <em>(momentjs.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-10-10"
},{
"id": "mongodb",
"title": "MongoDB",
"url": "/mongodb",
"category": "Development",
"keywords": null,
"content_html": "<h2 id=\"querying\">Querying</h2>\n\n<p>```\n{ name: ‘john’ }\n{ name: { $eq: ‘john’ } }</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "mysql",
"title": "MySQL",
"url": "/mysql",
"category": "Databases",
"keywords": null,
"content_html": "<h3 id=\"create--open--delete-database\">Create / Open / Delete Database</h3>\n\n<pre><code class=\"language-sql\">CREATE DATABASE dbNameYouWant\nCREATE DATABASE dbNameYouWant CHARACTER SET utf8\nUSE dbNameYouWant\nDROP DATABASE dbNameYouWant\nALTER DATABASE dbNameYouWant CHARACTER SET utf8\n</code></pre>\n\n<h3 id=\"backup-database-to-sql-file\">Backup Database to SQL File</h3>\n\n<pre><code class=\"language-bash\">mysqldump -u Username -p dbNameYouWant &gt; databasename_backup.sql\n</code></pre>\n\n<h3 id=\"restore-from-backup-sql-file\">Restore from backup SQL File</h3>\n\n<pre><code class=\"language-bash\">mysql - u Username -p dbNameYouWant &lt; databasename_backup.sql\n</code></pre>\n\n<h3 id=\"repair-tables-after-unclean-shutdown\">Repair Tables After Unclean Shutdown</h3>\n\n<pre><code class=\"language-bash\">mysqlcheck --all-databases\nmysqlcheck --all-databases --fast\n</code></pre>\n\n<h3 id=\"browsing\">Browsing</h3>\n\n<pre><code class=\"language-sql\">SHOW DATABASES\nSHOW TABLES\nSHOW FIELDS FROM table / DESCRIBE table\nSHOW CREATE TABLE table\nSHOW PROCESSLIST\nKILL process_number\n</code></pre>\n\n<h3 id=\"select\">Select</h3>\n\n<pre><code class=\"language-sql\">SELECT * FROM table\nSELECT * FROM table1, table2, ...\nSELECT field1, field2, ... FROM table1, table2, ...\nSELECT ... FROM ... WHERE condition\nSELECT ... FROM ... WHERE condition GROUPBY field\nSELECT ... FROM ... WHERE condition GROUPBY field HAVING condition2\nSELECT ... FROM ... WHERE condition ORDER BY field1, field2\nSELECT ... FROM ... WHERE condition ORDER BY field1, field2 DESC\nSELECT ... FROM ... WHERE condition LIMIT 10\nSELECT DISTINCT field1 FROM ...\nSELECT DISTINCT field1, field2 FROM ...\n</code></pre>\n\n<h3 id=\"select---join\">Select - Join</h3>\n\n<pre><code class=\"language-sql\">SELECT ... FROM t1 JOIN t2 ON t1.id1 = t2.id2 WHERE condition\nSELECT ... FROM t1 LEFT JOIN t2 ON t1.id1 = t2.id2 WHERE condition\nSELECT ... FROM t1 JOIN (t2 JOIN t3 ON ...) ON ...\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<pre><code class=\"language-sql\">field1 = value1\nfield1 &lt;&gt; value1\nfield1 LIKE 'value _ %'\nfield1 IS NULL\nfield1 IS NOT NULL\nfield1 IS IN (value1, value2)\nfield1 IS NOT IN (value1, value2)\ncondition1 AND condition2\ncondition1 OR condition2\n</code></pre>\n\n<h3 id=\"insert\">Insert</h3>\n\n<pre><code class=\"language-sql\">INSERT INTO table1 (field1, field2, ...) VALUES (value1, value2, ...)\n</code></pre>\n\n<h3 id=\"delete\">Delete</h3>\n\n<pre><code class=\"language-sql\">DELETE FROM table1 / TRUNCATE table1\nDELETE FROM table1 WHERE condition\nDELETE FROM table1, table2 FROM table1, table2 WHERE table1.id1 =\n table2.id2 AND condition\n</code></pre>\n\n<h3 id=\"update\">Update</h3>\n\n<pre><code class=\"language-sql\">UPDATE table1 SET field1=new_value1 WHERE condition\nUPDATE table1, table2 SET field1=new_value1, field2=new_value2, ... WHERE\n table1.id1 = table2.id2 AND condition\n</code></pre>\n\n<h3 id=\"create--delete--modify-table\">Create / Delete / Modify Table</h3>\n\n<h4 id=\"create\">Create</h4>\n\n<pre><code class=\"language-sql\">CREATE TABLE table (field1 type1, field2 type2, ...)\nCREATE TABLE table (field1 type1, field2 type2, ..., INDEX (field))\nCREATE TABLE table (field1 type1, field2 type2, ..., PRIMARY KEY (field1))\nCREATE TABLE table (field1 type1, field2 type2, ..., PRIMARY KEY (field1,\nfield2))\n</code></pre>\n\n<pre><code class=\"language-sql\">CREATE TABLE table1 (fk_field1 type1, field2 type2, ...,\n FOREIGN KEY (fk_field1) REFERENCES table2 (t2_fieldA))\n [ON UPDATE|ON DELETE] [CASCADE|SET NULL]\n</code></pre>\n\n<pre><code class=\"language-sql\">CREATE TABLE table1 (fk_field1 type1, fk_field2 type2, ...,\n FOREIGN KEY (fk_field1, fk_field2) REFERENCES table2 (t2_fieldA, t2_fieldB))\n</code></pre>\n\n<pre><code class=\"language-sql\">CREATE TABLE table IF NOT EXISTS (...)\n</code></pre>\n\n<pre><code class=\"language-sql\">CREATE TEMPORARY TABLE table (...)\n</code></pre>\n\n<h4 id=\"drop\">Drop</h4>\n\n<pre><code class=\"language-sql\">DROP TABLE table\nDROP TABLE IF EXISTS table\nDROP TABLE table1, table2, ...\n</code></pre>\n\n<h4 id=\"alter\">Alter</h4>\n\n<pre><code class=\"language-sql\">ALTER TABLE table MODIFY field1 type1\nALTER TABLE table MODIFY field1 type1 NOT NULL ...\nALTER TABLE table CHANGE old_name_field1 new_name_field1 type1\nALTER TABLE table CHANGE old_name_field1 new_name_field1 type1 NOT NULL ...\nALTER TABLE table ALTER field1 SET DEFAULT ...\nALTER TABLE table ALTER field1 DROP DEFAULT\nALTER TABLE table ADD new_name_field1 type1\nALTER TABLE table ADD new_name_field1 type1 FIRST\nALTER TABLE table ADD new_name_field1 type1 AFTER another_field\nALTER TABLE table DROP field1\nALTER TABLE table ADD INDEX (field);\n</code></pre>\n\n<h4 id=\"change-field-order\">Change field order</h4>\n\n<pre><code class=\"language-sql\">ALTER TABLE table MODIFY field1 type1 FIRST\nALTER TABLE table MODIFY field1 type1 AFTER another_field\nALTER TABLE table CHANGE old_name_field1 new_name_field1 type1 FIRST\nALTER TABLE table CHANGE old_name_field1 new_name_field1 type1 AFTER\n another_field\n</code></pre>\n\n<h3 id=\"keys\">Keys</h3>\n\n<pre><code class=\"language-sql\">CREATE TABLE table (..., PRIMARY KEY (field1, field2))\nCREATE TABLE table (..., FOREIGN KEY (field1, field2) REFERENCES table2\n(t2_field1, t2_field2))\n</code></pre>\n\n<h3 id=\"users-and-privileges\">Users and Privileges</h3>\n\n<pre><code class=\"language-sql\">GRANT ALL PRIVILEGES ON base.* TO 'user'@'localhost' IDENTIFIED BY 'password';\nGRANT SELECT, INSERT, DELETE ON base.* TO 'user'@'localhost' IDENTIFIED BY 'password';\nREVOKE ALL PRIVILEGES ON base.* FROM 'user'@'host'; -- one permission only\nREVOKE ALL PRIVILEGES, GRANT OPTION FROM 'user'@'host'; -- all permissions\n</code></pre>\n\n<pre><code class=\"language-sql\">SET PASSWORD = PASSWORD('new_pass')\nSET PASSWORD FOR 'user'@'host' = PASSWORD('new_pass')\nSET PASSWORD = OLD_PASSWORD('new_pass')\n</code></pre>\n\n<pre><code class=\"language-sql\">DROP USER 'user'@'host'\n</code></pre>\n\n<p>Host ‘%’ indicates any host.</p>\n\n<h3 id=\"main-data-types\">Main Data Types</h3>\n\n<pre><code class=\"language-sql\">TINYINT (1o: -217+128)\nSMALLINT (2o: +-65 000)\nMEDIUMINT (3o: +-16 000 000)\nINT (4o: +- 2 000 000 000)\nBIGINT (8o: +-9.10^18)\n</code></pre>\n\n<pre><code class=\"language-sql\">Precise interval: -(2^(8*N-1)) -&gt; (2^8*N)-1\n</code></pre>\n\n<p>⚠ INT(2) = “2 digits displayed” – NOT “number with 2 digits max”</p>\n\n<pre><code class=\"language-sql\">FLOAT(M,D)\nDOUBLE(M,D)\nFLOAT(D=0-&gt;53)\n</code></pre>\n\n<p>⚠ 8,3 -&gt; 12345,678 – NOT 12345678,123!</p>\n\n<pre><code class=\"language-sql\">TIME (HH:MM)\nYEAR (AAAA)\nDATE (AAAA-MM-JJ)\nDATETIME (AAAA-MM-JJ HH:MM; années 1000-&gt;9999)\nTIMESTAMP (like DATETIME, but 1970-&gt;2038, compatible with Unix)\n</code></pre>\n\n<pre><code class=\"language-sql\">VARCHAR (single-line; explicit size)\nTEXT (multi-lines; max size=65535)\nBLOB (binary; max size=65535)\n</code></pre>\n\n<p>Variants for TEXT&amp;BLOB: <code>TINY</code> (max=255), <code>MEDIUM</code> (max=~16000), and <code>LONG</code> (max=4Go). Ex: <code>VARCHAR(32)</code>, <code>TINYTEXT</code>, <code>LONGBLOB</code>, <code>MEDIUMTEXT</code></p>\n\n<pre><code class=\"language-sql\">ENUM ('value1', 'value2', ...) -- (default NULL, or '' if NOT NULL)\n</code></pre>\n\n<h3 id=\"reset-root-password\">Reset Root Password</h3>\n\n<pre><code class=\"language-bash\">$ /etc/init.d/mysql stop\n</code></pre>\n\n<pre><code class=\"language-bash\">$ mysqld_safe --skip-grant-tables\n</code></pre>\n\n<pre><code class=\"language-bash\">$ mysql # on another terminal\nmysql&gt; UPDATE mysql.user SET password=PASSWORD('new_pass') WHERE user='root';\n</code></pre>\n\n<pre><code class=\"language-bash\">## Switch back to the mysqld_safe terminal and kill the process using Control + \\\n$ /etc/init.d/mysql start\n</code></pre>\n\n<p>Your commands may vary depending on your OS.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-12-25"
},{
"id": "ncftp",
"title": "ncftp",
"url": "/ncftp",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"bookmarking\">Bookmarking</h3>\n\n<pre><code class=\"language-bash\">$ ncftp\n$ open -u username ftp.host.com\n$ bookmark bookmarkname\n</code></pre>\n\n<h3 id=\"mass-download\">Mass download</h3>\n\n<pre><code class=\"language-bash\">$ ncftpget -R bookmarkname /www/ .\n</code></pre>\n\n<h3 id=\"mass-upload\">Mass upload</h3>\n\n<pre><code class=\"language-bash\">$ ncftpput -R bookmarkname /www/ .\n</code></pre>\n\n<h3 id=\"upload-just-the-changed-files\">Upload just the changed files</h3>\n\n<pre><code class=\"language-bash\">$ git show --pretty=\"format:\" --name-only HEAD~1\n$ ncftpget -R -C log bookmarkname /www/ .\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nock",
"title": "Nock",
"url": "/nock",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"nock\">Nock</h3>\n\n<pre><code class=\"language-js\">scope = nock('http://foo.com')\nscope = nock('http://foo.com', { allowUnmocked: true })\n</code></pre>\n\n<pre><code class=\"language-js\">nock('http://foo.com')\n .get('/user')\n .reply(200, { id: 1234 })\n</code></pre>\n\n<h3 id=\"filtering\">Filtering</h3>\n\n<pre><code class=\"language-js\">nock('http://foo.com')\n .filteringPath(/[&amp;\\?]token=[^&amp;]*/g, '')\n .get('/user')\n\n// catches \"/user?token=...\" as well\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nocode",
"title": "Nocode",
"url": "/nocode",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"nothing\">Nothing</h2>\n\n<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>",
"intro_html": "<p><a href=\"https://github.com/kelseyhightower/nocode\">Nocode</a> is the best way to write secure and reliable applications. Write nothing; deploy nowhere.</p>",
"description_html": "",
"tags": null,
"updated": "2018-03-17"
},{
"id": "nodejs-assert",
"title": "assert",
"url": "/nodejs-assert",
"category": "Node.js",
"keywords": null,
"content_html": "<pre><code>assert(val)\nassert.equal(actual, expected)\nassert.notEqual(a, e)\n\nassert.deepEqual(a, e)\nassert.notDeepEqual(a, e)\n\nassert.throws(fn)\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://nodejs.org/api/assert.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nodejs-fs",
"title": "fs",
"url": "/nodejs-fs",
"category": "Node.js",
"keywords": null,
"content_html": "<h3 id=\"reading\">Reading</h3>\n\n<pre><code>fs.readFile('file.txt', function(err, data) { .. });\nfs.readFile('file.txt', {encoding: 'utf-8'}, function(err, data) { .. });\n</code></pre>\n\n<h3 id=\"writing\">Writing</h3>\n\n<pre><code>fs.writeFile('output.txt', function(err) { .. });\nfs.appendFile('output.txt', function(err) { .. });\n</code></pre>\n\n<h3 id=\"watch\">Watch</h3>\n\n<pre><code>fs.watch('dir OR file.txt', { persistent: true }, function(event, file) {\n event; /* rename | change */\n});\n</code></pre>\n\n<h3 id=\"getting-info\">Getting info</h3>\n\n<pre><code>fs.exists('file.txt', function(exists /*bool*/) { ... });\n\nfs.stat('file.txt', function(stats) {\n stats.isFile();\n stats.isDirectory();\n stats.isSymbolicLink();\n});\n</code></pre>\n\n<h3 id=\"file-operations\">File operations</h3>\n\n<pre><code>fs.rename('old.txt', 'new.txt', function(){});\nfs.chown('file.txt', uid, gid, function(){});\nfs.symlink('src', 'dest', function(){});\nfs.unlink('path', function(){});\nfs.rmdir('path', function(){});\n\nfs.readdir('path', function(err, files) { .. }); /* `files` = array of names */\n</code></pre>\n\n<h3 id=\"path\">Path</h3>\n\n<pre><code>fs.realpath('/etc/passwd', function(err, path) { /* \"/private/etc/passwd\" */ });\n</code></pre>\n\n<h3 id=\"sync\">Sync</h3>\n\n<pre><code>data = fs.readFileSync('input.txt');\nfs.writeFileSync('output.txt', data);\nfs.appendFileSync('output.txt', data);\nfs.existsSync('file.txt');\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://nodejs.org/api/fs.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nodejs-path",
"title": "path",
"url": "/nodejs-path",
"category": "Node.js",
"keywords": null,
"content_html": "<pre><code>fs.realpath('/etc/passwd', function(err, path) { /* \"/private/etc/passwd\" */ \n});\n\ndir = path.join('etc', 'passwd');\ndir = path.resolve('/etc', 'passwd', '..', 'var');\n\npath.dirname('/etc/passwd') //=&gt; \"/etc\"\npath.basename('/etc/passwd') //=&gt; \"passwd\"\npath.basename('/etc/rc.d', '.d') //=&gt; \"rc\"\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://nodejs.org/api/path.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nodejs-process",
"title": "process",
"url": "/nodejs-process",
"category": "Node.js",
"keywords": null,
"content_html": "<h3 id=\"streams\">Streams</h3>\n\n<pre><code>process.stdout.write('...');\nprocess.stderr.write('...');\n\nfunction stdin(fn) {\n var data = '';\n\n process.stdin.setEncoding('utf8');\n process.stdin.on('readable', function() {\n var chunk = process.stdin.read();\n if (chunk !== null) data += chunk;\n });\n\n process.stdin.on('end', function() {\n fn(null, data);\n });\n}\n</code></pre>\n\n<h3 id=\"stuff\">stuff</h3>\n\n<pre><code>process.argv; //=&gt; ['node', 'file.js', 'one', 'two']\nprocess.env; //=&gt; {TERM: 'screen-256color', SHELL: '/bin/bash', ...}\n\nprocess.exit();\nprocess.exit(1);\n</code></pre>\n\n<h3 id=\"directories\">Directories</h3>\n\n<pre><code>process.cwd(); //=&gt; \"/tmp\"\nprocess.chdir('dir');\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://nodejs.org/api/process.html</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nodejs-stream",
"title": "Node.js streams",
"url": "/nodejs-stream",
"category": "Node.js",
"keywords": null,
"content_html": "<h3 id=\"types\">Types</h3>\n\n<table>\n <thead>\n <tr>\n <th>Stream</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>Readable</code></td>\n <td>Data emitter</td>\n </tr>\n <tr>\n <td><code>Writable</code></td>\n <td>Data receiver</td>\n </tr>\n <tr>\n <td><code>Transform</code></td>\n <td>Emitter and receiver</td>\n </tr>\n <tr>\n <td><code>Duplex</code></td>\n <td>Emitter and receiver (independent)</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"https://nodejs.org/api/stream.html#stream_stream\">Stream</a> <em>(nodejs.org)</em></p>\n\n<h3 id=\"streams\">Streams</h3>\n\n<pre><code class=\"language-js\">const Readable = require('stream').Readable\nconst Writable = require('stream').Writable\nconst Transform = require('stream').Transform\n</code></pre>\n\n<h3 id=\"piping\">Piping</h3>\n\n<pre><code class=\"language-js\">clock() // Readable stream\n .pipe(xformer()) // Transform stream\n .pipe(renderer()) // Writable stream\n</code></pre>\n\n<h3 id=\"methods\">Methods</h3>\n\n<pre><code class=\"language-js\">stream.push(/*...*/) // Emit a chunk\nstream.emit('error', error) // Raise an error\nstream.push(null) // Close a stream\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-js\">const st = source()\nst.on('data', (data) =&gt; { console.log('&lt;-', data) })\nst.on('error', (err) =&gt; { console.log('!', err.message) })\nst.on('close', () =&gt; { console.log('** bye') })\nst.on('finish', () =&gt; { console.log('** bye') })\n</code></pre>\n\n<p>Assuming <code>source()</code> is a readable stream.</p>\n\n<h3 id=\"flowing-mode\">Flowing mode</h3>\n\n<pre><code class=\"language-js\">// Toggle flowing mode\nst.resume()\nst.pause()\n</code></pre>\n\n<pre><code class=\"language-js\">// Automatically turns on flowing mode\nst.on('data', /*...*/)\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"stream-types\">Stream types</h2>\n\n<h3 id=\"readable\">Readable</h3>\n\n<pre><code class=\"language-js\">function clock () {\n const stream = new Readable({\n objectMode: true,\n read() {}\n })\n\n setInterval(() =&gt; {\n stream.push({ time: new Date() })\n }, 1000)\n\n return stream\n}\n\n// Implement read() if you\n// need on-demand reading.\n</code></pre>\n\n<p>Readable streams are generators of data. Write data using <code>stream.push()</code>.</p>\n\n<h3 id=\"transform\">Transform</h3>\n\n<pre><code class=\"language-js\">function xformer () {\n let count = 0\n\n return new Transform({\n objectMode: true,\n transform: (data, _, done) =&gt; {\n done(null, { ...data, index: count++ })\n }\n })\n}\n</code></pre>\n\n<p>Pass the updated chunk to <code>done(null, chunk)</code>.</p>\n\n<h3 id=\"writable\">Writable</h3>\n\n<pre><code class=\"language-js\">function renderer () {\n return new Writable({\n objectMode: true,\n write: (data, _, done) =&gt; {\n console.log('&lt;-', data)\n done()\n }\n })\n}\n</code></pre>\n\n<h3 id=\"all-together-now\">All together now</h3>\n\n<pre><code class=\"language-js\">clock() // Readable stream\n .pipe(xformer()) // Transform stream\n .pipe(renderer()) // Writable stream\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://nodejs.org/api/stream.html\">https://nodejs.org/api/stream.html</a></li>\n <li><a href=\"https://github.com/substack/stream-handbook\">https://github.com/substack/stream-handbook</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-30"
},{
"id": "nodejs",
"title": "Node.js API",
"url": "/nodejs",
"category": "Node.js",
"keywords": null,
"content_html": "<h2 id=\"globals\">Globals</h2>\n\n<pre><code>__filename\n__dirname\n</code></pre>\n\n<h3 id=\"exec\">exec</h3>\n\n<pre><code>var exec = require('child_process').exec,\n\nvar child = exec('cat *.js bad_file | wc -l',\n function (error, stdout, stderr) {\n console.log('stdout: ' + stdout);\n console.log('stderr: ' + stderr);\n if (error !== null) {\n console.log('exec error: ' + error);\n }\n});\n</code></pre>\n\n<h2 id=\"snippets\">Snippets</h2>\n\n<pre><code>info = require('../package.json')\ninfo.version\n\nprocess.stdout.write(util.inspect(objekt, false, Infinity, true) + '\\n');\n</code></pre>\n\n<h2 id=\"spawn---passthru-the-inout\">Spawn - passthru the in/out</h2>\n\n<pre><code>var spawn = require('child_process').spawn;\nvar proc = spawn(bin, argv, { stdio: 'inherit' });\nproc.on('error', function(err) {\n if (err.code == \"ENOENT\") { \"does not exist\" }\n if (err.code == \"EACCES\") { \"not executable\" }\n});\nproc.on('exit', function(code) { ... });\n\n// also { stdio: ['pipe', 'pipe', process.stdout] }\n// also { stdio: [process.stdin, process.stderr, process.stdout] }\n\nproc.stdout.on('data', function (data) {\n});\nproc.stderr.on('data', function (data) {\n});\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "nopt",
"title": "Nopt",
"url": "/nopt",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code class=\"language-js\">var args = require('nopt')({\n foo: [String, null],\n size: ['big', 'medium', 'small'],\n many: [String, Array],\n debug: Boolean,\n version: Boolean,\n help: Boolean\n}, {\n h: '--help',\n v: '--version'\n}, process.argv);\n\nargs == {\n debug: true,\n version: true,\n size: 'big',\n argv: {\n remain: ['...', '...'],\n cooked: ...,\n original: ...\n }\n}\n</code></pre>\n\n<pre><code class=\"language-js\">if (args.help) {\n console.log([\n 'Usage:',\n ' hicat [options] [file]',\n '',\n 'Options:',\n ' -h, --help print usage information',\n ' -v, --version show version info and exit',\n ].join('\\n'));\n process.exit(0);\n}\n\nif (args.version) {\n console.log(require('../package.json').version);\n process.exit(0);\n}\n</code></pre>\n\n<p>https://www.npmjs.org/package/nopt</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "npm",
"title": "npm",
"url": "/npm",
"category": "JavaScript",
"keywords": null,
"content_html": "<h3 id=\"package-management\">Package management</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>npm i</code></td>\n <td>Alias for <code>npm install</code></td>\n </tr>\n <tr>\n <td><code>npm install</code></td>\n <td>Install everything in package.json</td>\n </tr>\n <tr>\n <td><code>npm install --production</code></td>\n <td>Install everything in package.json, except devDependecies</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>npm install lodash</code></td>\n <td>Install a package</td>\n </tr>\n <tr>\n <td><code>npm install --save-dev lodash</code></td>\n <td>Install as devDependency</td>\n </tr>\n <tr>\n <td><code>npm install --save-exact lodash</code></td>\n <td>Install with exact</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>--save</code> is the default as of npm@5. Previously, using <code>npm install</code> without <code>--save</code> doesn’t update package.json.</p>\n\n<h3 id=\"install-names\">Install names</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>npm i sax</code></td>\n <td>NPM package</td>\n </tr>\n <tr>\n <td><code>npm i sax@latest</code></td>\n <td>Specify tag <code>latest</code></td>\n </tr>\n <tr>\n <td><code>npm i sax@3.0.0</code></td>\n <td>Specify version <code>3.0.0</code></td>\n </tr>\n <tr>\n <td><code>npm i sax@\"&gt;=1 &lt;2.0\"</code></td>\n <td>Specify version range</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>npm i @org/sax</code></td>\n <td>Scoped NPM package</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>npm i user/repo</code></td>\n <td>GitHub</td>\n </tr>\n <tr>\n <td><code>npm i user/repo#master</code></td>\n <td>GitHub</td>\n </tr>\n <tr>\n <td><code>npm i github:user/repo</code></td>\n <td>GitHub</td>\n </tr>\n <tr>\n <td><code>npm i gitlab:user/repo</code></td>\n <td>GitLab</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>npm i /path/to/repo</code></td>\n <td>Absolute path</td>\n </tr>\n <tr>\n <td><code>npm i ./archive.tgz</code></td>\n <td>Tarball</td>\n </tr>\n <tr>\n <td><code>npm i https://site.com/archive.tgz</code></td>\n <td>Tarball via HTTP</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"listing\">Listing</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>npm list</code></td>\n <td>Lists the installed versions of all dependencies in this software</td>\n </tr>\n <tr>\n <td><code>npm list -g --depth 0</code></td>\n <td>Lists the installed versions of all globally installed packages</td>\n </tr>\n <tr>\n <td><code>npm view</code></td>\n <td>Lists the latest versions of all dependencies in this software</td>\n </tr>\n <tr>\n <td><code>npm outdated</code></td>\n <td>Lists only the dependencies in this software which are outdated</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"updating\">Updating</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>npm update</code></td>\n <td>Update production packages</td>\n </tr>\n <tr>\n <td><code>npm update --dev</code></td>\n <td>Update dev packages</td>\n </tr>\n <tr>\n <td><code>npm update -g</code></td>\n <td>Update global packages</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>npm update lodash</code></td>\n <td>Update a package</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"misc-features\">Misc features</h3>\n\n<pre><code class=\"language-bash\"># Add someone as an owner\nnpm owner add USERNAME PACKAGENAME\n</code></pre>\n\n<pre><code class=\"language-bash\"># list packages\nnpm ls\n</code></pre>\n\n<pre><code class=\"language-bash\"># Adds warning to those that install a package of old versions\nnpm deprecate PACKAGE@\"&lt; 0.2.0\" \"critical bug fixed in v0.2.0\"\n</code></pre>\n\n<pre><code class=\"language-bash\"># update all packages, or selected packages\nnpm update [-g] PACKAGE\n</code></pre>\n\n<pre><code class=\"language-bash\"># Check for outdated packages\nnpm outdated [PACKAGE]\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-27"
},{
"id": "org-mode",
"title": "Org Mode",
"url": "/org-mode",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"syntax\">Syntax</h2>\n\n<h3 id=\"headings\">Headings</h3>\n\n<pre><code class=\"language-org\">* Welcome to Org mode\n\n Lines starting with * are headings.\n These lines without are notes.\n\n** Sub-heading\n\n Two stars mark a 2nd-level subheading (h2).\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-org\">* Lists\n\nTo buy:\n1. Milk\n2. Eggs\n - Organic\n3. Cheese\n + Parmesan\n + Mozarella\n</code></pre>\n\n<h3 id=\"inline-styles\">Inline styles</h3>\n\n<pre><code class=\"language-org\">*bold*\n/italic/\n_underline_\n=code=\n~verbatim~\n+strike-through+\n</code></pre>\n\n<h3 id=\"to-do\">To do</h3>\n\n<pre><code class=\"language-org\">* TODO buy airplane\n</code></pre>\n\n<p>Cycle by using <code>S-LEFT</code> / <code>S-RIGHT</code>. List all TODO’s via <code>C-c C-v</code>.</p>\n\n<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"basic-shortcuts\">Basic shortcuts</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>(Un) fold</td>\n <td><code>TAB</code> / <code>S-TAB</code></td>\n </tr>\n <tr>\n <td>Move up</td>\n <td><code>M-UP</code> / <code>M-DOWN</code></td>\n </tr>\n <tr>\n <td>New headline</td>\n <td><code>M-RET</code></td>\n </tr>\n <tr>\n <td>Cycle workflow</td>\n <td><code>S-LEFT</code> / <code>S-RIGHT</code></td>\n </tr>\n <tr>\n <td>Cycle priority</td>\n <td><code>S-UP</code> / <code>S-DOWN</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"timer\">Timer</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Start timer</td>\n <td><code>C-c</code> <code>C-x</code> <code>0</code></td>\n </tr>\n <tr>\n <td>Stop timer</td>\n <td><code>C-c</code> <code>C-x</code> <code>_</code></td>\n </tr>\n <tr>\n <td>Pause timer</td>\n <td><code>C-c</code> <code>C-x</code> <code>,</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Start countdown</td>\n <td><code>C-c</code> <code>C-x</code> <code>;</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>You can use this for Pomodoro!</p>\n\n<h3 id=\"agenda\">Agenda</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Agenda menu</td>\n <td><code>C-c</code> <code>a</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Add document</td>\n <td><code>C-c</code> <code>[</code></td>\n </tr>\n <tr>\n <td>Remove document</td>\n <td><code>C-c</code> <code>]</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Add date</td>\n <td><code>C-c</code> <code>.</code></td>\n </tr>\n <tr>\n <td>Add time &amp; date</td>\n <td><code>C-u</code> <code>C-c</code> <code>.</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Start by adding the current file to the agenda (<code>C-c [</code>), then use the agenda menu to navigate.</p>\n\n<h3 id=\"export\">Export</h3>\n\n<table>\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Export menu</td>\n <td><code>C-c</code> <code>C-e</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Lets you export the document as Markdown, HTML, and others.</p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://orgmode.org/worg/org-tutorials/org4beginners.html\">Org for beginners</a> <em>(orgmode.org)</em></li>\n <li><a href=\"https://orgmode.org/\">Org mode website</a> <em>(orgmode.org)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://orgmode.org/\">Org mode</a> is for keeping hierarchal notes (and more) in Emacs.</p>",
"description_html": "",
"tags": ["WIP"],
"updated": "2018-02-19"
},{
"id": "osx",
"title": "OS X",
"url": "/osx",
"category": "macOS",
"keywords": null,
"content_html": "<h3 id=\"locations-of-startup-items\">Locations of startup items</h3>\n\n<pre><code>~/Library/LaunchAgents\n/System/Library/LaunchAgents/\n/System/Library/LaunchDaemons/\n/Library/LaunchAgents/\n/Library/LaunchDaemons/\n\n__Running `launchctl list` show you what launch scripts are currently loaded.__\n</code></pre>\n\n<h3 id=\"hide-desktop-icons\">Hide desktop icons</h3>\n\n<pre><code>defaults write com.apple.finder CreateDesktop -bool false\nkillall Finder\n</code></pre>\n\n<h3 id=\"auto-hide-other-windows-on-dock-switch\">Auto-hide other windows on dock switch</h3>\n\n<pre><code>defaults write com.apple.dock single-app -bool TRUE\nkillall Dock\n\ndefaults delete com.apple.dock single-app\nkillall Dock\n</code></pre>\n\n<h3 id=\"flush-dns\">Flush DNS</h3>\n\n<pre><code>killall -HUP mDNSResponder # 10.8+\ndscacheutil -flushcache # 10.7 below\n</code></pre>\n\n<h3 id=\"disable-spotlight-indexing\">Disable spotlight indexing</h3>\n\n<pre><code>mdutil -a -i off # disable indexing for all volumes\nmdutil -i off MOUNT_POINT # disable for specific volume\ntouch FOLDER/.metadata_never_index # disable for FOLDER\n</code></pre>\n\n<h3 id=\"turn-onoff-proxy\">Turn on/off proxy</h3>\n\n<pre><code>sudo networksetup -setsocksfirewallproxystate Wi-Fi off\nsudo networksetup -setsocksfirewallproxystate Ethernet off\nsudo networksetup -setsocksfirewallproxy Wi-Fi 127.0.0.1 9999\nsudo networksetup -setsocksfirewallproxy Ethernet 127.0.0.1 9999\nsudo networksetup -setsocksfirewallproxystate Wi-Fi on\nsudo networksetup -setsocksfirewallproxystate Ethernet on\n</code></pre>\n\n<h3 id=\"system-utils\">System utils</h3>\n\n<ul>\n <li><code>networksetup</code> - Configure network (ip, dns, proxy, etc)</li>\n <li><code>tmutil</code> - Configure Time Machine (enable/disable, exclude path, delete snapshots, etc)</li>\n <li><code>mdutil</code> - Manage Spotlight (enable/disable, exclude, etc)</li>\n <li><code>diskutil</code> - Control disk (format, eject, unmount, etc)</li>\n <li><code>launchctl</code> - Control running “agents”</li>\n</ul>\n\n<h3 id=\"useful-utils\">Useful utils</h3>\n\n<ul>\n <li><code>open</code> - open files and directories (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/open.1.html\">man</a>)</li>\n <li><code>textutil</code> - manipulate text files of various formats (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/textutil.1.html\">man</a>)</li>\n <li><code>pbcopy</code> / <code>pbpaste</code> - provide copying and pasting to the pasteboard (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/pbcopy.1.html\">man</a>)</li>\n <li><code>sips</code> - scriptable image processing system (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/sips.1.html\">man</a>)</li>\n <li><code>mdfind</code> - finds files matching a given query (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/mdfind.1.html\">man</a>)</li>\n <li><code>screencapture</code> - capture images from the screen (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/screencapture.1.html\">man</a>)</li>\n <li><code>defaults</code> - access the Mac OS X user defaults system (<a href=\"https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/defaults.1.html\">man</a>)</li>\n <li><code>/usr/libexec/airportd</code></li>\n <li><code>scutil</code></li>\n</ul>\n\n<p><strong>INFO: <code>brew</code> (<a href=\"https://brew.sh\">link</a>) is highly recommended utility</strong></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "package-json",
"title": "package.json",
"url": "/package-json",
"category": "Node.js",
"keywords": null,
"content_html": "<h3 id=\"basic\">Basic</h3>\n\n<pre data-line=\"2,3,4,5\"><code class=\"language-json\">{\n \"name\": \"expo\",\n \"description\": \"My package\",\n \"version\": \"0.1.0\",\n \"license\": \"MIT\",\n \"keywords\": [\"http\", \"server\"],\n \"author\": \"Rico Sta. Cruz &lt;rstacruz@users.noreply.github.com&gt;\",\n \"engines\": {\n \"node\": \"&gt;=0.8.0\"\n },\n \"main\": \"index\",\n \"bin\": {\n \"command\": \"./bin/command\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/rstacruz/___.git\"\n },\n}\n</code></pre>\n\n<p>Highlighted lines are required.</p>\n\n<h3 id=\"dependencies\">Dependencies</h3>\n\n<pre><code class=\"language-json\">\"dependencies\": {\n \"colors\": \"*\",\n \"flatiron\": \"0.1.x\",\n \"flatiron\": \"~0.1.0\",\n \"plates\": \"https://github.com/user/project/tarball/branch\",\n \"stuff\": \"git://github.com/user/project.git#commit-ish\"\n},\n</code></pre>\n\n<pre><code class=\"language-json\">\"devDependencies\": { ··· },\n\"peerDependencies\": { ··· },\n\"optionalDependencies\": { ··· },\n</code></pre>\n\n<p>See <a href=\"./semver\">Semver cheatsheet</a> for explanation of version ranges.</p>\n\n<h3 id=\"scripts\">Scripts</h3>\n\n<pre><code class=\"language-json\">\"scripts\": {\n \"start\": \"node ./bin/xxx\", /* npm start */\n \"test\": \"vows --spec --isolate\", /* npm test */\n \"postinstall\": \"...\",\n \"prepublish\": \"grunt build\", /* after 'npm install' and before 'npm \n publish' */\n}\n</code></pre>\n\n<h3 id=\"misc\">Misc</h3>\n\n<pre><code class=\"language-json\">\"private\": true,\n\"preferGlobal\": true\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n\n<pre><code class=\"language-json\">{\n \"config\": {\n \"foobar\": \"hello\"\n },\n \"scripts\": {\n \"run\": \"echo $npm_package_config_foobar\"\n }\n}\n</code></pre>\n\n<p>Keys in <code>config</code> are exposed as env vars to scripts.</p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://package.json.nodejitsu.com/\">http://package.json.nodejitsu.com/</a></li>\n <li><code>npm help package.json</code></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-30"
},{
"id": "package",
"title": "package.json",
"url": "/package",
"category": "Hidden",
"keywords": null,
"content_html": "",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "pacman",
"title": "Pacman",
"url": "/pacman",
"category": "Linux",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"commands\">Commands</h2>\n\n<h3 id=\"common-commands\">Common commands</h3>\n\n<table class=\"-prime\">\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pacman -Syu &lt;pkg&gt;</code></td>\n <td>Install (and update package list)</td>\n </tr>\n <tr>\n <td><code>pacman -S &lt;pkg&gt;</code></td>\n <td>Install only</td>\n </tr>\n <tr>\n <td><code>pacman -Rsc &lt;pkg&gt;</code></td>\n <td>Uninstall</td>\n </tr>\n <tr>\n <td><code>pacman -Ss &lt;keywords&gt;</code></td>\n <td>Search</td>\n </tr>\n <tr>\n <td><code>pacman -Syu</code></td>\n <td>Upgrade everything</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"query\">Query</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pacman -Qe</code></td>\n <td>List explictly-installed packages</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pacman -Ql &lt;pkg&gt;</code></td>\n <td>What files does this package have?</td>\n </tr>\n <tr>\n <td><code>pacman -Qii &lt;pkg&gt;</code></td>\n <td>List information on package</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pacman -Qo &lt;file&gt;</code></td>\n <td>Who owns this file?</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pacman -Qs &lt;query&gt;</code></td>\n <td>Search installed packages for keywords</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"orphans\">Orphans</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pacman -Qdt</code></td>\n <td>List unneeded packages</td>\n </tr>\n <tr>\n <td><code>pacman -Rns $(pacman -Qdtq)</code></td>\n <td>Uninstall unneeded packages</td>\n </tr>\n </tbody>\n</table>\n\n<p>Avoid orphans by using <code>pacman -Rsc</code> to remove packages, which will remove unneeded dependencies.</p>\n\n<h3 id=\"other\">Other</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pactree &lt;pkg&gt;</code></td>\n <td>What does <em>pkg</em> depend on?</td>\n </tr>\n <tr>\n <td><code>pactree -r &lt;pkg&gt;</code></td>\n <td>What depends on <em>pkg</em>?</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://wiki.archlinux.org/index.php/Pacman/Tips_and_tricks\">Pacman tips and tricks</a> <em>(wiki.archlinux.org)</em></li>\n</ul>",
"intro_html": "<p>Pacman is the package manager for Arch linux and its derivatives.</p>",
"description_html": "",
"tags": null,
"updated": "2018-07-07"
},{
"id": "parsimmon",
"title": "Parsimmon",
"url": "/parsimmon",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code class=\"language-js\">const P = require('parsimmon')\n\nP.regexp(/[a-z]+/)\n.parse('hello')\n//=&gt; { status: true, value: ['hello'] }\n</code></pre>\n\n<h2 id=\"atoms\">Atoms</h2>\n\n<pre><code class=\"language-js\">P.regexp(/[a-z]+/)\nP.string('hello')\nP.oneOf('abc') // like P.regexp(/[abc]/)\n\nP.whitespace\nP.optWhitespace\nP.eof\n</code></pre>\n\n<h2 id=\"combinators\">Combinators</h2>\n\n<pre><code class=\"language-js\">P.seq(a, b, c) // sequence of these\nP.alt(a, b) // any of these\nP.sepBy(a, P.string(',')) // sequence of `a`, separated by ','\nP.sepBy1(a, P.string(',')) // same, at least once\n\na.or(b) // like P.alt(a, b)\na.skip(b) // parses `b` but discards it\n\na.many()\na.times(3)\na.times(1, 4) // 1 &lt;= x &lt;= 4\na.atMost(10)\na.atLeast(10)\n</code></pre>\n\n<h2 id=\"formatting\">Formatting</h2>\n\n<pre><code class=\"language-js\">P.seq(P.number, P.oneOf('+-*/'), P.number)\n.map(([left, oper, right]) =&gt; ({ oper, left, right }))\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li><a href=\"https://github.com/jneen/parsimmon/blob/master/API.md\">https://github.com/jneen/parsimmon/blob/master/API.md</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "parsley",
"title": "Parsley.js",
"url": "/parsley",
"category": "JavaScript libraries",
"keywords": ["data-parsley-validate","$('#form').parsley()","errorClass","successClass","classHandler","errorsContainer","errorsWrapper","errorTemplate"],
"content_html": "<h2 class=\"-three-column\" id=\"parsley\">Parsley</h2>\n\n<h3 id=\"installing-via-npm\">Installing via NPM</h3>\n\n<pre><code>npm install --save parsleyjs\n</code></pre>\n\n<p><a href=\"https://www.npmjs.com/package/parsleyjs\">parsleyjs</a> is the Parsley form validator. (‘parsley’ is a different package)</p>\n\n<h3 id=\"enabling\">Enabling</h3>\n\n<h4 id=\"via-html\">via HTML</h4>\n\n<pre><code class=\"language-html\">&lt;form data-parsley-validate&gt;\n&lt;!-- ✗ not preferred --&gt;\n</code></pre>\n\n<h4 id=\"via-javascript\">via JavaScript</h4>\n\n<pre><code class=\"language-js\">$('#form').parsley(/* options */)\n</code></pre>\n\n<p>It’s preferable to explicitly call <code>$.fn.parsley()</code>.</p>\n\n<h3 id=\"api\">API</h3>\n\n<h4 id=\"form\">Form</h4>\n\n<pre><code class=\"language-js\">$('#myform').parsley()\n .isValid() // → true | null\n .validate()\n .reset()\n .destroy()\n</code></pre>\n\n<h4 id=\"input\">Input</h4>\n\n<pre><code class=\"language-js\">$('#myform input').parsley()\n .isValid()\n .validate() // returns errors\n</code></pre>\n\n<h3 id=\"validators\">Validators</h3>\n\n<pre><code class=\"language-html\">&lt;input ...&gt;\n</code></pre>\n\n<h4 id=\"required\">Required</h4>\n\n<pre><code class=\"language-html\"> required\n</code></pre>\n\n<h4 id=\"types\">Types</h4>\n\n<pre><code class=\"language-html\"> type='email'\n</code></pre>\n\n<pre><code class=\"language-html\"> type='url'\n data-parsley-type='url'\n</code></pre>\n\n<h4 id=\"length\">Length</h4>\n\n<pre><code class=\"language-html\"> maxlength='6'\n data-parsley-maxlength='6'\n minlength='10'\n data-parsley-minlength='10'\n</code></pre>\n\n<h4 id=\"numeric\">Numeric</h4>\n\n<pre><code class=\"language-html\"> pattern='\\d+'\n data-parsley-pattern='\\d+'\n</code></pre>\n\n<pre><code class=\"language-html\"> type='number'\n data-parsley-type='number'\n data-parsley-type='integer'\n data-parsley-type='digits'\n data-parsley-type='alphanum'\n</code></pre>\n\n<h4 id=\"range\">Range</h4>\n\n<pre><code class=\"language-html\"> type='range'\n data-parsley=range='[6, 10]'\n</code></pre>\n\n<pre><code class=\"language-html\"> max='10'\n data-parsley-max='10'\n min='6'\n data-parsley-min='6'\n</code></pre>\n\n<h4 id=\"checkboxes\">Checkboxes</h4>\n\n<pre><code class=\"language-html\"> data-parsley-mincheck='1'\n data-parsley-maxcheck='3'\n data-parsley-check='[1, 3]'\n</code></pre>\n\n<h4 id=\"confirmation\">Confirmation</h4>\n\n<pre><code class=\"language-html\"> data-parsley-equalto='#confirm'\n</code></pre>\n\n<h2 id=\"options\">Options</h2>\n\n<h3 id=\"form-options\">Form options</h3>\n\n<pre><code class=\"language-js\">// Supported &amp; excluded inputs by default\n inputs: 'input, textarea, select'\n excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden]'\n</code></pre>\n\n<pre><code class=\"language-js\">// Stop validating field on highest priority failing constraint\n priorityEnabled: true\n</code></pre>\n\n<p>See: <a href=\"http://parsleyjs.org/doc/annotated-source/defaults.html\">Options</a></p>\n\n<h3 id=\"field-options\">Field options</h3>\n\n<pre><code class=\"language-js\">// identifier used to group together inputs\n// (e.g. radio buttons…)\n multiple: null\n</code></pre>\n\n<pre><code class=\"language-js\">// identifier (or array of identifiers) used to\n// validate only a select group of inputs\n group: null\n</code></pre>\n\n<p>These options are only available for fields.</p>\n\n<h3 id=\"ui-options\">UI Options</h3>\n\n<pre><code class=\"language-js\">// Enable/disable error messages\n uiEnabled: true\n</code></pre>\n\n<pre><code class=\"language-js\">// Key events threshold before validation\n validationThreshold: 3\n</code></pre>\n\n<pre><code class=\"language-js\">// Focused field on form validation error. ‘first’|’last’|’none’\n focus: 'first'\n</code></pre>\n\n<pre><code class=\"language-js\">// $.Event() that will trigger validation. eg: keyup, change…\n trigger: false\n</code></pre>\n\n<pre><code class=\"language-js\">// Class that would be added on every failing validation\n// Parsley field\n errorClass: 'parsley-error'\n successClass: 'parsley-success'\n</code></pre>\n\n<pre><code class=\"language-js\">// Return the $element that will receive these above\n// success or error classes. Could also be (and given\n// directly from DOM) a valid selector like '#div'\n classHandler: function (ParsleyField) {}\n</code></pre>\n\n<pre><code class=\"language-js\">// Return the $element where errors will be appended.\n// Could also be (and given directly from DOM) a valid\n// selector like '#div'\n errorsContainer: function (ParsleyField) {}\n</code></pre>\n\n<pre><code class=\"language-js\">// ul elem that would receive errors’ list\n errorsWrapper: '&lt;ul class=\"parsley-errors-list\"&gt;&lt;/ul&gt;'\n</code></pre>\n\n<pre><code class=\"language-js\">// li elem that would receive error message\n errorTemplate: '&lt;li&gt;&lt;/li&gt;'\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"custom-container\">Custom container</h3>\n\n<pre><code class=\"language-js\">$('[data-parsley]').parsley({\n errorsContainer (field) {\n return field.$element.closest('.block, .control')\n }\n})\n</code></pre>\n\n<p>Appends the error to the closest <code>.block</code> or <code>.control</code>.</p>\n\n<h3 id=\"custom-markup\">Custom markup</h3>\n\n<pre><code class=\"language-js\">$('[data-parsley]').parsley({\n errorClass: '-error',\n successClass: '-success',\n\n errorsWrapper: '&lt;ul class=\"parsley-error-list\"&gt;&lt;/ul&gt;',\n errorTemplate: '&lt;li class=\"parsley-error\"&gt;&lt;/li&gt;'\n})\n</code></pre>\n\n<p>Uses custom markup.</p>\n\n<h3 id=\"custom-fields\">Custom fields</h3>\n\n<pre><code class=\"language-js\">$('[data-parsley]').parsley({\n classHandler (field) {\n const $parent = field.$element.closest('.input-group')\n if ($parent.length) return $parent\n\n return field.$element\n }\n})\n</code></pre>\n\n<p>Applies the <code>errorClass</code> and <code>successClass</code> to the closest <code>.input-group</code>, if available.</p>\n\n<h3 id=\"custom-validator\">Custom validator</h3>\n\n<h4 id=\"html\">HTML</h4>\n\n<pre><code class=\"language-html\">&lt;input type='text' data-parsley-multiple-of='3' /&gt;\n</code></pre>\n\n<h4 id=\"javascript\">JavaScript</h4>\n\n<pre><code class=\"language-js\">window.Parsley\n .addValidator('multipleOf', {\n // string | number | integer | date | regexp | boolean\n requirementType: 'integer',\n\n // validateString | validateDate | validateMultiple\n validateNumber (value, requirement) {\n return 0 === value % requirement\n },\n\n messages: {\n en: 'This value should be a multiple of %s'\n }\n })\n</code></pre>\n\n<p>See: <a href=\"http://parsleyjs.org/doc/index.html#custom\">Custom validators</a></p>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://parsleyjs.org/doc/\">Parsley documentation</a> <em>(parsleyjs.org)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://parsleyjs.org/doc/\">Parsley</a> provides frontend form validation.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-19"
},{
"id": "pass",
"title": "Pass",
"url": "/pass",
"category": "CLI",
"keywords": null,
"content_html": "<h2 id=\"reference\">Reference</h2>\n\n<h3 id=\"create\">Create</h3>\n\n<pre><code class=\"language-bash\">$ pass init [-p] &lt;gpg-id&gt;\n$ pass git init\n$ pass git remote add origin &lt;your.git:repository&gt;\n$ pass git push -u --all\n</code></pre>\n\n<h3 id=\"store\">Store</h3>\n\n<pre><code class=\"language-bash\">$ pass insert [-m] twitter.com/rsc\n$ pass generate [-n] twitter.com/rsc length\n</code></pre>\n\n<h3 id=\"retrieve\">Retrieve</h3>\n\n<pre><code class=\"language-bash\">$ pass ls twitter.com/\n$ pass show twitter.com/rsc\n$ pass -c twitter.com/rsc\n</code></pre>\n\n<h3 id=\"search\">Search</h3>\n\n<pre><code class=\"language-bash\">$ pass find twitter.com\n</code></pre>\n\n<h3 id=\"management\">Management</h3>\n\n<pre><code class=\"language-bash\">$ pass mv twitter.com twitter.com/rsc\n$ pass rm [-rf] twitter.com\n$ pass cp twitter.com/rsc twitter.com/ricosc\n</code></pre>\n\n<pre><code class=\"language-bash\">$ pass edit twitter.com/rsc\n</code></pre>\n\n<h3 id=\"synchronize\">Synchronize</h3>\n\n<pre><code>$ pass git push\n$ pass git pull\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://passwordstore.org\">http://passwordstore.org</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "passenger",
"title": "Phusion Passenger",
"url": "/passenger",
"category": "Others",
"keywords": null,
"content_html": "<pre><code>server {\n listen 80;\n server_name www.yourhost.com;\n root /somewhere/public; # &lt;--- be sure to point to 'public'!\n passenger_enabled on;\n autoindex on; # Show directory listings\n}\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "perl-pie",
"title": "Perl-pie",
"url": "/perl-pie",
"category": "Development",
"keywords": null,
"content_html": "<h3 id=\"search-and-replace\">Search and replace</h3>\n\n<pre><code class=\"language-sh\">perl -p -i -e 's/hello/hola/g' *.txt\n</code></pre>\n\n<h3 id=\"back-referencing\">Back-referencing</h3>\n\n<p>Use <code>\\1</code> et al.</p>\n\n<pre><code class=\"language-sh\"># '@include align-items(center);' =&gt; 'align-items: center;'\nperl -p -i -e \"s/\\@include (align-items)\\((.*)\\);/\\1: \\2;/g\"\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ph-food-delivery",
"title": "Food delivery (Philippines)",
"url": "/ph-food-delivery",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-two-column\" id=\"numbers\">Numbers</h2>\n\n<h3 id=\"western\">Western</h3>\n\n<table class=\"-bold-first -headers -no-wrap\">\n <thead>\n <tr>\n <th>Restaurant</th>\n <th>Online order</th>\n <th>Phone</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Army Navy</td>\n <td><a href=\"http://www.armynavy.com.ph/\">armynavy.com.ph</a></td>\n <td><code>331-3131</code></td>\n </tr>\n <tr>\n <td>Burger King</td>\n <td><a href=\"https://www.burgerkingdelivery.com.ph/\">burgerkingdelivery.com.ph</a></td>\n <td><abbr class=\"hint-mark hint--bottom\" data-hint=\"Yes, you need to dial the # sign\"><i></i></abbr> <code>#2-22-22</code></td>\n </tr>\n <tr>\n <td>KFC</td>\n <td><a href=\"https://www.kfc.com.ph\">kfc.com.ph</a></td>\n <td><code>887-8888</code></td>\n </tr>\n <tr>\n <td>Kenny Rogers</td>\n <td><a href=\"http://kennys.com.ph/\">kennys.com.ph</a></td>\n <td><code>555-9000</code></td>\n </tr>\n <tr>\n <td>McDonald’s</td>\n <td><a href=\"http://www.mcdonalds.com.ph/mcdelivery\">mcdonalds.com.ph</a></td>\n <td><code>8-6236</code></td>\n </tr>\n <tr>\n <td>Pancake House</td>\n <td><a href=\"https://www.pancakehouse.com.ph/\">pancakehouse.com.ph</a></td>\n <td><code>7-9000</code></td>\n </tr>\n <tr>\n <td>Wendy’s</td>\n <td><a href=\"https://wendys.com.ph/delivery/\">wendys.com.ph</a></td>\n <td><code>533-3333</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"pizza\">Pizza</h3>\n\n<table class=\"-bold-first -headers -no-wrap\">\n <thead>\n <tr>\n <th>Restaurant</th>\n <th>Online order</th>\n <th>Phone</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Angel’s Pizza</td>\n <td><a href=\"http://angelspizza.com.ph/\">angelspizza.com.ph</a></td>\n <td><code>922-2222</code></td>\n </tr>\n <tr>\n <td>Domino’s</td>\n <td><a href=\"https://www.dominospizza.ph/\">dominospizza.ph</a></td>\n <td><code>997-3030</code></td>\n </tr>\n <tr>\n <td>Greenwich</td>\n <td><a href=\"http://greenwichdelivery.com/\">greenwichdelivery.com</a></td>\n <td><code>5-5555</code></td>\n </tr>\n <tr>\n <td>Papa John’s</td>\n <td><a href=\"http://papajohns.com.ph/\">papajohns.com.ph</a></td>\n <td><code>887-7272</code></td>\n </tr>\n <tr>\n <td>Pizza Hut</td>\n <td><a href=\"https://order.pizzahut.com.ph\">pizzahut.com.ph</a></td>\n <td><code>911-1111</code></td>\n </tr>\n <tr>\n <td>Shakey’s</td>\n <td><a href=\"http://order.shakeyspizza.ph/\">shakeyspizza.ph</a></td>\n <td><code>77-7777</code></td>\n </tr>\n <tr>\n <td>Yellow Cab</td>\n <td><a href=\"http://delivery.yellowcabpizza.com/\">yellowcabpizza.com</a></td>\n <td><code>789-9999</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"asian\">Asian</h3>\n\n<table class=\"-bold-first -headers -no-wrap\">\n <thead>\n <tr>\n <th>Restaurant</th>\n <th>Online order</th>\n <th>Phone</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Bonchon</td>\n <td><a href=\"http://bonchon.com.ph/food/main-menu/\">bonchon.com.ph</a> <em>(menu)</em></td>\n <td><code>633-1818</code></td>\n </tr>\n <tr>\n <td>Chowking</td>\n <td><a href=\"http://www.chowkingdelivery.com\">chowkingdelivery.com</a></td>\n <td><code>9-8888</code></td>\n </tr>\n <tr>\n <td>North Park</td>\n <td><a href=\"http://northparkdelivery.com/\">northparkdelivery.com</a></td>\n <td><code>7-3737</code></td>\n </tr>\n <tr>\n <td>Yoshinoya</td>\n <td><a href=\"http://www.yoshinoya.ph/ordeonline.html/\">yoshinoya.ph</a></td>\n <td><code>288-2888</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"filipino\">Filipino</h3>\n\n<table class=\"-bold-first -headers -no-wrap\">\n <thead>\n <tr>\n <th>Restaurant</th>\n <th>Online order</th>\n <th>Phone</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Amber’s</td>\n <td><a href=\"http://onlineordering.amber.com.ph/\">amber.com.ph</a></td>\n <td><code>884-8888</code></td>\n </tr>\n <tr>\n <td>Goldilock’s</td>\n <td><a href=\"http://www.goldilocksdelivery.com.ph/\">goldilocksdelivery.com.ph</a></td>\n <td><code>888-1-999</code></td>\n </tr>\n <tr>\n <td>Jollibee</td>\n <td><a href=\"http://jollibeedelivery.com\">jollibeedelivery.com</a></td>\n <td><code>#8-7000</code></td>\n </tr>\n <tr>\n <td>Mang Inasal</td>\n <td><a href=\"http://www.manginasal.com/menu/\">manginasal.com</a> <em>(menu)</em></td>\n <td><code>733-1111</code></td>\n </tr>\n <tr>\n <td>Max’s</td>\n <td><a href=\"http://delivery.maxschicken.com/\">maxschicken.com</a></td>\n <td><code>7-9000</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"dessert\">Dessert</h3>\n\n<table class=\"-bold-first -headers -no-wrap\">\n <thead>\n <tr>\n <th>Restaurant</th>\n <th>Online order</th>\n <th>Phone</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Krispy Kreme</td>\n <td><a href=\"http://now.krispykreme.com.ph/\">now.krispykreme.com.ph</a></td>\n <td><code>7-9000</code></td>\n </tr>\n <tr>\n <td>Red Ribbon</td>\n <td><a href=\"http://redribbononlinestore.com/\">redribbononlinestore.com</a></td>\n <td><code>8-7777</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"-\">-</h2>\n\n<p>Hint: you can get to this page via <a href=\"https://devhints.io/gutom\">devhints.io/gutom</a> 🍅🍟</p>",
"intro_html": "<p>Food delivery numbers &amp; sites for top restaurant chains in Metro Manila. For numbers outside Metro Manila, check their websites.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "fitness/phat",
"title": "Phat",
"url": "/fitness/phat",
"category": "Fitness",
"keywords": null,
"content_html": "<h3 id=\"day-1-upper-body-power\">Day 1: Upper Body Power</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Purpose</th>\n <th>Movement</th>\n <th>Sets x Reps</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Pull: power</td>\n <td>Bent over / Pendlay rows</td>\n <td>3 x 3-5</td>\n </tr>\n <tr>\n <td>Pull: assistance</td>\n <td>Weighted Pull ups</td>\n <td>2 x 6-10</td>\n </tr>\n <tr>\n <td>Pull: auxiliary</td>\n <td>Rack chins</td>\n <td>2 x 6-10</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Press: power</td>\n <td>Flat dumbbell presses</td>\n <td>3 x 3-5</td>\n </tr>\n <tr>\n <td>Press: assistance</td>\n <td>Weighted dips</td>\n <td>2 x 6-10</td>\n </tr>\n <tr>\n <td>Press: assistance</td>\n <td>Seated dumbbell shoulder presses</td>\n <td>3 x 6-10</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Aux: curling</td>\n <td>Cambered bar curls</td>\n <td>3 x 6-10</td>\n </tr>\n <tr>\n <td>Aux: extension</td>\n <td>Skull crushers</td>\n <td>3 x 6-10</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"day-2-lower-body-power\">Day 2: Lower Body Power</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Purpose</th>\n <th>Movement</th>\n <th>Sets x Reps</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Press: Power</td>\n <td>Squats</td>\n <td>3 x 3-5</td>\n </tr>\n <tr>\n <td>Press: Assistance</td>\n <td>Hack Squats</td>\n <td>2 x 6-10</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Ext: Assistance</td>\n <td>Leg extensions</td>\n <td>2 x 6-10</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Pull: Assistance</td>\n <td>Stiff legged deadlifts</td>\n <td>3 x 5-8</td>\n </tr>\n <tr>\n <td>Pull: Assistance (curl)</td>\n <td>Glute ham raises or lying leg curls</td>\n <td>2 x 6-10</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Aux: calf</td>\n <td>Standing calf raise</td>\n <td>3 x 6-10</td>\n </tr>\n <tr>\n <td>Aux: calf</td>\n <td>Seated calf raise</td>\n <td>2 x 6-10</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"day-4-upper-body-hypertrophy\">Day 4: Upper Body Hypertrophy</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Purpose</th>\n <th>Movement</th>\n <th>Sets x Reps</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Pull: speed work</td>\n <td>Bent over / Pendlay rows</td>\n <td>6 x 3</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Pull</td>\n <td>Rack chins</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Pull</td>\n <td>Seated cable row</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Pull</td>\n <td>Dumbbell rows / shrugs against incline bench</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Pull</td>\n <td>Close grip pulldowns</td>\n <td>2 x 15-20</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Shoulder</td>\n <td>Seated dumbbell presses</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Shoulder</td>\n <td>Upright rows</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Shoulder</td>\n <td>Side lateral raises with dumbbells or cables</td>\n <td>3 x 12-20</td>\n </tr>\n </tbody>\n</table>\n\n<p>Speed work: with 65-70% of normal 3-5 rep max</p>\n\n<h3 id=\"day-5-lower-body-hypertrophy\">Day 5: Lower Body Hypertrophy</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Purpose</th>\n <th>Movement</th>\n <th>Sets x Reps</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Legs: speed work</td>\n <td>Squats</td>\n <td>6 x 3</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Press</td>\n <td>Hack squats</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Press</td>\n <td>Leg presses</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Extension</td>\n <td>Leg extensions</td>\n <td>3 x 15-20</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Pull</td>\n <td>Romanian deadlifts</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Pull/curling</td>\n <td>Lying leg curls</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Pull/curling</td>\n <td>Seated leg curls</td>\n <td>2 x 15-20</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Calf</td>\n <td>Donkey calf raises</td>\n <td>4 x 10-15</td>\n </tr>\n <tr>\n <td>Calf</td>\n <td>Seated calf raises</td>\n <td>3 x 15-20</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"day-6-chestarms-hypertrophy\">Day 6: Chest/Arms Hypertrophy</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Purpose</th>\n <th>Movement</th>\n <th>Sets x Reps</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Press: speed work</td>\n <td>Flat dumbbell presses</td>\n <td>6 x 3</td>\n </tr>\n <tr>\n <td>Press</td>\n <td>Incline dumbbell presses</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Press</td>\n <td>Hammer strength chest press</td>\n <td>3 x 12-15</td>\n </tr>\n <tr>\n <td>Fly</td>\n <td>Incline cable flyes</td>\n <td>2 x 15-20</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Curl</td>\n <td>Cambered bar preacher curls</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Curl</td>\n <td>Dumbbell concentration curls</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Curl</td>\n <td>Spider curls against incline bench</td>\n <td>2 x 15-20</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Extension</td>\n <td>Seated tricep extension with cambered bar</td>\n <td>3 x 8-12</td>\n </tr>\n <tr>\n <td>Extension</td>\n <td>Cable pressdowns with rope attachment</td>\n <td>2 x 12-15</td>\n </tr>\n <tr>\n <td>Extension</td>\n <td>Cable kickbacks</td>\n <td>2 x 15-20</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "phoenix-conn",
"title": "Phoenix: Plug.Conn",
"url": "/phoenix-conn",
"category": "Elixir",
"keywords": null,
"content_html": "<h2 id=\"request\">Request</h2>\n\n<h3 class=\"-prime\" id=\"request-1\">Request</h3>\n\n<pre><code class=\"language-elixir\">conn.host # → \"example.com\"\nconn.method # → \"GET\"\nconn.path_info # → [\"posts\", \"1\"]\nconn.request_path # → \"/posts/1\"\nconn.query_string # → \"utm_source=twitter\"\nconn.port # → 80\nconn.scheme # → :http\nconn.peer # → { {127, 0, 0, 1}, 12345 }\nconn.remote_ip # → { 151, 236, 219, 228 }\nconn.req_headers # → [{\"content-type\", \"text/plain\"}]\n</code></pre>\n\n<pre><code class=\"language-elixir\">conn |&gt; get_req_header(\"content-type\")\n# → [\"text/plain\"]\n</code></pre>\n\n<h3 id=\"updating-conn\">Updating conn</h3>\n\n<pre><code class=\"language-elixir\">conn\n|&gt; put_req_header(\"accept\", \"application/json\")\n</code></pre>\n\n<p>Usually only useful for tests.</p>\n\n<h2 id=\"response\">Response</h2>\n\n<h3 class=\"-prime\" id=\"response-1\">Response</h3>\n\n<pre><code class=\"language-elixir\">conn.resp_body # → \"...\"\nconn.resp_charset # → \"utf-8\"\nconn.resp_cookies # → ...\nconn.resp_headers # → ...\nconn.status # → ...\n</code></pre>\n\n<h3 id=\"sending-responses\">Sending responses</h3>\n\n<pre><code class=\"language-elixir\"># Plug.Conn\nconn\n|&gt; html(\"&lt;html&gt;&lt;head&gt;...\")\n|&gt; json(%{ message: \"Hello\" })\n|&gt; text(\"Hello\")\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; redirect(to: \"/foo\")\n|&gt; redirect(external: \"http://www.google.com/\")\n|&gt; halt()\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; put_resp_content_type(\"text/plain\")\n|&gt; put_resp_cookie(\"abc\", \"def\")\n|&gt; put_resp_header(\"X-Delivered-By\", \"myapp\")\n|&gt; put_status(202)\n|&gt; put_status(:not_found)\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; put_private(:plug_foo, \"...\") # reserved for libraries\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; send_resp(201, \"\")\n</code></pre>\n\n<h3 id=\"phoenix-views\">Phoenix views</h3>\n\n<pre><code class=\"language-elixir\"># Phoenix.Controller\nconn\n|&gt; render(\"index.html\")\n|&gt; render(\"index.html\", hello: \"world\")\n|&gt; render(MyApp.ErrorView, \"404.html\")\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; put_layout(:foo)\n|&gt; put_layout(false)\n|&gt; put_view(ErrorView)\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; put_secure_browser_headers()\n# prevent clickjacking, nosniff, and xss protection\n# x-frame-options, x-content-type-options, x-xss-protection\n</code></pre>\n\n<pre><code class=\"language-elixir\">|&gt; put_new_view(ErrorView) # if not set yet\n|&gt; put_new_layout(:foo)\n</code></pre>\n\n<pre><code class=\"language-elixir\">layout(conn)\n</code></pre>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 class=\"-prime\" id=\"other-fields\">Other fields</h3>\n\n<pre><code class=\"language-elixir\">conn.assigns # storage of crap\nconn.owner # process\nconn.halted # if pipeline was halted\nconn.secret_key_base # ...\nconn.state # :unset, :set, :file, :sent, :chunked\n</code></pre>\n\n<h3 id=\"accepts\">Accepts</h3>\n\n<pre><code class=\"language-js\">plug :accepts, [\"html\", \"json\"]\nconn |&gt; accepts([\"html\", \"json\"])\nget_format(conn) # → \"html\"\nconn.accepts\n</code></pre>\n\n<h3 id=\"assigns\">Assigns</h3>\n\n<pre><code class=\"language-elixir\">conn.assigns[:hello]\nconn |&gt; assign(:user_id, 100)\n</code></pre>\n\n<pre><code class=\"language-elixir\">conn = async_assign(conn, :location, fn -&gt; geoip_lookup() end)\nawait_assign(conn, :location)\n</code></pre>\n\n<h3 id=\"session\">Session</h3>\n\n<pre><code class=\"language-elixir\">conn = fetch_session(conn) # or plug :fetch_session\n\nconn = put_session(conn, :message, \"new stuff we just set in the session\")\nget_session(conn, :message)\nconn = clear_session(conn)\n</code></pre>\n\n<pre><code class=\"language-elixir\">conn\n|&gt; put_flash(:info, \"Success\")\n|&gt; put_flash(:error, \"Oh no\")\n</code></pre>\n\n<p>Also available: <code>flash</code> <code>cookie</code> <code>params</code></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-29"
},{
"id": "phoenix-ecto",
"title": "Phoenix: Ecto",
"url": "/phoenix-ecto",
"category": "Elixir",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"schemas\">Schemas</h2>\n\n<h3 id=\"generating\">Generating</h3>\n\n<pre><code class=\"language-bash\">$ mix phx.gen.html \\\n Accounts \\ # domain\n Profile \\ # schema\n profiles \\ # table name\n email:string \\\n age:integer\n</code></pre>\n\n<h3 id=\"schema\">Schema</h3>\n\n<pre><code class=\"language-elixir\">defmodule Myapp.Accounts.User do\n use Ecto.Schema\n\n schema \"users\" do\n field :name\n field :age, :integer\n field :password, virtual: true\n\n timestamps()\n end\nend\n</code></pre>\n\n<h3 id=\"field-types\">Field types</h3>\n\n<table class=\"-left-align\">\n <thead>\n <tr>\n <th>Field</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:id</code></td>\n </tr>\n <tr>\n <td><code>:binary</code></td>\n </tr>\n <tr>\n <td><code>:boolean</code></td>\n </tr>\n <tr>\n <td><code>:string</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:integer</code></td>\n </tr>\n <tr>\n <td><code>:float</code></td>\n </tr>\n <tr>\n <td><code>:decimal</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>{:array, inner_type}</code></td>\n </tr>\n <tr>\n <td><code>:map</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"changesets\">Changesets</h2>\n\n<h3 id=\"changesets-1\">Changesets</h3>\n\n<pre><code class=\"language-elixir\">def changeset(user, params \\\\ :empty) do\n %User{}\n |&gt; Ecto.Changeset.change # basic casting to changeset\n\n user\n |&gt; cast(params, ~w(name email), ~w(age)) # params to Changeset\n\n |&gt; validate_format(:email, ~r/@/)\n\n |&gt; validate_inclusion(:age, 18..100)\n |&gt; validate_exclusion(:role, ~w(admin superadmin))\n |&gt; validate_subset(:pets, ~w(cat dog parrot whale))\n\n |&gt; validate_length(:body, min: 1)\n |&gt; validate_length(:body, min: 1, max: 160)\n |&gt; validate_length(:partners, is: 2)\n\n |&gt; validate_number(:pi, greater_than: 3)\n |&gt; validate_number(:pi, less_than: 4)\n |&gt; validate_number(:pi, equal_to: 42)\n\n |&gt; validate_change(:title, fn _, _ -&gt; [])\n |&gt; validate_confirmation(:password, message: \"does not match\")\n\n |&gt; unique_constraint(:email)\n |&gt; foreign_key_constraint(:post_id)\n |&gt; assoc_constraint(:post) # ensure post_id exists\n |&gt; no_assoc_constraint(:post) # negative (useful for deletions)\nend\n</code></pre>\n\n<h3 id=\"changeset-fields\">Changeset fields</h3>\n\n<pre><code class=\"language-elixir\">changeset.valid?\nchangeset.errors #=&gt; [title: \"empty\"]\n\nchangeset.changes #=&gt; %{}\nchangeset.params[:title]\n\nchangeset.required #=&gt; [:title]\nchangeset.optional #=&gt; [:body]\n</code></pre>\n\n<h3 id=\"updating\">Updating</h3>\n\n<pre><code class=\"language-elixir\">changeset #(or model)\n|&gt; change(title: \"New title\")\n|&gt; change(%{ title: \"New title\" })\n|&gt; put_change(:title, \"New title\")\n|&gt; force_change(:title, \"New title\")\n|&gt; update_change(:title, &amp;(&amp;1 &lt;&gt; \"...\"))\n\n|&gt; delete_change(:title)\n|&gt; merge(other_changeset)\n\n|&gt; add_error(:title, \"empty\")\n</code></pre>\n\n<h3 id=\"getting\">Getting</h3>\n\n<pre><code class=\"language-elixir\">get_change(changeset, :title) #=&gt; \"hi\" (if changed)\nget_field(changeset, :title) #=&gt; \"hi\" (even if unchanged)\n\nfetch_change(changeset, :title) #=&gt; {:ok, \"hi\"} | :error\nfetch_field(changeset, :title) #=&gt; {:changes | :model, \"value\"} | :error\n</code></pre>\n\n<h2 id=\"repo\">Repo</h2>\n\n<h3 id=\"get-one\">Get one</h3>\n\n<pre><code class=\"language-elixir\">Repo.get(User, id)\nRepo.get_by(User, email: \"john@hello.com\") #=&gt; %User{} | nil\n\n# also get! get_by!\n</code></pre>\n\n<h3 id=\"createupdate\">Create/update</h3>\n\n<pre><code class=\"language-elixir\">changeset |&gt; Repo.update\nchangeset |&gt; Repo.insert\nchangeset |&gt; Repo.insert_or_update\n</code></pre>\n\n<pre><code>User\n|&gt; Ecto.Changeset.change(%{name: \"hi\"})\n|&gt; Repo.insert\n</code></pre>\n\n<h2 id=\"many\">Many</h2>\n\n<h3 id=\"queries\">Queries</h3>\n\n<pre><code class=\"language-elixir\">from p in Post,\n where: p.title == \"Hello\",\n where: [state: \"Sweden\"],\n\n limit: 1,\n offset: 10,\n\n order_by: c.name,\n order_by: [c.name, c.title],\n order_by: [asc: c.name, desc: c.title],\n\n preload: [:comments],\n preload: [comments: {c, likes: l}],\n\n join: c in assoc(c, :comments),\n join: p in Post, on: c.post_id == p.id,\n group_by: p,\n\n select: p,\n select: {p.title, p.description},\n select: [p.title, p.description],\n</code></pre>\n\n<h3 id=\"get-many\">Get many</h3>\n\n<pre><code class=\"language-elixir\">Repo.all(User)\n</code></pre>\n\n<h3 id=\"update-many\">Update many</h3>\n\n<pre><code class=\"language-elixir\">Repo.update_all(Post, set: [title: \"Title\"])\nRepo.update_all(Post, inc: [views: 1])\n</code></pre>\n\n<h3 id=\"chaining-_all-with-queries\">Chaining <code>_all</code> with queries</h3>\n\n<pre><code class=\"language-elixir\">from(p in Post, where: p.id &lt; 10)\n|&gt; Repo.update_all(...)\n\nfrom(p in Post, where: p.id &lt; 10)\n|&gt; Repo.all()\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li>Based on Ecto 1.3.</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": "2017-08-29"
},{
"id": "phoenix-ecto@1.2",
"title": "Phoenix: Ecto models",
"url": "/phoenix-ecto@1.2",
"category": "Elixir",
"keywords": null,
"content_html": "<p>This is for Phoenix 1.2 and below. <a href=\"phoenix-ecto@1.3.html\">Phoenix 1.3 has a new API.</a>.</p>\n\n<h2 id=\"generating\">Generating</h2>\n\n<pre><code>$ mix phoenix.gen.html Profile profiles email:string age:integer\n$ mix phoenix.gen.html User users email:string hashed_password:string\n</code></pre>\n\n<h2 id=\"schema\">Schema</h2>\n\n<pre><code class=\"language-elixir\">defmodule User do\n use Ecto.Schema\n\n schema \"users\" do\n field :name\n field :age, :integer\n # :id :binary :integer :float :boolean :string :binary\n # {:array, inner_type} :decimal :map\n\n field :password, virtual: true\n end\nend\n</code></pre>\n\n<h2 id=\"changesets\">Changesets</h2>\n\n<pre><code class=\"language-elixir\">def changeset(user, params \\\\ :empty) do\n %User{}\n |&gt; Ecto.Changeset.change # basic casting to changeset\n\n user\n |&gt; cast(params, ~w(name email), ~w(age)) # params to Changeset\n\n |&gt; validate_format(:email, ~r/@/)\n\n |&gt; validate_inclusion(:age, 18..100)\n |&gt; validate_exclusion(:role, ~w(admin superadmin))\n |&gt; validate_subset(:pets, ~w(cat dog parrot whale))\n\n |&gt; validate_length(:body, min: 1)\n |&gt; validate_length(:body, min: 1, max: 160)\n |&gt; validate_length(:partners, is: 2)\n\n |&gt; validate_number(:pi, greater_than: 3)\n |&gt; validate_number(:pi, less_than: 4)\n |&gt; validate_number(:pi, equal_to: 42)\n\n |&gt; validate_change(:title, fn _, _ -&gt; [])\n |&gt; validate_confirmation(:password, message: \"does not match\")\n\n |&gt; unique_constraint(:email)\n |&gt; foreign_key_constraint(:post_id)\n |&gt; assoc_constraint(:post) # ensure post_id exists\n |&gt; no_assoc_constraint(:post) # negative (useful for deletions)\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">changeset.valid?\nchangeset.errors #=&gt; [title: \"empty\"]\n\nchangeset.changes #=&gt; %{}\nchangeset.params[:title]\n\nchangeset.required #=&gt; [:title]\nchangeset.optional #=&gt; [:body]\n</code></pre>\n\n<h3 id=\"updating\">Updating</h3>\n\n<pre><code class=\"language-elixir\">changeset #(or model)\n|&gt; change(title: \"New title\")\n|&gt; change(%{ title: \"New title\" })\n|&gt; put_change(:title, \"New title\")\n|&gt; force_change(:title, \"New title\")\n|&gt; update_change(:title, &amp;(&amp;1 &lt;&gt; \"...\"))\n\n|&gt; delete_change(:title)\n|&gt; merge(other_changeset)\n\n|&gt; add_error(:title, \"empty\")\n</code></pre>\n\n<h3 id=\"getting\">Getting</h3>\n\n<pre><code class=\"language-elixir\">get_change(changeset, :title) #=&gt; \"hi\" (if changed)\nget_field(changeset, :title) #=&gt; \"hi\" (even if unchanged)\n\nfetch_change(changeset, :title) #=&gt; {:ok, \"hi\"} | :error\nfetch_field(changeset, :title) #=&gt; {:changes | :model, \"value\"} | :error\n</code></pre>\n\n<h2 id=\"ecto\">Ecto</h2>\n\n<h3 id=\"get-one\">Get one</h3>\n\n<pre><code class=\"language-elixir\">Repo.get(User, id)\nRepo.get_by(User, email: \"john@hello.com\") #=&gt; %User{} | nil\n\n# also get! get_by!\n</code></pre>\n\n<h3 id=\"createupdate\">Create/update</h3>\n\n<pre><code class=\"language-elixir\">changeset |&gt; Repo.update\nchangeset |&gt; Repo.insert\nchangeset |&gt; Repo.insert_or_update\n</code></pre>\n\n<pre><code>User\n|&gt; Ecto.Changeset.change(%{name: \"hi\"})\n|&gt; Repo.insert\n</code></pre>\n\n<h2 id=\"many\">Many</h2>\n\n<h3 id=\"queries\">Queries</h3>\n\n<pre><code class=\"language-elixir\">from p in Post,\n where: p.title == \"Hello\",\n where: [state: \"Sweden\"],\n\n limit: 1,\n offset: 10,\n\n order_by: c.name,\n order_by: [c.name, c.title],\n order_by: [asc: c.name, desc: c.title],\n\n preload: [:comments],\n preload: [comments: {c, likes: l}],\n\n join: c in assoc(c, :comments),\n join: p in Post, on: c.post_id == p.id,\n group_by: p,\n\n select: p,\n select: {p.title, p.description},\n select: [p.title, p.description],\n</code></pre>\n\n<h3 id=\"get-many\">Get many</h3>\n\n<pre><code class=\"language-elixir\">Repo.all(User)\n</code></pre>\n\n<h3 id=\"update-many\">Update many</h3>\n\n<pre><code class=\"language-elixir\">Repo.update_all(Post, set: [title: \"Title\"])\nRepo.update_all(Post, inc: [views: 1])\n</code></pre>\n\n<h3 id=\"chaining-_all-with-queries\">Chaining <code>_all</code> with queries</h3>\n\n<pre><code class=\"language-elixir\">from(p in Post, where: p.id &lt; 10)\n|&gt; Repo.update_all(...)\n\nfrom(p in Post, where: p.id &lt; 10)\n|&gt; Repo.all()\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "phoenix-ecto@1.3",
"title": "Phoenix: Ecto models",
"url": "/phoenix-ecto@1.3",
"category": "Hidden",
"keywords": null,
"content_html": "",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "phoenix-migrations",
"title": "Phoenix: Ecto migrations",
"url": "/phoenix-migrations",
"category": "Elixir",
"keywords": null,
"content_html": "<h3 id=\"creating\">Creating</h3>\n\n<pre><code class=\"language-bash\">$ mix ecto.gen.migration update_posts_table\n creating priv/repo/migrations/20160602085927_update_posts_table.exs\n ···\n</code></pre>\n\n<pre><code class=\"language-bash\">$ mix ecto.migrate\n$ mix ecto.rollback\n</code></pre>\n\n<p>Creates a migration (no models).</p>\n\n<h3 id=\"creating-models\">Creating models</h3>\n\n<pre><code class=\"language-bash\">$ mix phoenix.gen.model Message messages user_id:integer content:text\n</code></pre>\n\n<p>This is only for Phoenix 1.2 or older; models aren’t available in Phoenix 1.3+.</p>\n\n<h3 id=\"creating-context\">Creating context</h3>\n\n<pre><code class=\"language-bash\">$ mix phx.gen.context Images Album albums title:string subtitle:string privacy:string\n</code></pre>\n\n<h2 id=\"migration-functions\">Migration functions</h2>\n\n<h3 id=\"creating-tables\">Creating tables</h3>\n\n<pre><code class=\"language-elixir\">create table(:documents) do\n add :title, :string\n add :title, :string, size: 40\n add :title, :string, default: \"Hello\"\n add :title, :string, default: fragment(\"now()\")\n add :title, :string, null: false\n add :body, :text\n add :age, :integer\n add :price, :float\n add :price, :float, precision: 10, scale: 2\n add :published_at, :utc_datetime\n add :group_id, references(:groups)\n add :object, :json\n\n timestamps # inserted_at and updated_at\nend\n\ncreate_if_not_exists table(:documents) do: ... end\n</code></pre>\n\n<h3 id=\"other-operations\">Other operations</h3>\n\n<pre><code class=\"language-elixir\">alter table(:posts) do\n add :summary, :text\n modify :title, :text\n remove :views\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">rename table(:posts), :title, to: :summary\nrename table(:posts), to: table(:new_posts)\n</code></pre>\n\n<pre><code class=\"language-elixir\">drop table(:documents)\ndrop_if_exists table(:documents)\n</code></pre>\n\n<pre><code class=\"language-elixir\">table(:documents)\ntable(:weather, prefix: :north_america)\n</code></pre>\n\n<h3 id=\"indices\">Indices</h3>\n\n<pre><code class=\"language-elixir\">create index(:posts, [:slug], concurrently: true)\ncreate unique_index(:posts, [:slug])\ndrop index(:posts, [:name])\n</code></pre>\n\n<h3 id=\"execute-sql\">Execute SQL</h3>\n\n<pre><code class=\"language-elixir\">execute \"UPDATE posts SET published_at = NULL\"\nexecute create: \"posts\", capped: true, size: 1024\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://devdocs.io/phoenix/ecto/ecto.migration\">Ecto.Migration</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-04"
},{
"id": "phoenix-routing",
"title": "Phoenix: Routing",
"url": "/phoenix-routing",
"category": "Elixir",
"keywords": null,
"content_html": "<h3 id=\"showing-routes\">Showing routes</h3>\n\n<pre><code class=\"language-sh\">mix phx.routes # 1.3+\nmix phoenix.routes # 1.2 and below\n</code></pre>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/Mix.Tasks.Phoenix.Routes.html\">Mix.Tasks.Phoenix.Routes</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"single-routes\">Single routes</h3>\n\n<pre><code class=\"language-elixir\">get \"/\", PageController, :index\n</code></pre>\n\n<p>Also: <code>put</code> <code>post</code> <code>patch</code> <code>options</code> <code>delete</code> <code>head</code></p>\n\n<h3 id=\"resources\">Resources</h3>\n\n<pre><code class=\"language-elixir\">resources \"/users\", UserController\nresources \"/users\", UserController, only: [:index, :show]\nresources \"/users\", UserController, except: [:delete]\n</code></pre>\n\n<pre><code class=\"language-elixir\">resources \"/users\", UserController,\n as: :person # helper name (person_path)\n name: :person # ...?\n param: :id # name of parameter for this resource\n</code></pre>\n\n<p>Generates these routes:</p>\n\n<table class=\"-left-align\">\n <thead>\n <tr>\n <th>Method</th>\n <th>Path</th>\n <th>Helper</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>GET</td>\n <td><code>/users</code></td>\n <td><code>user_path(:index)</code></td>\n </tr>\n <tr>\n <td>GET</td>\n <td><code>/users/new</code></td>\n <td><code>user_path(:new)</code></td>\n </tr>\n <tr>\n <td>GET</td>\n <td><code>/users/:id</code></td>\n <td><code>user_path(:show, user)</code></td>\n </tr>\n <tr>\n <td>GET</td>\n <td><code>/users/:id/edit</code></td>\n <td><code>user_path(:edit, user)</code></td>\n </tr>\n <tr>\n <td>POST</td>\n <td><code>/users</code></td>\n <td><code>user_path(:create, user)</code></td>\n </tr>\n <tr>\n <td>PATCH/PUT</td>\n <td><code>/users/:id</code></td>\n <td><code>user_path(:update, user)</code></td>\n </tr>\n <tr>\n <td>DELETE</td>\n <td><code>/users/:id</code></td>\n <td><code>user_path(:delete, user)</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/Phoenix.Router.html#resources/4\">resources/4</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"path-helpers\">Path helpers</h3>\n\n<pre><code class=\"language-elixir\">user_path(conn, :index) # → /users\nuser_path(conn, :show, 17) # → /users/17\nuser_path(conn, :show, %User{id: 17}) # → /users/17\nuser_path(conn, :show, 17, admin: true) # → /users/17?admin=true\n</code></pre>\n\n<pre><code class=\"language-elixir\">user_url(conn, :index) # → \"http://localhost:4000/users\"\n</code></pre>\n\n<pre><code class=\"language-elixir\">MyApp.Router.Helpers.user_path(MyApp.Endpoint, :index)\n</code></pre>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/Phoenix.Router.html#module-helpers\">Helpers</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"nested-resources\">Nested resources</h3>\n\n<pre><code class=\"language-elixir\">resources \"/users\", UserController do\n resources \"/posts\", PostController\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">user_post_path(:index, 17) # → /users/17/posts\nuser_post_path(:show, 17, 12) # → /users/17/posts/12\n</code></pre>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/Phoenix.Router.html#module-scopes-and-resources\">Scopes and resources</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"scoped-routes\">Scoped routes</h3>\n\n<pre><code class=\"language-elixir\">scope \"/admin\" do\n pipe_through :browser\n resources \"/reviews\", MyApp.Admin.ReviewController\nend\n# reviews_path() -&gt; /admin/reviews\n</code></pre>\n\n<pre><code class=\"language-elixir\">scope \"/admin\", as: :admin do: ... end\n# admin_reviews_path() -&gt; /admin/reviews\n</code></pre>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/Phoenix.Router.html#scope/2\">scope/2</a> <em>(hexdocs.pm)</em></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "phoenix",
"title": "Phoenix",
"url": "/phoenix",
"category": "Elixir",
"keywords": null,
"content_html": "<h3 id=\"quick-start\">Quick start</h3>\n\n<pre><code class=\"language-bash\"># Install Phoenix\nmix local.hex\nmix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez\n</code></pre>\n\n<pre><code class=\"language-bash\"># Create a new project\nmix phx.new hello\n</code></pre>\n\n<pre><code class=\"language-bash\"># Start the application\nmix phx.server\n</code></pre>\n\n<p>Install Erlang, Elixir, Node.js, PostgreSQL first.\nSee: <a href=\"https://hexdocs.pm/phoenix/installation.html\">Installation</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"directory-structure\">Directory structure</h3>\n\n<pre class=\"-box-chars\"><code>./\n├── _build\n├── assets/\n│ ├── css/\n│ ├── js/\n│ ├── static/\n│ └── node_modules/\n├── config/\n├── deps/\n├── lib/\n│ ├── hello/\n│ ├── hello.ex\n│ ├── hello_web/\n│ │ ├── channels/\n│ │ ├── controllers/\n│ │ ├── templates/\n│ │ ├── views/\n│ │ ├── router.ex\n│ │ └── gettext.ex\n│ └── hello_web.ex\n├── priv/\n└── test/\n</code></pre>\n\n<p>See: <a href=\"https://hexdocs.pm/phoenix/adding_pages.html\">Adding pages</a> <em>(hexdocs.pm)</em></p>\n\n<h3 id=\"migrations\">Migrations</h3>\n\n<pre><code class=\"language-bash\">$ mix ecto.gen.migration update_posts_table\n creating priv/repo/migrations/20160602085927_update_posts_table.exs\n ···\n</code></pre>\n\n<pre><code class=\"language-elixir\">create table(:documents) do\n add :title, :string\n add :title, :string, default: \"Hello\"\n add :body, :text\n add :age, :integer\n add :price, :float, precision: 10, scale: 2\n timestamps\nend\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./phoenix-migrations\">Ecto migrations cheatsheet</a></p>\n\n<h3 id=\"routing\">Routing</h3>\n\n<pre><code class=\"language-elixir\">get \"/\", PageController, :index\n\nresources \"/users\", UserController do\n resources \"/posts\", PostController\nend\n</code></pre>\n\n<pre><code class=\"language-elixir\">user_post_path(conn, :index, 17) # → /users/17/posts\nuser_post_path(conn, :show, 17, 12) # → /users/17/posts/12\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./phoenix-routing\">Phoenix routing cheatsheet</a></p>\n\n<h3 id=\"conn\">Conn</h3>\n\n<pre><code class=\"language-elixir\">conn.host # → \"example.com\"\nconn.method # → \"GET\"\nconn.path_info # → [\"posts\", \"1\"]\nconn.request_path # → \"/posts/1\"\n</code></pre>\n\n<pre><code class=\"language-elixir\">conn\n|&gt; put_status(202)\n|&gt; html(\"&lt;html&gt;&lt;head&gt;···\")\n|&gt; json(%{ message: \"Hello\" })\n|&gt; text(\"Hello\")\n|&gt; redirect(to: \"/foo\")\n|&gt; render(\"index.html\")\n|&gt; render(\"index.html\", hello: \"world\")\n|&gt; render(MyApp.ErrorView, \"404.html\")\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./phoenix-conn\">Phoenix conn cheatsheet</a></p>\n\n<h3 id=\"ecto\">Ecto</h3>\n\n<pre><code class=\"language-bash\">$ mix phx.gen.html \\\n Accounts \\ # domain\n Profile \\ # schema\n profiles \\ # table name\n email:string \\\n age:integer\n</code></pre>\n\n<p class=\"-crosslink\"><a href=\"./phoenix-ecto\">Ecto cheatsheet</a></p>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"http://phoenixframework.org/\">Phoenix framework site</a> <em>(phoenixframework.org)</em></li>\n <li><a href=\"https://hexdocs.pm/phoenix/overview.html\">Phoenix: getting started</a> <em>(hexdocs.pm)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-01-15"
},{
"id": "phoenix@1.2",
"title": "Phoenix 1.2",
"url": "/phoenix@1.2",
"category": "Elixir",
"keywords": null,
"content_html": "<p>See <a href=\"./phoenix\">Phoenix</a> for a more updated cheatsheet.</p>\n\n<h3 id=\"directory-structure-legacy-12\">Directory structure (Legacy 1.2)</h3>\n\n<pre><code>├── _build\n├── config/\n├── deps/\n├── lib/\n│ ├── hello/\n│ ├── hello.ex\n├── node_modules/\n├── priv/\n├── test/\n└── web/\n│ ├── channels/\n│ ├── controllers/\n│ ├── models/\n│ ├── static/\n│ ├── templates/\n│ ├── views/\n│ ├── gettext.ex\n│ ├── router.ex\n│ ├── web.ex\n├── mix.exs\n</code></pre>\n\n<p>This is Phoenix 1.2’s structure. Phoenix 1.3 has no <code>models</code>.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-01-15"
},{
"id": "wip/php",
"title": "PHP",
"url": "/wip/php",
"category": "PHP",
"keywords": null,
"content_html": "<h3 id=\"hello-world\">Hello world</h3>\n\n<h4 id=\"hellophp\">hello.php</h4>\n\n<pre><code class=\"language-php\">&lt;?php\nfunction greetMe($name) {\n return \"Hello, \" . $name . \"!\";\n}\n\n$message = greetMe($name);\necho $message;\n</code></pre>\n\n<p>All PHP files start with <code>&lt;?php</code>.</p>\n\n<p>See: <a href=\"http://php.net/manual/en/language.basic-syntax.phptags.php\">PHP tags</a></p>\n\n<h3 id=\"objects\">Objects</h3>\n\n<pre><code class=\"language-php\">&lt;?php\n\n$fruitsArray = array(\n \"apple\" =&gt; 20,\n \"banana\" =&gt; 30\n);\necho $fruitsArray['banana'];\n</code></pre>\n\n<p>Or cast as object</p>\n\n<pre><code class=\"language-php\">&lt;?php\n\n$fruitsObject = (object) $fruits;\necho $fruitsObject-&gt;banana;\n</code></pre>\n\n<h3 id=\"inspecting-objects\">Inspecting objects</h3>\n\n<pre><code class=\"language-php\">&lt;?php\nvar_dump($object)\n</code></pre>\n\n<p>Prints the contents of a variable for inspection.</p>\n\n<p>See: <a href=\"http://php.net/var_dump\">var_dump</a></p>\n\n<h3 id=\"classes\">Classes</h3>\n\n<pre><code class=\"language-php\">class Person {\n public $name = '';\n}\n\n$person = new Person();\n$person-&gt;name = 'bob';\n\necho $person-&gt;name;\n</code></pre>\n\n<h3 id=\"getters-and-setters\">Getters and setters</h3>\n\n<pre><code class=\"language-php\">class Person \n{\n public $name = '';\n\n public function getName()\n {\n return $this-&gt;name;\n }\n\n public function setName($name)\n {\n $this-&gt;name = $name;\n return $this;\n }\n}\n\n$person = new Person();\n$person-&gt;setName('bob');\n\necho $person-&gt;getName();\n</code></pre>\n\n<h3 id=\"isset-vs-empty\">isset vs empty</h3>\n<pre><code class=\"language-php\">\n$options = [\n 'key' =&gt; 'value',\n 'blank' =&gt; '',\n 'nothing' =&gt; null,\n];\n\nvar_dump(isset($options['key']), empty($options['key'])); // true, false\nvar_dump(isset($options['blank']), empty($options['blank'])); // true, true\nvar_dump(isset($options['nothing']), empty($options['nothing'])); // false, true\n\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "plantuml",
"title": "PlantUML",
"url": "/plantuml",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"format\">Format</h3>\n\n<pre><code>@startuml\nCar : drive()\nDog : bark()\n@enduml\n\n# plantuml file.uml &amp;&amp; open file.png\n</code></pre>\n\n<h2 id=\"classes\">Classes</h2>\n\n<ul>\n <li>http://plantuml.sourceforge.net/classes.html</li>\n</ul>\n\n<h3 id=\"methods\">Methods</h3>\n\n<pre><code>Car : drive()\n</code></pre>\n\n<h3 id=\"methods-alt\">Methods (alt)</h3>\n\n<pre><code>class Car {\n String make\n year : Integer\n void drive()\n\n -private()\n #protected()\n ~package private()\n +public()\n\n {static} String id\n {abstract} void methods()\n}\n</code></pre>\n\n<h3 id=\"lines\">Lines</h3>\n\n<pre><code>class Car {\n These are separated by lines.\n The next line is a dotted line\n ..\n Next is a double-stroke\n ==\n Next is a plain line\n --\n Next is a strong line\n __\n You can make headers with it\n .. header ..\n}\n</code></pre>\n\n<h3 id=\"associations\">Associations</h3>\n\n<pre><code>Car &lt;|-- SmallCar # extension\nCar *-- Engine # composition\nCars o-- Car # aggregation\nCar &lt;|.. SmallCar # dotted line (use .. instead of --)\nCar &lt;|--* Car\n\n-left-&gt;\n-right-&gt;\n</code></pre>\n\n<h3 id=\"relations\">Relations</h3>\n\n<pre><code>Driver - Car : drives &gt;\nCar -- Owner : &lt; owns\nCar *-- Wheel : has 4 &gt;\n</code></pre>\n\n<h3 id=\"notes\">Notes</h3>\n\n<pre><code>class Car {\n}\nnote left: Something something\n\nnote top of Car : This is a car.\n</code></pre>\n\n<h3 id=\"namespaces\">Namespaces</h3>\n\n<pre><code>namespace Client {\n class Driver {\n }\n}\n\nCar -- Client.Driver : owns &gt;\n</code></pre>\n\n<h2 id=\"activities\">Activities</h2>\n\n<pre><code>(*) --&gt; \"First Activity\"\n--&gt;[You can put also labels] \"Second Activity\"\n--&gt; (*)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "pm2",
"title": "pm2",
"url": "/pm2",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"fork-mode\">Fork mode</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 start app.js --name my-api</code></td>\n <td>Start and name a process</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"cluster-mode\">Cluster mode</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 start app.js -i 0</code></td>\n <td>Will start maximum processes with LB depending on available CPUs</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"listing\">Listing</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 list</code></td>\n <td>Display all processes status</td>\n </tr>\n <tr>\n <td><code>pm2 jlist</code></td>\n <td>Print process list in raw JSON</td>\n </tr>\n <tr>\n <td><code>pm2 prettylist</code></td>\n <td>Print process list in beautified JSON</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 describe 0</code></td>\n <td>Display all information about a specific process</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 monit</code></td>\n <td>Monitor all processes</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"logs\">Logs</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 logs [--raw]</code></td>\n <td>Display all processes logs in streaming</td>\n </tr>\n <tr>\n <td><code>pm2 flush</code></td>\n <td>Empty all log files</td>\n </tr>\n <tr>\n <td><code>pm2 reloadLogs</code></td>\n <td>Reload all logs</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"actions\">Actions</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 stop all</code></td>\n <td>Stop all processes</td>\n </tr>\n <tr>\n <td><code>pm2 restart all</code></td>\n <td>Restart all processes</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 reload all</code></td>\n <td>Will 0s downtime reload (for NETWORKED apps)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 stop 0</code></td>\n <td>Stop specific process id</td>\n </tr>\n <tr>\n <td><code>pm2 restart 0</code></td>\n <td>Restart specific process id</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 delete 0</code></td>\n <td>Will remove process from pm2 list</td>\n </tr>\n <tr>\n <td><code>pm2 delete all</code></td>\n <td>Will remove all processes from pm2 list</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 save</code></td>\n <td>Save processes list to respawn at reboot</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"misc\">Misc</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pm2 reset &lt;process&gt;</code></td>\n <td>Reset meta data (restarted time…)</td>\n </tr>\n <tr>\n <td><code>pm2 updatePM2</code></td>\n <td>Update in memory pm2</td>\n </tr>\n <tr>\n <td><code>pm2 ping</code></td>\n <td>Ensure pm2 daemon has been launched</td>\n </tr>\n <tr>\n <td><code>pm2 sendSignal SIGUSR2 my-app</code></td>\n <td>Send system signal to script</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>pm2 start app.js --no-daemon</code></td>\n <td>Run pm2 daemon in the foreground if it doesn’t exist already</td>\n </tr>\n <tr>\n <td><code>pm2 start app.js --no-vizion</code></td>\n <td>Skip vizion features (versioning control)</td>\n </tr>\n <tr>\n <td><code>pm2 start app.js --no-autorestart</code></td>\n <td>Do not automatically restart app</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-03-15"
},{
"id": "polyfill.io",
"title": "Polyfill.io",
"url": "/polyfill.io",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"usage\">Usage</h2>\n\n<h3 id=\"default-usage\">Default usage</h3>\n\n<pre><code class=\"language-html\">&lt;script src=\"https://cdn.polyfill.io/v2/polyfill.min.js\"&gt;&lt;/script&gt;\n</code></pre>\n\n<p class=\"-wrap\">This is the default script for Polyfill.io.</p>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://polyfill.io/v2/docs/api\">API example</a> <em>(polyfill.io)</em></li>\n <li><a href=\"https://polyfill.io/v2/docs/features\">List of features</a> <em>(polyfill.io)</em></li>\n</ul>\n\n<h2 id=\"optimized\">Optimized</h2>\n\n<h3 id=\"for-modern-browsers\">For modern browsers</h3>\n\n<pre><code class=\"language-html\">&lt;script&gt;if(!(window.Promise&amp;&amp;[].includes&amp;&amp;Object.assign&amp;&amp;window.Map)){document.write('&lt;script src=\"https://cdn.polyfill.io/v2/polyfill.min.js\"&gt;&lt;/scr'+'ipt&gt;')}&lt;/script&gt;\n</code></pre>\n\n<p>This only includes polyfill.io when necessary, skipping it for modern browsers for faster load times.</p>\n\n<h3 id=\"extra-features\">Extra features</h3>\n\n<pre><code class=\"language-html\">&lt;script&gt;if(!(window.fetch&amp;&amp;window.Promise&amp;&amp;[].includes&amp;&amp;Object.assign&amp;&amp;window.Map)){document.write('&lt;script src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch\"&gt;&lt;/scr'+'ipt&gt;')}&lt;/script&gt;\n</code></pre>\n\n<p>This is the same as the previous, but also adds a polyfill for <code>window.fetch()</code>. We add a <code>window.fetch</code> check and loads the additional <code>fetch</code> feature.</p>",
"intro_html": "<p><a href=\"https://polyfill.io\">Polyfill.io</a> is a service that serves JavaScript polyfills.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-26"
},{
"id": "postgresql-json",
"title": "PostgreSQL JSON",
"url": "/postgresql-json",
"category": "Databases",
"keywords": null,
"content_html": "<h2 id=\"operators\">Operators</h2>\n\n<h3 id=\"accessors\">Accessors</h3>\n\n<pre class=\"-setup\"><code class=\"language-sql\">SELECT * FROM users WHERE data-&gt;&gt;'name' = 'John';\nSELECT data-&gt;&gt;'name' AS name FROM users;\n</code></pre>\n\n<table class=\"-headers -shortcuts\">\n <thead>\n <tr>\n <th>Operator</th>\n <th>Description</th>\n <th>Example</th>\n <th>Returns</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-&gt;</code> <em>int</em></td>\n <td>Get array element <code>2</code></td>\n <td><code>data-&gt;2</code></td>\n <td>JSON</td>\n </tr>\n <tr>\n <td><code>-&gt;</code> <em>text</em></td>\n <td>Get object key <code>name</code></td>\n <td><code>data-&gt;'name'</code></td>\n <td>JSON</td>\n </tr>\n <tr>\n <td><code>#&gt;</code> <em>text[]</em></td>\n <td>Get keypath <code>a,b</code> (eg, <code>data.a.b</code>)</td>\n <td><code>data#&gt;'{a,b}'</code></td>\n <td>JSON</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-&gt;&gt;</code> <em>int</em></td>\n <td>Get array element <code>2</code></td>\n <td><code>data-&gt;&gt;2</code></td>\n <td>Text</td>\n </tr>\n <tr>\n <td><code>-&gt;&gt;</code> <em>text</em></td>\n <td>Get object key <code>name</code></td>\n <td><code>data-&gt;&gt;'name'</code></td>\n <td>Text</td>\n </tr>\n <tr>\n <td><code>#&gt;&gt;</code> <em>text[]</em></td>\n <td>Get keypath <code>a,b</code> (eg, <code>data.a.b</code>)</td>\n <td><code>data#&gt;&gt;'{a,b}'</code></td>\n <td>Text</td>\n </tr>\n </tbody>\n</table>\n\n<p><code>&gt;</code> returns JSON, <code>&gt;&gt;</code> returns text.</p>\n\n<h3 id=\"boolean-operators\">Boolean operators</h3>\n\n<pre class=\"-setup\"><code class=\"language-sql\">SELECT * FROM users WHERE data-&gt;tags ? 'admin';\nSELECT data-&gt;tags ? 'admin' AS is_admin FROM users;\n</code></pre>\n\n<table class=\"-headers -shortcuts -left-align\">\n <thead>\n <tr>\n <th>Operator</th>\n <th>Description</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>?</code> <em>str</em></td>\n <td>Does <code>data</code> have key <code>name</code>?</td>\n <td><code>data ? 'name'</code></td>\n </tr>\n <tr>\n <td><code>?|</code> <em>text[]</em></td>\n <td>Does <code>data</code> have <code>a</code> or <code>b</code>?</td>\n <td><code>data ?| array['a','b']</code></td>\n </tr>\n <tr>\n <td><code>?&amp;</code> <em>text[]</em></td>\n <td>Does <code>data</code> have <code>a</code> and <code>b</code>?</td>\n <td><code>data ?&amp; array['a','b']</code></td>\n </tr>\n <tr>\n <td><code>@&gt;</code> <em>jsonb</em></td>\n <td>Does <code>left</code> include <code>right</code>?</td>\n <td><code>data @&gt; '{\"b\":2}'::jsonb</code></td>\n </tr>\n <tr>\n <td><code>&lt;@</code> <em>jsonb</em></td>\n <td>Does <code>right</code> include <code>left</code>?</td>\n <td><code>data &lt;@ '{\"a\":1,\"b\":2}'::jsonb</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>When <code>?</code>/<code>?|</code>/<code>?&amp;</code> works on objects, it checks keys; when it works on arrays, it checks for elements.</p>\n\n<h2 id=\"updating\">Updating</h2>\n\n<h3 id=\"arrays-and-objects\">Arrays and objects</h3>\n\n<pre class=\"-setup\"><code class=\"language-sql\">UPDATE users SET tags = tags || array['admin'];\n</code></pre>\n\n<table class=\"-headers -shortcuts\">\n <thead>\n <tr>\n <th>Operator</th>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>||</code> <em>json</em></td>\n <td><code>data || array['a','b']</code></td>\n <td>Concatenate</td>\n </tr>\n <tr>\n <td><code>-</code> <em>str</em></td>\n <td><code>data - 'a'</code></td>\n <td>Delete a key</td>\n </tr>\n <tr>\n <td><code>-</code> <em>int</em></td>\n <td><code>data - 1</code></td>\n <td>Delete an array item</td>\n </tr>\n <tr>\n <td><code>#-</code> <em>text[]</em></td>\n <td><code>data #- '{us,name}'</code></td>\n <td>Delete a path</td>\n </tr>\n </tbody>\n</table>\n\n<p>Only available in PostgreSQL 9.5+.</p>\n\n<h3 id=\"jsonb_set\">jsonb_set</h3>\n\n<pre><code class=\"language-sql\">UPDATE users SET data = jsonb_set(data, '{name}', '\"John\"');\n</code></pre>\n\n<p>Only available in PostgreSQL 9.5+.</p>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h4 id=\"fnjson--json\">fn(json) → json</h4>\n\n<pre><code class=\"language-sql\">jsonb_set(data, '{path}', value)\njsonb_strip_nulls(data)\n</code></pre>\n\n<h4 id=\"fn--json\">fn(···) → json</h4>\n\n<pre><code class=\"language-sql\">to_json(\"Hello\"::text)\narray_to_json('{1,2}'::int[])\n</code></pre>\n\n<h4 id=\"iteration\">Iteration</h4>\n\n<pre><code class=\"language-sql\">SELECT * from json_each('{\"a\":1, \"b\":2}')\nSELECT * from json_each_text('{\"a\":1, \"b\":2}')\n-- key | value\n</code></pre>\n\n<p>This is an incomplete list, there’s way too many!</p>\n\n<p>See: <a href=\"https://www.postgresql.org/docs/9.5/static/functions-json.html\">JSON functions</a></p>\n\n<h2 id=\"more-examples\">More examples</h2>\n\n<ul>\n <li><code>'{\"a\":1}'::jsonb ? 'a'</code></li>\n <li><code>'[\"a\"]'::jsonb ? 'a'</code></li>\n</ul>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://www.postgresql.org/docs/9.5/static/functions-json.html\">https://www.postgresql.org/docs/9.5/static/functions-json.html</a></li>\n <li><a href=\"https://www.postgresql.org/docs/9.5/static/datatype-json.html\">https://www.postgresql.org/docs/9.5/static/datatype-json.html</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-22"
},{
"id": "postgresql",
"title": "PostgreSQL",
"url": "/postgresql",
"category": "Databases",
"keywords": null,
"content_html": "<p>Replace anything within <code>&lt;placeholder&gt;</code> accordingly</p>\n\n<h3 id=\"console\">Console</h3>\n\n<pre><code>$ psql #logs in to default database &amp; default user\n$ sudo -u &lt;rolename:postgres&gt; psql #logs in with a particular user\n</code></pre>\n\n<h3 id=\"commands\">Commands</h3>\n\n<ul>\n <li>Show roles: <code>\\du</code></li>\n <li>Show tables: <code>\\dt</code></li>\n <li>Show databases: <code>\\l</code></li>\n <li>Connect to a database: <code>\\c &lt;database&gt;</code></li>\n <li>Show columns of a table: <code>\\d &lt;table&gt;</code> or <code>\\d+ &lt;table&gt;</code></li>\n <li>Quit: <code>\\q</code></li>\n</ul>\n\n<h3 id=\"creating-database\">Creating database</h3>\n\n<pre><code> $ createdb databasename\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "premailer",
"title": "Premailer",
"url": "/premailer",
"category": "Others",
"keywords": null,
"content_html": "<pre><code>-premailer-width\n Available on table, th and td elements\n-premailer-height\n Available on table, tr, th and td elements\n-premailer-cellpadding\n Available on table elements\n-premailer-cellspacing\n Available on table elements\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "projectionist",
"title": "Projectionist",
"url": "/projectionist",
"category": "Vim",
"keywords": null,
"content_html": "<pre><code class=\"language-json\">/* .projectionist.vim */\n{\n \"app/assets/react/components/*.jsx\": {\n \"type\": \"component\",\n \"template\": [\n \"import React from 'react'\",\n \"export default {} = React.createClass({ ... })\"\n ]\n }\n</code></pre>\n\n<h2 id=\"available-options\">Available options</h2>\n\n<pre><code class=\"language-js\">{\n \"lib/*.rb\": {\n \"type\": \"lib\", /* enables :Elib */\n \"alternate\": \"test/{}_spec.rb\", /* for :A */\n \"template\": [ ... ],\n\n \"path\": \"include\", /* for `gf` i think */\n\n \"console\": \"node\", /* for :Console */\n \"dispatch\": \"node\", /* for :Dispatch (dispatch.vim) */\n \"start\": \"rails server\", /* for :Start (dispatch.vim) */\n \"make\": \"node\", /* for makeprg */\n }\n}\n</code></pre>\n\n<h2 id=\"commands\">Commands</h2>\n\n<table class=\"shortcuts\">\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:A</code></td>\n <td>Edit alternate</td>\n </tr>\n <tr>\n <td><code>:A {file}</code></td>\n <td>Edit file</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:AS</code></td>\n <td>Edit in split</td>\n </tr>\n <tr>\n <td><code>:AV</code></td>\n <td>Edit in vsplit</td>\n </tr>\n <tr>\n <td><code>:AT</code></td>\n <td>Edit in tab</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:AD</code></td>\n <td>Replace with template</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:Cd</code></td>\n <td>cd to root</td>\n </tr>\n <tr>\n <td><code>:Cd {path}</code></td>\n <td>cd to path in root</td>\n </tr>\n <tr>\n <td><code>:Lcd</code></td>\n <td>cd to root using :lcd</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:ProjectDo {cmd}</code></td>\n <td>run command in root</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"reference\">Reference</h2>\n\n<p>See <a href=\"https://github.com/tpope/vim-projectionist\">vim-projectionist</a>.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "promise",
"title": "Promises",
"url": "/promise",
"category": "JavaScript",
"keywords": null,
"content_html": "<p class=\"brief-intro center\">Based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\">Promise API reference</a> (mozilla.org).</p>\n\n<h3 id=\"creating-promises\">Creating promises</h3>\n\n<pre><code class=\"language-js\">new Promise(function (ok, err) {\n doStuff(function () {\n if (success) { ok(); }\n else { err(); }\n });\n})\n</code></pre>\n\n<h3 id=\"consuming-promises\">Consuming promises</h3>\n\n<pre><code class=\"language-js\">promise\n .then(okFn, errFn)\n .catch(errFn)\n</code></pre>\n\n<h3 id=\"multiple-promises\">Multiple promises</h3>\n\n<pre><code class=\"language-js\">var promises = [\n promise1(), promise2(), ...\n]\n\n// succeeds when all succeed\nPromise.all(promises)\n .then(function (results) {\n });\n\n// succeeds when one finishes first\nPromise.race(promises)\n .then(function (result) {\n });\n</code></pre>\n\n<h3 id=\"converting-other-promises\">Converting other promises</h3>\n\n<pre><code class=\"language-js\">return Promise.resolve(\"result\");\nreturn Promise.resolve(promise);\nreturn Promise.resolve(thenable);\n\nreturn Promise.reject(\"reason\");\n\nPromise.resolve($.get('http://google.com'))\n.then(...)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "pry",
"title": "Pry",
"url": "/pry",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"cd\">cd</h3>\n\n<pre><code>&gt; cd Array\n</code></pre>\n\n<pre><code class=\"language-nohighlight\">&gt; ls\n Array.methods: [] try_convert\n Array#methods: &amp; * + abbrev assoc at ...\n</code></pre>\n\n<pre><code>&gt; show-source\n</code></pre>\n\n<h3 id=\"code\">Code</h3>\n\n<pre><code class=\"language-nohighlight\">&gt; show-method Array#select\n</code></pre>\n\n<h3 id=\"docs\">Docs</h3>\n\n<pre><code class=\"language-nohighlight\">&gt; ri Array\n&gt; ri Array#each\n\n&gt; cd Gem\n&gt; show-doc try_activate\n</code></pre>\n\n<h3 id=\"finding\">Finding</h3>\n\n<pre><code class=\"language-nohighlight\">&gt; find-method each\n Array#each\n Array#each_index\n Enumerable#each_slice\n ...\n</code></pre>\n\n<h3 id=\"editing\">Editing</h3>\n\n<pre><code>&gt; edit Pry#repl\n</code></pre>\n\n<h3 id=\"gems\">Gems</h3>\n\n<pre><code>&gt; gem-cd foo # Switch to gem's dir\n&gt; gem-install foo\n&gt; gem-list\n</code></pre>\n\n<h3 id=\"misc-commands\">Misc commands</h3>\n\n<pre><code>&gt; hist # History\n&gt; wtf? # Trace of recent exception\n</code></pre>\n\n<h2 id=\"rails\">Rails</h2>\n\n<h3 id=\"rails-console\">Rails console</h3>\n\n<p>Also consider <a href=\"https://rubygems.org/gems/pry-rails\">pry-rails</a>.</p>\n\n<pre><code>$ pry -r ./config/environment\n</code></pre>\n\n<h3 id=\"rails-1\">Rails</h3>\n\n<pre><code>&gt; show-models\n&gt; show-routes\n&gt; show-middleware\n</code></pre>\n\n<h3 id=\"ls\">ls</h3>\n\n<pre><code>&gt; ls # All\n\n&gt; ls -m # Methods\n&gt; ls -M # Instance methods\n\n&gt; ls -g # Globals\n&gt; ls -l # Local vars\n&gt; ls -c # Constants\n\n&gt; ls -i # Instance vars\n\n&gt; ls -G xx # Grey by regex\n</code></pre>\n\n<h2 id=\"shell-integration\">Shell integration</h2>\n\n<p>shell-mode adds dir to the prompt.</p>\n\n<pre><code>pry(main)&gt; shell-mode\npry(main):/home/x $\n</code></pre>\n\n<p>Commands with <code>.</code> are shell commands.</p>\n\n<pre><code>pry(main)&gt; .cat hello.txt\n</code></pre>\n\n<h2 id=\"hirb\">hirb</h2>\n<p>Add the <a href=\"https://rubygems.org/gems/hirb\">hirb</a> gem.</p>\n\n<pre><code>&gt; table User.all\n&gt; view User.all\n&gt; view User.all, fields: %w[id name email]\n</code></pre>\n\n<h2 id=\"pry-rescue\">pry-rescue</h2>\n<p>Add the <a href=\"https://github.com/ConradIrwin/pry-rescue\">pry-rescue</a> gem.</p>\n\n<pre><code class=\"language-rb\">Pry::rescue {\n # raise exceptions here\n}\n</code></pre>\n\n<p>Or run:</p>\n\n<pre><code>bundle exec rescue rspec\n</code></pre>\n\n<p>Additional commands:</p>\n\n<pre><code>pry(main)&gt; cd-cause\npry(main)&gt; try-again\n</code></pre>\n\n<h2 id=\"pry-remote\">pry-remote</h2>\n<p>Add the <a href=\"https://github.com/Mon-Ouie/pry-remote\">pry-remote</a> gem.</p>\n\n<pre><code class=\"language-rb\"># In your code:\nbinding.remote_pry\n\n# In the shell:\nbundle exec pry-remote\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li><a href=\"https://github.com/pry/pry\">Pry</a></li>\n <li><a href=\"https://github.com/cldwalker/hirb\">Hirb</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "psdrb",
"title": "PSD.rb",
"url": "/psdrb",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"opening\">Opening</h3>\n\n<pre><code class=\"language-ruby\">psd = PSD.new(file, parse_layer_images: true)\npsd.parse!\n</code></pre>\n\n<h3 id=\"traversing\">Traversing</h3>\n\n<pre><code class=\"language-ruby\"># Gets the root node.\n# A #&lt;Node&gt; can be a Group or a Layer.\nnode = psd.tree\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.root\nnode.descendants\nnode.ancestors\nnode.siblings\nnode.subtree\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.descendant_groups\nnode.descendant_layers\n</code></pre>\n\n<h3 id=\"layer-info\">Layer info</h3>\n\n<pre><code class=\"language-ruby\">node.name #=&gt; \"Layer 2\"\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.top #=&gt; 3\nnode.left #=&gt; 3\nnode.bottom\nnode.right\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Note: these are interchanged (?)\nnode.width\nnode.height\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.visible?\nnode.hidden?\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.layer?\nnode.group?\n</code></pre>\n\n<pre><code class=\"language-ruby\">node.blending_mode #=&gt; \"normal\"\nnode.opacity #=&gt; 0..255\nnode.fill_opacity #=&gt; 0..255\n</code></pre>\n\n<h3 id=\"layer-text\">Layer text</h3>\n\n<pre><code class=\"language-ruby\">node.text #=&gt; (Hash)\nnode.text[:value] #=&gt; \"Text here\"\nnode.text[:font][:name] #=&gt; \"Arial\"\nnode.text[:font][:sizes] #=&gt; [6.9]\nnode.text[:font][:colors] #=&gt; [[255,255,255,255]]\nnode.text[:font][:css] #=&gt; \"font-family: ...;\"\nnode.text[:left] #=&gt; 3\nnode.text[:top]\nnode.text[:right]\nnode.text[:bottom]\nnode.text[:transform] #=&gt; (Hash)\n</code></pre>\n\n<h3 id=\"layer-effects\">Layer effects</h3>\n\n<pre><code class=\"language-ruby\">fx = node.info[:object_effects]\n</code></pre>\n\n<pre><code class=\"language-ruby\">fx.data['Scl '] # ?\nfx.data['GrFl'] # Gradient fill\n</code></pre>\n\n<h3 id=\"layer-mask\">Layer mask</h3>\n\n<pre><code class=\"language-ruby\">node.mask[\"mask_size\"] == 0 # No mask\nnode.mask[\"mask_size\"] == 20 # Has mask\nnode.mask[\"top\"]\nnode.mask[\"left\"]\nnode.mask[\"bottom\"]\nnode.mask[\"right\"]\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li><a href=\"https://github.com/layervault/psd.rb\">layervault/psd.rb</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/layervault/psd.rb\">PSD.rb</a> parses Photoshop documents in Ruby.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "pug",
"title": "Pug",
"url": "/pug",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"pug\">Pug</h2>\n\n<h3 class=\"-prime\" id=\"basic-document\">Basic document</h3>\n\n<pre><code class=\"language-jade\">doctype html\nhtml(lang='en')\n h1.class#id(name='hi')\n | This is some text, hello there,\n = name\n\n - javascript()\n</code></pre>\n\n<h3 id=\"elements\">Elements</h3>\n\n<pre><code class=\"language-jade\">div\n | Just a div\n</code></pre>\n\n<pre><code class=\"language-jade\">.search\n | A div, with class 'search'\n</code></pre>\n\n<pre><code class=\"language-jade\">h1 A heading with text\n</code></pre>\n\n<pre><code class=\"language-jade\">h1= page.title\n</code></pre>\n\n<pre><code class=\"language-jade\">div.class\ndiv.class1.class2\nh1.header\n</code></pre>\n\n<h3 id=\"attributes\">Attributes</h3>\n\n<pre><code class=\"language-jade\">input(type='text' name='q' autofocus)\n</code></pre>\n\n<pre><code class=\"language-jade\">- var authenticated = true\nbody(class=authenticated ? 'authed' : 'anon')\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/attributes.html\">Attributes</a></p>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code class=\"language-jade\">// This comment will appear in the HTML\n</code></pre>\n\n<pre><code class=\"language-jade\">//- This is a silent comment\n</code></pre>\n\n<pre><code class=\"language-jade\">//-\n Nesting inside a comment creates\n a comment block\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/attributes.html\">Comments</a></p>\n\n<h3 id=\"iteration\">Iteration</h3>\n\n<pre><code class=\"language-jade\">ul\n each user in users\n li= user\n</code></pre>\n\n<h3 id=\"layouts\">Layouts</h3>\n\n<pre><code class=\"language-jade\">//- page.pug\nextends layout.pug\n\nblock title\n | hello\n\nblock content\n | hello\n</code></pre>\n\n<pre><code class=\"language-jade\">//- layout.pug\ntitle\n block title\nbody\n block content\n</code></pre>\n\n<h3 id=\"includes-partials\">Includes (partials)</h3>\n\n<pre><code class=\"language-jade\">include ./includes/head.pug\n</code></pre>\n\n<pre><code class=\"language-jade\">include:markdown article.md\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/includes.html\">Includes</a></p>\n\n<h3 id=\"multiline-text\">Multiline text</h3>\n\n<pre data-line=\"1\"><code class=\"language-jade\">p.\n This is text that doesn't need to\n be prefixed by pipes.\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-jade\">script.\n // It's great for raw\n // JavaScript and stuff\n alert('hello')\n</code></pre>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre data-line=\"1,3\"><code class=\"language-jade\">if authenticated\n a(href='/logout') Sign out\nelse\n a(href='/login') Sign in\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/conditionals.html\">Conditionals</a></p>\n\n<h2 class=\"-three-column\" id=\"mixins\">Mixins</h2>\n\n<h3 id=\"mixins-1\">Mixins</h3>\n\n<pre data-line=\"1\"><code class=\"language-jade\">mixin list\n ul\n ···\n</code></pre>\n\n<pre><code class=\"language-jade\">+list\n</code></pre>\n\n<p>Mixins allow you to create reusable code blocks.\nSee: <a href=\"https://pugjs.org/language/mixins.html\">Mixins</a></p>\n\n<h3 id=\"mixin-attributes\">Mixin attributes</h3>\n\n<pre data-line=\"1\"><code class=\"language-jade\">mixin pet(name)\n span.pet= name\n</code></pre>\n\n<pre><code class=\"language-jade\">+pet('cat')\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/mixins.html#mixin-attributes\">Mixin attributes</a></p>\n\n<h3 id=\"mixin-blocks\">Mixin blocks</h3>\n\n<pre data-line=\"1,4\"><code class=\"language-jade\">mixin article(title)\n article\n h2.title= title\n block\n</code></pre>\n\n<pre><code class=\"language-jade\">+article('hello there')\n p Content goes here\n</code></pre>\n\n<p>See: <a href=\"https://pugjs.org/language/mixins.html#mixin-blocks\">Mixin blocks</a></p>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-08-31"
},{
"id": "python",
"title": "Python",
"url": "/python",
"category": "Python",
"keywords": null,
"content_html": "<h3 id=\"lists\">Lists</h3>\n\n<pre><code>list = []\nlist[i:j] # returns list subset\nlist[-1] # returns last element\nlist[:-1] # returns all but the last element\n\nlist[i] = val\nlist[i:j] = otherlist # replace ith to jth-1 elements with otherlist\ndel list[i:j]\n\nlist.append(item)\nlist.extend(another_list)\nlist.insert(index, item)\nlist.pop() # returns and removes last element from the list\nlist.pop(i) # returns and removes i-th element from the list\nlist.remove(i) # removes the first item from the list whose value is i\nlist1 + list2 # combine two list \nset(list) # remove duplicate elements from a list\n\nlist.reverse() # reverses the elements of the list in-place\nlist.count(item)\nsum(list)\n\nzip(list1, list2) # returns list of tuples with n-th element of both list1 and list2\nlist.sort() # sorts in-place, returns None\nsorted(list) # returns sorted copy of list\n\",\".join(list) # returns a string with list elements seperated by comma\n</code></pre>\n\n<h3 id=\"dict\">Dict</h3>\n\n<pre><code>dict.keys()\ndict.values()\n\"key\" in dict # let's say this returns False, then...\ndict[\"key\"] # ...this raises KeyError\ndict.get(\"key\") # ...this returns None\ndict.setdefault(\"key\", 1)\n</code></pre>\n\n<h3 id=\"iteration\">Iteration</h3>\n\n<pre><code>for item in [\"a\", \"b\", \"c\"]:\nfor i in range(4): # 0 to 3\nfor i in range(4, 8): # 4 to 7\nfor i in range(1, 9, 2): # 1, 3, 5, 7\nfor key, val in dict.items():\nfor index, item in enumerate(list):\n</code></pre>\n\n<h3 id=\"string\"><a href=\"https://docs.python.org/2/library/stdtypes.html#string-methods\">String</a></h3>\n\n<pre><code>str[0:4]\nlen(str)\n\nstring.replace(\"-\", \" \")\n\",\".join(list)\n\"hi {0}\".format('j')\nf\"hi {name}\" # same as \"hi {}\".format('name')\nstr.find(\",\")\nstr.index(\",\") # same, but raises IndexError\nstr.count(\",\")\nstr.split(\",\")\n\nstr.lower()\nstr.upper()\nstr.title()\n\nstr.lstrip()\nstr.rstrip()\nstr.strip()\n\nstr.islower()\n\n/* escape characters */\n&gt;&gt;&gt; 'doesn\\'t' # use \\' to escape the single quote...\n \"doesn't\"\n&gt;&gt;&gt; \"doesn't\" # ...or use double quotes instead\n \"doesn't\"\n&gt;&gt;&gt; '\"Yes,\" they said.'\n '\"Yes,\" they said.'\n&gt;&gt;&gt; \"\\\"Yes,\\\" they said.\"\n '\"Yes,\" they said.'\n&gt;&gt;&gt; '\"Isn\\'t,\" they said.'\n '\"Isn\\'t,\" they said.'\n</code></pre>\n\n<h3 id=\"casting\">Casting</h3>\n\n<pre><code>int(str)\nfloat(str)\nstr(int)\nstr(float)\n'string'.encode()\n</code></pre>\n\n<h3 id=\"comprehensions\">Comprehensions</h3>\n\n<pre><code>[fn(i) for i in list] # .map\nmap(fn, list) # .map, returns iterator\n\nfilter(fn, list) # .filter, returns iterator\n[fn(i) for i in list if i &gt; 0] # .filter.map\n</code></pre>\n\n<h3 id=\"regex\">Regex</h3>\n\n<pre><code>import re\n\nre.match(r'^[aeiou]', str)\nre.sub(r'^[aeiou]', '?', str)\nre.sub(r'(xyz)', r'\\1', str)\n\nexpr = re.compile(r'^...$')\nexpr.match(...)\nexpr.sub(...)\n</code></pre>\n\n<h2 id=\"file-manipulation\">File manipulation</h2>\n\n<h3 id=\"reading\">Reading</h3>\n\n<pre><code class=\"language-py\">file = open(\"hello.txt\", \"r\") # open in read mode 'r'\nfile.close() \n</code></pre>\n\n<pre><code class=\"language-py\">print(file.read()) # read the entire file and set the cursor at the end of file\nprint file.readline() # Reading one line\nfile.seek(0, 0) # place the cursor at the beggining of the file\n</code></pre>\n\n<h3 id=\"writing-overwrite\">Writing (overwrite)</h3>\n\n<pre><code class=\"language-py\">file = open(\"hello.txt\", \"w\") # open in write mode 'w'\nfile.write(\"Hello World\") \n\ntext_lines = [\"First line\", \"Second line\", \"Last line\"] \nfile.writelines(text_lines)\n\nfile.close()\n</code></pre>\n\n<h3 id=\"writing-append\">Writing (append)</h3>\n\n<pre><code class=\"language-py\">file = open(\"Hello.txt\", \"a\") # open in append mode\nfile.write(\"Hello World again\") \nfile.close()\n</code></pre>\n\n<h3 id=\"context-manager\">Context manager</h3>\n\n<pre><code class=\"language-py\">with open(\"welcome.txt\", \"r\") as file:\n # 'file' refers directly to \"welcome.txt\"\n data = file.read()\n\n# It closes the file automatically at the end of scope, no need for `file.close()`.\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "qjs",
"title": "Q.js",
"url": "/qjs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"creating-promises-qpromise\">Creating promises (Q.promise)</h3>\n\n<pre><code>Q.promise (ok, fail) =&gt;\n asyncFunction -&gt;\n if error\n fail new Error(\"Failure\")\n else\n ok(data)\n</code></pre>\n\n<h3 id=\"for-arrays\">For arrays</h3>\n\n<pre><code>promises = [saveDisk(), saveCloud()]\n\n# When all succeeds, or *at least one* error\nQ.all(promises).done -&gt;\n alert \"Saved\"\n\n# Same, but get the values\nQ.all(promises).spread (a, b) -&gt;\n alert \"Result A:\" + a\n alert \"Result B:\" + b\n\n# When all either succeeds or errors\nQ.allSettled(promises).done -&gt; ...\n</code></pre>\n\n<h3 id=\"creating-promises-from-node\">Creating promises from Node</h3>\n\n<pre><code># Works like .call() or .apply()\n\nQ.nfcall(FS.readFile, 'foo.txt', 'utf-8')\n.then -&gt; ...\n\nQ.nfapply(FS.readFile, ['foo.txt', 'utf-8'])\n.then -&gt; ...\n\nQ.npost(FS, 'readFile', ['foo.txt, 'utf-8'])\n.then -&gt; ...\n\nQ.npost(FS, 'readFile', 'foo.txt, 'utf-8')\n.then -&gt; ...\n\nreadFile = Q.denodeify(FS.readFile)\nreadFile('foo.txt').then -&gt; ...\n</code></pre>\n\n<h3 id=\"promises-to-node-async\">Promises to Node async</h3>\n\n<pre><code>createUser = (next) -&gt;\n promiseMaker()\n .nodeify(next)\n</code></pre>\n\n<h3 id=\"promise-sugars\">Promise sugars</h3>\n\n<pre><code># Shortcut for .then(ok, fail, progress)\npromise\n.then (data) -&gt;\n.catch (err) -&gt;\n.progress (percent) -&gt;\n</code></pre>\n\n<h3 id=\"try\">Try</h3>\n\n<p>Q.try -&gt;\n promise()</p>\n\n<p>.catch (e) -&gt;\n console.error “Oh well”, e</p>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li>https://github.com/kriskowal/q/wiki/API-Reference</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "qunit",
"title": "Qunit",
"url": "/qunit",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code>QUnit.module('a');\nQUnit.test('ok', function (t) { ... });\n</code></pre>\n\n<h3 id=\"hooks\">Hooks</h3>\n\n<pre><code>// each test\nQUnit.testStart(function)\nQUnit.testEnd(function)\n\n// each module\nQUnit.moduleStart(function)\nQUnit.moduleEnd(function)\n\n// all\nQUnit.begin(function)\nQUnit.done(function)\n</code></pre>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code>t.equal(actual, expected)\nt.deepEqual(actual, expected)\nt.strictEqual(actual, expected)\nt.propEqual(actual, expected)\n\nt.notEqual\n\nt.expect(amount)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rack-test",
"title": "rack-test",
"url": "/rack-test",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"methods\">Methods</h3>\n\n<pre><code class=\"language-ruby\">get 'url'\npost 'url', 'name' =&gt; 'john'\nput\npatch\ndelete\noptions\nhead\n</code></pre>\n\n<pre><code class=\"language-ruby\">authorize 'user', 'pass'\nenv 'rack.session', csrf: 'token'\nheader 'Content-Type', 'text/html'\n</code></pre>\n\n<p>See <a href=\"https://github.com/brynary/rack-test/blob/master/lib/rack/test.rb\">rack/test.rb</a>.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ractive",
"title": "Ractive.js",
"url": "/ractive",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"initialization\"><a href=\"http://docs.ractivejs.org/latest/options\">Initialization</a></h3>\n\n<pre><code>new Ractive({\n el: $('..'),\n el: '#box',\n template: '...', // required\n\n // callbacks\n init: function() {}, // on instantiate\n complete: function() {}, // on finish animations\n\n // objs\n data: { ... },\n partials: { ... }, // global: Ractive.partials\n transitions: { ... }, // global: Ractive.transitions\n components: { ... },\n adaptors: [ ... ],\n\n // options\n magic: false\n modifyArrays: true\n twoway: true\n noIntro: true // true = disable transition on initial render\n lazy: false // false = use keyevents, true = use change/blur\n append: false // false = overwrite element, true = append\n debug: false\n sanitize: false\n})\n</code></pre>\n\n<h2 id=\"instance-methods\">Instance methods</h2>\n\n<h3 id=\"updating-values\">Updating values</h3>\n\n<pre><code>view.add('count', 1) //=&gt; promise\nview.subtract('count', 1) //=&gt; promise\nview.toggle('shown') //=&gt; promise\n\nview.set('a', true)\nview.set({ a: true })\nview.reset({ a: true })\nview.merge('list', [a,b,c])\n\nview.get('a')\nview.data.a\n</code></pre>\n\n<h3 id=\"nodes-and-components\">Nodes and components</h3>\n\n<pre><code>view.find('.klass')\nview.findAll('.klass')\nview.nodes\nview.nodes['hello'] // .find('#hello')\n\nview.findComponent('photo')\nview.findAllComponents('photo')\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code>view.on('event', function() { ... })\nview.off('event', fn)\nview.fire('event')\n</code></pre>\n\n<h3 id=\"others\">Others</h3>\n\n<pre><code>view.update()\nview.updateModel()\n\nview.insert('.node .path')\n\nview.observe({ 'name': function() { ... } })\n\nview.toHTML() //=&gt; String\nview.render()\n</code></pre>\n\n<h2 id=\"extend\">Extend</h2>\n\n<pre><code>View = Ractive.extend({\n ...\n})\nnew View()\n</code></pre>\n\n<h2 id=\"components\"><a href=\"https://github.com/RactiveJS/Ractive/wiki/Components\">Components</a></h2>\n\n<p class=\"center\">See: https://github.com/RactiveJS/Ractive/issues/74</p>\n\n<pre><code>Widget = Ractive.extend({ ... })\n\nractive = new Ractive({\n el: 'main',\n template: '&lt;widget foo=\"bar\"/&gt;',\n components: {\n widget: Widget\n }\n});\n</code></pre>\n\n<h2 id=\"partials\">Partials</h2>\n\n<pre><code>// Global partials\nRactive.partials.x = \"&lt;..&gt;\"\n</code></pre>\n\n<h2 id=\"events-1\">Events</h2>\n\n<pre><code>view.on('teardown')\n</code></pre>\n\n<h3 id=\"dom-events\">DOM Events</h3>\n\n<pre><code>&lt;button on-click='activate'&gt;Activate!&lt;/button&gt;\n\nview.on({\n activate: function () { ... }\n});\n\n&lt;button on-click='sort:name'&gt;Sort by name&lt;/button&gt;\nview.on('sort', function (e, column) {\n console.log('sorting by #{column}');\n});\n</code></pre>\n\n<h3 id=\"observing\">Observing</h3>\n\n<pre><code> view.observe(\"name\", function (name) {\n console.log(\"Changed name to\", name);\n }, { init: false });\n</code></pre>\n\n<h2 id=\"markup\">Markup</h2>\n\n<pre><code>Hello, {{name}}\nBody: {{{unescaped}}}\n\n&lt;!-- each --&gt;\n{{#mylist:i}}\n &lt;li&gt;{{this.name}}&lt;/li&gt;\n &lt;li&gt;{{name}}&lt;/li&gt;\n &lt;li&gt;{{.}}&lt;/li&gt; &lt;!-- same as 'this' --&gt;\n{{/mylist}}\n\n{{^user}}Not logged in{{/user}} &lt;!-- if false --&gt;\n{{#user}}Welcome, sire{{/user}} &lt;!-- if true --&gt;\n\n{{&gt;partialName}}\n&lt;component&gt;\n\n{{#statusDogs[selected]}}\n</code></pre>\n\n<h2 id=\"transformed-attributes\">Transformed attributes</h2>\n\n<p>This transforms the <code>list</code> attribute via a helper function called <code>sort()</code>.</p>\n\n<pre><code>{{# sort(list, \"name\") :num }}\n &lt;li&gt;{{num}} - {{name}}&lt;/li&gt;\n{{/ end. any text goes here }}\n\ndata: {\n sort: function(array, column) { return array.whatever(); }\n}\n</code></pre>\n\n<h2 id=\"transitions\">Transitions</h2>\n\n<pre><code>&lt;div intro=\"fade\"&gt;\n&lt;div intro=\"bump\"&gt;\n&lt;div intro=\"bump:{duration:400}\"&gt;\n\nRactive.transitions.bump = function(t, params) {\n params = t.processParams( params, {\n duration: 400,\n color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'\n });\n\n if (t.isIntro) {\n /* enter */\n } else {\n /* exit */\n }\n\n t.complete();\n};\n</code></pre>\n\n<h2 id=\"decorators\"><a href=\"http://docs.ractivejs.org/latest/decorators\">Decorators</a></h2>\n\n<pre><code>&lt;span decorator=\"tooltip:hello there\"&gt;Hover me&lt;/span&gt;\n\ndecorators: {\n tooltip: function (node, content) {\n // setup code here\n return {\n teardown: function () {\n // cleanup code here\n }\n }\n }\n}\n\n&lt;span decorator=\"tooltip:'a','b',2,'c'\"&gt;Hover me&lt;/span&gt;\n\ntooltip: function (node, a, b, two, c) { ... }\n</code></pre>\n\n<h2 id=\"adaptors\"><a href=\"http://docs.ractivejs.org/latest/adaptors\">Adaptors</a></h2>\n\n<pre><code>myAdaptor = {\n filter: function (object, keypath, ractive) {\n // return `true` if a particular object is of the type we want to adapt\n },\n wrap: function (ractive, object, keypath, prefixer) {\n // set up event bindings here\n object.on('change', function () { ractive.set(prefixer({...})); });\n // then return a wrapper:\n return {\n teardown: function () { .. },\n // json representation\n get: function () { return { a:2, b:3, c:4, ... }; },\n // called on ractive.set\n set: function (key, val) { },\n // called on ractive.set on root (return false = die)\n reset: function (data) { return false; }\n };\n }\n};\n</code></pre>\n\n<h2 id=\"computed-properties\"><a href=\"http://docs.ractivejs.org/latest/computed-properties\">Computed properties</a></h2>\n\n<pre><code>new Ractive({\n template: '{{area}}',\n computed: {\n area: function () { return this.get('width') * this.get('height'); }\n area: '${width} * ${height}'\n fullname: {\n get: '${first} + \" \" + ${last}\"\n set: function (name) { ... }\n }\n }\n});\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-controllers",
"title": "Controllers",
"url": "/rails-controllers",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"common-stuff\">Common stuff</h3>\n\n<pre><code>redirect_to root_url\nredirect_to root_url, notice: \"Good.\"\n</code></pre>\n\n<h3 id=\"special-hashes\">Special hashes</h3>\n\n<pre><code>session[:user_id] = nil\n\nflash[:notice] = \"Hello\" # Gets flushed on next request\nflash.keep # Persist flash values\nflash.now[:error] = \"Boo\" # Available on the same request\n\ncookies[:hello] = \"Hi\"\n\nparams[:page]\n\n# params is a combination of:\nquery_parameters\npath_parameters\nrequest_parameters\n</code></pre>\n\n<h3 id=\"respond_to\">respond_to</h3>\n\n<pre><code>respond_to do |format|\n format.html\n format.xml { render xml: @users }\n format.json { render json: @users }\n format.js # Will be executed by the browser\nend\n</code></pre>\n\n<h3 id=\"default_url_options\">default_url_options</h3>\n\n<pre><code># The options parameter is the hash passed in to 'url_for'\ndef default_url_options(options)\n {:locale =&gt; I18n.locale}\nend\n</code></pre>\n\n<h3 id=\"filters\">Filters</h3>\n\n<pre><code># Filter with callbacks\nbefore_filter :authenticate\nbefore_filter :authenticate, except: [:login]\nbefore_filter :authenticate, only: [:login]\ndef authenticate\n redirect_to login_url unless controller.logged_in?\nend\n\n# Filter with inline\nbefore_filter do |controller|\n redirect_to login_url unless controller.logged_in?\nend\n\n# Filter with external classes\nbefore_filter LoginFilter\nclass LoginFilter\n def self.filter(controller) ...; end\nend\n\n# Filter exceptions\nskip_before_filter :require_login, only: [:new, :create]\n\n# Before/after filters\naround_filter :wrap_in_transaction\ndef wrap_in_transaction(&amp;blk)\n ActiveRecord::Base.transaction { yield }\nend\n</code></pre>\n\n<h3 id=\"http-basic-authentication\">HTTP basic authentication</h3>\n\n<pre><code>before_filter :authenticate\n\n# Basic authentication:\ndef authenticate\n authenticate_or_request_with_http_basic { |u, p|\n u == \"root\" &amp;&amp; p == \"alpine\"\n }\nend\n\n# ...or digest (hashed) authentication:\n# uses the ha1 hash (username:realm:password)\ndef authenticate_by_digest\n realm = \"Secret3000\"\n users = {\n \"rsc\" =&gt; Digest::MD5.hexdigest(\"rsc:#{realm}:passwordhere\")\n }\n\n authenticate_or_request_with_http_digest(realm) { |user|\n users[user]\n }\nend\n\n# For integration tests\ndef test_access\n auth = ActionController::HttpAuthentication::Basic.encode_credentials(user, pass)\n get \"/notes/1.xml\", nil, 'HTTP_AUTHORIZATION' =&gt; auth\nend\n\n# Token auth\nis_logged_in = authenticate_with_http_token do |token, options|\n token == our_secret_token\nend\n\nrequest_http_token_authentication unless is_logged_in\n</code></pre>\n\n<h3 id=\"requestresponse\">Request/response</h3>\n\n<pre><code>request.host #=&gt; \"www.example.com\"\nrequest.domain #=&gt; \"www.example.com\"\nrequest.domain(n=2) #=&gt; \"example.com\"\nrequest.port #=&gt; 80\nrequest.protocol #=&gt; \"http://\"\nrequest.query_string #=&gt; \"q=duck+tales\"\nrequest.url #=&gt; \"http://www.example.com/search?q=duck+tales\"\nrequest.fullpath #=&gt; \"/search?q=duck+tales\"\n\nrequest.headers # Returns a hash\n\nrequest.format #=&gt; \"text/html\"\nrequest.remote_ip #=&gt; \"203.167.220.220\"\nrequest.local? #=&gt; true (if localhost/127.0.0.1)\n\nrequest.xhr?\n\nrequest.method #=&gt; \"POST\"\nrequest.method_symbol #=&gt; :post\nrequest.get?\nrequest.post?\nrequest.put?\nrequest.delete?\nrequest.head?\n</code></pre>\n\n<h3 id=\"response\">response</h3>\n\n<pre><code>response.body\nresponse.status #=&gt; 404\nresponse.location # Redirect location\nresponse.content_type\nresponse.charset\nresponse.headers\n\nresponse.headers[\"Content-Type\"] = \"application/pdf\"\n</code></pre>\n\n<h3 id=\"streaming\">Streaming</h3>\n\n<pre><code>send_data pdfdata, filename: \"foo.pdf\", type: \"application/pdf\"\nsend_file Rails.root.join('public','filename.txt') [filename: '..', type: '..']\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"http://guides.rubyonrails.org/action_controller_overview.html\">Guide</a></li>\n <li><a href=\"http://api.rubyonrails.org/classes/ActionController/HttpAuthentication/Basic.html\">HttpAuthentication::Basic</a></li>\n <li><a href=\"http://api.rubyonrails.org/classes/ActionController/HttpAuthentication/Token.html\">HttpAuthentication::Token</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-features",
"title": "Rails features",
"url": "/rails-features",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"page-caching\"><a href=\"https://github.com/rails/actionpack-page_caching\">Page caching</a></h3>\n\n<pre><code>class WeblogController &lt; ActionController::Base\n caches_page :show, :new\nend\n</code></pre>\n\n<p>This will generate cache files such as <code>weblog/show/5.html</code> and \n<code>weblog/new.html</code>, which match the URLs used that would normally trigger dynamic \npage generation</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-forms",
"title": "Form helpers",
"url": "/rails-forms",
"category": "Rails",
"keywords": null,
"content_html": "<h2 id=\"form-builder\">Form builder</h2>\n\n<pre><code class=\"language-haml\">- form_for @post do |f|\n</code></pre>\n\n<p>Field names will be prefixed with <code>post</code> (the class name), and values will be derived from this object (eg, <code>f.text_field :name</code> from <code>@post.name</code>).</p>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-haml\">- form_for @post, |\n url: { method: 'put', action: 'create' }, |\n html: { class: 'nifty_form' } |\n do |f|\n</code></pre>\n\n<h2 id=\"fields\">Fields</h2>\n\n<h3 id=\"text\">Text</h3>\n\n<pre><code class=\"language-rb\">f.text_field :title\nf.text_area :body, size: '60x12'\n</code></pre>\n\n<h3 id=\"checkbox\">Checkbox</h3>\n\n<pre><code class=\"language-rb\">f.check_box :remember_me\nf.label :remember_me, \"Remember me\"\n</code></pre>\n\n<h3 id=\"radio\">Radio</h3>\n\n<pre><code class=\"language-rb\">f.radio_button :gender, 'male'\nf.label :gender_male, \"Male\"\n\nf.radio_button :gender, 'female'\nf.label :gender_female, \"Female\"\n</code></pre>\n\n<h3 id=\"label\">Label</h3>\n\n<pre><code class=\"language-rb\">f.label :title\nf.label :title, \"Title\"\nf.label :title, \"Title\", class: \"title\"\nf.label(:post, :terms) { \"Accept terms\" }\n</code></pre>\n\n<h3 id=\"submit-button\">Submit button</h3>\n\n<pre><code class=\"language-rb\">f.submit \"Create\"\n</code></pre>\n\n<h3 id=\"hidden-fields\">Hidden fields</h3>\n\n<pre><code class=\"language-rb\">f.hidden_field :id\n</code></pre>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"the-model\">The model</h3>\n\n<pre><code class=\"language-ruby\">f.object\n</code></pre>\n\n<h3 id=\"fields-for\">Fields for</h3>\n\n<pre><code class=\"language-haml\">= form_for @post do |f|\n = fields_for :author, @post.author do |ff|\n = ff.text_field :name\n</code></pre>\n\n<h3 id=\"select-dropdowns\">Select dropdowns</h3>\n\n<pre><code class=\"language-rb\">f.select :city_id, [['Lisbon',1], ['Madrid',2], ...], 4\n# (4 = selected)\n\noptions_for_select [['Lisbon',1], ['Madrid',2], ...], 4\n# Just makes &lt;option&gt; tags\n</code></pre>\n\n<h3 id=\"collections\">Collections</h3>\n\n<pre><code>f.collection_radio_buttons :author_id, Author.all, :id, :name_with_initial\nf.collection_select :city_id, City.all, :id, :name\n# (field, collection, value_key, label_key)\n</code></pre>\n\n<h3 id=\"time-select\">Time select</h3>\n\n<pre><code class=\"language-rb\">f.time_zone_select :time_zone\nf.date_select :birthday\n</code></pre>\n<h3 id=\"i18n\">I18n</h3>\n\n<pre><code class=\"language-yaml\">helpers:\n submit:\n # helpers.submit.&lt;action&gt;\n create: \"Create a %{model}\"\n update: \"Confirm changes to %{model}\"\n\n # helpers.submit.&lt;model&gt;.&lt;action&gt;\n article:\n create: \"Publish article\"\n update: \"Update article\"\n\n # helpers.label.&lt;model&gt;.&lt;field&gt;\n label:\n post:\n body: \"Your body text\"\n</code></pre>\n\n<h3 id=\"outside-f\">Outside <code>f</code></h3>\n\n<pre><code class=\"language-rb\">radio_button(\"post\", \"category\", \"rails\")\nradio_button(\"post\", \"category\", \"java\")\n\n# picks from @post.category\n# &lt;input type=\"radio\" id=\"post_category_rails\" name=\"post[category]\"\n# value=\"rails\" checked=\"checked\" /&gt;\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<pre><code class=\"language-rb\">select(method, choices = nil, options = {}, html_options = {}, &amp;block)\n choices == [ ['label', id], ... ]\n\nsubmit(value=nil, options={})\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-gems",
"title": "Rails gems",
"url": "/rails-gems",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"ricos-preferred-rails-gems\">Rico’s preferred rails gems</h3>\n\n<p>Development:</p>\n\n<pre><code>gem 'spring' # code reloading\ngem 'letter_opener'\ngem 'better_errors'\ngem 'meta-tags'\ngem 'guard-rspec'\n</code></pre>\n\n<p>Prod:</p>\n\n<pre><code>gem 'kaminari' # pagination\ngem 'devise'\ngem 'meta-tags', require: 'meta_tags'\ngem 'friendly_id'\ngem 'bourbon'\ngem 'neat'\ngem 'turbolinks'\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-helpers",
"title": "Helpers",
"url": "/rails-helpers",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"date\">Date</h3>\n\n<pre><code>distance_of_time_in_words(Time.now, project.end_date) #=&gt; 3 hours\ndistance_of_time_in_words_to_now(project.end_date) #=&gt; 3 hours\n\ntime_ago_in_words 3.minutes.ago #=&gt; \"3 minutes\"\n</code></pre>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre><code>number_to_currency 20.33\nnumber_to_currency 20.33, precision: 0\nnumber_with_precision 3.14159, precision: 2\nnumber_to_percentage 32 #=&gt; \"32%\"\nnumber_with_delimiter 2048 #=&gt; \"2,048\"\nnumber_to_human 12000000 #=&gt; \"12 million\"\nnumber_to_human_size 12000000 #=&gt; \"12 MB\"\nnumber_to_phone \"5551234\" #=&gt; \"555-1234\"\n</code></pre>\n\n<h3 id=\"cache\">Cache</h3>\n\n<pre><code>&lt;% cache project do %&gt;\n&lt;% cache [project, current_user] do %&gt;\n\n&lt;% cache_if admin?, project do %&gt;\n&lt;% cache_unless admin?, project do %&gt;\n</code></pre>\n\n<h3 id=\"tags\">Tags</h3>\n\n<pre><code>tag(\"br\")\ntag(\"img\", src: \"image.jpg\")\ncontent_tag(:p, \"Hello\")\n</code></pre>\n\n<h3 id=\"time-select\">Time select</h3>\n\n<pre><code># Creates a time select tag that, when POSTed, will be stored in the article\n# variable in the sunrise attribute.\ntime_select \"article\", \"start_time\"\n\n# All options are optional\ntime_select \"article\", \"start_time\", \\\n include_seconds: true,\n minute_step: 15,\n prompt: true,\n prompt: { hour: \"Choose hr\", minute: \"Choose min\", second: \"Choose sec\" },\n ampm: true\n\n# For dates (all options are optional)\ndate_select \"article\", \"written_on\", \\\n start_year: 1995,\n use_month_numbers: true,\n discard_day: true,\n include_blank: true,\n order: [:day, :month, :year],\n default: 3.days.from_now,\n default: { day: 20 },\n prompt: { day: 'Select day', month: 'Select month', year: 'Select year' }\n</code></pre>\n\n<h3 id=\"time-tag\">Time tag</h3>\n\n<pre><code>time_tag Date.today \n#=&gt; '&lt;time datetime=\"2010-11-04\"&gt;November 04, 2010&lt;%rtime&gt;'\n\ntime_tag Time.now\n#=&gt; '&lt;time datetime=\"2010-11-04T17:55:45+01:00\"&gt;November 04, 2010 17:55&lt;/time&gt;'\n\ntime_tag Date.yesterday, 'Yesterday'\n#=&gt; '&lt;time datetime=\"2010-11-03\"&gt;Yesterday&lt;%rtime&gt;'\n\ntime_tag Date.today, pubdate: true\n#=&gt; '&lt;time datetime=\"2010-11-04\" pubdate=\"pubdate\"&gt;November 04, 2010&lt;/time&gt;'\n\ntime_tag Date.today, \\\n format: :short_date # (en.time.formats.short_date)\n</code></pre>\n\n<h3 id=\"files\">Files</h3>\n\n<pre><code>= form_for @post, multipart: true do |f|\n = f.file_field :picture\n</code></pre>\n\n<h3 id=\"i18n\">i18n</h3>\n\n<pre><code>t('folders')\nt('folders.save')\n\nl(Time.now)\n\nt('x_files', count: files.count)\n# files:\n# one: 'one file'\n# other: '%{count} files'\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<pre><code>* http://api.rubyonrails.org/classes/ActionView/Helpers.html\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-i18n",
"title": "i18n",
"url": "/rails-i18n",
"category": "Rails",
"keywords": null,
"content_html": "<pre class=\"light\"><code class=\"language-rb\">t('my.messages.hello')\n\n# same as 'my.messages.hello'\nt(:hello, scope: 'my.messages')\nt(:hello, scope: [:my, :messages])\n\nt('my.messages.hello', default: \"Hello\")\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n my:\n messages:\n hello: \"Hello\"\n</code></pre>\n\n<h3 id=\"interpolation\">Interpolation</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">t('hello', name: \"John\")\n</code></pre>\n\n<pre><code class=\"language-yml\">hello: \"Hello %{name}\"\n</code></pre>\n\n<h3 id=\"lazy-lookup\">Lazy lookup</h3>\n\n<pre class=\"light\"><code class=\"language-rb\"># from the 'books/index' view\nt('.title')\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n books:\n index:\n title: \"Título\"\n</code></pre>\n\n<h3 id=\"plural\">Plural</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">t(:inbox, count: 1) #=&gt; 'one message'\nt(:inbox, count: 2) #=&gt; '2 messages'\n</code></pre>\n\n<pre><code class=\"language-yml\">inbox:\n one: 'one message',\n other: '%{count} messages'\n</code></pre>\n\n<h2 id=\"localizing\">Localizing</h2>\n\n<h3 id=\"time\">Time</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">l(Time.now)\nl(Time.now, format: :short)\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n time:\n formats:\n default: \"%a, %d %b %Y %H:%M:%S %z\"\n long: \"%B %d, %Y %H:%M\"\n short: \"%d %b %H:%M\"\n</code></pre>\n\n<h3 id=\"date\">Date</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">l(Date.today)\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n date:\n formats:\n default: \"%Y-%m-%d\" # 2015-06-25\n long: \"%B %d, %Y\" # June 25, 2015\n short: \"%b %d\" # Jun 25\n</code></pre>\n\n<h2 id=\"activerecord\">ActiveRecord</h2>\n\n<h3 id=\"model-names\">Model names</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">User.model_name.human #=&gt; \"User\"\nChild.model_name.human(count: 2) #=&gt; \"Children\"\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n activerecord:\n models:\n user: \"User\"\n child:\n one: \"Child\"\n other: \"Children\"\n</code></pre>\n\n<h3 id=\"attributes\">Attributes</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">User.human_attribute_for :name #=&gt; \"Name\"\n</code></pre>\n\n<pre><code class=\"language-yml\">en:\n activerecord:\n attributes:\n user:\n # activerecord.attributes.&lt;model&gt;.&lt;field&gt;\n name: \"Name\"\n email: \"Email\"\n</code></pre>\n\n<h3 id=\"error-messages\">Error messages</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">error_messages_for(...)\n</code></pre>\n\n<pre><code class=\"language-yml\">activerecord:\n errors:\n models:\n venue:\n attributes:\n name:\n blank: \"Please enter a name.\"\n</code></pre>\n\n<p>Possible scopes (in order):</p>\n\n<pre><code class=\"language-yml\">activerecord.errors.models.[model_name].attributes.[attribute_name].[error]\nactiverecord.errors.models.[model_name].[error]\nactiverecord.errors.messages.[error]\nerrors.attributes.[attribute_name].[error]\nerrors.messages.[error]\n</code></pre>\n\n<p>Where <code>[error]</code> can be:</p>\n\n<pre><code class=\"language-yml\">validates\n confirmation - :confirmation\n acceptance - :accepted\n presence - :blank\n length - :too_short (%{count})\n length - :too_long (%{count})\n length - :wrong_length (%{count})\n uniqueness - :taken\n format - :invalid\n numericality - :not_a_number\n</code></pre>\n\n<h3 id=\"form-labels\">Form labels</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">form_for @post do\n f.label :body\n</code></pre>\n\n<pre><code class=\"language-yml\">helpers:\n # helpers.label.&lt;model&gt;.&lt;field&gt;\n label:\n post:\n body: \"Your body text\"\n</code></pre>\n\n<h3 id=\"submit-buttons\">Submit buttons</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">form_for @post do\n f.submit\n</code></pre>\n\n<pre><code class=\"language-yml\">helpers:\n submit:\n # helpers.submit.&lt;action&gt;\n create: \"Create a %{model}\"\n update: \"Confirm changes to %{model}\"\n\n # helpers.submit.&lt;model&gt;.&lt;action&gt;\n article:\n create: \"Publish article\"\n update: \"Update article\"\n</code></pre>\n\n<h2 id=\"numbers\">Numbers</h2>\n\n<pre class=\"light\"><code class=\"language-rb\">number_to_delimited(2000) #=&gt; \"2,000\"\nnumber_to_currency(12.3) #=&gt; \"$12.30\"\nnumber_to_percentage(0.3) #=&gt; \"30%\"\nnumber_to_rounded(3.14, precision: 0) #=&gt; \"3\"\nnumber_to_human(12_000) #=&gt; \"12 Thousand\"\nnumber_to_human_size(12345) #=&gt; \"12.3 kb\"\n</code></pre>\n\n<h3 id=\"delimited\">Delimited</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">number_to_delimited(n)\n</code></pre>\n\n<pre><code class=\"language-yml\">number:\n format:\n separator: '.'\n delimiter: ','\n precision: 3\n significant: false\n strip_insignificant_zeroes: false\n</code></pre>\n\n<h3 id=\"currencies\">Currencies</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">number_to_currency(n)\n</code></pre>\n\n<pre><code class=\"language-yml\">number:\n currency:\n format:\n format: \"%u%n\" # %u = unit, %n = number\n unit: \"$\"\n separator: '.'\n delimiter: ','\n precision: 3\n # (see number.format)\n</code></pre>\n\n<h3 id=\"percentage\">Percentage</h3>\n\n<pre class=\"light\"><code class=\"language-rb\">number_to_percentage(n)\n</code></pre>\n\n<pre><code class=\"language-yml\">number:\n percentage:\n format:\n format: \"%n%\"\n # (see number.format)\n</code></pre>\n\n<h2 id=\"programmatic-access\">Programmatic access</h2>\n\n<pre class=\"light\"><code class=\"language-rb\">I18n.backend.store_translations :en, ok: \"Ok\"\nI18n.locale = :en\nI18n.default_locale = :en\n\nI18n.available_locales\n\nI18n.translate :ok # aka, I18n.t\nI18n.localize date # aka, I18n.l\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li>http://guides.rubyonrails.org/i18n.html</li>\n <li>http://rails-i18n.org/wiki</li>\n <li>https://github.com/svenfuchs/i18n</li>\n <li>https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/en.yml</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-migrations",
"title": "Migrations",
"url": "/rails-migrations",
"category": "Rails",
"keywords": null,
"content_html": "<h3 id=\"automatically-make-migrations\">Automatically make migrations</h3>\n\n<pre><code>$ rails generate migration RemovePartNumberFromProducts part_number:string\n$ rails generate migration remove_part_number_from_products part_number # rails assumes string if not type given - and you can use snake_case\n\n$ rails generate migration AddNameToWidgets name:string\n$ rails g migration add_name_to_widgets name:string # you can use the short cut 'g' instead of generate - they both do the same thing\n</code></pre>\n\n<h3 id=\"run-migrations\">Run migrations</h3>\n\n<pre><code>$ rake db:migrate\n</code></pre>\n\n<h3 id=\"creating-tables\">Creating tables</h3>\n\n<pre><code>create_table :users do |t|\n t.string :name\n t.text :description\n\n t.primary_key :id\n t.string :title\n t.text :description\n t.integer :games_count\n t.float :lol\n t.decimal :price\n t.decimal :price, :precision =&gt; 2, :scale =&gt; 10\n t.datetime :expiration\n t.timestamp :time_in\n t.time :time_in\n t.date :expiry\n t.binary :image_data\n t.boolean :is_admin\nend\n\n# Options:\n :null (boolean)\n :limit (integer)\n :default\n</code></pre>\n\n<h3 id=\"operations\">Operations</h3>\n\n<pre><code>add_column :users, :first_name, :string\nremove_column :users, :first_name, :string\n\nchange_column :users, :first_name, :text\nchange_column :users, :first_name, :text\n\nchange_column_default :users, :admin, nil\nchange_column_null :users, :email, false # adds NOT NULL constraint\n\ncreate_table\nchange_table\ndrop_table\n\nadd_column\nchange_column\nrename_column\nremove_column\n\nadd_index\nremove_index\n</code></pre>\n\n<h3 id=\"use-models\">Use models</h3>\n\n<pre><code>class AddFlagToProduct &lt; ActiveRecord::Migration\n class Product &lt; ActiveRecord::Base\n end\n \n def change\n add_column :products, :flag, :boolean\n Product.reset_column_information\n reversible do |dir|\n dir.up { Product.update_all flag: false }\n end\n end\nend\n</code></pre>\n\n<h3 id=\"associations\">Associations</h3>\n\n<pre><code>t.references :category # kinda same as t.integer :category_id\n\n# Can have different types\nt.references :category, polymorphic: true\n</code></pre>\n\n<h3 id=\"auto-addremove-columns\">Auto-Add/remove columns</h3>\n\n<pre><code>$ rails generate migration RemovePartNumberFromProducts part_number:string\n</code></pre>\n\n<h3 id=\"indices\">Indices</h3>\n\n<pre><code># Simple\nadd_index :suppliers, :name\n\n# Unique\nadd_index :accounts, [:branch_id, :party_id], :unique =&gt; true\n\n# Named (:name =&gt; ...)\nadd_index :accounts, [:branch_id, :party_id], :unique =&gt; true, :name =&gt; \"by_branch_party\"\n\n# Length\nadd_index :accounts, :name, :name =&gt; ‘by_name’, :length =&gt; 10\nadd_index :accounts, [:name, :surname], :name =&gt; ‘by_name_surname’,\n :length =&gt; {\n :name =&gt; 10,\n :surname =&gt; 15\n }\n\n# Sort order (no MySQL support)\nadd_index :accounts, [:branch_id, :party_id, :surname],\n :order =&gt; {:branch_id =&gt; :desc, :part_id =&gt; :asc}\n</code></pre>\n\n<h3 id=\"in-console\">In console</h3>\n<p>Use <code>ActiveRecord::Migration</code>.</p>\n\n<pre><code>ActiveRecord::Migration.add_index :posts, :slug\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://apidock.com/rails/ActiveRecord/ConnectionAdapters/SchemaStatements/add_index</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-models",
"title": "Rails models",
"url": "/rails-models",
"category": "Rails",
"keywords": null,
"content_html": "<h2 id=\"generating\">Generating</h2>\n\n<h3 id=\"generating-1\">Generating</h3>\n\n<pre><code>$ rails g model User\n</code></pre>\n\n<h2 id=\"using-models\">Using models</h2>\n\n<h3 id=\"query-methods\">Query methods</h3>\n\n<pre><code class=\"language-ruby\">items = Model\n .where(first_name: 'Harvey')\n .where('id = 3')\n .where('id = ?', 3)\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .order(:title)\n .order(title: :desc)\n .order(\"title DESC\")\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .reorder(:title) # discards other .order's\n .rewhere(...) # discards other .where's\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .limit(2)\n .offset(1)\n .uniq\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/querymethods\">QueryMethods</a></p>\n\n<h3 id=\"advanced-query-methods\">Advanced query methods</h3>\n\n<pre><code class=\"language-ruby\">items = Model\n .select(:id)\n .select([:id, :name])\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .group(:name) # GROUP BY name\n .group('name AS grouped_name, age')\n .having('SUM(price) &gt; 30') # needs to be chained with .group\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .includes(:user)\n .includes(user: [:articles])\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .references(:posts)\n # aka: .where(\"posts.name = 'foo'\").references(:posts)\n</code></pre>\n\n<h3 id=\"finder-methods\">Finder methods</h3>\n\n<pre><code class=\"language-ruby\">item = Model.find(id)\nitem = Model.find_by_email(email)\nitem = Model.where(email: email).first\n</code></pre>\n\n<pre><code class=\"language-ruby\">Model\n .exists?(5)\n .exists?(name: \"David\")\n</code></pre>\n\n<pre><code class=\"language-ruby\"> .first\n .last\n .find_nth(4, [offset])\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/findermethods\">FinderMethods</a></p>\n\n<h3 id=\"persistence\">Persistence</h3>\n\n<pre><code class=\"language-ruby\">item.new_record?\nitem.persisted?\nitem.destroyed?\n\nitem.serialize_hash\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.save\nitem.save! # Same as above, but raises an Exception\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.update name: 'John' # Saves immediately\nitem.update! name: 'John'\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.update_column :name, 'John' # skips validations and callbacks\nitem.update_columns name: 'John'\nitem.update_columns! name: 'John'\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.touch # updates :updated_at\nitem.touch :published_at\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.destroy\nitem.delete # skips callbacks\n</code></pre>\n\n<pre><code class=\"language-ruby\">Model.create # Same an #new then #save\nModel.create! # Same as above, but raises an Exception\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/persistence\">Persistence</a></p>\n\n<h3 id=\"attribute-assignment\">Attribute Assignment</h3>\n\n<pre><code class=\"language-ruby\">item.attributes # #&lt;Hash&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.attributes = { name: 'John' } # Merges attributes in. Doesn't save.\nitem.assign_attributes name: 'John' # Same as above\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/attributeassignment\">AttributeAssignment</a></p>\n\n<h3 id=\"dirty\">Dirty</h3>\n\n<pre><code class=\"language-ruby\">item.changed?\nitem.changed # ['name']\nitem.changed_attributes # { 'name' =&gt; 'Bob' } - original values\nitem.changes # { 'name' =&gt; ['Bob', 'Robert'] }\nitem.previous_changes # available after #save\nitem.restore_attributes\n</code></pre>\n\n<pre><code class=\"language-ruby\">item.name = 'Robert'\nitem.name_was # 'Bob'\nitem.name_change # [ 'Bob', 'Robert' ]\nitem.name_changed? # true\nitem.name_changed?(from: 'Bob', to: 'Robert')\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activemodel/dirty\">Dirty</a></p>\n\n<h3 id=\"validations\">Validations</h3>\n\n<pre><code class=\"language-ruby\">item.valid?\nitem.invalid?\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/validations\">Validations</a></p>\n\n<h3 id=\"calculations\">Calculations</h3>\n\n<pre><code class=\"language-ruby\">Person.count\nPerson.count(:age) # counts non-nil's\n</code></pre>\n\n<pre><code class=\"language-ruby\">Person.average(:age)\nPerson.maximum(:age)\nPerson.minimum(:age)\nPerson.sum('2 * age')\n</code></pre>\n\n<pre><code class=\"language-ruby\">Person.calculate(:count, :all)\n</code></pre>\n\n<p>Advanced:</p>\n\n<pre><code class=\"language-ruby\">Person.distinct.count\nPerson.group(:city).count\n</code></pre>\n\n<p>See: <a href=\"http://devdocs.io/rails/activerecord/calculations\">Calculations</a></p>\n\n<h3 id=\"dynamic-attribute-based-finders\">Dynamic attribute-based finders</h3>\n\n<p class=\"-setup\">Given a field called <code>name</code>:</p>\n\n<pre><code class=\"language-ruby\"># Returns one record\nPerson.find_by_name(name)\nPerson.find_last_by_name(name)\nPerson.find_or_create_by_name(name)\nPerson.find_or_initialize_by_name(name)\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Returns a list of records\nPerson.find_all_by_name(name)\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Add a bang to make it raise an exception\nPerson.find_by_name!(name)\n</code></pre>\n\n<pre><code class=\"language-ruby\"># You may use `scoped` instead of `find`\nPerson.scoped_by_user_name\n</code></pre>\n\n<h2 id=\"associations\">Associations</h2>\n\n<h3 id=\"associations-1\">Associations</h3>\n\n<ul>\n <li><code>belongs_to</code></li>\n <li><code>has_one</code></li>\n <li><code>has_many</code></li>\n <li><code>has_many :through</code></li>\n <li><code>has_one :through</code></li>\n <li><code>has_and_belongs_to_many</code></li>\n</ul>\n\n<h3 id=\"has-many\">Has many</h3>\n\n<pre><code class=\"language-ruby\">belongs_to :parent, :foreign_key =&gt; 'parent_id' class_name: 'Folder'\nhas_many :folders, :foreign_key =&gt; 'parent_id', class_name: 'Folder'\n\nhas_many :comments, -&gt; { order('posted_on DESC') }\nhas_many :comments, :include =&gt; :author\nhas_many :people, :class_name =&gt; \"Person\"\nhas_many :people, :conditions =&gt; \"deleted = 0\"\nhas_many :tracks, -&gt; { order(:position) }\nhas_many :comments, :dependent =&gt; :nullify\nhas_many :comments, :dependent =&gt; :destroy\nhas_many :tags, :as =&gt; :taggable\nhas_many :reports, :readonly =&gt; true\nhas_many :subscribers, :through =&gt; :subscriptions, class_name: \"User\", :source =&gt; :user\nhas_many :subscribers, :finder_sql =&gt;\n 'SELECT DISTINCT people.* ' +\n 'FROM people p, post_subscriptions ps ' +\n 'WHERE ps.post_id = #{id} AND ps.person_id = p.id ' +\n 'ORDER BY p.first_name'\n</code></pre>\n\n<h3 id=\"belongs-to\">belongs to</h3>\n\n<pre><code class=\"language-ruby\">belongs_to :author,\n :dependent =&gt; :destroy # or :delete\n\n :class_name =&gt; \"Person\"\n :select =&gt; \"*\"\n :counter_cache =&gt; true\n :counter_cache =&gt; :custom_counter\n :include =&gt; \"Book\"\n :readonly =&gt; true\n\n :conditions =&gt; 'published = true'\n\n :touch =&gt; true\n :touch =&gt; :authors_last_updated_at\n\n :primary_key =&gt; \"name\"\n :foreign_key =&gt; \"author_name\"\n</code></pre>\n\n<h3 id=\"many-to-many\">Many-to-many</h3>\n\n<p class=\"-setup\">If you have a join model:</p>\n\n<pre data-line=\"2,3\"><code class=\"language-ruby\">class Programmer &lt; ActiveRecord::Base\n has_many :assignments\n has_many :projects, :through =&gt; :assignments\nend\n</code></pre>\n\n<pre data-line=\"2,3\"><code class=\"language-ruby\">class Project &lt; ActiveRecord::Base\n has_many :assignments\n has_many :programmers, :through =&gt; :assignments\nend\n</code></pre>\n\n<pre data-line=\"2,3\"><code class=\"language-ruby\">class Assignment\n belongs_to :project\n belongs_to :programmer\nend\n</code></pre>\n\n<h3 id=\"many-to-many-habtm\">Many-to-many (HABTM)</h3>\n\n<pre><code class=\"language-ruby\">has_and_belongs_to_many :projects\nhas_and_belongs_to_many :projects, :include =&gt; [ :milestones, :manager ]\nhas_and_belongs_to_many :nations, :class_name =&gt; \"Country\"\nhas_and_belongs_to_many :categories, :join_table =&gt; \"prods_cats\"\nhas_and_belongs_to_many :categories, :readonly =&gt; true\nhas_and_belongs_to_many :active_projects, :join_table =&gt; 'developers_projects', :delete_sql =&gt;\n\"DELETE FROM developers_projects WHERE active=1 AND developer_id = #{id} AND project_id = #{record.id}\"\n</code></pre>\n\n<h3 id=\"polymorphic-associations\">Polymorphic associations</h3>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">class Post\n has_many :attachments, as: :parent\nend\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">class Image\n belongs_to :parent, polymorphic: true\nend\n</code></pre>\n\n<p>And in migrations:</p>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">create_table :images do |t|\n t.references :post, polymorphic: true\nend\n</code></pre>\n\n<h2 id=\"validation\">Validation</h2>\n\n<h3 id=\"validation-1\">Validation</h3>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">class Person &lt; ActiveRecord::Base\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-ruby\"> # Presence\n validates :name, presence: true\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Acceptance\n validates :terms, acceptance: true\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Confirm\n validates :email, confirmation: true\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Unique\n validates :slug, uniqueness: true\n validates :slug, uniqueness: { case_sensitive: false }\n validates :holiday, uniqueness: { scope: :year, message: 'yearly only' }\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Format\n validates :code, format: /regex/\n validates :code, format: { with: /regex/ }\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Length\n validates :name, length: { minimum: 2 }\n validates :bio, length: { maximum: 500 }\n validates :password, length: { in: =&gt; 6..20 }\n validates :number, length: { is: =&gt; 6 }\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Include/exclude\n validates :gender, inclusion: %w(male female)\n validates :gender, inclusion: { in: %w(male female) }\n validates :lol, exclusion: %w(xyz)\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Numeric\n validates :points, numericality: true\n validates :played, numericality: { only_integer: true }\n # ... greater_than, greater_than_or_equal_to,\n # ... less_than, less_than_or_equal_to\n # ... odd, even, equal_to\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Validate the associated records to ensure they're valid as well\n has_many :books\n validates_associated :books\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Length (full options)\n validates :content, length: {\n minimum: 300,\n maximum: 400,\n tokenizer: lambda { |str| str.scan(/\\w+/) },\n too_short: \"must have at least %{count} words\",\n too_long: \"must have at most %{count} words\" }\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Multiple\n validates :login, :email, presence: true\n</code></pre>\n\n<pre><code class=\"language-ruby\"> # Conditional\n validates :description, presence: true, if: :published?\n validates :description, presence: true, if: lambda { |obj| .. }\n</code></pre>\n\n<pre><code class=\"language-ruby\"> validates :title, presence: true, on: :save # :save | :create | :update\n</code></pre>\n\n<pre class=\"-setup\"><code class=\"language-ruby\">end\n</code></pre>\n\n<h3 id=\"custom-validations\">Custom validations</h3>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">class Person &lt; ActiveRecord::Base\n validate :foo_cant_be_nil\n\n def foo_cant_be_nil\n errors.add(:foo, 'cant be nil') if foo.nil?\n end\nend\n</code></pre>\n\n<h3 id=\"errors\">Errors</h3>\n\n<pre><code class=\"language-ruby\">record.errors.valid? # → false\nrecord.errors # → { :name =&gt; [\"can't be blank\"] }\nrecord.errors.messages # → { :name =&gt; [\"can't be blank\"] }\n</code></pre>\n\n<pre><code class=\"language-ruby\">record.errors[:name].any?\n</code></pre>\n\n<h2 id=\"other-api\">Other API</h2>\n\n<h3 id=\"callbacks\">Callbacks</h3>\n\n<ul>\n <li><a href=\"http://guides.rubyonrails.org/active_record_validations_callbacks.html\">Guides: callbacks</a></li>\n</ul>\n\n<h3 id=\"mass-updates\">Mass updates</h3>\n\n<pre><code class=\"language-ruby\"># Updates person id 15\nPerson.update 15, name: \"John\", age: 24\nPerson.update [1,2], [{name: \"John\"}, {name: \"foo\"}]\n</code></pre>\n\n<h3 id=\"joining\">Joining</h3>\n\n<pre><code class=\"language-ruby\"># Basic joins\nStudent.joins(:schools).where(schools: { type: 'public' })\nStudent.joins(:schools).where('schools.type' =&gt; 'public' )\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Multiple associations\nArticle.joins(:category, :comments)\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Nested associations\nArticle.joins(comments: :guest)\n</code></pre>\n\n<pre><code class=\"language-ruby\"># SQL\nAuthor.joins(\n 'INNER JOIN posts ' +\n 'ON posts.author_id = authors.id ' +\n 'AND posts.published = \"t\"'\n)\n</code></pre>\n\n<h3 id=\"where-interpolation\">Where interpolation</h3>\n\n<pre><code class=\"language-ruby\">where('name = ?', 'John')\nwhere(['name = :name', { name: 'John' }])\n</code></pre>\n\n<h3 id=\"serialize\">Serialize</h3>\n\n<pre data-line=\"2\"><code class=\"language-ruby\">class User &lt; ActiveRecord::Base\n serialize :preferences\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\">user = User.create(\n preferences: {\n 'background' =&gt; 'black',\n 'display' =&gt; 'large'\n }\n)\n</code></pre>\n\n<p>You can also specify a class option as the second parameter that’ll raise an \nexception if a serialized object is retrieved as a descendant of a class not in \nthe hierarchy.</p>\n\n<pre data-line=\"3\"><code class=\"language-ruby\"># Only Hash allowed!\nclass User &lt; ActiveRecord::Base\n serialize :preferences, Hash\nend\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Reading it raises SerializationTypeMismatch\nuser = User.create(preferences: %w(one two three))\nUser.find(user.id).preferences\n</code></pre>\n\n<h2 id=\"other-tricks\">Other tricks</h2>\n\n<h3 id=\"overriding-accessors\">Overriding accessors</h3>\n\n<pre data-line=\"4,8\"><code class=\"language-ruby\">class Song &lt; ActiveRecord::Base\n # Uses an integer of seconds to hold the length of the song\n\n def length=(minutes)\n write_attribute(:length, minutes.to_i * 60)\n end\n\n def length\n read_attribute(:length) / 60\n end\nend\n</code></pre>\n\n<p>See: <a href=\"http://api.rubyonrails.org/classes/ActiveRecord/Base.html\">http://api.rubyonrails.org/classes/ActiveRecord/Base.html</a></p>\n\n<h2 id=\"callbacks-1\">Callbacks</h2>\n\n<ul>\n <li>after_create</li>\n <li>after_initialize</li>\n <li>after_validation</li>\n <li>after_save</li>\n <li>after_commit</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-plugins",
"title": "Rails plugins",
"url": "/rails-plugins",
"category": "Rails",
"keywords": null,
"content_html": "<h2 id=\"generate-a-plugin\">Generate a plugin</h2>\n\n<p>Generate a Rails Engine plugin:</p>\n\n<pre><code>rails plugin new myplugin --skip-bundle --full\n</code></pre>\n\n<h2 id=\"initializers\">Initializers</h2>\n\n<ul>\n <li><a href=\"http://edgeapi.rubyonrails.org/classes/Rails/Railtie.html\">Rails::Railtie</a></li>\n <li><a href=\"http://www.engineyard.com/blog/2010/extending-rails-3-with-railties/\">EngineYard blog \npost</a></li>\n</ul>\n\n<p>Subclass Railtie and provide an <code>initializer</code> method.</p>\n\n<pre><code>module NewPlugin\n class Railtie &lt; Rails::Railtie\n initializer \"newplugin.initialize\" do |app|\n \n # subscribe to all rails notifications: controllers, AR, etc.\n ActiveSupport::Notifications.subscribe do |*args|\n event = ActiveSupport::Notifications::Event.new(*args)\n puts \"Got notification: #{event.inspect}\"\n end\n \n end\n end\nend\n</code></pre>\n\n<h2 id=\"custom-routes\">Custom routes</h2>\n\n<ul>\n <li><a href=\"http://api.rubyonrails.org/classes/ActionDispatch/Routing/Mapper.html\">ActionDispatch::Routing::Mapper</a></li>\n</ul>\n\n<p>To create custom <code>routes.rb</code> keywords:</p>\n\n<pre><code># # routes.rb:\n# myplugin_for x\n#\nclass ActionDispatch::Routing\n class Mapper\n def myplugin_for(*x)\n end\n end\nend\n</code></pre>\n\n<p>Example with a block:</p>\n\n<pre><code># authenticated do\n# resources :users\n# end\n#\ndef authenticated\n constraint = lambda { |request| request... }\n\n constraints(constraint) { yield }\nend\n</code></pre>\n\n<h2 id=\"custom-generators\">Custom generators</h2>\n\n<ul>\n <li><a href=\"http://guides.rubyonrails.org/generators.html\">Guide: generators</a></li>\n <li><a href=\"http://api.rubyonrails.org/classes/ActiveRecord/Generators/Base.html\">ActiveRecord::Generators::Base</a></li>\n</ul>\n\n<h3 id=\"basic\">Basic</h3>\n\n<pre><code># rails g initializer\n# lib/generators/initializer_generator.rb\nclass InitializerGenerator &lt; Rails::Generators::Base\n def create_initializer_file\n create_file \"config/initializers/initializer.rb\", \"# Add initialization content here\"\n end\nend\n</code></pre>\n\n<ul>\n <li>Extend <code>Rails::Generators::Base</code>.</li>\n <li>Each public method in the generator is executed when a generator is invoked.</li>\n</ul>\n\n<h3 id=\"generating-a-generator\">Generating a generator</h3>\n\n<pre><code>$ rails generate generator initializer\n</code></pre>\n\n<h3 id=\"namedbase\">NamedBase</h3>\n\n<p>Use <code>NamedBase</code> instead if you want to take an argument. It will be available as \n<code>file_name</code>.</p>\n\n<pre><code>class InitializerGenerator &lt; Rails::Generators::Base\n def lol\n puts file_name\n end\nend\n</code></pre>\n\n<h3 id=\"more\">More</h3>\n\n<pre><code>class InitializerGenerator &lt; Rails::Generators::NamedBase\n # \n  source_root File.expand_path(\"../templates\", __FILE__)\n desc \"Description goes here.\"\nend\n</code></pre>\n\n<h3 id=\"generators-lookup\">Generators lookup</h3>\n\n<p>When invoking <code>rails g XXX</code>:</p>\n\n<pre><code>[rails/]generators/XXX/XXX_generator.rb\n[rails/]generators/XXX_generator.rb\n</code></pre>\n\n<p>When invoking <code>rails g XXX:YYY</code>:</p>\n\n<pre><code>[rails/]generators/XXX/YYY_generator.rb\n</code></pre>\n\n<h2 id=\"activemodel-acts-as\">ActiveModel ‘acts as’</h2>\n\n<pre><code># yaffle/lib/yaffle/acts_as_yaffle.rb\nmodule Yaffle\n module ActsAsYaffle\n extend ActiveSupport::Concern\n \n included do\n end\n \n module ClassMethods\n def acts_as_yaffle(options = {})\n # your code will go here\n end\n end\n end\nend\n \nActiveRecord::Base.send :include, Yaffle::ActsAsYaffle\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-routes",
"title": "Routes",
"url": "/rails-routes",
"category": "Rails",
"keywords": null,
"content_html": "<h2 id=\"multiple-resources-resources\">Multiple resources (<code>resources</code>)</h2>\n\n<pre><code>resources :books\n\n# PhotosController:\n# index =&gt; GET /photos\n# new =&gt; GET /photos/new\n# create =&gt; POST /photos/new\n# show =&gt; GET /photos/:id\n# edit =&gt; GET /photos/:id/edit\n# update =&gt; PUT /photos/:id\n# delete =&gt; DELETE /photos/:id\n#\n# Helpers:\n# new_book_path\n# book_path(id)\n# edit_book_path(id)\n</code></pre>\n\n<h3 id=\"custom-actions\">Custom actions</h3>\n\n<pre><code>resources :photos do\n member { get 'preview' } # /photo/1/preview\n collection { get 'search' } # /photos/search\n\n get 'preview', on: :member # (..same as the first)\nend\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code>resources :photos,\n path_names: { new: 'brand_new' } # /photos/1/brand_new\n path: 'postings' # /postings\n only: :index\n only: [:index, :show]\n except: :show\n except: [:index, :show]\n\n shallow: true # also generate shallow routes\n shalow_path: 'secret'\n shallow_prefix: 'secret'\n</code></pre>\n\n<h2 id=\"single-resource-resource\">Single resource (<code>resource</code>)</h2>\n\n<pre><code>resource :coder\n\n# CodersController:\n# new =&gt; GET /coder/new\n# create =&gt; POST /coder/new\n# show =&gt; GET /coder\n# edit =&gt; GET /coder/edit\n# update =&gt; PUT /coder\n# delete =&gt; DELETE /coder\n</code></pre>\n\n<h2 id=\"matching-match\">Matching (<code>match</code>)</h2>\n\n<pre><code>match 'photo/:id' =&gt; 'photos#show' # /photo/what-is-it\nmatch 'photo/:id', id: /[0-9]+/ # /photo/0192\nmatch 'photo/:id' =&gt; 'photos#show', constraints: { id: /[0-9]+/ }\nmatch 'photo/:id', via: :get\nmatch 'photo/:id', via: [:get, :post]\n\nmatch 'photo/*path' =&gt; 'photos#unknown' # /photo/what/ever\n\n# params[:format] == 'jpg'\nmatch 'photos/:id' =&gt; 'photos#show', :defaults =&gt; { :format =&gt; 'jpg' }\n</code></pre>\n\n<h3 id=\"getpost\">Get/post</h3>\n\n<p><code>get</code> is the same as <code>match via: :get</code>.</p>\n\n<pre><code>get 'photo/:id' =&gt; 'photos#show'\n# same as match 'photo/:id' =&gt; 'photos#show', via: :get\n\npost 'photo/:id' =&gt; 'photos#update'\n# same as match 'photo/:id' =&gt; 'photos#show', via: :post\n</code></pre>\n\n<h3 id=\"redirection\">Redirection</h3>\n\n<pre><code>match '/stories' =&gt; redirect('/posts')\nmatch '/stories/:name' =&gt; redirect('/posts/%{name}')\n</code></pre>\n\n<h3 id=\"named\">Named</h3>\n\n<pre><code># logout_path\nmatch 'exit' =&gt; 'sessions#destroy', as: :logout\n</code></pre>\n\n<h3 id=\"constraints\">Constraints</h3>\n\n<pre><code>match '/', constraints: { subdomain: 'admin' }\n\n# admin.site.com/admin/photos\nnamespace 'admin' do\n constraints subdomain: 'admin' do\n resources :photos\n end\nend\n</code></pre>\n\n<h3 id=\"custom-constraints\">Custom constraints</h3>\n\n<pre><code>class BlacklistConstraint\n def initialize\n @ips = Blacklist.retrieve_ips\n end\n \n def matches?(request)\n @ips.include?(request.remote_ip)\n end\nend\n \nTwitterClone::Application.routes.draw do\n match \"*path\" =&gt; \"blacklist#index\",\n :constraints =&gt; BlacklistConstraint.new\nend\n</code></pre>\n\n<h3 id=\"scopes\">Scopes</h3>\n\n<pre><code>scope 'admin', constraints: { subdomain: 'admin' } do\n resources ...\nend\n</code></pre>\n\n<h3 id=\"rack-middleware\">Rack middleware</h3>\n\n<pre><code># Yes, Sprockets is middleware\nmatch '/application.js' =&gt; Sprockets\n</code></pre>\n\n<h3 id=\"route-helpers\">Route helpers</h3>\n\n<pre><code>projects_path # /projects\nprojects_url # http://site.com/projects\n</code></pre>\n\n<h3 id=\"default-help-text\">Default help text</h3>\n\n<pre><code># The priority is based upon order of creation:\n# first created -&gt; highest priority.\n\n# Sample of regular route:\nmatch 'products/:id' =&gt; 'catalog#view'\n\n# Keep in mind you can assign values other than :controller and :action\n\n# Sample of named route:\nmatch 'products/:id/purchase' =&gt; 'catalog#purchase', :as =&gt; :purchase\n\n# This route can be invoked with purchase_url(:id =&gt; product.id)\n\n# Sample resource route (maps HTTP verbs to controller actions automatically):\nresources :products\n\n# Sample resource route with options:\nresources :products do\n member do\n get 'short'\n post 'toggle'\n end\n\n collection do\n get 'sold'\n end\nend\n\n# Sample resource route with sub-resources:\nresources :products do\n resources :comments, :sales\n resource :seller\nend\n\n# Sample resource route with more complex sub-resources\nresources :products do\n resources :comments\n resources :sales do\n get 'recent', :on =&gt; :collection\n end\nend\n\n# Sample resource route within a namespace:\nnamespace :admin do\n # Directs /admin/products/* to Admin::ProductsController\n # (app/controllers/admin/products_controller.rb)\n resources :products\nend\n\n# You can have the root of your site routed with \"root\"\n# just remember to delete public/index.html.\nroot :to =&gt; 'welcome#index'\n\n# See how all your routes lay out with \"rake routes\"\n\n# This is a legacy wild controller route that's not recommended for RESTful applications.\n# Note: This route will make all actions in every controller accessible via GET requests.\nmatch ':controller(/:action(/:id(.:format)))'\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>\n <p><a href=\"http://guides.rubyonrails.org/routing.html\">Guides/Routing</a></p>\n </li>\n <li>\n <p><a href=\"http://api.rubyonrails.org/classes/ActionDispatch/Routing/Mapper.html\">ActionDispatch::Routing::Mapper</a>\n (See included modules)</p>\n </li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails-tricks",
"title": "Rails tricks",
"url": "/rails-tricks",
"category": "Rails",
"keywords": null,
"content_html": "<p>in config/environments/development.rb:</p>\n\n<pre><code># Source maps for Sass\nconfig.sass.debug_info = true\nconfig.sass.line_comments = false\n\n# Don't break apart\nconfig.assets.debug = false\n</code></pre>\n\n<p>Partial locals</p>\n\n<pre><code>&lt;%= render 'article', full: true %&gt;\n&lt;%= render 'article' %&gt;\n\n&lt;% if local_assigns[:full] %&gt;\n ...\n&lt;% end %&gt;\n</code></pre>\n\n<p>HTML in i18n</p>\n\n<pre><code>en:\n read_more_html: \"read &lt;b&gt;more&lt;/b&gt;...\"\n</code></pre>\n\n<p>Exception handling:</p>\n\n<pre><code># config/application.rb\nconfig.exceptions_app = self.routes\n\nget '/404', to: 'errors#not_found'\nget '/500', to: 'errors#server_error'\n\nclass ErrorsController\n def not_found\n render status: :not_found\n end\n end\n</code></pre>\n\n<p>Rails updating:</p>\n\n<pre><code>rake rails:update\n</code></pre>\n\n<p>Distinct pluck:</p>\n\n<pre><code>Article.distinct.pluck('author')\n</code></pre>\n\n<p>Relation#merge</p>\n\n<pre><code>scope :with_drafts, -&gt; {\n uniq.joins(:articles).merge(Article.draft)\n}\n</code></pre>\n\n<p>Order</p>\n\n<pre><code>scope :recent, -&gt; { order created_at: :desc }\n</code></pre>\n\n<p>Group by month</p>\n\n<pre><code>.group(\"to_char(created_at, 'YYYY-MM')\")\n.group(\"to_char(created_at, 'YYYY-MM')\").count\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rails",
"title": "Rails",
"url": "/rails",
"category": "Rails",
"keywords": null,
"content_html": "<h2 id=\"helpers\">Helpers</h2>\n\n<pre><code>class ApplicationController\n helper_method :logged_in?\n\n def logged_in?\n \"Something\"\n end\nend\n</code></pre>\n\n<h3 id=\"cssjs-packages\">CSS/JS packages</h3>\n\n<pre><code>stylesheet_link_tag :monkey\njavascript_link_tag :monkey\n</code></pre>\n\n<h3 id=\"forms\">Forms</h3>\n\n<pre><code># http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html\n\n- form_for @person do |f|\n = f.label :first_name\n = f.label :first_name, \"First name\"\n = f.text_field :first_name\n\n = f.label :last_name&gt;\n = f.text_field :last_name&gt;\n\n - fields_for @person.permission do |fields|\n = fields.checkbox :admin\n\n -# name=\"person[admin]\"\n - fields_for :person, @client do |fields|\n = fields.checkbox :admin\n\n = f.submit\n\n# Also: check_box, email_field, fields_for\n# file_field, hidden_field, label, number_field, password_field\n# radio_button, range_field, search_field, telephonen_field,\n# text_area, text_field, url_field\n</code></pre>\n\n<h2 id=\"controllers\">Controllers</h2>\n\n<p>http://apidock.com/rails/ActionController/Base</p>\n\n<pre><code>class ProjectsController\n layout 'project' # Actually defaults to `projects` based\n # on the controller name\n\n def save\n end\n\n def edit\n end\nend\n</code></pre>\n\n<h3 id=\"before-filter\">Before filter</h3>\n\n<pre><code>class ApplicationController &lt; ActionController::Base\n before_filter :validate, only: [:save, :edit]\n before_filter :ensure_auth, except: [:logout]\n\n before_filter :require_login\n \n private\n \n def require_login\n unless logged_in?\n flash[:error] = \"You must be logged in to access this section\"\n redirect_to new_login_url # halts request cycle\n end\n end\nend\n</code></pre>\n\n<h3 id=\"default-url-optinos\">Default URL optinos</h3>\n\n<pre><code>class ApplicationController &lt; ActionController::Base\n # The options parameter is the hash passed in to 'url_for'\n def default_url_options(options)\n {:locale =&gt; I18n.locale}\n end\nend\n</code></pre>\n\n<h3 id=\"hashes\">Hashes</h3>\n\n<pre><code>session[:what]\nflash[:notice] = \"Your session expired\"\nparams[:id]\n</code></pre>\n\n<h3 id=\"xml-and-json\">XML and JSON</h3>\n\n<pre><code>class UsersController &lt; ApplicationController\n def index\n @users = User.all\n respond_to do |format|\n format.html # index.html.erb\n format.xml { render :xml =&gt; @users}\n format.json { render :json =&gt; @users}\n end\n end\nend\n</code></pre>\n\n<h3 id=\"redirection\">Redirection</h3>\n\n<pre><code>redirect_to action: 'show', id: @entry.id\nredirect_to root_url # a path\n</code></pre>\n\n<h3 id=\"render\">Render</h3>\n\n<pre><code>render nothing: true\nrender template: 'products/show'\nrender status: 500\nrender status: :forbidden\nrender text: '...'\nrender layout: 'special_layout'\nrender layout: false\nrender action: 'something' # same as `file: 'my/something'`\n # Renders the template only, does not execute\n # the action\n\nrender json: object\nrender xml: object\n\nrender location: photo_url(photo)\n</code></pre>\n\n<h3 id=\"head-only-responses\">Head-only responses</h3>\n\n<pre><code>head :bad_request\nhead :created, location: photo_path(@photo)\n</code></pre>\n\n<h2 id=\"layouts\">Layouts</h2>\n\n<pre><code># app/views/layouts/application.html.erb\n&lt;%= content_for?(:content) ? yield :content : yield %&gt;\n\n# app/views/layouts/news.html.erb\n&lt;% content_for :content do %&gt;\n ...\n&lt;% end %&gt;\n&lt;% render template: :'layouts/application' %&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rake",
"title": "Rake",
"url": "/rake",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"basic-syntax\">Basic syntax</h3>\n\n<pre><code class=\"language-rb\">namespace :foo do\n desc \"Description\"\n task :bar do\n ...\n end\n\n task :baz =&gt; :dependency do\n end\n\n task :baz =&gt; [:dep1, :dep2, :dep3] do\n end\nend\n\n# rake foo:bar\n</code></pre>\n\n<h3 id=\"rake-task-with-arguments\">Rake task with arguments</h3>\n\n<pre><code class=\"language-rb\">desc \"Do something\"\ntask :workit, [:id] =&gt; :environment do |_, args|\n id = args[:id]\nend\n\n# rake workit[234]\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rbenv",
"title": "rbenv",
"url": "/rbenv",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"installation\">Installation</h3>\n\n<h4 id=\"install-rbenv-and-ruby-build\">Install rbenv and ruby-build</h4>\n\n<pre><code class=\"language-bash\">git clone https://github.com/sstephenson/rbenv.git ~/.rbenv\ngit clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build\n</code></pre>\n\n<h4 id=\"add-to-bash_profile\">Add to ~/.bash_profile</h4>\n\n<pre><code class=\"language-bash\">echo 'export PATH=\"$HOME/.rbenv/bin:$PATH\"' &gt;&gt; ~/.bash_profile\necho 'eval \"$(rbenv init -)\"' &gt;&gt; ~/.bash_profile\n</code></pre>\n\n<h4 id=\"verify-installation\">Verify installation</h4>\n\n<pre><code class=\"language-bash\">type rbenv # → \"rbenv is a function\"\n</code></pre>\n\n<p>These are generic instructions; there may be rbenv packages available for your OS.</p>\n\n<p>See: <a href=\"https://github.com/rbenv/rbenv#installation\">Installation</a></p>\n\n<h3 id=\"managing-versions\">Managing versions</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>rbenv install -l</code></td>\n <td>List all available versions</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>rbenv install 2.2.1</code></td>\n <td>Install Ruby <em>2.2.1</em></td>\n </tr>\n <tr>\n <td><code>rbenv uninstall 2.2.1</code></td>\n <td>Uninstall Ruby <em>2.2.1</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>rbenv versions</code></td>\n <td>See installed versions</td>\n </tr>\n <tr>\n <td><code>rbenv version</code></td>\n <td>See current version</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>rbenv which &lt;NAME&gt;</code></td>\n <td>Display path to executable</td>\n </tr>\n <tr>\n <td><code>rbenv rehash</code></td>\n <td>Re-write binstubs</td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-three-column\" id=\"using-versions\">Using versions</h2>\n\n<h3 id=\"locally\">Locally</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>rbenv local 2.2.2</code></td>\n <td>Use Ruby <em>2.2.2</em> in project</td>\n </tr>\n <tr>\n <td><code>rbenv local --unset</code></td>\n <td>Undo above</td>\n </tr>\n </tbody>\n</table>\n\n<p>Application-specific version numbers are stored in <code>.ruby-version</code>.</p>\n\n<h3 id=\"globally\">Globally</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>rbenv global 2.2.2</code></td>\n <td>Use Ruby <em>2.2.2</em> globally</td>\n </tr>\n <tr>\n <td><code>rbenv global --unset</code></td>\n <td>Undo above</td>\n </tr>\n </tbody>\n</table>\n\n<p>Global version numbers are stored in <code>~/.rbenv/version</code>.</p>\n\n<h3 id=\"shell\">Shell</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>rbenv shell 2.2.2</code></td>\n <td>Use Ruby <em>2.2.2</em> in shell</td>\n </tr>\n <tr>\n <td><code>rbenv shell --unset</code></td>\n <td>Undo above</td>\n </tr>\n </tbody>\n</table>\n\n<p>Shell-local version numbers are stored as environment variables.</p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://github.com/rbenv/rbenv\">rbenv project page</a> <em>(github.com)</em></li>\n <li><a href=\"https://gist.github.com/rahul286/7160839f4425a3b7e718\">rbenv ubuntu server cheatsheet</a> <em>(gist.github.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/rbenv/rbenv\">rbenv</a> lets you manage installations of multiple Ruby versions.</p>",
"description_html": "<p>A one-page guide to rbenv Ruby version manager, with usage examples and more.</p>",
"tags": null,
"updated": "2017-10-11"
},{
"id": "rdoc",
"title": "Rdoc",
"url": "/rdoc",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"basic-rdoc-format\">Basic RDoc format</h3>\n\n<pre><code class=\"language-rb\"># Foo.\n#\n# @example\n#\n# y\n# g\n#\n# @param [String] param_name The xx and xx.\n#\n# @see http://url.com\n#\n# @return [true] if so\n</code></pre>\n\n<h3 id=\"inline\">Inline</h3>\n\n<pre><code class=\"language-markdown\">*bold*\n_emphasized_\n+code+\n</code></pre>\n\n<pre><code class=\"language-markdown\">http://www.link.com\nSee Models::User@Examples\n{Google}[http://google.com]\n</code></pre>\n\n<h3 id=\"skip\">Skip</h3>\n\n<pre><code class=\"language-rb\">def input # :nodoc:\n</code></pre>\n\n<pre><code class=\"language-rb\">module MyModule # :nodoc: all\n</code></pre>\n\n<h3 id=\"definition-lists\">Definition lists</h3>\n\n<pre><code class=\"language-rb\"># == Definition lists\n#\n# list:: hi.\n# +foo+:: parameterized\n</code></pre>\n\n<pre><code class=\"language-rb\"># == Definition lists\n# [foo] also\n# [bar] like this\n</code></pre>\n\n<h3 id=\"return-types\">Return types</h3>\n\n<pre><code class=\"language-rb\"># @return [String]\n# @return [String, nil] the name\n</code></pre>\n\n<h3 id=\"callseq\">Callseq</h3>\n\n<pre><code class=\"language-rb\"># :call-seq:\n# ARGF.readlines(sep=$/) -&gt; array\n# ARGF.readlines(limit) -&gt; array\n# ARGF.readlines(sep, limit) -&gt; array\n#\n# ARGF.to_a(sep=$/) -&gt; array\n# ARGF.to_a(limit) -&gt; array\n# ARGF.to_a(sep, limit) -&gt; array\n</code></pre>\n\n<h3 id=\"category\">Category</h3>\n\n<pre><code class=\"language-rb\"># :category: Utilities\n</code></pre>\n\n<h3 id=\"sections\">Sections</h3>\n\n<pre><code class=\"language-rb\"># :section: Expiry methods\n# methods relating to expiring\n\ndef expire!\ndef expired?\n...\n</code></pre>\n\n<h3 id=\"using-tomdoc\">Using tomdoc</h3>\n\n<pre><code class=\"language-rb\"># :markup: TomDoc\n</code></pre>\n\n<p>Place this at the beginning of the file.</p>\n\n<h2 class=\"-one-column\" id=\"also-see\">Also see</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"http://rdoc.rubyforge.org/RDoc/Markup.html\">http://rdoc.rubyforge.org/RDoc/Markup.html</a></li>\n <li><a href=\"http://www.rubydoc.info/gems/yard/file/docs/GettingStarted.md\">http://www.rubydoc.info/gems/yard/file/docs/GettingStarted.md</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "react-router",
"title": "React-router",
"url": "/react-router",
"category": "React",
"keywords": null,
"content_html": "<h3 id=\"basic\">Basic</h3>\n\n<pre><code class=\"language-js\">import { default as Router, Route } from 'react-router'\n\nconst routes = (\n &lt;Route&gt;\n &lt;Route path='*' handler={RootView} /&gt;\n &lt;/Route&gt;\n)\n\nRouter.run(routes, Router.HashLocation, (Root) =&gt; {\n React.render(&lt;Root /&gt;, document.getElementById('all'))\n})\n</code></pre>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre><code class=\"language-js\">const routes = (\n &lt;Route handler={Chrome}&gt;\n &lt;Route path='about' handler={About} /&gt;\n &lt;Route path='inbox' handler={Inbox} /&gt;\n &lt;Route path='messages/:id' handler={Message} /&gt;\n &lt;/Route&gt;\n)\n\nimport { RouteHandler } from 'react-router'\n\nconst Chrome = React.createClass({\n render () {\n return (\n &lt;div&gt;\n &lt;h1&gt;App&lt;/h1&gt;\n &lt;RouteHandler /&gt;\n &lt;/div&gt;\n )\n }\n})\n</code></pre>\n\n<h3 id=\"url-params\">URL params</h3>\n\n<pre><code class=\"language-js\">var Message = React.createClass({\n componentDidMount: function () {\n // from the path `/inbox/messages/:id`\n var id = this.props.params.id\n ...\n</code></pre>\n\n<h3 id=\"link\">Link</h3>\n\n<pre><code class=\"language-js\">import { Link } from 'react-router'\n\n&lt;!-- make a named route `user` --&gt;\n&lt;Link to='user' params={{userId: 10}} /&gt;\n\n&lt;Link to='login'\n activeClassName='-active'\n onClick='...'&gt;\n\n</code></pre>\n\n<h3 id=\"other-config\">Other config</h3>\n\n<pre><code class=\"language-js\">&lt;Route path='/'&gt;\n &lt;DefaultRoute handler={Home} /&gt;\n &lt;NotFoundRoute handler={NotFound} /&gt;\n \n &lt;Redirect from='login' to='sessions/new' /&gt;\n &lt;Redirect from='login' to='sessions/new' params={{from: 'home'}} /&gt;\n &lt;Redirect from='profile/:id' to='about-user' /&gt;\n\n &lt;Route name='about-user' ... /&gt;\n</code></pre>\n\n<h3 id=\"routercreate\">Router.create</h3>\n\n<pre><code class=\"language-js\">var router = Router.create({\n routes: &lt;Route&gt;...&lt;/Route&gt;,\n location: Router.HistoryLocation\n})\n\nrouter.run((Root) =&gt; { ... })\n</code></pre>\n\n<h3 id=\"navigation\">Navigation</h3>\n\n<pre><code class=\"language-js\">import { Navigation } from 'react-router'\n\nReact.createClass({\n mixins: [ Navigation ], ...\n})\n\nthis\n .transitionTo('user', {id: 10})\n .transitionTo('/path')\n .transitionTo('http://...')\n .replaceWith('about')\n .makePath('about') // return URL\n .makeHref('about') // return URL\n .goBack()\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "react",
"title": "React.js",
"url": "/react",
"category": "React",
"keywords": ["React.Component","render()","componentDidMount()","props/state","dangerouslySetInnerHTML"],
"content_html": "<h2 class=\"-three-column\" id=\"components\">Components</h2>\n\n<h3 class=\"-prime\" id=\"components-1\">Components</h3>\n\n<pre class=\"-setup\"><code class=\"language-jsx\">import React from 'react'\nimport ReactDOM from 'react-dom'\n</code></pre>\n\n<pre><code class=\"language-jsx\">class Hello extends React.Component {\n render () {\n return &lt;div className='message-box'&gt;\n Hello {this.props.name}\n &lt;/div&gt;\n }\n}\n</code></pre>\n\n<pre><code class=\"language-jsx\">const el = document.body\nReactDOM.render(&lt;Hello name='John' /&gt;, el)\n</code></pre>\n\n<p>Use the <a href=\"http://jsfiddle.net/reactjs/69z2wepo/\">React.js jsfiddle</a> to start hacking. (or the unofficial <a href=\"http://jsbin.com/yafixat/edit?js,output\">jsbin</a>)</p>\n\n<h3 class=\"-prime\" id=\"import-multiple-exports\">Import multiple exports</h3>\n\n<pre class=\"-setup\"><code class=\"language-jsx\">import React, {Component} from 'react'\nimport ReactDOM from 'react-dom'\n</code></pre>\n\n<pre><code class=\"language-jsx\">class Hello extends Component {\n ...\n}\n</code></pre>\n\n<h3 id=\"properties\">Properties</h3>\n\n<pre class=\"-setup\"><code class=\"language-html\">&lt;Video fullscreen={true} autoplay={false} /&gt;\n</code></pre>\n\n<pre data-line=\"2,3\"><code class=\"language-jsx\">render () {\n this.props.fullscreen\n const { fullscreen, autoplay } = this.props\n ···\n}\n</code></pre>\n\n<p>Use <code>this.props</code> to access properties passed to the component.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/tutorial.html#using-props\">Properties</a></p>\n\n<h3 id=\"states\">States</h3>\n\n<pre><code class=\"language-jsx\">constructor(props) {\n super(props)\n this.state = { username: undefined }\n}\n</code></pre>\n\n<pre><code class=\"language-jsx\">this.setState({ username: 'rstacruz' })\n</code></pre>\n\n<pre data-line=\"2,3\"><code class=\"language-jsx\">render () {\n this.state.username\n const { username } = this.state\n ···\n}\n</code></pre>\n\n<p>Use states (<code>this.state</code>) to manage dynamic data.</p>\n\n<p>With <a href=\"https://babeljs.io/\">Babel</a> you can use <a href=\"https://github.com/tc39/proposal-class-fields\">proposal-class-fields</a> and get rid of constructor</p>\n\n<pre><code class=\"language-jsx\">class Hello extends Component {\n state = { username: undefined };\n ...\n}\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/docs/tutorial.html#reactive-state\">States</a></p>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre><code class=\"language-jsx\">class Info extends Component {\n render () {\n const { avatar, username } = this.props\n\n return &lt;div&gt;\n &lt;UserAvatar src={avatar} /&gt;\n &lt;UserProfile username={username} /&gt;\n &lt;/div&gt;\n }\n}\n</code></pre>\n<p>As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.</p>\n\n<pre><code class=\"language-jsx\">import React, {\n Component,\n Fragment\n} from 'react'\n\nclass Info extends Component {\n render () {\n const { avatar, username } = this.props\n\n return (\n &lt;Fragment&gt;\n &lt;UserAvatar src={avatar} /&gt;\n &lt;UserProfile username={username} /&gt;\n &lt;/Fragment&gt;\n )\n }\n}\n</code></pre>\n\n<p data-line=\"5,6,7,8,9,10\">Nest components to separate concerns.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/components-and-props.html#composing-components\">Composing Components</a></p>\n\n<h3 id=\"children\">Children</h3>\n\n<pre data-line=\"2\"><code class=\"language-jsx\">&lt;AlertBox&gt;\n &lt;h1&gt;You have pending notifications&lt;/h1&gt;\n&lt;/AlertBox&gt;\n</code></pre>\n\n<pre data-line=\"4\"><code class=\"language-jsx\">class AlertBox extends Component {\n render () {\n return &lt;div className='alert-box'&gt;\n {this.props.children}\n &lt;/div&gt;\n }\n}\n</code></pre>\n\n<p>Children are passed as the <code>children</code> property.</p>\n\n<h2 id=\"defaults\">Defaults</h2>\n\n<h3 id=\"setting-default-props\">Setting default props</h3>\n\n<pre data-line=\"1\"><code class=\"language-jsx\">Hello.defaultProps = {\n color: 'blue'\n}\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/docs/react-component.html#defaultprops\">defaultProps</a></p>\n\n<h3 id=\"setting-default-state\">Setting default state</h3>\n\n<pre data-line=\"4\"><code class=\"language-jsx\">class Hello extends Component {\n constructor (props) {\n super(props)\n this.state = { visible: true }\n }\n}\n</code></pre>\n\n<p>Set the default state in the <code>constructor()</code>.</p>\n\n<p>And without constructor using <a href=\"https://babeljs.io/\">Babel</a> with <a href=\"https://github.com/tc39/proposal-class-fields\">proposal-class-fields</a>.</p>\n\n<pre><code class=\"language-jsx\">class Hello extends Component {\n state = { visible: true }\n }\n}\n</code></pre>\n\n<p data-line=\"2\">See: <a href=\"https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state\">Setting the default state</a></p>\n\n<h2 class=\"-three-column\" id=\"other-components\">Other components</h2>\n\n<h3 id=\"functional-components\">Functional components</h3>\n\n<pre data-line=\"1\"><code class=\"language-jsx\">function MyComponent ({ name }) {\n return &lt;div className='message-box'&gt;\n Hello {name}\n &lt;/div&gt;\n}\n</code></pre>\n\n<p>Functional components have no state. Also, their <code>props</code> are passed as the first parameter to a function.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/components-and-props.html#functional-and-class-components\">Function and Class Components</a></p>\n\n<h3 id=\"pure-components\">Pure components</h3>\n\n<pre data-line=\"3\"><code class=\"language-jsx\">import React, {PureComponent} from 'react'\n\nclass MessageBox extends PureComponent {\n ···\n}\n</code></pre>\n\n<p>Performance-optimized version of <code>React.Component</code>. Doesn’t rerender if props/state hasn’t changed.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/react-api.html#react.purecomponent\">Pure components</a></p>\n\n<h3 id=\"component-api\">Component API</h3>\n\n<pre><code class=\"language-jsx\">this.forceUpdate()\n</code></pre>\n\n<pre><code class=\"language-jsx\">this.setState({ ... })\nthis.setState(state =&gt; { ... })\n</code></pre>\n\n<pre><code class=\"language-jsx\">this.state\nthis.props\n</code></pre>\n\n<p>These methods and properties are available for <code>Component</code> instances.</p>\n\n<p>See: <a href=\"http://facebook.github.io/react/docs/component-api.html\">Component API</a></p>\n\n<h2 class=\"-two-column\" id=\"lifecycle\">Lifecycle</h2>\n\n<h3 id=\"mounting\">Mounting</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>constructor</code> <em>(props)</em></td>\n <td>Before rendering <a href=\"https://reactjs.org/docs/react-component.html#constructor\">#</a></td>\n </tr>\n <tr>\n <td><code>componentWillMount()</code></td>\n <td><em>Don’t use this</em> <a href=\"https://reactjs.org/docs/react-component.html#componentwillmount\">#</a></td>\n </tr>\n <tr>\n <td><code>render()</code></td>\n <td>Render <a href=\"https://reactjs.org/docs/react-component.html#render\">#</a></td>\n </tr>\n <tr>\n <td><code>componentDidMount()</code></td>\n <td>After rendering (DOM available) <a href=\"https://reactjs.org/docs/react-component.html#componentdidmount\">#</a></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>componentWillUnmount()</code></td>\n <td>Before DOM removal <a href=\"https://reactjs.org/docs/react-component.html#componentwillunmount\">#</a></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>componentDidCatch()</code></td>\n <td>Catch errors (16+) <a href=\"https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html\">#</a></td>\n </tr>\n </tbody>\n</table>\n\n<p>Set initial the state on <code>constructor()</code>.\nAdd DOM event handlers, timers (etc) on <code>componentDidMount()</code>, then remove them on <code>componentWillUnmount()</code>.</p>\n\n<h3 id=\"updating\">Updating</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>componentDidUpdate</code> <em>(prevProps, prevState, snapshot)</em></td>\n <td>Use <code>setState()</code> here, but remember to compare props</td>\n </tr>\n <tr>\n <td><code>shouldComponentUpdate</code> <em>(newProps, newState)</em></td>\n <td>Skips <code>render()</code> if returns false</td>\n </tr>\n <tr>\n <td><code>render()</code></td>\n <td>Render</td>\n </tr>\n <tr>\n <td><code>componentDidUpdate</code> <em>(prevProps, prevState)</em></td>\n <td>Operate on the DOM here</td>\n </tr>\n </tbody>\n</table>\n\n<p>Called when parents change properties and <code>.setState()</code>. These are not called for initial renders.</p>\n\n<p>See: <a href=\"http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops\">Component specs</a></p>\n\n<h2 class=\"-two-column\" id=\"hooks-new\">Hooks (New)</h2>\n\n<h3 id=\"state-hook\">State Hook</h3>\n\n<pre data-line=\"5,10\"><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction Example() {\n // Declare a new state variable, which we'll call \"count\"\n const [count, setCount] = useState(0);\n\n return (\n &lt;div&gt;\n &lt;p&gt;You clicked {count} times&lt;/p&gt;\n &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n Click me\n &lt;/button&gt;\n &lt;/div&gt;\n );\n}\n</code></pre>\n\n<p>Hooks are a new addition in React 16.8.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/hooks-overview.html\">Hooks at a Glance</a></p>\n\n<h3 id=\"declaring-multiple-state-variables\">Declaring multiple state variables</h3>\n\n<pre><code class=\"language-jsx\">function ExampleWithManyStates() {\n // Declare multiple state variables!\n const [age, setAge] = useState(42);\n const [fruit, setFruit] = useState('banana');\n const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n // ...\n}\n</code></pre>\n\n<h3 id=\"effect-hook\">Effect hook</h3>\n\n<pre data-line=\"6,7,8,9,10\"><code class=\"language-jsx\">import React, { useState, useEffect } from 'react';\n\nfunction Example() {\n const [count, setCount] = useState(0);\n\n // Similar to componentDidMount and componentDidUpdate:\n useEffect(() =&gt; {\n // Update the document title using the browser API\n document.title = `You clicked ${count} times`;\n }, [count]);\n\n return (\n &lt;div&gt;\n &lt;p&gt;You clicked {count} times&lt;/p&gt;\n &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n Click me\n &lt;/button&gt;\n &lt;/div&gt;\n );\n}\n</code></pre>\n\n<p>If you’re familiar with React class lifecycle methods, you can think of <code>useEffect</code> Hook as <code>componentDidMount</code>, <code>componentDidUpdate</code>, and <code>componentWillUnmount</code> combined.</p>\n\n<p>By default, React runs the effects after every render — including the first render.</p>\n\n<h3 id=\"building-your-own-hooks\">Building your own hooks</h3>\n\n<h4 id=\"define-friendstatus\">Define FriendStatus</h4>\n<pre data-line=\"11,12,13,14\"><code class=\"language-jsx\">import React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null);\n\n useEffect(() =&gt; {\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return () =&gt; {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n }, [props.friend.id]);\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}\n</code></pre>\n\n<p>Effects may also optionally specify how to “clean up” after them by returning a function.</p>\n\n<h4 id=\"use-friendstatus\">Use FriendStatus</h4>\n\n<pre data-line=\"2\"><code class=\"language-jsx\">function FriendStatus(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/docs/hooks-custom.html\">Building Your Own Hooks</a></p>\n\n<h3 id=\"hooks-api-reference\">Hooks API Reference</h3>\n\n<p>Also see: <a href=\"https://reactjs.org/docs/hooks-faq.html\">Hooks FAQ</a></p>\n\n<h4 id=\"basic-hooks\">Basic Hooks</h4>\n\n<table>\n <thead>\n <tr>\n <th>Hook</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>useState</code><em>(initialState)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useEffect</code><em>(() =&gt; { … })</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useContext</code><em>(MyContext)</em></td>\n <td>value returned from <code>React.createContext</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>Full details: <a href=\"https://reactjs.org/docs/hooks-reference.html#basic-hooks\">Basic Hooks</a></p>\n\n<h4 id=\"additional-hooks\">Additional Hooks</h4>\n\n<table>\n <thead>\n <tr>\n <th>Hook</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>useReducer</code><em>(reducer, initialArg, init)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useCallback</code><em>(() =&gt; { … })</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useMemo</code><em>(() =&gt; { … })</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useRef</code><em>(initialValue)</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useImperativeHandle</code><em>(ref, () =&gt; { … })</em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>useLayoutEffect</code></td>\n <td>identical to <code>useEffect</code>, but it fires synchronously after all DOM mutations</td>\n </tr>\n <tr>\n <td><code>useDebugValue</code><em>(value)</em></td>\n <td>display a label for custom hooks in React DevTools</td>\n </tr>\n </tbody>\n</table>\n\n<p>Full details: <a href=\"https://reactjs.org/docs/hooks-reference.html#additional-hooks\">Additional Hooks</a></p>\n\n<h2 class=\"-two-column\" id=\"dom-nodes\">DOM nodes</h2>\n\n<h3 id=\"references\">References</h3>\n\n<pre data-line=\"4,9\"><code class=\"language-jsx\">class MyComponent extends Component {\n render () {\n return &lt;div&gt;\n &lt;input ref={el =&gt; this.input = el} /&gt;\n &lt;/div&gt;\n }\n\n componentDidMount () {\n this.input.focus()\n }\n}\n</code></pre>\n\n<p>Allows access to DOM nodes.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/refs-and-the-dom.html\">Refs and the DOM</a></p>\n\n<h3 id=\"dom-events\">DOM Events</h3>\n\n<pre data-line=\"5,9\"><code class=\"language-jsx\">class MyComponent extends Component {\n render () {\n &lt;input type=\"text\"\n value={this.state.value}\n onChange={event =&gt; this.onChange(event)} /&gt;\n }\n\n onChange (event) {\n this.setState({ value: event.target.value })\n }\n}\n</code></pre>\n\n<p>Pass functions to attributes like <code>onChange</code>.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/events.html\">Events</a></p>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 id=\"transferring-props\">Transferring props</h3>\n\n<pre class=\"-setup\"><code class=\"language-html\">&lt;VideoPlayer src=\"video.mp4\" /&gt;\n</code></pre>\n\n<pre data-line=\"3\"><code class=\"language-jsx\">class VideoPlayer extends Component {\n render () {\n return &lt;VideoEmbed {...this.props} /&gt;\n }\n}\n</code></pre>\n\n<p>Propagates <code>src=\"...\"</code> down to the sub-component.</p>\n\n<p>See <a href=\"http://facebook.github.io/react/docs/transferring-props.html\">Transferring props</a></p>\n\n<h3 id=\"top-level-api\">Top-level API</h3>\n\n<pre><code class=\"language-jsx\">React.createClass({ ... })\nReact.isValidElement(c)\n</code></pre>\n\n<pre><code class=\"language-jsx\">ReactDOM.render(&lt;Component /&gt;, domnode, [callback])\nReactDOM.unmountComponentAtNode(domnode)\n</code></pre>\n\n<pre><code class=\"language-jsx\">ReactDOMServer.renderToString(&lt;Component /&gt;)\nReactDOMServer.renderToStaticMarkup(&lt;Component /&gt;)\n</code></pre>\n\n<p>There are more, but these are most common.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/react-api.html\">React top-level API</a></p>\n\n<h2 class=\"-two-column\" id=\"jsx-patterns\">JSX patterns</h2>\n\n<h3 id=\"style-shorthand\">Style shorthand</h3>\n\n<pre><code class=\"language-jsx\">const style = { height: 10 }\nreturn &lt;div style={style}&gt;&lt;/div&gt;\n</code></pre>\n\n<pre><code class=\"language-jsx\">return &lt;div style={{ margin: 0, padding: 0 }}&gt;&lt;/div&gt;\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/tips/inline-styles.html\">Inline styles</a></p>\n\n<h3 id=\"inner-html\">Inner HTML</h3>\n\n<pre><code class=\"language-jsx\">function markdownify() { return \"&lt;p&gt;...&lt;/p&gt;\"; }\n&lt;div dangerouslySetInnerHTML={{__html: markdownify()}} /&gt;\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/tips/dangerously-set-inner-html.html\">Dangerously set innerHTML</a></p>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre data-line=\"6,7\"><code class=\"language-jsx\">class TodoList extends Component {\n render () {\n const { items } = this.props\n\n return &lt;ul&gt;\n {items.map(item =&gt;\n &lt;TodoItem item={item} key={item.key} /&gt;)}\n &lt;/ul&gt;\n }\n}\n</code></pre>\n\n<p>Always supply a <code>key</code> property.</p>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre><code class=\"language-jsx\">&lt;Fragment&gt;\n {showMyComponent\n ? &lt;MyComponent /&gt;\n : &lt;OtherComponent /&gt;}\n&lt;/Fragment&gt;\n</code></pre>\n\n<h3 id=\"short-circuit-evaluation\">Short-circuit evaluation</h3>\n\n<pre><code class=\"language-jsx\">&lt;Fragment&gt;\n {showPopup &amp;&amp; &lt;Popup /&gt;}\n ...\n&lt;/Fragment&gt;\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"new-features\">New features</h2>\n\n<h3 id=\"returning-multiple-elements\">Returning multiple elements</h3>\n\n<p>You can return multiple elements as arrays or fragments.</p>\n\n<h4 id=\"arrays\">Arrays</h4>\n\n<pre data-line=\"3,4,5,6\"><code class=\"language-js\">render () {\n // Don't forget the keys!\n return [\n &lt;li key=\"A\"&gt;First item&lt;/li&gt;,\n &lt;li key=\"B\"&gt;Second item&lt;/li&gt;\n ]\n}\n</code></pre>\n\n<h4 id=\"fragments\">Fragments</h4>\n<pre data-line=\"3,4,5,6,7,8\"><code class=\"language-js\">render () {\n // Fragments don't require keys!\n return (\n &lt;Fragment&gt;\n &lt;li&gt;First item&lt;/li&gt;\n &lt;li&gt;Second item&lt;/li&gt;\n &lt;/Fragment&gt;\n )\n}\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings\">Fragments and strings</a></p>\n\n<h3 id=\"returning-strings\">Returning strings</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">render() {\n return 'Look ma, no spans!';\n}\n</code></pre>\n\n<p>You can return just a string.</p>\n\n<p>See: <a href=\"https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings\">Fragments and strings</a></p>\n\n<h3 id=\"errors\">Errors</h3>\n\n<pre data-line=\"3,4,5\"><code class=\"language-js\">class MyComponent extends Component {\n ···\n componentDidCatch (error, info) {\n this.setState({ error })\n }\n}\n</code></pre>\n\n<p>Catch errors via <code>componentDidCatch</code>. (React 16+)</p>\n\n<p>See: <a href=\"https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html\">Error handling in React 16</a></p>\n\n<h3 id=\"portals\">Portals</h3>\n\n<pre data-line=\"2,3,4,5\"><code class=\"language-js\">render () {\n return React.createPortal(\n this.props.children,\n document.getElementById('menu')\n )\n}\n</code></pre>\n\n<p>This renders <code>this.props.children</code> into any location in the DOM.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/portals.html\">Portals</a></p>\n\n<h3 id=\"hydration\">Hydration</h3>\n\n<pre data-line=\"2\"><code class=\"language-js\">const el = document.getElementById('app')\nReactDOM.hydrate(&lt;App /&gt;, el)\n</code></pre>\n\n<p>Use <code>ReactDOM.hydrate</code> instead of using <code>ReactDOM.render</code> if you’re rendering over the output of <a href=\"https://reactjs.org/docs/react-dom-server.html\">ReactDOMServer</a>.</p>\n\n<p>See: <a href=\"https://reactjs.org/docs/react-dom.html#hydrate\">Hydrate</a></p>\n\n<h2 class=\"-three-column\" id=\"property-validation\">Property validation</h2>\n\n<h3 id=\"proptypes\">PropTypes</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import PropTypes from 'prop-types'\n</code></pre>\n\n<p>See: <a href=\"https://reactjs.org/docs/typechecking-with-proptypes.html\">Typechecking with PropTypes</a></p>\n\n<table>\n <tbody>\n <tr>\n <td><code>any</code></td>\n <td>Anything</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"basic\">Basic</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>string</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>number</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>func</code></td>\n <td>Function</td>\n </tr>\n <tr>\n <td><code>bool</code></td>\n <td>True or false</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"enum\">Enum</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>oneOf</code><em>(any)</em></td>\n <td>Enum types</td>\n </tr>\n <tr>\n <td><code>oneOfType</code><em>(type array)</em></td>\n <td>Union</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"array\">Array</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>array</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>arrayOf</code><em>(…)</em></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"object\">Object</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>object</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>objectOf</code><em>(…)</em></td>\n <td>Object with values of a certain type</td>\n </tr>\n <tr>\n <td><code>instanceOf</code><em>(…)</em></td>\n <td>Instance of a class</td>\n </tr>\n <tr>\n <td><code>shape</code><em>(…)</em></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"elements\">Elements</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>element</code></td>\n <td>React element</td>\n </tr>\n <tr>\n <td><code>node</code></td>\n <td>DOM node</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"required\">Required</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>(···).isRequired</code></td>\n <td>Required</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"basic-types\">Basic types</h3>\n\n<pre><code class=\"language-jsx\">MyComponent.propTypes = {\n email: PropTypes.string,\n seats: PropTypes.number,\n callback: PropTypes.func,\n isClosed: PropTypes.bool,\n any: PropTypes.any\n}\n</code></pre>\n\n<h3 id=\"required-types\">Required types</h3>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n name: PropTypes.string.isRequired\n}\n</code></pre>\n\n<h3 id=\"elements-1\">Elements</h3>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n // React element\n element: PropTypes.element,\n\n // num, string, element, or an array of those\n node: PropTypes.node\n}\n</code></pre>\n\n<h3 id=\"enumerables-oneof\">Enumerables (oneOf)</h3>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n direction: PropTypes.oneOf([\n 'left', 'right'\n ])\n}\n</code></pre>\n\n<h3 id=\"arrays-and-objects\">Arrays and objects</h3>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n list: PropTypes.array,\n ages: PropTypes.arrayOf(PropTypes.number),\n user: PropTypes.object,\n user: PropTypes.objectOf(PropTypes.number),\n message: PropTypes.instanceOf(Message)\n}\n</code></pre>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n user: PropTypes.shape({\n name: PropTypes.string,\n age: PropTypes.number\n })\n}\n</code></pre>\n\n<p>Use <code>.array[Of]</code>, <code>.object[Of]</code>, <code>.instanceOf</code>, <code>.shape</code>.</p>\n\n<h3 id=\"custom-validation\">Custom validation</h3>\n\n<pre><code class=\"language-jsx\">MyCo.propTypes = {\n customProp: (props, key, componentName) =&gt; {\n if (!/matchme/.test(props[key])) {\n return new Error('Validation failed!')\n }\n }\n}\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://reactjs.org\">React website</a> <em>(reactjs.org)</em></li>\n <li><a href=\"https://reactcheatsheet.com/\">React cheatsheet</a> <em>(reactcheatsheet.com)</em></li>\n <li><a href=\"https://github.com/enaqx/awesome-react\">Awesome React</a> <em>(github.com)</em></li>\n <li><a href=\"react@0.14\">React v0.14 cheatsheet</a> <em>Legacy version</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://reactjs.org/\">React</a> is a JavaScript library for building user interfaces. This guide targets React v15 to v16.</p>",
"description_html": "",
"tags": ["Featured"],
"updated": "2018-10-04"
},{
"id": "react@0.14",
"title": "React.js (v0.14)",
"url": "/react@0.14",
"category": "React",
"keywords": null,
"content_html": "<h3 id=\"components\">Components</h3>\n\n<pre><code class=\"language-js\">var Component = React.createClass({\n render: function () {\n return &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;\n }\n});\n</code></pre>\n\n<pre class=\"light\"><code class=\"language-js\">ReactDOM.render(&lt;Component name=\"John\" /&gt;, document.body);\n</code></pre>\n\n<p>Use the <a href=\"http://jsfiddle.net/reactjs/69z2wepo/\">React.js jsfiddle</a> to start hacking. (or the unofficial <a href=\"http://jsbin.com/yafixat/edit?js,output\">jsbin</a>)</p>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre class=\"light\"><code class=\"language-js\">var UserAvatar = React.createClass({...});\nvar UserProfile = React.createClass({...});\n</code></pre>\n\n<pre><code class=\"language-js\">var Info = React.createClass({\n render() {\n return &lt;div&gt;\n &lt;UserAvatar src={this.props.avatar} /&gt;\n &lt;UserProfile username={this.props.username} /&gt;\n &lt;/div&gt;;\n }\n});\n</code></pre>\n\n<p>Nest components to separate concerns. See <a href=\"http://facebook.github.io/react/docs/multiple-components.html\">multiple components</a>.</p>\n\n<h2 class=\"center\" id=\"states--properties\">States &amp; Properties</h2>\n\n<h3 id=\"states-and-props\">States and props</h3>\n\n<pre class=\"light\"><code class=\"language-html\">&lt;MyComponent fullscreen={true} /&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">// props\n this.props.fullscreen //=&gt; true\n\n// state\n this.setState({ username: 'rstacruz' });\n this.replaceState({ ... });\n this.state.username //=&gt; 'rstacruz'\n</code></pre>\n\n<pre><code class=\"language-js\">render: function () {\n return &lt;div className={this.props.fullscreen ? 'full' : ''}&gt;\n Welcome, {this.state.username}\n &lt;/div&gt;;\n}\n</code></pre>\n\n<p>Use <a href=\"https://facebook.github.io/react/docs/tutorial.html#using-props\">props</a> (<code>this.props</code>) to access parameters passed from the parent.\nUse <a href=\"https://facebook.github.io/react/docs/tutorial.html#reactive-state\">states</a> (<code>this.state</code>) to manage dynamic data.</p>\n\n<h3 id=\"setting-defaults\">Setting defaults</h3>\n\n<pre><code class=\"language-js\">React.createClass({\n getInitialState: function () {\n return { comments: [] };\n },\n\n getDefaultProps: function () {\n return { name: \"Hello\" };\n }\n);\n</code></pre>\n\n<p>Pre-populates <code>this.state.comments</code> and <code>this.props.name</code>.</p>\n\n<h2 id=\"components-1\">Components</h2>\n\n<h3 id=\"component-api\">Component API</h3>\n\n<pre class=\"light\"><code class=\"language-js\">ReactDOM.findDOMNode(c) // 0.14+\nReact.findDOMNode(c) // 0.13\nc.getDOMNode() // 0.12 below\n</code></pre>\n\n<pre><code class=\"language-js\">c.forceUpdate()\nc.isMounted()\n\nc.state\nc.props\n\nc.setState({ ... })\nc.replaceState({ ... })\n\nc.setProps({ ... }) // for deprecation\nc.replaceProps({ ... }) // for deprecation\n\nc.refs\n</code></pre>\n\n<p>These are methods available for <code>Component</code> instances. See <a href=\"http://facebook.github.io/react/docs/component-api.html\">Component API</a>.</p>\n\n<h3 id=\"component-specs\">Component specs</h3>\n\n<table class=\"greycode no-head\">\n <thead>\n <tr>\n <th>Method</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#render\"><code>render()</code></a></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#getinitialstate\"><code>getInitialState()</code></a></td>\n <td> </td>\n </tr>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#getdefaultprops\"><code>getDefaultProps()</code></a></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#mixins\"><code>mixins: [ ... ]</code></a></td>\n <td>Mixins … <a href=\"#mixins\">more</a></td>\n </tr>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#proptypes\"><code>propTypes: { ... }</code></a></td>\n <td>Validation … <a href=\"#property-validation\">more</a></td>\n </tr>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#statics\"><code>statics: { ... }</code></a></td>\n <td>Static methods</td>\n </tr>\n <tr>\n <td><a href=\"http://facebook.github.io/react/docs/component-specs.html#displayname\"><code>displayName: \"...\"</code></a></td>\n <td>Automatically filled by JSX</td>\n </tr>\n </tbody>\n</table>\n\n<p>Methods and properties you can override. See <a href=\"http://facebook.github.io/react/docs/component-specs.html\">component specs</a>.</p>\n\n<h2 id=\"lifecycle\">Lifecycle</h2>\n\n<h3 id=\"mounting\">Mounting</h3>\n\n<table class=\"greycode no-head lc\">\n <tbody>\n <tr>\n <td><code>componentWillMount()</code></td>\n <td>Before rendering (no DOM yet)</td>\n </tr>\n <tr>\n <td><code>componentDidMount()</code></td>\n <td>After rendering</td>\n </tr>\n </tbody>\n</table>\n\n<p>Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See <a href=\"http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount\">reference</a>.</p>\n\n<h3 id=\"updating\">Updating</h3>\n\n<table class=\"greycode no-head lc\">\n <tbody>\n <tr>\n <td><code>componentWillReceiveProps</code><em>(newProps={})</em></td>\n <td>Use <code>setState()</code> here</td>\n </tr>\n <tr>\n <td><code>shouldComponentUpdate</code><em>(newProps={}, newState={})</em></td>\n <td>Skips <code>render()</code> if returns false</td>\n </tr>\n <tr>\n <td><code>componentWillUpdate</code><em>(newProps={}, newState={})</em></td>\n <td>Can’t use <code>setState()</code> here</td>\n </tr>\n <tr>\n <td><code>componentDidUpdate</code><em>(prevProps={}, prevState={})</em></td>\n <td>Operate on the DOM here</td>\n </tr>\n </tbody>\n</table>\n\n<p>Called when parents change properties and <code>.setState()</code>. These are not called for initial renders. See <a href=\"http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops\">reference</a>.</p>\n\n<h3 id=\"unmounting\">Unmounting</h3>\n\n<table class=\"greycode no-head lc\">\n <tbody>\n <tr>\n <td><code>componentWillUnmount()</code></td>\n <td>Invoked before DOM removal</td>\n </tr>\n </tbody>\n</table>\n\n<p>Clear your DOM stuff here (probably done on didMount). See <a href=\"http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount\">reference</a>.</p>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"example-loading-data\">Example: loading data</h3>\n\n<pre><code class=\"language-js\">React.createClass({\n componentDidMount: function () {\n $.get(this.props.url, function (data) {\n this.setState(data);\n }.bind(this));\n },\n\n render: function () {\n return &lt;CommentList data={this.state.data} /&gt;\n }\n});\n</code></pre>\n\n<p>See <a href=\"http://facebook.github.io/react/tips/initial-ajax.html\">initial AJAX data</a>.</p>\n\n<h2 id=\"dom-nodes\">DOM nodes</h2>\n\n<h3 id=\"references\">References</h3>\n\n<pre class=\"light\"><code class=\"language-html\">&lt;input ref=\"myInput\"&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">this.refs.myInput\nReactDOM.findDOMNode(this.refs.myInput).focus()\nReactDOM.findDOMNode(this.refs.myInput).value\n</code></pre>\n\n<h3 id=\"dom-events\">DOM Events</h3>\n<p>Add attributes like <code>onChange</code>. See <a href=\"https://facebook.github.io/react/docs/events.html\">events</a>.</p>\n\n<pre class=\"light\"><code class=\"language-html\">&lt;input type=\"text\"\n value={this.state.value}\n onChange={this.handleChange} /&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">handleChange: function(event) {\n this.setState({ value: event.target.value });\n}\n</code></pre>\n\n<p>Allows access to DOM nodes. See <a href=\"http://facebook.github.io/react/docs/more-about-refs.html\">References</a>.</p>\n\n<h3 id=\"two-way-binding\">Two-way binding</h3>\n\n<pre class=\"light\"><code class=\"language-html\">Email: &lt;input type=\"text\" valueLink={this.linkState('email')} /&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">React.createClass({\n mixins: [React.addons.LinkedStateMixin]\n});\n</code></pre>\n\n<pre><code class=\"language-js\">this.state.email\n</code></pre>\n\n<p>Use <a href=\"http://facebook.github.io/react/docs/two-way-binding-helpers.html\">LinkedStateMixin</a> for easier two-way binding.</p>\n\n<h2 id=\"property-validation\">Property validation</h2>\n\n<h3 id=\"basic-types\">Basic types</h3>\n\n<pre><code class=\"language-js\">React.createClass({\n propTypes: {\n email: React.PropTypes.string,\n seats: React.PropTypes.number,\n settings: React.PropTypes.object,\n callback: React.PropTypes.func,\n isClosed: React.PropTypes.bool,\n any: React.PropTypes.any,\n }\n});\n</code></pre>\n<p>Primitive types: <code>.string</code>, <code>.number</code>, <code>.func</code>, and <code>.bool</code>. See <a href=\"http://facebook.github.io/react/docs/reusable-components.html#prop-validation\">propTypes</a>.</p>\n\n<h3 id=\"required-types\">Required types</h3>\n\n<pre><code class=\"language-js\">propTypes: {\n requiredFunc: React.PropTypes.func.isRequired,\n requiredAny: React.PropTypes.any.isRequired,\n</code></pre>\n\n<p>Add <code>.isRequired</code>.</p>\n\n<h3 id=\"react-elements\">React elements</h3>\n\n<pre><code class=\"language-js\">propTypes: {\n element: React.PropTypes.element, // react element\n node: React.PropTypes.node, // num, string, element\n // ...or array of those\n</code></pre>\n\n<p>Use <code>.element</code>, <code>.node</code>.</p>\n\n<h3 id=\"enumerables\">Enumerables</h3>\n\n<pre><code>propTypes: {\n enum: React.PropTypes.oneOf(['M','F']), // enum\n union: React.PropTypes.oneOfType([ // any\n React.PropTypes.string,\n React.PropTypes.number ]),\n</code></pre>\n\n<p>Use <code>.oneOf</code>, <code>.oneOfType</code>.</p>\n\n<h3 id=\"arrays-and-objects\">Arrays and objects</h3>\n\n<pre><code class=\"language-js\">propTypes: {\n array: React.PropTypes.array,\n arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),\n object: React.PropTypes.object,\n objectOf: React.PropTypes.objectOf(React.PropTypes.number),\n\n message: React.PropTypes.instanceOf(Message),\n\n object2: React.PropTypes.shape({\n color: React.PropTypes.string,\n size: React.PropTypes.number\n }),\n</code></pre>\n\n<p>Use <code>.array[Of]</code>, <code>.object[Of]</code>, <code>.instanceOf</code>, <code>.shape</code>.</p>\n\n<h3 id=\"custom-validation\">Custom validation</h3>\n\n<pre><code class=\"language-js\">propTypes: {\n customProp: function(props, propName, componentName) {\n if (!/matchme/.test(props[propName])) {\n return new Error('Validation failed!');\n }\n }\n}\n</code></pre>\n\n<p>Supply your own function.</p>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 id=\"class-set\">Class set</h3>\n\n<pre><code class=\"language-js\">var cx = require('classnames');\n\nrender: function() {\n var classes = cx({\n 'message': true,\n 'message-important': this.props.isImportant,\n 'message-read': this.props.isRead\n });\n\n return &lt;div className={classes}&gt;Great Scott!&lt;/div&gt;;\n}\n</code></pre>\n\n<p>Manipulate DOM classes with <a href=\"https://www.npmjs.org/package/classnames\">classnames</a>, previously known as <code>React.addons.classSet</code>. See <a href=\"http://facebook.github.io/react/docs/class-name-manipulation.html\">Class set</a>.</p>\n\n<h3 id=\"propagating-properties\">Propagating properties</h3>\n\n<pre class=\"light\"><code class=\"language-html\">&lt;VideoPlayer src=\"video.mp4\" /&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">var VideoPlayer = React.createClass({\n render: function() {\n /* propagates src=\"...\" down to this sub component */\n return &lt;VideoEmbed {...this.props} controls='false' /&gt;;\n }\n});\n</code></pre>\n\n<p>See <a href=\"http://facebook.github.io/react/docs/transferring-props.html\">Transferring props</a>.</p>\n\n<h3 id=\"mixins\">Mixins</h3>\n\n<pre class=\"light\"><code class=\"language-js\">var SetIntervalMixin = {\n componentWillMount: function() { .. }\n}\n</code></pre>\n\n<pre><code class=\"language-js\">var TickTock = React.createClass({\n mixins: [SetIntervalMixin]\n}\n</code></pre>\n\n<p>See <a href=\"https://facebook.github.io/react/docs/addons.html\">addons</a> for some built-in mixins.</p>\n\n<h2 id=\"top-level-api\"><a href=\"https://facebook.github.io/react/docs/top-level-api.html\">Top level API</a></h2>\n\n<pre><code class=\"language-js\">React.createClass({ ... })\n\nReact.isValidElement(c)\n\nReactDOM.findDOMNode(c) // 0.14+\nReactDOM.render(&lt;Component /&gt;, domnode, [callback]) // 0.14+\nReactDOM.unmountComponentAtNode(domnode) // 0.14+\n\nReactDOMServer.renderToString(&lt;Component /&gt;) // 0.14+\nReactDOMServer.renderToStaticMarkup(&lt;Component /&gt;) // 0.14+\n</code></pre>\n\n<h2 id=\"jsx-patterns\">JSX patterns</h2>\n\n<h3 id=\"style-shorthand\">Style shorthand</h3>\n\n<pre><code class=\"language-js\">var style = { backgroundImage: 'url(x.jpg)', height: 10 };\nreturn &lt;div style={style}&gt;&lt;/div&gt;;\n</code></pre>\n\n<p>See <a href=\"https://facebook.github.io/react/tips/inline-styles.html\">inline styles</a>.</p>\n\n<h3 id=\"innerhtml\">InnerHTML</h3>\n\n<pre><code class=\"language-js\">function markdownify() { return \"&lt;p&gt;...&lt;/p&gt;\"; }\n&lt;div dangerouslySetInnerHTML={{__html: markdownify()}} /&gt;\n</code></pre>\n\n<p>See <a href=\"https://facebook.github.io/react/tips/dangerously-set-inner-html.html\">dangerously set innerHTML</a>.</p>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-js\">var TodoList = React.createClass({\n render: function() {\n function item(itemText) {\n return &lt;li&gt;{itemText}&lt;/li&gt;;\n };\n return &lt;ul&gt;{this.props.items.map(item)}&lt;/ul&gt;;\n }\n});\n</code></pre>\n\n<h2 id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"http://facebook.github.io/react/docs/animation.html\">Animations</a></li>\n</ul>",
"intro_html": "<p><strong>Deprecated:</strong> this guide targets an old version of React (v0.14). See the <a href=\"react\">updated React cheatsheet</a> for new versions.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "redux",
"title": "Redux",
"url": "/redux",
"category": "React",
"keywords": null,
"content_html": "<h3 id=\"creating-a-store\">Creating a store</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import { createStore } from 'redux'\n</code></pre>\n\n<pre><code class=\"language-js\">// Reducer\nfunction counter (state = { value: 0 }, action) {\n switch (action.type) {\n case 'INCREMENT':\n return { value: state.value + 1 }\n case 'DECREMENT':\n return { value: state.value - 1 }\n default:\n return state\n }\n}\n</code></pre>\n\n<pre><code class=\"language-js\">let store = createStore(counter)\n</code></pre>\n\n<pre><code class=\"language-js\">// Optional - you can pass `initialState` as a second arg\nlet store = createStore(counter, { value: 0 })\n</code></pre>\n\n<p>A store is made from a reducer function, which takes the current <code>state</code>, and\nreturns a new <code>state</code> depending on the <code>action</code> it was given.</p>\n\n<h3 id=\"using-a-store\">Using a store</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">let store = createStore(counter)\n</code></pre>\n\n<pre><code class=\"language-js\">// Dispatches an action; this changes the state\nstore.dispatch({ type: 'INCREMENT' })\nstore.dispatch({ type: 'DECREMENT' })\n</code></pre>\n\n<pre><code class=\"language-js\">// Gets the current state\nstore.getState()\n</code></pre>\n\n<pre><code class=\"language-js\">// Listens for changes\nstore.subscribe(() =&gt; { ... })\n</code></pre>\n\n<p>Dispatch actions to change the store’s state.</p>\n\n<h2 id=\"react-redux\">React Redux</h2>\n\n<h3 id=\"provider\">Provider</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import { Provider } from 'react-redux'\n</code></pre>\n\n<pre><code class=\"language-js\">React.render(\n &lt;Provider store={store}&gt;\n &lt;App /&gt;\n &lt;/Provider&gt;, mountNode)\n</code></pre>\n\n<p>The <code>&lt;Provider&gt;</code> component makes the store available in your React components. You need this so you can use <code>connect()</code>.</p>\n\n<h3 id=\"mapping-state\">Mapping state</h3>\n\n<pre class=\"-setup\"><code class=\"language-js\">import { connect } from 'react-redux'\n</code></pre>\n\n<pre><code class=\"language-js\">// A functional React component\nfunction App ({ message, onMessageClick }) {\n return (\n &lt;div onClick={() =&gt; onMessageClick('hello')}&gt;\n {message}\n &lt;/div&gt;\n )\n}\n</code></pre>\n\n<pre><code class=\"language-js\">// Maps `state` to `props`:\n// These will be added as props to the component.\nfunction mapState (state) {\n return { message: state.message }\n}\n\n// Maps `dispatch` to `props`:\nfunction mapDispatch (dispatch) {\n return {\n onMessageClick (message) {\n dispatch({ type: 'click', message })\n }\n }\n}\n\n// Connect them:\nexport default connect(mapState, mapDispatch)(App)\n</code></pre>\n\n<h3 id=\"shorthand\">Shorthand</h3>\n\n<pre><code class=\"language-js\">export default connect(\n (state) =&gt; ({\n message: state.message\n }),\n (dispatch) =&gt; ({\n onMessageClick: (message) =&gt; {\n dispatch({ type: 'click', message })\n }\n })\n)(App)\n</code></pre>\n\n<p>Same as above, but shorter.</p>\n\n<h3 id=\"combining-reducers\">Combining reducers</h3>\n\n<pre><code class=\"language-js\">const reducer = combineReducers({\n counter, user, store\n})\n</code></pre>\n\n<p>Combines multiple reducers into one reducer function. See: <a href=\"https://redux.js.org/docs/api/combineReducers.html\">combineReducers</a> <em>(redux.js.org)</em></p>\n\n<h2 id=\"middleware\">Middleware</h2>\n\n<h3 id=\"signature\">Signature</h3>\n\n<pre><code class=\"language-js\">// noop middleware\nconst logger = store =&gt; dispatch =&gt; action { dispatch(action) }\n</code></pre>\n\n<pre><code class=\"language-js\">const logger = store =&gt; {\n // This function runs on createStore().\n // It returns a decorator for dispatch().\n\n return dispatch =&gt; {\n // Runs on createStore(), too.\n // It returns a new dispatch() function\n\n return action =&gt; {\n // Runs on every dispatch()\n }\n }\n}\n</code></pre>\n\n<p>Middlewares are simply decorators for <code>dispatch()</code> to allow you to take\ndifferent kinds of actions, and to perform different tasks when receiving\nactions.</p>\n\n<h3 id=\"applying-middleware\">Applying middleware</h3>\n\n<pre><code class=\"language-js\">const enhancer = applyMiddleware(logger, thunk, ...)\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-js\">const store = createStore(reducer, {}, enhancer)\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul class=\"-also-see\">\n <li><a href=\"https://www.npmjs.com/package/redux\">Redux</a> <em>(npmjs.com)</em></li>\n <li><a href=\"https://www.npmjs.com/package/react-redux\">React-redux</a> <em>(npmjs.com)</em></li>\n <li><a href=\"http://redux.js.org/docs/basics/UsageWithReact.html\">Usage with React</a> <em>(redux.js.org)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-01-17"
},{
"id": "regexp",
"title": "regexp",
"url": "/regexp",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"regexp\">RegExp</h2>\n\n<h3 id=\"character-classes\">Character classes</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.</code></td>\n <td>Any character, except newline</td>\n </tr>\n <tr>\n <td><code>\\w</code></td>\n <td>Word</td>\n </tr>\n <tr>\n <td><code>\\d</code></td>\n <td>Digit</td>\n </tr>\n <tr>\n <td><code>\\s</code></td>\n <td>Whitespace</td>\n </tr>\n <tr>\n <td><code>\\W</code></td>\n <td>Not word</td>\n </tr>\n <tr>\n <td><code>\\D</code></td>\n <td>Not digit</td>\n </tr>\n <tr>\n <td><code>\\S</code></td>\n <td>Not whitespace</td>\n </tr>\n <tr>\n <td><code>[abc]</code></td>\n <td>Any of a, b, or c</td>\n </tr>\n <tr>\n <td><code>[a-e]</code></td>\n <td>Characters between <code>a</code> and <code>e</code></td>\n </tr>\n <tr>\n <td><code>[1-9]</code></td>\n <td>Digit between <code>1</code> and <code>9</code></td>\n </tr>\n <tr>\n <td><code>[[:print:]]</code></td>\n <td>Any printable character including spaces</td>\n </tr>\n <tr>\n <td><code>[^abc]</code></td>\n <td>Any character except <code>a</code>, <code>b</code> or <code>c</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"anchors\">Anchors</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>\\G</code></td>\n <td>Start of match</td>\n </tr>\n <tr>\n <td><code>^</code></td>\n <td>Start of string</td>\n </tr>\n <tr>\n <td><code>$</code></td>\n <td>End of string</td>\n </tr>\n <tr>\n <td><code>\\A</code></td>\n <td>Start of string</td>\n </tr>\n <tr>\n <td><code>\\Z</code></td>\n <td>End of string</td>\n </tr>\n <tr>\n <td><code>\\z</code></td>\n <td>Absolute end of string</td>\n </tr>\n <tr>\n <td><code>\\b</code></td>\n <td>A word boundry</td>\n </tr>\n <tr>\n <td><code>\\B</code></td>\n <td>Non-word boundry</td>\n </tr>\n <tr>\n <td><code>^abc</code></td>\n <td>Start with <code>abc</code></td>\n </tr>\n <tr>\n <td><code>abc$</code></td>\n <td>End with <code>abc</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"escaped-characters\">Escaped characters</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>\\. \\* \\\\</code></td>\n <td>Escape special character used by regex</td>\n </tr>\n <tr>\n <td><code>\\t</code></td>\n <td>Tab</td>\n </tr>\n <tr>\n <td><code>\\n</code></td>\n <td>Newline</td>\n </tr>\n <tr>\n <td><code>\\r</code></td>\n <td>Carriage return</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"groups\">Groups</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>(abc)</code></td>\n <td>Capture group</td>\n </tr>\n <tr>\n <td><code>(a|b)</code></td>\n <td>Match <code>a</code> or <code>b</code></td>\n </tr>\n <tr>\n <td><code>(?:abc)</code></td>\n <td>Match <code>abc</code>, but don’t capture</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"quantifiers\">Quantifiers</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>a*</code></td>\n <td>Match 0 or more</td>\n </tr>\n <tr>\n <td><code>a+</code></td>\n <td>Match 1 or more</td>\n </tr>\n <tr>\n <td><code>a?</code></td>\n <td>Match 0 or 1</td>\n </tr>\n <tr>\n <td><code>a{5}</code></td>\n <td>Match exactly 5</td>\n </tr>\n <tr>\n <td><code>a{,3}</code></td>\n <td>Match up to 3</td>\n </tr>\n <tr>\n <td><code>a{3,}</code></td>\n <td>Match 3 or more</td>\n </tr>\n <tr>\n <td><code>a{1,3}</code></td>\n <td>Match between 1 and 3</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"lookahead--lookbehind\">Lookahead &amp; Lookbehind</h3>\n\n<table>\n <thead>\n <tr>\n <th>Pattern</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>a(?=b)</code></td>\n <td>Match <code>a</code> in <code>baby</code> but not in <code>bay</code></td>\n </tr>\n <tr>\n <td><code>a(?!b)</code></td>\n <td>Match <code>a</code> in <code>Stan</code> but not in <code>Stab</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>(?&lt;=a)b</code></td>\n <td>Match <code>b</code> in <code>crabs</code> but not in <code>cribs</code></td>\n </tr>\n <tr>\n <td><code>(?&lt;!a)b</code></td>\n <td>Match <code>b</code> in <code>fib</code> but not in <code>fab</code></td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "<p>Basic cheatsheets for regular expression</p>",
"tags": null,
"updated": "2019-11-14"
},{
"id": "rename",
"title": "rename",
"url": "/rename",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"installation\">Installation</h3>\n\n<pre><code class=\"language-bash\">brew install rename\n</code></pre>\n\n<p>See: <a href=\"http://plasmasturm.org/code/rename/\">http://plasmasturm.org/code/rename/</a></p>\n\n<h3 id=\"regex-substitution\">Regex substitution</h3>\n\n<pre><code class=\"language-bash\">rename 's/hello/world/' *.txt\n</code></pre>\n\n<p>Rename <code>hello.txt</code> to <code>world.txt</code> and so on in <code>*.txt</code>.</p>\n\n<h3 id=\"replace-extension\">Replace extension</h3>\n\n<pre><code class=\"language-bash\">rename -s .png .jpg.png *.png\n</code></pre>\n\n<p>Replace <code>.png</code> with <code>.jpg.png</code> in <code>*.png</code>.</p>\n\n<h3 id=\"options\">Options</h3>\n\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-n</code></td>\n <td>Simulation</td>\n </tr>\n <tr>\n <td><code>-l</code></td>\n <td>Symlink instead of rename</td>\n </tr>\n <tr>\n <td><code>-i</code></td>\n <td>Interactive</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"http://plasmasturm.org/code/rename/\">Rename website</a> <em>(plasmasturm.org)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "resolutions",
"title": "Screen resolutions",
"url": "/resolutions",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"resolutions\">Resolutions</h2>\n\n<h3 id=\"mobile\">Mobile</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Resolution</th>\n <th>DPPX</th>\n <th>Actual resolution</th>\n <th>DPPI</th>\n <th>Actual PPI</th>\n <th>Size</th>\n <th>Devices</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>320 x 480</td>\n <td>@1x</td>\n <td>320 x 480</td>\n <td>163 ppi</td>\n <td>163 ppi</td>\n <td>3.5”</td>\n <td>iPhone 3GS</td>\n </tr>\n <tr>\n <td>320 x 480</td>\n <td>@2x</td>\n <td>640 x 960</td>\n <td>163 ppi</td>\n <td>326 ppi</td>\n <td>3.5”</td>\n <td>iPhone 4S</td>\n </tr>\n <tr>\n <td>320 x 568</td>\n <td>@2x</td>\n <td>640 x 1136</td>\n <td>163 ppi</td>\n <td>326 ppi</td>\n <td>4”</td>\n <td>iPhone SE</td>\n </tr>\n <tr>\n <td>375 x 667</td>\n <td>@2x</td>\n <td>750 x 1334</td>\n <td>163 ppi</td>\n <td>326 ppi</td>\n <td>4.7”</td>\n <td>iPhone 7/8</td>\n </tr>\n <tr>\n <td>414 x 736</td>\n <td>@3x</td>\n <td>1242 x 2208</td>\n <td>133 ppi</td>\n <td>401 ppi</td>\n <td>5.5”</td>\n <td>iPhone 7+/8+</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>360 x 640</td>\n <td>@3x</td>\n <td>1080 x 1920</td>\n <td>147 ppi</td>\n <td>441 ppi</td>\n <td>5”</td>\n <td>Galaxy S4</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"tablet\">Tablet</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Resolution</th>\n <th>DPPX</th>\n <th>Actual resolution</th>\n <th>DPPI</th>\n <th>Actual PPI</th>\n <th>Size</th>\n <th>Devices</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>1024 x 768</td>\n <td>@2x</td>\n <td>2048 x 1536</td>\n <td>163 ppi</td>\n <td>326 ppi</td>\n <td>7.9”</td>\n <td>iPad Mini Retina</td>\n </tr>\n <tr>\n <td>1024 x 768</td>\n <td>@2x</td>\n <td>2048 x 1536</td>\n <td>132 ppi</td>\n <td>264 ppi</td>\n <td>9.7”</td>\n <td>iPad Air</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-30"
},{
"id": "rest-api",
"title": "RESTful API",
"url": "/rest-api",
"category": "API",
"keywords": null,
"content_html": "<h3 id=\"status-codes\">Status codes</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>200 OK</code></td>\n <td>Successful get, patch (return a JSON object)</td>\n </tr>\n <tr>\n <td><code>201 Created</code></td>\n <td>Successful post (return a JSON object)</td>\n </tr>\n <tr>\n <td><code>202 Accepted</code></td>\n <td>Successful post, delete, path - async</td>\n </tr>\n <tr>\n <td><code>204 No content</code></td>\n <td>Successful delete</td>\n </tr>\n <tr>\n <td><code>206 Partial content</code></td>\n <td>Successful get - async</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"error-status\">Error status</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>401 Unauthorized</code></td>\n <td>Not authenticated</td>\n </tr>\n <tr>\n <td><code>403 Forbidden</code></td>\n <td>Authenticated, but no permissions</td>\n </tr>\n <tr>\n <td><code>422 Unprocessable entity</code></td>\n <td>Validation</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"errors\">Errors</h3>\n\n<pre><code>HTTP/1.1 401 Unauthorized\nContent-Type: application/json\n{\n 'id': 'auth_failed',\n 'message': \"You're not logged in.\"\n}\n</code></pre>\n\n<p>Here’s an example of a possible error reply.</p>\n\n<h3 id=\"versioning\">Versioning</h3>\n\n<pre><code>GET /api/foo\nAccept: application/json; version=1\n</code></pre>\n\n<p>You can pass a <code>version=x</code> to the Accept request header. <a href=\"https://github.com/interagent/http-api-design#version-with-accepts-header\">Info here</a></p>\n\n<h3 id=\"authentication\">Authentication</h3>\n\n<pre><code>curl -is https://$TOKEN@api.example.com/\n</code></pre>\n\n<h3 id=\"methods\">Methods</h3>\n\n<table>\n <thead>\n <tr>\n <th>Request</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>GET /articles/1</code></td>\n <td>read, returns <em>200</em></td>\n </tr>\n <tr>\n <td><code>PUT /articles/1</code></td>\n <td>edit (or path), returns <em>200</em></td>\n </tr>\n <tr>\n <td><code>DELETE /articles/1</code></td>\n <td>delete, returns <em>200</em></td>\n </tr>\n <tr>\n <td><code>POST /articles</code></td>\n <td>create, returns <em>201</em></td>\n </tr>\n <tr>\n <td><code>GET /articles</code></td>\n <td>list, returns <em>200</em></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://github.com/interagent/http-api-design\">interagent/http-api-design</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-12-25"
},{
"id": "riot",
"title": "Riot.js",
"url": "/riot",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"tags\">Tags</h2>\n\n<pre><code class=\"language-js\">/* tag-name.tag */\n&lt;tag-name&gt;\n &lt;div&gt;\n hello {name}\n &lt;/div&gt;\n\n this.name = opts.name\n&lt;/tag-name&gt;\n</code></pre>\n\n<pre><code class=\"language-html\">&lt;!-- in html --&gt;\n&lt;tag-name&gt;\n&lt;script&gt;riot.mount('*')&lt;/script&gt;\n&lt;script&gt;riot.mount('tag-name')&lt;/script&gt;\n&lt;script&gt;riot.mount('tag-name', { title: 'my app', ... })&lt;/script&gt;\n</code></pre>\n\n<h2 id=\"expressions\">Expressions</h2>\n\n<pre><code>{value}\n{value || 'its a js expression'}\n\n&lt;input checked={null}&gt; /* null values ignore the tag */\n&lt;p class={ selected: true }&gt;\n</code></pre>\n\n<h3 id=\"loops\">Loops</h3>\n\n<pre><code>&lt;li each={movies}&gt;{title}&lt;/li&gt;\n</code></pre>\n\n<h3 id=\"conditional\">Conditional</h3>\n<pre><code>&lt;div if={error}&gt;\n&lt;div show={error}&gt; /* show using display: '' */\n&lt;div hide={error}&gt; /* hide using display: none */\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-js\">&lt;button onclick={go}&gt;\n\nthis.go = function (e) { ... }\n</code></pre>\n\n<h2 id=\"api\">API</h2>\n\n<pre><code class=\"language-js\">this.update()\nthis.update({ data: 'hi' }\n\nthis.unmount()\nthis.unmount(true) // keep parent tag\n\nriot.update() // update all\n</code></pre>\n\n<h2 id=\"nesting\">Nesting</h2>\n\n<pre><code>&lt;my-tag&gt;\n &lt;child&gt;&lt;/child&gt;\n var child = this.tags.child\n&lt;/my-tag&gt;\n</code></pre>\n\n<h3 id=\"names\">Names</h3>\n\n<pre><code>&lt;my-tag&gt;\n &lt;child name='xyz'&gt;&lt;/child&gt;\n var child = this.tags.xyz\n&lt;/my-tag&gt;\n</code></pre>\n\n<h2 id=\"nested-html\">Nested HTML</h2>\n\n<pre><code class=\"language-js\">&lt;yield/&gt;\n</code></pre>\n\n<h3 id=\"yield-tofrom\">Yield to/from</h3>\n\n<pre><code class=\"language-js\">&lt;post&gt;\n &lt;yield to='title'&gt;Hello&lt;/yield&gt;\n &lt;yield to='body'&gt;Hey there world&lt;/yield&gt;\n&lt;/post&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">&lt;post&gt;\n &lt;yield from='title'/&gt;\n &lt;yield from='body'/&gt;\n&lt;/post&gt;\n</code></pre>\n\n<h2 id=\"router\">Router</h2>\n\n<pre><code class=\"language-js\">riot.route('customers/*/edit', (id) =&gt; {\n})\nriot.route('customers/234/edit')\nriot.route.start()\nriot.route.start(true) // exec the current url\n</code></pre>\n\n<h2 id=\"lifecycle\">Lifecycle</h2>\n\n<pre><code class=\"language-js\">this.on('before-mount', function() {\n// before the tag is mounted\n})\n\nthis.on('mount', function() {\n// right after the tag is mounted on the page\n})\n\nthis.on('update', function() {\n// allows recalculation of context data before the update\n})\n\nthis.on('updated', function() {\n// right after the tag template is updated\n})\n\nthis.on('before-unmount', function() {\n// before the tag is removed\n})\n\nthis.on('unmount', function() {\n// when the tag is removed from the page\n})\n\n// curious about all events ?\nthis.on('all', function(eventName) {\nconsole.info(eventName)\n})\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rollup",
"title": "Rollup.js",
"url": "/rollup",
"category": "JavaScript libraries",
"keywords": ["rollup.watch","bundle","rollup.config.js"],
"content_html": "<h3 id=\"basic-config\">Basic config</h3>\n\n<h4 id=\"rollupconfigjs\">rollup.config.js</h4>\n\n<pre><code class=\"language-js\">export default {\n input: 'src/main.js',\n output: {\n file: 'bundle.js',\n format: 'cjs'\n }\n}\n</code></pre>\n<h4 id=\"terminal\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install -D rollup\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>rollup -c -o bundle.js</code></td>\n <td>bundle using config</td>\n </tr>\n <tr>\n <td><code>rollup main.js --o bundle.js --f cjs</code></td>\n <td>bundle</td>\n </tr>\n <tr>\n <td><code>rollup --watch</code></td>\n <td>bundle continuously</td>\n </tr>\n </tbody>\n</table>\n\n<p>You may need to use <code>./node_modules/.bin/rollup</code> as a command if you did not install rollup globally.</p>\n\n<h3 id=\"multiple-outputs\">Multiple outputs</h3>\n\n<h4 id=\"rollupconfigjs-1\">rollup.config.js</h4>\n\n<pre><code class=\"language-js\">export default [\n {\n input: 'src/main.js',\n output: {\n file: __dirname + '/public/main.js',\n format: 'cjs',\n name: 'main'\n }\n },\n {\n input: 'src/vendor.js',\n output: {\n file: __dirname + 'public/vendor.js',\n format: 'cjs',\n name: 'vendor'\n }\n }\n]\n</code></pre>\n\n<p>This creates <code>main.js</code> and <code>vendor.js</code>.</p>\n\n<h2 id=\"using-plugins\">Using plugins</h2>\n\n<h3 id=\"plugins\">Plugins</h3>\n\n<h4 id=\"terminal-1\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install -D @rollup/plugin-json\n</code></pre>\n\n<h4 id=\"rollupconfigjs-2\">rollup.config.js</h4>\n\n<pre><code class=\"language-js\">import json from '@rollup/plugin-json'\n\nexport default {\n input: 'src/main.js',\n output: {\n file: 'bundle.js',\n format: 'cjs'\n },\n plugins: [ json() ]\n}\n\n</code></pre>\n\n<h3 id=\"npm-packages\">npm packages</h3>\n\n<h4 id=\"terminal-2\">Terminal</h4>\n<pre><code class=\"language-bash\">npm install -D @rollup/plugin-node-resolve\n</code></pre>\n\n<h4 id=\"rollupconfigjs-3\">rollup.config.js</h4>\n<pre><code class=\"language-js\">import resolve from '@rollup/plugin-node-resolve'\n\nexport default {\n input: 'src/main.js',\n output: {\n file: 'bundle.js',\n format: 'cjs'\n },\n plugins: [ resolve() ]\n}\n</code></pre>\n\n<p>When you run a npm run build, no warning is emitted and contains the imported modules.</p>\n\n<h3 id=\"peer-dependencies\">Peer dependencies</h3>\n\n<h4 id=\"terminal-3\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install -D @rollup/plugin-node-resolve\n</code></pre>\n\n<h4 id=\"rollupconfigjs-4\">rollup.config.js</h4>\n\n<pre><code class=\"language-js\">import resolve from '@rollup/plugin-node-resolve'\n\nexport default {\n input: 'src/main.js',\n output: {\n file: 'bundle.js',\n format: 'cjs'\n },\n plugins: [resolve({\n // pass custom options to the resolve plugin\n customResolveOptions: {\n moduleDirectory: 'node_modules'\n }\n })],\n // indicate which modules should be treated as external\n external: ['lodash']\n}\n</code></pre>\n\n<h3 id=\"babel\">Babel</h3>\n\n<h4 id=\"terminal-4\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install -D rollup-plugin-babel\n</code></pre>\n\n<h4 id=\"rollupconfigjs-5\">rollup.config.js</h4>\n\n<pre><code class=\"language-js\">import resolve from '@rollup/plugin-node-resolve'\nimport babel from 'rollup-plugin-babel'\n\nexport default {\n input: 'src/main.js',\n output: {\n file: 'bundle.js',\n format: 'cjs'\n },\n plugins: [\n resolve(),\n babel({\n exclude: 'node_modules/**' // only transpile our source code\n })\n ]\n}\n</code></pre>\n\n<h4 id=\"srcbabelrc\">src/.babelrc</h4>\n\n<pre><code class=\"language-js\">{\n \"presets\": [\n [\"latest\", {\n \"es2015\": {\n \"modules\": false\n }\n }]\n ],\n \"plugins\": [\"external-helpers\"]\n}\n</code></pre>",
"intro_html": "<p><a href=\"https://rollupjs.org/\">Rollup</a> Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.</p>",
"description_html": "",
"tags": null,
"updated": "2017-11-01"
},{
"id": "ronn",
"title": "Ronn",
"url": "/ronn",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h2 class=\"-left-reference\" id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"installation\">Installation</h3>\n\n<h4 id=\"installation-1\">Installation</h4>\n\n<pre><code class=\"language-bash\">gem install ronn\n</code></pre>\n\n<h4 id=\"usage\">Usage</h4>\n\n<pre><code class=\"language-bash\">ronn foo.1.md # creates foo.1.html\nronn -r foo.1.md # creates foo.1 (--roff)\nronn -r -h foo.1.md # builds --roff and --html\nronn -m foo.1.md # view as manpage\n</code></pre>\n\n<p>Ronn is a Ruby gem.</p>\n\n<h3 id=\"basic-template\">Basic template</h3>\n\n<pre><code class=\"language-markdown\">name(1) -- short, single-sentence description\n=============================================\n\n## SYNOPSIS\n\n`name` [&lt;optional&gt;...] &lt;flags&gt;\n\n## DESCRIPTION\n\nA normal paragraph. This can span multiple lines and is terminated with two\nor more line endings just like Markdown.\n\n## OPTIONS\n\n * `-h`, `--help` :\n Displays the help screen.\n\n * `--version` : \n Displays version information.\n\n## EXAMPLES\n\nIndent examples with 4 spaces.\n\n $ ls\n $ ls -la\n\n## COPYRIGHT\n\n**PROJECTNAME** is copyright (c) 2015, Rico Sta. Cruz. Released under the MIT\nlicense.\n\n## SEE ALSO\n\nronn-format(7), ronn(1)\n</code></pre>\n\n<h2 id=\"formatting-tags\">Formatting tags</h2>\n\n<h3 id=\"inline\">Inline</h3>\n\n<h4 id=\"bold\">Bold</h4>\n\n<pre><code>`code`\n**strong**\n</code></pre>\n\n<h4 id=\"underline\">Underline</h4>\n\n<pre><code>&lt;variable&gt;\n_emphasis_\n*emphasis*\n</code></pre>\n\n<h3 id=\"linking\">Linking</h3>\n\n<h4 id=\"manual-references\">Manual references</h4>\n\n<pre><code>sh(1)\nmarkdown(7)\n</code></pre>\n\n<h4 id=\"sections\">Sections</h4>\n\n<pre><code>[STANDARDS][]\n[SEE ALSO][]\n[DIFFERENT TEXT][#SEE-ALSO]\n</code></pre>\n\n<h4 id=\"url-links\">URL links</h4>\n\n<pre><code>[URL link](http://github.com/rstacruz)\n&lt;http://github.com&gt;\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"frequently-used-sections\">Frequently-used sections</h2>\n\n<h3 id=\"sections-1\">Sections</h3>\n\n<ul class=\"-four-column\">\n <li><code>## SYNOPSIS</code></li>\n <li><code>## DESCRIPTION</code></li>\n <li><code>## OPTIONS</code></li>\n <li><code>## SYNTAX</code></li>\n <li><code>## ENVIRONMENT</code></li>\n <li><code>## RETURN VALUES</code></li>\n <li><code>## STANDARDS</code></li>\n <li><code>## SECURITY CONSIDERATIONS</code></li>\n <li><code>## BUGS</code></li>\n <li><code>## HISTORY</code></li>\n <li><code>## AUTHOR</code></li>\n <li><code>## COPYRIGHT</code></li>\n <li><code>## SEE ALSO</code></li>\n</ul>\n\n<h2 id=\"other-cli-options\">Other CLI options</h2>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-bash\">--pipe # write to stdout\n--server, -S # serve in http://localhost:1207\n</code></pre>\n\n<pre><code class=\"language-bash\">--html, -5 # default\n--fragment, -f # html without header/title/footer\n</code></pre>\n\n<pre><code class=\"language-bash\">--style=toc,80c # toc (table of contents)\n # 80c (use 80c instead of 100c)\n # print (include print stylesheet)\n # dark\n</code></pre>\n\n<pre><code class=\"language-bash\">--manual=\"MY MANUAL\" # shown on top-center\n--organization=\"RONN 0.7.0\" # shown on bottom-left\n--date=\"YYYY-MM-DD\" # shown on bottom-center\n</code></pre>\n\n<h2 id=\"sections-2\">Sections</h2>\n\n<table>\n <thead>\n <tr>\n <th>Section</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>1</code></td>\n <td>General commands</td>\n </tr>\n <tr>\n <td><code>2</code></td>\n <td>System calls</td>\n </tr>\n <tr>\n <td><code>3</code></td>\n <td>C standard lib</td>\n </tr>\n <tr>\n <td><code>4</code></td>\n <td>Special files (/dev) and drivers</td>\n </tr>\n <tr>\n <td><code>5</code></td>\n <td>File formats</td>\n </tr>\n <tr>\n <td><code>6</code></td>\n <td>Games</td>\n </tr>\n <tr>\n <td><code>7</code></td>\n <td>Misc</td>\n </tr>\n <tr>\n <td><code>8</code></td>\n <td>System administration commands and procedures</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"http://www.december.com/unix/ref/mansec.html\">Man page sections</a> (december.com).</p>\n\n<h2 id=\"using-with-npm\">Using with npm</h2>\n\n<h3 id=\"npm-scripts\">npm scripts</h3>\n\n<p class=\"-setup\">Place manual files in <code>man/xxx.1.md</code>, then in package.json:</p>\n\n<pre><code class=\"language-json\">\"scripts\": {\n \"prepublish\": \"npm run build-man\",\n \"build-man\": \"if which ronn; then ronn man/*.md --html --roff --style=toc,80c --organization=\\\"@rstacruz\\\"; fi\"\n},\n\"directories\": {\n \"man\": \"man\"\n}\n</code></pre>\n\n<h3 id=\"marked-man\">marked-man</h3>\n\n<pre><code>npm install -g marked-man\nmarked-man foo.1.md &gt; foo.1\n</code></pre>\n\n<h4 id=\"differences\">Differences</h4>\n\n<ul>\n <li>No definition lists</li>\n <li>Can’t use <code>&lt;br&gt;</code></li>\n</ul>\n\n<p>See <a href=\"https://github.com/kapouer/marked-man\">marked-man</a>.</p>",
"intro_html": "<p>Ronn generates Man pages. See <a href=\"http://rtomayko.github.io/ronn/ronn.1.html\">ronn(1)</a>, <a href=\"http://rtomayko.github.com/ronn/ronn-format.7.html\">ronn-format(7)</a>. Also see it on GitHub: <a href=\"https://github.com/rtomayko/ronn\">rtomayko/ronn</a>.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-15"
},{
"id": "rspec-rails",
"title": "Rspec-rails",
"url": "/rspec-rails",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"spec-tasks\">Spec tasks</h3>\n\n<pre><code>rake spec:controllers\nrake spec:helpers\nrake spec:lib\nrake spec:mailers\nrake spec:models\nrake spec:requests\nrake spec:routing\nrake spec:views\n</code></pre>\n\n<h3 id=\"models\">Models</h3>\n\n<pre><code class=\"language-rb\"># spec/models/*.rb\ndescribe MyModel do\nend\n</code></pre>\n\n<h3 id=\"controllers\">Controllers</h3>\n\n<pre><code class=\"language-rb\"># spec/controllers/*.rb\ndescribe MyController do\n describe \"POST update\" do\n render_views #optional\n\n it \"works\" do\n post :update, { user: { name: \"john\" } }\n\n controller\n controller.send ...\n\n response\n expect(response).to be_success\n expect(response).to have_http_status(200)\n expect(response).to render_template(\"index\")\n expect(response).to redirect_to '/..'\n\n expect(assigns :article).to eq article\n\n response.status\n end\n end\nend\n</code></pre>\n\n<h3 id=\"request\">Request</h3>\n\n<pre><code class=\"language-js\"># spec/requests/*.rb\ndescribe \"home page\" do\n it \"displays the user's username after successful login\" do\n get \"/login\"\n post \"/login\", username: \"jdoe\", password: \"secret\"\n\n expect(response.status).to eql 200\n expect(response).to redirect_to(...)\n expect(response).to render_template(:show)\n expect(response.body).to include 'hello'\n follow_redirect!\n end\nend\n</code></pre>\n\n<h3 id=\"routing\">Routing</h3>\n\n<pre><code class=\"language-rb\"># spec/routing/*.rb\ndescribe \"routing to profiles\" do\n it \"routes /profile/:username to profile#show for username\" do\n expect(get: \"/profiles/jsmith\").to route_to(\n controller: \"profiles\",\n action: \"show\",\n username: \"jsmith\"\n )\n end\n\n it \"does not expose a list of profiles\" do\n expect(get: \"/profiles\").not_to be_routable\n end\nend\n</code></pre>\n\n<h3 id=\"helpers\">Helpers</h3>\n\n<pre><code class=\"language-rb\"># spec/helpers/*.rb\ndescribe EventsHelper do\n describe \"#link_to_event\" do\n it \"displays the title, and formatted date\" do\n event = Event.new(\"Ruby Kaigi\", Date.new(2010, 8, 27))\n\n # helper is an instance of ActionView::Base configured with the\n # EventsHelper and all of Rails' built-in helpers\n expect(helper.link_to_event).to match /Ruby Kaigi, 27 Aug, 2010/\n end\n end\nend\n</code></pre>\n\n<h3 id=\"features\">Features</h3>\n\n<pre><code class=\"language-rb\"># spec/features/*.rb\nfeature 'Signing in' do\n given(:something) { \"hi\" }\n\n background do\n User.make email: 'hi@gmail.com'\n end\n\n scenario 'Signing in with credentials' do\n end\nend\n</code></pre>\n\n<h3 id=\"matchers\">Matchers</h3>\n\n<pre><code class=\"language-rb\">be_a_new(Widget) # new_record?\nrender_template(\"new\")\nrender_template(partial: 'form', locals: {...})\nredirect_to(widgets_path)\nroute_to(..)\nbe_routable\nhave_http_status(500)\nhave_http_status(:created)\n</code></pre>\n\n<h3 id=\"time-helpers\">Time helpers</h3>\n\n<pre><code>travel_to Time.new(2014, 11, 14, 01, 04, 44)\n...\ntravel_back\n\ntravel_to Time.new(2014, 11, 14, 01, 04, 44) do\n ...\nend\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rspec",
"title": "RSpec",
"url": "/rspec",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"invoking-tests\">Invoking tests</h3>\n\n<pre><code class=\"language-sh\">rake -T spec # List spec tasks\n\nrake spec # Run all\n\nrake spec/models/mymodel_spec.rb\nrake spec/models/mymodel_spec.rb:27\n</code></pre>\n\n<h2 id=\"writing-tests\">Writing tests</h2>\n\n<pre><code class=\"language-rb\">describe \"A User (in general)\" do\n include UserSpecHelper\n\n subject { Person.new }\n\n let(:admin) { Person.new(role: :admin) }\n\n context \"setter methods\" do\n it \"should do this\" do\n pending \"some other thing\"\n\n expect(subject.name).to eq 'x'\n end\n end\nend\n</code></pre>\n\n<h3 id=\"beforeafter\">Before/after</h3>\n\n<pre><code class=\"language-rb\">before :each do\n # before all tests\nend\n\nbefore do\n # before this suite\nend\n\nafter do\n # after this suite\nend\n</code></pre>\n\n<h3 id=\"subjects\">Subjects</h3>\n\n<pre><code class=\"language-rb\">subject { CheckingAccount.new }\nit { is_expected.to be_empty }\n\n# also names: subject(:account) { ... }\n</code></pre>\n\n<h2 id=\"expectations\">Expectations</h2>\n\n<pre><code class=\"language-rb\">target.should eq 1\ntarget.should_not eq 1\n\nexpect(target).to eq 1\nexpect(target).not_to eq 1\n</code></pre>\n\n<h3 id=\"numeric\">Numeric</h3>\n\n<pre><code class=\"language-rb\">expect(5).to be &lt; 6\nexpect(5).to == 5\nexpect(5).to equal value\nexpect(5).to be_between(1, 10)\nexpect(5).to be_within(0.05).of value\n</code></pre>\n\n<h3 id=\"comparison\">Comparison</h3>\n\n<pre><code class=\"language-rb\">expect(x).to be value\nexpect(x).to satisfy { |arg| ... }\nexpect(x).to match /regexp/\n</code></pre>\n\n<h3 id=\"predicate\">Predicate</h3>\n\n<pre><code class=\"language-rb\">expect(x).to be_zero # FixNum#zero?\nexpect(x).to be_empty # Array#empty?\nexpect(x).to have_key # Hash#has_key?\n</code></pre>\n\n<h3 id=\"objects\">Objects</h3>\n\n<pre><code class=\"language-rb\">expect(obj).to be_an_instance_of MyClass\nexpect(obj).to be_a_kind_of MyClass\nexpect(obj).to respond_to :save!\n</code></pre>\n\n<h3 id=\"control-flow\">Control flow</h3>\n\n<pre><code class=\"language-rb\">expect { user.save! }.to raise_error\nexpect { user.save! }.to raise_error(ExceptionName, /msg/)\nexpect { user.save! }.to throw :symbol\n</code></pre>\n\n<h3 id=\"enumerablesarrays\">Enumerables/arrays</h3>\n\n<pre><code class=\"language-rb\">expect(list).to include(&lt;object&gt;)\n\nexpect(list).to have(1).things\nexpect(list).to have_at_least(2).things\nexpect(list).to have_at_most(3).things\n\nexpect(list).to have(2).errors_on(:field)\n</code></pre>\n\n<h3 id=\"change\">Change</h3>\n\n<pre><code class=\"language-rb\">expect { thing.approve! }.to \\\n change(thing, :status)\n .from(Status::AWAITING_APPROVAL)\n .to(Status::APPROVED)\n\nexpect { thing.destroy }.to \\\n change(Thing, :count)\n .by(-1)\n</code></pre>\n\n<h2 id=\"doubles\">Doubles</h2>\n\n<pre><code class=\"language-rb\">book = double('book')\nbook = instance_double('Book', pages: 250)\n</code></pre>\n\n<h3 id=\"method-stubs\">Method stubs</h3>\n\n<pre><code class=\"language-rb\">allow(die).to receive(:roll)\nallow(die).to receive(:roll) { 3 }\nallow_any_instance_of(Die).to receive(:roll)\n\nexpect(die).to receive(:roll)\n .with(1)\n .with(1, true)\n .with(boolean)\n .with(anything)\n .with(any_args)\n .with(1, any_args)\n .with(no_args)\n .with(hash_including(a: 1))\n .with(hash_excluding(a: 1))\n .with(array_including(:a, :b))\n .with(array_excluding(:a, :b))\n .with(instance_of(Fixnum))\n .with(kind_of(Numeric))\n .with(&lt;matcher&gt;)\n\n .once\n .twice\n .exactly(n).times\n .at_least(:once)\n .at_least(:twice)\n .at_least(n).times\n .at_most(:once)\n .at_most(:twice)\n .at_most(n).times\n</code></pre>\n\n<p>https://relishapp.com/rspec/rspec-mocks/docs</p>\n\n<h2 id=\"spec-helpers\">Spec helpers</h2>\n\n<pre><code class=\"language-rb\">module UserSpecHelper\n def valid_user_attributes\n { :email =&gt; \"joe@bloggs.com\",\n :username =&gt; \"joebloggs\",\n :password =&gt; \"abcdefg\"}\n end\nend\n</code></pre>\n\n<pre><code class=\"language-rb\">describe User do\n include UserSpecHelper\n\n ...\nend\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rst",
"title": "ReStructuredText",
"url": "/rst",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"comments\">Comments</h3>\n\n<pre><code>.. @theme 2010\n.. include:: ../themes/2010/common.rst\n.. contents::\n.. |substitute| replace:: replacement name\n</code></pre>\n\n<h3 id=\"headings\">Headings</h3>\n\n<pre><code>Heading\n=======\n\n.. class:: brief\n\nHello there. |substitute| **This is bold**\n\n\n - Bullet list with a link_ (or `link with words`_)\n - Yes\n\n.. _link: http://link.org\n</code></pre>\n\n<h3 id=\"pdf-page-break\">PDF page break</h3>\n\n<pre><code>.. raw:: pdf\n\n PageBreak oneColumn\n</code></pre>\n\n<h3 id=\"link-targets\">Link targets</h3>\n\n<pre><code>Internal link target_.\n\n.. _target:\n\nThis is where _target will end up in.\n</code></pre>\n\n<h3 id=\"tables-\">Tables (?)</h3>\n\n<pre><code>.. class:: hash-table\n\n.. list-table::\n\n * - :key:`Cuisine:`\n - :val:`French/fusion`\n * - :key:`Number of ingredients:`\n - :val:`8`\n * - :key:`Preparation time:`\n - :val:`30 hours`\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rsync",
"title": "Rsync",
"url": "/rsync",
"category": "CLI",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"basic-example\">Basic example</h3>\n\n<pre><code class=\"language-bash\"># syncing folder src into dest:\nrsync -avz ./src /dest\n# syncing the content of src into dest:\nrsync -avz ./src/ /dest\n</code></pre>\n\n<h3 id=\"osx\">OSX</h3>\n\n<pre><code class=\"language-bash\">--exclude '.Trashes'\n--exclude '.Spotlight-V100'\n--exclude '.fseventsd'\n</code></pre>\n\n<h3 id=\"transfer-options\">Transfer options</h3>\n\n<pre><code class=\"language-bash\">-z, --compress\n-n, --dry-run\n --partial # allows resuming of aborted syncs\n --bwlimit=RATE # limit socket I/O bandwidth\n</code></pre>\n\n<h3 id=\"display-options\">Display options</h3>\n\n<pre><code class=\"language-bash\">-q, --quiet\n-v, --verbose\n --stats\n-h, --human-readable\n --progress\n-P # same as --partial --progress\n</code></pre>\n\n<h3 id=\"skipping-options\">Skipping options</h3>\n\n<pre><code class=\"language-bash\">-u, --update # skip files newer on dest\n-c, --checksum # skip based on checksum, not mod-time &amp; size\n</code></pre>\n\n<h3 id=\"backup-options\">Backup options</h3>\n\n<pre><code class=\"language-bash\">-b, --backup # backup with suffix\n --suffix=SUFFIX # default ~ without --backup-dir\n --backup-dir=DIR\n</code></pre>\n\n<h3 id=\"include-options\">Include options</h3>\n\n<pre><code class=\"language-bash\">--exclude=PATTERN\n--include=PATTERN\n</code></pre>\n\n<pre><code class=\"language-bash\">--exclude-from=FILE\n--include-from=FILE\n--files-from=FILE # read list of filenames from FILE\n</code></pre>\n\n<pre><code class=\"language-bash\">-C, --cvs-exclude # exclude from local/global .cvsignore\n</code></pre>\n\n<h3 id=\"archive-options\">Archive options</h3>\n\n<pre><code class=\"language-bash\">-a, --archive # archive (-rlptgoD)\n</code></pre>\n\n<pre><code class=\"language-bash\">-r, --recursive\n-l, --links # copy symlinks as links\n-p, --perms # preserve permissions\n-t, --times # preserve times\n-g, --group # preserve group\n-o, --owner # preserve owner\n-D # --devices --specials\n</code></pre>\n\n<pre><code class=\"language-bash\">--delete # Delete extra files\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rtorrent",
"title": "rTorrent",
"url": "/rtorrent",
"category": "CLI",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"global\">Global</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^q</code></td>\n <td>Quit</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"main-view\">Main view</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>bksp</code></td>\n <td>Add torrent</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-&gt;</code></td>\n <td>View download</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>1</code> <em>-</em> <code>7</code></td>\n <td>Change view</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^S</code></td>\n <td>Start download</td>\n </tr>\n <tr>\n <td><code>^D</code></td>\n <td>Stop download (or remove stopped)</td>\n </tr>\n <tr>\n <td><code>^K</code></td>\n <td>Close a torrent</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>+</code> <em>/</em> <code>-</code></td>\n <td>Change priority</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"throttling\">Throttling</h3>\n\n<h4 id=\"upload\">Upload</h4>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>a</code> <em>/</em> <code>s</code> <em>/</em> <code>d</code></td>\n <td>Increase upload throttle by 1/5/50 KB</td>\n </tr>\n <tr>\n <td><code>z</code> <em>/</em> <code>x</code> <em>/</em> <code>c</code></td>\n <td>Decrease upload throttle by 1/5/50 KB</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"download\">Download</h4>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>A</code> <em>/</em> <code>S</code> <em>/</em> <code>D</code></td>\n <td>Increase download throttle by 1/5/50 KB</td>\n </tr>\n <tr>\n <td><code>Z</code> <em>/</em> <code>X</code> <em>/</em> <code>C</code></td>\n <td>Decrease download throttle by 1/5/50 KB</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"download-view\">Download view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>1</code> <em>/</em> <code>2</code></td>\n <td>Adjust max uploads</td>\n </tr>\n <tr>\n <td><code>3</code> <em>/</em> <code>4</code></td>\n <td>Adjust min peers</td>\n </tr>\n <tr>\n <td><code>5</code> <em>/</em> <code>6</code></td>\n <td>Adjust max peers</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"file-list-view\">File list view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>space</code></td>\n <td>Change priority</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://rakshasa.github.io/rtorrent/\">rTorrent website</a> <em>(rakshasa.github.io)</em></li>\n <li><a href=\"https://github.com/rakshasa/rtorrent/wiki\">rTorrent wiki</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://rakshasa.github.io/rtorrent/\">rTorrent</a> is a command-line torrent application. Here are some shortcut keys.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rubiks",
"title": "Rubiks cube",
"url": "/rubiks",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"getting-the-cross\">Getting the cross</h3>\n\n<ul>\n <li>L (N W C)</li>\n <li>line (E C W)</li>\n <li>cross (N E W S C)</li>\n</ul>\n\n<p><code>F R U R' U' F'</code></p>\n\n<h3 id=\"aligning-the-crosss-sides\">Aligning the cross’s sides</h3>\n\n<ul>\n <li>Nothing aligned</li>\n <li>line (N C S)</li>\n <li>L (N C E)</li>\n <li>All are aligned</li>\n</ul>\n\n<p><code>R U R' U R 2U R'</code></p>\n\n<h3 id=\"aligning-the-corners\">Aligning the corners</h3>\n\n<ul>\n <li>0 spots ok</li>\n <li>1 spot ok in south-east</li>\n <li>4 spots ok: proceed</li>\n</ul>\n\n<p><code>U R U' L' U R' U' L</code></p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ruby",
"title": "Ruby",
"url": "/ruby",
"category": "Ruby",
"keywords": null,
"content_html": "<ul>\n <li><code>$!</code> - latest error message</li>\n <li><code>$@</code> - location of error</li>\n <li><code>$_</code> - string last read by gets</li>\n <li><code>$.</code> - line number last read by interpreter</li>\n <li><code>$&amp;</code> - string last matched by regexp</li>\n <li><code>$~</code> - the last regexp match, as an array of subexpressions</li>\n <li><code>$n</code> - the nth subexpression in the last match (same as <code>$~[n]</code>)</li>\n <li><code>$=</code> - case-insensitivity flag</li>\n <li><code>$/</code> - input record separator</li>\n <li><code>$\\</code> - output record separator</li>\n <li><code>$0</code> - the name of the ruby script file</li>\n <li><code>$*</code> (or <code>ARGV</code>) - the command line arguments</li>\n <li><code>$$</code> - interpreter’s process ID</li>\n <li><code>$?</code> - exit status of last executed child process</li>\n <li><code>$-i</code> <code>$-l</code> <code>$-p</code> <code>$-v</code> - Command line switches</li>\n <li><code>$-v</code> (or <code>$VERBOSE</code>) - verbose mode</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ruby21",
"title": "Ruby 2.1",
"url": "/ruby21",
"category": "Ruby",
"keywords": null,
"content_html": "<h3 id=\"named-arguments-with-defaults\">Named arguments with defaults</h3>\n\n<pre><code># length is required\ndef pad(num, length:, char: \"0\")\n num.to_s.rjust(length, char)\nend\n\npad(42, length: 6) #=&gt; \"000042\"\npad(42) #=&gt; #&lt;ArgumentError: missing keyword: length&gt;\n</code></pre>\n\n<h3 id=\"moduleprepend\">Module.prepend</h3>\n\n<pre><code>prepend(Module.new do\n define_method ...\nend)\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://globaldev.co.uk/2013/03/ruby-2-0-0-in-detail</li>\n <li>http://globaldev.co.uk/2014/05/ruby-2-1-in-detail</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "rubygems",
"title": "Rubygems",
"url": "/rubygems",
"category": "Ruby",
"keywords": null,
"content_html": "<pre><code>gem build *.gemspec # Build a gem\ngem install *.gem # Install locally\ngem push *.gem # Upload to rubygems.org\ngem yank foogem -v 0.0.1 # Take it back\n\ngem owner foogem -a rico@ricostacruz.com\n\ngem list # List local gems\ngem which rake # Point to where lib/rake.rb is\ngem search -r rails # [remote] Search for gems\n\n# https://github.com/fnando/gem-open\ngem open foogem\nGEM_EDITOR=\"vim\" gem open foogem\n\ncd $(basename `gem which rake`) # Go to a gem's path\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sass",
"title": "Sass",
"url": "/sass",
"category": "CSS",
"keywords": ["Variables","mixins","darken()","adjust-color()","@for @each @while @if @else","$list: (a b c)","$map: (a: b, c: d)"],
"content_html": "<h2 class=\"-three-column\" id=\"basics\">Basics</h2>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre><code class=\"language-scss\">$red: #833;\n</code></pre>\n\n<pre><code class=\"language-scss\">body {\n color: $red;\n}\n</code></pre>\n\n<h3 id=\"nesting\">Nesting</h3>\n\n<pre><code class=\"language-scss\">.markdown-body {\n p {\n color: blue;\n }\n\n &amp;:hover {\n color: red;\n }\n}\n</code></pre>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code class=\"language-scss\">/* Block comments */\n// Line comments\n</code></pre>\n\n<h3 id=\"mixins\">Mixins</h3>\n\n<pre><code class=\"language-scss\">@mixin heading-font {\n font-family: sans-serif;\n font-weight: bold;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">h1 {\n @include heading-font;\n}\n</code></pre>\n\n<h4 id=\"with-parameters\">with parameters</h4>\n\n<pre><code class=\"language-scss\">@mixin font-size($n) {\n font-size: $n * 1.2em;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">body {\n @include font-size(2);\n}\n</code></pre>\n\n<h4 id=\"with-default-values\">with default values</h4>\n\n<pre><code class=\"language-scss\">@mixin pad($n: 10px) {\n padding: $n;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">body {\n @include pad(15px);\n}\n</code></pre>\n\n<h4 id=\"with-a-default-variable\">with a default variable</h4>\n\n<pre><code class=\"language-scss\">// Set a default value\n$default-padding: 10px;\n</code></pre>\n\n<pre><code class=\"language-scss\">@mixin pad($n: $default-padding) {\n padding: $n;\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">body {\n @include pad(15px);\n}\n</code></pre>\n\n<h3 id=\"extend\">Extend</h3>\n\n<pre><code class=\"language-scss\">.button {\n ···\n}\n</code></pre>\n\n<pre><code class=\"language-scss\">.push-button {\n @extend .button;\n}\n</code></pre>\n\n<h3 id=\"composing\">Composing</h3>\n\n<pre><code class=\"language-scss\">@import './other_sass_file`;\n</code></pre>\n\n<p>The <code>.scss</code> or <code>.sass</code> extension is optional.</p>\n\n<h2 id=\"color-functions\">Color functions</h2>\n\n<h3 id=\"rgba\">rgba</h3>\n\n<pre><code class=\"language-scss\">rgb(100, 120, 140)\nrgba(100, 120, 140, .5)\nrgba($color, .5)\n</code></pre>\n\n<h3 id=\"mixing\">Mixing</h3>\n\n<pre><code class=\"language-scss\">mix($a, $b, 10%) // 10% a, 90% b\n</code></pre>\n\n<h3 id=\"modifying-hsla\">Modifying HSLA</h3>\n\n<pre><code class=\"language-scss\">darken($color, 5%)\nlighten($color, 5%)\n</code></pre>\n\n<pre><code class=\"language-scss\">saturate($color, 5%)\ndesaturate($color, 5%)\ngrayscale($color)\n</code></pre>\n\n<pre><code class=\"language-scss\">adjust-hue($color, 15deg)\ncomplement($color) // like adjust-hue(_, 180deg)\ninvert($color)\n</code></pre>\n\n<pre><code class=\"language-scss\">fade-in($color, .5) // aka opacify()\nfade-out($color, .5) // aka transparentize() - halves the opacity\nrgba($color, .5) // sets alpha to .5\n</code></pre>\n\n<h3 id=\"getting-individual-values\">Getting individual values</h3>\n\n<h4 id=\"hsla\">HSLA</h4>\n\n<pre><code class=\"language-scss\">hue($color) // → 0deg..360deg\nsaturation($color) // → 0%..100%\nlightness($color) // → 0%..100%\nalpha($color) // → 0..1 (aka opacity())\n</code></pre>\n\n<h4 id=\"rgb\">RGB</h4>\n\n<pre><code>red($color) // → 0..255\ngreen($color)\nblue($color)\n</code></pre>\n\n<p>See: <a href=\"http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method\">hue()</a>, <a href=\"http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method\">red()</a></p>\n\n<h3 id=\"adjustments\">Adjustments</h3>\n\n<pre><code class=\"language-scss\">// Changes by fixed amounts\nadjust-color($color, $blue: 5)\nadjust-color($color, $lightness: -30%) // like darken(_, 30%)\nadjust-color($color, $alpha: -0.4) // like fade-out(_, .4)\nadjust-color($color, $hue: 30deg) // like adjust-hue(_, 15deg)\n</code></pre>\n\n<pre><code class=\"language-scss\">// Changes via percentage\nscale-color($color, $lightness: 50%)\n</code></pre>\n\n<pre><code class=\"language-scss\">// Changes one property completely\nchange-color($color, $hue: 180deg)\nchange-color($color, $blue: 250)\n</code></pre>\n\n<p>Supported: <code>$red</code> <code>$green</code> <code>$blue</code> <code>$hue</code> <code>$saturation</code> <code>$lightness</code> <code>$alpha</code></p>\n\n<h2 id=\"other-functions\">Other functions</h2>\n\n<h3 id=\"strings\">Strings</h3>\n\n<pre><code class=\"language-scss\">unquote('hello')\nquote(hello)\n</code></pre>\n\n<pre><code class=\"language-scss\">to-upper-case(hello)\nto-lower-case(hello)\n</code></pre>\n\n<pre><code class=\"language-scss\">str-length(hello world)\nstr-slice(hello, 2, 5) // \"ello\" - it's 1-based, not 0-based\nstr-insert(\"abcd\", \"X\", 1) // \"Xabcd\"\n</code></pre>\n\n<h3 id=\"units\">Units</h3>\n\n<pre><code class=\"language-scss\">unit(3em) // 'em'\nunitless(100px) // false\n</code></pre>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre><code class=\"language-scss\">floor(3.5)\nceil(3.5)\nround(3.5)\nabs(3.5)\n</code></pre>\n\n<pre><code class=\"language-scss\">min(1, 2, 3)\nmax(1, 2, 3)\n</code></pre>\n\n<pre><code class=\"language-scss\">percentage(.5) // 50%\nrandom(3) // 0..3\n</code></pre>\n\n<h3 id=\"misc\">Misc</h3>\n\n<pre><code class=\"language-scss\">variable-exists(red) // checks for $red\nmixin-exists(red-text) // checks for @mixin red-text\nfunction-exists(redify)\n</code></pre>\n\n<pre><code class=\"language-scss\">global-variable-exists(red)\n</code></pre>\n\n<pre><code class=\"language-scss\">selector-append('.menu', 'li', 'a') // .menu li a\nselector-nest('.menu', '&amp;:hover li') // .menu:hover li\nselector-extend(...)\nselector-parse(...)\nselector-replace(...)\nselector-unify(...)\n</code></pre>\n\n<h2 id=\"feature-checks\">Feature checks</h2>\n\n<h3 id=\"feature-check\">Feature check</h3>\n\n<pre><code class=\"language-scss\">feature-exists(global-variable-shadowing)\n</code></pre>\n\n<h3 id=\"features\">Features</h3>\n\n<ul>\n <li>global-variable-shadowing</li>\n <li>extend-selector-pseudoclass</li>\n <li>units-level-3</li>\n <li>at-error</li>\n</ul>\n\n<h2 id=\"loops\">Loops</h2>\n\n<h3 id=\"for-loops\">For loops</h3>\n\n<pre><code class=\"language-scss\">@for $i from 1 through 4 {\n .item-#{$i} { left: 20px * $i; }\n}\n</code></pre>\n\n<h3 id=\"each-loops-simple\">Each loops (simple)</h3>\n\n<pre><code class=\"language-scss\">$menu-items: home about services contact;\n\n@each $item in $menu-items {\n .photo-#{$item} {\n background: url('images/#{$item}.jpg');\n }\n}\n</code></pre>\n\n<h3 id=\"each-loops-nested\">Each loops (nested)</h3>\n<pre><code class=\"language-scss\">$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');\n\n@each $id, $image in $backgrounds {\n .photo-#{$id} {\n background: url($image);\n }\n}\n</code></pre>\n\n<h3 id=\"while-loops\">While loops</h3>\n\n<pre><code class=\"language-scss\">$i: 6;\n@while $i &gt; 0 {\n .item-#{$i} { width: 2em * $i; }\n $i: $i - 2;\n}\n</code></pre>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre><code class=\"language-scss\">@if $position == 'left' {\n position: absolute;\n left: 0;\n}\n@else {\n position: static;\n}\n</code></pre>\n\n<h3 id=\"interpolation\">Interpolation</h3>\n\n<pre><code class=\"language-scss\">.#{$klass} { ... } // Class\ncall($function-name) // Functions\n\n@media #{$tablet}\nfont: #{$size}/#{$line-height}\nurl(\"#{$background}.jpg\")\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-scss\">$list: (a b c);\n\nnth($list, 1) // starts with 1\nlength($list)\n\n@each $item in $list { ... }\n</code></pre>\n\n<h3 id=\"maps\">Maps</h3>\n\n<pre><code class=\"language-scss\">$map: (key1: value1, key2: value2, key3: value3);\n\nmap-get($map, key1)\n</code></pre>\n\n<h2 class=\"-one-column\" id=\"see-also\">See also</h2>\n\n<ul>\n <li><a href=\"http://sass-lang.com/documentation/Sass/Script/Functions.html\">http://sass-lang.com/documentation/Sass/Script/Functions.html</a></li>\n <li><a href=\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript\">http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": ["Featured"],
"updated": "2017-08-26"
},{
"id": "saucelabs",
"title": "Saucelabs",
"url": "/saucelabs",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"getting-started\">Getting started</h3>\n\n<p class=\"-setup\">Sign up for opensauce:</p>\n\n<ul>\n <li>http://saucelabs.com/opensauce</li>\n</ul>\n\n<p>Install <a href=\"https://npmjs.com/package/zuul\">zuul</a>:</p>\n\n<pre><code>npm i -g zuul\n</code></pre>\n\n<p>Configure zuul:</p>\n\n<pre><code class=\"language-yml\"># ~/.zuulrc\nsauce_username: me\nsauce_key: abc12348-e3e2-...\n</code></pre>\n\n<p>Add <code>.zuul.yml</code> to your project:</p>\n\n<pre><code class=\"language-yml\"># .zuul.yml\nui: mocha-bdd\nbrowsers:\n - name: chrome\n version: latest\n - name: ie\n version: 6..latest\n - name: firefox\n version: latest\n</code></pre>\n\n<p>Try to run tests:</p>\n\n<pre><code>zuul test/test.js\nzuul --local test/test.js\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "scp",
"title": "scp",
"url": "/scp",
"category": "CLI",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-bash\">scp &lt;options&gt; source_path destination_path\n</code></pre>\n\n<h3 id=\"conditions\">Conditions</h3>\n\n<pre><code class=\"language-bash\">-r # transfer directory \n-v # see the transfer details\n-C # copy files with compression\n-l 800 # limit bandwith with 800\n-p # preserving the original attributes of the copied files\n-q # hidden the output\n</code></pre>\n\n<h3 id=\"commands\">Commands</h3>\n\n<pre><code class=\"language-bash\">$ scp file user@host:/path/to/file # copying a file to the remote system using scp command\n$ scp user@host:/path/to/file /local/path/to/file # copying a file from the remote system using scp command\n</code></pre>\n\n<pre><code class=\"language-bash\">$ scp file1 file2 user@host:/path/to/directory # copying multiple files using scp command\n$ scp -r /path/to/directory user@host:/path/to/directory # Copying an entire directory with scp command\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-12-25"
},{
"id": "sed",
"title": "sed",
"url": "/sed",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"in-place-replacements\">In place replacements</h3>\n\n<h4 id=\"in-gnu-sed-use--i-without-arg\">In GNU sed: use <code>-i</code> without arg.</h4>\n\n<pre><code class=\"language-bash\">sed -i -e 's/foo/bar/' example.md\n</code></pre>\n\n<h4 id=\"in-osx--i--is-required\">In OSX, <code>-i ''</code> is required.</h4>\n\n<pre><code class=\"language-bash\">sed -i '' -e 's/foo/bar/' example.md\n</code></pre>\n\n<h3 id=\"file-regions\">File regions</h3>\n\n<h4 id=\"print-until-a-certain-line-is-met\">Print until a certain line is met</h4>\n\n<pre><code class=\"language-bash\">sed '/begin api/q'\n</code></pre>\n\n<h4 id=\"print-until-a-certain-line-is-met-but-not-that-line\">Print until a certain line is met, but not that line</h4>\n\n<pre><code class=\"language-bash\">sed '/^# begin/,$d'\n</code></pre>\n\n<h4 id=\"print-everything-after-a-given-line\">Print everything after a given line</h4>\n\n<pre><code class=\"language-bash\">sed -n '/end api/,$p'\n</code></pre>",
"intro_html": "<p>Here’s some hints on using sed.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "semver",
"title": "Semver",
"url": "/semver",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"semver\">Semver</h3>\n\n<p class=\"-setup\">Given a version number <code>MAJOR.MINOR.PATCH</code>:</p>\n\n<table>\n <tbody>\n <tr>\n <td><code>MAJOR</code></td>\n <td>incompatible API changes</td>\n </tr>\n <tr>\n <td><code>MINOR</code></td>\n <td>add functionality (backwards-compatible)</td>\n </tr>\n <tr>\n <td><code>PATCH</code></td>\n <td>bug fixes (backwards-compatible)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"simple-ranges\">Simple ranges</h3>\n\n<pre><code> 1.2.3\n =1.2.3\n &gt;1.2.3\n &lt;1.2.3\n&gt;=1.2.3\n</code></pre>\n\n<p>Note that suffixed versions (<code>1.2.3-rc1</code>) are not matched.</p>\n\n<h3 id=\"ranges\">Ranges</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Range</th>\n <th>Description</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>~1.2.3</code></td>\n <td>is <code>&gt;=1.2.3 &lt;1.3.0</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^1.2.3</code></td>\n <td>is <code>&gt;=1.2.3 &lt;2.0.0</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>^0.2.3</code></td>\n <td>is <code>&gt;=0.2.3 &lt;0.3.0</code></td>\n <td>(0.x.x is special)</td>\n </tr>\n <tr>\n <td><code>^0.0.1</code></td>\n <td>is <code>=0.0.1</code></td>\n <td>(0.0.x is special)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^1.2</code></td>\n <td>is <code>&gt;=1.2.0 &lt;2.0.0</code></td>\n <td>(like ^1.2.0)</td>\n </tr>\n <tr>\n <td><code>~1.2</code></td>\n <td>is <code>&gt;=1.2.0 &lt;1.3.0</code></td>\n <td>(like ~1.2.0)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^1</code></td>\n <td>is <code>&gt;=1.0.0 &lt;2.0.0</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>~1</code></td>\n <td>same</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>1.x</code></td>\n <td>same</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>1.*</code></td>\n <td>same</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>1</code></td>\n <td>same</td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>*</code></td>\n <td>any version</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>x</code></td>\n <td>same</td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"hyphenated-ranges\">Hyphenated ranges</h3>\n\n<table>\n <thead>\n <tr>\n <th>Range</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>1.2.3 - 2.3.4</code></td>\n <td>is <code>&gt;=1.2.3 &lt;=2.3.4</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"partial-right\">Partial right</h4>\n\n<table>\n <thead>\n <tr>\n <th>Range</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>1.2.3 - 2.3</code></td>\n <td>is <code>&gt;=1.2.3 &lt;2.4.0</code></td>\n </tr>\n <tr>\n <td><code>1.2.3 - 2</code></td>\n <td>is <code>&gt;=1.2.3 &lt;3.0.0</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"partial-left\">Partial left</h4>\n\n<table>\n <thead>\n <tr>\n <th>Range</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>1.2 - 2.3.0</code></td>\n <td>is <code>1.2.0 - 2.3.0</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>When the right is partial (eg, <code>2.3</code>), missing pieces are assumed to be <code>x</code> (eg, <code>2.3.x</code>).</p>\n\n<p>When the left is partial (eg, <code>1.2</code>), missing pieces are assumed to be <code>0</code> (eg, <code>1.2.0</code>).</p>\n\n<h3 id=\"combining-ranges\">Combining ranges</h3>\n\n<table>\n <thead>\n <tr>\n <th>Range</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&gt;=0.14 &lt;16</code></td>\n <td>And (space-separated)</td>\n </tr>\n <tr>\n <td><code>0.14.x || 15.x.x</code></td>\n <td>Or (pipe-separated)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"pre-releases\">Pre-releases</h3>\n\n<pre><code>1.2.3-prerelease+build\n</code></pre>\n\n<h3 id=\"explanation\">Explanation</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^</code></td>\n <td>means “compatible with”</td>\n </tr>\n <tr>\n <td><code>~</code></td>\n <td>means “reasonably close to”</td>\n </tr>\n <tr>\n <td><code>0.x.x</code></td>\n <td>is for “initial development”</td>\n </tr>\n <tr>\n <td><code>1.x.x</code></td>\n <td>means public API is defined</td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://semver.org/\">http://semver.org/</a></li>\n <li><a href=\"https://docs.npmjs.com/misc/semver\">https://docs.npmjs.com/misc/semver</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2018-08-23"
},{
"id": "sequel",
"title": "Sequel",
"url": "/sequel",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"open-a-database\">Open a database</h3>\n\n<pre><code>require 'rubygems'\nrequire 'sequel'\n\nDB = Sequel.sqlite('my_blog.db')\nDB = Sequel.connect('postgres://user:password@localhost/my_db')\nDB = Sequel.postgres('my_db', :user =&gt; 'user', :password =&gt; 'password', :host =&gt; 'localhost')\nDB = Sequel.ado('mydb')\n</code></pre>\n\n<h3 id=\"open-an-sqlite-memory-database\">Open an SQLite memory database</h3>\n\n<p>Without a filename argument, the sqlite adapter will setup a new sqlite database in memory.</p>\n\n<pre><code>DB = Sequel.sqlite\n</code></pre>\n\n<h3 id=\"logging-sql-statements\">Logging SQL statements</h3>\n\n<pre><code>require 'logger'\nDB = Sequel.sqlite '', :loggers =&gt; [Logger.new($stdout)]\n# or\nDB.loggers &lt;&lt; Logger.new(...)\n</code></pre>\n\n<h3 id=\"using-raw-sql\">Using raw SQL</h3>\n\n<pre><code>DB.run \"CREATE TABLE users (name VARCHAR(255) NOT NULL, age INT(3) NOT NULL)\"\ndataset = DB[\"SELECT age FROM users WHERE name = ?\", name]\ndataset.map(:age)\nDB.fetch(\"SELECT name FROM users\") do |row|\n p row[:name]\nend\n</code></pre>\n\n<h3 id=\"create-a-dataset\">Create a dataset</h3>\n\n<pre><code>dataset = DB[:items]\ndataset = DB.from(:items)\n</code></pre>\n\n<h3 id=\"most-dataset-methods-are-chainable\">Most dataset methods are chainable</h3>\n\n<pre><code>dataset = DB[:managers].where(:salary =&gt; 5000..10000).order(:name, :department)\n</code></pre>\n\n<h3 id=\"insert-rows\">Insert rows</h3>\n\n<pre><code>dataset.insert(:name =&gt; 'Sharon', :grade =&gt; 50)\n</code></pre>\n\n<h3 id=\"retrieve-rows\">Retrieve rows</h3>\n\n<pre><code>dataset.each{|r| p r}\ndataset.all # =&gt; [{...}, {...}, ...]\ndataset.first # =&gt; {...}\n</code></pre>\n\n<h3 id=\"updatedelete-rows\">Update/Delete rows</h3>\n\n<pre><code>dataset.filter(~:active).delete\ndataset.filter('price &lt; ?', 100).update(:active =&gt; true)\n</code></pre>\n\n<h3 id=\"datasets-are-enumerable\">Datasets are Enumerable</h3>\n\n<pre><code>dataset.map{|r| r[:name]}\ndataset.map(:name) # same as above\n\ndataset.inject(0){|sum, r| sum + r[:value]}\ndataset.sum(:value) # same as above\n</code></pre>\n\n<h3 id=\"filtering-see-also-docdataset_filteringrdoc\">Filtering (see also doc/dataset_filtering.rdoc)</h3>\n\n<h4 id=\"equality\">Equality</h4>\n\n<pre><code>dataset.filter(:name =&gt; 'abc')\ndataset.filter('name = ?', 'abc')\n</code></pre>\n\n<h4 id=\"inequality\">Inequality</h4>\n\n<pre><code>dataset.filter{value &gt; 100}\ndataset.exclude{value &lt;= 100}\n</code></pre>\n\n<h4 id=\"inclusion\">Inclusion</h4>\n\n<pre><code>dataset.filter(:value =&gt; 50..100)\ndataset.where{(value &gt;= 50) &amp; (value &lt;= 100)}\n\ndataset.where('value IN ?', [50,75,100])\ndataset.where(:value=&gt;[50,75,100])\n\ndataset.where(:id=&gt;other_dataset.select(:other_id))\n</code></pre>\n\n<h4 id=\"subselects-as-scalar-values\">Subselects as scalar values</h4>\n\n<pre><code>dataset.where('price &gt; (SELECT avg(price) + 100 FROM table)')\ndataset.filter{price &gt; dataset.select(avg(price) + 100)}\n</code></pre>\n\n<h4 id=\"likeregexp\">LIKE/Regexp</h4>\n\n<pre><code>DB[:items].filter(:name.like('AL%'))\nDB[:items].filter(:name =&gt; /^AL/)\n</code></pre>\n\n<h4 id=\"andornot\">AND/OR/NOT</h4>\n\n<pre><code>DB[:items].filter{(x &gt; 5) &amp; (y &gt; 10)}.sql \n# SELECT * FROM items WHERE ((x &gt; 5) AND (y &gt; 10))\n\nDB[:items].filter({:x =&gt; 1, :y =&gt; 2}.sql_or &amp; ~{:z =&gt; 3}).sql \n# SELECT * FROM items WHERE (((x = 1) OR (y = 2)) AND (z != 3))\n</code></pre>\n\n<h4 id=\"mathematical-operators\">Mathematical operators</h4>\n\n<pre><code>DB[:items].filter((:x + :y) &gt; :z).sql \n# SELECT * FROM items WHERE ((x + y) &gt; z)\n\nDB[:items].filter{price - 100 &lt; avg(price)}.sql \n# SELECT * FROM items WHERE ((price - 100) &lt; avg(price))\n</code></pre>\n\n<h3 id=\"ordering\">Ordering</h3>\n\n<pre><code>dataset.order(:kind)\ndataset.reverse_order(:kind)\ndataset.order(:kind.desc, :name)\n</code></pre>\n\n<h3 id=\"limitoffset\">Limit/Offset</h3>\n\n<pre><code>dataset.limit(30) # LIMIT 30\ndataset.limit(30, 10) # LIMIT 30 OFFSET 10\n</code></pre>\n\n<h3 id=\"joins\">Joins</h3>\n\n<pre><code>DB[:items].left_outer_join(:categories, :id =&gt; :category_id).sql \n# SELECT * FROM items LEFT OUTER JOIN categories ON categories.id = items.category_id\n\nDB[:items].join(:categories, :id =&gt; :category_id).join(:groups, :id =&gt; :items__group_id) \n# SELECT * FROM items INNER JOIN categories ON categories.id = items.category_id INNER JOIN groups ON groups.id = items.group_id\n</code></pre>\n\n<h3 id=\"aggregate-functions-methods\">Aggregate functions methods</h3>\n\n<pre><code>dataset.count #=&gt; record count\ndataset.max(:price)\ndataset.min(:price)\ndataset.avg(:price)\ndataset.sum(:stock)\n\ndataset.group_and_count(:category)\ndataset.group(:category).select(:category, :AVG.sql_function(:price))\n</code></pre>\n\n<h3 id=\"sql-functions--literals\">SQL Functions / Literals</h3>\n\n<pre><code>dataset.update(:updated_at =&gt; :NOW.sql_function)\ndataset.update(:updated_at =&gt; 'NOW()'.lit)\n\ndataset.update(:updated_at =&gt; \"DateValue('1/1/2001')\".lit)\ndataset.update(:updated_at =&gt; :DateValue.sql_function('1/1/2001'))\n</code></pre>\n\n<h3 id=\"schema-manipulation\">Schema Manipulation</h3>\n\n<pre><code>DB.create_table :items do\n primary_key :id\n String :name, :unique =&gt; true, :null =&gt; false\n TrueClass :active, :default =&gt; true\n foreign_key :category_id, :categories\n DateTime :created_at\n \n index :created_at\nend\n\nDB.drop_table :items\n\nDB.create_table :test do\n String :zipcode\n enum :system, :elements =&gt; ['mac', 'linux', 'windows']\nend\n</code></pre>\n\n<h3 id=\"aliasing\">Aliasing</h3>\n\n<pre><code>DB[:items].select(:name.as(:item_name))\nDB[:items].select(:name___item_name)\nDB[:items___items_table].select(:items_table__name___item_name)\n# SELECT items_table.name AS item_name FROM items AS items_table\n</code></pre>\n\n<h3 id=\"transactions\">Transactions</h3>\n\n<pre><code>DB.transaction do\n dataset.insert(:first_name =&gt; 'Inigo', :last_name =&gt; 'Montoya')\n dataset.insert(:first_name =&gt; 'Farm', :last_name =&gt; 'Boy')\nend # Either both are inserted or neither are inserted\n</code></pre>\n\n<p>Database#transaction is re-entrant:</p>\n\n<pre><code>DB.transaction do # BEGIN issued only here\n DB.transaction\n dataset &lt;&lt; {:first_name =&gt; 'Inigo', :last_name =&gt; 'Montoya'}\n end\nend # COMMIT issued only here\n</code></pre>\n\n<p>Transactions are aborted if an error is raised:</p>\n\n<pre><code>DB.transaction do\n raise \"some error occurred\"\nend # ROLLBACK issued and the error is re-raised\n</code></pre>\n\n<p>Transactions can also be aborted by raising Sequel::Rollback:</p>\n\n<pre><code>DB.transaction do\n raise(Sequel::Rollback) if something_bad_happened\nend # ROLLBACK issued and no error raised\n</code></pre>\n\n<p>Savepoints can be used if the database supports it:</p>\n\n<pre><code>DB.transaction do\n dataset &lt;&lt; {:first_name =&gt; 'Farm', :last_name =&gt; 'Boy'} # Inserted\n DB.transaction(:savepoint=&gt;true) # This savepoint is rolled back\n dataset &lt;&lt; {:first_name =&gt; 'Inigo', :last_name =&gt; 'Montoya'} # Not inserted\n raise(Sequel::Rollback) if something_bad_happened\n end\n dataset &lt;&lt; {:first_name =&gt; 'Prince', :last_name =&gt; 'Humperdink'} # Inserted\nend\n</code></pre>\n\n<h3 id=\"miscellaneous\">Miscellaneous:</h3>\n\n<pre><code>dataset.sql # \"SELECT * FROM items\"\ndataset.delete_sql # \"DELETE FROM items\"\ndataset.where(:name =&gt; 'sequel').exists # \"EXISTS ( SELECT * FROM items WHERE name = 'sequel' )\"\ndataset.columns #=&gt; array of columns in the result set, does a SELECT\nDB.schema(:items) =&gt; [[:id, {:type=&gt;:integer, ...}], [:name, {:type=&gt;:string, ...}], ...]\n</code></pre>\n\n<hr />\n\n<h3 id=\"documents\">Documents</h3>\n\n<pre><code>http://sequel.rubyforge.org/rdoc/files/doc/association_basics_rdoc.html\nhttp://sequel.rubyforge.org/rdoc/classes/Sequel/Schema/Generator.html\nhttp://sequel.rubyforge.org/rdoc/files/doc/validations_rdoc.html\nhttp://sequel.rubyforge.org/rdoc/classes/Sequel/Model.html\n</code></pre>\n\n<h3 id=\"alter-table\">Alter table</h3>\n\n<pre><code>database.alter_table :deals do\n add_column :name, String\n drop_column :column_name\n rename_column :from, :to\n\n add_constraint :valid_name, :name.like('A%')\n drop_constraint :constraint\n\n add_full_text_index :body\n add_spacial_index [columns]\n\n add_index :price\n drop_index :index\n\n add_foreign_key :artist_id, :table\n add_primary_key :id\n add_unique_constraint [columns]\n set_column_allow_null :foo, false\n set_column_default :title, ''\n\n set_column_type :price, 'char(10)'\nend\n</code></pre>\n\n<h3 id=\"model-associations\">Model associations</h3>\n\n<pre><code>class Deal &lt; Sequel::Model\n\n # Us (left) &lt;=&gt; Them (right)\n many_to_many :images,\n left_id: :deal_id,\n right_id: :image_id,\n join_table: :image_links\n\n one_to_many :files,\n key: :deal_id,\n class: :DataFile,\n\n many_to_one :parent, class: self\n one_to_many :children, key: :parent_id, class: self\n\n one_to_many :gold_albums, class: :Album do |ds|\n ds.filter { copies_sold &gt; 50000 }\n end\n</code></pre>\n\n<p>Provided by many_to_many</p>\n\n<pre><code>Deal[1].images\nDeal[1].add_image\nDeal[1].remove_image\nDeal[1].remove_all_images\n</code></pre>\n\n<h3 id=\"validations\">Validations</h3>\n\n<pre><code> def validate\n super\n errors.add(:name, 'cannot be empty') if !name || name.empty?\n\n validates_presence [:title, :site]\n validates_unique :name\n validates_format /\\Ahttps?:\\/\\//, :website, :message=&gt;'is not a valid URL'\n validates_includes %w(a b c), :type\n validates_integer :rating\n validates_numeric :number\n validates_type String, [:title, :description]\n\n validates_integer :rating if new?\n\n # options: :message =&gt;, :allow_nil =&gt;, :allow_blank =&gt;,\n # :allow_missing =&gt;,\n\n validates_exact_length 17, :isbn\n validates_min_length 3, :name\n validates_max_length 100, :name\n validates_length_range 3..100, :name\n \n # Setter override\n def filename=(name)\n @values[:filename] = name\n end\n end\nend\n\ndeal.errors\n</code></pre>\n\n<h3 id=\"model-stuff\">Model stuff</h3>\n\n<pre><code>deal = Deal[1]\ndeal.changed_columns\ndeal.destroy # Calls hooks\ndeal.delete # No hooks\ndeal.exists?\ndeal.new?\ndeal.hash # Only uniques\ndeal.keys #=&gt; [:id, :name]\ndeal.modified!\ndeal.modified?\n\ndeal.lock!\n</code></pre>\n\n<h3 id=\"callbacks\">Callbacks</h3>\n\n<pre><code>before_create\nafter_create\n\nbefore_validation\nafter_validation\nbefore_save\nbefore_update\nUPDATE QUERY\nafter_update\nafter_save\n\nbefore_destroy\nDELETE QUERY\nafter_destroy\n</code></pre>\n\n<h3 id=\"schema\">Schema</h3>\n\n<pre><code>class Deal &lt; Sequel::Model\n set_schema do\n primary_key :id\n primary_key [:id, :title]\n String :name, primary_key: true\n \n String :title\n Numeric :price\n DateTime :expires\n\n unique :whatever\n check(:price) { num &gt; 0 }\n\n foreign_key :artist_id\n String :artist_name, key: :id\n\n index :title\n index [:artist_id, :name]\n full_text_index :title\n\n # String, Integer, Fixnum, Bignum, Float, Numeric, BigDecimal,\n # Date, DateTime, Time, File, TrueClass, FalseClass\n end\nend\n</code></pre>\n\n<h3 id=\"unrestrict-primary-key\">Unrestrict primary key</h3>\n\n<pre><code>Category.create id: 'travel' # error\nCategory.unrestrict_primary_key\nCategory.create id: 'travel' # ok\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sequelize",
"title": "Sequelize",
"url": "/sequelize",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"api\">API</h3>\n\n<pre><code>sequelize.sync().done -&gt; ...\n</code></pre>\n\n<h3 id=\"models\">Models</h3>\n\n<pre><code>Project = sequelize.define('Project', {\n title: Sequelize.STRING,\n description: Sequelize.TEXT,\n myDate: { type: Sequelize.DATE, defaultValue: Sequelize.NOW },\n title: { type: Sequelize.STRING, allowNull: false },\n id: { type: Sequelize.INTEGER, autoIncrement: true, primaryKey: true },\n}, {\n classMethods: { ... },\n instanceMethods: { ... }\n});\n\nProject.hasMany(Task)\n</code></pre>\n\n<h3 id=\"finders\">Finders</h3>\n\n<pre><code>Project.find(123).success (project) -&gt;\n\nProject.find({ where: {title: 'Hello'} })\nProject.find({ where: {id: [1,3,4]} })\nProject.find({ where: [\"id &gt; ?\", 25] })\n\nProject.find(\n where: {title: 'a'}\n attributes: ['id', ['name', 'title']]\n)\n\n.findOrCreate(...)\n\n.findAll\n.findAll({ where: ... })\n.findAll({ order: 'title DESC' })\n.findAll({ limit: 10 })\n.findAll({ offset: 10, limit: 2 })\n\n.count()\n</code></pre>\n\n<h3 id=\"build\">Build</h3>\n\n<pre><code>item = Project.build({ ... })\n\nitem.title = '...'\n\nitem.save().success (item) -&gt;\n\nitem.updateAttributes({ title: '...' })\n\nitem.destroy().success -&gt;\n\nitem.values\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sh-pipes",
"title": "Shell: named pipes",
"url": "/sh-pipes",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"named-pipes\">Named pipes</h3>\n\n<pre><code class=\"language-sh\">diff &lt;(ls ./old) &lt;(ls ./new)\n</code></pre>\n\n<p>This creates a virtual file with the contents of the output of <code>ls ./old</code>.</p>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"https://en.wikipedia.org/wiki/Named_pipe\">Named pipe</a> <em>(wikipedia.org)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sh",
"title": "Shell scripting",
"url": "/sh",
"category": "CLI",
"keywords": null,
"content_html": "",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "shelljs",
"title": "Shell.js",
"url": "/shelljs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-js\">var shell = require('shelljs')\n</code></pre>\n\n<pre><code class=\"language-js\">if (!shell.which('git')) {\n shell.echo('Sorry, this script requires git')\n shell.exit(1)\n}\n</code></pre>\n\n<pre><code class=\"language-js\">// Copy files to release dir\nshell.rm('-rf', 'out/Release')\nshell.cp('-R', 'stuff/', 'out/Release')\n</code></pre>\n\n<pre><code class=\"language-js\">// Replace macros in each .js file\nshell.cd('lib')\nshell.ls('*.js').forEach(function (file) {\n shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file)\n shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file)\n shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\\n/, shell.cat('macro.js'), file)\n})\nshell.cd('..')\n</code></pre>\n\n<pre><code class=\"language-js\">// Run external tool synchronously\nif (shell.exec('git commit -am \"Auto-commit\"').code !== 0) {\n shell.echo('Error: Git commit failed')\n shell.exit(1)\n}\n</code></pre>\n\n<p>Taken from the <a href=\"https://github.com/shelljs/shelljs\">Readme</a>.</p>\n\n<h3 id=\"require\">Require</h3>\n\n<pre><code class=\"language-js\">const sh = require('shelljs')\n</code></pre>\n\n<h3 id=\"paths\">Paths</h3>\n\n<pre><code class=\"language-js\">sh.cd('dir')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.mkdir('dir')\nsh.mkdir('-p', 'dir')\n</code></pre>\n\n<h3 id=\"file-manipulation\">File manipulation</h3>\n\n<pre><code class=\"language-js\">sh.cp('src', 'dest')\nsh.cp('-rf', 'src', 'dest')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.rm('file')\nsh.rm('-rf', 'file')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.mv('src', 'dest')\nsh.mv(['src1','src2'], 'dest')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.chmod('644', 'file')\nsh.chmod(755, 'file')\nsh.chmod('u+x', 'file')\n</code></pre>\n\n<h3 id=\"tests\">Tests</h3>\n\n<pre><code class=\"language-js\">sh.test('-b', 'path') // block device\nsh.test('-d', 'path') // dir\nsh.test('-e', 'path') // exists\nsh.test('-f', 'path') // file\nsh.test('-L', 'path') // symlink\n</code></pre>\n\n<h3 id=\"cat-and-output\">Cat and output</h3>\n\n<pre><code class=\"language-js\">src = sh.cat('file*.txt')\n</code></pre>\n\n<pre><code class=\"language-js\">'hello'.to('output.txt')\n'hello'.toEnd('append.txt')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.cat('input.txt').to('output.txt')\n</code></pre>\n\n<h3 id=\"utils\">Utils</h3>\n\n<pre><code class=\"language-js\">sh.which('x')\nsh.pwd()\n</code></pre>\n\n<pre><code class=\"language-js\">sh.echo('hi')\n</code></pre>\n\n<pre><code class=\"language-js\">sh.exec('node --version').code\nsh.exec('node --version').output\nsh.exec('node --version', { silent: true }).output\n</code></pre>\n\n<pre><code class=\"language-js\">sh.exec('node --version', (code, output) =&gt; {\n sh.echo(`exit code ${code}`)\n})\n</code></pre>\n\n<pre><code class=\"language-js\">sh.tempdir()\n</code></pre>\n\n<pre><code class=\"language-js\">sh.error() // null if no error\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://github.com/shelljs/shelljs\">https://github.com/shelljs/shelljs</a></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/shelljs/shelljs\">ShellJS</a> is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-27"
},{
"id": "siege",
"title": "Siege",
"url": "/siege",
"category": "Others",
"keywords": null,
"content_html": "<pre><code>siege -b -c=10 -t=5m http://...\n</code></pre>\n\n<pre><code>-c, --concurrent=N\n-t, --time=MINSm\n-r, --reps=N\n</code></pre>\n\n<pre><code>-i, --internet Hit URLs randomly\n-b, --benchmark No delay between requests\n</code></pre>\n\n<h3 id=\"configuration\">Configuration</h3>\n\n<pre><code>-f, --file=FILE load urls.txt\n-R, --rc=FILE load siegerc\n</code></pre>\n\n<blockquote>\n <p>Also see: <a href=\"https://gist.github.com/stansmet/3067988\">siegerc</a></p>\n</blockquote>\n\n<h3 id=\"headers\">Headers</h3>\n\n<pre><code>-H, --header=\"Cookie: foo=bar\"\n-A, --user-agent=\"Mozilla\"\n-T, --content-type=\"text/html\"\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "simple_form",
"title": "SimpleForm",
"url": "/simple_form",
"category": "Others",
"keywords": null,
"content_html": "<pre><code class=\"language-ruby\">&lt;%= f.input :email, required: false, autofocus: true %&gt;\n&lt;%= f.input :password, required: false %&gt;\n&lt;%= f.input :remember_me, as: :boolean %&gt;\n&lt;%= f.button :submit, \"Sign in\" %&gt;\n</code></pre>\n\n<pre><code class=\"language-ruby\">simple_form_for @x,\n wrapper: :small\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sinon-chai",
"title": "Sinon-chai",
"url": "/sinon-chai",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<ul>\n <li><a href=\"https://github.com/domenic/sinon-chai\">Sinon-chai</a></li>\n</ul>\n\n<h3 id=\"initialization\">Initialization</h3>\n\n<pre><code class=\"language-js\">var sinon = require('sinon');\nrequire('chai').use(require('sinon-chai'));\n</code></pre>\n\n<h3 id=\"assert\">Assert</h3>\n\n<pre><code>expect(spy).called\nexpect(spy).calledOnce\nexpect(spy).calledTwice\nexpect(spy).calledThrice\nexpect(spy).calledBefore\nexpect(spy).calledAfter\nexpect(spy).calledWithNew\nexpect(spy).alwaysCalledWithNew\nexpect(spy).calledOn\nexpect(spy).alwaysCalledOn\nexpect(spy).calledWith\nexpect(spy).alwaysCalledWith\nexpect(spy).calledWithExactly\nexpect(spy).alwaysCalledWithExactly\nexpect(spy).calledWithMatch\nexpect(spy).alwaysCalledWithMatch\nexpect(spy).returned\nexpect(spy).alwaysReturned\nexpect(spy).threw\nexpect(spy).alwaysThrew\n</code></pre>\n\n<h3 id=\"should\">Should</h3>\n\n<pre><code>spy.should.have.been.called\nspy.should.have.been.calledOnce\nspy.should.have.been.calledTwice\nspy.should.have.been.calledThrice\nspy1.should.have.been.calledBefore(spy2)\nspy1.should.have.been.calledAfter(spy2)\nspy.should.have.been.calledWithNew\nspy.should.always.have.been.calledWithNew\nspy.should.have.been.calledOn(context)\nspy.should.always.have.been.calledOn(context)\nspy.should.have.been.calledWith(...args)\nspy.should.always.have.been.calledWith(...args)\nspy.should.always.have.been.calledWithExactly(...args)\nspy.should.always.have.been.calledWithExactly(...args)\nspy.should.have.been.calledWithMatch(...args)\nspy.should.always.have.been.calledWithMatch(...args)\nspy.should.have.returned(returnVal)\nspy.should.have.always.returned(returnVal)\nspy.should.have.thrown(errorObjOrErrorTypeStringOrNothing)\nspy.should.have.always.thrown(errorObjOrErrorTypeStringOrNothing)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sinon",
"title": "Sinon",
"url": "/sinon",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"creating-spies\">Creating spies</h3>\n\n<pre><code class=\"language-js\">fn = sinon.spy()\nfn()\n</code></pre>\n\n<pre><code class=\"language-js\">fn.calledOnce == true\nfn.callCount == 1\n</code></pre>\n\n<h3 id=\"spyingstubbing\">Spying/stubbing</h3>\n\n<pre><code class=\"language-js\">sinon.spy($, 'ajax')\n</code></pre>\n\n<pre><code class=\"language-js\">$.ajax();\n$.ajax.calledOnce == true\n</code></pre>\n\n<pre><code class=\"language-js\">sinon.stub($, 'ajax', function () { ... }) // function optional\n</code></pre>\n\n<pre><code class=\"language-js\">$.ajax.calledWithMatch({ url: '/x' })\n$.ajax.restore()\n</code></pre>\n\n<h3 id=\"spystub-properties\">Spy/stub properties</h3>\n\n<pre><code class=\"language-js\">spy\n .args //=&gt; [ [..], [..] ] one per call\n .thisValues\n .returnValues\n</code></pre>\n\n<pre><code class=\"language-js\"> .called //=&gt; true\n .notCalled\n .callCount\n .calledOnce\n .calledTwice\n .calledThrice\n</code></pre>\n\n<pre><code class=\"language-js\"> .getCalls() //=&gt; Array\n .getCall(0)\n .firstCall\n</code></pre>\n\n<h3 id=\"anonymous-stub\">Anonymous stub</h3>\n\n<pre><code class=\"language-js\">stub = sinon.stub().returns(42)\nstub() == 42\n</code></pre>\n\n<pre><code class=\"language-js\">stub\n .withArgs(42).returns(1)\n .withArgs(43).throws(\"TypeError\")\n</code></pre>\n\n<pre><code class=\"language-js\">stub\n .returns(1)\n .throws(\"TypeError\")\n .returnsArg(0) // Return 1st argument\n .callsArg(0)\n</code></pre>\n\n<h3 id=\"fake-date\">Fake date</h3>\n\n<pre><code class=\"language-js\">sinon.useFakeTimers(+new Date(2011,9,1));\n</code></pre>\n\n<h3 id=\"fake-server\">Fake server</h3>\n\n<pre><code class=\"language-js\">server = sinon.fakeServer.create()\n</code></pre>\n\n<pre><code class=\"language-js\">$.get('/file.json', ...)\nserver.requests[0].respond(\n 200,\n { 'Content-Type': 'application/json' },\n JSON.stringify({ hello: 'world' })\n)\n</code></pre>\n\n<pre><code class=\"language-js\">server.restore()\n</code></pre>\n\n<h3 id=\"fake-xhr\">Fake XHR</h3>\n\n<pre><code class=\"language-js\">xhr = sinon.useFakeXMLHttpRequest()\nxhr.restore()\n</code></pre>\n\n<h3 id=\"sandbox\">Sandbox</h3>\n\n<pre><code class=\"language-js\">beforeEach(function() {\n global.sinon = require('sinon').sandbox.create()\n})\n</code></pre>\n\n<pre><code class=\"language-js\">afterEach(function() {\n global.sinon.restore()\n})\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-27"
},{
"id": "sketch",
"title": "Sketch",
"url": "/sketch",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"insert\">Insert</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>V</code></td>\n <td>Vector</td>\n </tr>\n <tr>\n <td><code>P</code></td>\n <td>Pencil</td>\n </tr>\n <tr>\n <td><code>T</code></td>\n <td>Text</td>\n </tr>\n <tr>\n <td><code>L</code></td>\n <td>Line</td>\n </tr>\n <tr>\n <td><code>R</code></td>\n <td>Rectangle</td>\n </tr>\n <tr>\n <td><code>O</code></td>\n <td>Oval</td>\n </tr>\n <tr>\n <td><code>U</code></td>\n <td>Rounded</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"show\">Show</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>^G</code></td>\n <td>Show grid</td>\n </tr>\n <tr>\n <td><code>^L</code></td>\n <td>Show layout</td>\n </tr>\n <tr>\n <td><code>^P</code></td>\n <td>Show pixels</td>\n </tr>\n <tr>\n <td><code>^H</code></td>\n <td>Show selection handles</td>\n </tr>\n <tr>\n <td><code>^R</code></td>\n <td>Show rulers</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"sidebars\">Sidebars</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘⌥1</code></td>\n <td>Toggle left (layers)</td>\n </tr>\n <tr>\n <td><code>⌘⌥2</code></td>\n <td>Toggle right (inspector)</td>\n </tr>\n <tr>\n <td><code>⌘⌥3</code></td>\n <td>Toggle both</td>\n </tr>\n <tr>\n <td><code>⌘.</code></td>\n <td>Presentation mode</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"zoom\">Zoom</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘0</code></td>\n <td>100%</td>\n </tr>\n <tr>\n <td><code>⌘1</code></td>\n <td>Fit to screen</td>\n </tr>\n <tr>\n <td><code>⌘2</code></td>\n <td>Fit selection to screen</td>\n </tr>\n <tr>\n <td><code>⌘3</code></td>\n <td>Center selection</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"arrange\">Arrange</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘⌥↑</code> <em>/</em> <code>↓</code></td>\n <td>Forward or backward</td>\n </tr>\n <tr>\n <td><code>^⌘⌥↑</code> <em>/</em> <code>↓</code></td>\n <td>Front or back</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"distribute\">Distribute</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>^⌘H</code></td>\n <td>Horizontal</td>\n </tr>\n <tr>\n <td><code>^⌘V</code></td>\n <td>Vertical</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"layers\">Layers</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘R</code></td>\n <td>Rename layer</td>\n </tr>\n <tr>\n <td><code>⌘F</code></td>\n <td>Find layer</td>\n </tr>\n <tr>\n <td><code>⌘G</code></td>\n <td>Group</td>\n </tr>\n <tr>\n <td><code>⌘⇧G</code></td>\n <td>Ungroup</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"font\">Font</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘⌥ +</code> <em>/</em> <code>-</code></td>\n <td>Bigger/smaller</td>\n </tr>\n <tr>\n <td><code>⌘⇧[</code></td>\n <td>Left align</td>\n </tr>\n <tr>\n <td><code>⌘⇧\\</code></td>\n <td>Center align</td>\n </tr>\n <tr>\n <td><code>⌘⇧]</code></td>\n <td>Right align</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "slim",
"title": "Slim",
"url": "/slim",
"category": "Ruby libraries",
"keywords": null,
"content_html": "<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-jade\">doctype html\nhtml\n head\n title Slim Examples\n meta[charset='utf-8']\n meta(name=\"keywords\" content=\"template language\")\n meta name=\"author\" content=author\n meta property='og:image' content=asset_url('foo.png')\n meta property='og:image' content=(path_to_user user)\n meta(\n property='description'\n content='this is the song that never ends')\n</code></pre>\n\n<h3 id=\"attributes\">Attributes</h3>\n\n<pre><code class=\"language-jade\">meta[charset='utf-8']\nmeta(name=\"keywords\" content=\"template language\")\nmeta name=\"author\" content=author\n</code></pre>\n\n<p>You can use parentheses, brackets, or none at all.</p>\n\n<h3 id=\"ruby-attributes\">Ruby attributes</h3>\n\n<pre><code class=\"language-jade\">a class=[:menu,:highlight]\n</code></pre>\n\n<p>You can use Ruby expressions in attributes.</p>\n\n<h3 id=\"hash-attributes\">Hash attributes</h3>\n\n<pre><code class=\"language-jade\">.card *{'data-url' =&gt; place_path(place)}\n</code></pre>\n\n<p>You can destructure Ruby hashes as attributes.</p>\n\n<h3 id=\"inline-ruby\">Inline Ruby</h3>\n\n<pre><code class=\"language-jade\">ruby:\n def foobar\n \"hello\"\n end\n\ndiv= foobar\n</code></pre>\n\n<h3 id=\"inline-markdown\">Inline Markdown</h3>\n\n<pre><code class=\"language-jade\">markdown:\n ### On Markdown\n\n I am *Markdown* _text_!\n {: .classname}\n</code></pre>\n\n<p>Slim can handle your <a href=\"https://daringfireball.net/projects/markdown/syntax\">Markdown</a> content for longer content blocks or <code>code</code>.\nDepending on your parser, like <a href=\"https://kramdown.gettalong.org/quickref.html\">Kramdown</a>, other features might work, like assigning attributes or classes.</p>\n\n<h3 id=\"embedded-javascript\">Embedded JavaScript</h3>\n\n<pre><code class=\"language-jade\">javascript:\n alert('Slim supports embedded javascript!')\n</code></pre>\n\n<h3 id=\"comments\">Comments</h3>\n\n<pre><code class=\"language-jade\">/ Comment\n/! HTML comment\n</code></pre>\n\n<h3 id=\"ruby\">Ruby</h3>\n\n<pre><code class=\"language-jade\">== yield\n= t('.hello')\n- 3.times do |i|\n div\n</code></pre>\n\n<h3 id=\"verbatim-text\">Verbatim text</h3>\n\n<pre><code class=\"language-jade\">div\n | This is text\n it is nice\n</code></pre>\n\n<h3 id=\"inline-html\">Inline HTML</h3>\n\n<pre><code class=\"language-jade\">&lt;div class='foo'&gt;\n - if articles.empty?\n | Nothing here\n&lt;/div&gt;\n</code></pre>\n\n<h3 id=\"inline-tags\">Inline tags</h3>\n\n<pre><code class=\"language-jade\">ul\n li: a(href='/') Home\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li><a href=\"http://slim-lang.com/\">http://slim-lang.com/</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "social-images",
"title": "Social media images",
"url": "/social-images",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"facebook\">Facebook</h3>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">What</th>\n <th style=\"text-align: right\">Dimensions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">Cover photo</td>\n <td style=\"text-align: right\">851 x 315</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">Display picture</td>\n <td style=\"text-align: right\">168 x 168 ?</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">Highlighted image</td>\n <td style=\"text-align: right\">1200 x 717 (appears 843 x 504)</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">Share link (og:image)</td>\n <td style=\"text-align: right\">940 x 492 (1.91:1, appears as 470 x 246)</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">Share link (square)</td>\n <td style=\"text-align: right\">1:1, appears as 114 x 114?</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"twitter\">Twitter</h3>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">What</th>\n <th style=\"text-align: right\">Dimensions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">Page header</td>\n <td style=\"text-align: right\">1500 x 500</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">Display picture</td>\n <td style=\"text-align: right\">400 x 400 (shown as 200x200)</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">In-stream photo preview</td>\n <td style=\"text-align: right\">440 x 220 (2:1)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>https://developers.facebook.com/docs/plugins/checklist/</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "spacemacs",
"title": "Spacemacs",
"url": "/spacemacs",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"layers\">Layers</h3>\n\n<table class=\"-shortcuts -prime\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>f</code></td>\n <td>File</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>p</code></td>\n <td>Project</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>t</code></td>\n <td>Toggle</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>b</code></td>\n <td>Buffer</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>m</code></td>\n <td>Major mode</td>\n </tr>\n <tr>\n <td><code>,</code></td>\n <td>Same as <code>SPC</code> <code>m</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>g</code></td>\n <td>Git</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>l</code></td>\n <td>Layout</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>a</code></td>\n <td>Apps</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>h</code></td>\n <td>Help</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"more\">More</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>M-x</strong></td>\n <td><code>SPC</code> <code>SPC</code></td>\n </tr>\n <tr>\n <td>Terminal</td>\n <td><code>SPC</code> <code>'</code></td>\n </tr>\n <tr>\n <td>Search</td>\n <td><code>SPC</code> <code>/</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-h---help\"><code>SPC</code> <code>h</code> - Help</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Spacemacs help</strong></td>\n <td><code>SPC</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Layers</td>\n <td><code>l</code></td>\n </tr>\n <tr>\n <td>Documentation</td>\n <td><code>r</code></td>\n </tr>\n <tr>\n <td>FAQ</td>\n <td><code>f</code></td>\n </tr>\n <tr>\n <td>Vimtutor</td>\n <td><code>T</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-f---file\"><code>SPC</code> <code>f</code> - File</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Save</strong></td>\n <td><code>s</code></td>\n </tr>\n <tr>\n <td>Save all</td>\n <td><code>S</code></td>\n </tr>\n <tr>\n <td>Copy</td>\n <td><code>c</code></td>\n </tr>\n <tr>\n <td>Delete</td>\n <td><code>D</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Show filename</td>\n <td><code>y</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-b---buffer\"><code>SPC</code> <code>b</code> - Buffer</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Next buffer (<code>:bnext</code>)</td>\n <td><code>n</code></td>\n </tr>\n <tr>\n <td>Previous buffer (<code>:bprev</code>)</td>\n <td><code>p</code></td>\n </tr>\n <tr>\n <td>Delete buffer (<code>:bd</code>)</td>\n <td><code>d</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-f-e---config\"><code>SPC</code> <code>f</code> <code>e</code> - Config</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Edit config</strong></td>\n <td><code>d</code></td>\n </tr>\n <tr>\n <td>Edit config and template</td>\n <td><code>D</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Reload config</td>\n <td><code>R</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-w---window\"><code>SPC</code> <code>w</code> - Window</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Help</td>\n <td><code>.</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Select</td>\n <td><code>h</code> / <code>j</code> / <code>k</code> / <code>l</code></td>\n </tr>\n <tr>\n <td>Move</td>\n <td><code>H</code> / <code>J</code> / <code>K</code> / <code>L</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Split</td>\n <td><code>s</code></td>\n </tr>\n <tr>\n <td>Split &amp; follow</td>\n <td><code>S</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Split vert</td>\n <td><code>v</code></td>\n </tr>\n <tr>\n <td>Split vert &amp; follow</td>\n <td><code>V</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-p---project\"><code>SPC</code> <code>p</code> - Project</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Switch project</strong></td>\n <td><code>l</code></td>\n </tr>\n <tr>\n <td>Switch project</td>\n <td><code>p</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><strong>Open files &amp; recent</strong></td>\n <td><code>h</code></td>\n </tr>\n <tr>\n <td>Open files</td>\n <td><code>f</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><strong>Show tree</strong></td>\n <td><code>t</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Open terminal</td>\n <td><code>'</code></td>\n </tr>\n <tr>\n <td>Open terminal in root</td>\n <td><code>$</code> <code>t</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-l-w---workspaces\"><code>SPC</code> <code>l</code> <code>w</code> - Workspaces</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Help</td>\n <td><code>?</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Switch previous layout</td>\n <td><code>TAB</code></td>\n </tr>\n <tr>\n <td><strong>Switch to nth workspace</strong></td>\n <td><code>0</code> … <code>9</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Rename</td>\n <td><code>R</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"spc-t---toggle\"><code>SPC</code> <code>t</code> - Toggle</h3>\n\n<table class=\"-shortcuts -shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Shortcut</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Line numbers</td>\n <td><code>n</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"major-modes\">Major modes</h2>\n\n<h3 id=\"markdown\">Markdown</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>,</code> <code>-</code></td>\n <td>Insert horizontal rule</td>\n </tr>\n <tr>\n <td><code>,</code> <code>h</code> <code>1</code></td>\n <td>Insert H1</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"other-layers\">Other layers</h2>\n\n<h3 id=\"version-control\">version-control</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>s</code></td>\n <td><strong>Status</strong></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>m</code></td>\n <td><strong>Open dispatch menu</strong></td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>m</code> <code>s</code></td>\n <td>Stage</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>m</code> <code>P</code> <code>p</code></td>\n <td>Push</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>m</code> <code>c</code></td>\n <td>Commit</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>t</code></td>\n <td>Open time machine</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>l</code> <code>l</code></td>\n <td>Open in GitHub</td>\n </tr>\n <tr>\n <td><code>SPC</code> <code>g</code> <code>l</code> <code>L</code></td>\n <td>Show GitHub URL</td>\n </tr>\n </tbody>\n</table>\n\n<p>Version control is provided by Magit.</p>\n\n<h2 id=\"emacs-standard\">Emacs standard</h2>\n\n<h3 id=\"file\">File</h3>\n\n<table class=\"-shortcuts-right\">\n <thead>\n <tr>\n <th>Description</th>\n <th>Emacs</th>\n <th>Spacemacs</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Save</td>\n <td><code>C-x</code> <code>C-s</code></td>\n <td><code>SPC</code> <code>f</code> <code>s</code></td>\n </tr>\n <tr>\n <td>Open</td>\n <td><code>C-x</code> <code>C-f</code></td>\n <td><code>SPC</code> <code>f</code> <code>f</code></td>\n </tr>\n <tr>\n <td>Close</td>\n <td><code>C-x</code> <code>C-k</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Split horizontal</td>\n <td><code>C-x</code> <code>2</code></td>\n <td><code>SPC</code> <code>w</code> <code>h</code></td>\n </tr>\n <tr>\n <td>Split vertical</td>\n <td><code>C-x</code> <code>3</code></td>\n <td><code>SPC</code> <code>w</code> <code>v</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td>Confirm</td>\n <td><code>C-c</code> <code>C-c</code></td>\n <td> </td>\n </tr>\n <tr>\n <td>Abort</td>\n <td><code>C-c</code> <code>C-k</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://github.com/syl20bnr/spacemacs/blob/master/doc/DOCUMENTATION.org\">Spacemacs documentation</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://spacemacs.org\">Spacemacs</a> is a distribution for Emacs.</p>",
"description_html": "",
"tags": ["WIP"],
"updated": "2018-02-15"
},{
"id": "spine",
"title": "Spine",
"url": "/spine",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"models\">Models</h2>\n\n<pre><code>class User extends Spine.Model\n @configure \"User\", \"name\", \"address\"\n\n fullName: -&gt;\n [@first, @last].join ' '\n</code></pre>\n\n<h3 id=\"javascript\">JavaScript</h3>\n\n<pre><code>// Subclassing\nUser = Spine.Model.sub()\n</code></pre>\n\n<h3 id=\"class-methods\">Class methods</h3>\n\n<pre><code>.configure 'modelname', attributes...\n\n# Inheritance\n.include(Module)\n.extend(Module)\n\n.create(name: \"John\")\n\n.count()\n\n# Events\n.on 'refresh change', (user) -&gt; ...\n.trigger 'event'\n\n.change (user) -&gt; ... # same as on('change')\n.fetch (user) -&gt; ... # same as on('fetch')\n\n# JSON\n.toJSON() # all records\n.fromJSON(json) # from json string\n.fromForm(el)\n\n# Data\n.records # Hash of instances\n.attributes # array of attributes (from .configure)\n\n# Convenience\n.toString() #=&gt; \"User\"\n\n# Find by ID\n.exists(1)\n.find(1) # throws error\n\n# Find by something\n.select (u) u.name == 'bob'\n.findByAttribute 'name', 'bob'\n.findAllByAttribute 'name', 'bob'\n\n.all()\n.slice(6, 13) # cloned copies of instances\n\n# Iterating\n.each (user) -&gt;\n\n# Ends\n.first()\n.last()\n\n# Deleting\n.deleteAll()\n.destroyAll()\n.destroyAll({ ..options.. })\n.destroy(2)\n</code></pre>\n\n<h3 id=\"instance-methods\">Instance methods</h3>\n\n<pre><code>user = new User();\n\nuser\n.isNew()\n.exists()\n\n# Validation\n.isValid()\n.validate() # validate = (-&gt; \"Name required\" unless @name)\n\n.attributes() # hash of attr values\n.eql(other) # equality check\n\n# Update\n.load(attrs)\n.reload()\n.fromForm(form)\n.updateAttribute(\"name\", \"john\")\n.updateAttributes(name: \"John\")\n\n# Event\n.on 'event', -&gt; ...\n.trigger 'event'\n\n# Retrieve\n.toJSON()\n\n# Persistence\n.save()\n\n.destroy()\n.dup() # clone as unsaved\n</code></pre>\n\n<h3 id=\"mixins\">Mixins</h3>\n\n<pre><code>class User extends Spine.Model\n @include MyModule\n @extend MyModule\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code>.on 'create'\n.on 'update'\n.on 'destroy'\n\n.on 'save' # create / update\n.on 'change' # create / update / destroy\n\n.on 'refresh'\n.on 'error' # validation error\n</code></pre>\n\n<h2 id=\"ajax\">Ajax</h2>\n\n<pre><code>class User extends Spine.Model\n @extend Spine.Model.Ajax\n\n @url: '/users'\n @url: -&gt; '/users'\n scope: '2013'\n</code></pre>\n\n<h3 id=\"using\">Using</h3>\n\n<pre><code>User.fetch()\nuser = new User()\n\nuser.url() #=&gt; \"/users\"\nuser.url('bands') #=&gt; \"/users/bands\"\n\nuser.scope = 'admin'\nuser.url() #=&gt; \"/admin/users\"\n</code></pre>\n\n<h3 id=\"host\">Host</h3>\n\n<pre><code>Spine.Model.host = 'http://endpoint'\n</code></pre>\n\n<h3 id=\"ajax-mapping\">Ajax mapping</h3>\n\n<pre><code>read → GET /collection\ncreate → POST /collection (201 created)\nupdate → PUT /collection/id\ndestroy → DELETE /collection/id\n</code></pre>\n\n<h3 id=\"associations\">Associations</h3>\n\n<pre><code>class Photo extends Spine.Model\n @belongsTo 'album', 'Album' # window['Album']\n @belongsTo 'album', 'models/album' # via require.js\n\nclass Album\n @hasMany 'photos', 'models/photo'\n\nalbum.photos().all()\nalbum.photos().create(name: \"Vacation\")\nalbum.photos().find(id)\n\nphoto = Photo.create(album: album)\nphoto.album()\nphoto.album_id\n</code></pre>\n\n<h3 id=\"see\">See</h3>\n\n<ul>\n <li>http://spinejs.com/api/index</li>\n <li>http://spinejs.com/api/models</li>\n <li>http://spinejs.com/docs/ajax</li>\n <li>http://spinejs.com/docs/relations</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "spreadsheet",
"title": "Spreadsheet functions",
"url": "/spreadsheet",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"if\">If</h3>\n\n<pre><code>=IF(test, then, else)\n=IF(EQ(A1, \"paid\"), \"true\", \"false\")\n</code></pre>\n\n<h3 id=\"comparators\">Comparators</h3>\n\n<pre><code>=EQ(a,b) NE()\n=GT() GTE() LT() LTE()\n</code></pre>\n\n<h3 id=\"math\">Math</h3>\n\n<pre><code>=POW(2, 32) # 2^32\n=SIN() ACOS() etc\n=CEILING(n,sig,mode)\n=FLOOR(n,sig,mode)\n=INT(n)\n\n=SUM(range)\n\n=SUMIF(range, criteria, sum_range)\n=SUMIF(A1:A5, \"&gt;300\", B1:B5) # if A# is &gt;300, use B#\n</code></pre>\n\n<h3 id=\"core\">Core</h3>\n\n<pre><code>=TO_DATE(number)\n</code></pre>\n\n<h3 id=\"vlook\">Vlook</h3>\n\n<pre><code>=VLOOKUP(value, range, column_index)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "sql-join",
"title": "SQL joins",
"url": "/sql-join",
"category": "Databases",
"keywords": null,
"content_html": "<h3 id=\"example\">Example</h3>\n\n<pre class=\"-wrap\"><code>SELECT * FROM order_items \\\n LEFT OUTER JOIN orders \\\n ON order_items.order_id = orders.id\n</code></pre>\n\n<p>Joins are typically added to <code>SELECT</code> statements to add more columns and records.</p>\n\n<h3 id=\"diagram\">Diagram</h3>\n\n<pre class=\"-setup\"><code>SELECT * FROM `A` INNER JOIN `B`\n</code></pre>\n\n<pre class=\"-box-chars -setup\"><code>┌────────┐\n│ A ┌───┼────┐\n│ │ ∩ │ │\n└────┼───┘ B │\n └────────┘\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Join</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Inner join</td>\n <td><code>∩</code></td>\n </tr>\n <tr>\n <td>Left outer join</td>\n <td><code>A</code> + <code>∩</code></td>\n </tr>\n <tr>\n <td>Right outer join</td>\n <td><code>∩</code> + <code>B</code></td>\n </tr>\n <tr>\n <td>Full outer join</td>\n <td><code>A</code> + <code>∩</code> + <code>B</code></td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-30"
},{
"id": "stencil",
"title": "Stencil",
"url": "/stencil",
"category": "JavaScript libraries",
"keywords": ["@Component","@Prop()","@State()","render()","componentWillLoad()","componentWillUpdate()","Templating","Lifecycle"],
"content_html": "<h2 class=\"-three-column\" id=\"quick-start-guide\">Quick-start guide</h2>\n\n<h3 class=\"-prime\" id=\"getting-started\">Getting started</h3>\n\n<h4 id=\"javascript\">JavaScript</h4>\n\n<pre><code class=\"language-js\">import { Component, Prop, State } from '@stencil/core'\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.scss'\n})\nexport class MyComponent {\n @Prop() name: string\n @State() isVisible: boolean = true\n\n render () {\n return &lt;p&gt;I am {this.name}!&lt;/p&gt;\n )\n }\n}\n</code></pre>\n\n<h4 id=\"html\">HTML</h4>\n\n<pre><code class=\"language-html\">&lt;my-component name='Groot' /&gt;\n</code></pre>\n\n<p>That’s the same example in the <a href=\"https://github.com/ionic-team/stencil\">Readme</a>, that’s as simple as you can get! Just use <code>&lt;my-component&gt;</code> like you would use any other HTML tag.</p>\n\n<h3 id=\"dom-events\">DOM events</h3>\n\n<pre data-line=\"5,10,11\"><code class=\"language-js\">export class MyComponent {\n render () {\n return (\n &lt;input\n onChange={(event: UIEvent) =&gt; this.inputChanged(event)}\n /&gt;\n )\n }\n\n inputChanged (event) {\n console.log('input changed:', event.target.value)\n }\n}\n</code></pre>\n\n<p>Stencil uses DOM events.</p>\n\n<p>See: <a href=\"https://stenciljs.com/docs/templating/#handling-user-input\">Handling user input</a></p>\n\n<h3 id=\"multiple-children\">Multiple children</h3>\n\n<pre data-line=\"3,4\"><code class=\"language-js\">render () {\n return [\n &lt;h1&gt;Hello there&lt;/h1&gt;,\n &lt;p&gt;This component returns multiple nodes&lt;/p&gt;\n ]\n}\n</code></pre>\n\n<p><code>render()</code> can return an array of elements.</p>\n\n<p>See: <a href=\"https://stenciljs.com/docs/templating#complex-template-content\">Complex template content</a></p>\n\n<h2 id=\"state\">State</h2>\n\n<h3 id=\"managing-state\">Managing state</h3>\n\n<pre data-line=\"4,5\"><code class=\"language-js\">export class MyComponent {\n @State() isVisible: boolean\n\n show () {\n this.isVisible = true\n }\n}\n</code></pre>\n\n<p>Just do assignments. You can’t do mutations though, see next section.</p>\n\n<p>See: <a href=\"https://stenciljs.com/docs/decorators#managing-component-state\">Managing component state</a></p>\n\n<h3 id=\"updating-arrays-and-objects\">Updating arrays and objects</h3>\n\n<h4 id=\"-bad\">✗ Bad</h4>\n<pre><code class=\"language-js\">this.names.push('Larry') // ⚠️\nthis.options.show = true // ⚠️\n</code></pre>\n\n<h4 id=\"-ok\">✓ OK</h4>\n\n<pre><code class=\"language-js\">this.names = [ ...this.names, 'Larry' ]\nthis.options = { ...this.options, show: true }\n</code></pre>\n\n<p>Mutable operations such as <code>push()</code> won’t work. You’ll need to assign a new copy.</p>\n\n<p>See: <a href=\"https://stenciljs.com/docs/reactive-data/#updating-arrays\">Updating arrays</a></p>\n\n<h2 id=\"slots\">Slots</h2>\n\n<h3 id=\"using-slot\">Using slot</h3>\n\n<pre data-line=\"2\"><code class=\"language-html\">&lt;my-component&gt;\n &lt;span&gt;Hello, friends&lt;/span&gt;\n&lt;/my-component&gt;\n</code></pre>\n\n<h4 id=\"component\">Component</h4>\n\n<pre data-line=\"2\"><code class=\"language-js\">render() {\n return &lt;h1&gt;&lt;slot /&gt;&lt;/h1&gt;\n}\n</code></pre>\n\n<p>You can pass JSX/HTML as child elements. Use the <code>slot</code> tag to use them inside your component.</p>\n\n<p>See: <a href=\"https://stenciljs.com/docs/templating#slots\">Slots</a></p>\n\n<h3 id=\"multiple-slots\">Multiple slots</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-html\">&lt;my-component&gt;\n &lt;p slot='my-header'&gt;Hello&lt;/p&gt;\n &lt;p slot='my-footer'&gt;Thanks&lt;/p&gt;\n&lt;/my-component&gt;\n</code></pre>\n\n<h4 id=\"component-1\">Component</h4>\n\n<pre data-line=\"3,4\"><code class=\"language-js\">render () {\n return &lt;div&gt;\n &lt;header&gt;&lt;slot name='my-header' /&gt;&lt;/header&gt;\n &lt;footer&gt;&lt;slot name='my-footer' /&gt;&lt;/footer&gt;\n &lt;/div&gt;\n}\n</code></pre>\n\n<p>See: <a href=\"https://stenciljs.com/docs/templating#slots\">Slots</a></p>\n\n<h2 id=\"lifecycle\">Lifecycle</h2>\n\n<h3 id=\"lifecycle-hooks\">Lifecycle hooks</h3>\n\n<table>\n <thead>\n <tr>\n <th>Event</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>componentWillLoad()</code></td>\n <td>Before rendering</td>\n </tr>\n <tr>\n <td><code>componentDidLoad()</code></td>\n <td>After rendering</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>componentWillUpdate()</code></td>\n <td>Before updating</td>\n </tr>\n <tr>\n <td><code>componentDidUpdate()</code></td>\n <td>After updating</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>componentDidUnload()</code></td>\n <td>After unmounting</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"https://stenciljs.com/docs/component-lifecycle\">Component lifecycle</a></p>\n\n<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-js\">export class MyComponent {\n componentWillUpdate () {\n console.log('updating')\n }\n}\n</code></pre>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://stenciljs.com/docs/\">Stencil docs</a> <em>(stenciljs.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/ionic-team/stencil\">Stencil</a> is a compiler for web components made by the Ionic team. This guide targets Stencil v0.0.5.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-11"
},{
"id": "strftime",
"title": "strftime format",
"url": "/strftime",
"category": "Others",
"keywords": null,
"content_html": "<p>{% include common/strftime_format.md title=”strftime” %}</p>",
"intro_html": "<p>The strftime format is the standard date formatting for UNIX. It’s used in C, Ruby, and more.</p>",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-04"
},{
"id": "stylus",
"title": "Stylus",
"url": "/stylus",
"category": "CSS",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 id=\"css-syntax\">CSS syntax</h3>\n\n<pre><code class=\"language-stylus\">.box {\n color: blue;\n\n .button {\n color: red;\n }\n}\n</code></pre>\n\n<p>Stylus is a CSS pre-processor.</p>\n\n<p>See: <a href=\"http://stylus-lang.com/\">stylus-lang.com</a></p>\n\n<h3 id=\"indent-syntax\">Indent syntax</h3>\n\n<pre><code class=\"language-stylus\">.box\n color: blue\n\n .button\n color: red\n</code></pre>\n\n<p>Also works! The colon is optional, as well. This is typically the syntax used with Stylus documents.</p>\n\n<h3 id=\"mixins\">Mixins</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">caps-type()\n text-transform: uppercase\n letter-spacing: 0.05em\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">h5\n caps-type()\n</code></pre>\n\n<p>See <a href=\"#mixins-1\">Mixins</a> below.</p>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">royal-blue = #36a\n</code></pre>\n\n<pre><code class=\"language-stylus\">div\n color: royal-blue\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"mixins-1\">Mixins</h2>\n\n<h3 id=\"without-arguments\">Without arguments</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">red-border()\n border: solid 2px red\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">div\n red-border()\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/mixins.html\">Mixins</a></p>\n\n<h3 id=\"with-arguments\">With arguments</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">border-radius(n)\n -webkit-border-radius: n\n border-radius: n\n</code></pre>\n\n<pre data-line=\"2,3\"><code class=\"language-stylus\">div\n border-radius: 2px\n border-radius(2px)\n</code></pre>\n\n<p>Mixins can be applied in two different ways.</p>\n\n<h3 id=\"argument-defaults\">Argument defaults</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">border-radius(n = 2px)\n -webkit-border-radius: n\n</code></pre>\n\n<h3 id=\"block-mixins\">Block mixins</h3>\n\n<pre data-line=\"3\"><code class=\"language-stylus\">mobile()\n @media (max-width: 480px)\n {block}\n</code></pre>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">+mobile()\n width: 10px\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/mixins.html#block-mixins\">Block mixins</a></p>\n\n<h3 id=\"rest-params\">Rest params</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">shadow(offset-x, args...)\n box-shadow: offset-x args\n margin-top: offset-x\n</code></pre>\n\n<pre><code class=\"language-stylus\">#login\n shadow: 1px 2px 5px #eee\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/vargs.html\">Rest params</a></p>\n\n<h2 class=\"-three-column\" id=\"functions\">Functions</h2>\n\n<h3 id=\"functions-1\">Functions</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">add(a, b)\n a + b\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">body\n padding: add(10px, 5)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/functions.html\">Functions</a></p>\n\n<h3 id=\"argument-defaults-1\">Argument defaults</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">add(a, b = 2)\n a + b\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/functions.html#argument-defaults\">Argument defaults</a></p>\n\n<h3 id=\"named-parameters\">Named parameters</h3>\n\n<pre><code class=\"language-stylus\">shadow(x, y)\n x y (y * 1.5) #000\n</code></pre>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">.button\n box-shadow: shadow(x: 2, y: 4)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/functions.html#named-parameters\">Named parameters</a></p>\n\n<h3 id=\"multiple-return-values\">Multiple return values</h3>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">sizes()\n 8px 16px\n</code></pre>\n\n<pre><code class=\"language-stylus\">sizes()[0] // → 8px\nsizes()[1] // → 16px\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/functions.html#multiple-return-values\">Multiple return values</a></p>\n\n<h2 class=\"-three-column\" id=\"values\">Values</h2>\n\n<h3 id=\"conditional-assignment\">Conditional assignment</h3>\n\n<pre data-line=\"2\"><code class=\"language-stylus\">royal-blue = #36a\nroyal-blue ?= #89f\n</code></pre>\n\n<pre><code class=\"language-stylus\">div\n color: royal-blue // #36a\n</code></pre>\n\n<p><code>?=</code> will only set a variable if it’s previously unset.</p>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/operators.html#conditional-assignment--\">Conditional assignment</a></p>\n\n<h3 id=\"property-lookup\">Property lookup</h3>\n\n<pre data-line=\"2,3\"><code class=\"language-stylus\">.logo\n width: w = 150\n margin-left: -(w / 2)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/variables.html#property-lookup\">Property lookup</a></p>\n\n<h3 id=\"interpolation\">Interpolation</h3>\n\n<pre><code class=\"language-stylus\">-{prefix}-border-radius: 2px\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/interpolation.html\">Interpolation</a></p>\n\n<h3 id=\"color-operators\">Color operators</h3>\n\n<pre><code class=\"language-stylus\">#888 + 50% // → #c3c3c3 (lighten)\n#888 - 50% // → #444 (darken)\n#f00 + 50deg // → #ffd500 (hue)\n</code></pre>\n\n<h3 id=\"casting\">Casting</h3>\n\n<pre><code class=\"language-stylus\">n = 5px\n</code></pre>\n\n<pre data-line=\"1,2\"><code class=\"language-stylus\">foo: (n)em\nfoo: (n * 5)%\n</code></pre>\n\n<h3 id=\"lookup\">Lookup</h3>\n\n<pre data-line=\"3\"><code class=\"language-stylus\">light-blue = #3bd\nname = 'blue'\nlookup('light-' + name)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#lookupname\">lookup</a></p>\n\n<h2 class=\"-three-column\" id=\"advanced-features\">Advanced features</h2>\n\n<h3 id=\"conditional\">Conditional</h3>\n\n<pre><code class=\"language-stylus\">if color == blue\n display: block\nelse if true and true\n display: inline\nelse if 'hey' is not 'bye'\n display: flex\nelse\n display: none\n</code></pre>\n\n<p>Aliases:</p>\n\n<table>\n <tbody>\n <tr>\n <td><code>==</code></td>\n <td><code>is</code></td>\n </tr>\n <tr>\n <td><code>!=</code></td>\n <td><code>is not</code></td>\n </tr>\n <tr>\n <td><code>!=</code></td>\n <td><code>isnt</code></td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/functions.html#conditionals\">Conditionals</a></p>\n\n<h3 id=\"for-loops\">For loops</h3>\n\n<pre data-line=\"5\"><code class=\"language-stylus\">font-size-1 = 10px\nfont-size-2 = 20px\nfont-size-3 = 30px\n\nfor i in 1..3\n .text-{i}\n font-size: lookup('font-size-' + i)\n</code></pre>\n\n<h3 id=\"definition-check\">Definition check</h3>\n\n<pre data-line=\"1\"><code class=\"language-stylus\">if ohnoes is defined\n color: blue\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/operators.html#variable-definition-is-defined\">is defined</a></p>\n\n<h3 id=\"false-values\">False values</h3>\n\n<pre><code class=\"language-stylus\">0\nnull\nfalse\n''\n</code></pre>\n\n<h3 id=\"type-check\">Type check</h3>\n\n<pre><code class=\"language-stylus\">if val is a 'string'\nif val is a 'ident'\nif #fff is a 'rgba' // → true\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/operators.html#instance-check-is-a\">Instance check</a></p>\n\n<h2 class=\"-three-column\" id=\"built-in-functions\">Built-in functions</h2>\n\n<h3 id=\"color-functions\">Color functions</h3>\n\n<pre><code class=\"language-stylus\">alpha(#fff) //→ 1\nalpha(rgba(0, 0, 0, 0.2)) //→ 0.2\n</code></pre>\n\n<pre><code class=\"language-stylus\">dark(black) //→ true\nlight(black) //→ false\n</code></pre>\n\n<pre><code class=\"language-stylus\">hue(#0a0) //→ 50deg\nsaturation(#f00) //→ 100%\nlightness(#f00) //→ 50%\nluminosity(#f00) //→ 0.2126\n</code></pre>\n\n<pre><code class=\"language-stylus\">hue(#0a0, 0deg)\nsaturation(#f00, 50%)\nlightness(#f00)\n</code></pre>\n\n<pre><code class=\"language-stylus\">lighten(color, 10%)\ndarken(color, 10%)\nsaturate(color, 10%)\ndesaturate(color, 10%)\ninvert(color)\n</code></pre>\n\n<pre><code class=\"language-stylus\">tint(color, 50%) // mix with white\nshade(color, 50%) // mix with black\n</code></pre>\n\n<pre><code class=\"language-stylus\">unquote(string)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html\">Built-in functions</a></p>\n\n<h3 id=\"image-size\">Image size</h3>\n\n<pre><code class=\"language-stylus\">width: image-size('tux.png')[0]\nheight: image-size('tux.png')[1]\n</code></pre>\n\n<p>Returns the width and height of a given image.</p>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#image-sizepath\">image-size</a></p>\n\n<h3 id=\"caching\">Caching</h3>\n\n<pre><code class=\"language-stylus\">size($width)\n +cache('w' + $width)\n width: $width\n.a { size: 10px }\n.b { size: 10px }\n</code></pre>\n\n<pre><code class=\"language-stylus\">// yields: .a, b { width: 10px }\n</code></pre>\n\n<p>Applies its contents to the given selector on the first call, but would @extend the first call’s selector at the second call with the same params.</p>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#cachekeys\">cache</a></p>\n\n<h3 id=\"add-property\">Add Property</h3>\n\n<pre><code class=\"language-stylus\">gradient(color)\n add-property('background-image', linear-gradient(top, color, darken(color, 20%)))\n color\n</code></pre>\n\n<pre><code class=\"language-stylus\">body\n background: gradient(red)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#add-propertyname-expr\">add-property</a></p>\n\n<h3 id=\"sprintf\">sprintf</h3>\n\n<pre><code class=\"language-stylus\">'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))\n// → -webkit-gradient(linear, 0 0, 0 100%)\n</code></pre>\n\n<pre><code class=\"language-stylus\">s(\"rgba(0, 0, 0, %s)\", 0.3)\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#sfmt-\">s</a></p>\n\n<h3 id=\"embed-url\">Embed URL</h3>\n\n<pre><code>background: embedurl('logo.png')\n// → background: url(\"data:image/png;base64,…\")\n</code></pre>\n\n<p>See: <a href=\"http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding\">embedurl</a></p>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-20"
},{
"id": "sublime-text",
"title": "Sublime Text",
"url": "/sublime-text",
"category": "Apps",
"keywords": null,
"content_html": "<h3 id=\"select--expand\">Select &amp; Expand</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>⌘ D</code></td>\n <td>select current word (repeat to include next instance of word)</td>\n </tr>\n <tr>\n <td><code>⌘ L</code></td>\n <td>select current line (repeat to include next line)</td>\n </tr>\n <tr>\n <td><code>⌘ ⇧ L</code></td>\n <td>split selection into multiple lines</td>\n </tr>\n <tr>\n <td><code>⌘ ⇧ A</code></td>\n <td>select text inside tag (repeat to expand)</td>\n </tr>\n <tr>\n <td><code>Ctrl ⇧ M</code></td>\n <td>select to curly or angle brackets (repeat to expand)</td>\n </tr>\n </tbody>\n</table>\n\n<p>Replace ⌘ with Ctrl on Windows and Linux.</p>\n\n<h3 id=\"code-folding\">Code Folding</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>⌘ Alt [</code></td>\n <td>fold closest block</td>\n </tr>\n <tr>\n <td><code>⌘ Alt ]</code></td>\n <td>unfold closest block</td>\n </tr>\n <tr>\n <td><code>⌘ K</code> <code>⌘ 1</code></td>\n <td>fold all first level code blocks</td>\n </tr>\n <tr>\n <td><code>⌘ K</code> <code>⌘ 2</code></td>\n <td>fold all second level code blocks</td>\n </tr>\n <tr>\n <td><code>⌘ K</code> <code>⌘ 3 (etc)</code></td>\n <td>fold all third level code blocks (etc)</td>\n </tr>\n <tr>\n <td><code>⌘ K</code> <code>⌘ T</code></td>\n <td>fold all HTML attributes</td>\n </tr>\n <tr>\n <td><code>⌘ K</code> <code>⌘ 0</code></td>\n <td>unfold everything</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"editing\">Editing</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>⌘ ⇧ D</code></td>\n <td>duplicate current line/selection</td>\n </tr>\n <tr>\n <td><code>⌘ ⇧ K</code></td>\n <td>delete current line/selection</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"goto\">Goto</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>⌘ P</code></td>\n <td>goto anything</td>\n </tr>\n <tr>\n <td><code>⌘ G</code></td>\n <td>goto line number</td>\n </tr>\n <tr>\n <td><code>⌘ R</code></td>\n <td>goto symbol</td>\n </tr>\n <tr>\n <td><code>⌘ P, :</code></td>\n <td>goto line number (enter number after <code>:</code>)</td>\n </tr>\n <tr>\n <td><code>⌘ P, #</code></td>\n <td>goto and list fuzzy-matches of string (enter characters after <code>#</code>)</td>\n </tr>\n <tr>\n <td><code>⌘ P, @</code></td>\n <td>goto and list symbol (begin typing symbol name after <code>@</code>)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"command-line\">Command line</h3>\n\n<pre><code class=\"language-sh\">$ subl .\n$ subl README.md\n</code></pre>\n\n<p>Use <code>subl</code> to open files in Sublime from the terminal.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "superagent",
"title": "Superagent",
"url": "/superagent",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"response-object\">Response object</h3>\n<pre><code class=\"language-javascript\"> res: {\n // The HTTP Status Code (see: httpstatuses.com for definitions on HTTP status codes)\n status: 202,\n // True when res.status is 2xx\n ok: true,\n // True when res.status is 4xx or 5xx\n error: false,\n // True when res.status is 4xx\n clientError: false,\n // True when res.status is 5xx\n serverError: false,\n\n // True when res.status == 202\n accepted: true,\n // True when res.status == 204 || res.status == 1223 \n noContent: false,\n // True when res.status == 400\n badRequest: false,\n // True when res.status == 401\n unauthorized: false,\n // True when res.status == 406\n notAcceptable: false,\n // True when res.status == 404\n notFound: false,\n // True when res.status == 403\n forbidden: false,\n\n // Unparsed response text\n text: '{\"user\":{\"username\":\"JohnDoe\",\"role\":\"admin\"}}'\n\n // Parsed response text (only if response is 'application/json' or 'application/x-www-form-urlencoded'\n body: {\n // Example of parsed object from res.text\n user: {\n username: 'JohnDoe',\n role: 'admin'\n }\n }\n\n // The content-type (parsed from headers)\n type: 'application/json'\n // The charset (parsed from headers)\n charset: 'UTF-8'\n // Header object with each header field as a property\n headers: {\n 'content-type': 'application/json; charset=UTF-8',\n ...\n }\n}\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": ["WIP"],
"updated": "2018-04-21"
},{
"id": "tabular",
"title": "Tabular",
"url": "/tabular",
"category": "Vim",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"common-usage\">Common usage</h2>\n\n<h3 id=\"tables\">Tables</h3>\n\n<pre class=\"-setup\"><code>:Tab /|\n</code></pre>\n\n<pre><code>| Fruit | Color |\n| ----- | ----- |\n| Apple | Red |\n| Banana | Yellow |\n| Kiwi | Green |\n</code></pre>\n\n<h3 id=\"variables\">Variables</h3>\n\n<pre class=\"-setup\"><code>:Tab /=\n</code></pre>\n\n<pre><code>title = \"Hello\"\nsrc = \"image.jpg\"\nwidth = 640\n</code></pre>\n\n<h3 id=\"colons\">Colons</h3>\n\n<pre class=\"-setup\"><code>:Tab /:\\zs/l0l1\n</code></pre>\n\n<pre><code>title: \"Hello world\"\ndescription: \"This is a description\"\nsrc: \"image.jpg\"\nheight: 320\nwidth: 640\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"tab-command\">Tab command</h2>\n\n<h3 id=\"basic-example\">Basic example</h3>\n\n<pre class=\"-setup\"><code>:Tab /:\n</code></pre>\n\n<pre><code class=\"language-bash\">title : My picture\nsrc : img.jpg\n</code></pre>\n\n<h3 id=\"right-align\">Right align</h3>\n\n<pre class=\"-setup\"><code>:Tab /:/r0\n</code></pre>\n\n<pre><code class=\"language-bash\">title:My picture\n src: img.jpg\n</code></pre>\n\n<h3 id=\"the-zs-atom\">The \\zs atom</h3>\n\n<pre class=\"-setup\"><code>:Tab /:\\zs\n</code></pre>\n\n<pre><code>title: My picture\nsrc: img.jpg\n</code></pre>\n\n<p>The <code>\\zs</code> atom will exclude the <code>:</code> from the search match.</p>\n\n<h3 id=\"specifier\">Specifier</h3>\n\n<pre class=\"-setup\"><code>:Tab /:/r1c1l0\n</code></pre>\n\n<pre><code class=\"language-bash\">title : My picture\n src : img.jpg\n</code></pre>\n\n<h4 id=\"explanation\">Explanation</h4>\n\n<ul>\n <li><code>r1</code> – Right align with 1 space</li>\n <li><code>c1</code> – Center align the comma with 1 space</li>\n <li><code>l0</code> – Left align with 0 spaces</li>\n</ul>\n\n<h3 id=\"regexp\">Regexp</h3>\n\n<pre class=\"-setup\"><code>:Tab /^[^,]*\\zs,/r0\n</code></pre>\n\n<pre><code class=\"language-bash\">abc,hello\n c,hi there\n a,yo\n</code></pre>\n\n<h3 id=\"specifiers\">Specifiers</h3>\n\n<table>\n <thead>\n <tr>\n <th>Specifier</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>r1c1l0</code></td>\n <td>multiple specifiers, one per column<br />(the separator counts as a column)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>lN</code></td>\n <td>Left-align (with N spaces padding)</td>\n </tr>\n <tr>\n <td><code>rN</code></td>\n <td>Right-align (with N spaces padding)</td>\n </tr>\n <tr>\n <td><code>cN</code></td>\n <td>Center-align (with N spaces padding)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://github.com/godlygeek/tabular\">godlygeek/tabular</a> <em>(github.com)</em></li>\n <li><a href=\"http://vimcasts.org/episodes/aligning-text-with-tabular-vim/\">Aligning text with Tabular.vim</a> <em>(vimcasts.org)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/godlygeek/tabular\">Tabular</a> is a Vim script for text alignment.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-11"
},{
"id": "tape",
"title": "Tape",
"url": "/tape",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<pre><code class=\"language-js\">test('things', (t) =&gt; {\n t.plan(1)\n\n t.equal('actual', 'expected')\n t.equal('actual', 'expected', 'should be equal') // messages are optional\n\n t.end(err)\n t.fail('msg')\n t.pass('msg')\n t.timeoutAfter(2000)\n t.skip('msg')\n\n t.ok(value, 'is truthy')\n t.notOk(value, 'is falsy')\n t.error(err, 'is falsy (print err.message)')\n\n t.equal(actual, expected, 'is equal')\n t.notEqual\n\n t.deepEqual(actual, expected, 'is equal (use node's deepEqual)')\n t.notDeepEqual\n\n t.looseEqual(actual, expected, 'is equal (use node's deepEqual with ==)')\n t.notLooseEqual\n\n t.throws(fn, /FooError/)\n t.throws(fn, FooError /* class */)\n t.doesNotThrow\n\n t.comment('message')\n})\n</code></pre>\n\n<pre><code class=\"language-js\">test.only((t) =&gt; { ... })\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "textile",
"title": "Textile",
"url": "/textile",
"category": "Markup",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"reference\">Reference</h2>\n\n<h3 id=\"inlines\">Inlines</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>_em_</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>*strong*</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>__bold-italic__</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>@code@</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>??citation??</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>-strikethrough-</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>+insertion+</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>%span%</code></td>\n <td>HTML tag</td>\n </tr>\n <tr>\n <td><code>%{color:red}formatting%</code></td>\n <td>CSS styles</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"blocks\">Blocks</h3>\n\n<pre><code class=\"language-textile\">h1. Header 1\n</code></pre>\n\n<pre><code class=\"language-textile\">h2. Header 2\n</code></pre>\n\n<pre><code class=\"language-textile\">bq. Blockquote\n</code></pre>\n\n<pre><code class=\"language-textile\">p(classname). Class.\n</code></pre>\n\n<pre><code class=\"language-textile\">p(#id). ID.\n</code></pre>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-textile\">## ordered list\n</code></pre>\n\n<pre><code class=\"language-textile\">* unordered list\n</code></pre>\n\n<h3 id=\"links\">Links</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>\"Hypertext\":index.html</code></td>\n <td>Link</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>\"Text link\":link</code> <br /> <code>[link]http://link.com</code></td>\n <td>Link via reference</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>!image.jpg!</code></td>\n <td>Image</td>\n </tr>\n <tr>\n <td><code>!image.jpg(title text)!</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>!image.jpg!:link.html</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>!&gt;right.jpg!</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"escaped-html\">Escaped HTML</h3>\n\n<pre><code class=\"language-html\">&lt;pre&gt;\nI am &lt;b&gt;very serious.&lt;/b&gt; -- this\nwill get escaped.\n&lt;/pre&gt;\n</code></pre>\n\n<h3 id=\"line-breaks\">Line breaks</h3>\n\n<pre><code class=\"language-textile\">Line breaks.\nJust break the lines.\n</code></pre>\n\n<h3 id=\"entities\">Entities</h3>\n\n<pre><code class=\"language-textile\">one(TM), two(R), three(C).\n</code></pre>\n\n<h3 id=\"horizontal-line\">Horizontal line</h3>\n\n<pre><code class=\"language-textile\">--\n</code></pre>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n\n<pre><code class=\"language-textile\">Footnotes[1].\n</code></pre>\n\n<pre><code class=\"language-textile\">fn1. Something.\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-20"
},{
"id": "tig",
"title": "Tig",
"url": "/tig",
"category": "Git",
"keywords": null,
"content_html": "<h3 id=\"installing\">Installing</h3>\n\n<pre><code class=\"language-bash\"># MacOS + Homebrew\n$ brew install tig --HEAD\n</code></pre>\n\n<pre><code class=\"language-bash\"># Ubuntu\n$ sudo apt install tig\n</code></pre>\n\n<h3 id=\"invocation\">Invocation</h3>\n\n<table>\n <thead>\n <tr>\n <th>Command</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>tig</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>tig status</code></td>\n <td>Status</td>\n </tr>\n <tr>\n <td><code>tig blame FILE</code></td>\n <td>Blame</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>tig master</code></td>\n <td>Show a branch</td>\n </tr>\n <tr>\n <td><code>tig test..master</code></td>\n <td>Show difference between two branches</td>\n </tr>\n <tr>\n <td><code>tig FILE</code></td>\n <td>Show history of file</td>\n </tr>\n <tr>\n <td><code>tig v0.0.3:README</code></td>\n <td>Show contents of file in a specific revision</td>\n </tr>\n </tbody>\n</table>\n\n<p>You can substitute <code>git log</code> → <code>tig</code>.</p>\n\n<h2 class=\"-three-column\" id=\"shortcut-keys\">Shortcut keys</h2>\n\n<h3 id=\"switching-views\">Switching views</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>m</code></td>\n <td>Main view</td>\n </tr>\n <tr>\n <td><code>s</code></td>\n <td>Status</td>\n </tr>\n <tr>\n <td><code>t</code></td>\n <td>Tree (files)</td>\n </tr>\n <tr>\n <td><code>y</code></td>\n <td>Stash view</td>\n </tr>\n <tr>\n <td><code>g</code></td>\n <td>Grep</td>\n </tr>\n <tr>\n <td><code>h</code></td>\n <td>Help</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"all-views\">All views</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>j</code> <code>k</code></td>\n <td>Up/down</td>\n </tr>\n <tr>\n <td><code>J</code> <code>K</code></td>\n <td>Next/previous</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>&lt;</code></td>\n <td>Back</td>\n </tr>\n <tr>\n <td><code>R</code></td>\n <td>Refresh</td>\n </tr>\n <tr>\n <td><code>q</code></td>\n <td>Close</td>\n </tr>\n <tr>\n <td><code>Q</code></td>\n <td>Close all</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^N</code></td>\n <td>Next on parent view</td>\n </tr>\n <tr>\n <td><code>^P</code></td>\n <td>Previous on parent view</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"m---main-view\"><code>m</code> - Main view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>D</code></td>\n <td>Toggle date display modes</td>\n </tr>\n <tr>\n <td><code>A</code></td>\n <td>Toggle author display modes</td>\n </tr>\n <tr>\n <td><code>X</code></td>\n <td>Toggle commit sha</td>\n </tr>\n <tr>\n <td><code>C</code></td>\n <td>Cherry pick a commit</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"s---stage-view\"><code>s</code> - Stage view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>u</code></td>\n <td>Stage/unstage file or chunk</td>\n </tr>\n <tr>\n <td><code>!</code></td>\n <td>Revert file or chunk</td>\n </tr>\n <tr>\n <td><code>C</code></td>\n <td>Commit</td>\n </tr>\n <tr>\n <td><code>M</code></td>\n <td>Merge</td>\n </tr>\n <tr>\n <td><code>1</code></td>\n <td>Stage line</td>\n </tr>\n <tr>\n <td><code>[</code> <code>]</code></td>\n <td>Increase/decrease the diff context</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"h---branch-view\"><code>h</code> - Branch view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>i</code></td>\n <td>Change sort header</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"h---blame-view\"><code>h</code> - Blame view</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>,</code></td>\n <td>Parent commit</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-08-29"
},{
"id": "tmux",
"title": "tmux",
"url": "/tmux",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"commands\">Commands</h3>\n\n<pre><code>$ tmux\n -u # UTF8 mode\n -S ~/.tmux.socket\n</code></pre>\n\n<h4 id=\"sessions\">Sessions</h4>\n\n<pre><code>$ tmux new\n$ tmux new -s session_name\n\n$ tmux attach # Default session\n$ tmux attach -t session_name\n\n$ tmux switch -t session_name\n\n$ tmux ls # List sessions\n\n$ tmux detach\n</code></pre>\n\n<h4 id=\"windows\">Windows</h4>\n\n<pre><code>$ tmux new-window\n</code></pre>\n\n<h3 id=\"help\">Help</h3>\n\n<pre><code>C-b ?\n</code></pre>\n\n<h3 id=\"scrolling\">Scrolling</h3>\n\n<pre><code>C-b [ # Enter scroll mode then press up and down\n</code></pre>\n\n<h3 id=\"copypaste\">Copy/paste</h3>\n\n<pre><code>C-b [ # 1. Enter scroll mode first.\nSpace # 2. Start selecting and move around.\nEnter # 3. Press enter to copy.\nC-b ] # Paste\n</code></pre>\n\n<h3 id=\"panes\">Panes</h3>\n\n<pre><code>C-b % # vert\nC-b \" # horiz\nC-b hkjl # navigation\nC-b HJKL # resize\nC-b o # next window\nC-b q # show pane numbers\nC-b x # close pane\n\nC-b { or } # move windows around\n</code></pre>\n\n<h3 id=\"windows-1\">Windows</h3>\n\n<pre><code>C-b c # New window\nC-b 1 # Go to window 1\nC-b n # Go to next window\nC-b p # Go to previous window\nC-b w # List all window\n</code></pre>\n\n<h3 id=\"detachattach\">Detach/attach</h3>\n\n<pre><code>C-b d # Detach\nC-b ( ) # Switch through sessions\n$ tmux attach\n</code></pre>\n\n<h3 id=\"niceties\">Niceties</h3>\n\n<pre><code>C-b t # Time\n</code></pre>\n\n<h2 id=\"status-formats\">Status formats</h2>\n\n<pre><code>setw -g window-status-format `#[fg=8,bg=default]#I`\n</code></pre>\n\n<p>See <code>message-command-style</code> in the man page.</p>\n\n<h3 id=\"attributecolors\">Attribute/colors</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>#[fg=1]</code></td>\n <td>standard color</td>\n </tr>\n <tr>\n <td><code>#[fg=yellow]</code></td>\n <td>yellow</td>\n </tr>\n <tr>\n <td><code>#[bold]</code></td>\n <td>bold</td>\n </tr>\n <tr>\n <td><code>#[fg=colour240]</code></td>\n <td>256 color</td>\n </tr>\n <tr>\n <td><code>#[fg=default]</code></td>\n <td>default</td>\n </tr>\n <tr>\n <td><code>#[fg=1,bg=2]</code></td>\n <td>combinations</td>\n </tr>\n <tr>\n <td><code>#[default]</code></td>\n <td>reset</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"colors\">Colors</h3>\n\n<ul>\n <li><code>black</code> <code>red</code> <code>green</code> <code>yellow</code> <code>blue</code> <code>magenta</code> <code>cyan</code> <code>white</code></li>\n <li><code>brightred</code> (and so on)</li>\n <li><code>colour0</code> … <code>colour255</code></li>\n <li><code>#333</code> (rgb hex)</li>\n</ul>\n\n<h3 id=\"attributes\">Attributes</h3>\n\n<ul>\n <li><code>bold</code> <code>underscore</code> <code>blink</code> <code>noreverse</code> <code>hidden</code> <code>dim</code> <code>italics</code></li>\n</ul>\n\n<h3 id=\"variables\">Variables</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>#(date)</code></td>\n <td>shell command</td>\n </tr>\n <tr>\n <td><code>#I</code></td>\n <td>window index</td>\n </tr>\n <tr>\n <td><code>#S</code></td>\n <td>session name</td>\n </tr>\n <tr>\n <td><code>#W</code></td>\n <td>window name</td>\n </tr>\n <tr>\n <td><code>#F</code></td>\n <td>window flags</td>\n </tr>\n <tr>\n <td><code>#H</code></td>\n <td>Hostname</td>\n </tr>\n <tr>\n <td><code>#h</code></td>\n <td>Hostname, short</td>\n </tr>\n <tr>\n <td><code>#D</code></td>\n <td>pane id</td>\n </tr>\n <tr>\n <td><code>#P</code></td>\n <td>pane index</td>\n </tr>\n <tr>\n <td><code>#T</code></td>\n <td>pane title</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"options\">Options</h2>\n\n<pre><code>set -g status-justify [left|centre|right]\nset -g status-left '...'\n\nsetw -g window-status-style\nsetw -g window-status-activity-style\nsetw -g window-status-bell-style\nsetw -g window-status-content-style\nsetw -g window-status-current-style\nsetw -g window-status-last-style\n\nsetw -g window-status-format\nsetw -g window-status-current-format\n\nsetw -g window-status-separator\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "tomdoc",
"title": "Tomdoc",
"url": "/tomdoc",
"category": "Markup",
"keywords": null,
"content_html": "<h3 class=\"-prime\" id=\"tomdoc\">Tomdoc</h3>\n\n<pre><code class=\"language-ruby\"># Public: Duplicate some text an arbitrary number of times.\n#\n# text - The String to be duplicated.\n# count - The Integer number of times to duplicate the text.\n#\n# Examples\n#\n# multiplex('Tom', 4)\n# # =&gt; 'TomTomTomTom'\n#\n# Returns the duplicated String.\ndef multiplex(text, count)\n text * count\nend\n</code></pre>\n\n<p>See <a href=\"http://tomdoc.org/\">tomdoc.org</a>.</p>\n\n<h3 id=\"tags\">Tags</h3>\n\n<ul>\n <li><code>Deprecated</code></li>\n <li><code>Internal</code></li>\n <li><code>Public</code></li>\n</ul>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-ruby\"># options - The Hash options used to refine the selection (default: {}):\n# :color - The String color to restrict by (optional).\n# :weight - The Float weight to restrict by. The weight should\n# be specified in grams (optional).\n</code></pre>\n\n<h3 id=\"yields\">Yields</h3>\n\n<pre><code class=\"language-ruby\"># Yields the Integer index of the iteration.\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Returns the duplicated String.\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Returns nothing.\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Raises Errno::ENOENT if the file can't be found.\n</code></pre>\n\n<pre><code class=\"language-ruby\"># Returns something else and this is a wrapped\n# multi-line comment.\n</code></pre>\n\n<h3 id=\"signatures\">Signatures</h3>\n\n<pre><code class=\"language-ruby\"># Signature\n#\n# find_by_&lt;field&gt;[_and_&lt;field&gt;...](args)\n#\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "top",
"title": "top",
"url": "/top",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"shortcuts\">Shortcuts</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>h</code></td>\n <td>shows help</td>\n </tr>\n <tr>\n <td><code>q</code></td>\n <td>quits the program</td>\n </tr>\n <tr>\n <td><code>m</code></td>\n <td>switches memory view</td>\n </tr>\n <tr>\n <td><code>k</code></td>\n <td>kills process</td>\n </tr>\n <tr>\n <td><code>Shift+p</code></td>\n <td>sorts by CPU usage</td>\n </tr>\n <tr>\n <td><code>Shift+m</code></td>\n <td>sorts by memory usage</td>\n </tr>\n <tr>\n <td><code>Shift+r</code></td>\n <td>reverses sorting</td>\n </tr>\n <tr>\n <td><code>Shift+l</code></td>\n <td>searches for string</td>\n </tr>\n <tr>\n <td><code>o</code></td>\n <td>adds a filter</td>\n </tr>\n <tr>\n <td><code>=</code></td>\n <td>clears filters</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "<p>See the processes in your Unix machine.</p>",
"description_html": "",
"tags": null,
"updated": "2020-01-01"
},{
"id": "travis-gh-pages",
"title": "Deploy gh-pages via Travis",
"url": "/travis-gh-pages",
"category": "Git",
"keywords": null,
"content_html": "<p>Taken from https://medium.com/@nthgergo/publishing-gh-pages-with-travis-ci-53a8270e87db</p>\n\n<h3 id=\"create-an-oauth-token-and-encrypt-it\">Create an OAuth token and encrypt it</h3>\n\n<p>Use https://github.com/settings/tokens/new</p>\n\n<pre><code class=\"language-sh\"># via ruby\ngem install travis\ntravis encrypt -r user/repo GITHUB_TOKEN=[the token here]\n</code></pre>\n\n<h3 id=\"make-it-run-the-deploy-script-on-deploy\">Make it run the deploy script on deploy</h3>\n\n<pre><code class=\"language-yaml\"> # .travis.yml\nscript:\n - bash ./scripts/deploy-to-gh-pages.sh\nenv:\n global:\n - GITHUB_REPO: \"user/repo\"\n - secure: \"nlnXJW/imf/w...\" # &lt;-- from travis-encrypt\n</code></pre>\n\n<h3 id=\"write-deployer\">Write deployer</h3>\n\n<p>Create the file <code>scripts/deploy-to-gh-pages.sh</code></p>\n\n<pre><code class=\"language-sh\">#!/bin/bash\n# See https://medium.com/@nthgergo/publishing-gh-pages-with-travis-ci-53a8270e87db\nset -o errexit\n\nrm -rf public\nmkdir public\n\n# config\ngit config --global user.email \"nobody@nobody.org\"\ngit config --global user.name \"Travis CI\"\n\n# build (CHANGE THIS)\nmake\n\n# deploy\ncd public\ngit init\ngit add .\ngit commit -m \"Deploy to Github Pages\"\ngit push --force --quiet \"https://${GITHUB_TOKEN}@$github.com/${GITHUB_REPO}.git\" master:gh-pages &gt; /dev/null 2&gt;&amp;1\n</code></pre>\n\n<p>From Ractive, this might be useful in certain cases:</p>\n\n<pre><code>if [ \"$TRAVIS_PULL_REQUEST\" != \"false\" -o \"$TRAVIS_BRANCH\" != \"master\" ]; then exit 0; fi\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "travis",
"title": "Travis.yml",
"url": "/travis",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"node\">Node</h3>\n\n<pre><code class=\"language-yml\">language: node_js\nnode_js:\n- '4'\n</code></pre>\n\n<ul>\n <li>Provides: 0.10, 0.8, 0.6, 0.11 (latest dev)</li>\n <li>Defaults install to <code>npm install</code></li>\n <li>Defaults test to <code>npm test</code></li>\n</ul>\n\n<h3 id=\"ruby\">Ruby</h3>\n\n<pre><code class=\"language-yml\">language: ruby\nrvm:\n- 2.0.0\n- 1.9.3\n- 1.8.7\n- rbx-19mode\n- jruby-19mode\n- jruby-18mode\n</code></pre>\n\n<ul>\n <li>Defaults install to <code>bundle install</code></li>\n <li>Defaults test to <code>rake</code></li>\n</ul>\n\n<h3 id=\"build-lifecycle\">Build lifecycle</h3>\n\n<ul>\n <li><code>before_install</code></li>\n <li><code>install</code></li>\n <li><code>before_script</code></li>\n <li><code>script</code></li>\n <li><code>after_success</code> or <code>after_failure</code></li>\n <li><code>after_script</code></li>\n <li>OPTIONAL <code>before_deploy</code></li>\n <li>OPTIONAL <code>deploy</code></li>\n <li>OPTIONAL <code>after_deploy</code></li>\n</ul>\n\n<h3 id=\"branches\">Branches</h3>\n\n<pre><code>branches:\n except: [\"..\"]\n only: [\"master\"]\n</code></pre>\n\n<h3 id=\"environment-vars\">Environment vars</h3>\n\n<pre><code>env:\n - \"rack=master\"\n - \"rack=1.3.4\"\n</code></pre>\n\n<h3 id=\"custom-test-command\">Custom test command</h3>\n\n<pre><code>script: make test\nbefore_script: make pretest\nafter_script: make clean\n\nbefore_script:\n - make pretest1\n - make pretest2\n</code></pre>\n\n<h3 id=\"branches-1\">Branches</h3>\n\n<pre><code>branches:\n except:\n - legacy\n\n only:\n - gh-pages\n - /^deploy/\n</code></pre>\n\n<h3 id=\"apt-packages\">Apt packages</h3>\n\n<pre><code>before_install:\n- sudo apt-get update -q\n- sudo apt-get install gcc-4.8 -y\n</code></pre>\n<p><a href=\"https://docs.travis-ci.com/user/installing-dependencies/\">https://docs.travis-ci.com/user/installing-dependencies/</a></p>\n\n<h3 id=\"etc\">Etc</h3>\n\n<pre><code>gemfile:\n - gemfiles/Gemfile.rails-2.3.x\n - gemfiles/Gemfile.rails-3.0.x\n</code></pre>\n\n<h3 id=\"notifications\">Notifications</h3>\n\n<pre><code>notifications:\n email:\n - dropbox+travis@ricostacruz.com\n\n email:\n recipients:\n - dropbox+travis@ricostacruz.com\n on_success: &lt;always|never|change&gt; # default: change\n on_failure: &lt;always|never|change&gt; # default: always\n\n irc: \"chat.freenode.net#travis\"\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>http://about.travis-ci.org/docs/user/build-configuration/</li>\n <li>http://about.travis-ci.org/docs/user/languages/javascript-with-nodejs/</li>\n <li>http://about.travis-ci.org/docs/user/languages/ruby/</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "typescript",
"title": "TypeScript",
"url": "/typescript",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<p>TypeScript is just like ES2015 with type-checking. All ES2015 (classes, etc) should work.</p>\n\n<h2 id=\"basic-types\">Basic types</h2>\n\n<pre><code class=\"language-ts\">any\nvoid\n\nboolean\nnumber\nstring\n\nnull\nundefined\n\nstring[] /* or Array&lt;string&gt; */\n[string, number] /* tuple */\n\nstring | null | undefined /* union */\n\nnever /* unreachable */\n</code></pre>\n\n<pre><code class=\"language-ts\">enum Color {Red, Green, Blue = 4}\nlet c: Color = Color.Green\n</code></pre>\n\n<h2 id=\"declarations\">Declarations</h2>\n\n<pre><code class=\"language-ts\">let isDone: boolean\nlet isDone: boolean = false\n</code></pre>\n\n<pre><code class=\"language-ts\">function add (a: number, b: number): number {\n return a + b\n}\n\n// Return type is optional\nfunction add (a: number, b: number) { ... }\n</code></pre>\n\n<h2 id=\"type-assertions\">Type assertions</h2>\n\n<h4 id=\"variables\">Variables</h4>\n<pre><code class=\"language-ts\">let len: number = (input as string).length\nlet len: number = (&lt;string&gt; input).length /* not allowed in JSX */\n</code></pre>\n\n<h4 id=\"functions\">Functions</h4>\n<pre><code class=\"language-ts\">function object(this: {a: number, b: number}, a: number, b: number) {\n this.a = a;\n this.b = b;\n return this;\n}\n\n// this is used only for type declaration\nlet a = object(1,2);\n// a has type {a: number, b: number}\n</code></pre>\n\n<h2 id=\"interfaces\">Interfaces</h2>\n\n<h3 id=\"inline\">Inline</h3>\n\n<pre><code class=\"language-ts\">function printLabel (options: { label: string }) {\n console.log(options.label)\n}\n\n// Note the semicolon\nfunction getUser (): { name: string; age?: number } {\n}\n</code></pre>\n\n<h3 id=\"explicit\">Explicit</h3>\n\n<pre><code class=\"language-ts\">interface LabelOptions {\n label: string\n}\n\nfunction printLabel(options: LabelOptions) { ... }\n</code></pre>\n\n<h3 id=\"optional-properties\">Optional properties</h3>\n\n<pre><code class=\"language-ts\">interface User {\n name: string,\n age?: number\n}\n</code></pre>\n\n<h3 id=\"read-only\">Read only</h3>\n\n<pre><code class=\"language-ts\">interface User {\n readonly name: string\n}\n</code></pre>\n\n<h3 id=\"dynamic-keys\">Dynamic keys</h3>\n\n<pre><code class=\"language-ts\">{\n [key: string]: Object[]\n}\n</code></pre>\n\n<h2 id=\"type-aliases\">Type aliases</h2>\n\n<pre><code class=\"language-ts\">type Name = string | string[]\n</code></pre>\n\n<h2 id=\"function-types\">Function types</h2>\n\n<pre><code class=\"language-ts\">interface User { ... }\n\nfunction getUser(callback: (user: User) =&gt; any) { callback({...}) }\n\ngetUser(function (user: User) { ... })\n</code></pre>\n\n<h2 id=\"classes\">Classes</h2>\n\n<pre><code class=\"language-ts\">class Point {\n x: number\n y: number\n static instances = 0\n constructor(x: number, y: number) {\n this.x = x\n this.y = y\n }\n}\n</code></pre>\n\n<h4 id=\"inheritance\">Inheritance</h4>\n\n<pre><code class=\"language-ts\">class Point {...}\n\nclass Point3D extends Point {...}\n\ninterface Colored {...}\n\nclass Pixel extends Point implements Colored {...}\n</code></pre>\n\n<h4 id=\"short-fields-initialisation\">Short fields initialisation</h4>\n\n<pre><code class=\"language-ts\">class Point {\n static instances = 0;\n constructor(\n public x: number,\n public y: number,\n ){}\n}\n</code></pre>\n\n<h4 id=\"fields-which-do-not-require-initialisation\">Fields which do not require initialisation</h4>\n<pre><code class=\"language-ts\">class Point {\n public someUselessValue!: number;\n ...\n}\n</code></pre>\n\n<h2 id=\"generics\">Generics</h2>\n\n<pre><code class=\"language-ts\">class Greeter&lt;T&gt; {\n greeting: T\n constructor(message: T) {\n this.greeting = message\n }\n}\n\nlet greeter = new Greeter&lt;string&gt;('Hello, world')\n</code></pre>\n\n<h2 id=\"modules\">Modules</h2>\n\n<pre><code class=\"language-ts\">export interface User { ... }\n</code></pre>\n\n<h2 id=\"type-extraction\">Type extraction</h2>\n\n<pre><code class=\"language-ts\">interface Building {\n room: {\n door: string,\n walls: string[],\n };\n}\n\ntype Walls = Building['room']['walls']; // string[]\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "ubuntu",
"title": "Ubuntu",
"url": "/ubuntu",
"category": "Others",
"keywords": null,
"content_html": "<h3 id=\"aptitude-stuff\">Aptitude stuff</h3>\n\n<pre><code>aptitude search mysql # Look for something\ndpkg -S `which tsclient` # What package does it belong to?\ndpkg -L aria2c # What does this package provide?\ndpkg -i *.deb # Install a deb file\ndpkg -s nodejs # Show info\n\ndpkg --get-selections # list installed packages\n</code></pre>\n\n<h3 id=\"apt-archives-path\">Apt archives path</h3>\n\n<pre><code>/var/cache/apt/archives\n</code></pre>\n\n<h3 id=\"list-services\">List services</h3>\n\n<pre><code>service --status-all\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "umdjs",
"title": "Universal JS module loader",
"url": "/umdjs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"with-dependency\"><a href=\"https://github.com/umdjs/umd/blob/master/amdWebGlobal.js\">With dependency</a></h3>\n\n<pre><code class=\"language-js\">;(function (root, factory) {\n\n if (typeof define === 'function' &amp;&amp; define.amd) {\n define(['jquery'], factory);\n } else if (typeof exports === 'object') {\n module.exports = factory(require('jquery'));\n } else {\n root.YourModule = factory(root.jQuery);\n }\n\n}(this, function (jquery) {\n return {};\n}));\n</code></pre>\n\n<h3 id=\"no-dependencies\">No dependencies</h3>\n\n<pre><code class=\"language-js\">;(function (root, factory) {\n\n if (typeof define === 'function' &amp;&amp; define.amd) {\n define(factory);\n } else if (typeof exports === 'object') {\n module.exports = factory();\n } else {\n root.YourModule = factory();\n }\n\n}(this, function () {\n return {};\n}));\n</code></pre>\n\n<h3 id=\"supports-circular-references\"><a href=\"https://github.com/umdjs/umd/blob/master/commonjsStrict.js\">Supports circular references</a></h3>\n\n<pre><code class=\"language-js\">(function (root, factory) {\n\n if (typeof define === 'function' &amp;&amp; define.amd) {\n define(['exports', 'jquery'], factory);\n } else if (typeof exports === 'object') {\n factory(exports, require('jquery'));\n } else {\n factory((root.YourModule = {}), root.jQuery);\n }\n\n}(this, function (exports, jQuery) {\n exports.action = function () {};\n}));\n</code></pre>\n\n<h3 id=\"reference\">Reference</h3>\n\n<ul>\n <li>https://github.com/umdjs/umd</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "underscore-string",
"title": "Underscore-string",
"url": "/underscore-string",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code>// Use it like so:\n_.str.trim(\"hey\");\n_s.trim(\"hey\");\n\n// Unless you do:\n_.mixin(_.string.exports());\n\n// So you can:\n_.trim(\"hey\");\n_(\"hey\").trim();\n</code></pre>\n\n<h3 id=\"trimming\">Trimming</h3>\n\n<pre><code>_.truncate(\"Hello world\", 4) // =&gt; \"Hell...\"\n_.prune(\"Hello world\", 5) // =&gt; \"Hello...\"\n\n_.trim(\" foo \") // =&gt; \"foo\"\n_.trim(\"-foo-\", '-') // =&gt; \"foo\"\n_.ltrim\n_.rtrim\n</code></pre>\n\n<h3 id=\"numbers\">Numbers</h3>\n\n<pre><code>_.numberFormat(1000, 2) // =&gt; \"1,000.00\"\n</code></pre>\n\n<h3 id=\"caps\">Caps</h3>\n\n<pre><code>_.capitalize(\"foo bar\") // =&gt; \"Foo Bar\"\n_.humanize(\"hey-there foo\") // =&gt; \"Hey there foo\"\n_.titleize('My name is hi') // =&gt; \"My Name Is Hi\"\n\n_.dasherize('MozTransform') // =&gt; \"-moz-transform\"\n_.underscored('MozTransform') // =&gt; \"moz_transform\"\n_.classify('-moz-transform') // =&gt; \"MozTransform\"\n_.camelize('moz_transform') // =&gt; \"MozTransform\"\n\n_.slugify(\"hey there\") // =&gt; \"hey-there\"\n\n_.swapCase(\"hELLO\") // =&gt; \"Hello\"\n</code></pre>\n\n<h3 id=\"checks\">Checks</h3>\n\n<pre><code>_.startsWith('image.gif', 'image') // =&gt; true\n_.endsWith('image.gif', '.gif') // =&gt; true\n_.isBlank(\" \") // =&gt; true (also for \"\\n\", \"\")\n</code></pre>\n\n<h3 id=\"html\">HTML</h3>\n\n<pre><code>_.escapeHTML(\"&lt;div&gt;\")\n_.unescapeHTML(\"&amp;lt;div&amp;gt;\")\n_.stripTags(\"&lt;div&gt;hi&lt;/div&gt;\")\n</code></pre>\n\n<h3 id=\"quote\">Quote</h3>\n\n<pre><code>_.quote(\"hi\", '\"') // =&gt; '\"hi\"'\n_.unquote('\"hi\"') // =&gt; \"hi\"\n</code></pre>\n\n<h3 id=\"splits\">Splits</h3>\n\n<pre><code>_.lines(\"hi\\nthere\") // =&gt; [\"hi\",\"there\"]\n_.words(\"hi there you\") // =&gt; [\"hi\",\"there\",\"you\"]\n</code></pre>\n\n<h3 id=\"sprintf\">Sprintf</h3>\n\n<pre><code>_.sprintf(\"%.1f\", 1.17)\n</code></pre>\n\n<h3 id=\"pad\">Pad</h3>\n\n<pre><code>_.pad(\"1\", 8) // =&gt; \" 1\"\n_.pad(\"1\", 8, \"0\") // =&gt; \"00000001\"\n_.pad(\"1\", 8, \" \", \"right\") // =&gt; \"1 \"\n_.pad(\"1\", 8, \" \", \"both\") // =&gt; \" 1 \"\n\n_.lpad(..) // same as _.pad(.., 'left')\n_.rpad(..) // same as _.pad(.., 'right')\n_.lrpad(..) // same as _.pad(.., 'both')\n</code></pre>\n\n<h3 id=\"references\">References</h3>\n\n<ul>\n <li>https://github.com/epeli/underscore.string</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "unicode",
"title": "Unicode symbols",
"url": "/unicode",
"category": "Others",
"keywords": null,
"content_html": "<pre><code>✈ \\u2708 airplane\n❄ \\u2744 snowflake\n⚑ \\u2691 flag\n☯ \\u262f yinyang\n♞ \\u265e horse\n☀ \\u2600 rays\n⚠ \\u26a0 warning\n\n★ star\n☆ star2\n\n⚐ \\u2690 flag\n⚑ \\u2691 flag\n</code></pre>\n\n<h3 id=\"bullets\">Bullets</h3>\n\n<pre><code>• \\u2022\n· \\u00b7\n┄ \\u2504\n— \\u2014 (mdash)\n– \\u2013 (ndash)\n◦ \\u25e6 circle\n</code></pre>\n\n<h3 id=\"checks\">Checks</h3>\n\n<pre><code>✓ \\u2713 check\n✕ \\u2715\n✗ \\u2717 x mark\n✘ \\u2718 x mark bold\n❏ \\u274f checkbox\n× times\n</code></pre>\n\n<h3 id=\"spinners\">Spinners</h3>\n\n<pre><code> ◜◠◝◞◡◟\n ❘❙❚\n</code></pre>\n\n<h3 id=\"triangles-and-arrows\">Triangles and arrows</h3>\n\n<pre><code>▲\n▼\n▶\n\n⬅ \\u2b05\n⬆ \\u2b06\n⬇ \\u2b07\n\n◢\n◣\n◤\n◥\n\n« &amp;laquo;\n» &amp;raquo;\n‹ &amp;lsaquo;\n› &amp;rsaquo;\n• &amp;middot;\n\n⌘ – &amp;#x2318; – &amp;#8984; – Command Key\n⌥ – &amp;#x2325; – &amp;#8997; – Option Key\n⇧ – &amp;#x21E7; – &amp;#8679; – Shift Key\n⎋ – &amp;#x238B; – &amp;#9099; – ESC Key\n⇪ – &amp;#x21ea; – &amp;#8682; – Capslock\n⏎ – &amp;#x23ce; – &amp;#9166; – Return\n⌫ – &amp;#x232b; – &amp;#9003; – Delete / Backspace\n\n▸ \\u25b8 right arrow\n▹\n\n◇ \\u25c7\n◆\n\n◐\n◑\n◒\n◓\n\n\n♠ \\u2660\n♣ \\u2663\n♥ \\u2665\n♦ \\u2666\n\n\n✂ scissors\nℹ information &amp;#008505;\n♡ heart &amp;#009825;\n⚙ cog or gear &amp;#009881;\n✉ envelope &amp;#009993;\n✎ pencil &amp;#009998;\n</code></pre>\n\n<h3 id=\"javascript\">JavaScript</h3>\n\n<pre><code>\"x\".charCodeAt(0)\n\"x\".charCodeAt(0).toString(16)\n\nhttp://www.danshort.com/HTMLentities/index.php?w=dingb\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vagrant",
"title": "Vagrant",
"url": "/vagrant",
"category": "Devops",
"keywords": null,
"content_html": "<h3 id=\"get-started\">Get started</h3>\n\n<p class=\"-setup\">Add some base boxes:</p>\n\n<pre><code class=\"language-bash\">vagrant box add precise64 http://files.vagrantup.com/precise64.box\n</code></pre>\n\n<p>Work it:</p>\n\n<pre><code class=\"language-bash\">mkdir test_box\ncd test_box\nvagrant init precise64\n</code></pre>\n\n<p>Run it:</p>\n\n<pre><code class=\"language-bash\">vagrant up\nvagrant ssh\n</code></pre>\n\n<p>To stop, use one of the following:</p>\n\n<pre><code class=\"language-bash\">vagrant ssh # then: sudo shutdown -h now\nvagrant suspend\nvagrant destroy # !!\n</code></pre>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"http://vagrantup.com\">Vagrant website</a> <em>(vagrantup.com)</em></li>\n <li><a href=\"./vagrantfile\">Vagrantfile cheatsheet</a></li>\n</ul>",
"intro_html": "<p><a href=\"http://vagrantup.com\">Vagrant</a> lets you build isolated virtual environments for your apps.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vagrantfile",
"title": "Vagrantfile",
"url": "/vagrantfile",
"category": "Devops",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"vagrantfile\">Vagrantfile</h2>\n\n<pre><code class=\"language-rb\">Vagrant.configure(\"2\") do |config|\n # All Vagrant configuration is done here. The most common configuration\n # options are documented and commented below. For a complete reference,\n # please see the online documentation at vagrantup.com.\n\n # Every Vagrant virtual environment requires a box to build off of.\n config.vm.box = \"precise64\"\n\n # The url from where the 'config.vm.box' box will be fetched if it\n # doesn't already exist on the user's system.\n # config.vm.box_url = \"http://domain.com/path/to/above.box\"\n\n # Create a forwarded port mapping which allows access to a specific port\n # within the machine from a port on the host machine. In the example below,\n # accessing \"localhost:8080\" will access port 80 on the guest machine.\n # config.vm.network :forwarded_port, guest: 80, host: 8080\n\n # Create a private network, which allows host-only access to the machine\n # using a specific IP.\n # config.vm.network :private_network, ip: \"192.168.33.10\"\n\n # Create a public network, which generally matched to bridged network.\n # Bridged networks make the machine appear as another physical device on\n # your network.\n # config.vm.network :public_network\n\n # If true, then any SSH connections made will enable agent forwarding.\n # Default value: false\n # config.ssh.forward_agent = true\n\n # Share an additional folder to the guest VM. The first argument is\n # the path on the host to the actual folder. The second argument is\n # the path on the guest to mount the folder. And the optional third\n # argument is a set of non-required options.\n # config.vm.synced_folder \"../data\", \"/vagrant_data\"\n\n # Provider-specific configuration so you can fine-tune various\n # backing providers for Vagrant. These expose provider-specific options.\n # Example for VirtualBox:\n #\n # config.vm.provider :virtualbox do |vb|\n # # Don't boot with headless mode\n # vb.gui = true\n #\n # # Use VBoxManage to customize the VM. For example to change memory:\n # vb.customize [\"modifyvm\", :id, \"--memory\", \"1024\"]\n # end\n #\n # View the documentation for the provider you're using for more\n # information on available options.\n\n # Enable provisioning with Puppet stand alone. Puppet manifests\n # are contained in a directory path relative to this Vagrantfile.\n # You will need to create the manifests directory and a manifest in\n # the file precise64.pp in the manifests_path directory.\n #\n # An example Puppet manifest to provision the message of the day:\n #\n # # group { \"puppet\":\n # # ensure =&gt; \"present\",\n # # }\n # #\n # # File { owner =&gt; 0, group =&gt; 0, mode =&gt; 0644 }\n # #\n # # file { '/etc/motd':\n # # content =&gt; \"Welcome to your Vagrant-built virtual machine!\n # # Managed by Puppet.\\n\"\n # # }\n #\n # config.vm.provision :puppet do |puppet|\n # puppet.manifests_path = \"manifests\"\n # puppet.manifest_file = \"init.pp\"\n # end\n\n # Enable provisioning with chef solo, specifying a cookbooks path, roles\n # path, and data_bags path (all relative to this Vagrantfile), and adding\n # some recipes and/or roles.\n #\n # config.vm.provision :chef_solo do |chef|\n # chef.cookbooks_path = \"../my-recipes/cookbooks\"\n # chef.roles_path = \"../my-recipes/roles\"\n # chef.data_bags_path = \"../my-recipes/data_bags\"\n # chef.add_recipe \"mysql\"\n # chef.add_role \"web\"\n #\n # # You may also specify custom JSON attributes:\n # chef.json = { :mysql_password =&gt; \"foo\" }\n # end\n\n # Enable provisioning with chef server, specifying the chef server URL,\n # and the path to the validation key (relative to this Vagrantfile).\n #\n # The Opscode Platform uses HTTPS. Substitute your organization for\n # ORGNAME in the URL and validation key.\n #\n # If you have your own Chef Server, use the appropriate URL, which may be\n # HTTP instead of HTTPS depending on your configuration. Also change the\n # validation key to validation.pem.\n #\n # config.vm.provision :chef_client do |chef|\n # chef.chef_server_url = \"https://api.opscode.com/organizations/ORGNAME\"\n # chef.validation_key_path = \"ORGNAME-validator.pem\"\n # end\n #\n # If you're using the Opscode platform, your validator client is\n # ORGNAME-validator, replacing ORGNAME with your organization name.\n #\n # If you have your own Chef Server, the default validation client name is\n # chef-validator, unless you changed the configuration.\n #\n # chef.validation_client_name = \"ORGNAME-validator\"\nend\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"./vagrant\">Vagrant cheatsheet</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vainglory",
"title": "Vainglory",
"url": "/vainglory",
"category": "Others",
"keywords": null,
"content_html": "<h2 class=\"-one-column\" id=\"t3-items-by-use\">T3 items by use</h2>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Use</th>\n <th>CP</th>\n <th>WP</th>\n <th>Util</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Anti-armor/shield</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/broken-myth\">Myth</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/bonesaw\">Bonesaw</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tension-bow\">Tension</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Stacking damage</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/broken-myth\">Myth</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/breaking-point\">Break</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Lifesteal</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/eve-of-harvest\">Eve</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/serpent-mask\">Serpent</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/poisoned-shiv\">Shiv</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Raw power</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/shatterglass\">Shatterglass</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/sorrowblade\">Sorrowblade</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Burst damage</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aftershock\">Aftershock</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tension-bow\">Tension</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Attack speed</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/alternating-current\">AC</a></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tornado-trigger\">Tornado</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/breaking-point\">Break</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Critical</strong></td>\n <td> </td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tyrants-monocle\">Monocle</a></td>\n <td> </td>\n </tr>\n <tr>\n <td><strong>Auto-attack damage</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/alternating-current\">AC</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aftershock\">Aftershock</a></td>\n <td><em>everything</em></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/stormcrown\">Stormcrown</a></td>\n </tr>\n <tr>\n <td><strong>Cooldown</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/clockwork\">Clockwork</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aftershock\">Aftershock</a></td>\n <td>Spellsword</td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/stormcrown\">Stormcrown</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/contraption\">Contraption</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/nullwave-gauntlet\">Nullwave</a>, <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/halcyon-chargers\">Halcyon Boots</a></td>\n </tr>\n <tr>\n <td><strong>Slow</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/frostburn\">Frostburn</a></td>\n <td> </td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/shiversteel\">Shiversteel</a></td>\n </tr>\n <tr>\n <td><strong>Reflex block</strong></td>\n <td> </td>\n <td> </td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aegis\">Aegis</a> (self/shield) <br /> <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aegis\">Crucible</a> (team/HP)</td>\n </tr>\n <tr>\n <td><strong>Ability repeat</strong></td>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/echo\">Echo</a></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h2 class=\"-one-column\" id=\"tier-3-items\">Tier 3 items</h2>\n\n<h3 id=\"crystal-power\">Crystal power</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Item</th>\n <th>Cost</th>\n <th>CP</th>\n <th>Use</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>AS: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aftershock\">Aftershock</a></td>\n <td>2400</td>\n <td>+35 cp</td>\n <td><strong>Basic dmg, atk speed</strong> <br /> <em>+basic dmg after ability</em>, +25% cooldown, +2.5 recharge</td>\n </tr>\n <tr>\n <td>EoH: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/eve-of-harvest\">Eve of Harvest</a></td>\n <td>2600</td>\n <td>+55 cp</td>\n <td><strong>Lifesteal</strong> <br /> <em>+10% lifesteal</em>, +250 energy, +5 recharge</td>\n </tr>\n <tr>\n <td>AC: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/alternating-current\">Alternating Current</a></td>\n <td>2800</td>\n <td>+60 cp</td>\n <td><strong>Basic dmg</strong> <br /> <em>+basic dmg based on CP</em>, +65% atk speed</td>\n </tr>\n <tr>\n <td>BM: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/broken-myth\">Broken Myth</a></td>\n <td>2150</td>\n <td>+70 cp</td>\n <td><strong>Stack dmg</strong> <br /> +10% shield pierce, stacking dmg</td>\n </tr>\n <tr>\n <td>FB: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/frostburn\">Frostburn</a></td>\n <td>2600</td>\n <td>+100 cp</td>\n <td><strong>Slow</strong> <br /> <em>slow for 1.5s</em> at (10% + 1% per 10CP)</td>\n </tr>\n <tr>\n <td>SG: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/shatterglass\">Shatterglass</a></td>\n <td>3000</td>\n <td>+150 cp</td>\n <td><strong>Raw power</strong> <br /> -</td>\n </tr>\n <tr>\n <td>CW: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/clockwork\">Clockwork</a></td>\n <td>2500</td>\n <td>+30% cp</td>\n <td><strong>Cooldown</strong> <br /> <em>+40% cooldown</em>, +250 energy, +7.5 recharge</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/echo\">Echo</a></td>\n <td>2500?</td>\n <td> </td>\n <td><strong>Ability repeat</strong> <br /> +250 energy, +4 recharge</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"weapon-power\">Weapon power</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Item</th>\n <th>Cost</th>\n <th>WP</th>\n <th>Other</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>TT: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tornado-trigger\">Tornado Trigger</a></td>\n <td>2600</td>\n <td> </td>\n <td><strong>Atk speed</strong> <br /> <em>+75% atk speed</em>, +20% crit change, +20% crit dmg</td>\n </tr>\n <tr>\n <td>BS: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/bonesaw\">Bonesaw</a></td>\n <td>2700</td>\n <td>+15 wp</td>\n <td><strong>Armor shred</strong> <br /> <em>stacking armor shred</em></td>\n </tr>\n <tr>\n <td>TB: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tension-bow\">Tension Bow</a></td>\n <td>2300</td>\n <td>+45 wp</td>\n <td><strong>Bonus dmg</strong> <br /> <em>bonus dmg every 6s</em>, +8% armor pierce</td>\n </tr>\n <tr>\n <td>TM: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/tyrants-monocle\">Tyrant’s Monocle</a></td>\n <td>2750</td>\n <td>+50 wp</td>\n <td><strong>Crit</strong> <br /> <em>+40% crit chance</em>, +20% crit dmg</td>\n </tr>\n <tr>\n <td>BP: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/breaking-point\">Breaking Point</a></td>\n <td>2600</td>\n <td>+55 wp</td>\n <td><strong>Stacking dmg</strong> <br /> <em>stacking weapon dmg</em>, +35% atk speed</td>\n </tr>\n <tr>\n <td>SM: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/serpent-mask\">Serpent Mask</a></td>\n <td>2800</td>\n <td>+85 wp</td>\n <td><strong>Lifesteal</strong> <br /> <em>stacking lifesteal</em>, +10% lifesteal</td>\n </tr>\n <tr>\n <td>SB: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/sorrowblade\">Sorrowblade</a></td>\n <td>3100</td>\n <td>+150 wp</td>\n <td><strong>Raw power</strong> <br /> -</td>\n </tr>\n <tr>\n <td>PS: <a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/poisoned-shiv\">Poisoned Shiv</a></td>\n <td>2250</td>\n <td>+30 wp</td>\n <td><strong>Mortal wounds</strong> <br /> <em>mortal wounds for 2s</em>, +10% lifesteal, +30% atk speed</td>\n </tr>\n <tr>\n <td>SS: Spellsword</td>\n <td>?</td>\n <td>+90 wp</td>\n <td><strong>Cooldown</strong> <br /> ?</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"utilities\">Utilities</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Item</th>\n <th>Cost</th>\n <th>HP</th>\n <th>Use</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/halcyon-chargers\">Halcyon Chargers</a></td>\n <td>2300</td>\n <td>+200 hp</td>\n <td>👟 <strong>Boots</strong> <br /> +15% cooldown, +250 energy, +4 recharge</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/stormcrown\">Stormcrown</a></td>\n <td>2200</td>\n <td>+200 hp</td>\n <td>🔴 <strong>Bonus dmg</strong> <br /> +30% cooldown, +4 recharge, bonus true damage</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/journey-boots\">Journey Boots</a></td>\n <td>1900</td>\n <td>+250 hp</td>\n <td>👟 <strong>Boots</strong> <br /> damaging heroes resets sprint cooldown</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/nullwave-gauntlet\">Nullwave Gauntlet</a> (2.0)</td>\n <td>2250</td>\n <td>+300 hp</td>\n <td>😶 <strong>Item silence</strong> <br /> +25% cooldown</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/contraption\">Contraption</a></td>\n <td>2100</td>\n <td>+350 hp</td>\n <td>👀 <strong>Vision</strong> <br /> traps/flares, +40% cooldown, +3 recharge</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/shiversteel\">Shiversteel</a></td>\n <td>1450</td>\n <td>+500 hp</td>\n <td>🐌 <strong>Slow</strong> <br /> active: slow targets</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/war-treads\">War Treads</a></td>\n <td>2500</td>\n <td>+600 hp</td>\n <td>👟 <strong>Boots</strong> <br /> gives sprint to nearby teammates</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"defense\">Defense</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Item</th>\n <th>Cost</th>\n <th>HP</th>\n <th>Armor</th>\n <th>Shield</th>\n <th>Use</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aegis\">Aegis</a></td>\n <td>2250</td>\n <td> </td>\n <td>+30 ar</td>\n <td>+125 sh</td>\n <td>✊<strong>Reflex block</strong> (self)</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/fountain-of-renewal\">Fountain of Renewal</a></td>\n <td>2300</td>\n <td>+200 hp</td>\n <td>+30 ar</td>\n <td>+75 sh</td>\n <td>❤ <strong>Heal</strong> allies</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/atlas-pauldron\">Atlas Pauldron</a></td>\n <td>1900</td>\n <td> </td>\n <td>+85 ar</td>\n <td>+35 sh</td>\n <td>🐌 <strong>Slow</strong> target attack speed</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/metal-jacket\">Metal Jacket</a></td>\n <td>2100</td>\n <td> </td>\n <td>+170 ar</td>\n <td>+35 sh</td>\n <td> </td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/aegis\">Crucible</a></td>\n <td>1850</td>\n <td>+600 hp</td>\n <td> </td>\n <td> </td>\n <td>✊ <strong>Reflex block</strong> (team)</td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/slumbering-husk\">Slumbering Husk</a> (2.0)</td>\n <td>1600</td>\n <td>+400 hp</td>\n <td> </td>\n <td> </td>\n <td><strong>Fortification</strong> against burst damage</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"boots\">Boots</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>Item</th>\n <th>Movement speed</th>\n <th>HP</th>\n <th>Sprint</th>\n <th>Use</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/war-treads\">War Treads</a></td>\n <td>+0.4</td>\n <td>+600 hp</td>\n <td>2s (60s cooldown) <br /> incl. nearby teammates</td>\n <td><strong>HP, assist</strong></td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/halcyon-chargers\">Halcyon Chargers</a></td>\n <td>+0.5</td>\n <td> </td>\n <td>3s (50s cooldown)</td>\n <td><strong>Energy</strong></td>\n </tr>\n <tr>\n <td><a href=\"http://www.vaingloryfire.com/vainglory/wiki/items/journey-boots\">Journey Boots</a></td>\n <td>+0.6</td>\n <td>+250 hp</td>\n <td>2s (60s cooldown) <br /> damaging resets cooldown</td>\n <td><strong>Gap close</strong></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"skill-tier-names\">Skill tier names</h2>\n\n<table>\n <tbody>\n <tr>\n <td>Just Beginning</td>\n <td>1</td>\n </tr>\n <tr>\n <td>Getting There</td>\n <td>2</td>\n </tr>\n <tr>\n <td>Rock Solid</td>\n <td>3</td>\n </tr>\n <tr>\n <td>Worthy Foe</td>\n <td>4</td>\n </tr>\n <tr>\n <td>Got Swagger</td>\n <td>5</td>\n </tr>\n <tr>\n <td>Credible Threat</td>\n <td>6</td>\n </tr>\n <tr>\n <td>The Hotness</td>\n <td>7</td>\n </tr>\n <tr>\n <td>Simply Amazing</td>\n <td>8</td>\n </tr>\n <tr>\n <td>Pinnacle of Awesome</td>\n <td>9</td>\n </tr>\n <tr>\n <td>Vainglorious</td>\n <td>10</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"http://www.vaingloryfire.com/vainglory/forum/general-discussion/bronze-silver-gold-rankings-5312\">Skill tier names</a></p>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li>Last updated for Vainglory 1.22 with some 2.0 stuff.</li>\n <li><a href=\"http://www.vaingloryfire.com/\">Vaingloryfire.com</a></li>\n <li><a href=\"http://forums.vainglorygame.com/index.php?threads/41129/\">Version history</a> (forums.vainglorygame.com)</li>\n <li><a href=\"http://brokenmyth.net/skill-tier-point-far-next-tier/#more-10043\">Skill tier points</a> (brokenmyth.net)</li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vim-diff",
"title": "Vimdiff",
"url": "/vim-diff",
"category": "Vim",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"navigating\">Navigating</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>]c</code></td>\n <td>Next difference</td>\n </tr>\n <tr>\n <td><code>[c</code></td>\n <td>Previous difference</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"editing\">Editing</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>do</code></td>\n <td>Diff Obtain! <br />Pull the changes to the current file.</td>\n </tr>\n <tr>\n <td><code>dp</code></td>\n <td>Diff Put! <br />Push the changes to the other file.</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:diffupdate</code></td>\n <td>Re-scan the files for differences.</td>\n </tr>\n <tr>\n <td><code>ZQ</code></td>\n <td>Quit without checking changes</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"folds\">Folds</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>zo</code> <em>/</em> <code>zO</code></td>\n <td>Open</td>\n </tr>\n <tr>\n <td><code>zc</code> <em>/</em> <code>zC</code></td>\n <td>Close</td>\n </tr>\n <tr>\n <td><code>za</code> <em>/</em> <code>zA</code></td>\n <td>Toggle</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zv</code></td>\n <td>Open folds for this line</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zM</code></td>\n <td>Close all</td>\n </tr>\n <tr>\n <td><code>zR</code></td>\n <td>Open all</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zm</code></td>\n <td>Fold more <em>(foldlevel += 1)</em></td>\n </tr>\n <tr>\n <td><code>zr</code></td>\n <td>Fold less <em>(foldlevel -= 1)</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zx</code></td>\n <td>Update folds</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://vim.rtorr.com/\">Vim cheatsheet</a> <em>(vim.rotrr.com)</em></li>\n <li><a href=\"http://vimdoc.sourceforge.net/htmldoc/\">Vim documentation</a> <em>(vimdoc.sourceforge.net)</em></li>\n <li><a href=\"http://openvim.com/\">Interactive Vim tutorial</a> <em>(openvim.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://www.vim.org/\">Vim</a> is a very efficient text editor. This reference was made for Vim 8.0.</p>",
"description_html": "",
"tags": null,
"updated": "2017-08-26"
},{
"id": "vim-digraphs",
"title": "Vim digraphs",
"url": "/vim-digraphs",
"category": "Vim",
"keywords": null,
"content_html": "<h3 id=\"typing-digraphs-in-insert-mode\">Typing digraphs in insert mode</h3>\n\n<pre class=\"light\"><code>&lt;Ctrl-K&gt;OK\n</code></pre>\n\n<h3 id=\"listing-digraphs\">Listing digraphs</h3>\n\n<pre class=\"lights\"><code>:dig\n:digraphs\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<h3 id=\"symbols\">Symbols</h3>\n\n<table>\n <tbody>\n <tr>\n <td>℠</td>\n <td>™</td>\n <td>©</td>\n <td>®</td>\n <td>¶</td>\n <td>†</td>\n <td>‡</td>\n <td>–</td>\n <td>±</td>\n </tr>\n <tr>\n <td>SM</td>\n <td>TM</td>\n <td>Co</td>\n <td>Rg</td>\n <td>PI</td>\n <td>/-</td>\n <td>/=</td>\n <td>–</td>\n <td>+-</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>§</td>\n <td>µ</td>\n <td>£</td>\n <td>¢</td>\n <td>¥</td>\n <td>¤</td>\n </tr>\n <tr>\n <td>SE</td>\n <td>My</td>\n <td>$$</td>\n <td>Ct</td>\n <td>Ye</td>\n <td>Cu</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>★</td>\n <td>☆</td>\n <td>♡</td>\n <td>◆</td>\n <td>◇</td>\n </tr>\n <tr>\n <td>*2</td>\n <td>*1</td>\n <td>cH</td>\n <td>Db</td>\n <td>Dw</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>✓</td>\n <td>✗</td>\n </tr>\n <tr>\n <td>OK</td>\n <td>XX</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"dots-and-bullets\">Dots and bullets</h3>\n\n<table>\n <tbody>\n <tr>\n <td>⋅</td>\n <td>·</td>\n <td>○</td>\n <td>∙</td>\n <td>∘</td>\n <td>∴</td>\n <td>∵</td>\n <td>∶</td>\n <td>∷</td>\n </tr>\n <tr>\n <td>.P</td>\n <td>.M</td>\n <td>0m</td>\n <td>Sb</td>\n <td>Ob</td>\n <td>.:</td>\n <td>:.</td>\n <td>:R</td>\n <td>::</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>⊙</td>\n <td>⊚</td>\n <td>◎</td>\n <td>□</td>\n <td>▪</td>\n </tr>\n <tr>\n <td>0.</td>\n <td>02</td>\n <td>0o</td>\n <td>OS</td>\n <td>sB</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"math\">Math</h3>\n\n<table>\n <tbody>\n <tr>\n <td>ø</td>\n <td>≃</td>\n <td>≅</td>\n <td>≥</td>\n <td>≤</td>\n <td>≡</td>\n <td>≮</td>\n <td>≯</td>\n <td>≠</td>\n </tr>\n <tr>\n <td>o/</td>\n <td>?-</td>\n <td>?=</td>\n <td>&gt;=</td>\n <td>=&lt;</td>\n <td>=3</td>\n <td>!&lt;</td>\n <td>!&gt;</td>\n <td>!=</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>√</td>\n <td>×</td>\n <td>÷</td>\n </tr>\n <tr>\n <td>RT <em>root</em></td>\n <td>/\\ <em>times</em></td>\n <td>-: <em>divide</em></td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>⊂</td>\n <td>⊃</td>\n <td>∩</td>\n <td>∪</td>\n </tr>\n <tr>\n <td>(C <em>subset</em></td>\n <td>)C <em>superset</em></td>\n <td>(U <em>intersection</em></td>\n <td>)U <em>union</em></td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>¼</td>\n <td>½</td>\n <td>¾</td>\n <td>₃</td>\n <td>₂</td>\n <td>³</td>\n <td>²</td>\n </tr>\n <tr>\n <td>14</td>\n <td>12</td>\n <td>34</td>\n <td>3s</td>\n <td>2s</td>\n <td>3S</td>\n <td>2S</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"triangles\">Triangles</h3>\n\n<table>\n <tbody>\n <tr>\n <td>▲</td>\n <td>△</td>\n <td>▼</td>\n <td>▽</td>\n </tr>\n <tr>\n <td>UT</td>\n <td>uT</td>\n <td>Dt</td>\n <td>dT</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>▶</td>\n <td>▷</td>\n <td>◀</td>\n <td>◁</td>\n </tr>\n <tr>\n <td>PR</td>\n <td>Tr</td>\n <td>PL</td>\n <td>Tl</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>»</td>\n <td>«</td>\n <td>〈</td>\n <td>〉</td>\n <td>‹</td>\n <td>›</td>\n </tr>\n <tr>\n <td>»</td>\n <td>«</td>\n <td>&lt;/</td>\n <td>/&gt;</td>\n <td>&lt;1</td>\n <td>&gt;1</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"arrows\">Arrows</h3>\n\n<table>\n <tbody>\n <tr>\n <td>←</td>\n <td>→</td>\n <td>↑</td>\n <td>↓</td>\n <td>↕</td>\n <td>↔</td>\n </tr>\n <tr>\n <td>&lt;-</td>\n <td>-&gt;</td>\n <td>-!</td>\n <td>-v</td>\n <td>UD</td>\n <td>&lt;&gt;</td>\n </tr>\n </tbody>\n</table>\n\n<table>\n <tbody>\n <tr>\n <td>⇐</td>\n <td>⇒</td>\n <td>⇔</td>\n </tr>\n <tr>\n <td>&lt;=</td>\n <td>=&gt;</td>\n <td>==</td>\n </tr>\n </tbody>\n</table>\n\n<style>\n.all table tr td { text-align: center; }\n.all table tr:first-child td { font-size: 1.3em; padding-bottom: 0; }\n.all table tr:first-child+tr td { font-size: 0.9em; color: dodgerblue; border-top: 0; padding-top: 0; font-family: fira mono, monospace; }\n.all table em { color: #aaa; font-size: 0.9em; font-style: normal; font-family: roboto, sans-serif; }\n</style>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vim-easyalign",
"title": "Vim Easyalign",
"url": "/vim-easyalign",
"category": "Vim",
"keywords": null,
"content_html": "<h2 id=\"command-mode\">Command mode</h2>\n\n<h3 id=\"align-by-delimiters\">Align by delimiters</h3>\n\n<pre><code class=\"language-vim\">:EasyAlign : \" preset characters (\\=:.,&amp;#|)\n:EasyAlign |\n:EasyAlign \\ \" \\ means space\n</code></pre>\n\n<h3 id=\"align-by-regexp\">Align by regexp</h3>\n\n<pre><code class=\"language-vim\">:EasyAlign /[:;]+/\n</code></pre>\n\n<h3 id=\"specify-which\">Specify which</h3>\n\n<pre><code class=\"language-vim\">:EasyAlign | \" align by 1st `|`\n:EasyAlign 3 | \" align by 3rd `|`\n:EasyAlign * | \" align by all `|`s\n</code></pre>\n\n<h3 id=\"add-options\">Add options</h3>\n\n<pre><code class=\"language-vim\">:EasyAlign * | l4r1\n\n l4 \" lN - left_margin\n r1 \" rN - right_margin\n \" spaces to the left/right of `|`\n ar \" a[lrc] - align\n \" align left/right/center\n dr \" d[lrc] - delimiter_align\n \" alignment of the delimiter itself\n</code></pre>\n\n<h3 id=\"spaces-are-optional\">Spaces are optional</h3>\n\n<pre><code class=\"language-vim\">:EasyAlign * /[;:]+/ l3\n:EasyAlign*/[;:]+/l3\n</code></pre>\n\n<h2 id=\"examples\">Examples</h2>\n\n<h3 id=\"easyalign--dr-delimiter_align-right\"><code>:EasyAlign = dr</code> (delimiter_align right)</h3>\n\n<pre><code>apple = 1\nbanana += apple\ncake ||= banana\n</code></pre>\n\n<h3 id=\"easyalign--for-json-or-yaml\"><code>:EasyAlign :</code> (for json or yaml)</h3>\n\n<pre><code>url: jdbc:mysql://localhost/test\ndatabase: test\n</code></pre>\n\n<h3 id=\"easyalign--markdown-tables\"><code>:EasyAlign *|</code> (markdown tables)</h3>\n\n<pre><code class=\"language-nohighlight\">| `&lt;Enter&gt;` | right align |\n| `1` | on 1st occurrence |\n| `2` | on 2nd occurrence (and so on) |\n</code></pre>\n\n<h2 id=\"interactive-mode\">Interactive mode</h2>\n\n<table class=\"greycode\">\n <tbody>\n <tr>\n <td><code>{Visual}</code> <code>⏎</code></td>\n <td>activate for selection</td>\n </tr>\n <tr>\n <td><code>ga</code> <code>{motion}</code></td>\n <td>activate for motion/text object</td>\n </tr>\n </tbody>\n</table>\n\n<p>Then press options (if available), then a delimiter.</p>\n\n<h3 id=\"interactive-mode-options\">Interactive mode options</h3>\n\n<table class=\"greycode\">\n <tbody>\n <tr>\n <td><code>⏎</code></td>\n <td>Set <code>alignment</code></td>\n </tr>\n <tr>\n <td><code>&lt;ctrl-l&gt;</code> <code>4 ⏎</code></td>\n <td>Set <code>left_margin</code> (to the left of the delimiter)</td>\n </tr>\n <tr>\n <td><code>&lt;ctrl-r&gt;</code> <code>4 ⏎</code></td>\n <td>Set <code>right_margin</code></td>\n </tr>\n <tr>\n <td><code>↓</code></td>\n <td>no margin</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"example\">Example</h3>\n\n<ul>\n <li><code>gaip</code> <code>&lt;ctrl-l&gt;</code> <code>8⏎</code> <code>=</code> - puts 8 spaces before the equal sign</li>\n</ul>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://github.com/junegunn/vim-easy-align\">vim-easy-align</a></li>\n <li><a href=\"https://github.com/junegunn/vim-easy-align#examples\">Examples</a></li>\n <li><a href=\"https://github.com/junegunn/vim-easy-align#alignment-options\">Alignment options</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vim-help",
"title": "Vim helpfiles",
"url": "/vim-help",
"category": "Vim",
"keywords": null,
"content_html": "<h2 class=\"-left-reference\" id=\"writing-help-files\">Writing help files</h2>\n\n<h3 id=\"creating-a-document\">Creating a document</h3>\n\n<pre><code class=\"language-nohighlight\">:e doc/potion.txt\n:set ft=help\n:set ft=text\n</code></pre>\n\n<p>Use <code>ft=help</code> to preview it, and <code>ft=text</code> to edit it.</p>\n\n<h3 id=\"example\">Example</h3>\n\n<pre><code class=\"language-nohighlight\">*ack.txt* Plugin that integrates ack with Vim\n\n==============================================================================\nUSAGE INSTRUCTIONS *ack-usage*\n\n:Ack[!] {pattern} *:Ack*\n\n Search recursively for {pattern}. See |:AckAdd|.\n Also see http://beyondgrep.com for more information.\n\nvim:tw=78:ts=8:ft=help:norl:\n</code></pre>\n\n<p>This is a cheatsheet for writing Vim help files. See: <code>:help help-writing</code></p>\n\n<h2 id=\"syntax\">Syntax</h2>\n\n<h3 id=\"reference\">Reference</h3>\n\n<table>\n <thead>\n <tr>\n <th>Code</th>\n <th>Description</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><em>Inline items</em></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>*tags*</code></td>\n <td>Tags</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>|link-to-tags|</code></td>\n <td>Links to tags</td>\n <td><code>|:command|</code></td>\n </tr>\n <tr>\n <td><code>'vimoption'</code></td>\n <td>Vim option</td>\n <td><code>'textwidth'</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>{code-text}</code></td>\n <td>Code text</td>\n <td><code>{Visual}gf</code></td>\n </tr>\n <tr>\n <td><code>&lt;code-text&gt;</code></td>\n <td>Code text</td>\n <td><code>&lt;PageDown&gt;</code></td>\n </tr>\n <tr>\n <td><code>`code-text`</code></td>\n <td>Code text</td>\n <td><code>`set fo=want`</code></td>\n </tr>\n <tr>\n <td><code>CTRL-X</code></td>\n <td>Code text</td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><em>Block items</em></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>INTRODUCTION *tag*</code></td>\n <td>Section header</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>Column heading~</code></td>\n <td>Highlighting</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>www.url.com</code></td>\n <td>Web URL</td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>=====</code></td>\n <td>Separator</td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-----</code></td>\n <td>Separator</td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"tags\">Tags</h3>\n\n<ul>\n <li>Tags are created with asterisks, eg, <code>*potion-usage*</code></li>\n <li>Links to tags are <code>|potion-usage|</code></li>\n <li>Press <code>^]</code> to jump to a tag</li>\n</ul>\n\n<h3 id=\"code-blocks\">Code blocks</h3>\n\n<pre><code>Example: &gt;\n xyz\n&lt;\n</code></pre>\n\n<p>Surround with <code>&gt;</code> and <code>&lt;</code> characters</p>\n\n<h3 id=\"file-header\">File header</h3>\n\n<pre><code>*potion.txt* functionality for the potion programming language\n</code></pre>\n\n<p>It’s customary to start a file with a tag of the filename, plus a description.</p>\n\n<h3 id=\"heading\">Heading</h3>\n\n<pre><code>==============================================================================\nCONTENTS *potion-contents*\n</code></pre>\n\n<p>Starts with <code>ALL CAPS</code>, ends with <code>*a-tag*</code></p>\n\n<h3 id=\"notes\">Notes</h3>\n<p>Using <code>*Todo</code> and <code>*Error</code> will highlight your notes.</p>\n\n<pre><code>\t*Todo something to do\n\t*Error something wrong\n</code></pre>\n\n<h3 id=\"final-modeline\">Final modeline</h3>\n\n<pre><code class=\"language-nohighlight\">vim:tw=78:ts=8:ft=help:norl:\n</code></pre>\n\n<h2 id=\"conventions\">Conventions</h2>\n\n<h3 id=\"table-of-contents\">Table of contents</h3>\n\n<pre><code class=\"language-nohighlight\">|rails-introduction| Introduction and Feature Summary\n|rails-commands| General Commands\n|rails-navigation| Navigation\n</code></pre>\n\n<pre><code class=\"language-nohighlight\"> 1.Intro...................................|ergonomic|\n 2.Note to use..............................|CAPSLOCK|\n 3.Insert Mode Remappings............|ergonomicInsert|\n</code></pre>\n\n<h3 id=\"author-lines\">Author lines</h3>\n\n<pre><code class=\"language-nohighlight\">Author: Jack Hackness &lt;captain@time.com&gt; *xyz-author*\nLicense: Same terms as Vim itself (see |license|)\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-09-09"
},{
"id": "vim-rails",
"title": "Vim-rails",
"url": "/vim-rails",
"category": "Vim",
"keywords": null,
"content_html": "<h2 id=\"alternate-files\">Alternate files</h2>\n\n<table>\n <tbody>\n <tr>\n <td><code>:A</code></td>\n <td>alternate file (test)</td>\n </tr>\n <tr>\n <td><code>:R</code></td>\n <td>related file (controller/view)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"what-it-does\">What it does</h3>\n\n<table>\n <thead>\n <tr>\n <th>.</th>\n <th>:A</th>\n <th>:R</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Model</strong></td>\n <td>test/models/</td>\n <td>db/schema.rb</td>\n </tr>\n <tr>\n <td><strong>Controller method</strong></td>\n <td>test/controllers/</td>\n <td>app/views/</td>\n </tr>\n <tr>\n <td><strong>View template</strong></td>\n <td>test/views/</td>\n <td>app/controllers</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"abbreviations\">Abbreviations</h2>\n\n<p>Type <code>:Rabbrev</code> for a full list.</p>\n\n<table class=\"no-head greycode\">\n <thead>\n <tr>\n <th>Abbrev</th>\n <th>Expansion</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>AC::</code></td>\n <td>ActionController</td>\n </tr>\n <tr>\n <td><code>AR::</code></td>\n <td>ActiveRecord</td>\n </tr>\n <tr>\n <td><code>AV::</code></td>\n <td>ActionView</td>\n </tr>\n <tr>\n <td><code>...</code></td>\n <td>…</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>logd(</code></td>\n <td>logger.debug</td>\n </tr>\n <tr>\n <td><code>logi(</code></td>\n <td>logger.info</td>\n </tr>\n <tr>\n <td><code>...</code></td>\n <td>…</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"model\">Model</h3>\n\n<table class=\"no-head greycode\">\n <thead>\n <tr>\n <th>Abbrev</th>\n <th>Expansion</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>bt(</code></td>\n <td><code>belongs_to</code></td>\n </tr>\n <tr>\n <td><code>hm(</code></td>\n <td><code>has_many</code></td>\n </tr>\n <tr>\n <td><code>ho(</code></td>\n <td><code>has_one</code></td>\n </tr>\n <tr>\n <td><code>habtm(</code></td>\n <td><code>has_and_belongs_to_many</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"controllers\">Controllers</h3>\n\n<table class=\"no-head greycode\">\n <thead>\n <tr>\n <th>Abbrev</th>\n <th>Expansion</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>pa[</code></td>\n <td>params</td>\n </tr>\n <tr>\n <td><code>re(</code></td>\n <td>redirect_to</td>\n </tr>\n <tr>\n <td><code>rp(</code></td>\n <td>render partial:</td>\n </tr>\n <tr>\n <td><code>rst(</code></td>\n <td>respond_to</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"views\">Views</h3>\n\n<table class=\"no-head greycode\">\n <thead>\n <tr>\n <th>Abbrev</th>\n <th>Expansion</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>dotiw</code></td>\n <td><code>distance_of_time_in_words</code></td>\n </tr>\n <tr>\n <td><code>taiw</code></td>\n <td><code>time_ago_in_words</code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"extracting-partials\">Extracting partials</h2>\n\n<pre><code class=\"language-rb\"># from view =&gt; app/views/home/_foo_partial.haml\n :Rextract home/foo_partial\n\n# from model =&gt; app/models/concerns/foo_concern.rb\n :Rextract FooConcern\n</code></pre>\n\n<h2 id=\"loading-files\">Loading files</h2>\n\n<h3 id=\"app\">App</h3>\n\n<pre><code>:Econtroller &lt;file&gt; # app/controllers/*_controller.rb\n:Ehelper # app/helpers/*_helper.rb\n:Emodel &lt;file&gt; # app/models/*.rb\n:Ejob &lt;file&gt; # app/jobs/*_job.rb\n:Emailer &lt;file&gt; # app/mailers/*.rb\n</code></pre>\n\n<h3 id=\"db\">DB</h3>\n\n<pre><code>:Emigration &lt;file&gt; # db/migrations/*.rb\n:Eschema # db/schema.rb\n</code></pre>\n\n<h3 id=\"lib\">Lib</h3>\n\n<pre><code>:Elib &lt;file&gt; # lib/*.rb\n:Elib # Gemfile\n:Etask &lt;file&gt; # lib/tasks/*.rake\n</code></pre>\n\n<h3 id=\"assets\">Assets</h3>\n\n<pre><code>:Estylesheet\n:Ejavascript\n</code></pre>\n\n<h3 id=\"views-1\">Views</h3>\n\n<pre><code>:Eview\n:Elayout\n</code></pre>\n\n<h3 id=\"test\">Test</h3>\n\n<pre><code>:Espec\n:Eunittest\n # test/{unit,models,helpers}/*_test.rb\n # spec/{unit,models,helpers}/*_spec.rb\n\n:Efunctionaltest\n # test/{functional,controllers,mailers}/*_test.rb\n # spec/{functional,controllers,mailers}/*_spec.rb\n\n:Eintegrationtest\n # test/integration/*_test.rb\n # spec/{features,requests,integration}/*_spec.rb\n # features/*.feature\n\n:Efixtures\n:Efunctionaltest\n</code></pre>\n\n<h3 id=\"config\">Config</h3>\n\n<pre><code>:Einitializer &lt;file&gt; # config/initializers/*.rb\n:Elocale # config/locales/*.yml\n:Eenvironment # application.rb\n:Eenvironment development # config/environments/*.rb\n</code></pre>\n\n<h2 id=\"reference\">Reference</h2>\n\n<ul>\n <li><a href=\"https://github.com/tpope/vim-rails\">vim-rails</a></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vim-unite",
"title": "Vim-Unite",
"url": "/vim-unite",
"category": "Vim",
"keywords": null,
"content_html": "<h3 id=\"usage\">Usage</h3>\n\n<pre><code class=\"language-vim\">:Unite file\n:Unite file_rec/async:!\n:Unite tag\n:Unite buffer\n</code></pre>\n\n<h3 id=\"sources\">Sources</h3>\n\n<ul>\n <li><code>file/new</code></li>\n <li><code>file/async</code></li>\n <li><code>file_rec/async</code></li>\n <li><code>file_rec/git</code></li>\n <li><code>buffer</code></li>\n <li><code>buffer_tab</code> (current tab only)</li>\n <li><code>tab</code></li>\n <li><code>register</code></li>\n <li><code>bookmark</code></li>\n <li><code>source</code></li>\n</ul>\n\n<h3 id=\"options\">Options</h3>\n\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-start-insert</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-no-quit</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-winheight=10</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>-quick-match</code></td>\n <td>select by pressing asdf keys</td>\n </tr>\n <tr>\n <td><code>-winwidth=40</code></td>\n <td>use with vertical</td>\n </tr>\n <tr>\n <td><code>-no-split</code></td>\n <td>open in current buffer</td>\n </tr>\n <tr>\n <td><code>-auto-preview</code></td>\n <td>great for outline</td>\n </tr>\n <tr>\n <td><code>-vertical</code></td>\n <td>open as sidebar</td>\n </tr>\n <tr>\n <td><code>-buffer-name=xxx -resume</code></td>\n <td>resume the next time it’s called (faster)</td>\n </tr>\n <tr>\n <td><code>-input=</code></td>\n <td>reset input (use with -resume)</td>\n </tr>\n <tr>\n <td><code>-unique</code></td>\n <td>remove duplicates (eg, if using <code>file_rec</code> with <code>file_mru</code>)</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vim",
"title": "Vim",
"url": "/vim",
"category": "Vim",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"getting-started\">Getting started</h2>\n\n<h3 class=\"-prime\" id=\"exiting\">Exiting</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:qa</code></td>\n <td>Close all files</td>\n </tr>\n <tr>\n <td><code>:qa!</code></td>\n <td>Close all files, abandon changes</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:w</code></td>\n <td>Save</td>\n </tr>\n <tr>\n <td><code>:wq</code> <em>/</em> <code>:x</code></td>\n <td>Save and close file</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:q</code></td>\n <td>Close file</td>\n </tr>\n <tr>\n <td><code>:q!</code></td>\n <td>Close file, abandon changes</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>ZZ</code></td>\n <td>Save and quit</td>\n </tr>\n <tr>\n <td><code>ZQ</code></td>\n <td>Quit without checking changes</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"navigating\">Navigating</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>h</code> <code>j</code> <code>k</code> <code>l</code></td>\n <td>Arrow keys</td>\n </tr>\n <tr>\n <td><code>&lt;C-U&gt;</code> <em>/</em> <code>&lt;C-D&gt;</code></td>\n <td>Page up/page down</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"words\">Words</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>b</code> <em>/</em> <code>w</code></td>\n <td>Previous/next word</td>\n </tr>\n <tr>\n <td><code>ge</code> <em>/</em> <code>e</code></td>\n <td>Previous/next end of word</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"line\">Line</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>0</code> <em>(zero)</em></td>\n <td>Start of line</td>\n </tr>\n <tr>\n <td><code>^</code></td>\n <td>Start of line <em>(after whitespace)</em></td>\n </tr>\n <tr>\n <td><code>$</code></td>\n <td>End of line</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"character\">Character</h4>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>fc</code></td>\n <td>Go forward to character <code>c</code></td>\n </tr>\n <tr>\n <td><code>Fc</code></td>\n <td>Go backward to character <code>c</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"document\">Document</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>gg</code></td>\n <td>First line</td>\n </tr>\n <tr>\n <td><code>G</code></td>\n <td>Last line</td>\n </tr>\n <tr>\n <td><code>:n</code></td>\n <td>Go to line <code>n</code></td>\n </tr>\n <tr>\n <td><code>nG</code></td>\n <td>Go to line <code>n</code></td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"window\">Window</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>zz</code></td>\n <td>Center this line</td>\n </tr>\n <tr>\n <td><code>zt</code></td>\n <td>Top this line</td>\n </tr>\n <tr>\n <td><code>H</code></td>\n <td>Move to top of screen</td>\n </tr>\n <tr>\n <td><code>M</code></td>\n <td>Move to middle of screen</td>\n </tr>\n <tr>\n <td><code>L</code></td>\n <td>Move to bottom of screen</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"tab-pages\">Tab pages</h4>\n\n<table>\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:tabedit [file]</code></td>\n <td>Edit file in a new tab</td>\n </tr>\n <tr>\n <td><code>:tabfind [file]</code></td>\n <td>Open file if exists in new tab</td>\n </tr>\n <tr>\n <td><code>:tabclose</code></td>\n <td>Close current tab</td>\n </tr>\n <tr>\n <td><code>:tabs</code></td>\n <td>List all tabs</td>\n </tr>\n <tr>\n <td><code>:tabfirst</code></td>\n <td>Go to first tab</td>\n </tr>\n <tr>\n <td><code>:tablast</code></td>\n <td>Go to last tab</td>\n </tr>\n <tr>\n <td><code>:tabn </code></td>\n <td>Go to next tab</td>\n </tr>\n <tr>\n <td><code>:tabp </code></td>\n <td>Go to previous tab</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"editing\">Editing</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>a</code></td>\n <td>Append</td>\n </tr>\n <tr>\n <td><code>i</code></td>\n <td>Insert</td>\n </tr>\n <tr>\n <td><code>o</code></td>\n <td>Next line</td>\n </tr>\n <tr>\n <td><code>O</code></td>\n <td>Previous line</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>s</code></td>\n <td>Delete char and insert</td>\n </tr>\n <tr>\n <td><code>S</code></td>\n <td>Delete line and insert</td>\n </tr>\n <tr>\n <td><code>C</code></td>\n <td>Delete until end of line and insert</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>r</code></td>\n <td>Replace one character</td>\n </tr>\n <tr>\n <td><code>R</code></td>\n <td>Enter Replace mode</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>u</code></td>\n <td>Undo changes</td>\n </tr>\n <tr>\n <td><code>&lt;C-R&gt;</code></td>\n <td>Redo changes</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"exiting-insert-mode\">Exiting insert mode</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>Esc</code> <em>/</em> <code>&lt;C-[&gt;</code></td>\n <td>Exit insert mode</td>\n </tr>\n <tr>\n <td><code>&lt;C-C&gt;</code></td>\n <td>Exit insert mode, and abort current command</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"clipboard\">Clipboard</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>x</code></td>\n <td>Delete character</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>dd</code></td>\n <td>Delete line <em>(Cut)</em></td>\n </tr>\n <tr>\n <td><code>yy</code></td>\n <td>Yank line <em>(Copy)</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>p</code></td>\n <td>Paste</td>\n </tr>\n <tr>\n <td><code>P</code></td>\n <td>Paste before</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"visual-mode\">Visual mode</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>v</code></td>\n <td>Enter visual mode</td>\n </tr>\n <tr>\n <td><code>V</code></td>\n <td>Enter visual line mode</td>\n </tr>\n <tr>\n <td><code>&lt;C-V&gt;</code></td>\n <td>Enter visual block mode</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"in-visual-mode\">In visual mode</h4>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d</code> <em>/</em> <code>x</code></td>\n <td>Delete selection</td>\n </tr>\n <tr>\n <td><code>s</code></td>\n <td>Replace selection</td>\n </tr>\n <tr>\n <td><code>y</code></td>\n <td>Yank selection <em>(Copy)</em></td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"#operators\">Operators</a> for other things you can do.</p>\n\n<h2 class=\"-three-column\" id=\"operators\">Operators</h2>\n\n<h3 class=\"-prime\" id=\"usage\">Usage</h3>\n\n<p class=\"-setup\">Operators let you operate in a range of text (defined by <em>motion</em>). These are performed in normal mode.</p>\n\n<table class=\"-css-breakdown\">\n <tbody>\n <tr>\n <td><code>d</code></td>\n <td><code>w</code></td>\n </tr>\n <tr>\n <td>Operator</td>\n <td>Motion</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"operators-list\">Operators list</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d</code></td>\n <td>Delete</td>\n </tr>\n <tr>\n <td><code>y</code></td>\n <td>Yank <em>(copy)</em></td>\n </tr>\n <tr>\n <td><code>c</code></td>\n <td>Change <em>(delete then insert)</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>&gt;</code></td>\n <td>Indent right</td>\n </tr>\n <tr>\n <td><code>&lt;</code></td>\n <td>Indent left</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>g~</code></td>\n <td>Swap case</td>\n </tr>\n <tr>\n <td><code>gU</code></td>\n <td>Uppercase</td>\n </tr>\n <tr>\n <td><code>gu</code></td>\n <td>Lowercase</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>!</code></td>\n <td>Filter through external program</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <code>:help operator</code></p>\n\n<h3 id=\"examples\">Examples</h3>\n\n<p class=\"-setup\">Combine operators with <em>motions</em> to use them.</p>\n\n<table>\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>d</code><em>d</em></td>\n <td><em>(repeat the letter)</em> Delete current line</td>\n </tr>\n <tr>\n <td><code>d</code><em>w</em></td>\n <td>Delete to next word</td>\n </tr>\n <tr>\n <td><code>d</code><em>b</em></td>\n <td>Delete to beginning of word</td>\n </tr>\n <tr>\n <td><em>2</em><code>dd</code></td>\n <td>Delete 2 lines</td>\n </tr>\n <tr>\n <td><code>d</code><em>ip</em></td>\n <td>Delete a text object <em>(inside paragraph)</em></td>\n </tr>\n <tr>\n <td><em>(in visual mode)</em> <code>d</code></td>\n <td>Delete selection</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <code>:help motion.txt</code></p>\n\n<h2 class=\"-three-column\" id=\"text-objects\">Text objects</h2>\n\n<h3 class=\"-prime\" id=\"usage-1\">Usage</h3>\n\n<p class=\"-setup\">Text objects let you operate (with an <em>operator</em>) in or around text blocks (<em>objects</em>).</p>\n\n<table class=\"-css-breakdown\">\n <tbody>\n <tr>\n <td><code>v</code></td>\n <td><code>i</code></td>\n <td><code>p</code></td>\n </tr>\n <tr>\n <td>Operator</td>\n <td>[i]nside or [a]round</td>\n <td>Text object</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"text-objects-1\">Text objects</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>p</code></td>\n <td>Paragraph</td>\n </tr>\n <tr>\n <td><code>w</code></td>\n <td>Word</td>\n </tr>\n <tr>\n <td><code>s</code></td>\n <td>Sentence</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[</code> <code>(</code> <code>{</code> <code>&lt;</code></td>\n <td>A [], (), or {} block</td>\n </tr>\n <tr>\n <td><code>'</code> <code>\"</code> <code>`</code></td>\n <td>A quoted string</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>b</code></td>\n <td>A block [(</td>\n </tr>\n <tr>\n <td><code>B</code></td>\n <td>A block in [{</td>\n </tr>\n <tr>\n <td><code>t</code></td>\n <td>A XML tag block</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"examples-1\">Examples</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>vip</code></td>\n <td>Select paragraph</td>\n </tr>\n <tr>\n <td><code>vipipipip</code></td>\n <td>Select more</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>yip</code></td>\n <td>Yank inner paragraph</td>\n </tr>\n <tr>\n <td><code>yap</code></td>\n <td>Yank paragraph (including newline)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>dip</code></td>\n <td>Delete inner paragraph</td>\n </tr>\n <tr>\n <td><code>cip</code></td>\n <td>Change inner paragraph</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <a href=\"#operators\">Operators</a> for other things you can do.</p>\n\n<h3 id=\"diff\">Diff</h3>\n\n<table>\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>gvimdiff file1 file2 [file3]</code></td>\n <td>See differencies between files, in HMI</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"folds\">Folds</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>zo</code> <em>/</em> <code>zO</code></td>\n <td>Open</td>\n </tr>\n <tr>\n <td><code>zc</code> <em>/</em> <code>zC</code></td>\n <td>Close</td>\n </tr>\n <tr>\n <td><code>za</code> <em>/</em> <code>zA</code></td>\n <td>Toggle</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zv</code></td>\n <td>Open folds for this line</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zM</code></td>\n <td>Close all</td>\n </tr>\n <tr>\n <td><code>zR</code></td>\n <td>Open all</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zm</code></td>\n <td>Fold more <em>(foldlevel += 1)</em></td>\n </tr>\n <tr>\n <td><code>zr</code></td>\n <td>Fold less <em>(foldlevel -= 1)</em></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>zx</code></td>\n <td>Update folds</td>\n </tr>\n </tbody>\n</table>\n\n<p>Uppercase ones are recursive (eg, <code>zO</code> is open recursively).</p>\n\n<h3 id=\"navigation\">Navigation</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>[(</code> <code>[{</code> <code>[&lt;</code></td>\n <td>Previous <code>(</code> or <code>{</code> or <code>&lt;</code></td>\n </tr>\n <tr>\n <td><code>])</code></td>\n <td>Next</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>[m</code></td>\n <td>Previous method start</td>\n </tr>\n <tr>\n <td><code>[M</code></td>\n <td>Previous method end</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"jumping\">Jumping</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&lt;C-O&gt;</code></td>\n <td>Go back to previous location</td>\n </tr>\n <tr>\n <td><code>&lt;C-I&gt;</code></td>\n <td>Go forward</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>gf</code></td>\n <td>Go to file in cursor</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"counters\">Counters</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&lt;C-A&gt;</code></td>\n <td>Increment number</td>\n </tr>\n <tr>\n <td><code>&lt;C-X&gt;</code></td>\n <td>Decrement</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"windows\">Windows</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>z{height}&lt;Cr&gt;</code></td>\n <td>Resize pane to <code>{height}</code> lines tall</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"tags\">Tags</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:tag Classname</code></td>\n <td>Jump to first definition of Classname</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>&lt;C-]&gt;</code></td>\n <td>Jump to definition</td>\n </tr>\n <tr>\n <td><code>g]</code></td>\n <td>See all definitions</td>\n </tr>\n <tr>\n <td><code>&lt;C-T&gt;</code></td>\n <td>Go back to last tag</td>\n </tr>\n <tr>\n <td><code>&lt;C-O&gt; &lt;C-I&gt;</code></td>\n <td>Back/forward</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:tselect Classname</code></td>\n <td>Find definitions of Classname</td>\n </tr>\n <tr>\n <td><code>:tjump Classname</code></td>\n <td>Find definitions of Classname (auto-select 1st)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"case\">Case</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>~</code></td>\n <td>Toggle case (Case =&gt; cASE)</td>\n </tr>\n <tr>\n <td><code>gU</code></td>\n <td>Uppercase</td>\n </tr>\n <tr>\n <td><code>gu</code></td>\n <td>Lowercase</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>gUU</code></td>\n <td>Uppercase current line (also <code>gUgU</code>)</td>\n </tr>\n <tr>\n <td><code>guu</code></td>\n <td>Lowercase current line (also <code>gugu</code>)</td>\n </tr>\n </tbody>\n</table>\n\n<p>Do these in visual or normal mode.</p>\n\n<h3 id=\"marks\">Marks</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>`^</code></td>\n <td>Last position of cursor in insert mode</td>\n </tr>\n <tr>\n <td><code>`.</code></td>\n <td>Last change</td>\n </tr>\n <tr>\n <td><code>``</code></td>\n <td>Last jump</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>ma</code></td>\n <td>Mark this cursor position as <code>a</code></td>\n </tr>\n <tr>\n <td><code>`a</code></td>\n <td>Jump to the cursor position <code>a</code></td>\n </tr>\n <tr>\n <td><code>'a</code></td>\n <td>Jump to the beginning of the line with position <code>a</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"misc-1\">Misc</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.</code></td>\n <td>Repeat last command</td>\n </tr>\n <tr>\n <td><code>]p</code></td>\n <td>Paste under the current indentation level</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:ff=unix</code></td>\n <td>Convert Windows line endings to Unix line endings</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"command-line\">Command line</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&lt;C-R&gt;&lt;C-W&gt;</code></td>\n <td>Insert current word into the command line</td>\n </tr>\n <tr>\n <td><code>&lt;C-R&gt;\"</code></td>\n <td>Paste from “ register</td>\n </tr>\n <tr>\n <td><code>&lt;C-X&gt;&lt;C-F&gt;</code></td>\n <td>Auto-completion of path in insert mode</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"text-alignment\">Text alignment</h3>\n\n<pre><code>:center [width]\n:right [width]\n:left\n</code></pre>\n\n<p>See <code>:help formatting</code></p>\n\n<h3 id=\"calculator\">Calculator</h3>\n\n<table>\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&lt;C-R&gt;=128/2</code></td>\n <td>Shows the result of the division : ‘64’</td>\n </tr>\n </tbody>\n</table>\n\n<p>Do this in insert mode.</p>\n\n<h3 id=\"exiting-with-an-error\">Exiting with an error</h3>\n\n<pre><code>:cq\n:cquit\n</code></pre>\n\n<p>Works like <code>:qa</code>, but throws an error. Great for aborting Git commands.</p>\n\n<h3 id=\"spell-checking\">Spell checking</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>:set spell spelllang=en_us</code></td>\n <td>Turn on US English spell checking</td>\n </tr>\n <tr>\n <td><code>]s</code></td>\n <td>Move to next misspelled word after the cursor</td>\n </tr>\n <tr>\n <td><code>[s</code></td>\n <td>Move to previous misspelled word before the cursor</td>\n </tr>\n <tr>\n <td><code>z=</code></td>\n <td>Suggest spellings for the word under/after the cursor</td>\n </tr>\n <tr>\n <td><code>zg</code></td>\n <td>Add word to spell list</td>\n </tr>\n <tr>\n <td><code>zw</code></td>\n <td>Mark word as bad/mispelling</td>\n </tr>\n <tr>\n <td><code>zu</code> / <code>C-X (Insert Mode)</code></td>\n <td>Suggest words for bad word under cursor from spellfile</td>\n </tr>\n </tbody>\n</table>\n\n<p>See <code>:help spell</code></p>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://vim.rtorr.com/\">Vim cheatsheet</a> <em>(vim.rotrr.com)</em></li>\n <li><a href=\"http://vimdoc.sourceforge.net/htmldoc/\">Vim documentation</a> <em>(vimdoc.sourceforge.net)</em></li>\n <li><a href=\"http://openvim.com/\">Interactive Vim tutorial</a> <em>(openvim.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"http://www.vim.org/\">Vim</a> is a very efficient text editor. This reference was made for Vim 8.0. <br />\nFor shortcut notation, see <code>:help key-notation</code>.</p>",
"description_html": "",
"tags": ["Featured"],
"updated": "2018-09-11"
},{
"id": "vimscript-functions",
"title": "Vimscript functions",
"url": "/vimscript-functions",
"category": "Vim",
"keywords": null,
"content_html": "<h2 id=\"dictionaries\">Dictionaries</h2>\n\n<pre><code class=\"language-vim\">let colors = {\n \\ \"apple\": \"red\",\n \\ \"banana\": \"yellow\"\n}\n\necho colors[\"a\"]\necho get(colors, \"apple\") \" suppress error\n\nremove(colors, \"apple\")\n\n\" :help E715\nif has_key(dict, 'foo')\nif empty(dict)\nkeys(dict)\nlen(dict)\n\nmax(dict)\nmin(dict)\n\ncount(dict, 'x')\nstring(dict)\n\nmap(dict, '&lt;&gt;&gt; \" . v:val')\nextend(s:fruits, { ... })\n</code></pre>\n\n<pre><code class=\"language-vim\">for key in keys(mydict)\n echo key . ': ' . mydict(key)\nendfor\n</code></pre>\n\n<h2 id=\"lists\">Lists</h2>\n\n<pre><code class=\"language-vim\">let mylist = [1, two, 3, \"four\"]\n\nlet first = mylist[0]\nlet last = mylist[-1]\n\n\" Suppresses errors\nlet second = get(mylist, 1)\nlet second = get(mylist, 1, \"NONE\")\n</code></pre>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 id=\"buffer\">Buffer</h3>\n\n<pre><code>line('.') \" current line number\ncol('.')\ncol('$')\n\ngetline('.') \" current line as a string\ngetline(1) \" get line 1\ngetline(1, 5) \" get lines 1-5\nsearch('^$') \" next blank line, returns line number\nsearch('^$','n') \" but don't move cursor\n\ngetcurpos() \" [bufnum, lnum, col, off, curswant]\ngetpos('.') \" [bufnum, lnum, col, off]\n\nnextnonblank(1) \" next non-blank line after line1\nprevnonblank()\n</code></pre>\n\n<h3 id=\"marks\">Marks</h3>\n\n<pre><code>getpos(\"'a\") \" position of a mark\nsetpos(\"'a\",...)\n\ngetpos(\"'&lt;\") \" position of selection start\n</code></pre>\n\n<h3 id=\"cursor\">Cursor</h3>\n\n<pre><code>cursor(line,col) \" moves cursor\ncursor(line,col,off,curswant)\n\ngetcurpos() \" returns [bufnum,line,col,off,curswant]\n</code></pre>\n\n<h3 id=\"expand\">Expand</h3>\n\n<pre><code>expand('&lt;cword&gt;') \" word under cursor\nexpand('%') \" current file\n\n\" &lt;cword&gt; current word on cursor\n\" :p full path\n\" :h head\n\" :p:h dirname (/Users/rsc/project)\n\" :t tail (file.txt)\n\" :r root (file)\n\" :e extension (.txt)\n\" see :h cmdline-special\n</code></pre>\n\n<h3 id=\"files\">Files</h3>\n\n<pre><code>fnameescape('string')\nfnamemodify('main.c', ':p:h')\nfnamemodify(fname, ':e') \" current file extension - see expand()\nfilereadable(fname)\ngetfsize('file.txt')\ngetcwd()\n\nglobpath(&amp;rtp, \"plugin/commentary.vim\")\n</code></pre>\n\n<h3 id=\"math\">Math</h3>\n\n<pre><code>fmod(9, 2) \" modulus\nabs(-0.5)\nsqrt(9)\n\ntrunc(1.84)\nfloor(1.84)\nceil(1.84)\nfloat2nr(3.14)\n</code></pre>\n\n<h3 id=\"casting\">Casting</h3>\n\n<pre><code>str2float('0.2')\nstr2nr('240')\nstr2nr('ff', '16')\n\nstring(0.3)\n</code></pre>\n\n<h3 id=\"type-checking\">Type checking</h3>\n\n<pre><code>type(var) == type(0)\ntype(var) == type(\"\")\ntype(var) == type(function(\"tr\"))\ntype(var) == type([])\ntype(var) == type({})\ntype(var) == type(0.0)\n</code></pre>\n\n<h3 id=\"datetime\">Date/time</h3>\n\n<pre><code>strftime('%c')\nstrftime('%c',getftime('file.c'))\n</code></pre>\n\n<h3 id=\"strings\">Strings</h3>\n\n<pre><code>if a =~ '\\s*'\nsubstitute(str, '.', 'x', 'g')\nstrpart(\"abcdef\", 3, 2) \" == \"de\" (substring)\nstrpart(\"abcdef\", 3) \" == \"def\"\nstridx(\"abcdef\", \"e\") \" == \"e\"\nstrridx() \" reverse\n\nmatchstr('testing','test') \" == 'test' (or '')\nmatch('testing','test') \" == 0\nmatchend('testing','test') \" == 4\nmatch('testing','\\ctest') \" ignore case\n\nsplit(str, '\\zs') \" split into characters\n\nstrlen(str)\nstrchars() \" accounts for composing chars\nstrwidth() \" accounts for ambig characters\nstrdisplaywidth() \" accounts for tab stops\n\ntoupper(str)\ntolower(str)\ntr('foo', '_-', ' ')\n</code></pre>\n\n<h3 id=\"syntax\">Syntax</h3>\n\n<pre><code>synstack(line('.'),col('.')) \" returns many\nsynID(line('.'),col('.'),1) \" only one\n\nsynIDattr(id,\"bg\")\nsynIDattr(id,\"name\")\nsynIDtrans()\n\n\" syntax stack\nmap(synstack(line('.'), col('.')), 'synIDattr(v:val, \"name\")')\n</code></pre>\n\n<h3 id=\"shell\">Shell</h3>\n\n<pre><code>system('ls '.shellescape(expand('%:h')))\n</code></pre>\n\n<h3 id=\"registers\">Registers</h3>\n\n<pre><code>getreg('*')\ngetregtype('*') \" v(char), V(line) &lt;ctrl-v&gt;(block)\n</code></pre>\n\n<h2 id=\"comparisons\">Comparisons</h2>\n\n<pre><code>if name ==# 'John' \" case-sensitive\nif name ==? 'John' \" case-insensitive\nif name == 'John' \" depends on :set ignorecase\n\" also: is#, is?, &gt;=#, &gt;=?, and so on\n\nif \"hello\" =~ '.*'\nif \"hello\" !~ '.*'\n</code></pre>\n\n<h2 id=\"executing\">Executing</h2>\n\n<h3 id=\"running-commands\">Running commands</h3>\n\n<pre><code>normal 'ddahello'\nexe 'normal ^C' \" with expansions\nwincmd J\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vimscript-snippets",
"title": "Vimscript snippets",
"url": "/vimscript-snippets",
"category": "Vim",
"keywords": null,
"content_html": "<h3 id=\"bind-function-to-key-and-command\">Bind function to key and command</h3>\n\n<pre><code>command! YoFunctionHere call s:YoFunctionHere()\nnnoremap &lt;silent&gt; x :call &lt;SID&gt;FunctionHere()&lt;CR&gt;\nfunction! s:FunctionHere()\nendfunction\n</code></pre>\n\n<h3 id=\"call-a-function-in-insert-mode\">Call a function in insert mode</h3>\n\n<pre><code>inoremap X &lt;C-R&gt;=script#myfunction()&lt;CR&gt;\ninoremap &lt;F2&gt; &lt;C-R&gt;=MyVimFunc()?'':''&lt;CR&gt;\n</code></pre>\n\n<h3 id=\"checking-plugins\">Checking plugins</h3>\n\n<pre><code>if globpath(&amp;rtp, \"plugin/commentary.vim\") != \"\"\n</code></pre>\n\n<h2 id=\"autoload\">Autoload</h2>\n\n<pre><code>\" autoload/hello.vim\nif exists(\"g:hello_loaded\") | finish | endif\nlet g:hello_loaded=1\n\nfunction hello#method()\nendfunction\n\n\" calling hello#method() will load only if autoload()\n</code></pre>\n\n<h2 id=\"misc\">Misc</h2>\n\n<h3 id=\"version-check\">Version check</h3>\n\n<pre><code>if version &lt; 704\n echom \"requires vim &gt;= 7.4\"\nendif\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vimscript",
"title": "Vim scripting",
"url": "/vimscript",
"category": "Vim",
"keywords": null,
"content_html": "<h3 id=\"start-hacking\">Start hacking</h3>\n\n<pre><code class=\"language-vim\">let name = \"John\"\necho \"Hello, \" . name\n</code></pre>\n\n<p>You can either put this in a script (<code>script.vim</code>) and run it (<code>:source script.vim</code>), or you can type the commands individually in normal mode as <code>:let</code> and <code>:echo</code>.</p>\n\n<h3 id=\"learn-by-example\">Learn by example</h3>\n\n<pre><code class=\"language-vim\">function! SuperTab()\n let l:part = strpart(getline('.'),col('.')-2,1)\n if (l:part=~'^\\W\\?$')\n return \"\\&lt;Tab&gt;\"\n else\n return \"\\&lt;C-n&gt;\"\n endif\nendfunction\n\nimap &lt;Tab&gt; &lt;C-R&gt;=SuperTab()&lt;CR&gt;\n</code></pre>\n\n<p><a href=\"http://www.vimbits.com/bits/46\">Here</a>’s another example with <a href=\"#functions\">functions</a>, <a href=\"#variables\">variables</a> and <a href=\"#mapping\">mapping</a>.</p>\n\n<h2 id=\"variables\">Variables</h2>\n\n<h3 class=\"-prime\" id=\"defining\">Defining</h3>\n\n<pre><code class=\"language-vim\">let var = \"hello\"\n</code></pre>\n\n<h3 id=\"variable-prefixes\">Variable prefixes</h3>\n\n<pre><code class=\"language-vim\">let g:ack_options = '-s -H' \" g: global\nlet s:ack_program = 'ack' \" s: local (to script)\nlet l:foo = 'bar' \" l: local (to function)\n</code></pre>\n\n<p>The <code>s:</code> prefix is also available in function names. See <code>:help local-variables</code></p>\n\n<h3 id=\"other-prefixes\">Other prefixes</h3>\n\n<pre><code class=\"language-vim\">let w:foo = 'bar' \" w: window\nlet b:state = 'on' \" b: buffer\nlet t:state = 'off' \" t: tab\necho v:var \" v: vim special\n</code></pre>\n\n<pre><code class=\"language-vim\">let @/ = '' \" @ register (this clears last search pattern)\necho $PATH \" $ env\n</code></pre>\n\n<h3 id=\"vim-options\">Vim options</h3>\n\n<pre><code class=\"language-vim\">echo 'tabstop is ' . &amp;tabstop\nif &amp;insertmode\necho &amp;g:option\necho &amp;l:option\n</code></pre>\n\n<p>Prefix Vim options with <code>&amp;</code></p>\n\n<h3 id=\"operators\">Operators</h3>\n\n<pre><code class=\"language-vim\">a + b \" numbers only!\n'hello ' . name \" concat\n</code></pre>\n\n<pre><code class=\"language-vim\">let var -= 2\nlet var += 5\nlet var .= 'string' \" concat\n</code></pre>\n\n<h2 id=\"strings\">Strings</h2>\n\n<h3 id=\"strings-1\">Strings</h3>\n\n<pre><code class=\"language-vim\">let str = \"String\"\nlet str = \"String with \\n newline\"\n\nlet literal = 'literal, no \\ escaping'\nlet literal = 'that''s enough' \" double '' =&gt; '\n\necho \"result = \" . re \" concatenation\n</code></pre>\n\n<p>Also see <code>:help literal-string</code> and <code>:help expr-quote</code>.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/26.html\">Strings</a></p>\n\n<h3 id=\"string-functions\">String functions</h3>\n\n<pre><code class=\"language-vim\">strlen(str) \" length\nlen(str) \" same\nstrchars(str) \" character length\n\nsplit(\"one two three\") \"=&gt; ['one', 'two', 'three']\nsplit(\"one.two.three\", '.') \"=&gt; ['one', 'two', 'three']\n\njoin(['a', 'b'], ',') \"=&gt; 'a,b'\n\ntolower('Hello')\ntoupper('Hello')\n</code></pre>\n\n<p>Also see <code>:help functions</code>\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/27.html\">String functions</a></p>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 class=\"-prime\" id=\"functions-1\">Functions</h3>\n\n<pre><code class=\"language-vim\">\" prefix with s: for local script-only functions\nfunction! s:Initialize(cmd, args)\n \" a: prefix for arguments\n echo \"Command: \" . a:cmd\n\n return true\nendfunction\n</code></pre>\n\n<p>See: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/23.html\">Functions</a></p>\n\n<h3 id=\"namespacing\">Namespacing</h3>\n\n<pre><code class=\"language-vim\">function! myplugin#hello()\n</code></pre>\n\n<h3 id=\"calling-functions\">Calling functions</h3>\n\n<pre><code class=\"language-vim\">call s:Initialize()\ncall s:Initialize(\"hello\")\n</code></pre>\n\n<h3 id=\"consuming-return-values\">Consuming return values</h3>\n\n<pre><code class=\"language-vim\">echo \"Result: \" . s:Initialize()\n</code></pre>\n\n<h3 id=\"abortable\">Abortable</h3>\n\n<pre><code class=\"language-vim\">function! myfunction() abort\nendfunction\n</code></pre>\n\n<p>Aborts when an error occurs.</p>\n\n<h3 id=\"var-arguments\">Var arguments</h3>\n\n<pre><code class=\"language-vim\">function! infect(...)\n echo a:0 \"=&gt; 2\n echo a:1 \"=&gt; jake\n echo a:2 \"=&gt; bella\n\n for s in a:000 \" a list\n echon ' ' . s\n endfor\nendfunction\n\ninfect('jake', 'bella')\n</code></pre>\n\n<p>See <code>:help function-argument</code>. See: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/24.html\">Var arguments</a></p>\n\n<h2 id=\"loops\">Loops</h2>\n\n<pre><code class=\"language-vim\">for s in list\n echo s\n continue \" jump to start of loop\n break \" breaks out of a loop\nendfor\n</code></pre>\n\n<pre><code class=\"language-vim\">while x &lt; 5\nendwhile\n</code></pre>\n\n<h2 id=\"custom-commands\">Custom commands</h2>\n\n<h3 class=\"-prime\" id=\"custom-commands-1\">Custom commands</h3>\n\n<pre><code class=\"language-vim\">command! Save :set fo=want tw=80 nowrap\n</code></pre>\n\n<p>Custom commands start with uppercase letters. The <code>!</code> redefines a command if it already exists.</p>\n\n<h3 id=\"commands-calling-functions\">Commands calling functions</h3>\n\n<pre class=\"-setup\"><code class=\"language-vim\">command! Save call &lt;SID&gt;foo()\n</code></pre>\n\n<pre><code class=\"language-vim\">function! s:foo()\n ...\nendfunction\n</code></pre>\n\n<h3 id=\"commands-with-arguments\">Commands with arguments</h3>\n\n<pre class=\"-setup\"><code class=\"language-vim\">command! -nargs=? Save call script#foo(&lt;args&gt;)\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>-nargs=0</code></td>\n <td>0 arguments, default</td>\n </tr>\n <tr>\n <td><code>-nargs=1</code></td>\n <td>1 argument, includes spaces</td>\n </tr>\n <tr>\n <td><code>-nargs=?</code></td>\n <td>0 or 1 argument</td>\n </tr>\n <tr>\n <td><code>-nargs=*</code></td>\n <td>0+ arguments, space separated</td>\n </tr>\n <tr>\n <td><code>-nargs=+</code></td>\n <td>1+ arguments, space reparated</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"flow\">Flow</h2>\n\n<h3 id=\"conditionals\">Conditionals</h3>\n\n<pre><code class=\"language-vim\">let char = getchar()\nif char == \"\\&lt;LeftMouse&gt;\"\n \" ...\nelseif char == \"\\&lt;RightMouse&gt;\"\n \" ...\nelse\n \" ...\nendif\n</code></pre>\n\n<h3 id=\"truthiness\">Truthiness</h3>\n\n<pre><code class=\"language-vim\">if 1 | echo \"true\" | endif\nif 0 | echo \"false\" | endif\n</code></pre>\n\n<pre><code class=\"language-vim\">if 1 \"=&gt; 1 (true)\nif 0 \"=&gt; 0 (false)\nif \"1\" \"=&gt; 1 (true)\nif \"456\" \"=&gt; 1 (true)\nif \"xfz\" \"=&gt; 0 (false)\n</code></pre>\n\n<p>No booleans. <code>0</code> is false, <code>1</code> is true.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/21.html\">Truthiness</a></p>\n\n<h3 id=\"operators-1\">Operators</h3>\n\n<pre><code class=\"language-vim\">if 3 &gt; 2\nif a &amp;&amp; b\nif (a &amp;&amp; b) || (c &amp;&amp; d)\nif !c\n</code></pre>\n\n<p>See <code>:help expression-syntax</code>.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/22.html\">Operators</a></p>\n\n<h3 id=\"strings-2\">Strings</h3>\n\n<pre><code class=\"language-vim\">if name ==# 'John' \" case-sensitive\nif name ==? 'John' \" case-insensitive\nif name == 'John' \" depends on :set ignorecase\n\n\" also: is#, is?, &gt;=#, &gt;=?, and so on\n</code></pre>\n\n<h3 id=\"identity-operators\">Identity operators</h3>\n\n<pre><code class=\"language-vim\">a is b\na isnot b\n</code></pre>\n\n<p>Checks if it’s the same instance object.</p>\n\n<h3 id=\"regexp-matches\">Regexp matches</h3>\n\n<pre><code class=\"language-vim\">\"hello\" =~ '/x/'\n\"hello\" !~ '/x/'\n</code></pre>\n\n<h3 id=\"single-line\">Single line</h3>\n\n<pre><code class=\"language-vim\">if empty(a:path) | return [] | endif\na ? b : c\n</code></pre>\n\n<p>Use <code>|</code> to join lines together.</p>\n\n<h3 id=\"boolean-logic\">Boolean logic</h3>\n\n<pre><code class=\"language-vim\">if g:use_dispatch &amp;&amp; s:has_dispatch\n ···\nendif\n</code></pre>\n\n<h2 id=\"lists\">Lists</h2>\n\n<h3 id=\"lists-1\">Lists</h3>\n\n<pre><code class=\"language-vim\">let mylist = [1, two, 3, \"four\"]\n\nlet first = mylist[0]\nlet last = mylist[-1]\n\n\" Suppresses errors\nlet second = get(mylist, 1)\nlet second = get(mylist, 1, \"NONE\")\n</code></pre>\n\n<h3 id=\"functions-2\">Functions</h3>\n\n<pre><code class=\"language-vim\">len(mylist)\nempty(mylist)\n\nsort(list)\nlet sortedlist = sort(copy(list))\n\nsplit('hello there world', ' ')\n</code></pre>\n\n<h3 id=\"concatenation\">Concatenation</h3>\n\n<pre><code class=\"language-vim\">let longlist = mylist + [5, 6]\nlet mylist += [7, 8]\n</code></pre>\n\n<h3 id=\"sublists\">Sublists</h3>\n\n<pre><code class=\"language-vim\">let shortlist = mylist[2:-1]\nlet shortlist = mylist[2:] \" same\n\nlet shortlist = mylist[2:2] \" one item\n</code></pre>\n\n<h3 id=\"push\">Push</h3>\n\n<pre><code class=\"language-vim\">let alist = [1, 2, 3]\nlet alist = add(alist, 4)\n</code></pre>\n\n<h3 id=\"map\">Map</h3>\n\n<pre><code class=\"language-vim\">call map(files, \"bufname(v:val)\") \" use v:val for value\ncall filter(files, 'v:val != \"\"')\n</code></pre>\n\n<h2 id=\"dictionaries\">Dictionaries</h2>\n\n<h3 id=\"dictionaries-1\">Dictionaries</h3>\n\n<pre><code class=\"language-vim\">let colors = {\n \\ \"apple\": \"red\",\n \\ \"banana\": \"yellow\"\n}\n\necho colors[\"a\"]\necho get(colors, \"apple\") \" suppress error\n</code></pre>\n\n<p>See <code>:help dict</code></p>\n\n<h3 id=\"using-dictionaries\">Using dictionaries</h3>\n\n<pre><code class=\"language-vim\">remove(colors, \"apple\")\n</code></pre>\n\n<pre><code class=\"language-vim\">\" :help E715\nif has_key(dict, 'foo')\nif empty(dict)\nkeys(dict)\nlen(dict)\n</code></pre>\n\n<pre><code class=\"language-vim\">max(dict)\nmin(dict)\n</code></pre>\n\n<pre><code class=\"language-vim\">count(dict, 'x')\nstring(dict)\n</code></pre>\n\n<pre><code class=\"language-vim\">map(dict, '&lt;&gt;&gt; \" . v:val')\n</code></pre>\n\n<h3 id=\"iteration\">Iteration</h3>\n\n<pre><code class=\"language-vim\">for key in keys(mydict)\n echo key . ': ' . mydict(key)\nendfor\n</code></pre>\n\n<h3 id=\"prefixes\">Prefixes</h3>\n\n<pre><code class=\"language-vim\">keys(s:)\n</code></pre>\n\n<p>Prefixes (<code>s:</code>, <code>g:</code>, <code>l:</code>, etc) are actually dictionaries.</p>\n\n<h3 id=\"extending\">Extending</h3>\n\n<pre><code class=\"language-vim\">\" Extending with more\nlet extend(s:fruits, { ... })\n</code></pre>\n\n<h2 id=\"casting\">Casting</h2>\n\n<pre><code class=\"language-vim\">str2float(\"2.3\")\nstr2nr(\"3\")\nfloat2nr(\"3.14\")\n</code></pre>\n\n<h2 id=\"numbers\">Numbers</h2>\n\n<h3 class=\"-prime\" id=\"numbers-1\">Numbers</h3>\n\n<pre><code class=\"language-vim\">let int = 1000\nlet int = 0xff\nlet int = 0755 \" octal\n</code></pre>\n\n<p>See <code>:help Number</code>.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/25.html\">Numbers</a></p>\n\n<h3 id=\"floats\">Floats</h3>\n\n<pre><code class=\"language-vim\">let fl = 100.1\nlet fl = 5.4e4\n</code></pre>\n\n<p>See <code>:help Float</code></p>\n\n<h3 id=\"arithmetic\">Arithmetic</h3>\n\n<pre><code class=\"language-vim\">3 / 2 \"=&gt; 1, integer division\n3 / 2.0 \"=&gt; 1.5\n3 * 2.0 \"=&gt; 6.0\n</code></pre>\n\n<h3 id=\"math-functions\">Math functions</h3>\n\n<pre><code class=\"language-vim\">sqrt(100)\nfloor(3.5)\nceil(3.3)\nabs(-3.4)\n\nsin() cos() tan()\nsinh() cosh() tanh()\nasin() acos() atan()\n</code></pre>\n\n<h2 id=\"vim-isms\">Vim-isms</h2>\n\n<h3 id=\"execute-a-command\">Execute a command</h3>\n\n<pre><code class=\"language-vim\">execute \"vsplit\"\nexecute \"e \" . fnameescape(filename)\n</code></pre>\n\n<p>Runs an ex command you typically run with <code>:</code>. Also see <code>:help execute</code>.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/28.html\">Execute a command</a></p>\n\n<h3 id=\"running-keystrokes\">Running keystrokes</h3>\n\n<pre><code class=\"language-vim\">normal G\nnormal! G \" skips key mappings\n\nexecute \"normal! gg/foo\\&lt;cr&gt;dd\"\n</code></pre>\n\n<p>Use <code>:normal</code> to execute keystrokes as if you’re typing them in normal mode. Combine with <code>:execute</code> for special keystrokes.\nSee: <a href=\"http://learnvimscriptthehardway.stevelosh.com/chapters/29.html\">Running keystrokes</a></p>\n\n<h3 id=\"getting-filenames\">Getting filenames</h3>\n\n<pre><code class=\"language-vim\">echo expand(\"%\") \" path/file.txt\necho expand(\"%:t\") \" file.txt\necho expand(\"%:p:h\") \" /home/you/path/file.txt\necho expand(\"%:r\") \" path/file\necho expand(\"%:e\") \" txt\n</code></pre>\n\n<p>See <code>:help expand</code></p>\n\n<h3 id=\"silencing\">Silencing</h3>\n\n<pre><code class=\"language-vim\">silent g/Aap/p\n</code></pre>\n\n<p>Suppresses output. See <code>:help silent</code></p>\n\n<h3 id=\"echo\">Echo</h3>\n\n<pre><code class=\"language-vim\">echoerr 'oh it failed'\nechomsg 'hello there'\necho 'hello'\n\nechohl WarningMsg | echomsg \"=&gt; \" . a:msg | echohl None\n</code></pre>\n\n<h3 id=\"settings\">Settings</h3>\n\n<pre><code class=\"language-vim\">set number\nset nonumber\nset number! \" toggle\nset numberwidth=5\nset guioptions+=e\n</code></pre>\n\n<h3 id=\"prompts\">Prompts</h3>\n\n<pre><code class=\"language-vim\">let result = confirm(\"Sure?\")\nexecute \"confirm q\"\n</code></pre>\n\n<h3 id=\"built-ins\">Built-ins</h3>\n\n<pre><code class=\"language-vim\">has(\"feature\") \" :h feature-list\nexecutable(\"python\")\nglobpath(&amp;rtp, \"syntax/c.vim\")\n\nexists(\"$ENV\")\nexists(\":command\")\nexists(\"variable\")\nexists(\"+option\")\nexists(\"g:...\")\n</code></pre>\n\n<h2 class=\"-three-column\" id=\"mapping\">Mapping</h2>\n\n<h3 id=\"mapping-commands\">Mapping commands</h3>\n\n<pre><code class=\"language-vim\">nmap\nvmap\nimap\nxmap\nnnoremap\nvnoremap\ninoremap\nxnoremap\n...\n</code></pre>\n\n<h3 id=\"explanation\">Explanation</h3>\n\n<pre><code class=\"language-vim\">[nvixso](nore)map\n</code></pre>\n\n<pre class=\"-setup\"><code> │ └ don't recurse\n │\n └ normal, visual, insert,\n eX mode, select, operator-pending\n</code></pre>\n\n<h3 id=\"arguments\">Arguments</h3>\n\n<table>\n <tbody>\n <tr>\n <td><code>&lt;buffer&gt;</code></td>\n <td>only in current buffer</td>\n </tr>\n <tr>\n <td><code>&lt;silent&gt;</code></td>\n <td>no echo</td>\n </tr>\n <tr>\n <td><code>&lt;nowait&gt;</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"syntax\">Syntax</h2>\n\n<h3 id=\"highlights\">Highlights</h3>\n\n<pre><code class=\"language-vim\">hi Comment\n term=bold,underline\n gui=bold\n ctermfg=4\n guifg=#80a0ff\n</code></pre>\n\n<h3 id=\"filetype-detection\">Filetype detection</h3>\n\n<pre><code class=\"language-vim\">augroup filetypedetect\n au! BufNewFile,BufRead *.json setf javascript\naugroup END\n\nau Filetype markdown setlocal spell\n</code></pre>\n\n<h3 id=\"conceal\">Conceal</h3>\n\n<pre><code class=\"language-vim\">set conceallevel=2\nsyn match newLine \"&lt;br&gt;\" conceal cchar=}\nhi newLine guifg=green\n</code></pre>\n\n<h3 id=\"region-conceal\">Region conceal</h3>\n\n<pre><code class=\"language-vim\">syn region inBold concealends matchgroup=bTag start=\"&lt;b&gt;\" end=\"&lt;/b&gt;\"\nhi inBold gui=bold\nhi bTag guifg=blue\n</code></pre>\n\n<h3 id=\"syntax-1\">Syntax</h3>\n\n<pre><code class=\"language-vim\">syn match :name \":regex\" :flags\n\nsyn region Comment start=\"/\\*\" end=\"\\*/\"\nsyn region String start=+\"+ end=+\"+\t skip=+\\\\\"+\n\nsyn cluster :name contains=:n1,:n2,:n3...\n\nflags:\n keepend\n oneline\n nextgroup=\n contains=\n contained\n\nhi def link markdownH1 htmlH1\n</code></pre>\n\n<h3 id=\"include-guards\">Include guards</h3>\n\n<pre><code class=\"language-vim\">if exists('g:loaded_myplugin')\n finish\nendif\n\n\" ...\n\nlet g:loaded_myplugin = 1\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-08-30"
},{
"id": "virtual-dom",
"title": "Virtual-dom",
"url": "/virtual-dom",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<p>See <a href=\"https://www.npmjs.com/package/virtual-dom\">https://www.npmjs.com/package/virtual-dom</a></p>\n\n<pre><code class=\"language-js\">var h = require('virtual-dom/h')\nvar diff = require('virtual-dom/diff')\nvar patch = require('virtual-dom/patch')\nvar createElement = require('virtual-dom/create-element')\n</code></pre>\n\n<h3 id=\"rendering\">Rendering</h3>\n\n<pre><code class=\"language-js\">tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])\nel = createElement(tree)\ndocument.body.appendChild(root)\n</code></pre>\n\n<h3 id=\"updating\">Updating</h3>\n\n<pre><code class=\"language-js\">tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])\ndelta = diff(tree, tree2)\nel = patch(el, delta) // patch() modifies el\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vows",
"title": "Vows",
"url": "/vows",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<ul>\n <li><a href=\"http://vowsjs.org/\">Vowsjs.org</a></li>\n</ul>\n\n<h3 id=\"coffeescript-usage\">CoffeeScript usage</h3>\n\n<pre><code>vows = require \"vows\"\nassert = require \"assert\"\n\nvows\n .describe('My tests')\n .addBatch\n 'context':\n topic: -&gt;\n 100\n 'should work': (number) -&gt;\n assert.equal number, 100\n\n .export(module)\n</code></pre>\n\n<h3 id=\"running\">Running</h3>\n\n<pre><code>vows test/*-test.* --spec\n</code></pre>\n\n<h3 id=\"assertions\">Assertions</h3>\n\n<pre><code>assert.equal a, b\nassert.notEqual a, b\nassert.strictEqual a, b\n\nassert.isNaN(number)\nassert.instanceOf(object, klass)\nassert.isUndefined(object)\nassert.isFunction(func)\nassert.isNull(object)\nassert.isNotZero(object)\nassert.isObject(object)\nassert.isString(object)\n</code></pre>\n\n<h3 id=\"async\">Async</h3>\n\n<pre><code>.addBatch\n topic: -&gt;\n doStuff()\n @callback 2\n 'check things': (n) -&gt;\n assert.equal 2, n\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "vscode",
"title": "Visual Studio Code",
"url": "/vscode",
"category": "Apps",
"keywords": ["⌘P: Show files","⌘B: Toggle sidebar","⌘J: Toggle panel","F5: Debug"],
"content_html": "<h2 class=\"-three-column\" id=\"shortcuts\">Shortcuts</h2>\n\n<h3 id=\"command-palette\">Command palette</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⇧⌘P</code></td>\n <td>Show all commands</td>\n </tr>\n <tr>\n <td><code>⌘P</code></td>\n <td>Show files</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"sidebars\">Sidebars</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘B</code></td>\n <td>Toggle sidebar</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⇧⌘E</code></td>\n <td>Explorer</td>\n </tr>\n <tr>\n <td><code>⇧⌘F</code></td>\n <td>Search</td>\n </tr>\n <tr>\n <td><code>⇧⌘D</code></td>\n <td>Debug</td>\n </tr>\n <tr>\n <td><code>⇧⌘X</code></td>\n <td>Extensions</td>\n </tr>\n <tr>\n <td><code>⇧^G</code></td>\n <td>Git (SCM)</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"search\">Search</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘F</code></td>\n <td>Find</td>\n </tr>\n <tr>\n <td><code>⌥⌘F</code></td>\n <td>Replace</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⇧⌘F</code></td>\n <td>Find in files</td>\n </tr>\n <tr>\n <td><code>⇧⌘H</code></td>\n <td>Replace in files</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"panel\">Panel</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘J</code></td>\n <td>Toggle panel</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⇧⌘M</code></td>\n <td>Problems</td>\n </tr>\n <tr>\n <td><code>⇧⌘U</code></td>\n <td>Output</td>\n </tr>\n <tr>\n <td><code>⇧⌘Y</code></td>\n <td>Debug console</td>\n </tr>\n <tr>\n <td><code>^`</code></td>\n <td>Terminal</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"view\">View</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>⌘k</code> <code>z</code></td>\n <td>Zen mode</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⌘k</code> <code>u</code></td>\n <td>Close unmodified</td>\n </tr>\n <tr>\n <td><code>⌘k</code> <code>w</code></td>\n <td>Close all</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"debug\">Debug</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Key</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>F5</code></td>\n <td>Start</td>\n </tr>\n <tr>\n <td><code>⇧F5</code></td>\n <td>Stop</td>\n </tr>\n <tr>\n <td><code>⇧⌘F5</code></td>\n <td>Restart</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^F5</code></td>\n <td>Start without debugging</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>F9</code></td>\n <td>Toggle breakpoint</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>F10</code></td>\n <td>Step over</td>\n </tr>\n <tr>\n <td><code>F11</code></td>\n <td>Step into</td>\n </tr>\n <tr>\n <td><code>⇧F11</code></td>\n <td>Step out</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>⇧⌘D</code></td>\n <td>Debug sidebar</td>\n </tr>\n <tr>\n <td><code>⇧⌘Y</code></td>\n <td>Debug panel</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf\">Keyboard shortcuts (MacOS)</a> <em>(code.visualstudio.com)</em></li>\n <li><a href=\"https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf\">Keyboard shortcuts (Windows)</a> <em>(code.visualstudio.com)</em></li>\n <li><a href=\"https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf\">Keyboard shortcuts (Linux)</a> <em>(code.visualstudio.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://code.visualstudio.com/\">Visual Studio Code</a>, or VSCode, is an open-source code editor. This guide targets VSCode v1.19.</p>",
"description_html": "",
"tags": null,
"updated": "2018-02-03"
},{
"id": "vue",
"title": "Vue.js",
"url": "/vue",
"category": "JavaScript",
"keywords": null,
"content_html": "<p>{%raw%}</p>\n\n<h2 class=\"-three-column\" id=\"expressions\">Expressions</h2>\n\n<h3 id=\"expressions-1\">Expressions</h3>\n\n<pre><code class=\"language-html\">&lt;div id=\"app\"&gt;\n &lt;p&gt;I have a {{ product }}&lt;/p&gt;\n &lt;p&gt;{{ product + 's' }}&lt;/p&gt;\n &lt;p&gt;{{ isWorking ? 'YES' : 'NO' }}&lt;/p&gt;\n &lt;p&gt;{{ product.getSalePrice() }}&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/api/#delimiters\">Delimiters</a></p>\n\n<h3 id=\"binding\">Binding</h3>\n\n<pre><code class=\"language-html\">&lt;a v-bind:href=\"url\"&gt;...&lt;/a&gt;\n</code></pre>\n\n<h4 id=\"shorthand-syntax\">Shorthand syntax</h4>\n<pre data-line=\"1\"><code class=\"language-html\">&lt;a :href=\"url\"&gt;...&lt;/a&gt;\n</code></pre>\n\n<h4 id=\"true-or-false-will-add-or-remove-attribute\">True or false will add or remove attribute</h4>\n<pre><code class=\"language-html\">&lt;button :disabled=\"isButtonDisabled\"&gt;...\n</code></pre>\n\n<h4 id=\"if-isactive-is-truthy-the-class-active-will-appear\">If isActive is truthy, the class ‘active’ will appear</h4>\n<pre><code class=\"language-html\">&lt;div :class=\"{ active: isActive }\"&gt;...\n</code></pre>\n\n<h4 id=\"style-color-set-to-value-of-activecolor\">Style color set to value of activeColor</h4>\n<pre><code class=\"language-html\">&lt;div :style=\"{ color: activeColor }\"&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/api/#v-bind\">v-bind</a></p>\n\n<h3 id=\"directives\">Directives</h3>\n\n<h4 id=\"element-insertedremoved-based-on-truthiness\">Element inserted/removed based on truthiness</h4>\n<pre><code class=\"language-html\">&lt;p v-if=\"inStock\"&gt;{{ product }}&lt;/p&gt;\n</code></pre>\n<pre><code class=\"language-html\">&lt;p v-else-if=\"onSale\"&gt;...&lt;/p&gt;\n&lt;p v-else&gt;...&lt;/p&gt;\n</code></pre>\n\n<h4 id=\"toggles-the-display-none-css-property\">Toggles the display: none CSS property</h4>\n<pre><code class=\"language-html\">&lt;p v-show=\"showProductDetails\"&gt;...&lt;/p&gt;\n</code></pre>\n\n<h4 id=\"two-way-data-binding\">Two-way data binding</h4>\n<pre><code class=\"language-html\">&lt;input v-model=\"firstName\" &gt;\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>v-model.lazy=\"...\"</code></td>\n <td>Syncs input after change event</td>\n </tr>\n <tr>\n <td><code>v-model.number=\"...\"</code></td>\n <td>Always returns a number</td>\n </tr>\n <tr>\n <td><code>v-model.trim=\"...\"</code></td>\n <td>Strips whitespace</td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"https://vuejs.org/v2/api/#Directives\">Directives</a></p>\n\n<h3 id=\"actionsevents\">Actions/Events</h3>\n\n<h4 id=\"calls-addtocart-method-on-component\">Calls addToCart method on component</h4>\n<pre><code class=\"language-html\">&lt;button v-on:click=\"addToCart\"&gt;...\n</code></pre>\n\n<h4 id=\"shorthand-syntax-1\">Shorthand syntax</h4>\n<pre data-line=\"1\"><code class=\"language-html\">&lt;button @click=\"addToCart\"&gt;...\n</code></pre>\n\n<h4 id=\"arguments-can-be-passed\">Arguments can be passed</h4>\n<pre><code class=\"language-html\">&lt;button @click=\"addToCart(product)\"&gt;...\n}\n</code></pre>\n\n<h4 id=\"to-prevent-default-behavior-eg-page-reload\">To prevent default behavior (e.g. page reload)</h4>\n<pre><code class=\"language-html\">&lt;form @submit.prevent=\"addProduct\"&gt;...\n</code></pre>\n\n<h4 id=\"only-trigger-once\">Only trigger once</h4>\n<pre><code class=\"language-html\">&lt;img @mouseover.once=\"showImage\"&gt;...\n</code></pre>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.stop</code></td>\n <td>Stop all event propagation</td>\n </tr>\n <tr>\n <td><code>.self </code></td>\n <td>Only trigger if event.target is element itself</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"keyboard-entry-example\">Keyboard entry example</h4>\n<pre><code class=\"language-html\">&lt;input @keyup.enter=\"submit\"&gt;\n</code></pre>\n\n<h4 id=\"call-oncopy-when-control-c-is-pressed\">Call onCopy when control-c is pressed</h4>\n<pre><code class=\"language-html\">&lt;input @keyup.ctrl.c=\"onCopy\"&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/events.html\">Events</a></p>\n\n<h3 id=\"list-rendering\">List rendering</h3>\n\n<h4 id=\"the-key-is-always-recommended\">The <code>:key</code> is always recommended</h4>\n<pre data-line=\"2\"><code class=\"language-html\">&lt;li v-for=\"item in items\"\n :key=\"item.id\"&gt;\n {{ item }}\n&lt;/li&gt;\n</code></pre>\n\n<h4 id=\"to-access-the-position-in-the-array\">To access the position in the array</h4>\n<pre><code class=\"language-html\">&lt;li v-for=\"(item, index) in items\"&gt;...\n</code></pre>\n\n<h4 id=\"to-iterate-through-objects\">To iterate through objects</h4>\n<pre><code class=\"language-html\">&lt;li v-for=\"(value, key) in object\"&gt;...\n</code></pre>\n\n<h4 id=\"using-v-for-with-a-component\">Using <code>v-for</code> with a component</h4>\n<pre><code class=\"language-html\">&lt;cart-product v-for=\"item in products\"\n :product=\"item\"\n :key=\"item.id\"&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/list.html\">List Rendering</a></p>\n\n<h2 id=\"component\">Component</h2>\n\n<h3 id=\"component-anatomy\">Component anatomy</h3>\n\n<pre data-line=\"3, 8, 16, 21, 28, 34, 39\"><code class=\"language-js\">Vue.component('my-component', {\n components: {\n // Components that can be used in the template\n ProductComponent,\n ReviewComponent\n },\n props: {\n // The parameters the component accepts\n message: String,\n product: Object,\n email: {\n type: String,\n required: true,\n default: \"none\"\n validator: function (value) {\n // Should return true if value is valid\n }\n }\n },\n data: function() {\n // `data` must be a function\n return {\n firstName: 'Vue',\n lastName: 'Mastery'\n }\n },\n computed: {\n // Return cached values until dependencies change\n fullName: function () {\n return this.firstName + ' ' + this.lastName\n }\n },\n watch: {\n // Called when firstName changes value\n firstName: function (value, oldValue) { ... }\n },\n methods: { ... },\n template: '&lt;span&gt;{{ message }}&lt;/span&gt;',\n // Can also use backticks in `template` for multi-line\n})\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/components.html\">Components Basics</a></p>\n\n<h3 id=\"lifecycle-hooks\">Lifecycle hooks</h3>\n\n<table>\n <thead>\n <tr>\n <th>Method</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>beforeCreate</code></td>\n <td>After the instance has been initialized <a href=\"https://vuejs.org/v2/api/#beforeCreate\">#</a></td>\n </tr>\n <tr>\n <td><code>created</code></td>\n <td>After the instance is created <a href=\"https://vuejs.org/v2/api/#created\">#</a></td>\n </tr>\n <tr>\n <td><code>beforeMount</code></td>\n <td>Before the first render <a href=\"https://vuejs.org/v2/api/#beforeMount\">#</a></td>\n </tr>\n <tr>\n <td><code>mounted</code></td>\n <td>After the instance has been mounted <a href=\"https://vuejs.org/v2/api/#mounted\">#</a></td>\n </tr>\n <tr>\n <td><code>beforeUpdate</code></td>\n <td>When data changes, before the DOM is patched <a href=\"https://vuejs.org/v2/api/#beforeUpdate\">#</a></td>\n </tr>\n <tr>\n <td><code>updated</code></td>\n <td>After a data change <a href=\"https://vuejs.org/v2/api/#updated\">#</a></td>\n </tr>\n <tr>\n <td><code>beforeDestroy</code></td>\n <td>Before the instance is destroyed <a href=\"https://vuejs.org/v2/api/#beforeDestroy\">#</a></td>\n </tr>\n <tr>\n <td><code>destroyed</code></td>\n <td>After a Vue instance has been destroyed <a href=\"https://vuejs.org/v2/api/#destroyed\">#</a></td>\n </tr>\n </tbody>\n</table>\n\n<p>See: <a href=\"https://vuejs.org/v2/api/#Options-Lifecycle-Hooks\">Lifecycle Hooks</a></p>\n\n<h3 id=\"custom-events\">Custom events</h3>\n\n<h4 id=\"set-listener-on-component-within-its-parent\">Set listener on component, within its parent</h4>\n<pre><code class=\"language-html\">&lt;button-counter v-on:incrementBy=\"incWithVal\"&gt;\n</code></pre>\n\n<h4 id=\"inside-parent-component\">Inside parent component</h4>\n<pre><code class=\"language-js\">methods: {\n incWithVal: function (toAdd) { ... }\n}\n</code></pre>\n\n<h4 id=\"inside-button-counter-template\">Inside button-counter template</h4>\n<pre><code class=\"language-js\">this.$emit(\n 'incrementBy', // Custom event name\n 5 // Data sent up to parent\n )\n</code></pre>\n\n<p>Use props to pass data into child components,\ncustom events to pass data to parent elements.</p>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/components-custom-events.html\">Custom Events</a></p>\n\n<h2 id=\"single-file-components\">Single file components</h2>\n\n<h3 id=\"single-file\">Single file</h3>\n<pre><code class=\"language-html\">&lt;template&gt;\n &lt;p&gt;{{ greeting }} World!&lt;/p&gt;\n&lt;/template&gt;\n\n&lt;script&gt;\nmodule.exports = {\n data: function () {\n return {\n greeting: 'Hello'\n }\n }\n}\n&lt;/script&gt;\n\n&lt;style scoped&gt;\np {\n font-size: 2em;\n text-align: center;\n}\n&lt;/style&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/single-file-components.html\">Single File Components</a></p>\n\n<h3 id=\"separation\">Separation</h3>\n<pre><code class=\"language-html\">&lt;template&gt;\n &lt;div&gt;This will be pre-compiled&lt;/div&gt;\n&lt;/template&gt;\n&lt;script src=\"./my-component.js\"&gt;&lt;/script&gt;\n&lt;style src=\"./my-component.css\"&gt;&lt;/style&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns\">What About Separation of Concerns?</a></p>\n\n<h2 id=\"slots\">Slots</h2>\n\n<h3 id=\"using-a-single-slot\">Using a single slot</h3>\n\n<h4 id=\"component-template\">Component template</h4>\n<pre data-line=\"3,4,5\"><code class=\"language-html\">&lt;div&gt;\n &lt;h2&gt;I'm a title&lt;/h2&gt;\n &lt;slot&gt;\n Only displayed if no slot content\n &lt;/slot&gt;\n&lt;/div&gt;\n</code></pre>\n\n<h4 id=\"use-of-component-with-data-for-slot\">Use of component with data for slot</h4>\n<pre data-line=\"2\"><code class=\"language-html\">&lt;my-component&gt;\n &lt;p&gt;This will go in the slot&lt;/p&gt;\n&lt;/my-component&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/components-slots.html\">Slots</a></p>\n\n<h3 id=\"multiple-slots\">Multiple slots</h3>\n\n<h4 id=\"component-template-1\">Component template</h4>\n<pre data-line=\"3,6,9\"><code class=\"language-html\">&lt;div class=\"container\"&gt;\n &lt;header&gt;\n &lt;slot name=\"header\"&gt;&lt;/slot&gt;\n &lt;/header&gt;\n &lt;main&gt;\n &lt;slot&gt;Default content&lt;/slot&gt;\n &lt;/main&gt;\n &lt;footer&gt;\n &lt;slot name=\"footer\"&gt;&lt;/slot&gt;\n &lt;/footer&gt;\n&lt;/div&gt;\n</code></pre>\n\n<h4 id=\"use-of-component-with-data-for-slots\">Use of component with data for slots</h4>\n<pre data-line=\"2,3,4\"><code class=\"language-html\">&lt;app-layout&gt;\n &lt;h1 slot=\"header\"&gt;Page title&lt;/h1&gt;\n &lt;p&gt;the main content.&lt;/p&gt;\n &lt;p slot=\"footer\"&gt;Contact info&lt;/p&gt;\n&lt;/app-layout&gt;\n</code></pre>\n\n<p>See: <a href=\"https://vuejs.org/v2/guide/components-slots.html\">Slots</a></p>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://cli.vuejs.org/\">Vue CLI</a> <em>(cli.vuejs.org)</em></li>\n <li><a href=\"https://router.vuejs.org/\">Vue Router</a> <em>(router.vuejs.org)</em></li>\n <li><a href=\"https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en\">Vue DevTools</a> <em>(chrome.google.com)</em></li>\n <li><a href=\"https://nuxtjs.org/\">Nuxt.js</a> <em>(nuxtjs.org)</em></li>\n <li><a href=\"vue@1.0.28/\">Vue.js v1.0.28 cheatsheet</a> <em>Legacy version</em></li>\n</ul>\n\n<p>{%endraw%}</p>",
"intro_html": "<p><a href=\"https://vuejs.org/\">Vue.js</a> is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.</p>",
"description_html": "",
"tags": null,
"updated": "2019-12-26"
},{
"id": "vue@1.0.28",
"title": "Vue.js v1.0.28",
"url": "/vue@1.0.28",
"category": "JavaScript",
"keywords": null,
"content_html": "<p>{% raw %}</p>\n\n<h3 id=\"lists\">Lists</h3>\n\n<pre><code class=\"language-html\">&lt;li v-for=\"todo in todos\"&gt;\n {{ todo.text }}\n {{ $index }}\n&lt;/li&gt;\n</code></pre>\n\n<h3 id=\"events\">Events</h3>\n\n<pre><code class=\"language-html\">&lt;button v-on:click='submit'&gt;Go&lt;/button&gt;\n</code></pre>\n\n<h3 id=\"components\">Components</h3>\n\n<pre><code class=\"language-js\">new Vue({\n components: { app: App }\n})\n</code></pre>\n\n<h2 id=\"api\">API</h2>\n\n<pre><code class=\"language-js\">Vue.extend({ ... }) // creating components\nVue.nextTick(() =&gt; {...})\n\nVue.set(object, key, val) // reactive\nVue.delete(object, key)\n\nVue.directive('my-dir', { bind, update, unbind })\n// &lt;div v-my-dir='...'&gt;&lt;/div&gt;\n\nVue.elementDirective('my-dir', { bind, update, unbind })\n// &lt;my-dir&gt;...&lt;/my-dir&gt;\n\nVue.component('my-component', Vue.extend({ .. }))\n\nVue.partial('my-partial', '&lt;div&gt;hi {{msg}}&lt;/div&gt;')\n// &lt;partial name='my-partial'&gt;&lt;/partial&gt;\n</code></pre>\n\n<pre><code class=\"language-js\">new Vue({\n data: { ... }\n props: ['size'],\n props: { size: Number },\n computed: { fullname() { return this.name + ' ' + this.lastName } },\n methods: { go() { ... } },\n watch: { a (val, oldVal) { ... } },\n el: '#foo',\n template: '...',\n replace: true, // replace element (default true)\n\n // lifecycle\n created () {},\n beforeCompile () {},\n compiled () {},\n ready () {}, // $el is inserted for the first time\n attached () {},\n detached () {},\n beforeDestroy () {},\n destroyed () {},\n\n // options\n directives: {},\n elementDirectives: {},\n filters: {},\n components: {},\n transitions: {},\n partials: {}\n})\n</code></pre>\n\n<h2 id=\"vue-templates\">Vue templates</h2>\n<p>Via <a href=\"https://www.npmjs.com/package/vueify\">vueify</a></p>\n\n<pre><code class=\"language-js\">// app.vue\n&lt;template&gt;\n &lt;h1 class=\"red\"&gt;{{msg}}&lt;/h1&gt;\n&lt;/template&gt;\n \n&lt;script&gt;\n module.exports = {\n data () {\n return {\n msg: 'Hello world!'\n }\n }\n }\n&lt;/script&gt; \n</code></pre>\n\n<p>Also</p>\n\n<pre><code class=\"language-html\">&lt;template lang='jade'&gt;\nh1(class='red') {{msg}}\n&lt;/template&gt;\n</code></pre>\n\n<p>{% endraw %}</p>",
"intro_html": "<p><strong>Deprecated:</strong> this guide targets an old version of Vuej.js (v1.0.28). See the <a href=\"vue\">updated Vue.js cheatsheet</a> for new versions.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "watchexec",
"title": "Watchexec",
"url": "/watchexec",
"category": "CLI",
"keywords": ["watchexec --excts js,jsx -- npm test","watchexec --help"],
"content_html": "<h3 id=\"installation\">Installation</h3>\n\n<h4 id=\"osx\">OSX</h4>\n\n<pre><code class=\"language-bash\">brew install watchexec\n</code></pre>\n\n<h4 id=\"rust\">Rust</h4>\n\n<pre><code class=\"language-bash\">cargo install watchexec\n</code></pre>\n\n<p>For Linux and Windows, get it from <a href=\"https://github.com/mattgreen/watchexec\">GitHub releases</a>.</p>\n\n<h3 id=\"getting-started\">Getting started</h3>\n\n<pre><code class=\"language-bash\">watchexec --exts js,jsx -- npm test\n</code></pre>\n\n<p>Runs <code>npm test</code> when <code>js,jsx</code> files change.</p>\n\n<pre><code class=\"language-bash\">watchman -w lib -w test -- npm test\n</code></pre>\n\n<p>Runs <code>npm test</code> when <code>lib/</code> and <code>test/</code> files change.</p>\n\n<h3 id=\"other-options\">Other options</h3>\n\n<h4 id=\"flags\">Flags</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>-c</code> <code>--clear</code></td>\n <td>Clear screen</td>\n </tr>\n <tr>\n <td><code>-r</code> <code>--restart</code></td>\n <td>Restart process if its still running</td>\n </tr>\n </tbody>\n</table>\n\n<h4 id=\"options\">Options</h4>\n\n<table>\n <tbody>\n <tr>\n <td><code>-s</code> <code>--signal SIGKILL</code></td>\n <td>Kill signal to use</td>\n </tr>\n <tr>\n <td><code>-d</code> <code>--debounce MS</code></td>\n <td>Debounce by <code>MS</code> milliseconds</td>\n </tr>\n <tr>\n <td><code>-e</code> <code>--exts EXTS</code></td>\n <td>Extensions</td>\n </tr>\n <tr>\n <td><code>-i</code> <code>--ignore PATTERN</code></td>\n <td>Ignore these files</td>\n </tr>\n <tr>\n <td><code>-w</code> <code>--watch PATH</code></td>\n <td>Watch these directories</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://github.com/mattgreen/watchexec\">mattgreen/watchexec</a> <em>(github.com)</em></li>\n</ul>",
"intro_html": "<p><a href=\"https://github.com/mattgreen/watchexec\">mattgreen/watchexec</a> runs commands whenever certain files change.</p>",
"description_html": "",
"tags": null,
"updated": "2017-10-18"
},{
"id": "watchman",
"title": "Watchman",
"url": "/watchman",
"category": "Others",
"keywords": ["watchman watch ~/src","watchman watch-list","watchman -- trigger ~/rsc remake '*.js' -- make "],
"content_html": "<h3 id=\"getting-started\">Getting started</h3>\n\n<pre><code class=\"language-bash\">watchman watch ./src\n</code></pre>\n\n<p>Adds <code>./src</code> to the watch list.</p>\n\n<pre><code class=\"language-bash\">watchman -- trigger ./src retest '*.js' -- npm test\n</code></pre>\n\n<p>Adds a trigger called <code>retest</code> to run <code>npm test</code> every time <code>*.js</code> changes in <code>./src</code>.</p>\n\n<h3 id=\"watching\">Watching</h3>\n\n<pre><code>watchman watch ~/src\nwatchman watch-list\nwatchman watch-del ~/src\n</code></pre>\n\n<h2 id=\"also-see\">Also see</h2>\n\n<ul>\n <li><a href=\"https://facebook.github.io/watchman/docs/install.html\">Documentation</a> <em>(facebook.github.io)</em></li>\n</ul>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-18"
},{
"id": "web-workers",
"title": "Web workers",
"url": "/web-workers",
"category": "JavaScript",
"keywords": null,
"content_html": "<h2 id=\"web-workers\">Web workers</h2>\n\n<h4 id=\"client\">Client</h4>\n\n<pre><code class=\"language-js\">var worker = new Worker('worker.js')\n\nworker.onmessage = function (message) {\n alert(JSON.stringify(message.data))\n})\n\nworker.postMessage('hello!')\n</code></pre>\n\n<p>Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm\">structured clone</a></p>\n\n<h4 id=\"worker\">Worker</h4>\n\n<pre><code class=\"language-js\">self.onmessage = function (message) {\n ···\n}\n\nself.postMessage({ msg: 'hello' })\n</code></pre>\n\n<h3 id=\"message-data\">Message data</h3>\n\n<h4 id=\"messageevent\">[MessageEvent]</h4>\n\n<pre><code class=\"language-js\">bubbles: false\ncancelBubble: false\ncancelable: false\nclipboardData: undefined\ncurrentTarget: Worker\ndata: \"Hello\" ← the data\ndefaultPrevented: false\neventPhase: 0\nlastEventId: \"\"\norigin: \"\"\nports: Array[0]\nreturnValue: true\nsource: null\nsrcElement: Worker\ntarget: Worker\ntimeStamp: 1344821022383\ntype: \"message\"\n</code></pre>\n\n<p>These are the contents of <code>message</code> on onmessage.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": "2017-10-30"
},{
"id": "webpack",
"title": "Webpack",
"url": "/webpack",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"basic-config\">Basic config</h3>\n\n<h4 id=\"webpackconfigjs\">webpack.config.js</h4>\n\n<pre><code class=\"language-js\">module.exports = {\n context: __dirname,\n entry: 'src/app.js',\n output: {\n path: __dirname + '/public',\n filename: 'app.js'\n }\n}\n</code></pre>\n\n<h4 id=\"terminal\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install --save-dev webpack\n</code></pre>\n\n<table>\n <tbody>\n <tr>\n <td><code>webpack</code></td>\n <td>build</td>\n </tr>\n <tr>\n <td><code>webpack -- -p</code></td>\n <td>build production</td>\n </tr>\n <tr>\n <td><code>webpack -- --watch</code></td>\n <td>compile continuously</td>\n </tr>\n </tbody>\n</table>\n\n<p>This compiles <code>src/app.js</code> into <code>public/app.js</code>. (Note: you may need to use <code>./node_modules/.bin/webpack</code> as a command if you’re not invoking Webpack via npm scripts.)</p>\n\n<h3 id=\"multiple-files\">Multiple files</h3>\n\n<h4 id=\"webpackconfigjs-1\">webpack.config.js</h4>\n\n<pre data-line=\"2,3,4,8\"><code class=\"language-js\">module.exports = {\n entry: {\n app: 'src/app.js',\n vendor: 'src/vendor.js'\n },\n output: {\n path: __dirname + '/public',\n filename: '[name].js'\n }\n}\n</code></pre>\n\n<p>This creates <code>app.js</code> and <code>vendor.js</code>.</p>\n\n<h2 id=\"loaders\">Loaders</h2>\n\n<h3 id=\"babel\">Babel</h3>\n\n<h4 id=\"terminal-1\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install --save-dev \\\n babel-loader \\\n babel-preset-env \\\n babel-preset-react\n</code></pre>\n\n<h4 id=\"webpackconfigjs-2\">webpack.config.js</h4>\n\n<pre data-line=\"3,4,5,6,7,8\"><code class=\"language-js\">module.exports = {\n ···\n module: {\n rules: [\n { test: /\\.js$/,\n exclude: /node_modules/,\n use: [\n { loader: 'babel-loader' }\n ]\n }\n ]\n }\n}\n</code></pre>\n\n<h4 id=\"babelrc\">.babelrc</h4>\n\n<pre><code class=\"language-js\">{\n \"presets\": [ \"env\", \"react\" ]\n}\n</code></pre>\n\n<p>Adds support for <a href=\"http://babeljs.io\">Babel</a>.</p>\n\n<h3 id=\"css\">CSS</h3>\n\n<h4 id=\"terminal-2\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install --save-dev \\\n css-loader \\\n style-loader\n</code></pre>\n\n<h4 id=\"webpackconfigjs-3\">webpack.config.js</h4>\n\n<pre data-line=\"3,4,5,6,7,8,9\"><code class=\"language-js\">module.exports = {\n ···\n module: {\n rules: [\n { test: /\\.css$/,\n exclude: /node_modules/,\n use: [\n { loader: 'style-loader' },\n { loader: 'css-loader' }\n ]\n }\n ]\n }\n}\n</code></pre>\n\n<h4 id=\"your-javascript\">Your JavaScript</h4>\n\n<pre><code class=\"language-js\">import './styles.css'\n// or:\nrequire('./styles.css')\n</code></pre>\n\n<p>This allows you to use CSS inside your JavaScript. This packages your CSS inside your JavaScript bundle.</p>\n\n<h3 id=\"postcss\">PostCSS</h3>\n\n<h4 id=\"terminal-3\">Terminal</h4>\n\n<pre><code>npm install --save-dev \\\n postcss-loader \\\n postcss-cssnext\n</code></pre>\n\n<h4 id=\"webpackconfigjs-4\">webpack.config.js</h4>\n\n<pre data-line=\"8\"><code class=\"language-js\">···\n// Inside module.rules[]:\n{ test: /\\.css$/,\n exclude: /node_modules/,\n use: [\n { loader: 'style-loader' },\n { loader: 'css-loader' },\n { loader: 'postcss-loader' }\n···\n</code></pre>\n\n<h4 id=\"postcssconfigjs\">postcss.config.js</h4>\n\n<pre data-line=\"3\"><code class=\"language-js\">module.exports = {\n plugins: [\n require('postcss-cssnext')()\n ]\n}\n</code></pre>\n\n<p>This example adds <a href=\"https://www.npmjs.com/package/postcss-cssnext\">postcss-cssnext</a> support to your CSS files.</p>\n\n<h2 id=\"other-features\">Other features</h2>\n\n<h3 id=\"dev-server\">Dev server</h3>\n\n<h4 id=\"packagejson\">package.json</h4>\n\n<pre data-line=\"3\"><code class=\"language-json\">{ ···\n \"scripts\": {\n \"dev\": \"webpack-dev-server\"\n }\n}\n</code></pre>\n\n<h4 id=\"terminal-4\">Terminal</h4>\n\n<pre><code class=\"language-bash\">npm install --save-dev \\\n webpack-dev-server\n</code></pre>\n\n<pre><code class=\"language-bash\">npm run dev\n</code></pre>\n\n<p>This starts an HTTP server for development (port 8080 by default).</p>",
"intro_html": "<p>This is a very basic “getting started with Webpack” guide for use with <a href=\"https://webpack.js.org\">Webpack</a> v3. This doesn’t cover all features, but it should get you started in understanding the config file format.</p>",
"description_html": "",
"tags": null,
"updated": "2017-09-26"
},{
"id": "weechat",
"title": "Weechat",
"url": "/weechat",
"category": "Apps",
"keywords": null,
"content_html": "<h2 class=\"-three-column\" id=\"keys\">Keys</h2>\n\n<h3 id=\"buffers\">Buffers</h3>\n\n<table class=\"-shortcuts\">\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>^s</code> / <code>^u</code></td>\n <td>Set unread marker on all windows</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>^p, A-left</code></td>\n <td>Switch buffer left</td>\n </tr>\n <tr>\n <td><code>^n, A-right</code></td>\n <td>Switch buffer right</td>\n </tr>\n <tr>\n <td><code>A-a</code></td>\n <td>Next buffer with activity</td>\n </tr>\n <tr>\n <td><code>A-0...9</code></td>\n <td>Switch buffers</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>F9</code> /<code> F10</code></td>\n <td>Scroll buffer title</td>\n </tr>\n <tr>\n <td><code>F11</code> / <code>F12</code></td>\n <td>Scroll nick list</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>A-w A-Left</code></td>\n <td>Switch windows</td>\n </tr>\n <tr>\n <td><code>A-w A-b</code></td>\n <td>Balance windows</td>\n </tr>\n </tbody>\n</table>\n\n<p>(<code>A-</code> is alt.)</p>\n\n<h3 id=\"window-commands\">Window commands</h3>\n\n<table>\n <thead>\n <tr>\n <th>Shortcut</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>/window splith</code></td>\n <td>Split horizontal</td>\n </tr>\n <tr>\n <td><code>/window splitv</code></td>\n <td>Split vertical</td>\n </tr>\n <tr>\n <td><code>/window zoom</code></td>\n <td>Zoom</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"search\">Search</h3>\n\n<table class=\"-shortcuts\">\n <tbody>\n <tr>\n <td><code>^r</code></td>\n <td>Search</td>\n </tr>\n <tr>\n <td><code>Enter</code> <code>^j</code> <code>^m</code></td>\n <td>Stop search</td>\n </tr>\n </tbody>\n</table>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "weinre",
"title": "Weinre",
"url": "/weinre",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<ul>\n <li><a href=\"http://people.apache.org/~pmuellr/weinre/\">Weinre</a></li>\n</ul>\n\n<p>Install:</p>\n\n<pre><code>$ npm install -g weinre\n</code></pre>\n\n<p>Start the server:</p>\n\n<pre><code>$ weinre --boundHost 0.0.0.0\n$ open http://localhost:8080\n\n&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src='http://'+location.hostname+':8080/target/target-script-min.js#anonymous';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weinre');&lt;/script&gt;\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "xpath",
"title": "Xpath",
"url": "/xpath",
"category": "HTML",
"keywords": null,
"content_html": "<h2 id=\"testing\">Testing</h2>\n\n<h3 id=\"xpath-test-bed\">Xpath test bed</h3>\n\n<p>Test queries in the Xpath test bed:<br />\n<a href=\"http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm\">Xpath test bed</a> <em>(whitebeam.org)</em></p>\n\n<h3 id=\"browser-console\">Browser console</h3>\n\n<pre><code class=\"language-js\">$x(\"//div\")\n</code></pre>\n\n<p>Works in Firefox and Chrome.</p>\n\n<h2 id=\"selectors\">Selectors</h2>\n\n<h3 id=\"descendant-selectors\">Descendant selectors</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>h1</code></td>\n <td><code>//h1</code></td>\n <td><a href=\"#prefixes\">?</a></td>\n </tr>\n <tr>\n <td><code>div p</code></td>\n <td><code>//div//p</code></td>\n <td><a href=\"#axes\">?</a></td>\n </tr>\n <tr>\n <td><code>ul &gt; li</code></td>\n <td><code>//ul/li</code></td>\n <td><a href=\"#axes\">?</a></td>\n </tr>\n <tr>\n <td><code>ul &gt; li &gt; a</code></td>\n <td><code>//ul/li/a</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>div &gt; *</code></td>\n <td><code>//div/*</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>:root</code></td>\n <td><code>/</code></td>\n <td><a href=\"#prefixes\">?</a></td>\n </tr>\n <tr>\n <td><code>:root &gt; body</code></td>\n <td><code>/body</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"attribute-selectors\">Attribute selectors</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>#id</code></td>\n <td><code>//*[@id=\"id\"]</code></td>\n <td><a href=\"#predicates\">?</a></td>\n </tr>\n <tr>\n <td><code>.class</code></td>\n <td><code>//*[@class=\"class\"]</code> <em>…<a href=\"#class-check\">kinda</a></em></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>input[type=\"submit\"]</code></td>\n <td><code>//input[@type=\"submit\"]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>a#abc[for=\"xyz\"]</code></td>\n <td><code>//a[@id=\"abc\"][@for=\"xyz\"]</code></td>\n <td><a href=\"#chaining-order\">?</a></td>\n </tr>\n <tr>\n <td><code>a[rel]</code></td>\n <td><code>//a[@rel]</code></td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>a[href^='/']</code></td>\n <td><code>//a[starts-with(@href, '/')]</code></td>\n <td><a href=\"#string-functions\">?</a></td>\n </tr>\n <tr>\n <td><code>a[href$='pdf']</code></td>\n <td><code>//a[ends-with(@href, '.pdf')]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>a[href*='://']</code></td>\n <td><code>//a[contains(@href, '://')]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>a[rel~='help']</code></td>\n <td><code>//a[contains(@rel, 'help')]</code> <em>…<a href=\"#class-check\">kinda</a></em></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"order-selectors\">Order selectors</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>ul &gt; li:first-child</code></td>\n <td><code>//ul/li[1]</code></td>\n <td><a href=\"#indexing\">?</a></td>\n </tr>\n <tr>\n <td><code>ul &gt; li:nth-child(2)</code></td>\n <td><code>//ul/li[2]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ul &gt; li:last-child</code></td>\n <td><code>//ul/li[last()]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>li#id:first-child</code></td>\n <td><code>//li[@id=\"id\"][1]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>a:first-child</code></td>\n <td><code>//a[1]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>a:last-child</code></td>\n <td><code>//a[last()]</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"siblings\">Siblings</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>h1 ~ ul</code></td>\n <td><code>//h1/following-sibling::ul</code></td>\n <td><a href=\"#using-axes\">?</a></td>\n </tr>\n <tr>\n <td><code>h1 + ul</code></td>\n <td><code>//h1/following-sibling::ul[1]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>h1 ~ #id</code></td>\n <td><code>//h1/following-sibling::[@id=\"id\"]</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"jquery\">jQuery</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>$('ul &gt; li').parent()</code></td>\n <td><code>//ul/li/..</code></td>\n <td><a href=\"#other-axes\">?</a></td>\n </tr>\n <tr>\n <td><code>$('li').closest('section')</code></td>\n <td><code>//li/ancestor-or-self::section</code></td>\n <td> </td>\n </tr>\n <tr>\n <td><code>$('a').attr('href')</code></td>\n <td><code>//a/@href</code></td>\n <td><a href=\"#steps\">?</a></td>\n </tr>\n <tr>\n <td><code>$('span').text()</code></td>\n <td><code>//span/text()</code></td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"other-things\">Other things</h3>\n\n<table class=\"xp\">\n <thead>\n <tr>\n <th>CSS</th>\n <th>Xpath</th>\n <th>?</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>h1:not([id])</code></td>\n <td><code>//h1[not(@id)]</code></td>\n <td><a href=\"#boolean-functions\">?</a></td>\n </tr>\n <tr>\n <td>Text match</td>\n <td><code>//button[text()=\"Submit\"]</code></td>\n <td><a href=\"#operators\">?</a></td>\n </tr>\n <tr>\n <td>Text match (substring)</td>\n <td><code>//button[contains(text(),\"Go\")]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td>Arithmetic</td>\n <td><code>//product[@price &gt; 2.50]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td>Has children</td>\n <td><code>//ul[*]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td>Has children (specific)</td>\n <td><code>//ul[li]</code></td>\n <td> </td>\n </tr>\n <tr>\n <td>Or logic</td>\n <td><code>//a[@name or @href]</code></td>\n <td><a href=\"#operators\">?</a></td>\n </tr>\n <tr>\n <td>Union (joins results)</td>\n <td><code>//a | //div</code></td>\n <td><a href=\"#unions\">?</a></td>\n </tr>\n </tbody>\n</table>\n\n<style>\n/* ensure tables align */\ntable.xp {table-layout: fixed;}\ntable.xp tr>:nth-child(1) {width: 35%;}\ntable.xp tr>:nth-child(2) {width: auto;}\ntable.xp tr>:nth-child(3) {width: 10%; text-align:right;}\n</style>\n\n<h3 id=\"class-check\">Class check</h3>\n\n<pre><code class=\"language-bash\">//div[contains(concat(' ',normalize-space(@class),' '),' foobar ')]\n</code></pre>\n\n<p>Xpath doesn’t have the “check if part of space-separated list” operator, so this is the workaround (<a href=\"http://pivotallabs.com/xpath-css-class-matching/\">source</a>).</p>\n\n<h2 id=\"expressions\">Expressions</h2>\n\n<h3 id=\"steps-and-axes\">Steps and axes</h3>\n\n<table class=\"-css-breakdown\">\n <tbody>\n <tr>\n <td><code>//</code></td>\n <td><code>ul</code></td>\n <td><code>/</code></td>\n <td><code>a[@id='link']</code></td>\n </tr>\n <tr>\n <td>Axis</td>\n <td>Step</td>\n <td>Axis</td>\n <td>Step</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"prefixes\">Prefixes</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Prefix</th>\n <th>Example</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>//</code></td>\n <td><code>//hr[@class='edge']</code></td>\n <td>Anywhere</td>\n </tr>\n <tr>\n <td><code>./</code></td>\n <td><code>./a</code></td>\n <td>Relative</td>\n </tr>\n <tr>\n <td><code>/</code></td>\n <td><code>/html/body/div</code></td>\n <td>Root</td>\n </tr>\n </tbody>\n</table>\n\n<p>Begin your expression with any of these.</p>\n\n<h3 id=\"axes\">Axes</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Axis</th>\n <th>Example</th>\n <th>What</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>/</code></td>\n <td><code>//ul/li/a</code></td>\n <td>Child</td>\n </tr>\n <tr>\n <td><code>//</code></td>\n <td><code>//[@id=\"list\"]//a</code></td>\n <td>Descendant</td>\n </tr>\n </tbody>\n</table>\n\n<p>Separate your steps with <code>/</code>. Use two (<code>//</code>) if you don’t want to select direct children.</p>\n\n<h3 id=\"steps\">Steps</h3>\n\n<pre><code class=\"language-bash\">//div\n//div[@name='box']\n//[@id='link']\n</code></pre>\n\n<p>A step may have an element name (<code>div</code>) and <a href=\"#predicate\">predicates</a> (<code>[...]</code>). Both are optional.\nThey can also be these other things:</p>\n\n<pre><code class=\"language-bash\">//a/text() #=&gt; \"Go home\"\n//a/@href #=&gt; \"index.html\"\n//a/* #=&gt; All a's child elements\n</code></pre>\n\n<h2 id=\"predicates\">Predicates</h2>\n\n<h3 id=\"predicates-1\">Predicates</h3>\n\n<pre><code class=\"language-bash\">//div[true()]\n//div[@class=\"head\"]\n//div[@class=\"head\"][@id=\"top\"]\n</code></pre>\n\n<p>Restricts a nodeset only if some condition is true. They can be chained.</p>\n\n<h3 id=\"operators\">Operators</h3>\n\n<pre><code class=\"language-bash\"># Comparison\n//a[@id = \"xyz\"]\n//a[@id != \"xyz\"]\n//a[@price &gt; 25]\n</code></pre>\n\n<pre><code class=\"language-bash\"># Logic (and/or)\n//div[@id=\"head\" and position()=2]\n//div[(x and y) or not(z)]\n</code></pre>\n\n<p>Use comparison and logic operators to make conditionals.</p>\n\n<h3 id=\"using-nodes\">Using nodes</h3>\n\n<pre><code class=\"language-bash\"># Use them inside functions\n//ul[count(li) &gt; 2]\n//ul[count(li[@class='hide']) &gt; 0]\n</code></pre>\n\n<pre><code class=\"language-bash\"># This returns `&lt;ul&gt;` that has a `&lt;li&gt;` child\n//ul[li]\n</code></pre>\n\n<p>You can use nodes inside predicates.</p>\n\n<h3 id=\"indexing\">Indexing</h3>\n\n<pre><code class=\"language-bash\">//a[1] # first &lt;a&gt;\n//a[last()] # last &lt;a&gt;\n//ol/li[2] # second &lt;li&gt;\n//ol/li[position()=2] # same as above\n//ol/li[position()&gt;1] # :not(:first-child)\n</code></pre>\n\n<p>Use <code>[]</code> with a number, or <code>last()</code> or <code>position()</code>.</p>\n\n<h3 id=\"chaining-order\">Chaining order</h3>\n\n<pre><code class=\"language-bash\">a[1][@href='/']\na[@href='/'][1]\n</code></pre>\n\n<p>Order is significant, these two are different.</p>\n\n<h3 id=\"nesting-predicates\">Nesting predicates</h3>\n\n<pre><code>//section[//h1[@id='hi']]\n</code></pre>\n\n<p>This returns <code>&lt;section&gt;</code> if it has an <code>&lt;h1&gt;</code> descendant with <code>id='hi'</code>.</p>\n\n<h2 id=\"functions\">Functions</h2>\n\n<h3 id=\"node-functions\">Node functions</h3>\n\n<pre><code class=\"language-bash\">name() # //[starts-with(name(), 'h')]\ntext() # //button[text()=\"Submit\"]\n # //button/text()\nlang(str)\nnamespace-uri()\n</code></pre>\n\n<pre><code class=\"language-bash\">count() # //table[count(tr)=1]\nposition() # //ol/li[position()=2]\n</code></pre>\n\n<h3 id=\"boolean-functions\">Boolean functions</h3>\n\n<pre><code class=\"language-bash\">not(expr) # button[not(starts-with(text(),\"Submit\"))]\n</code></pre>\n\n<h3 id=\"string-functions\">String functions</h3>\n\n<pre><code class=\"language-bash\">contains() # font[contains(@class,\"head\")]\nstarts-with() # font[starts-with(@class,\"head\")]\nends-with() # font[ends-with(@class,\"head\")]\n</code></pre>\n\n<pre><code class=\"language-bash\">concat(x,y)\nsubstring(str, start, len)\nsubstring-before(\"01/02\", \"/\") #=&gt; 01\nsubstring-after(\"01/02\", \"/\") #=&gt; 02\ntranslate()\nnormalize-space()\nstring-length()\n</code></pre>\n\n<h3 id=\"type-conversion\">Type conversion</h3>\n\n<pre><code class=\"language-bash\">string()\nnumber()\nboolean()\n</code></pre>\n\n<h2 id=\"axes-1\">Axes</h2>\n\n<h3 id=\"using-axes\">Using axes</h3>\n\n<pre><code class=\"language-bash\">//ul/li # ul &gt; li\n//ul/child::li # ul &gt; li (same)\n//ul/following-sibling::li # ul ~ li\n//ul/descendant-or-self::li # ul li\n//ul/ancestor-or-self::li # $('ul').closest('li')\n</code></pre>\n\n<p>Steps of an expression are separated by <code>/</code>, usually used to pick child nodes. That’s not always true: you can specify a different “axis” with <code>::</code>.</p>\n\n<table class=\"-css-breakdown\">\n <tbody>\n <tr>\n <td><code>//</code></td>\n <td><code>ul</code></td>\n <td><code>/child::</code></td>\n <td><code>li</code></td>\n </tr>\n <tr>\n <td>Axis</td>\n <td>Step</td>\n <td>Axis</td>\n <td>Step</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"child-axis\">Child axis</h3>\n\n<pre><code class=\"language-bash\"># both the same\n//ul/li/a\n//child::ul/child::li/child::a\n</code></pre>\n\n<p><code>child::</code> is the default axis. This makes <code>//a/b/c</code> work.</p>\n\n<pre><code class=\"language-bash\"># both the same\n# this works because `child::li` is truthy, so the predicate succeeds\n//ul[li]\n//ul[child::li]\n</code></pre>\n\n<pre><code class=\"language-bash\"># both the same\n//ul[count(li) &gt; 2]\n//ul[count(child::li) &gt; 2]\n</code></pre>\n\n<h3 id=\"descendant-or-self-axis\">Descendant-or-self axis</h3>\n\n<pre><code class=\"language-bash\"># both the same\n//div//h4\n//div/descendant-or-self::h4\n</code></pre>\n\n<p><code>//</code> is short for the <code>descendant-or-self::</code> axis.</p>\n\n<pre><code class=\"language-bash\"># both the same\n//ul//[last()]\n//ul/descendant-or-self::[last()]\n</code></pre>\n\n<h3 id=\"other-axes\">Other axes</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Axis</th>\n <th>Abbrev</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>ancestor</code></td>\n <td> </td>\n <td> </td>\n </tr>\n <tr>\n <td><code>ancestor-or-self</code></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>attribute</code></td>\n <td><code>@</code></td>\n <td><code>@href</code> is short for <code>attribute::href</code></td>\n </tr>\n <tr>\n <td><code>child</code></td>\n <td> </td>\n <td><code>div</code> is short for <code>child::div</code></td>\n </tr>\n <tr>\n <td><code>descendant</code></td>\n <td> </td>\n <td> </td>\n </tr>\n <tr>\n <td><code>descendant-or-self</code></td>\n <td><code>//</code></td>\n <td><code>//</code> is short for <code>/descendant-or-self::node()/</code></td>\n </tr>\n <tr>\n <td><code>namespace</code></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>self</code></td>\n <td><code>.</code></td>\n <td><code>.</code> is short for <code>self::node()</code></td>\n </tr>\n <tr>\n <td><code>parent</code></td>\n <td><code>..</code></td>\n <td><code>..</code> is short for <code>parent::node()</code></td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>following</code></td>\n <td> </td>\n <td> </td>\n </tr>\n <tr>\n <td><code>following-sibling</code></td>\n <td> </td>\n <td> </td>\n </tr>\n <tr>\n <td><code>preceding</code></td>\n <td> </td>\n <td> </td>\n </tr>\n <tr>\n <td><code>preceding-sibling</code></td>\n <td> </td>\n <td> </td>\n </tr>\n </tbody>\n</table>\n\n<p>There are other axes you can use.</p>\n\n<h3 id=\"unions\">Unions</h3>\n\n<pre><code class=\"language-bash\">//a | //span\n</code></pre>\n\n<p>Use <code>|</code> to join two expressions.</p>\n\n<h2 id=\"more-examples\">More examples</h2>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-bash\">//* # all elements\ncount(//*) # count all elements\n(//h1)[1]/text() # text of the first h1 heading\n//li[span] # find a &lt;li&gt; with an &lt;span&gt; inside it\n # ...expands to //li[child::span]\n//ul/li/.. # use .. to select a parent\n</code></pre>\n\n<h3 id=\"find-a-parent\">Find a parent</h3>\n\n<pre><code class=\"language-bash\">//section[h1[@id='section-name']]\n</code></pre>\n<p>Finds a <code>&lt;section&gt;</code> that directly contains <code>h1#section-name</code></p>\n\n<pre><code class=\"language-bash\">//section[//h1[@id='section-name']]\n</code></pre>\n\n<p>Finds a <code>&lt;section&gt;</code> that contains <code>h1#section-name</code>.\n(Same as above, but uses descendant-or-self instead of child)</p>\n\n<h3 id=\"closest\">Closest</h3>\n\n<pre><code class=\"language-bash\">./ancestor-or-self::[@class=\"box\"]\n</code></pre>\n\n<p>Works like jQuery’s <code>$().closest('.box')</code>.</p>\n\n<h3 id=\"attributes\">Attributes</h3>\n\n<pre><code class=\"language-bash\">//item[@price &gt; 2*@discount]\n</code></pre>\n\n<p>Finds <code>&lt;item&gt;</code> and check its attributes</p>\n\n<h2 class=\"-one-column\" id=\"references\">References</h2>\n\n<ul>\n <li><a href=\"http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm\">Xpath test bed</a> <em>(whitebeam.org)</em></li>\n</ul>",
"intro_html": "",
"description_html": "<p>$x(‘//div//p//*’) == $(‘div p *’), $x(‘//[@id=”item”]’) == $(‘#item’), and many other Xpath examples.</p>",
"tags": ["Featured"],
"updated": null
},{
"id": "yaml",
"title": "Yaml",
"url": "/yaml",
"category": "Markup",
"keywords": null,
"content_html": "<h3 id=\"multiline-strings\">Multiline strings</h3>\n\n<pre><code class=\"language-yaml\">Multiline: |\n hello\n world\n</code></pre>\n\n<h3 id=\"inheritance\">Inheritance</h3>\n\n<pre><code class=\"language-yaml\">parent: &amp;defaults\n a: 2\n b: 3\n\nchild:\n &lt;&lt;: *defaults\n b: 4\n</code></pre>\n\n<h3 id=\"reference-content\">Reference content</h3>\n\n<pre><code class=\"language-yaml\">values: &amp;ref\n - These values\n - will be reused below\n \nother_values:\n &lt;&lt;: *ref\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "yargs",
"title": "Yargs",
"url": "/yargs",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"basic-usage\">Basic usage</h3>\n\n<pre><code class=\"language-js\">var argv = require('yargs').argv;\n\nargv._ // [ ... ]\nargv.$0 // \"node bin/mybin\"\nargv.verbose // --verbose\n</code></pre>\n\n<h3 id=\"help-and-version\">Help and version</h3>\n\n<pre><code class=\"language-js\">var argv = require('yargs')\n\n // version\n .alias('v', 'version')\n .version(function() { return require('../package').version; })\n .describe('v', 'show version information')\n\n // help text\n .alias('h', 'help')\n .help('help')\n .usage('Usage: $0 -x [num]')\n .showHelpOnFail(false, \"Specify --help for available options\")\n</code></pre>\n\n<h3 id=\"options\">Options</h3>\n\n<pre><code class=\"language-js\"> .option('f', {\n alias : 'file',\n describe: 'x marks the spot',\n type: 'string', /* array | boolean | string */\n nargs: 1,\n demand: true,\n demand: 'file is required',\n default: '/etc/passwd'\n // also: count:true, requiresArg:true\n })\n\n .options({\n f: { ... }\n })\n</code></pre>\n\n<h3 id=\"examples-and-more-help-stuff\">Examples and more help stuff</h3>\n\n<pre><code class=\"language-js\"> // more help\n .example('...')\n .epilog('copyright 2015')\n .command('start', 'start a server')\n</code></pre>\n\n<h3 id=\"stacking\">Stacking</h3>\n\n<pre><code class=\"language-js\"> .count('verbose')\n\nargv.verbose // -vvv =&gt; 3\n</code></pre>\n\n<h3 id=\"reject-non-explicits\">Reject non explicits</h3>\n\n<pre><code class=\"language-js\"> .strict()\n</code></pre>\n\n<h3 id=\"methods\">Methods</h3>\n\n<pre><code>yargs.showHelp()\nyargs.help() //=&gt;string\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "yarn",
"title": "Yarn",
"url": "/yarn",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h3 id=\"npm-equivalents\">npm equivalents</h3>\n\n<table class=\"-left-align -headers\">\n <thead>\n <tr>\n <th>npm</th>\n <th>yarn</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>npm init</code></td>\n <td><code>yarn init</code></td>\n </tr>\n <tr>\n <td><code>npm install</code></td>\n <td><code>yarn</code></td>\n </tr>\n <tr>\n <td><code>npm install gulp --save</code></td>\n <td><code>yarn add gulp</code></td>\n </tr>\n <tr>\n <td><code>npm install gulp --save-dev --save-exact</code></td>\n <td><code>yarn add gulp --dev --exact</code></td>\n </tr>\n <tr>\n <td><code>npm install -g gulp</code></td>\n <td><code>yarn global add gulp</code></td>\n </tr>\n <tr>\n <td><code>npm update</code></td>\n <td><code>yarn upgrade</code></td>\n </tr>\n <tr>\n <td><code>./node_modules/.bin/gulp</code></td>\n <td><code>yarn run gulp</code></td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"yarn-install\">yarn install</h3>\n\n<pre><code>--no-lockfile\n--pure-lockfile\n--frozen-lockfile\n--silent\n--offline\n--update-checksums\n--check-files\n--flat\n--force\n--ignore-scripts\n--modules-folder &lt;path&gt;\n--production[=true|false]\n</code></pre>\n\n<p>These options are available for <code>yarn install</code>.</p>\n\n<h3 id=\"yarn-add\">yarn add</h3>\n\n<pre><code>--dev\n--peer\n--optional\n--exact\n--tilde\n</code></pre>\n\n<p>These options are available for <code>yarn add</code>.</p>\n\n<h3 id=\"workspaces\">Workspaces</h3>\n\n<p class=\"-setup\">In <code>package.json</code>:</p>\n\n<pre><code class=\"language-json\">\"workspaces\": [\n \"packages/*\"\n]\n</code></pre>\n\n<pre class=\"-box-chars\"><code>jest/\n├─ package.json\n└─ packages/\n ├─ jest-matcher-utils/\n │ └─ package.json\n └─ jest-diff/\n └─ package.json\n</code></pre>\n\n<p>(New in 1.0) Allows monorepos to share packages with each other. See: <a href=\"https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/\">Introducing workspaces</a></p>\n\n<h3 id=\"selective-version-resolution\">Selective version resolution</h3>\n\n<p class=\"-setup\">In <code>package.json</code>:</p>\n\n<pre><code class=\"language-json\">\"resolutions\": {\n \"**/sass-brunch/node-sass\": \"4.5.2\"\n}\n</code></pre>\n\n<p>(New in 1.0) Allows you to specify versions for sub-dependencies. See: <a href=\"https://github.com/yarnpkg/yarn/pull/4105\">Selective version resolutions</a></p>\n\n<h3 id=\"create\">Create</h3>\n\n<pre><code class=\"language-bash\">yarn create react-app hello\n</code></pre>\n\n<p>Install <code>create-react-app</code> and runs it. See: <a href=\"https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-yarn-create.md\">yarn create</a></p>",
"intro_html": "",
"description_html": "",
"tags": ["Featurable"],
"updated": "2017-09-08"
},{
"id": "znc",
"title": "ZNC bouncer",
"url": "/znc",
"category": "Others",
"keywords": null,
"content_html": "<h2 id=\"start\">Start</h2>\n\n<pre><code>/msg *status addserver irc.undernet.org [6667]\n/msg *status connect\n\n/msg *status loadmod webadmin\n/msg *status loadmod admin\n/msg *status loadmod away\n/msg *status loadmod awaynick\n/msg *status loadmod clientnotify # Notifies when another client logs\n/msg *status loadmod keepnick\n/msg *status loadmod kickrejoin\n</code></pre>\n\n<h2 id=\"away\">Away</h2>\n\n<pre><code>/msg *status loadmod away\n/msg *away away\n/msg *away back\n/msg *away show #=&gt; Show messages\n/msg *away delete all\n</code></pre>\n\n<h2 id=\"watch\">Watch</h2>\n\n<pre><code>/msg *status loadmod watch\n/msg *watch list\n/msg *watch add * *watch *rico*\n/msg *watch add * *watch *%nick%*\n</code></pre>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "zombie",
"title": "Zombie",
"url": "/zombie",
"category": "JavaScript libraries",
"keywords": null,
"content_html": "<h2 id=\"zombie\">Zombie</h2>\n\n<h3 id=\"examples\">Examples</h3>\n\n<pre><code class=\"language-js\">browser\n .visit(\"http://.../\", -&gt;)\n .fill(\"email\", \"zombie@underworld.dead\")\n .fill(\"password\", \"eat-the-living\")\n .select(\"Born\", \"1985\")\n .uncheck(\"Send newsletter\")\n .clickLink(\"Link name\")\n .pressButton(\"Sign\", () =&gt; { ... })\n .text(\"H1\")\n</code></pre>\n\n<h3 id=\"expectations\">Expectations</h3>\n\n<pre><code class=\"language-js\">expect(browser.query(\"#brains\"))\n\nexpect(browser.body.queryAll(\".hand\")).length 2\n\nconsole.log(browser.html())\nconsole.log(browser.html(\"table.parts\"))\n\nexpect(Browser.text(\".card-nopad small\"), \"A better way to get around!\")\n</code></pre>",
"intro_html": "<p><a href=\"http://zombie.js.org/\">Zombie</a> is a full-stack testing solution for Node.js.</p>",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "zsh",
"title": "zsh",
"url": "/zsh",
"category": "CLI",
"keywords": null,
"content_html": "<h3 id=\"expressions\">Expressions</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Expression</th>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>!!</code></td>\n <td><code>sudo !!</code></td>\n <td>Last command (<code>sudo !!</code>)</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>!*</code></td>\n <td><code>vim !*</code></td>\n <td>Last command’s parameters (<code>vim !*</code>)</td>\n </tr>\n <tr>\n <td><code>!^</code></td>\n <td> </td>\n <td>Last command’s first parameter</td>\n </tr>\n <tr>\n <td><code>!$</code></td>\n <td> </td>\n <td>Last command’s last parameter</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>!?ls</code> <code>&lt;tab&gt;</code></td>\n <td><code>sudo !?mv</code> <code>&lt;tab&gt;</code></td>\n <td>Command and params of last <code>ls</code> command</td>\n </tr>\n <tr>\n <td><code>!?ls?:*</code> <code>&lt;tab&gt;</code></td>\n <td> </td>\n <td>Params of last <code>ls</code> command</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <td><code>*(m0)</code></td>\n <td><code>rm *(m0)</code></td>\n <td>Last modified today</td>\n </tr>\n <tr>\n <td><code>*(m-4)</code></td>\n <td> </td>\n <td>Last modified &lt;4 days ago</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"change-default-shell\">Change default shell</h3>\n\n<pre><code class=\"language-bash\">chsh -s `which zsh`\n</code></pre>\n\n<h3 id=\"process-substitution\">Process Substitution</h3>\n\n<table class=\"-headers\">\n <thead>\n <tr>\n <th>Expression</th>\n <th>Example</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>&lt;(COMMAND)</code></td>\n <td><code>grep \"needle\" &lt;(curl \"https://haystack.io\")</code></td>\n <td>Replace argument with <em>named pipe/FIFO</em> (read-only) with command output</td>\n </tr>\n <tr>\n <td><code>=(COMMAND)</code></td>\n <td><code>vim =(curl \"https://haystack.io\")</code></td>\n <td>Replace argument with <em>file</em> (writable) containing command output</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"also-see\">Also see</h3>\n\n<ul>\n <li><a href=\"./bash\">Bash cheatsheet</a></li>\n</ul>\n\n<p>Zsh is mostly compatible with Bash, so most everything in Bash’s cheatsheet also applies.</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "assets/css/style.css",
"title": null,
"url": "/assets/css/style.css",
"category": "Others",
"keywords": null,
"content_html": "<p>@import “jekyll-theme-primer”;</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "redirects.json",
"title": null,
"url": "/redirects.json",
"category": "Others",
"keywords": null,
"content_html": "<p>{“/jade.html”:”https://devhints.io/pug”,”/package.html”:”https://devhints.io/package.json”,”/phoenix-ecto@1.3.html”:”https://devhints.io/phoenix-ecto”,”/sh.html”:”https://devhints.io/bash”}</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
},{
"id": "bookshelf-contrib",
"title": "bookshelf-contrib.Scopes",
"url": "/bookshelf-contrib",
"category": "Others",
"keywords": null,
"content_html": "<h1 id=\"bookshelf-contribscopes\">bookshelf-contrib.Scopes</h1>\n<p>#\nclass Books\n scopes:\n published: (q) -&gt; q.where(published: true)</p>\n\n<p>Books.published().fetchAll()</p>\n\n<h1 id=\"bookshelf-contribqueryproxy\">bookshelf-contrib.QueryProxy</h1>\n<p>#\nBooks.query().where(published: true)\nBooks.where(published: true)</p>\n\n<h1 id=\"bookshelf-contribmigration\">bookshelf-contrib.Migration</h1>\n<p>class Migration\n up: -&gt;\n down: -&gt;</p>",
"intro_html": "",
"description_html": "",
"tags": null,
"updated": null
}
]
Reference in New Issue View Git Blame Copy Permalink