Deploying to gh-pages from @ 51924e42bd 🚀
This commit is contained in:
rstacruz
parent
d3f9f937fc
commit
5bde88bba0
|
|
@ -0,0 +1,178 @@
|
|||
<!doctype html>
|
||||
<html lang='en'><head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/404.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Devhints.io cheatsheets</title>
|
||||
<meta content='Devhints.io cheatsheets' property='og:title'>
|
||||
<meta content='Devhints.io cheatsheets' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/404.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/404.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to : usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to : usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to : usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/404">
|
||||
<meta name="og:url" content="https://devhints.io/404">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
|
||||
<!-- critical css -->
|
||||
|
||||
|
||||
<!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->
|
||||
<script id='critical-css-disable'>if (~window.location.search.indexOf('nocrit')){;[].slice.call(document.querySelectorAll('#critical-css')).map(function(e){e.parentNode.removeChild(e)})}</script>
|
||||
|
||||
<!-- deferred css -->
|
||||
<script id='deferred-css'>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
|
||||
'https://fonts.googleapis.com/css?family=Cousine',
|
||||
'./assets/2017/style.css?t=20200622144344'
|
||||
])</script>
|
||||
<noscript id='deferred-css-fallback'>
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||||
<link rel='stylesheet' href='./assets/2017/style.css?t=20200622144344'>
|
||||
</noscript>
|
||||
|
||||
|
||||
</head><body>
|
||||
|
||||
|
||||
<nav class='top-nav' data-js-no-preview role='navigation'>
|
||||
<div class='container'>
|
||||
|
||||
<div class='left'>
|
||||
<a class='home back-button' href='.'></a>
|
||||
</div>
|
||||
|
||||
|
||||
<a class='brand' href='.'>
|
||||
Devhints.io
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class='body-area -slim'>
|
||||
<div class='site-header'>
|
||||
<h1>Not found</h1>
|
||||
<p>Sorry, we don't have a cheatsheet for this yet. Try searching!</p>
|
||||
|
||||
<form
|
||||
|
||||
class='search' action='.' method='get'>
|
||||
<label class='search-box '>
|
||||
<span class='prefix'>devhints.io</span>
|
||||
<span class='sep'>/</span>
|
||||
<input name='q'
|
||||
type='text'
|
||||
|
||||
|
||||
|
||||
placeholder='Search 383+ cheatsheets'
|
||||
>
|
||||
</label>
|
||||
</form>
|
||||
|
||||
|
||||
<p class='action'>
|
||||
<a class='push-button' href='./'>Back to home</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"r6WJ":[function(require,module,exports) {
|
||||
function e(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(r)return r.call(e,t);if(e.parentNode){for(var c=e.parentNode.querySelectorAll(t),o=c.length;o--;0)if(c[o]===e)return!0;return!1}}module.exports=e;
|
||||
},{}],"cDuO":[function(require,module,exports) {
|
||||
function e(e,r){var n,o,t=e.length;if("number"==typeof t)for(n=0;n<t;n++)r(e[n],n);else for(n in o=0,e)e.hasOwnProperty(n)&&r(e[n],n,o++);return e}module.exports=e;
|
||||
},{}],"G20n":[function(require,module,exports) {
|
||||
var s=require("./each");function e(i,a){if(a)if(Array.isArray(a))s(a,function(s){e(i,s)});else if(i.classList){var r=a.split(" ").filter(Boolean);s(r,function(s){i.classList.add(s)})}else i.className+=" "+a}module.exports=e;
|
||||
},{"./each":"cDuO"}],"THIL":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.appendMany=c,exports.nextUntil=f,exports.before=s,exports.findChildren=d,exports.createDiv=p;var t=e(require("dom101/matches"));function e(t){return t&&t.__esModule?t:{default:t}}function r(t){return u(t)||i(t)||o(t)||n()}function n(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}function i(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}function u(t){if(Array.isArray(t))return a(t)}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){e.forEach(function(e){t.appendChild(e)})}function f(t,e){return l(t.nextSibling,e,[])}function l(e,n,o){return e?(0,t.default)(e,n)?o:l(e.nextSibling,n,[].concat(r(o),[e])):o}function s(t,e){t.parentNode.insertBefore(e,t)}function d(e,r){return[].slice.call(e.children).filter(function(e){return(0,t.default)(e,r)})}function p(t){var e=document.createElement("div");return Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])}),e}
|
||||
},{"dom101/matches":"r6WJ"}],"hE9p":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=f,exports.groupify=p;var r=e(require("dom101/matches")),t=e(require("dom101/add-class")),n=require("../helpers/dom");function e(r){return r&&r.__esModule?r:{default:r}}function o(r){return c(r)||u(r)||i(r)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(r,t){if(r){if("string"==typeof r)return s(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(r,t):void 0}}function u(r){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(r))return Array.from(r)}function c(r){if(Array.isArray(r))return s(r)}function s(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=new Array(t);n<t;n++)e[n]=r[n];return e}function f(r){l(r).forEach(function(r){(0,n.findChildren)(r,"[data-js-h3-section-list]").forEach(function(r){d(r)})})}function l(r){return p(r,{tag:"h2",wrapperFn:function(){return(0,n.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function d(r){return p(r,{tag:"h3",wrapperFn:function(){return(0,n.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body"})}})}function p(e,a){var i=a.tag,u=a.wrapperFn,c=a.bodyFn,s=e.children[0],f=[];if(s&&!(0,r.default)(s,i)){var l=(0,n.nextUntil)(s,i);f.push(d(s,null,[s].concat(o(l))))}return(0,n.findChildren)(e,i).forEach(function(r){var t=(0,n.nextUntil)(r,i);f.push(d(r,r,t))}),f;function d(r,e,o){var a=u(),i=r.className;i&&(0,t.default)(a,i),(0,n.before)(r,a);var s=c();return i&&(0,t.default)(s,i),(0,n.appendMany)(s,o),e&&a.appendChild(e),a.appendChild(s),a}}
|
||||
},{"dom101/matches":"r6WJ","dom101/add-class":"G20n","../helpers/dom":"THIL"}],"DJ2P":[function(require,module,exports) {
|
||||
function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+t,function(){e.call(n)})}module.exports=n;
|
||||
},{}],"eoMl":[function(require,module,exports) {
|
||||
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
|
||||
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)</script>
|
||||
<script src='./assets/packed/app.js?t=20200622144344'></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,287 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/angularjs.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Angular.js cheatsheet</title>
|
||||
<meta content='Angular.js cheatsheet' property='og:title'>
|
||||
<meta content='Angular.js cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/angularjs.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/angularjs.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Angular.js: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Angular.js: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Angular.js: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/angularjs">
|
||||
<meta name="og:url" content="https://devhints.io/angularjs">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Angular.js cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/angularjs.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Angular.js: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/angularjs",
|
||||
"name": "Angular.js"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Angular.js</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/angularjs.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Angular.js.%20https://devhints.io/angularjs.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<pre><code class="language-html"> <html ng-app="nameApp">
|
||||
</code></pre>
|
||||
|
||||
<h3 id="lists-ng-repeat">Lists (ng-repeat)</h3>
|
||||
<pre><code class="language-html"> <ul ng-controller="MyListCtrl">
|
||||
<li ng-repeat="phone in phones">
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</code></pre>
|
||||
|
||||
<h3 id="model-ng-model">Model (ng-model)</h3>
|
||||
|
||||
<pre><code class="language-html"> <select ng-model="orderProp">
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="age">Newest</option>
|
||||
</select>
|
||||
</code></pre>
|
||||
|
||||
<h3 id="defining-a-module">Defining a module</h3>
|
||||
<pre><code class="language-js"> App = angular.module('myApp', []);
|
||||
|
||||
App.controller('MyListCtrl', function ($scope) {
|
||||
$scope.phones = [ ... ];
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<h3 id="controller-with-protection-from-minification">Controller with protection from minification</h3>
|
||||
<pre><code class="language-js"> App.controller('Name', [
|
||||
'$scope',
|
||||
'$http',
|
||||
function ($scope, $http) {
|
||||
}
|
||||
]);
|
||||
|
||||
a.c 'name', [
|
||||
'$scope'
|
||||
'$http'
|
||||
($scope, $http) ->
|
||||
]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="service">Service</h3>
|
||||
<pre><code class="language-js"> App.service('NameService', function($http){
|
||||
return {
|
||||
get: function(){
|
||||
return $http.get(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>In controller you call with parameter and will use promises to return data from server.</p>
|
||||
|
||||
<pre><code class="language-js"> App.controller('controllerName',
|
||||
function(NameService){
|
||||
NameService.get()
|
||||
.then(function(){})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<h3 id="directive">Directive</h3>
|
||||
<pre><code class="language-js"> App.directive('name', function(){
|
||||
return {
|
||||
template: '<h1>Hello</h1>'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>In HTML will use <code><name></name></code> to render your template <code><h1>Hello</h1></code></p>
|
||||
|
||||
<h3 id="http">HTTP</h3>
|
||||
<pre><code class="language-js"> App.controller('PhoneListCtrl', function ($scope, $http) {
|
||||
$http.get('/data.json').success(function (data) {
|
||||
$scope.phones = data;
|
||||
})
|
||||
});
|
||||
</code></pre>
|
||||
<p>References:</p>
|
||||
|
||||
<ul>
|
||||
<li>https://github.com/angular/angular-seed</li>
|
||||
<li>https://angularjs.org/</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/angularjs.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Angular.js.%20https://devhints.io/angularjs.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,244 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/ansi.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Ansi codes cheatsheet</title>
|
||||
<meta content='Ansi codes cheatsheet' property='og:title'>
|
||||
<meta content='Ansi codes cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/ansi.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/ansi.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Ansi codes: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Ansi codes: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Ansi codes: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/ansi">
|
||||
<meta name="og:url" content="https://devhints.io/ansi">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='CLI' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Ansi codes cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/ansi.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Ansi codes: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#cli",
|
||||
"name": "CLI"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/ansi",
|
||||
"name": "Ansi codes"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Ansi codes</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ansi.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Ansi%20codes.%20https://devhints.io/ansi.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<p>Format</p>
|
||||
|
||||
<pre><code>\033[#m
|
||||
</code></pre>
|
||||
|
||||
<p>Where:</p>
|
||||
|
||||
<pre><code>0 clear
|
||||
1 bold
|
||||
4 underline
|
||||
5 blink
|
||||
|
||||
30-37 fg color
|
||||
40-47 bg color
|
||||
|
||||
1K clear line (to beginning of line)
|
||||
2K clear line (entire line)
|
||||
2J clear screen
|
||||
0;0H move cursor to 0;0
|
||||
|
||||
1A move up 1 line
|
||||
</code></pre>
|
||||
|
||||
<p>Colors</p>
|
||||
|
||||
<pre><code>0 black
|
||||
1 red
|
||||
2 green
|
||||
3 yellow
|
||||
4 blue
|
||||
5 magenta
|
||||
6 cyan
|
||||
7 white
|
||||
</code></pre>
|
||||
|
||||
<p>Stuff</p>
|
||||
|
||||
<pre><code>hide_cursor() { printf "\e[?25l"; }
|
||||
show_cursor() { printf "\e[?25h"; }
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ansi.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Ansi%20codes.%20https://devhints.io/ansi.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,307 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/ansible.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Ansible cheatsheet</title>
|
||||
<meta content='Ansible cheatsheet' property='og:title'>
|
||||
<meta content='Ansible cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/ansible.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/ansible.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Ansible: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Ansible: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Ansible: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/ansible">
|
||||
<meta name="og:url" content="https://devhints.io/ansible">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Ansible' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Ansible cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/ansible.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Ansible: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#ansible",
|
||||
"name": "Ansible"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/ansible",
|
||||
"name": "Ansible"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Ansible</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ansible.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Ansible.%20https://devhints.io/ansible.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
|
||||
<h3 id="hosts">Hosts</h3>
|
||||
|
||||
<pre><code>$ sudo mkdir /etc/ansible
|
||||
$ sudo vim /etc/ansible/hosts
|
||||
|
||||
[example]
|
||||
192.0.2.101
|
||||
192.0.2.102
|
||||
</code></pre>
|
||||
|
||||
<h3 id="running-a-playbook">Running a playbook</h3>
|
||||
|
||||
<pre><code>$ ansible-playbook playbook.yml
|
||||
</code></pre>
|
||||
|
||||
<h2 id="tasks">Tasks</h2>
|
||||
|
||||
<pre><code>- hosts: all
|
||||
user: root
|
||||
sudo: no
|
||||
vars:
|
||||
aaa: bbb
|
||||
tasks:
|
||||
- ...
|
||||
handlers:
|
||||
- ...
|
||||
</code></pre>
|
||||
|
||||
<h3 id="includes">Includes</h3>
|
||||
|
||||
<pre><code>tasks:
|
||||
- include: db.yml
|
||||
handlers:
|
||||
- include: db.yml user=timmy
|
||||
</code></pre>
|
||||
|
||||
<h2 id="handlers">Handlers</h2>
|
||||
|
||||
<pre><code>handlers:
|
||||
- name: start apache2
|
||||
action: service name=apache2 state=started
|
||||
|
||||
tasks:
|
||||
- name: install apache
|
||||
action: apt pkg=apache2 state=latest
|
||||
notify:
|
||||
- start apache2
|
||||
</code></pre>
|
||||
|
||||
<h2 id="vars">Vars</h2>
|
||||
|
||||
<pre><code>- host: lol
|
||||
vars_files:
|
||||
- vars.yml
|
||||
vars:
|
||||
project_root: /etc/xyz
|
||||
tasks:
|
||||
- name: Create the SSH directory.
|
||||
file: state=directory path=${project_root}/home/.ssh/
|
||||
only_if: "$vm == 0"
|
||||
</code></pre>
|
||||
|
||||
<h2 id="roles">Roles</h2>
|
||||
|
||||
<pre><code>- host: xxx
|
||||
roles:
|
||||
- db
|
||||
- { role:ruby, sudo_user:$user }
|
||||
- web
|
||||
|
||||
# Uses:
|
||||
# roles/db/tasks/*.yml
|
||||
# roles/db/handlers/*.yml
|
||||
</code></pre>
|
||||
|
||||
<h3 id="task-failures">Task: Failures</h3>
|
||||
|
||||
<pre><code>- name: my task
|
||||
command: ...
|
||||
register: result
|
||||
failed_when: "'FAILED' in result.stderr"
|
||||
|
||||
ignore_errors: yes
|
||||
|
||||
changed_when: "result.rc != 2"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="env-vars">Env vars</h3>
|
||||
|
||||
<pre><code>vars:
|
||||
local_home: "{{ lookup('env','HOME') }}"
|
||||
</code></pre>
|
||||
|
||||
<h2 id="references">References</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.ansibleworks.com/docs/intro_configuration.html">Intro</a></li>
|
||||
<li><a href="http://www.ansibleworks.com/docs/modules.html">Modules</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ansible.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Ansible.%20https://devhints.io/ansible.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,231 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/applinks.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Applinks cheatsheet</title>
|
||||
<meta content='Applinks cheatsheet' property='og:title'>
|
||||
<meta content='Applinks cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/applinks.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/applinks.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Applinks: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Applinks: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Applinks: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/applinks">
|
||||
<meta name="og:url" content="https://devhints.io/applinks">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='HTML' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Applinks cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/applinks.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Applinks: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#html",
|
||||
"name": "HTML"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/applinks",
|
||||
"name": "Applinks"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Applinks</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/applinks.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Applinks.%20https://devhints.io/applinks.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<pre><code><meta property="al:ios:url" content="applinks://docs" />
|
||||
<meta property="al:ios:app_store_id" content="12345" />
|
||||
<meta property="al:ios:app_name" content="App Links" />
|
||||
|
||||
<meta property="al:android:url" content="applinks://docs" />
|
||||
<meta property="al:android:app_name" content="App Links" />
|
||||
<meta property="al:android:package" content="org.applinks" />
|
||||
|
||||
<meta property="al:web:url" content="http://applinks.org/documentation" />
|
||||
</code></pre>
|
||||
|
||||
<h3 id="device-types">Device types</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>ios</code></li>
|
||||
<li><code>ipad</code></li>
|
||||
<li><code>iphone</code></li>
|
||||
<li><code>android</code></li>
|
||||
<li><code>windows_phone</code></li>
|
||||
<li><code>web</code></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="reference">Reference</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://applinks.org/documentation/">applinks.org</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/applinks.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Applinks.%20https://devhints.io/applinks.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/arel.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Arel cheatsheet</title>
|
||||
<meta content='Arel cheatsheet' property='og:title'>
|
||||
<meta content='Arel cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/arel.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/arel.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Arel: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Arel: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Arel: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/arel">
|
||||
<meta name="og:url" content="https://devhints.io/arel">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Rails' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Arel cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/arel.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Arel: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#rails",
|
||||
"name": "Rails"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/arel",
|
||||
"name": "Arel"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Arel</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/arel.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Arel.%20https://devhints.io/arel.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="tables">Tables</h3>
|
||||
|
||||
<pre><code class="language-rb">users = Arel::Table.new(:users)
|
||||
users = User.arel_table # ActiveRecord model
|
||||
</code></pre>
|
||||
|
||||
<h3 id="fields">Fields</h3>
|
||||
|
||||
<pre><code class="language-rb">users[:name]
|
||||
users[:id]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="where-restriction"><code>where</code> (restriction)</h3>
|
||||
|
||||
<pre><code class="language-rb">users.where(users[:name].eq('amy'))
|
||||
# SELECT * FROM users WHERE users.name = 'amy'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="select-projection"><code>select</code> (projection)</h3>
|
||||
|
||||
<pre><code class="language-rb">users.project(users[:id])
|
||||
# SELECT users.id FROM users
|
||||
</code></pre>
|
||||
|
||||
<h3 id="join"><code>join</code></h3>
|
||||
<h4 id="basic-join">basic join</h4>
|
||||
<p>In ActiveRecord (without Arel), if <code>:photos</code> is the name of the association, use <code>joins</code></p>
|
||||
<pre><code class="language-rb">users.joins(:photos)
|
||||
</code></pre>
|
||||
|
||||
<p>In Arel, if <code>photos</code> is defined as the Arel table,</p>
|
||||
<pre><code class="language-rb">photos = Photo.arel_table
|
||||
users.join(photos)
|
||||
users.join(photos, Arel::Nodes::OuterJoin).on(users[:id].eq(photos[:user_id]))
|
||||
</code></pre>
|
||||
|
||||
<h4 id="join-with-conditions">join with conditions</h4>
|
||||
<pre><code class="language-rb">users.joins(:photos).merge(Photo.where(published: true))
|
||||
</code></pre>
|
||||
|
||||
<p>If the simpler version doesn’t help and you want to add more SQL statements to it:</p>
|
||||
<pre><code class="language-rb">users.join(
|
||||
users.join(photos, Arel::Nodes::OuterJoin)
|
||||
.on(photos[:user_id].eq(users[:id]).and(photos[:published].eq(true)))
|
||||
)
|
||||
</code></pre>
|
||||
|
||||
<h4 id="advanced-join">advanced join</h4>
|
||||
<p>multiple <code>joins</code> with the same table but different meanings and/or conditions</p>
|
||||
<pre><code class="language-rb">creators = User.arel_table.alias('creators')
|
||||
updaters = User.arel_table.alias('updaters')
|
||||
photos = Photo.arel_table
|
||||
|
||||
photos_with_credits = photos
|
||||
.join(photos.join(creators, Arel::Nodes::OuterJoin).on(photos[:created_by_id].eq(creators[:id])))
|
||||
.join(photos.join(updaters, Arel::Nodes::OuterJoin).on(photos[:assigned_id].eq(updaters[:id])))
|
||||
.project(photos[:name], photos[:created_at], creators[:name].as('creator'), updaters[:name].as('editor'))
|
||||
|
||||
photos_with_credits.to_sql
|
||||
# => "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`)"
|
||||
|
||||
# after the request is done, you can use the attributes you named
|
||||
# it's as if every Photo record you got has "creator" and "editor" fields, containing creator name and editor name
|
||||
photos_with_credits.map{|x|
|
||||
"#{photo.name} - copyright #{photo.created_at.year} #{photo.creator}, edited by #{photo.editor}"
|
||||
}.join('; ')
|
||||
</code></pre>
|
||||
|
||||
<h3 id="limit--offset"><code>limit</code> / <code>offset</code></h3>
|
||||
|
||||
<pre><code class="language-rb">users.take(5) # => SELECT * FROM users LIMIT 5
|
||||
users.skip(4) # => SELECT * FROM users OFFSET 4
|
||||
</code></pre>
|
||||
|
||||
<h3 id="aggregates">Aggregates</h3>
|
||||
|
||||
<pre><code class="language-rb">users.project(users[:age].sum) # .average .minimum .maximum
|
||||
users.project(users[:id].count)
|
||||
users.project(users[:id].count.as('user_count'))
|
||||
</code></pre>
|
||||
|
||||
<h3 id="order"><code>order</code></h3>
|
||||
|
||||
<pre><code class="language-rb">users.order(users[:name])
|
||||
users.order(users[:name], users[:age].desc)
|
||||
users.reorder(users[:age])
|
||||
</code></pre>
|
||||
|
||||
<h3 id="with-activerecord">With ActiveRecord</h3>
|
||||
|
||||
<pre><code class="language-rb">User.arel_table
|
||||
User.where(id: 1).arel
|
||||
</code></pre>
|
||||
|
||||
<h3 id="clean-code-with-arel">Clean code with arel</h3>
|
||||
|
||||
<p>Most of the clever stuff should be in scopes, e.g. the code above could become:</p>
|
||||
<pre><code class="language-rb">photos_with_credits = Photo.with_creator.with_editor
|
||||
</code></pre>
|
||||
|
||||
<p>You can store requests in variables then add SQL segments:</p>
|
||||
<pre><code class="language-rb">all_time = photos_with_credits.count
|
||||
this_month = photos_with_credits.where(photos[:created_at].gteq(Date.today.beginning_of_month))
|
||||
recent_photos = photos_with_credits.where(photos[:created_at].gteq(Date.today.beginning_of_month)).limit(5)
|
||||
</code></pre>
|
||||
|
||||
<h2 id="reference">Reference</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://github.com/rails/arel">http://github.com/rails/arel</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/arel.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Arel.%20https://devhints.io/arel.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,508 @@
|
|||
@charset "UTF-8";
|
||||
@import url("//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
|
||||
@import url("//cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css");
|
||||
@import url("//brick.a.ssl.fastly.net/Roboto:400,400i,700");
|
||||
@import url("//fonts.googleapis.com/css?family=Raleway:800");
|
||||
@import url("//fonts.googleapis.com/css?family=Fira+Mono:400,400i");
|
||||
@import url("//brick.a.ssl.fastly.net/EB+Garamond:400i");
|
||||
/* sizes */
|
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
|
||||
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
|
||||
|
||||
/** Remove default margin. */
|
||||
body { margin: 0; }
|
||||
|
||||
/* HTML5 display definitions ========================================================================== */
|
||||
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
|
||||
|
||||
/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
|
||||
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
|
||||
|
||||
/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
|
||||
audio:not([controls]) { display: none; height: 0; }
|
||||
|
||||
/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
|
||||
[hidden], template { display: none; }
|
||||
|
||||
/* Links ========================================================================== */
|
||||
/** Remove the gray background color from active links in IE 10. */
|
||||
a { background-color: transparent; }
|
||||
|
||||
/** Improve readability when focused and also mouse hovered in all browsers. */
|
||||
a:active, a:hover { outline: 0; }
|
||||
|
||||
/* Text-level semantics ========================================================================== */
|
||||
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
|
||||
/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
|
||||
b, strong { font-weight: bold; }
|
||||
|
||||
/** Address styling not present in Safari and Chrome. */
|
||||
dfn { font-style: italic; }
|
||||
|
||||
/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
|
||||
h1 { font-size: 2em; margin: 0.67em 0; }
|
||||
|
||||
/** Address styling not present in IE 8/9. */
|
||||
mark { background: #ff0; color: #000; }
|
||||
|
||||
/** Address inconsistent and variable font size in all browsers. */
|
||||
small { font-size: 80%; }
|
||||
|
||||
/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||
|
||||
sup { top: -0.5em; }
|
||||
|
||||
sub { bottom: -0.25em; }
|
||||
|
||||
/* Embedded content ========================================================================== */
|
||||
/** Remove border when inside `a` element in IE 8/9/10. */
|
||||
img { border: 0; }
|
||||
|
||||
/** Correct overflow not hidden in IE 9/10/11. */
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
/* Grouping content ========================================================================== */
|
||||
/** Address margin not present in IE 8/9 and Safari. */
|
||||
figure { margin: 1em 40px; }
|
||||
|
||||
/** Address differences between Firefox and other browsers. */
|
||||
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
|
||||
|
||||
/** Contain overflow in all browsers. */
|
||||
pre { overflow: auto; }
|
||||
|
||||
/** Address odd `em`-unit font size rendering in all browsers. */
|
||||
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
|
||||
|
||||
/* Forms ========================================================================== */
|
||||
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
|
||||
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
|
||||
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }
|
||||
|
||||
/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
|
||||
button { overflow: visible; }
|
||||
|
||||
/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
|
||||
button, select { text-transform: none; }
|
||||
|
||||
/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
|
||||
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
|
||||
|
||||
/** Re-set default cursor for disabled elements. */
|
||||
button[disabled], html input[disabled] { cursor: default; }
|
||||
|
||||
/** Remove inner padding and border in Firefox 4+. */
|
||||
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||
|
||||
/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
|
||||
input { line-height: normal; }
|
||||
|
||||
/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
|
||||
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
|
||||
|
||||
/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
|
||||
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
|
||||
|
||||
/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
|
||||
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }
|
||||
|
||||
/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
|
||||
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
||||
|
||||
/** Define consistent border, margin, and padding. */
|
||||
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
|
||||
|
||||
/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
|
||||
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
|
||||
|
||||
/** Remove default vertical scrollbar in IE 8/9/10/11. */
|
||||
textarea { overflow: auto; }
|
||||
|
||||
/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
|
||||
optgroup { font-weight: bold; }
|
||||
|
||||
/* Tables ========================================================================== */
|
||||
/** Remove most spacing between table cells. */
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
td, th { padding: 0; }
|
||||
|
||||
/* html base (html, body) */
|
||||
* { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
html { font-size: 17px; line-height: 1.7; background: #fff; color: #555; }
|
||||
@media (max-width: 768px) { html { font-size: 14px; } }
|
||||
|
||||
html { transition: opacity 200ms linear; opacity: 1; }
|
||||
|
||||
html, input, textarea, td, th { font-family: "Roboto", sans-serif; font-weight: 400; }
|
||||
|
||||
html, body { overflow-x: hidden; }
|
||||
|
||||
/* fouc prevention */
|
||||
body { transition: opacity 100ms linear; }
|
||||
|
||||
html.no-js * { opacity: 0; }
|
||||
|
||||
/* basic styles (a, p, img...) */
|
||||
a, a:visited { color: #555; text-decoration: none; box-shadow: inset 0 -1px rgba(136, 136, 136, 0.3); transition: all 100ms linear; }
|
||||
|
||||
a:focus, a:hover { box-shadow: inset 0 -2px #1ea3ff; color: #151515; }
|
||||
|
||||
strong, strong a, strong a:visited, b, b a, b a:visited { color: #151515; }
|
||||
|
||||
h3, p, ul, ol { margin: 1.5em 0; }
|
||||
|
||||
/* iframes */
|
||||
p > iframe { margin: 0 auto; display: block; }
|
||||
|
||||
/* lists */
|
||||
ul, ol { padding-left: 1.5em; }
|
||||
|
||||
ul { list-style: none; }
|
||||
ul > li { position: relative; }
|
||||
ul > li:before { content: ""; display: block; position: absolute; left: -1.4em; top: 0; margin-top: 0.7em; width: 4px; height: 4px; border-radius: 50%; border: solid 2px #c0d3da; }
|
||||
@media (max-width: 768px) { ul > li:before { width: 3px; height: 3px; } }
|
||||
|
||||
/* headings */
|
||||
h2, h2 a, h2 a:visited { color: #151515; }
|
||||
|
||||
h2 { text-align: center; font-family: "eb garamond", serif; font-weight: 400; font-style: italic; font-size-adjust: none; -webkit-font-language-override: normal; font-language-override: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-synthesis: weight style; font-size: 2em; line-height: 1.4; margin: 2em auto 0 auto; }
|
||||
@media (max-width: 768px) { h2 { font-size: 1.6em; } }
|
||||
|
||||
@media (min-width: 769px) { h2:before, h2:after { content: ""; display: inline-block; vertical-align: middle; width: 46px; height: 1px; background: #c0d3da; margin: 0 30px; } }
|
||||
h3 { font-family: "raleway", sans-serif; font-weight: 800; font-size: 1.1em; margin-top: 2em; }
|
||||
h3, h3 a, h3 a:visited { color: #151515; }
|
||||
@media (max-width: 768px) { h3 { margin-top: 1.5em; } }
|
||||
|
||||
h3 + p { margin-top: -1.7em; }
|
||||
|
||||
/* images */
|
||||
p > img:first-child:last-child { display: block; margin: 0 auto; max-width: 100%; }
|
||||
|
||||
code { font-family: "fira mono", monospace; font-weight: 400; letter-spacing: -0.5px; text-rendering: auto; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-size: 0.9em; }
|
||||
|
||||
hr { width: 200px; height: 1px; border: 0; background: #c0d3da; margin: 3em auto; display: block; }
|
||||
|
||||
/* table */
|
||||
table { min-width: 100%; margin-top: 2em; margin-bottom: 2em; font-size: 0.9em; border-bottom: solid 1px #939aa1; }
|
||||
|
||||
thead > tr:first-child > th, thead > tr:first-child > td, tbody > tr:first-child > th, tbody > tr:first-child > td { border-top: solid 1px #939aa1; }
|
||||
|
||||
td, th { text-align: left; border-top: solid 1px #eef3fa; padding: 8px 10px; }
|
||||
|
||||
th { font-family: "raleway", sans-serif; font-weight: 800; color: #151515; }
|
||||
|
||||
td:first-child, th:first-child { text-align: left; padding-left: 0; }
|
||||
|
||||
td:last-child, th:last-child { padding-right: 0; }
|
||||
|
||||
table.no-head thead { display: none; }
|
||||
|
||||
table.shortcuts { table-layout: fixed; }
|
||||
table.shortcuts thead { display: none; }
|
||||
table.shortcuts th:nth-child(1), table.shortcuts td:nth-child(1) { width: 25%; }
|
||||
table.shortcuts th:nth-child(2), table.shortcuts td:nth-child(2) { width: 75%; }
|
||||
table.shortcuts td:first-child > code { background: #fcfcfc; padding: 5px 10px; border-radius: 2px; }
|
||||
|
||||
table.lite-headings { border-bottom: solid 1px #aab7be; }
|
||||
table.lite-headings th { color: #aab7be; font-size: 0.9em; }
|
||||
table.lite-headings thead > tr:first-child > td, table.lite-headings thead > tr:first-child > th { border-top: solid 1px #aab7be; }
|
||||
table.lite-headings tbody > tr:first-child > td, table.lite-headings tbody > tr:first-child > th { border-top: solid 1px #eef3fa; }
|
||||
|
||||
/* pre > code -- code blocks */
|
||||
pre > code { font-family: "fira mono", monospace; font-weight: 400; letter-spacing: -0.5px; text-rendering: auto; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-size: 0.82em; color: #555; padding-right: 20px; }
|
||||
|
||||
pre { padding: 20px 50px; border-radius: 4px; background: #f4f6f8; margin: 2.2em -50px; line-height: 1.2em; }
|
||||
@media (min-width: 768px) { pre { border-top: solid 1px #eef3fa; border-bottom: solid 1px #c7d7ee; border-radius: 4px; } }
|
||||
@media (max-width: 768px) { pre { padding: 20px; margin: 2em -20px; background: #ebeef2; } }
|
||||
@media (max-width: 660px) { pre { border-radius: 0; } }
|
||||
|
||||
pre + pre { margin-top: -1.5em; }
|
||||
|
||||
pre.medium > code { font-size: 1em; }
|
||||
@media (min-width: 768px) { pre.medium { padding-top: 30px; padding-bottom: 30px; } }
|
||||
|
||||
pre.large > code { font-size: 1.1em; line-height: 1.4em; }
|
||||
@media (min-width: 768px) { pre.large { padding-top: 30px; padding-bottom: 30px; } }
|
||||
|
||||
pre.terminal, pre.light { background: white; border: solid 1px #8fd1ff; position: relative; }
|
||||
|
||||
pre.light { background: #fdfdff; }
|
||||
|
||||
pre.terminal { padding-top: 56px; }
|
||||
pre.terminal.large { padding-top: 65px; }
|
||||
pre.terminal:before { content: ""; display: block; height: 34px; line-height: 34px; background: white; border-bottom: solid 1px #8fd1ff; border-top-left-radius: 3px; border-top-right-radius: 3px; position: absolute; top: 0; left: 0; right: 0; font-family: "raleway", sans-serif; font-weight: 800; }
|
||||
pre.terminal:after { content: ""; position: absolute; display: block; width: 4px; height: 4px; border-radius: 50%; left: 15px; top: 15px; font-size: 20px; background-color: #8fd1ff; box-shadow: 20px 0 #8fd1ff, 40px 0 #8fd1ff; }
|
||||
@media (max-width: 768px) { pre.terminal { margin-left: 0; margin-right: 0; } }
|
||||
|
||||
pre + pre { margin-top: -1.7em; }
|
||||
|
||||
@media (min-width: 769px) { pre.cursor > code > :last-child:after { content: ""; display: inline-block; width: 3px; height: 1em; transform: scaleY(1.5) translateY(0.1em); margin-left: 0.4em; background-color: #1ea3ff; -webkit-animation: blink 700ms steps(2, end) infinite; -moz-animation: blink 700ms steps(2, end) infinite; animation: blink 700ms steps(2, end) infinite; } }
|
||||
h3 + pre, h3 + table { margin-top: -1em; }
|
||||
|
||||
/* .about-the-site */
|
||||
.about-the-site { position: relative; }
|
||||
.about-the-site .container { text-align: center; padding: 3em 80px; margin: 0 auto; }
|
||||
.about-the-site .container:after { display: table; content: ""; clear: both; height: 0; zoom: 1; }
|
||||
@media (max-width: 768px) { .about-the-site .container { padding-left: 40px; padding-right: 40px; } }
|
||||
.about-the-site:before { content: ""; position: absolute; display: block; left: 20px; right: 20px; top: 0; border-top: solid 1px #eef3fa; }
|
||||
.about-the-site { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 0.85em; color: #cacdd0; }
|
||||
.about-the-site a, .about-the-site a:visited { color: #aeb4b9; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.05); padding-bottom: 2px; }
|
||||
.about-the-site a:hover, .about-the-site a:focus { color: #151515; box-shadow: inset 0 -2px #1ea3ff; }
|
||||
.about-the-site strong { font-family: "raleway", sans-serif; font-weight: 800; }
|
||||
.about-the-site strong a, .about-the-site strong a:visited { color: #151515; box-shadow: none; }
|
||||
.about-the-site strong a:hover, .about-the-site strong a:focus { color: #151515; box-shadow: inset 0 -2px #1ea3ff; }
|
||||
.about-the-site .identity { margin: 0; margin-top: 0.2em; float: right; font-family: "eb garamond", serif; font-weight: 400; font-style: italic; font-size-adjust: none; -webkit-font-language-override: normal; font-language-override: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-synthesis: weight style; font-size: 2.5em; }
|
||||
.about-the-site .identity a, .about-the-site .identity a:visited { color: #151515; box-shadow: none; }
|
||||
.about-the-site .identity a:hover, .about-the-site .identity a:focus { color: #1ea3ff; }
|
||||
.about-the-site .blurb { margin: 0; max-width: 500px; text-align: left; float: left; line-height: 1.55; }
|
||||
.about-the-site .back { float: right; margin-top: 0.4em; margin-right: 2em; }
|
||||
.about-the-site .fleuron:before { content: ""; font-family: Ionicons; font-size: 16px; font-weight: normal; font-style: normal; display: inline-block; vertical-align: middle; color: #151515; margin: 0 7px; }
|
||||
@media (max-width: 768px) { .about-the-site .fleuron:before { display: none; } }
|
||||
@media (max-width: 768px) { .about-the-site .identity { float: left; clear: both; }
|
||||
.about-the-site .blurb { float: none; margin-bottom: 1em; width: auto; }
|
||||
.about-the-site .back { float: right; margin-right: 0; } }
|
||||
|
||||
.big-button, a.big-button { display: inline-block; width: 180px; height: 50px; line-height: 48px; padding: 0; border-radius: 30px; font-size: 0.85em; box-shadow: none; background: transparent; }
|
||||
@media (max-width: 768px) { .big-button, a.big-button { width: 140px; height: 40px; line-height: 38px; } }
|
||||
.big-button, .big-button:visited, a.big-button, a.big-button:visited { border: solid 2px #1ea3ff; color: #1ea3ff; }
|
||||
.big-button.-back, .big-button.-back:visited, a.big-button.-back, a.big-button.-back:visited { border: solid 1px rgba(147, 154, 161, 0.2); color: #939aa1; }
|
||||
.big-button.-back:before, .big-button.-next:after, a.big-button.-back:before, a.big-button.-next:after { font-family: Ionicons; font-size: 20px; display: inline-block; vertical-align: middle; position: relative; top: -1px; }
|
||||
.big-button.-back:before, a.big-button.-back:before { content: ""; }
|
||||
.big-button.-next:after, a.big-button.-next:after { content: ""; margin-left: 16px; top: 0; }
|
||||
.big-button.-slim, a.big-button.-slim { width: 60px; border-width: 2px; height: 60px; line-height: 60px; border-radius: 50%; }
|
||||
@media (max-width: 768px) { .big-button.-slim, a.big-button.-slim { width: 40px; height: 40px; line-height: 40px; } }
|
||||
.big-button:hover, .big-button:focus, a.big-button:hover, a.big-button:focus { background: #1ea3ff; border-color: transparent; color: white; box-shadow: none; }
|
||||
.big-button.-back:hover, .big-button.-back:focus, a.big-button.-back:hover, a.big-button.-back:focus { background: #1ea3ff; color: white; }
|
||||
|
||||
/* .brief-intro -- Brief introduction */
|
||||
.brief-intro { font-size: 1.1em; color: #939aa1; }
|
||||
|
||||
/* .full-image -- full width image containers */
|
||||
.full-image { overflow: hidden; text-align: center; position: relative; }
|
||||
.full-image img { background: #fcfcfc; }
|
||||
.full-image.cropped img, .full-image.cropped img:first-child:last-child { margin-bottom: -50px; display: block; background: transparent; }
|
||||
.full-image.cropped:after { content: ""; display: block; position: absolute; bottom: 0; left: 20px; right: 20px; border-bottom: solid 1px #c0d3da; }
|
||||
.full-image.stretched img { width: 100%; }
|
||||
@media (max-width: 768px) { .full-image { margin-left: -20px; margin-right: -20px; } }
|
||||
@media (min-width: 769px) { .full-image { width: 100vw; margin-left: calc(-50vw + 620px / 2); } }
|
||||
|
||||
.hint--top:before, .hint--bottom:before { margin-top: -14px; margin-left: -8px; border-radius: 2px; }
|
||||
.hint--top:before, .hint--top:after, .hint--bottom:before, .hint--bottom:after { transition-duration: 10ms; }
|
||||
.hint--top:after, .hint--bottom:after { box-shadow: none; border-radius: 2px; text-shadow: none; margin-left: -55px; }
|
||||
|
||||
.hljs-literal, .hljs-number, .hljs-string, .hljs-symbol, .hljs-value { color: #1ea3ff; }
|
||||
|
||||
.hljs-key, .hljs-attribute { color: #006cb7; }
|
||||
|
||||
.hljs-keyword, .hljs-constant { color: #151515; }
|
||||
|
||||
.hljs-comment { color: #939aa1; font-style: italic; }
|
||||
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #939aa1; font-style: italic; }
|
||||
|
||||
.token.punctuation { color: #999; }
|
||||
|
||||
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; }
|
||||
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #1ea3ff; }
|
||||
|
||||
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #a67f59; }
|
||||
|
||||
.token.atrule, .token.attr-value, .token.keyword { color: #07a; }
|
||||
|
||||
.token.function { color: #DD4A68; }
|
||||
|
||||
.token.regex, .token.important, .token.variable { color: #e90; }
|
||||
|
||||
.token.important, .token.bold { font-weight: bold; }
|
||||
|
||||
.token.italic { font-style: italic; }
|
||||
|
||||
.token.entity { cursor: help; }
|
||||
|
||||
/* .next-article -- lead into the next article */
|
||||
.next-article { display: block; padding: 0; margin-left: 40px; margin-right: 40px; position: relative; }
|
||||
.next-article, .next-article:hover, .next-article:focus { box-shadow: none; }
|
||||
.next-article:after { content: ""; display: block; position: absolute; left: -20px; right: -20px; bottom: 0; border-bottom: solid 1px #eef3fa; }
|
||||
.next-article + .about-the-site:before { display: none; }
|
||||
@media (max-width: 768px) { .next-article { margin-left: 0; margin-right: 0; }
|
||||
.next-article + .about-the-site:before { display: none; } }
|
||||
.next-article .container { display: block; text-align: center; padding: 10em 20px; }
|
||||
@media (min-width: 769px) { .next-article .container { margin-top: 8em; padding: 8em 20px; } }
|
||||
.next-article .h3 { display: block; margin: 0 auto auto; padding: 0; font-size: 2.2em; line-height: 1.3em; font-family: "raleway", sans-serif; font-weight: 800; color: white; transition: all 250ms linear; }
|
||||
@media (max-width: 768px) { .next-article .h3 { font-size: 1.5em; } }
|
||||
.next-article .h3, .next-article .excerpt { max-width: 558px; }
|
||||
.next-article .h3 + .excerpt { margin-top: 0.5em; }
|
||||
.next-article .excerpt { display: block; margin-left: auto; margin-right: auto; font-size: 1em; line-height: 1.6em; }
|
||||
.next-article .big-button { margin-top: 2em; }
|
||||
.next-article h3 a:hover, .next-article h3 a:focus { color: #1ea3ff; }
|
||||
.next-article .heading { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.7em; margin-bottom: 1em; }
|
||||
.next-article .heading:before { font-family: Ionicons; content: ""; margin-right: 15px; font-size: 16px; display: inline-block; vertical-align: middle; color: #1ea3ff; }
|
||||
.next-article .big-button, .next-article a.big-button { background: transparent; }
|
||||
.next-article .big-button, .next-article .big-button:visited, .next-article a.big-button, .next-article a.big-button:visited { border-color: #1ea3ff; color: white; }
|
||||
.next-article .big-button:hover, .next-article .big-button:focus, .next-article a.big-button:hover, .next-article a.big-button:focus { background: #1ea3ff; border-color: transparent; }
|
||||
|
||||
.next-article { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(97, 46, 118, 0.9), rgba(88, 103, 204, 0.9)), linear-gradient(177deg, rgba(97, 46, 118, 0), rgba(97, 46, 118, 0.9)), url("") center center/cover, #612e76; }
|
||||
.next-article:hover, .next-article:focus { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(100, 47, 122, 0.9), rgba(92, 107, 205, 0.9)), linear-gradient(177deg, rgba(97, 46, 118, 0), rgba(97, 46, 118, 0.9)), url("") center center/cover, #612e76; }
|
||||
.next-article .excerpt, .next-article .heading { color: #d8cbdd; }
|
||||
.next-article.-v2 { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
|
||||
.next-article.-v2 { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(2, 125, 101, 0.7), rgba(0, 83, 107, 0.7)), linear-gradient(35deg, rgba(2, 125, 101, 0), rgba(2, 125, 101, 0.9)), url("bg/pebbles.jpg") center center/cover, #027d65; }
|
||||
.next-article.-v2:hover, .next-article.-v2:focus { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(2, 130, 105, 0.7), rgba(0, 87, 112, 0.7)), linear-gradient(35deg, rgba(2, 125, 101, 0), rgba(2, 125, 101, 0.9)), url("bg/pebbles.jpg") center center/cover, #027d65; }
|
||||
.next-article.-v2 .excerpt, .next-article.-v2 .heading { color: #c0dfd9; }
|
||||
.next-article.-v3 { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
|
||||
.next-article.-v3 { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(29, 36, 52, 0.9), rgba(32, 42, 62, 0.9)), linear-gradient(1deg, rgba(29, 36, 52, 0), rgba(29, 36, 52, 0.9)), url("bg/roughwall.jpg") center center/cover, #1d2434; }
|
||||
.next-article.-v3:hover, .next-article.-v3:focus { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(31, 38, 55, 0.9), rgba(34, 44, 65, 0.9)), linear-gradient(1deg, rgba(29, 36, 52, 0), rgba(29, 36, 52, 0.9)), url("bg/roughwall.jpg") center center/cover, #1d2434; }
|
||||
.next-article.-v3 .excerpt, .next-article.-v3 .heading { color: #c7c8cc; }
|
||||
.next-article.-v4 { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
|
||||
.next-article.-v4 { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(144, 32, 20, 0.45), rgba(199, 126, 10, 0.45)), linear-gradient(1deg, rgba(144, 32, 20, 0), rgba(144, 32, 20, 0.9)), url("bg/woodfloor.jpg") center center/cover, #902014; }
|
||||
.next-article.-v4:hover, .next-article.-v4:focus { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(148, 33, 21, 0.45), rgba(204, 129, 10, 0.45)), linear-gradient(1deg, rgba(144, 32, 20, 0), rgba(144, 32, 20, 0.9)), url("bg/woodfloor.jpg") center center/cover, #902014; }
|
||||
.next-article.-v4 .excerpt, .next-article.-v4 .heading { color: #e3c7c4; }
|
||||
.next-article.-v5 { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
|
||||
.next-article.-v5 { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(23, 40, 58, 0.85), rgba(37, 41, 94, 0.85)), linear-gradient(1deg, rgba(23, 40, 58, 0), rgba(23, 40, 58, 0.9)), url("bg/stairs.jpg") center center/cover, #17283a; }
|
||||
.next-article.-v5:hover, .next-article.-v5:focus { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='10' version='1.1'><polyline fill='white' points='1500,0 0,0 0,10'/></svg>") -50px top/110% auto no-repeat, linear-gradient(to right, rgba(24, 43, 62, 0.85), rgba(38, 43, 98, 0.85)), linear-gradient(1deg, rgba(23, 40, 58, 0), rgba(23, 40, 58, 0.9)), url("bg/stairs.jpg") center center/cover, #17283a; }
|
||||
.next-article.-v5 .excerpt, .next-article.-v5 .heading { color: #c5c9ce; }
|
||||
|
||||
/* .post-headline -- H1's of posts */
|
||||
.post-headline { margin: 1.5em auto 3em auto; text-align: center; }
|
||||
.post-headline .post-icon { margin-bottom: 2px; }
|
||||
.post-headline h1 { text-align: center; margin-bottom: 0; font-family: "eb garamond", serif; font-weight: 400; font-style: italic; font-size-adjust: none; -webkit-font-language-override: normal; font-language-override: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-synthesis: weight style; font-size: 2.8em; line-height: 1.2; width: 80%; margin-left: auto; margin-right: auto; }
|
||||
@media (max-width: 768px) { .post-headline h1 { font-size: 2em; } }
|
||||
.post-headline .meta { display: block; text-align: center; margin: 0; margin-top: 1em; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8em; }
|
||||
.post-headline .meta .author, .post-headline .meta .date { margin: 0 5px; padding-bottom: 2px; }
|
||||
.post-headline .meta a, .post-headline .meta a:visited { color: #939aa1; }
|
||||
.post-headline .meta a:hover, .post-headline .meta a:hover span, .post-headline .meta a:focus, .post-headline .meta a:focus span { color: #939aa1; }
|
||||
.post-headline .meta a:hover time, .post-headline .meta a:focus time { color: #151515; box-shadow: inset 0 -2px #1ea3ff; }
|
||||
.post-headline a, .post-headline a:visited, .post-headline a:focus, .post-headline a:hover { color: #151515; text-decoration: none; box-shadow: none; }
|
||||
|
||||
/* .post-icon -- category icons */
|
||||
.post-icon, abbr.post-icon { border: 0; margin: 0; display: inline-block; width: 56px; height: 56px; line-height: 58px; text-align: center; border-radius: 50%; color: #aaa; background: #eee; font-family: "Roboto", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 1px; }
|
||||
.post-icon span:after, abbr.post-icon span:after { content: attr(data-label); font-size: 0.9em; position: relative; top: -1px; }
|
||||
@media (max-width: 480px) { .post-icon, abbr.post-icon { transform: scale(0.75); } }
|
||||
.post-icon.-icon-css, abbr.post-icon.-icon-css { font-size: 14px; line-height: 58px; }
|
||||
.post-icon.-icon-css, abbr.post-icon.-icon-css { background: #3498db; color: white; box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba(52, 152, 219, 0.2), 1px 3px rgba(52, 152, 219, 0.3); }
|
||||
.post-icon.-icon-css span:after, abbr.post-icon.-icon-css span:after { content: "CSS"; }
|
||||
.post-icon.-icon-development, abbr.post-icon.-icon-development { font-size: 14px; line-height: 58px; }
|
||||
.post-icon.-icon-development, abbr.post-icon.-icon-development { background: #34495e; color: #b9c9d8; box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba(52, 73, 94, 0.2), 1px 3px rgba(52, 73, 94, 0.3); }
|
||||
.post-icon.-icon-development span:after, abbr.post-icon.-icon-development span:after { content: "DEV"; }
|
||||
.post-icon.-icon-ruby, abbr.post-icon.-icon-ruby { text-indent: 2px; }
|
||||
.post-icon.-icon-ruby, abbr.post-icon.-icon-ruby { background: #e74c3c; color: white; box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba(231, 76, 60, 0.2), 1px 3px rgba(231, 76, 60, 0.3); }
|
||||
.post-icon.-icon-ruby span:after, abbr.post-icon.-icon-ruby span:after { content: "RB"; }
|
||||
.post-icon.-icon-javascript, abbr.post-icon.-icon-javascript { text-indent: 1px; }
|
||||
.post-icon.-icon-javascript, abbr.post-icon.-icon-javascript { background: #2ecc71; color: #fbfefc; box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba(46, 204, 113, 0.2), 1px 3px rgba(46, 204, 113, 0.3); }
|
||||
.post-icon.-icon-javascript span:after, abbr.post-icon.-icon-javascript span:after { content: "JS"; }
|
||||
.post-icon.-icon-productivity, abbr.post-icon.-icon-productivity { text-indent: 1px; }
|
||||
.post-icon.-icon-productivity, abbr.post-icon.-icon-productivity { background: #2ecc71; color: #fbfefc; box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba(46, 204, 113, 0.2), 1px 3px rgba(46, 204, 113, 0.3); }
|
||||
.post-icon.-icon-productivity span:after, abbr.post-icon.-icon-productivity span:after { content: "PROD"; }
|
||||
|
||||
/* .post-index (et al) -- utility classes */
|
||||
.post-index { margin: 0 auto 4em auto; position: relative; padding-top: 4em; font-size: 0.9em; }
|
||||
.post-index .container { overflow: hidden; max-width: 620px; margin: 0 auto; }
|
||||
.post-index h3 { text-transform: uppercase; letter-spacing: 2px; color: #939aa1; font-size: 1em; }
|
||||
|
||||
.post-index-item { display: block; overflow: hidden; padding: 6px 20px; border-top: solid 1px #eef3fa; }
|
||||
.post-index-item, .post-index-item:hover, .post-index-item:focus { box-shadow: none; }
|
||||
.post-index-item:hover .article, .post-index-item:focus .article { transition: none; }
|
||||
.post-index-item .date { display: block; }
|
||||
.post-index-item .date { width: 100px; font-size: 0.8em; color: #939aa1; }
|
||||
@media (min-width: 768px) { .post-index-item { padding-left: 0; padding-right: 0; }
|
||||
.post-index-item .date, .post-index-item .tag { margin-top: 0.2em; }
|
||||
.post-index-item .date, .post-index-item article { float: left; }
|
||||
.post-index-item .tag { float: right; } }
|
||||
.post-index-item .article { color: #555; margin-right: 3px; transition: all 100ms linear; }
|
||||
.post-index-item:hover .article { color: #1ea3ff; }
|
||||
.post-index-item:nth-of-type(1) .article, .post-index-item:nth-of-type(2) .article, .post-index-item:nth-of-type(3) .article, .post-index-item:nth-of-type(4) .article { font-family: "raleway", sans-serif; font-weight: 800; }
|
||||
.post-index-item .tag { color: #939aa1; font-weight: normal; font-size: 0.8em; }
|
||||
|
||||
.post-item { max-width: 620px; margin: 0 auto; }
|
||||
|
||||
.post-list { margin: 40px auto; padding: 20px; }
|
||||
@media (max-width: 768px) { .post-list { margin: 0 auto; } }
|
||||
|
||||
.post-list > .post-item:not(:first-child):before { content: ""; display: block; width: 150px; height: 1px; background: #eef3fa; margin: 7em auto; }
|
||||
@media (max-width: 768px) { .post-list > .post-item:not(:first-child):before { margin: 4em auto; } }
|
||||
|
||||
.site-header { text-align: center; padding: 0 20px; }
|
||||
.site-header .container { padding: 15px 20px; font-size: 0.9em; color: rgba(147, 154, 161, 0.6); border-bottom: solid 1px #eef3fa; }
|
||||
.site-header em { font-family: "eb garamond", serif; font-weight: 400; font-style: italic; font-size-adjust: none; -webkit-font-language-override: normal; font-language-override: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"; font-synthesis: weight style; font-size: 1.1em; font-size: 1.1em; color: #555; }
|
||||
|
||||
/* .social-list -- social share icons */
|
||||
.social-list, .social-list li { margin: 0; padding: 0; }
|
||||
.social-list { display: block; text-align: center; width: 100%; margin-top: 2em; }
|
||||
@media (min-width: 768px) { .social-list { margin-top: 4em; } }
|
||||
.social-list.-top { margin-top: -2em; }
|
||||
@media (min-width: 768px) { .social-list.-top { margin-top: -1em; } }
|
||||
.social-list li { display: inline-block; }
|
||||
.social-list a { display: inline-block; padding: 6px; text-align: center; box-shadow: none; }
|
||||
.social-list a:before, .social-list a:after { transition: all 100ms linear; }
|
||||
.social-list .text { display: none; }
|
||||
.social-list a:before { font-family: "Ionicons"; font-weight: normal; font-style: normal; font-size: 18px; width: 40px; height: 40px; line-height: 40px; display: inline-block; text-align: center; border: solid 2px transparent; border-radius: 50%; }
|
||||
.social-list .facebook a { color: #a0bdc7; }
|
||||
.social-list .facebook a:hover, .social-list .facebook a:focus { color: #4c66a4; }
|
||||
.social-list .facebook a:before { content: ""; }
|
||||
.social-list .facebook a:hover:before, .social-list .facebook a:focus:before { border-color: #4c66a4; content: ""; }
|
||||
.social-list .twitter a { color: #a0bdc7; }
|
||||
.social-list .twitter a:hover, .social-list .twitter a:focus { color: dodgerblue; }
|
||||
.social-list .twitter a:before { content: ""; }
|
||||
.social-list .twitter a:hover:before, .social-list .twitter a:focus:before { border-color: dodgerblue; content: ""; }
|
||||
.social-list .googleplus a { color: #a0bdc7; }
|
||||
.social-list .googleplus a:hover, .social-list .googleplus a:focus { color: #f53; }
|
||||
.social-list .googleplus a:before { content: ""; }
|
||||
.social-list .googleplus a:hover:before, .social-list .googleplus a:focus:before { border-color: #f53; content: ""; }
|
||||
|
||||
/* .center (et al) -- utility classes */
|
||||
.center { text-align: center; }
|
||||
|
||||
@media (min-width: 769px) { .spaced { margin-top: 4em; margin-bottom: 4em; } }
|
||||
|
||||
@media (min-width: 769px) { .spaced-more { margin-top: 6em; margin-bottom: 6em; } }
|
||||
|
||||
@media (min-width: 769px) { .spaced-less { margin-top: 2em; margin-bottom: 2em; } }
|
||||
|
||||
@media (min-width: 920px) { .wide { width: 140%; margin-left: -25%; } }
|
||||
|
||||
/* .top/.bottom -- margin helpers */
|
||||
.top-collapse-0 { margin-top: 0; }
|
||||
|
||||
.top-collapse-1 { margin-top: -1em; }
|
||||
|
||||
.top-collapse-2 { margin-top: -2em; }
|
||||
|
||||
.top-collapse-4 { margin-top: -4em; }
|
||||
|
||||
.top-space-0 { margin-top: 0; }
|
||||
|
||||
.top-space-1 { margin-top: 1em; }
|
||||
|
||||
.top-space-2 { margin-top: 2em; }
|
||||
|
||||
.top-space-4 { margin-top: 2em; }
|
||||
@media (min-width: 769px) { .top-space-4 { margin-top: 4em; } }
|
||||
|
||||
.bottom-collapse-0 { margin-bottom: 0; }
|
||||
|
||||
.bottom-collapse-1 { margin-bottom: -1em; }
|
||||
|
||||
.bottom-collapse-2 { margin-bottom: -2em; }
|
||||
|
||||
.bottom-collapse-4 { margin-bottom: -4em; }
|
||||
|
||||
.bottom-space-0 { margin-bottom: 0; }
|
||||
|
||||
.bottom-space-1 { margin-bottom: 1em; }
|
||||
|
||||
.bottom-space-2 { margin-bottom: 2em; }
|
||||
|
||||
.bottom-space-4 { margin-bottom: 2em; }
|
||||
@media (min-width: 769px) { .bottom-space-4 { margin-bottom: 4em; } }
|
||||
|
||||
@keyframes blink { 0% { opacity: 0; }
|
||||
100% { opacity: 1; } }
|
||||
@-webkit-keyframes blink { 0% { opacity: 0; }
|
||||
100% { opacity: 1; } }
|
||||
|
|
@ -0,0 +1,621 @@
|
|||
@import url(../../assets/packed/app.css);
|
||||
/* Metrics */
|
||||
/* Fonts */
|
||||
/* Base colors */
|
||||
/* Mod scale */
|
||||
/* Base carbon ads style */
|
||||
.push-button { display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 3px; }
|
||||
.push-button, .push-button:visited { background-color: #745fb5; background: linear-gradient(5deg, #745fb5, #9066b8); color: white; }
|
||||
.push-button:hover, .push-button:focus { background: #4f3d85; box-shadow: none; color: white; }
|
||||
|
||||
.-dark.push-button, .-dark.push-button:visited { background: #4f3d85; color: white; }
|
||||
.-dark.push-button:hover, .-dark.push-button:focus { background: #3e3069; color: white; }
|
||||
|
||||
/* Base */
|
||||
html, body { background: #f1f3f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.6; color: #345; overflow-x: hidden; }
|
||||
|
||||
body { font-size: 13px; padding: 0; margin: 0; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { body { font-size: calc( 13px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { body { font-size: calc( 14px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { body { font-size: 14px; } }
|
||||
|
||||
/* Code */
|
||||
pre, code { font-family: cousine, "SFMono-Regular", Consolas, Menlo, "Liberation Mono", "Ubuntu Mono", Courier, monospace; letter-spacing: -0.03em; }
|
||||
|
||||
pre { font-size: 0.96em; }
|
||||
|
||||
/* Antialias */
|
||||
*:not(pre):not(code) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
/* Links */
|
||||
a { color: #26648e; }
|
||||
|
||||
a:visited { color: #15234d; }
|
||||
|
||||
a:hover { color: #3ac1cb; }
|
||||
|
||||
/* prism.js adds area-hidden which it probably shouldn't */
|
||||
[aria-hidden]:not(.line-highlight) { display: none !important; }
|
||||
|
||||
@media (max-width: 580px) { .hint--bottom::before, .hint--bottom::after { display: none; } }
|
||||
/*
|
||||
/* "Preloader": This makes the content semi-transparent before the page ad loads. */
|
||||
html.WithJs .post-content { opacity: 0; }
|
||||
|
||||
/* Defer "loading" until page's onload event fires. (The page actually already loaded, we just pretend like it hasn't) */
|
||||
html.WithJs .pages-list, html.WithJs .post-content.-wrapified, html.WithJs .intro-content { opacity: 0.4; }
|
||||
html.WithJs.LoadDone .pages-list, html.WithJs.LoadDone .post-content.-wrapified, html.WithJs.LoadDone .intro-content { opacity: 1; transition: opacity 100ms linear 100ms; }
|
||||
|
||||
/* For links with sources, eg, [Foo](foo.com) _(foo.com)_ */
|
||||
.MarkdownBody.MarkdownBody a + em { opacity: 0.5; }
|
||||
|
||||
.MarkdownBody code { color: #667788; font-size: 0.96em; }
|
||||
|
||||
.MarkdownBody pre, .MarkdownBody code { font-family: cousine, "SFMono-Regular", Consolas, Menlo, "Liberation Mono", "Ubuntu Mono", Courier, monospace; }
|
||||
|
||||
.MarkdownBody pre.-box-chars { line-height: 1.32; }
|
||||
|
||||
.MarkdownBody pre.-figlet { line-height: 1; font-size: 11px; }
|
||||
|
||||
/* Undo prism theme crap */
|
||||
.MarkdownBody pre { box-shadow: none; border-left: 0; overflow: hidden; overflow-x: auto; background: white; font-size: 0.96em; line-height: 1.5; }
|
||||
.MarkdownBody pre.-wrap { white-space: pre-wrap; }
|
||||
.MarkdownBody pre > code { color: #111; max-height: auto; padding: 0; background: transparent; overflow: visible; font-size: 1em; }
|
||||
.MarkdownBody .line-highlight { transform: translate3d(0, 2px, 0); background: linear-gradient(to right, rgba(20, 175, 131, 0.05) 25%, transparent); }
|
||||
.MarkdownBody .line-highlight[data-end] { margin-top: 0; }
|
||||
.MarkdownBody .line-highlight::before, .MarkdownBody .line-highlight::after { display: none; }
|
||||
|
||||
.MarkdownBody pre.-setup, .MarkdownBody p.-setup, .MarkdownBody ul.-setup, .MarkdownBody p.-crosslink { background: #f8f9fa; }
|
||||
|
||||
/* Syntax kighlight */
|
||||
.token.tag, .token.keyword { color: #26648e; }
|
||||
.token.tag { color: #1d406e; }
|
||||
.token.value, .token.string, .token.number, .token.attr-value, .token.boolean, .token.regex { color: #14af83; }
|
||||
.token.function, .token.attr-name { color: #2e90ae; }
|
||||
.token.comment, .token.punctuation, .token.operator { color: #aaa; }
|
||||
|
||||
/* MarkdownBody context */
|
||||
.MarkdownBody h2 { margin: 0; padding: 0; margin-bottom: 24px; margin-top: 64px; position: relative; font-size: 30px; line-height: 1.2; font-weight: 200; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 0; }
|
||||
@media (max-width: 768px) { .MarkdownBody h2 { margin-bottom: 8px; margin-top: 32px; } }
|
||||
@media (max-width: 480px) { .MarkdownBody h2 { margin-bottom: 8px; margin-top: 32px; } }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .MarkdownBody h2 { font-size: calc( 30px + 4 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .MarkdownBody h2 { font-size: calc( 34px + 2 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .MarkdownBody h2 { font-size: 36px; } }
|
||||
.MarkdownBody h2:target { color: #745fb5; }
|
||||
|
||||
.MarkdownBody h3 { margin: 0; padding: 0; margin-bottom: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 17px; font-weight: 400; color: #745fb5; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .MarkdownBody h3 { font-size: calc( 17px + 2 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .MarkdownBody h3 { font-size: calc( 19px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .MarkdownBody h3 { font-size: 19px; } }
|
||||
|
||||
.MarkdownBody a, .MarkdownBody a:visited { color: #26648e; text-decoration: none; }
|
||||
.MarkdownBody a:hover { text-decoration: underline; }
|
||||
.MarkdownBody em { font-style: normal; color: #667788; }
|
||||
.MarkdownBody iframe { border: 0; margin: 0; width: 100%; }
|
||||
|
||||
.local-anchor { margin-left: -.9em; margin-right: .1em; padding: 0 .1em; }
|
||||
.MarkdownBody .local-anchor, .MarkdownBody .local-anchor:visited { color: #667788; text-decoration: inherit; opacity: .5; }
|
||||
.MarkdownBody .local-anchor:target, .MarkdownBody :target > .local-anchor { color: #745fb5; opacity: 1; }
|
||||
.MarkdownBody .local-anchor:hover, .MarkdownBody .local-anchor:focus { color: white; background: #745fb5; opacity: 1; text-decoration: inherit; }
|
||||
|
||||
/* Crosslink (eg, phoenix.md) */
|
||||
.MarkdownBody.MarkdownBody img { max-width: 100%; }
|
||||
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a { display: block; text-decoration: none; color: #745fb5; border-bottom: 0; box-shadow: none; margin: -16px; padding: 16px; }
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a:visited { color: #745fb5; }
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(255%2C255%2C255)%22%20d%3D%22M85%20277.375h259.704L225.002%20397.077%20256%20427l171-171L256%2085l-29.922%2029.924%20118.626%20119.7H85v42.75z%22%2F%3E%3C%2Fsvg%3E") center center/16px 16px no-repeat; height: 16px; width: 16px; margin-right: 16px; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; }
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a::before, .MarkdownBody.MarkdownBody p.-crosslink > a:visited::before { background-color: #745fb5; color: white; }
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a:hover, .MarkdownBody.MarkdownBody p.-crosslink > a:focus { color: #673d85; }
|
||||
.MarkdownBody.MarkdownBody p.-crosslink > a:hover::before, .MarkdownBody.MarkdownBody p.-crosslink > a:focus::before { background-color: #673d85; }
|
||||
|
||||
/* Table */
|
||||
.MarkdownBody table { /* Horizontal lines */ }
|
||||
.MarkdownBody table { width: 100%; }
|
||||
.MarkdownBody table tr + tr { border-top: solid 1px rgba(102, 119, 136, 0.05); }
|
||||
.MarkdownBody table tbody + tbody { border-top: solid 1px rgba(102, 119, 136, 0.2); }
|
||||
.MarkdownBody table td, .MarkdownBody table th { padding: 8px 16px; vertical-align: top; text-align: left; }
|
||||
.MarkdownBody table tr th:last-child, .MarkdownBody table tr td:last-child { text-align: right; }
|
||||
.MarkdownBody table td:first-child { white-space: nowrap; }
|
||||
.MarkdownBody table td > code { font-size: 0.96em; }
|
||||
.MarkdownBody table td:first-child > code { color: #35a; }
|
||||
.MarkdownBody table a, .MarkdownBody table a:visited { color: #35a; text-decoration: none; }
|
||||
.MarkdownBody table td:first-child > code ~ em { font-size: 11px; font-style: normal; color: #667788; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .MarkdownBody table td:first-child > code ~ em { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .MarkdownBody table td:first-child > code ~ em { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .MarkdownBody table td:first-child > code ~ em { font-size: 12px; } }
|
||||
.MarkdownBody table thead { display: none; }
|
||||
.MarkdownBody table thead th { font-weight: normal; color: #745fb5; }
|
||||
|
||||
.MarkdownBody table.-shortcuts td:first-child > code { font-size: 1rem; padding: 5px 6px; padding-left: 8px; background: #f8f9fa; border-radius: 3px; margin-right: 2px; letter-spacing: 0.1em; color: #345; }
|
||||
|
||||
.MarkdownBody table.-shortcuts-right td:last-child > code { font-size: 1rem; padding: 5px 6px; padding-left: 8px; background: #f8f9fa; border-radius: 3px; margin-right: 2px; letter-spacing: 0.1em; color: #345; }
|
||||
|
||||
.MarkdownBody table.-left-align tr th, .MarkdownBody table.-left-align tr td, .MarkdownBody table.-left-align tr td:last-child { text-align: left; }
|
||||
|
||||
.MarkdownBody table.-headers thead { display: table-header-group; border-bottom: solid 1px rgba(102, 119, 136, 0.2); }
|
||||
|
||||
/* Key-value pairs (like in css) */
|
||||
.MarkdownBody table.-key-values tbody tr td + td code { display: block; }
|
||||
|
||||
.MarkdownBody table.-css-breakdown tr th, .MarkdownBody table.-css-breakdown tr td, .MarkdownBody table.-css-breakdown tr td:last-child { text-align: left; }
|
||||
.MarkdownBody table.-css-breakdown tr td { font-size: 15px; white-space: nowrap; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .MarkdownBody table.-css-breakdown tr td { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .MarkdownBody table.-css-breakdown tr td { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .MarkdownBody table.-css-breakdown tr td { font-size: 16px; } }
|
||||
.MarkdownBody table.-css-breakdown tr td:not(:last-child) { padding-right: 4px; }
|
||||
.MarkdownBody table.-css-breakdown tr td:not(:first-child) { padding-left: 4px; }
|
||||
.MarkdownBody table.-css-breakdown tr:last-child { background: #f8f9fa; }
|
||||
.MarkdownBody table.-css-breakdown tr:last-child td { font-size: 11px; color: #667788; white-space: auto; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .MarkdownBody table.-css-breakdown tr:last-child td { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .MarkdownBody table.-css-breakdown tr:last-child td { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .MarkdownBody table.-css-breakdown tr:last-child td { font-size: 12px; } }
|
||||
|
||||
.MarkdownBody table.-bold-first tr > td:first-child { font-weight: bold; }
|
||||
|
||||
.MarkdownBody table.-no-wrap td, .MarkdownBody table.-no-wrap th { white-space: nowrap; }
|
||||
|
||||
.MarkdownBody table.-mute-em td em, .MarkdownBody table.-mute-em th em { opacity: 0.5; }
|
||||
.MarkdownBody table.-mute-em td em > code, .MarkdownBody table.-mute-em th em > code { margin-right: 0.5em; }
|
||||
|
||||
.MarkdownBody ul.-six-column { display: flex; flex-wrap: wrap; }
|
||||
.MarkdownBody ul.-six-column > li { flex: 0 0 16.6666666667%; }
|
||||
@media (max-width: 480px) { .MarkdownBody ul.-six-column > li { flex: 0 0 50%; } }
|
||||
@media (max-width: 768px) { .MarkdownBody ul.-six-column > li { flex: 0 0 25%; } }
|
||||
|
||||
.MarkdownBody ul.-four-column { display: flex; flex-wrap: wrap; }
|
||||
.MarkdownBody ul.-four-column > li { flex: 0 0 25%; }
|
||||
@media (max-width: 480px) { .MarkdownBody ul.-four-column > li { flex: 0 0 50%; } }
|
||||
@media (max-width: 768px) { .MarkdownBody ul.-four-column > li { flex: 0 0 33.3333333333%; } }
|
||||
|
||||
.attribute-peg { display: inline-block; height: 12px; width: 20px; text-align: center; }
|
||||
.attribute-peg > span { display: inline-block; width: 8px; height: 8px; background: #77dab2; border-radius: 50%; }
|
||||
|
||||
.announcements-item { position: relative; padding: 16px; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3), 0 8px 12px rgba(58, 193, 203, 0.1); border-radius: 1px; background: white; padding-right: 48px; animation: announcements-item-flyin 500ms ease-out; transition: opacity 500ms linear, transform 500ms ease-out; }
|
||||
.announcements-item.-hide { display: none; }
|
||||
.announcements-item > .title { font-size: 15px; font-weight: normal; color: #745fb5; margin: 0; padding: 0; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .announcements-item > .title { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .announcements-item > .title { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .announcements-item > .title { font-size: 16px; } }
|
||||
.announcements-item > .body > p { margin: 0; padding: 0; }
|
||||
.announcements-item > .body > p + p { margin-top: 1em; }
|
||||
.announcements-item > .close { position: absolute; right: 0; top: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 0; margin: 0; padding: 0; cursor: pointer; background: transparent; }
|
||||
.announcements-item > .close:hover, .announcements-item > .close:focus { color: #745fb5; }
|
||||
.announcements-item > .close::before { content: "\00D7"; font-size: 14px; }
|
||||
|
||||
@keyframes announcements-item-flyin { 0% { transform: translate3d(0, 32px, 0); opacity: 0; }
|
||||
100% { transform: translate3d(0, 0, 0); opacity: 1; } }
|
||||
.announcements-list { position: fixed; left: 0; bottom: 0; max-width: 420px; padding: 0; z-index: 10; }
|
||||
@media (min-width: 481px) { .announcements-list { padding: 16px; } }
|
||||
@media (min-width: 769px) { .announcements-list { padding: 32px; } }
|
||||
|
||||
/* Home link */
|
||||
.back-button { text-decoration: none; width: 48px; height: 48px; line-height: 46px; text-align: center; display: inline-block; border-radius: 50%; transition: all 100ms linear; }
|
||||
@media (max-width: 480px) { .back-button { width: 32px; height: 32px; line-height: 30px; } }
|
||||
.back-button, .back-button:visited { color: #667788; }
|
||||
.back-button:hover, .back-button:focus { color: white; background: #745fb5; opacity: 1; }
|
||||
.back-button::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(51%2C68%2C85)%22%20d%3D%22M427%20234.625H167.296l119.702-119.702L256%2085%2085%20256l171%20171%2029.922-29.924-118.626-119.7H427v-42.75z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; vertical-align: middle; }
|
||||
.back-button:hover::before, .back-button:focus::before { display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(255%2C255%2C255)%22%20d%3D%22M427%20234.625H167.296l119.702-119.702L256%2085%2085%20256l171%20171%2029.922-29.924-118.626-119.7H427v-42.75z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; }
|
||||
@media (max-width: 480px) { .back-button::before { font-size: 16px; } }
|
||||
|
||||
.body-area { max-width: 1232px; margin: 0 auto; padding: 16px; }
|
||||
@media (max-width: 480px) { .body-area { padding: 16px; } }
|
||||
.body-area.-slim { max-width: 740px; }
|
||||
|
||||
.codefund-sponsor { min-height: 114px; }
|
||||
.codefund-sponsor .cf-wrapper { margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Disqus */
|
||||
.comments-area { margin: 32px 0 16px 0; }
|
||||
.comments-area > .container { padding-left: 16px; padding-right: 16px; max-width: 1232px; margin: 0 auto; }
|
||||
@media (max-width: 480px) { .comments-area > .container { padding-left: 16px; } }
|
||||
@media (max-width: 480px) { .comments-area > .container { padding-right: 16px; } }
|
||||
.comments-area > .container::before { content: ''; display: block; background: linear-gradient(to right, rgba(102, 119, 136, 0.2) 50%, transparent); height: 1px; }
|
||||
|
||||
/* Comments disclosure triangle */
|
||||
.comments-details { margin-bottom: -16px; }
|
||||
.comments-details[open] { margin-bottom: 0; }
|
||||
.comments-details > summary { font-size: 15px; color: #745fb5; padding: 24px 0; white-space: nowrap; cursor: pointer; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .comments-details > summary { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .comments-details > summary { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .comments-details > summary { font-size: 16px; } }
|
||||
.comments-details > summary:hover, .comments-details > summary:hover > .suffix, .comments-details > summary:focus, .comments-details > summary:focus > .suffix { color: #673d85; }
|
||||
.comments-details > summary:hover > .fauxlink, .comments-details > summary:focus > .fauxlink { border-bottom: solid 1px #673d85; }
|
||||
.comments-details > summary > .count { font-weight: bold; }
|
||||
.comments-details > summary > .count::before { display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(116%2C95%2C181)%22%20d%3D%22M391.553%2064H57.607C53.13%2064%2048%2067.745%2048%2072.16v214.216c0%204.413%205.13%208.624%209.607%208.624H115v88.894L205.128%20295h186.425c4.477%200%207.447-4.21%207.447-8.624V72.16c0-4.415-2.97-8.16-7.447-8.16z%22%2F%3E%3Cpath%20fill%3D%22rgb(116%2C95%2C181)%22%20d%3D%22M456.396%20127H424v166.57c0%2015.987-6.915%2026.43-25.152%2026.43H218.096l-38.905%2039h129.69L399%20448v-89h57.396c4.478%200%207.604-4.262%207.604-8.682V136.103c0-4.414-3.126-9.103-7.604-9.103z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; content: ''; vertical-align: middle; color: #745fb5; margin: 0 8px; }
|
||||
.comments-details > summary > .suffix { color: #667788; }
|
||||
.comments-details > summary > .fauxlink { margin-left: 4px; border-bottom: solid 1px rgba(116, 95, 181, 0.25); }
|
||||
|
||||
/* Disqus */
|
||||
.comments-section { display: flex; }
|
||||
@media (max-width: 768px) { .comments-section > .comments { flex: 1 0 100%; width: 100%; } }
|
||||
@media (min-width: 769px) { .comments-section > .comments { flex: 0 1 66%; min-width: 300px; } }
|
||||
|
||||
/* h2 section */
|
||||
/* Hide the first h2 heading */
|
||||
.h2-section { /* Hide anchors until mouseover */ }
|
||||
.h2-section:first-child:not(.-no-hide) > h2 { display: none; }
|
||||
@media (min-width: 481px) { .h2-section + .h2-section { margin-top: 48px; } }
|
||||
.h2-section > .anchor { opacity: 0; }
|
||||
.h2-section:hover > .anchor { opacity: 1; }
|
||||
|
||||
/* H3 section */
|
||||
.h3-section > .body { /* Collapse/flush */ /* Border radius */ }
|
||||
.h3-section > .body > pre { margin: 0; padding: 16px; }
|
||||
@media (max-width: 768px) { .h3-section > .body { overflow-x: auto; } }
|
||||
.h3-section > .body { background: white; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); }
|
||||
@media (max-width: 480px) { .h3-section > .body { margin: 0 -16px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); } }
|
||||
@media (min-width: 481px) { .h3-section > .body { border-radius: 2px; }
|
||||
.h3-section > .body > :first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; }
|
||||
.h3-section > .body > :last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } }
|
||||
|
||||
/* Heading */
|
||||
.h3-section > h3 { margin-top: 8px; margin-bottom: 16px; white-space: nowrap; overflow: hidden; }
|
||||
@media (max-width: 768px) { .h3-section > h3 { margin-top: 0; } }
|
||||
.h3-section > h3::after { margin-left: 24px; content: ''; display: inline-block; vertical-align: middle; width: 100%; height: 1px; background: linear-gradient(to right, rgba(116, 95, 181, 0.2), transparent 80%); }
|
||||
|
||||
/* Children */
|
||||
.h3-section > .body { /* Lists */ /* Paragraphs */ /* Headings in between bodies */ /* Description paragraphs */ }
|
||||
.h3-section > .body > ul { margin: 0; padding: 0; list-style-type: none; }
|
||||
.h3-section > .body > ul > li { padding: 8px; padding-left: 36px; position: relative; }
|
||||
.h3-section > .body > ul > li > p { margin: 0; padding: 0; }
|
||||
.h3-section > .body > ul > li::before { content: ''; position: absolute; display: inline-block; width: 4px; height: 4px; background: #667788; border-radius: 50%; left: 16px; top: 18px; }
|
||||
.h3-section > .body > ul > li + li { border-top: solid 1px rgba(102, 119, 136, 0.05); }
|
||||
.h3-section > .body > p { padding: 16px; margin: 0; }
|
||||
.h3-section > .body > h4 { font-size: 11px; margin: 0; padding: 4px 16px; font-weight: normal; background: #f8f9fa; color: #667788; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .h3-section > .body > h4 { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .h3-section > .body > h4 { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .h3-section > .body > h4 { font-size: 12px; } }
|
||||
.h3-section > .body > h4 + * { border-top: solid 1px rgba(102, 119, 136, 0.05); }
|
||||
.h3-section > .body > pre ~ p, .h3-section > .body > ul ~ p, .h3-section > .body > iframe ~ p, .h3-section > .body > table ~ p { background: #f8f9fa; color: #667788; /* Links */ }
|
||||
.h3-section > .body > pre ~ p a, .h3-section > .body > pre ~ p a:visited, .h3-section > .body > ul ~ p a, .h3-section > .body > ul ~ p a:visited, .h3-section > .body > iframe ~ p a, .h3-section > .body > iframe ~ p a:visited, .h3-section > .body > table ~ p a, .h3-section > .body > table ~ p a:visited { color: #345; text-decoration: none; border-bottom: solid 1px rgba(102, 119, 136, 0.05); }
|
||||
.h3-section > .body > pre ~ p a:hover, .h3-section > .body > ul ~ p a:hover, .h3-section > .body > iframe ~ p a:hover, .h3-section > .body > table ~ p a:hover { color: #26648e; }
|
||||
.h3-section > .body > *:not(:first-child) { border-top: solid 1px rgba(102, 119, 136, 0.05); }
|
||||
.h3-section > .body > p + p, .h3-section > .body > p + p:not(:first-child) { margin-top: -1.5em; border-top: 0; }
|
||||
|
||||
/* Variant: Prime */
|
||||
@media (min-width: 481px) { .h3-section.-prime > .body { border-radius: 2px; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3), 0 8px 12px rgba(58, 193, 203, 0.1); } }
|
||||
|
||||
/* Variant: Also see :\ */
|
||||
ul.-also-see.-also-see.-also-see { display: flex; flex-wrap: wrap; background: #f8f9fa; }
|
||||
ul.-also-see.-also-see.-also-see > li { flex: 1 0 20%; padding: 24px; border-top: solid 1px rgba(102, 119, 136, 0.2); }
|
||||
ul.-also-see.-also-see.-also-see > li + li { border-left: solid 1px rgba(102, 119, 136, 0.2); }
|
||||
ul.-also-see.-also-see.-also-see, ul.-also-see.-also-see.-also-see > li { list-style-type: none; }
|
||||
ul.-also-see.-also-see.-also-see > li::before { display: none; }
|
||||
ul.-also-see.-also-see.-also-see > li > a { font-size: 15px; display: block; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { ul.-also-see.-also-see.-also-see > li > a { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { ul.-also-see.-also-see.-also-see > li > a { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { ul.-also-see.-also-see.-also-see > li > a { font-size: 16px; } }
|
||||
ul.-also-see.-also-see.-also-see > li > em { font-size: 11px; display: block; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { ul.-also-see.-also-see.-also-see > li > em { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { ul.-also-see.-also-see.-also-see > li > em { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { ul.-also-see.-also-see.-also-see > li > em { font-size: 12px; } }
|
||||
|
||||
/* H3 section list: The body that is isotoped. */
|
||||
.h3-section-list { margin-left: -16px; margin-right: -16px; margin-top: 0; margin-bottom: 0; }
|
||||
@media (max-width: 1264px) { .h3-section-list { margin-left: -8px; } }
|
||||
@media (max-width: 1264px) { .h3-section-list { margin-right: -8px; } }
|
||||
.h3-section-list::after { content: ''; display: table; clear: both; zoom: 1; }
|
||||
.h3-section-list > .h3-section { padding: 16px; float: left; width: 100%; }
|
||||
@media (max-width: 1264px) { .h3-section-list > .h3-section { padding: 8px; } }
|
||||
@media (min-width: 769px) { .h3-section-list > .h3-section { padding-top: 0; } }
|
||||
|
||||
/* Two column (default) */
|
||||
@media (min-width: 769px) { .h3-section-list > .h3-section, .h3-section-list.-two-column > .h3-section { width: 50%; } }
|
||||
|
||||
/* One column */
|
||||
.h3-section-list.-one-column > .h3-section { width: 100%; }
|
||||
.h3-section-list.-one-column > .h3-section + .h3-section { margin-top: 16px; }
|
||||
|
||||
/* Three column */
|
||||
@media (min-width: 769px) { .h3-section-list.-three-column > .h3-section { width: 50%; } }
|
||||
@media (min-width: 961px) { .h3-section-list.-three-column > .h3-section { width: 33.33%; } }
|
||||
|
||||
/* Three column, left reference */
|
||||
@media (min-width: 769px) { .h3-section-list.-left-reference > .h3-section { width: 50%; } }
|
||||
@media (min-width: 961px) { .h3-section-list.-left-reference > .h3-section { width: 66.67%; }
|
||||
.h3-section-list.-left-reference > .h3-section:first-child { width: 33.33%; } }
|
||||
|
||||
/* Carbon ads .headline-ad #carbonads span span.carbon-wrap a.carbon-img > img a.carbon-text {description} a.carbon-poweredby {powered by Carbon} */
|
||||
.HeadlineAd { font-size: 11px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .HeadlineAd { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .HeadlineAd { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .HeadlineAd { font-size: 12px; } }
|
||||
.HeadlineAd .carbon-img, .HeadlineAd .carbon-text, .HeadlineAd .carbon-poweredby { text-decoration: none; display: block; }
|
||||
.HeadlineAd .carbon-img { width: 130px; height: 100px; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); }
|
||||
.HeadlineAd .carbon-img > img { border-radius: 3px; background: white; }
|
||||
.HeadlineAd .carbon-img:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3), 0 8px 12px rgba(58, 193, 203, 0.1); }
|
||||
.HeadlineAd .carbon-text, .HeadlineAd .carbon-text:visited { color: #667788; }
|
||||
.HeadlineAd .carbon-poweredby, .HeadlineAd .carbon-poweredby:visited { color: #9eaab6; }
|
||||
.HeadlineAd .carbon-text:hover, .HeadlineAd .carbon-poweredby:hover { color: #745fb5; }
|
||||
.HeadlineAd { display: inline-block; }
|
||||
.HeadlineAd, .HeadlineAd > div > span { min-width: 210px; max-width: 380px; height: 100px; }
|
||||
.HeadlineAd > div > span { display: inline-block; text-align: right; }
|
||||
.HeadlineAd > div > span::after { content: ''; display: table; clear: both; zoom: 1; }
|
||||
.HeadlineAd .carbon-img { float: right; margin-left: 16px; }
|
||||
.HeadlineAd .carbon-text:first-line { font-size: 15px; color: #111; font-weight: 300; margin-bottom: -0.02em; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .HeadlineAd .carbon-text:first-line { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .HeadlineAd .carbon-text:first-line { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .HeadlineAd .carbon-text:first-line { font-size: 16px; } }
|
||||
@media (min-width: 481px) { .HeadlineAd .carbon-poweredby::before { display: block; content: ''; width: 32px; height: 1px; background: rgba(102, 119, 136, 0.2); margin: 8px 146px 8px auto; } }
|
||||
|
||||
.hint-mark { cursor: help; }
|
||||
.hint-mark > i::before { content: '?'; font-size: 11px; font-weight: bold; font-style: normal; }
|
||||
.hint-mark > i { display: inline-block; width: 16px; height: 16px; line-height: 12px; text-align: center; border-radius: 50%; background: rgba(58, 193, 203, 0.3); color: #667788; margin: 0 0.4em; }
|
||||
|
||||
/* Home button inside `search-footer` */
|
||||
.home-button { display: inline-block; box-shadow: inset 0 0 0 1px rgba(102, 119, 136, 0.2); border-radius: 50%; }
|
||||
.home-button, .home-button:visited { color: #667788; }
|
||||
.home-button:hover, .home-button:focus { background-color: #745fb5; color: white; }
|
||||
.home-button > i::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(102%2C119%2C136)%22%20d%3D%22M256%20112L96%20240v208h112V320h96v128h112V240L256%20112zm144%20320h-80V304H192v128h-80V247.69l144-115.2%20144%20115.2V432z%22%2F%3E%3Cpath%20fill%3D%22rgb(102%2C119%2C136)%22%20d%3D%22M256%2064l-96%2076.8V96H96v96l-32%2025.498%2011.51%2011.384L256%2084.49l180.49%20144.393L448%20217.498%20256%2064zm-112%2089.6l-32%2025.6V112h32v41.6z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; height: 48px; line-height: 48px; width: 48px; }
|
||||
.home-button:hover > i::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(255%2C255%2C255)%22%20d%3D%22M256%20112L96%20240v208h112V320h96v128h112V240L256%20112z%22%2F%3E%3Cpath%20fill%3D%22rgb(255%2C255%2C255)%22%20d%3D%22M256%2064l-96%2076.8V96H96v96l-32%2025.498%2011.51%2011.384L256%2084.49l180.49%20144.393L448%20217.498%20256%2064z%22%2F%3E%3C%2Fsvg%3E"); }
|
||||
|
||||
/* A prelude/intro to the article */
|
||||
/* The top-level heading */
|
||||
.main-heading { margin: 0; padding: 0; margin-bottom: 24px; margin-top: 64px; position: relative; }
|
||||
@media (max-width: 768px) { .main-heading { margin-bottom: 8px; margin-top: 32px; } }
|
||||
@media (max-width: 480px) { .main-heading { margin-bottom: 8px; margin-top: 32px; } }
|
||||
.main-heading { margin-top: 0; margin-bottom: 0; }
|
||||
.main-heading > h1 { font-size: 40px; line-height: 1.2; font-weight: 200; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .main-heading > h1 { font-size: calc( 40px + 6 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .main-heading > h1 { font-size: calc( 46px + 3 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .main-heading > h1 { font-size: 49px; } }
|
||||
.main-heading > h1 > em { font-style: normal; color: #9eaab6; }
|
||||
|
||||
.main-heading.-center > h1 { text-align: center; }
|
||||
.main-heading.-center > .adbox { margin-top: 16px; text-align: center; }
|
||||
.main-heading.-center > .adbox > .ad { display: inline-block; }
|
||||
.main-heading.-center > .adbox > .ad.-carbon { margin-top: 16px; }
|
||||
|
||||
/** Add some space in preview mode */
|
||||
.PreviewMode .main-heading { margin-top: 16px; }
|
||||
|
||||
.missing-message.missing-message { text-align: center; margin: 32px 0; display: flex; align-items: center; border-top: solid 1px rgba(102, 119, 136, 0.2); padding-top: 16px; }
|
||||
@media (min-width: 769px) { .missing-message.missing-message { padding-top: 32px; } }
|
||||
.missing-message.missing-message > h3, .missing-message.missing-message > p { margin: 0; padding: 0; }
|
||||
.missing-message.missing-message > h3 { font-size: 15px; font-weight: normal; color: #345; flex: 1 0 auto; text-align: left; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .missing-message.missing-message > h3 { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .missing-message.missing-message > h3 { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .missing-message.missing-message > h3 { font-size: 16px; } }
|
||||
.missing-message.missing-message > h3::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(116%2C95%2C181)%22%20d%3D%22M85%20277.375h259.704L225.002%20397.077%20256%20427l171-171L256%2085l-29.922%2029.924%20118.626%20119.7H85v42.75z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; margin-right: 16px; }
|
||||
.missing-message.missing-message > p { color: #667788; flex: 0 0 auto; }
|
||||
@media (max-width: 480px) { .missing-message.missing-message { flex-wrap: wrap; }
|
||||
.missing-message.missing-message > p { margin-top: 16px; } }
|
||||
|
||||
.notice-box { margin-bottom: 24px; color: #667788; }
|
||||
@media (max-width: 480px) { .notice-box { margin-bottom: 16px; } }
|
||||
.notice-box::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(146%2C160%2C173)%22%20d%3D%22M256%2048C141.2%2048%2048%20141.2%2048%20256s93.2%20208%20208%20208%20208-93.2%20208-208S370.8%2048%20256%2048zm21%20312h-42V235h42v125zm0-166h-42v-42h42v42z%22%2F%3E%3C%2Fsvg%3E") center center/24px 24px no-repeat; height: 24px; width: 24px; margin-right: 8px; }
|
||||
.notice-box > a { text-decoration: none; }
|
||||
|
||||
.page-actions { margin: 0; padding: 0; }
|
||||
.page-actions { height: 32px; }
|
||||
.page-actions > .link.link > a { display: inline-block; height: 32px; line-height: 32px; vertical-align: top; width: auto; }
|
||||
.page-actions > li { margin: 0; padding: 0; list-style-type: none; }
|
||||
.page-actions > li > a, .page-actions > li > a:visited { color: #667788; text-decoration: none; }
|
||||
.page-actions > li > a:hover, .page-actions > li > a:focus { color: #745fb5; }
|
||||
.page-actions > li > a:hover > .text, .page-actions > li > a:focus > .text { color: #745fb5; }
|
||||
.page-actions > li > a > .text { font-size: 11px; display: none; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .page-actions > li > a > .text { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .page-actions > li > a > .text { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .page-actions > li > a > .text { font-size: 12px; } }
|
||||
.page-actions > li > a > .text.-visible { display: inline; }
|
||||
.page-actions + .page-actions { margin-left: 8px; }
|
||||
.page-actions > .facebook > a::before, .page-actions > .twitter > a::before, .page-actions > .github > a::before { content: ''; vertical-align: middle; }
|
||||
.page-actions > .facebook > a::before { display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(51%2C68%2C85)%22%20d%3D%22M426.8%2064H85.2C73.5%2064%2064%2073.5%2064%2085.2v341.6c0%2011.7%209.5%2021.2%2021.2%2021.2H256V296h-45.9v-56H256v-41.4c0-49.6%2034.4-76.6%2078.7-76.6%2021.2%200%2044%201.6%2049.3%202.3v51.8h-35.3c-24.1%200-28.7%2011.4-28.7%2028.2V240h57.4l-7.5%2056H320v152h106.8c11.7%200%2021.2-9.5%2021.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z%22%2F%3E%3C%2Fsvg%3E") center center/16px 16px no-repeat; height: 16px; width: 16px; }
|
||||
.page-actions > .twitter > a::before { display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(51%2C68%2C85)%22%20d%3D%22M492%20109.5c-17.4%207.7-36%2012.9-55.6%2015.3%2020-12%2035.4-31%2042.6-53.6-18.7%2011.1-39.4%2019.2-61.5%2023.5C399.8%2075.8%20374.6%2064%20346.8%2064c-53.5%200-96.8%2043.4-96.8%2096.9%200%207.6.8%2015%202.5%2022.1-80.5-4-151.9-42.6-199.6-101.3-8.3%2014.3-13.1%2031-13.1%2048.7%200%2033.6%2017.2%2063.3%2043.2%2080.7-16-.4-31-4.8-44-12.1v1.2c0%2047%2033.4%2086.1%2077.7%2095-8.1%202.2-16.7%203.4-25.5%203.4-6.2%200-12.3-.6-18.2-1.8%2012.3%2038.5%2048.1%2066.5%2090.5%2067.3-33.1%2026-74.9%2041.5-120.3%2041.5-7.8%200-15.5-.5-23.1-1.4C62.8%20432%20113.7%20448%20168.3%20448%20346.6%20448%20444%20300.3%20444%20172.2c0-4.2-.1-8.4-.3-12.5C462.6%20146%20479%20129%20492%20109.5z%22%2F%3E%3C%2Fsvg%3E") center center/16px 16px no-repeat; height: 16px; width: 16px; }
|
||||
.page-actions > .github > a::before { display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(51%2C68%2C85)%22%20d%3D%22M256%2032C132.3%2032%2032%20134.9%2032%20261.7c0%20101.5%2064.2%20187.5%20153.2%20217.9%201.4.3%202.6.4%203.8.4%208.3%200%2011.5-6.1%2011.5-11.4%200-5.5-.2-19.9-.3-39.1-8.4%201.9-15.9%202.7-22.6%202.7-43.1%200-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1%201.4-14.1h.1c22.5%202%2034.3%2023.8%2034.3%2023.8%2011.2%2019.6%2026.2%2025.1%2039.6%2025.1%2010.5%200%2020-3.4%2025.6-6%202-14.8%207.8-24.9%2014.2-30.7-49.7-5.8-102-25.5-102-113.5%200-25.1%208.7-45.6%2023-61.6-2.3-5.8-10-29.2%202.2-60.8%200%200%201.6-.5%205-.5%208.1%200%2026.4%203.1%2056.6%2024.1%2017.9-5.1%2037-7.6%2056.1-7.7%2019%20.1%2038.2%202.6%2056.1%207.7%2030.2-21%2048.5-24.1%2056.6-24.1%203.4%200%205%20.5%205%20.5%2012.2%2031.6%204.5%2055%202.2%2060.8%2014.3%2016.1%2023%2036.6%2023%2061.6%200%2088.2-52.4%20107.6-102.3%20113.3%208%207.1%2015.2%2021.1%2015.2%2042.5%200%2030.7-.3%2055.5-.3%2063%200%205.4%203.1%2011.5%2011.4%2011.5%201.2%200%202.6-.1%204-.4C415.9%20449.2%20480%20363.1%20480%20261.7%20480%20134.9%20379.7%2032%20256%2032z%22%2F%3E%3C%2Fsvg%3E") center center/16px 16px no-repeat; height: 16px; width: 16px; }
|
||||
.page-actions > .github > a:hover::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(255%2C255%2C255)%22%20d%3D%22M256%2032C132.3%2032%2032%20134.9%2032%20261.7c0%20101.5%2064.2%20187.5%20153.2%20217.9%201.4.3%202.6.4%203.8.4%208.3%200%2011.5-6.1%2011.5-11.4%200-5.5-.2-19.9-.3-39.1-8.4%201.9-15.9%202.7-22.6%202.7-43.1%200-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1%201.4-14.1h.1c22.5%202%2034.3%2023.8%2034.3%2023.8%2011.2%2019.6%2026.2%2025.1%2039.6%2025.1%2010.5%200%2020-3.4%2025.6-6%202-14.8%207.8-24.9%2014.2-30.7-49.7-5.8-102-25.5-102-113.5%200-25.1%208.7-45.6%2023-61.6-2.3-5.8-10-29.2%202.2-60.8%200%200%201.6-.5%205-.5%208.1%200%2026.4%203.1%2056.6%2024.1%2017.9-5.1%2037-7.6%2056.1-7.7%2019%20.1%2038.2%202.6%2056.1%207.7%2030.2-21%2048.5-24.1%2056.6-24.1%203.4%200%205%20.5%205%20.5%2012.2%2031.6%204.5%2055%202.2%2060.8%2014.3%2016.1%2023%2036.6%2023%2061.6%200%2088.2-52.4%20107.6-102.3%20113.3%208%207.1%2015.2%2021.1%2015.2%2042.5%200%2030.7-.3%2055.5-.3%2063%200%205.4%203.1%2011.5%2011.4%2011.5%201.2%200%202.6-.1%204-.4C415.9%20449.2%20480%20363.1%20480%20261.7%20480%20134.9%20379.7%2032%20256%2032z%22%2F%3E%3C%2Fsvg%3E"); }
|
||||
.page-actions > .facebook > a::before, .page-actions > .twitter > a::before { width: 32px; height: 32px; }
|
||||
.page-actions > .github > a::before { position: relative; top: -2px; }
|
||||
.page-actions > .link.-button > a { box-shadow: inset 0 0 0 1px rgba(102, 119, 136, 0.2); border-radius: 2px; padding: 0 16px; margin: 0 8px; transition: all 100ms linear; }
|
||||
.page-actions > .link.-button > a > .text { margin-left: 4px; position: relative; top: -1px; }
|
||||
.page-actions > .link.-button > a:hover, .page-actions > .link.-button > a:focus { background: linear-gradient(5deg, #745fb5, #9066b8); box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); }
|
||||
.page-actions > .link.-button > a:hover, .page-actions > .link.-button > a:hover > .text, .page-actions > .link.-button > a:focus, .page-actions > .link.-button > a:focus > .text { color: white; }
|
||||
@media (max-width: 768px) { .page-actions > .link { margin-left: 16px; } }
|
||||
.page-actions > .link:first-child > a { margin-left: 0; }
|
||||
.page-actions > .link:last-child > a { margin-right: 0; }
|
||||
|
||||
.pages-list { display: flex; flex-wrap: wrap; }
|
||||
.pages-list > .item { flex: 0 0 100%; }
|
||||
.pages-list > .item.article { flex: 0 0 50%; }
|
||||
@media (min-width: 581px) { .pages-list > .item.top-sheet { flex: 0 0 25%; } }
|
||||
|
||||
.pages-list > .article { text-decoration: none; display: block; white-space: nowrap; padding: 4px 0; }
|
||||
.pages-list > .article, .pages-list > .article:visited { color: #92a0ad; }
|
||||
.pages-list > .article > .info > .slug { color: #111; }
|
||||
.pages-list > .article:visited > .info > .slug { color: #345; }
|
||||
.pages-list > .article > .info > .title::before { content: ''; margin: 0 4px; }
|
||||
.pages-list > .article > .info > .title { opacity: 0; }
|
||||
@media (max-width: 768px) { .pages-list > .article > .info > .title { display: none; } }
|
||||
.pages-list > .article:hover, .pages-list > .article:focus { color: #667788; }
|
||||
.pages-list > .article:hover > .info > .title, .pages-list > .article:focus > .info > .title { opacity: 1; color: #745fb5; }
|
||||
|
||||
.pages-list > .category { font-size: 15px; border-bottom: solid 1px rgba(102, 119, 136, 0.2); margin: 16px 0; padding: 0 0 16px 0; font-weight: normal; color: #745fb5; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .pages-list > .category { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .pages-list > .category { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .pages-list > .category { font-size: 16px; } }
|
||||
|
||||
/* content: ''; Spacer before footer */
|
||||
.pre-footer { padding: 32px; padding-top: 24px; padding-bottom: 48px; text-align: center; }
|
||||
.pre-footer > .icon::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(102%2C119%2C136)%22%20d%3D%22M302.7%2064L143%20288h95.8l-29.5%20160L369%20224h-95.8l29.5-160z%22%2F%3E%3C%2Fsvg%3E") center center/32px 32px no-repeat; height: 32px; width: 32px; opacity: 0.25; }
|
||||
|
||||
/* Related posts */
|
||||
.related-posts-area { padding-top: 16px; padding-bottom: 16px; background: #f8f9fa; }
|
||||
.related-posts-area > .container { padding-left: 16px; padding-right: 16px; max-width: 1232px; margin: 0 auto; }
|
||||
@media (max-width: 480px) { .related-posts-area > .container { padding-left: 16px; } }
|
||||
@media (max-width: 480px) { .related-posts-area > .container { padding-right: 16px; } }
|
||||
@media (min-width: 481px) { .related-posts-area { padding-top: 64px; padding-bottom: 64px; } }
|
||||
|
||||
/* Callout */
|
||||
.related-posts-callout { display: flex; text-decoration: none; background: linear-gradient(5deg, #745fb5, #9066b8); padding: 32px; align-items: center; justify-content: center; color: white; border-radius: 2px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
|
||||
.related-posts-callout, .related-posts-callout:visited { color: white; }
|
||||
.related-posts-callout:hover, .related-posts-callout:focus { background: #5f4aa1; }
|
||||
.related-posts-callout > .text { margin: auto; text-align: center; }
|
||||
.related-posts-callout > .text > .icon { margin-bottom: 16px; display: block; }
|
||||
.related-posts-callout > .text > .icon::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(183%2C150%2C207)%22%20d%3D%22M352%20128.4L319.7%2096%20160%20256l159.7%20160%2032.3-32.4L224.7%20256z%22%2F%3E%3C%2Fsvg%3E") center center/48px 48px no-repeat; height: 48px; width: 48px; height: 64px; width: 64px; border: solid 2px #b796cf; border-radius: 50%; text-indent: -2px; text-shadow: none; }
|
||||
.related-posts-callout > .text > .description { font-size: 15px; line-height: 1.4; font-weight: 300; display: block; margin-bottom: 16px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .related-posts-callout > .text > .description { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .related-posts-callout > .text > .description { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .related-posts-callout > .text > .description { font-size: 16px; } }
|
||||
|
||||
/* Group */
|
||||
.related-posts-group > h3 { font-size: 15px; color: #745fb5; margin: 0; padding: 0; margin-bottom: 16px; padding-bottom: 16px; border-bottom: solid 1px rgba(102, 119, 136, 0.2); line-height: 1.2; font-weight: 400; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .related-posts-group > h3 { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .related-posts-group > h3 { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .related-posts-group > h3 { font-size: 16px; } }
|
||||
|
||||
/* Section has callout and group */
|
||||
.related-posts-section { display: flex; margin-left: -16px; margin-right: -16px; }
|
||||
@media (max-width: 1264px) { .related-posts-section { margin-left: -8px; } }
|
||||
@media (max-width: 1264px) { .related-posts-section { margin-right: -8px; } }
|
||||
.related-posts-section > .callout, .related-posts-section > .group { margin: 0; margin-left: 16px; margin-right: 16px; }
|
||||
@media (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-left: 8px; } }
|
||||
@media (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-right: 8px; } }
|
||||
.related-posts-section > .callout { flex: 1 1 33%; }
|
||||
.related-posts-section > .group { flex: 1 1 50%; }
|
||||
.related-posts-section > .callout { display: flex; }
|
||||
.related-posts-section > .callout > * { flex: 1 0 100%; }
|
||||
@media (max-width: 480px) { .related-posts-section { flex-wrap: wrap; }
|
||||
.related-posts-section > .callout, .related-posts-section > .group { margin-top: 16px; margin-bottom: 16px; flex: 1 1 100%; } }
|
||||
@media (max-width: 480px) and (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-top: 8px; } }
|
||||
@media (max-width: 480px) and (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-bottom: 8px; } }
|
||||
|
||||
@media (min-width: 481px) and (max-width: 768px) { .related-posts-section { flex-wrap: wrap; }
|
||||
.related-posts-section > .callout, .related-posts-section > .group { margin-top: 16px; margin-bottom: 16px; flex: 1 1 100%; } }
|
||||
|
||||
@media (min-width: 481px) and (max-width: 768px) and (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-top: 8px; } }
|
||||
@media (min-width: 481px) and (max-width: 768px) and (max-width: 1264px) { .related-posts-section > .callout, .related-posts-section > .group { margin-bottom: 8px; } }
|
||||
@media (min-width: 481px) and (max-width: 768px) { .related-posts-section > .group { flex: 1 1 40%; } }
|
||||
|
||||
.related-post-list, .related-post-list > li { margin: 0; padding: 0; list-style-type: none; }
|
||||
.related-post-list { display: flex; margin: -4px; flex-wrap: wrap; }
|
||||
@media (max-width: 768px) { .related-post-list { flex-wrap: wrap; } }
|
||||
.related-post-list > .item { flex: 1 1 auto; margin: 4px; }
|
||||
@media (min-width: 481px) { .related-post-list > .item { flex: 1 1 40%; } }
|
||||
|
||||
.related-post-item { display: flex; text-align: left; line-height: 1.4; }
|
||||
.related-post-item > a { flex: 1 1 100%; display: block; border-radius: 2px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); padding: 16px; text-decoration: none; }
|
||||
.related-post-item > a, .related-post-item > a:visited { background: white; color: #667788; }
|
||||
.related-post-item > a > strong, .related-post-item > a:visited > strong { color: #745fb5; }
|
||||
.related-post-item > a:hover, .related-post-item > a:focus, .related-post-item > a:visited:hover, .related-post-item > a:visited:focus { color: #745fb5; }
|
||||
.related-post-item > a:hover > strong, .related-post-item > a:focus > strong, .related-post-item > a:visited:hover > strong, .related-post-item > a:visited:focus > strong { color: #4f3d85; }
|
||||
.related-post-item:first-of-type > a, .related-post-item:first-of-type > a:visited { background: #745fb5; color: rgba(255, 255, 255, 0.5); }
|
||||
.related-post-item:first-of-type > a > strong, .related-post-item:first-of-type > a:visited > strong { color: white; }
|
||||
.related-post-item:first-of-type > a:hover, .related-post-item:first-of-type > a:focus, .related-post-item:first-of-type > a:visited:hover, .related-post-item:first-of-type > a:visited:focus { color: white; }
|
||||
.related-post-item:first-of-type > a:hover > strong, .related-post-item:first-of-type > a:focus > strong, .related-post-item:first-of-type > a:visited:hover > strong, .related-post-item:first-of-type > a:visited:focus > strong { color: white; }
|
||||
.related-post-item:first-of-type > a:hover, .related-post-item:first-of-type > a:focus, .related-post-item:first-of-type > a:visited:hover, .related-post-item:first-of-type > a:visited:focus { background: #5f4aa1; }
|
||||
@media (min-width: 481px) { .related-post-item > a > strong, .related-post-item > a > span { display: block; } }
|
||||
.related-post-item > a > strong { font-size: 15px; font-weight: normal; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .related-post-item > a > strong { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .related-post-item > a > strong { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .related-post-item > a > strong { font-size: 16px; } }
|
||||
.related-post-item > a > span { font-size: 11px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .related-post-item > a > span { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .related-post-item > a > span { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .related-post-item > a > span { font-size: 12px; } }
|
||||
|
||||
.search-box { background: white; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); display: flex; height: 64px; align-items: center; cursor: text; }
|
||||
.search-box > input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 17px; padding: 16px; height: 64px; background: transparent; border: 0; flex: 1 1 auto; padding-left: 0; font-weight: bold; color: #111; min-width: 48px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .search-box > input { font-size: calc( 17px + 2 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .search-box > input { font-size: calc( 19px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .search-box > input { font-size: 19px; } }
|
||||
.search-box > input::placeholder { font-weight: normal; color: #667788; }
|
||||
.search-box > input:focus { outline: 0; }
|
||||
.search-box > .prefix { font-size: 13px; display: block; color: rgba(102, 119, 136, 0.5); font-weight: 400; user-select: none; line-height: 1.5em; padding: 2px 8px; border-radius: 3px; background: rgba(241, 243, 245, 0.5); margin: 0 0 0 16px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.25); }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .search-box > .prefix { font-size: calc( 13px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .search-box > .prefix { font-size: calc( 14px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .search-box > .prefix { font-size: 14px; } }
|
||||
.search-box > .sep { color: rgba(102, 119, 136, 0.5); font-size: 17px; margin: 0 8px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .search-box > .sep { font-size: calc( 17px + 2 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .search-box > .sep { font-size: calc( 19px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .search-box > .sep { font-size: 19px; } }
|
||||
@media (max-width: 768px) { .search-box > .prefix, .search-box > .sep { display: none; }
|
||||
.search-box > input { padding-left: 16px; } }
|
||||
.search-box::before { content: ''; display: inline-block; vertical-align: middle; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22rgb(17%2C17%2C17)%22%20d%3D%22M337.51%20305.372h-17.502l-6.57-5.486c20.79-25.232%2033.92-57.054%2033.92-93.257C347.36%20127.63%20283.897%2064%20205.136%2064%20127.452%2064%2064%20127.632%2064%20206.63s63.452%20142.627%20142.225%20142.627c35.01%200%2067.83-13.167%2092.99-34.008l6.562%205.486v17.55L415.18%20448%20448%20415.086%20337.51%20305.372zm-131.285%200c-54.702%200-98.463-43.887-98.463-98.743%200-54.86%2043.76-98.743%2098.463-98.743%2054.7%200%2098.462%2043.884%2098.462%2098.742%200%2054.855-43.762%2098.742-98.462%2098.742z%22%2F%3E%3C%2Fsvg%3E") center center/32px 32px no-repeat; height: 32px; width: 32px; background-position: center center; flex: 0 0 64px; width: 64px; order: 2; }
|
||||
|
||||
/* Small */
|
||||
.search-box.-small { height: 48px; }
|
||||
.search-box.-small > input { padding: 8px; height: 48px; padding-left: 0; }
|
||||
.search-box.-small > .prefix, .search-box.-small > .sep, .search-box.-small > input { font-size: 15px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .search-box.-small > .prefix, .search-box.-small > .sep, .search-box.-small > input { font-size: calc( 15px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .search-box.-small > .prefix, .search-box.-small > .sep, .search-box.-small > input { font-size: calc( 16px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .search-box.-small > .prefix, .search-box.-small > .sep, .search-box.-small > input { font-size: 16px; } }
|
||||
.search-box.-small::before { flex: 0 0 48px; width: 48px; line-height: 48px; background-size: 24px 24px; background-position: center center; }
|
||||
|
||||
/* Search bar around the footer */
|
||||
.search-footer { padding-top: 16px; padding-bottom: 16px; background: #f8f9fa; border-top: solid 1px rgba(102, 119, 136, 0.2); border-bottom: solid 1px rgba(102, 119, 136, 0.2); }
|
||||
.search-footer > .container { padding-left: 16px; padding-right: 16px; max-width: 1232px; margin: 0 auto; }
|
||||
@media (max-width: 480px) { .search-footer > .container { padding-left: 16px; } }
|
||||
@media (max-width: 480px) { .search-footer > .container { padding-right: 16px; } }
|
||||
|
||||
.search-footer-section { display: flex; }
|
||||
.search-footer-section > .search { flex: 0 1 640px; }
|
||||
.search-footer-section > .links { padding-left: 16px; flex: 0 1 auto; margin-left: auto; }
|
||||
@media (max-width: 480px) { .search-footer-section > .links { padding-left: 16px; } }
|
||||
|
||||
.SideAd { font-size: 11px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .SideAd { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .SideAd { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .SideAd { font-size: 12px; } }
|
||||
.SideAd .carbon-img, .SideAd .carbon-text, .SideAd .carbon-poweredby { text-decoration: none; display: block; }
|
||||
.SideAd .carbon-img { width: 130px; height: 100px; box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); }
|
||||
.SideAd .carbon-img > img { border-radius: 3px; background: white; }
|
||||
.SideAd .carbon-img:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3), 0 8px 12px rgba(58, 193, 203, 0.1); }
|
||||
.SideAd .carbon-text, .SideAd .carbon-text:visited { color: #667788; }
|
||||
.SideAd .carbon-poweredby, .SideAd .carbon-poweredby:visited { color: #9eaab6; }
|
||||
.SideAd .carbon-text:hover, .SideAd .carbon-poweredby:hover { color: #745fb5; }
|
||||
@media (min-width: 961px) { .SideAd { position: absolute; right: 32px; top: 80px; width: 130px; text-align: left; }
|
||||
.SideAd .carbon-img { margin-bottom: 16px; } }
|
||||
.SideAd .carbon-text:first-line { color: #111; font-weight: bold; }
|
||||
.SideAd .carbon-poweredby::before { display: block; content: ''; width: 32px; height: 1px; background: rgba(102, 119, 136, 0.2); margin: 12px 0; }
|
||||
@media (max-width: 960px) { .SideAd { margin: 16px auto; max-width: 300px; }
|
||||
.SideAd::after { content: ''; display: table; clear: both; zoom: 1; }
|
||||
.SideAd .carbon-img { float: left; margin-right: 16px; } }
|
||||
|
||||
.site-header { margin: 32px 0; }
|
||||
.site-header > p { margin: 0; padding: 0; text-align: center; color: #667788; }
|
||||
.site-header > p > a { text-decoration: none; }
|
||||
.site-header > h1 { font-size: 40px; line-height: 1.2; margin: 0; padding: 0; color: #111; font-weight: 200; text-align: center; margin-bottom: 16px; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .site-header > h1 { font-size: calc( 40px + 6 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .site-header > h1 { font-size: calc( 46px + 3 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .site-header > h1 { font-size: 49px; } }
|
||||
.site-header > .search { margin-top: 32px; }
|
||||
.site-header > .action { margin-top: 32px; }
|
||||
.site-header > .adbox { margin: 16px auto; }
|
||||
@media (max-width: 480px) { .site-header > .adbox { margin-left: -16px; margin-right: -16px; } }
|
||||
|
||||
.top-nav, .top-nav > .container { height: 64px; line-height: 64px; text-align: center; position: relative; }
|
||||
@media (max-width: 480px) { .top-nav > .container { height: 32px; line-height: 32px; margin-top: 8px; }
|
||||
.top-nav { height: 48px; padding: 8px 0; border-bottom: solid 1px rgba(102, 119, 136, 0.2); margin-bottom: 8px; } }
|
||||
.top-nav > .container { padding-left: 16px; padding-right: 16px; max-width: 1232px; margin: 0 auto; }
|
||||
@media (max-width: 480px) { .top-nav > .container { padding-left: 16px; } }
|
||||
@media (max-width: 480px) { .top-nav > .container { padding-right: 16px; } }
|
||||
|
||||
.top-nav > .container { display: flex; align-items: center; position: relative; }
|
||||
.top-nav > .container > .left { flex: 0 0 auto; line-height: 32px; }
|
||||
.top-nav > .container > .brand { flex: 1 1 auto; }
|
||||
.top-nav > .container > .actions { flex: 0 0 auto; display: flex; }
|
||||
.top-nav > .container > .brand { font-size: 11px; display: inline-block; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
|
||||
@media (min-width: 480px) and (max-width: 768px) { .top-nav > .container > .brand { font-size: calc( 11px + 1 * ( ( 100vw - 480px) / 288 ) ); } }
|
||||
@media (min-width: 768px) and (max-width: 1280px) { .top-nav > .container > .brand { font-size: calc( 12px + 0 * ( ( 100vw - 768px) / 512 ) ); } }
|
||||
@media (min-width: 1280px) { .top-nav > .container > .brand { font-size: 12px; } }
|
||||
.top-nav > .container > .brand, .top-nav > .container > .brand:visited { color: #345; }
|
||||
.top-nav > .container > .brand:hover { color: #745fb5; }
|
||||
@media (max-width: 480px) { .top-nav > .container > .brand { display: none; }
|
||||
.top-nav > .container > .actions { margin-left: auto; } }
|
||||
@media (min-width: 481px) { .top-nav > .container > .actions { position: absolute; right: 16px; top: 16px; } }
|
||||
@media (min-width: 481px) and (max-width: 480px) { .top-nav > .container > .actions { right: 16px; } }
|
||||
@media (min-width: 481px) { .top-nav > .container > .left { position: absolute; left: 16px; top: 16px; } }
|
||||
@media (min-width: 481px) and (max-width: 480px) { .top-nav > .container > .left { left: 16px; } }
|
||||
|
||||
@media (min-width: 1232px) { .top-nav > .container > .left > .home { position: relative; left: -16px; } }
|
||||
|
||||
.top-sheet.top-sheet { padding: 4px; text-decoration: none; }
|
||||
.top-sheet.top-sheet > .info { display: block; background: #745fb5; color: white; text-align: left; padding: 16px; width: auto; border-radius: 3px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); text-shadow: 0 1px 1px rgba(51, 68, 85, 0.3); white-space: nowrap; }
|
||||
.top-sheet.top-sheet:hover > .info, .top-sheet.top-sheet:focus > .info { box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 1) > .info { background: linear-gradient(15deg, #745fb5, #9a6dbb); }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 1):hover > .info, .top-sheet.top-sheet:nth-of-type(3n + 1):focus > .info { background: #5f4aa1; }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 2) > .info { background: linear-gradient(15deg, #667788, #6f8793); }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 2):hover > .info, .top-sheet.top-sheet:nth-of-type(3n + 2):focus > .info { background: #556371; }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 3) > .info { background: linear-gradient(15deg, #14af83, #15b89a); }
|
||||
.top-sheet.top-sheet:nth-of-type(3n + 3):hover > .info, .top-sheet.top-sheet:nth-of-type(3n + 3):focus > .info { background: #108b68; }
|
||||
.top-sheet.top-sheet > .info > .title { display: none; }
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
|||
.site-header, .social-list, .about-the-site,
|
||||
#see-also, #see-also+ul {
|
||||
display: none;
|
||||
}
|
||||
/*.post-headline.-cheatsheet .prelude span:before {
|
||||
content: 'cheatsheet for'
|
||||
}*/
|
||||
.post-list {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.post-item {
|
||||
max-width: 100%;
|
||||
}
|
||||
.post-headline.-cheatsheet .prelude {
|
||||
max-width: 300px;
|
||||
}
|
||||
.post-headline, p.prelude {
|
||||
margin-top: 0;
|
||||
}
|
||||
.post-headline.-cheatsheet .prelude {
|
||||
font-size: 0.6em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.post-headline {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.post-headline.-cheatsheet .prelude span {
|
||||
padding: 0.75em 20px;
|
||||
border-bottom: solid 1.5px #111;
|
||||
}
|
||||
.post-headline.-cheatsheet h1 {
|
||||
font-size: 1.75em;
|
||||
text-shadow: none;
|
||||
}
|
||||
pre {
|
||||
border-top: solid 1px #ddd;
|
||||
border-bottom: solid 1px #ddd;
|
||||
background: none;
|
||||
}
|
||||
h3 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
pre {
|
||||
margin-top: 1.1em;
|
||||
margin-bottom: 1.1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
(function () {
|
||||
var tags = document.querySelectorAll('h1,h2,h3,h4,h5,h6,li,p,span');
|
||||
|
||||
for (var i=0, len=tags.length; i<len; i++) {
|
||||
var tag = tags[i];
|
||||
if ((~tag.innerHTML.indexOf('>') ||
|
||||
(!tag.innerHTML.match(/https?:\/\//))))
|
||||
continue;
|
||||
tag.innerHTML = tag.innerHTML.replace(/https?:\/\/[^ ]*/g, function (url) {
|
||||
url = url.replace(/[\.\),!]*$/, '');
|
||||
var label = url;
|
||||
label = label.replace(/^https?:\/\//, '')
|
||||
.replace(/\/$/, '');
|
||||
return "<a href='"+url+"'>"+label+"</a>";
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
/* unorphan */
|
||||
(function () {
|
||||
var els = document.querySelectorAll('h1 a, h1, h2, p.brief-intro, .pull-quote');
|
||||
for (var i = 0, len = els.length; i < len; i++) {
|
||||
var el = els[i];
|
||||
var last = el.lastChild;
|
||||
|
||||
if (last && last.nodeType === 3) {
|
||||
console.log('=>', last.nodeValue, last.nodeValue.replace(/\s+([^\s]+\s*)$/g, '\xA0$1'));
|
||||
last.nodeValue = last.nodeValue.replace(/\s+([^\s]+\s*)$/g, '\xA0$1');
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/* loaded */
|
||||
document.documentElement.className += ' loaded';
|
||||
|
||||
/* hljs */
|
||||
(function () {
|
||||
var codes = document.querySelectorAll('pre > code');
|
||||
for (var i = 0, len = codes.length; i < len; i++) {
|
||||
var block = codes[i];
|
||||
hljs.highlightBlock(block);
|
||||
}
|
||||
})();
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
/*
|
||||
* pages list
|
||||
*/
|
||||
|
||||
.pages-list {
|
||||
font-size: 0.9em;
|
||||
max-width: 800px;
|
||||
margin: 60px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pages-list a {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
text-align: left;
|
||||
float: left;
|
||||
width: 44%;
|
||||
margin: 0 3%;
|
||||
box-shadow: none;
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
.pages-list a .title,
|
||||
.pages-list a .date {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pages-list a .title {
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pages-list a .date {
|
||||
color: #aaa;
|
||||
font-size: 0.9em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pages-list a:hover .title,
|
||||
.pages-list a:focus .title {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
/*
|
||||
* post headline
|
||||
*/
|
||||
|
||||
.post-headline.-cheatsheet .prelude {
|
||||
color: #111;
|
||||
font-size: 0.85em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-headline.-cheatsheet .prelude span {
|
||||
border-bottom: solid 3px #111;
|
||||
padding: 1.5em 20px;
|
||||
}
|
||||
|
||||
.post-headline.-cheatsheet .prelude span:before {
|
||||
content: 'Cheatsheet for';
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.post-headline.-cheatsheet .prelude {
|
||||
max-width: 230px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.post-headline.-cheatsheet .prelude span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.post-headline.-cheatsheet h1 {
|
||||
color: #111;
|
||||
font-size: 3.5em;
|
||||
text-shadow:
|
||||
2px 2px 0 white,
|
||||
3px 3px 0 #ddd;
|
||||
}
|
||||
|
||||
/*
|
||||
* about the site
|
||||
*/
|
||||
|
||||
.about-the-site {
|
||||
margin-top: 8em;
|
||||
}
|
||||
|
||||
.about-the-site .back {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* markdown
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* grey code
|
||||
*/
|
||||
|
||||
.greycode td:first-child code,
|
||||
.greycode th:first-child code {
|
||||
background: white;
|
||||
padding: 6px 8px 5px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.greycode td:first-child code + em,
|
||||
.greycode th:first-child code + em {
|
||||
color: #808890;
|
||||
font-size: 0.9em;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.greycode a {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
table.greycode {
|
||||
background: #fcfcfc;
|
||||
border-radius: 4px;
|
||||
border-top: 0;
|
||||
border-bottom: solid 1px #c7d7ee;
|
||||
}
|
||||
|
||||
table.greycode:not(.wide) {
|
||||
width: calc(620px + 100px);
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
table.greycode thead:first-child > tr:first-child > th,
|
||||
table.greycode thead:first-child > tr:first-child > td,
|
||||
table.greycode tbody:first-child > tr:first-child > th,
|
||||
table.greycode tbody:first-child > tr:first-child > td,
|
||||
table.greycode.no-head thead:nth-child(2) > tr:first-child > th,
|
||||
table.greycode.no-head thead:nth-child(2) > tr:first-child > td,
|
||||
table.greycode.no-head tbody:nth-child(2) > tr:first-child > th,
|
||||
table.greycode.no-head tbody:nth-child(2) > tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.greycode thead > tr:first-child > th,
|
||||
table.greycode thead > tr:first-child > td,
|
||||
table.greycode tbody > tr:first-child > th,
|
||||
table.greycode tbody > tr:first-child > td {
|
||||
border-top: solid 1px #c7d7ee;
|
||||
}
|
||||
|
||||
table.greycode td:first-child,
|
||||
table.greycode th:first-child {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
table.greycode td:last-child,
|
||||
table.greycode th:last-child {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.key-codes code {
|
||||
background: #fdfdff;
|
||||
padding: 3px 8px 3px 8px;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.key-codes code + code {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.key-codes pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Carbon: side
|
||||
*/
|
||||
|
||||
.side-ad {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
width: 130px;
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.side-ad a {
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
background: rgba(255, 255, 255, .01);
|
||||
}
|
||||
|
||||
.side-ad a:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.side-ad .carbon-text {
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.side-ad .carbon-poweredby {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.side-ad {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Cardbon: headline
|
||||
*/
|
||||
|
||||
.headline-ad {
|
||||
width: 300px;
|
||||
min-height: 100px;
|
||||
font-size: .8em;
|
||||
margin: 0 auto 45px auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.headline-ad:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.headline-ad a {
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
background: rgba(255, 255, 255, .01);
|
||||
}
|
||||
|
||||
.headline-ad a:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.headline-ad img {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.headline-ad .carbon-text {
|
||||
}
|
||||
|
||||
.headline-ad .carbon-poweredby {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.social-list.-collapse {
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 40vh;
|
||||
left: 30px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.social-list.-collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,313 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/badges.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Code badges cheatsheet</title>
|
||||
<meta content='Code badges cheatsheet' property='og:title'>
|
||||
<meta content='Code badges cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/badges.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/badges.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Code badges: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Code badges: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Code badges: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/badges">
|
||||
<meta name="og:url" content="https://devhints.io/badges">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Code badges cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/badges.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Code badges: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/badges",
|
||||
"name": "Code badges"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Code badges</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/badges.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Code%20badges.%20https://devhints.io/badges.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<p>Here are some badges for open source projects.</p>
|
||||
|
||||
<h3 id="badge-markdown">Badge markdown</h3>
|
||||
|
||||
<pre><code>Travis
|
||||
[](https://travis-ci.org/rstacruz/REPO)
|
||||
CodeClimate (shields.io)
|
||||
[](https://codeclimate.com/github/rstacruz/REPO
|
||||
"CodeClimate")
|
||||
|
||||
Coveralls (shields.io)
|
||||
[](https://coveralls.io/r/rstacruz/REPO)
|
||||
|
||||
Travis (shields.io)
|
||||
[](https://travis-ci.org/rstacruz/REPO "See test builds")
|
||||
|
||||
NPM (shields.io)
|
||||
[](https://npmjs.org/package/REPO "View this project on npm")
|
||||
|
||||
Ruby gem (shields.io)
|
||||
[](http://rubygems.org/gems/GEMNAME "View this project in Rubygems")
|
||||
</code></pre>
|
||||
|
||||
<h3 id="etc">Etc</h3>
|
||||
|
||||
<pre><code>Gitter chat
|
||||
[](https://gitter.im/REPO/GITTERROOM "Gitter chat")
|
||||
|
||||
Gitter chat (shields.io)
|
||||
[]( https://gitter.im/USER/REPO )
|
||||
|
||||
david-dm
|
||||
[](https://david-dm.org/rstacruz/REPO)
|
||||
|
||||
[](http://opensource.org/licenses/MIT)
|
||||
</code></pre>
|
||||
|
||||
<h3 id="support-stuff">Support stuff</h3>
|
||||
|
||||
<pre><code>Support
|
||||
-------
|
||||
|
||||
__Bugs and requests__: submit them through the project's issues tracker.<br>
|
||||
[]( https://github.com/USER/REPO/issues )
|
||||
|
||||
__Questions__: ask them at StackOverflow with the tag *REPO*.<br>
|
||||
[]( http://stackoverflow.com/questions/tagged/REPO )
|
||||
|
||||
__Chat__: join us at gitter.im.<br>
|
||||
[]( https://gitter.im/USER/REPO )
|
||||
</code></pre>
|
||||
|
||||
<h3 id="frontend-js-installation">Frontend js installation</h3>
|
||||
|
||||
<pre><code>Installation
|
||||
------------
|
||||
|
||||
Add [nprogress.js] and [nprogress.css] to your project.
|
||||
|
||||
```html
|
||||
<script src='nprogress.js'></script>
|
||||
<link rel='stylesheet' href='nprogress.css'/>
|
||||
```
|
||||
|
||||
NProgress is available via [bower] and [npm].
|
||||
|
||||
$ bower install --save nprogress
|
||||
$ npm install --save nprogress
|
||||
|
||||
[bower]: http://bower.io/search/?q=nprogress
|
||||
[npm]: https://www.npmjs.org/package/nprogress
|
||||
</code></pre>
|
||||
|
||||
<h3 id="acknowledgements">Acknowledgements</h3>
|
||||
|
||||
<pre><code>**PROJECTNAME** © 2014+, Rico Sta. Cruz. Released under the [MIT] License.<br>
|
||||
Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
|
||||
|
||||
> [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;
|
||||
> GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
|
||||
> Twitter [@rstacruz](https://twitter.com/rstacruz)
|
||||
|
||||
[MIT]: http://mit-license.org/
|
||||
[contributors]: http://github.com/rstacruz/nprogress/contributors
|
||||
</code></pre>
|
||||
|
||||
<h3 id="links">Links</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Everything: http://shields.io/</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Version badge (gems, npm): http://badge.fury.io/</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Dependencies (ruby): http://gemnasium.com/</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>CI: http://travis-ci.org/</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Code quality (ruby): http://codeclimate.com/</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Test coverage: https://coveralls.io/</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/badges.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Code%20badges.%20https://devhints.io/badges.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,222 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/bookshelf-contrib.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>bookshelf-contrib.Scopes cheatsheet</title>
|
||||
<meta content='bookshelf-contrib.Scopes cheatsheet' property='og:title'>
|
||||
<meta content='bookshelf-contrib.Scopes cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/bookshelf-contrib.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/bookshelf-contrib.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to bookshelf-contrib.Scopes: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to bookshelf-contrib.Scopes: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to bookshelf-contrib.Scopes: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/bookshelf-contrib">
|
||||
<meta name="og:url" content="https://devhints.io/bookshelf-contrib">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "bookshelf-contrib.Scopes cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/bookshelf-contrib.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to bookshelf-contrib.Scopes: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/bookshelf-contrib",
|
||||
"name": "bookshelf-contrib.Scopes"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>bookshelf-contrib.Scopes</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bookshelf-contrib.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20bookshelf-contrib.Scopes.%20https://devhints.io/bookshelf-contrib.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h1 id="bookshelf-contribscopes">bookshelf-contrib.Scopes</h1>
|
||||
<p>#
|
||||
class Books
|
||||
scopes:
|
||||
published: (q) -> q.where(published: true)</p>
|
||||
|
||||
<p>Books.published().fetchAll()</p>
|
||||
|
||||
<h1 id="bookshelf-contribqueryproxy">bookshelf-contrib.QueryProxy</h1>
|
||||
<p>#
|
||||
Books.query().where(published: true)
|
||||
Books.where(published: true)</p>
|
||||
|
||||
<h1 id="bookshelf-contribmigration">bookshelf-contrib.Migration</h1>
|
||||
<p>class Migration
|
||||
up: ->
|
||||
down: -></p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bookshelf-contrib.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20bookshelf-contrib.Scopes.%20https://devhints.io/bookshelf-contrib.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# bookshelf-contrib.Scopes
|
||||
#
|
||||
class Books
|
||||
scopes:
|
||||
published: (q) -> q.where(published: true)
|
||||
|
||||
Books.published().fetchAll()
|
||||
|
||||
|
||||
# bookshelf-contrib.QueryProxy
|
||||
#
|
||||
Books.query().where(published: true)
|
||||
Books.where(published: true)
|
||||
|
||||
# bookshelf-contrib.Migration
|
||||
class Migration
|
||||
up: ->
|
||||
down: ->
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/bookshelf.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Bookshelf.js cheatsheet</title>
|
||||
<meta content='Bookshelf.js cheatsheet' property='og:title'>
|
||||
<meta content='Bookshelf.js cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/bookshelf.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/bookshelf.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Bookshelf.js: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Bookshelf.js: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Bookshelf.js: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/bookshelf">
|
||||
<meta name="og:url" content="https://devhints.io/bookshelf">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Bookshelf.js cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/bookshelf.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Bookshelf.js: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/bookshelf",
|
||||
"name": "Bookshelf.js"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Bookshelf.js</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bookshelf.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Bookshelf.js.%20https://devhints.io/bookshelf.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="model">Model</h2>
|
||||
|
||||
<pre><code class="language-js">Summary = bookshelf.Model.extend({
|
||||
tableName: 'summaries',
|
||||
hasTimestamps: true,
|
||||
hasTimestamps: ['created_at', 'updated_at'],
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<h3 id="associations">Associations</h3>
|
||||
|
||||
<pre><code class="language-js">Summary = bookshelf.Model.extend({
|
||||
book () {
|
||||
return this.belongsTo(Book)
|
||||
},
|
||||
author () {
|
||||
return this.hasOne(Author)
|
||||
}
|
||||
// belongsToMany
|
||||
// hasMany
|
||||
// hasMany().through()
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<h3 id="crud">CRUD</h3>
|
||||
|
||||
<pre><code class="language-js">Book.create({ title: '..' }).save()
|
||||
new Book({ title: '..' }).save()
|
||||
|
||||
new Book({ id: 1 }).fetch()
|
||||
|
||||
Book.where({ id: 1 }).fetch()
|
||||
Book.where('favorite_color', 'red').fetch()
|
||||
Book.where('favorite_color', '<>', 'red').fetch()
|
||||
Book
|
||||
.query((q) => q.orderBy('updated_at')
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bookshelf.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Bookshelf.js.%20https://devhints.io/bookshelf.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/homebrew">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/homebrew">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/homebrew">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/homebrew"</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/browser-sync.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Browsersync cheatsheet</title>
|
||||
<meta content='Browsersync cheatsheet' property='og:title'>
|
||||
<meta content='Browsersync cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/browser-sync.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/browser-sync.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Browsersync: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Browsersync: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Browsersync: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/browser-sync">
|
||||
<meta name="og:url" content="https://devhints.io/browser-sync">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Browsersync cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/browser-sync.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Browsersync: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/browser-sync",
|
||||
"name": "Browsersync"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Browsersync</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/browser-sync.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Browsersync.%20https://devhints.io/browser-sync.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<pre class="terminal"><code>npm i -g browser-sync
|
||||
</code></pre>
|
||||
|
||||
<h3 id="start-a-server">Start a server</h3>
|
||||
|
||||
<pre><code class="language-sh">browser-sync start --server <path> --files='**/*.html, **/*.css'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<pre><code class="language-sh"> --port=N
|
||||
--proxy="http://127.0.0.1:3000"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="reference">Reference</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://browsersync.io">browsersync.io</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/browser-sync.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Browsersync.%20https://devhints.io/browser-sync.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/browserify.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Browserify cheatsheet</title>
|
||||
<meta content='Browserify cheatsheet' property='og:title'>
|
||||
<meta content='Browserify cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/browserify.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/browserify.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Browserify: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Browserify: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Browserify: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/browserify">
|
||||
<meta name="og:url" content="https://devhints.io/browserify">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Browserify cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/browserify.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Browserify: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/browserify",
|
||||
"name": "Browserify"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Browserify</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/browserify.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Browserify.%20https://devhints.io/browserify.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<pre><code>browserify input.js
|
||||
-o output.js
|
||||
-t coffeeify
|
||||
-t [ coffeeify --extension coffee ]
|
||||
|
||||
-u react (--exclude: omit a file)
|
||||
-x react (--external: reference in another bundle)
|
||||
-i react (--ignore: stub a file)
|
||||
-s Myapp (--standalone: generate a UMD bundle)
|
||||
--debug
|
||||
</code></pre>
|
||||
|
||||
<h3 id="programmatic-usage">Programmatic usage</h3>
|
||||
|
||||
<pre><code>browserify = require('browserify')
|
||||
browserify()
|
||||
.add('main.js')
|
||||
.bundle()
|
||||
.transform(coffeeify)
|
||||
.transform({extensions: '.coffee'}, coffeeify)
|
||||
.pipe(process.stdout)
|
||||
|
||||
browserify({})
|
||||
</code></pre>
|
||||
|
||||
<h3 id="tools">Tools</h3>
|
||||
|
||||
<ul>
|
||||
<li>watchify (recompiles on demand)</li>
|
||||
<li>beefy (http server)</li>
|
||||
<li>debowerify</li>
|
||||
<li>es6ify (es6 to es5)</li>
|
||||
</ul>
|
||||
|
||||
<p>Transforms</p>
|
||||
|
||||
<ul>
|
||||
<li>coffeeify</li>
|
||||
<li>ractify</li>
|
||||
<li>reactify</li>
|
||||
<li>brfs</li>
|
||||
<li>cssify</li>
|
||||
<li>https://github.com/substack/node-browserify/wiki/list-of-transforms</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/browserify.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Browserify.%20https://devhints.io/browserify.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/brunch.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Brunch cheatsheet</title>
|
||||
<meta content='Brunch cheatsheet' property='og:title'>
|
||||
<meta content='Brunch cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/brunch.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/brunch.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Brunch: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Brunch: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Brunch: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/brunch">
|
||||
<meta name="og:url" content="https://devhints.io/brunch">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Brunch cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/brunch.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Brunch: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/brunch",
|
||||
"name": "Brunch"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Brunch</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/brunch.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Brunch.%20https://devhints.io/brunch.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="paths">Paths</h2>
|
||||
|
||||
<pre><code>/
|
||||
app/
|
||||
assets/
|
||||
vendor/
|
||||
public/
|
||||
config.coffee
|
||||
</code></pre>
|
||||
|
||||
<h2 id="config">Config</h2>
|
||||
|
||||
<pre><code class="language-js">module.exports = {
|
||||
files: {
|
||||
javascripts: { # or 'stylesheets' or 'templates'
|
||||
order: {
|
||||
before: [ 'normalize.css' ],
|
||||
after: [ 'helpers.css' ],
|
||||
|
||||
joinTo: 'app.js',
|
||||
joinTo: {
|
||||
'js/app.js': /^app/,
|
||||
'js/vendor.js': /^vendor/
|
||||
},
|
||||
pluginHelpers: 'js/vendor.js'
|
||||
}
|
||||
}
|
||||
|
||||
paths: {
|
||||
public: 'public', # where to compile
|
||||
watched: ['app','test','vendor'], # what to monitor
|
||||
}
|
||||
|
||||
modules: {
|
||||
wrapper: 'amd',
|
||||
definition: 'amd',
|
||||
nameCleaner: (path) => path.replace(/^app\//, '')
|
||||
}
|
||||
|
||||
npm: { styles, globals }
|
||||
|
||||
plugins: {
|
||||
sass: { ... }
|
||||
}
|
||||
|
||||
// brunch w --apply testing
|
||||
// BRUNCH_ENV=testing brunch build
|
||||
overrides: {
|
||||
production: {
|
||||
optimize: true,
|
||||
sourceMaps: false,
|
||||
plugins: { autoReload: { enabled: false } }
|
||||
}
|
||||
}
|
||||
|
||||
onCompile: (files, assets) => { ... }
|
||||
</code></pre>
|
||||
|
||||
<h2 id="plugins">Plugins</h2>
|
||||
|
||||
<pre><code>plugins:
|
||||
uglify:
|
||||
mangle: true
|
||||
compress:
|
||||
global_defs:
|
||||
DEBUG: false
|
||||
</code></pre>
|
||||
|
||||
<h2 id="extensions">Extensions</h2>
|
||||
|
||||
<p>Compile to CSS</p>
|
||||
|
||||
<ul>
|
||||
<li>stylus-brunch</li>
|
||||
<li>less-brunch</li>
|
||||
<li>sass-brunch</li>
|
||||
</ul>
|
||||
|
||||
<p>Compile to HTML</p>
|
||||
|
||||
<ul>
|
||||
<li>static-jade-brunch</li>
|
||||
</ul>
|
||||
|
||||
<p>Embedded templates</p>
|
||||
|
||||
<ul>
|
||||
<li>emblem-brunch</li>
|
||||
</ul>
|
||||
|
||||
<p>Etc</p>
|
||||
|
||||
<ul>
|
||||
<li>uglify-js-brunch</li>
|
||||
<li>jshint-brunch</li>
|
||||
<li>imageoptimizer-brunch</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="references">References</h2>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/brunch.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Brunch.%20https://devhints.io/brunch.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,265 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/bundler.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Bundler cheatsheet</title>
|
||||
<meta content='Bundler cheatsheet' property='og:title'>
|
||||
<meta content='Bundler cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/bundler.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/bundler.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Bundler: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Bundler: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Bundler: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/bundler">
|
||||
<meta name="og:url" content="https://devhints.io/bundler">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Ruby' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Bundler cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/bundler.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Bundler: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#ruby",
|
||||
"name": "Ruby"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/bundler",
|
||||
"name": "Bundler"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Bundler</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bundler.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Bundler.%20https://devhints.io/bundler.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="commands">Commands</h3>
|
||||
|
||||
<pre><code>bundle # same as bundle install
|
||||
bundle install # installs gems
|
||||
bundle install -j3 # faster (3 jobs)
|
||||
bundle update # update all gems
|
||||
bundle update --source gemname # update specified gem
|
||||
|
||||
bundle outdated # show outdated gems
|
||||
cd `bundle show rails` # inspect a gem's dir
|
||||
|
||||
bundle gem # new gem skeleton
|
||||
</code></pre>
|
||||
|
||||
<h3 id="gems">Gems</h3>
|
||||
|
||||
<pre><code>gem 'hello'
|
||||
gem 'hello', group: 'development'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="github-support">Github support</h3>
|
||||
|
||||
<pre><code>gem 'hello', github: 'rstacruz/hello'
|
||||
gem 'hello', github: 'rstacruz/hello', 'branch: master'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="grouping">Grouping</h3>
|
||||
|
||||
<pre><code>group :development do
|
||||
gem 'hello'
|
||||
end
|
||||
</code></pre>
|
||||
|
||||
<h3 id="deployment">Deployment</h3>
|
||||
|
||||
<pre><code>$ bundle install --without=test,development --deployment
|
||||
</code></pre>
|
||||
|
||||
<h3 id="local-gem-development">Local gem development</h3>
|
||||
|
||||
<p>In your Gemfile, define a Git source and a branch:</p>
|
||||
|
||||
<pre><code>gem 'hello', github: 'rstacruz/hello', branch: 'master'
|
||||
</code></pre>
|
||||
|
||||
<p>And then:</p>
|
||||
|
||||
<pre><code>$ bundle config --global local.xxx ~/projects/xxx
|
||||
</code></pre>
|
||||
|
||||
<h3 id="rake-gem-tasks">Rake Gem tasks</h3>
|
||||
|
||||
<pre><code># Rakefile
|
||||
require 'bundler/gem_tasks'
|
||||
</code></pre>
|
||||
|
||||
<p>Terminal:</p>
|
||||
|
||||
<pre><code>$ rake release
|
||||
$ rake build
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/bundler.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Bundler.%20https://devhints.io/bundler.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/c_preprocessor.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>C Preprocessor cheatsheet</title>
|
||||
<meta content='C Preprocessor cheatsheet' property='og:title'>
|
||||
<meta content='C Preprocessor cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/c_preprocessor.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/c_preprocessor.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to C Preprocessor: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to C Preprocessor: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to C Preprocessor: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/c_preprocessor">
|
||||
<meta name="og:url" content="https://devhints.io/c_preprocessor">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='C-like' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "C Preprocessor cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/c_preprocessor.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to C Preprocessor: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#c-like",
|
||||
"name": "C-like"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/c_preprocessor",
|
||||
"name": "C Preprocessor"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>C Preprocessor</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/c_preprocessor.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20C%20Preprocessor.%20https://devhints.io/c_preprocessor.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="compiling">Compiling</h3>
|
||||
|
||||
<pre><code>$ cpp -P file > outfile
|
||||
</code></pre>
|
||||
|
||||
<h3 id="includes">Includes</h3>
|
||||
|
||||
<pre><code>#include "file"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="defines">Defines</h3>
|
||||
|
||||
<pre><code>#define FOO
|
||||
#define FOO "hello"
|
||||
|
||||
#undef FOO
|
||||
</code></pre>
|
||||
|
||||
<h3 id="if">If</h3>
|
||||
|
||||
<pre><code>#ifdef DEBUG
|
||||
console.log('hi');
|
||||
#elif defined VERBOSE
|
||||
...
|
||||
#else
|
||||
...
|
||||
#endif
|
||||
</code></pre>
|
||||
|
||||
<h3 id="error">Error</h3>
|
||||
|
||||
<pre><code>#if VERSION == 2.0
|
||||
#error Unsupported
|
||||
#warning Not really supported
|
||||
#endif
|
||||
</code></pre>
|
||||
|
||||
<h3 id="macro">Macro</h3>
|
||||
|
||||
<pre><code>#define DEG(x) ((x) * 57.29)
|
||||
</code></pre>
|
||||
|
||||
<h3 id="token-concat">Token concat</h3>
|
||||
|
||||
<pre><code>#define DST(name) name##_s name##_t
|
||||
DST(object); #=> "object_s object_t;"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="file-and-line">file and line</h3>
|
||||
|
||||
<pre><code>#define LOG(msg) console.log(__FILE__, __LINE__, msg)
|
||||
#=> console.log("file.txt", 3, "hey")
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/c_preprocessor.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20C%20Preprocessor.%20https://devhints.io/c_preprocessor.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,295 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/circle.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>CircleCI cheatsheet</title>
|
||||
<meta content='CircleCI cheatsheet' property='og:title'>
|
||||
<meta content='CircleCI cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/circle.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/circle.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to CircleCI: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to CircleCI: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to CircleCI: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/circle">
|
||||
<meta name="og:url" content="https://devhints.io/circle">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devops' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "CircleCI cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/circle.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to CircleCI: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#devops",
|
||||
"name": "Devops"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/circle",
|
||||
"name": "CircleCI"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>CircleCI</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/circle.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20CircleCI.%20https://devhints.io/circle.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="circleyml">circle.yml</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>machine</strong>: adjusting the VM to your preferences and requirements</li>
|
||||
<li><strong>checkout</strong>: checking out and cloning your git repo</li>
|
||||
<li><strong>dependencies</strong>: setting up your project’s language-specific dependencies</li>
|
||||
<li><strong>database</strong>: preparing the databases for your tests</li>
|
||||
<li><strong>test</strong>: running your tests</li>
|
||||
<li><strong>deployment</strong>: deploying your code to your web servers</li>
|
||||
</ul>
|
||||
|
||||
<p>See: <a href="https://circleci.com/docs/configuration">https://circleci.com/docs/configuration</a></p>
|
||||
|
||||
<h2 id="sample">Sample</h2>
|
||||
|
||||
<pre><code class="language-yml">## Customize the test machine
|
||||
machine:
|
||||
|
||||
timezone:
|
||||
America/Los_Angeles # Set the timezone
|
||||
|
||||
# Version of ruby to use
|
||||
ruby:
|
||||
version:
|
||||
1.8.7-p358-falcon-perf
|
||||
|
||||
# Override /etc/hosts
|
||||
hosts:
|
||||
circlehost: 127.0.0.1
|
||||
dev.mycompany.com: 127.0.0.1
|
||||
|
||||
# Add some environment variables
|
||||
environment:
|
||||
CIRCLE_ENV: test
|
||||
DATABASE_URL: postgres://ubuntu:@127.0.0.1:5432/circle_test
|
||||
|
||||
## Customize checkout
|
||||
checkout:
|
||||
post:
|
||||
- git submodule sync
|
||||
- git submodule update --init # use submodules
|
||||
|
||||
## Customize dependencies
|
||||
dependencies:
|
||||
pre:
|
||||
- npm install coffeescript # install from a different package manager
|
||||
- gem uninstall bundler # use a custom version of bundler
|
||||
- gem install bundler --pre
|
||||
|
||||
override:
|
||||
- bundle install: # note ':' here
|
||||
timeout: 180 # fail if command has no output for 3 minutes
|
||||
|
||||
# we automatically cache and restore many dependencies between
|
||||
# builds. If you need to, you can add custom paths to cache:
|
||||
cache_directories:
|
||||
- "custom_1" # relative to the build directory
|
||||
- "~/custom_2" # relative to the user's home directory
|
||||
|
||||
## Customize database setup
|
||||
database:
|
||||
override:
|
||||
# replace CircleCI's generated database.yml
|
||||
- cp config/database.yml.ci config/database.yml
|
||||
- bundle exec rake db:create db:schema:load
|
||||
|
||||
## Customize test commands
|
||||
test:
|
||||
override:
|
||||
- phpunit test/unit-tests # use PHPunit for testing
|
||||
post:
|
||||
- bundle exec rake jasmine:ci: # add an extra test type
|
||||
environment:
|
||||
RAILS_ENV: test
|
||||
RACK_ENV: test
|
||||
|
||||
## Customize deployment commands
|
||||
deployment:
|
||||
staging:
|
||||
branch: master
|
||||
heroku:
|
||||
appname: foo-bar-123
|
||||
|
||||
## Custom notifications
|
||||
notify:
|
||||
webhooks:
|
||||
# A list of hashes representing hooks. Only the url field is supported.
|
||||
- url: https://someurl.com/hooks/circle
|
||||
</code></pre>
|
||||
|
||||
<p>See: <a href="https://circleci.com/docs/config-sample">https://circleci.com/docs/config-sample</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/circle.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20CircleCI.%20https://devhints.io/circle.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,610 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/command_line.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Command line stuff cheatsheet</title>
|
||||
<meta content='Command line stuff cheatsheet' property='og:title'>
|
||||
<meta content='Command line stuff cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/command_line.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/command_line.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Command line stuff: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Command line stuff: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Command line stuff: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/command_line">
|
||||
<meta name="og:url" content="https://devhints.io/command_line">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Command line stuff cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/command_line.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Command line stuff: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/command_line",
|
||||
"name": "Command line stuff"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Command line stuff</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/command_line.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Command%20line%20stuff.%20https://devhints.io/command_line.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="list-ls">List (ls)</h2>
|
||||
|
||||
<pre><code>ls [options] [paths]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="format">Format</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Switch</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-1</code></td>
|
||||
<td>One entry per line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-l</code></td>
|
||||
<td>Long view</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-o</code></td>
|
||||
<td>Long view (without groups)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-C</code></td>
|
||||
<td>Multicolumn (sorted horizontally)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-x</code></td>
|
||||
<td>Multicolumn (sorted vertically)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-F</code></td>
|
||||
<td>Add / after directories</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-G</code></td>
|
||||
<td>Color</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-R</code></td>
|
||||
<td>Recurse</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-a</code></td>
|
||||
<td>Include hidden (dotfiles)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-A</code></td>
|
||||
<td>Include hidden (but not . and ..)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="sorting">Sorting</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Switch</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-r</code></td>
|
||||
<td>reverse order</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-S</code></td>
|
||||
<td>sort by size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-t</code></td>
|
||||
<td>sort by time modified</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-u</code></td>
|
||||
<td>sort by time accessed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-U</code></td>
|
||||
<td>sort by time created</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-c</code></td>
|
||||
<td>sort by time status was changed</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-h</code></td>
|
||||
<td>Human-readable size (3k)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="tail">Tail</h2>
|
||||
|
||||
<pre><code>tail [-F | -f | -r] [-bN | -cN | -nN] [file ...]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="modes">Modes</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-f</code></td>
|
||||
<td>follow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-F</code></td>
|
||||
<td>follow by filename (accounts for log rotation)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-r</code></td>
|
||||
<td>Reverse order</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="options-1">Options</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-bN</code></td>
|
||||
<td>N*512 bytes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-cN</code></td>
|
||||
<td>N bytes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-nN</code></td>
|
||||
<td>N lines</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>+N</code></td>
|
||||
<td>Start from line N</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="sudo">Sudo</h2>
|
||||
|
||||
<pre><code>sudo [options] <command>
|
||||
</code></pre>
|
||||
|
||||
<h3 id="listing">Listing</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-l</code></td>
|
||||
<td>List allowed commands</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="options-2">Options</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-A</code></td>
|
||||
<td>Use $SUDO_ASKPASS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-b</code></td>
|
||||
<td>Run in background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-E</code></td>
|
||||
<td>Preserve environment</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-H</code></td>
|
||||
<td>use target’s $HOME</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-n</code></td>
|
||||
<td>Don’t prompt for password</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-P</code></td>
|
||||
<td>Preserve group vector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-S</code></td>
|
||||
<td>Read password from stdin</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="file-descriptors">File descriptors</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-C fd</code></td>
|
||||
<td>Close all open file descriptors</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="prompt">Prompt</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-p prompt</code></td>
|
||||
<td>Custom prompt (-p “%p password:”)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="interactive">Interactive</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Switch</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-i [cmd]</code></td>
|
||||
<td>Interactive shell without variables</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-s [cmd]</code></td>
|
||||
<td>Interactive shell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-u user</code></td>
|
||||
<td>run as this user</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-g group</code></td>
|
||||
<td>run as this group</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="timestamp">Timestamp</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-v</code></td>
|
||||
<td>revalidate timestamp for 5 mins</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-k</code></td>
|
||||
<td>invalidate timestamp</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-K</code></td>
|
||||
<td>just like -k</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="wc-word-count">wc (Word count)</h2>
|
||||
|
||||
<pre><code>... | wc [options]
|
||||
</code></pre>
|
||||
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-c</code></td>
|
||||
<td>Bytes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-l</code></td>
|
||||
<td>Lines</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-m</code></td>
|
||||
<td>Characters (incl multi-byte)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-w</code></td>
|
||||
<td>Words</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="search-and-replace-in-all-files">Search-and-replace in all files</h2>
|
||||
|
||||
<pre><code>perl -p -i -e 's/hello/HELLO/g' **/*
|
||||
</code></pre>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="grep">Grep</h2>
|
||||
|
||||
<pre><code>grep [options] [pattern] [file ...]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="options-3">Options</h3>
|
||||
|
||||
<table class="shortcuts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Switch</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-A num</code></td>
|
||||
<td>Print <code>num</code> lines of training context</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-G</code></td>
|
||||
<td>–basic-regexp (default)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-E</code></td>
|
||||
<td>–extended-regexp</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-P</code></td>
|
||||
<td>–perl-regexp</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-f file</code></td>
|
||||
<td>–file (Get patterns for file)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-F</code></td>
|
||||
<td>–fixed-strings</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-h</code></td>
|
||||
<td>–no-filename</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-H</code></td>
|
||||
<td>–with-filename</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-l</code></td>
|
||||
<td>–files-with-matches (just print filenames)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-L</code></td>
|
||||
<td>–files-without-match</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>-r, -R</code></td>
|
||||
<td>–recursive</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-v</code></td>
|
||||
<td>–invert-match</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>-i</code></td>
|
||||
<td>–ignore-case</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="synonyms">Synonyms</h3>
|
||||
|
||||
<pre><code>egrep => grep -E
|
||||
fgrep => grep -F
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/command_line.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Command%20line%20stuff.%20https://devhints.io/command_line.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/commander.js">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/commander.js">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/commander.js">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/commander.js"</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/commander.js.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Commander.js cheatsheet</title>
|
||||
<meta content='Commander.js cheatsheet' property='og:title'>
|
||||
<meta content='Commander.js cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/commander.js.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/commander.js.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Commander.js: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Commander.js: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Commander.js: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/commander.js">
|
||||
<meta name="og:url" content="https://devhints.io/commander.js">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Commander.js cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/commander.js.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Commander.js: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/commander.js",
|
||||
"name": "Commander.js"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Commander.js</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/commander.js.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Commander.js.%20https://devhints.io/commander.js.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="initialize">Initialize</h3>
|
||||
|
||||
<pre><code>var cli = require('commander');
|
||||
</code></pre>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<pre><code>cli
|
||||
.version(require('../package').version)
|
||||
.usage('[options] <command>')
|
||||
.option('-w, --words <n>', 'generate <n> words')
|
||||
.option('-i, --interval <n>', 'interval [1000]', 1000)
|
||||
.option('-s, --symbols', 'include symbols')
|
||||
.parse(process.argv);
|
||||
</code></pre>
|
||||
|
||||
<h3 id="help">Help</h3>
|
||||
|
||||
<pre><code>.on('--help', function() {
|
||||
console.log('');
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<h3 id="commands">Commands</h3>
|
||||
|
||||
<pre><code>cli.outputHelp();
|
||||
cli.args == ["hello"];
|
||||
</code></pre>
|
||||
|
||||
<h3 id="other-useful-things">Other useful things</h3>
|
||||
|
||||
<pre><code>process.exit(0);
|
||||
</code></pre>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/commander.js.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Commander.js.%20https://devhints.io/commander.js.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,230 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/cordova.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Cordova cheatsheet</title>
|
||||
<meta content='Cordova cheatsheet' property='og:title'>
|
||||
<meta content='Cordova cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/cordova.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/cordova.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Cordova: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Cordova: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Cordova: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/cordova">
|
||||
<meta name="og:url" content="https://devhints.io/cordova">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Cordova cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/cordova.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Cordova: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/cordova",
|
||||
"name": "Cordova"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Cordova</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/cordova.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Cordova.%20https://devhints.io/cordova.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<pre><code>cordova plugin ls
|
||||
cordova plugin search facebook
|
||||
cordova plugin add com.phonegap.plugins.facebookconnect
|
||||
|
||||
cordova platform add ios
|
||||
cordova platform ls
|
||||
cordova platform update ios
|
||||
cordova platform check
|
||||
</code></pre>
|
||||
|
||||
<h3 id="some-plugins">Some plugins</h3>
|
||||
|
||||
<p>You’ll likely need these:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/apache/cordova-plugin-console">org.apache.cordova.console</a></li>
|
||||
<li><a href="https://github.com/apache/cordova-plugin-inappbrowser">org.apache.cordova.inappbrowser</a></li>
|
||||
<li><a href="https://github.com/apache/cordova-plugin-statusbar">org.apache.cordova.statusbar</a></li>
|
||||
<li>org.apache.cordova.splashscreen</li>
|
||||
</ul>
|
||||
|
||||
<p>Also:</p>
|
||||
|
||||
<ul>
|
||||
<li>com.phonegap.plugins.facebookconnect</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/cordova.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Cordova.%20https://devhints.io/cordova.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/crypto.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Cryptography cheatsheet</title>
|
||||
<meta content='Cryptography cheatsheet' property='og:title'>
|
||||
<meta content='Cryptography cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/crypto.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/crypto.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Cryptography: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Cryptography: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Cryptography: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/crypto">
|
||||
<meta name="og:url" content="https://devhints.io/crypto">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Cryptography cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/crypto.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Cryptography: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/crypto",
|
||||
"name": "Cryptography"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Cryptography</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/crypto.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Cryptography.%20https://devhints.io/crypto.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<ul>
|
||||
<li>
|
||||
<p><a href="http://en.wikipedia.org/wiki/PBKDF2">PBKDF2</a> - password-based key derivation
|
||||
function</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="http://en.wikipedia.org/wiki/HMAC">HMAC</a> - Hash-based message authentication
|
||||
code</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/crypto.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Cryptography.%20https://devhints.io/crypto.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/css#animation">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/css#animation">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/css#animation">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/css#animation"</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/css#background">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/css#background">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/css#background">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/css#background"</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/css#fonts">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/css#fonts">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/css#fonts">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/css#fonts"</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/css#selectors">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/css#selectors">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/css#selectors">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/css#selectors"</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://devhints.io/datetime">
|
||||
<meta http-equiv="refresh" content="0; url=https://devhints.io/datetime">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="https://devhints.io/datetime">Click here if you are not redirected.</a>
|
||||
<script>location="https://devhints.io/datetime"</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,246 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/deku.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Deku v2 cheatsheet</title>
|
||||
<meta content='Deku v2 cheatsheet' property='og:title'>
|
||||
<meta content='Deku v2 cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/deku.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/deku.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Deku v2: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Deku v2: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Deku v2: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/deku">
|
||||
<meta name="og:url" content="https://devhints.io/deku">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Deku v2 cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/deku.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Deku v2: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/deku",
|
||||
"name": "Deku v2"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Deku v2</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/deku.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Deku%20v2.%20https://devhints.io/deku.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="components">Components</h2>
|
||||
|
||||
<pre><code class="language-js">/** @jsx element */
|
||||
import { element } from 'deku'
|
||||
|
||||
function render ({ props, children, context, path }) {
|
||||
// props = properties object
|
||||
// children = children array
|
||||
// path = path to current component (like 0.1.5.2)
|
||||
// context = common properties in all components
|
||||
return (
|
||||
<div class='App' hidden={props.hidden} color={context.theme.color}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
function onCreate ({ props, dispatch, path }) { ... }
|
||||
function onUpdate ({ props, dispatch, path }) { ... }
|
||||
function onRemove ({ props, dispatch, path }) { ... }
|
||||
// actually { children, props, path, context }
|
||||
|
||||
export default { render, onCreate, onRemove }
|
||||
</code></pre>
|
||||
|
||||
<h2 id="rendering">Rendering</h2>
|
||||
|
||||
<pre><code class="language-js">import { createStore } from 'redux'
|
||||
import { dom, element } from 'deku'
|
||||
|
||||
// Create a Redux store to handle all UI actions and side-effects
|
||||
let store = createStore(reducer)
|
||||
|
||||
// Create a renderer that can turn vnodes into real DOM elements
|
||||
let render = createRenderer(document.body, store.dispatch)
|
||||
|
||||
// Update the page and add redux state to the context
|
||||
render(
|
||||
<MyButton>Hello World!</MyButton>,
|
||||
store.getState()
|
||||
)
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/deku.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Deku%20v2.%20https://devhints.io/deku.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/deku@1.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Deku v1 cheatsheet</title>
|
||||
<meta content='Deku v1 cheatsheet' property='og:title'>
|
||||
<meta content='Deku v1 cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/deku@1.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/deku@1.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Deku v1: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Deku v1: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Deku v1: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/deku@1">
|
||||
<meta name="og:url" content="https://devhints.io/deku@1">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Deku v1 cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/deku@1.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Deku v1: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript-libraries",
|
||||
"name": "JavaScript libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/deku@1",
|
||||
"name": "Deku v1"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Deku v1</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/deku@1.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Deku%20v1.%20https://devhints.io/deku@1.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<p>This is for Deku v1. See <a href="./deku">deku</a> for a more updated cheatsheet.</p>
|
||||
|
||||
<pre><code class="language-js">/** @jsx element */
|
||||
import element from 'virtual-element' // replacement for React.createElement
|
||||
import {render, tree} from 'deku'
|
||||
|
||||
var app = <div class='my-app'>Hello World!</div>
|
||||
|
||||
render(tree(app), document.body)
|
||||
</code></pre>
|
||||
|
||||
<h2 id="components">Components</h2>
|
||||
|
||||
<pre><code class="language-js">Button = {
|
||||
render () { return <button>Submit</button> }
|
||||
}
|
||||
|
||||
App = {
|
||||
render () { return <div><Button /></div> }
|
||||
}
|
||||
|
||||
render(tree(<App />), document.body)
|
||||
render(tree(element(App)), document.body)
|
||||
</code></pre>
|
||||
|
||||
<h2 id="component-propsstate">Component props/state</h2>
|
||||
|
||||
<pre><code class="language-js">App = {
|
||||
render ({ props, state }) {
|
||||
return <div>{ /*...use state.store here*/ }</div>
|
||||
}
|
||||
|
||||
initialState (props) {
|
||||
return { store: store.getState() }
|
||||
},
|
||||
|
||||
afterMount (comp, el, setState) {
|
||||
store.subscribe(() => setState({ store: store.getState() }))
|
||||
}
|
||||
}
|
||||
|
||||
render(tree(<App />), document.body)
|
||||
</code></pre>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<pre><code class="language-js"><a onClick={onClick}>{props.text}</a>
|
||||
</code></pre>
|
||||
|
||||
<h2 id="magic-virtual-element">Magic virtual element</h2>
|
||||
<p>Use <a href="https://github.com/dekujs/magic-virtual-element">magic-virtual-element</a> to enable nice classnames.</p>
|
||||
|
||||
<pre><code>import element from 'magic-virtual-element'
|
||||
<div style={style} class={[ 'button', '-active' ]}>
|
||||
</code></pre>
|
||||
|
||||
<h2 id="reference">Reference</h2>
|
||||
|
||||
<pre><code>name = 'MyComponent'
|
||||
|
||||
// Defaults
|
||||
initialState (props) {...} // return initial state
|
||||
defaultProps = { hi: 'hello' }
|
||||
|
||||
// Render
|
||||
render ({props, state}, setState) {...}
|
||||
|
||||
// Lifecycle
|
||||
beforeUpdate ({props, state, id}, nextProps, nextState) {}
|
||||
afterRender ({props, state, id}, el) {}
|
||||
afterUpdate ({props, state, id}, prevProps, prevState, setState) {}
|
||||
afterMount ({props, state, id}, el, setState) {}
|
||||
beforeUnmount ({props, state, id}, el) {}
|
||||
</code></pre>
|
||||
|
||||
<p>See: <a href="https://www.npmjs.com/package/deku">https://www.npmjs.com/package/deku</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/deku@1.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Deku%20v1.%20https://devhints.io/deku@1.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,337 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/devise.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Devise cheatsheet</title>
|
||||
<meta content='Devise cheatsheet' property='og:title'>
|
||||
<meta content='Devise cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/devise.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/devise.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Devise: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Devise: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Devise: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/devise">
|
||||
<meta name="og:url" content="https://devhints.io/devise">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Devise cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/devise.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Devise: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/devise",
|
||||
"name": "Devise"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Devise</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/devise.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Devise.%20https://devhints.io/devise.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<p><a href="https://github.com/plataformatec/devise">Devise</a> is a flexible authentication
|
||||
gem.</p>
|
||||
|
||||
<h2 id="installation">Installation</h2>
|
||||
|
||||
<p>Rails 3: Add the following to your Gemfile</p>
|
||||
|
||||
<pre><code>gem "devise"
|
||||
gem "hpricot"
|
||||
gem "ruby_parser"
|
||||
</code></pre>
|
||||
|
||||
<p>Install devise in your project</p>
|
||||
|
||||
<pre><code>$ rails generate devise:install
|
||||
</code></pre>
|
||||
|
||||
<p>Generate devise for your model</p>
|
||||
|
||||
<pre><code>$ rails generate devise MODEL
|
||||
$ rake db:migrate
|
||||
</code></pre>
|
||||
|
||||
<p>(Optional) Generate devise views</p>
|
||||
|
||||
<pre><code>$ rails generate devise:views
|
||||
</code></pre>
|
||||
|
||||
<h2 id="helpers">Helpers</h2>
|
||||
|
||||
<pre><code>user_signed_in?
|
||||
current_user
|
||||
user_session
|
||||
destroy_user_session_path (Logout)
|
||||
new_user_session_path (Login)
|
||||
edit_user_registration_path (Edit registration)
|
||||
new_user_registration_path (Register new user)
|
||||
</code></pre>
|
||||
|
||||
<h2 id="controller-stuff">Controller stuff</h2>
|
||||
|
||||
<pre><code>before_filter :authenticate_user!
|
||||
</code></pre>
|
||||
|
||||
<h2 id="model">Model</h2>
|
||||
|
||||
<h3 id="model-options">Model options</h3>
|
||||
|
||||
<pre><code>class User < ActiveRecord::Base
|
||||
devise :database_authenticatable,
|
||||
:registerable,
|
||||
:confirmable,
|
||||
:recoverable,
|
||||
:rememberable,
|
||||
:trackable,
|
||||
:validatable
|
||||
end
|
||||
</code></pre>
|
||||
|
||||
<h3 id="migration-helpers">Migration helpers</h3>
|
||||
|
||||
<pre><code>create_table :users do |t|
|
||||
t.database_authenticatable
|
||||
t.confirmable
|
||||
t.recoverable
|
||||
t.rememberable
|
||||
t.trackable
|
||||
t.timestamps
|
||||
end
|
||||
</code></pre>
|
||||
|
||||
<h2 id="routing">Routing</h2>
|
||||
|
||||
<h3 id="authenticated-and-unauthenticated-routes">Authenticated and unauthenticated routes</h3>
|
||||
|
||||
<pre><code>unauthenticated do
|
||||
root :to => 'home#index'
|
||||
end
|
||||
|
||||
authenticated do
|
||||
root :to => 'dashboard#index'
|
||||
end
|
||||
</code></pre>
|
||||
|
||||
<h3 id="as">As</h3>
|
||||
<pre><code>as :user do
|
||||
get 'sign_in', :to => 'devise/sessions#new'
|
||||
end
|
||||
</code></pre>
|
||||
|
||||
<h3 id="devise_for-magic">Devise_for magic</h3>
|
||||
|
||||
<pre><code>devise_for :users
|
||||
|
||||
# Session routes for Authenticatable (default)
|
||||
new_user_session GET /users/sign_in {:controller=>"devise/sessions", :action=>"new"}
|
||||
user_session POST /users/sign_in {:controller=>"devise/sessions", :action=>"create"}
|
||||
destroy_user_session GET /users/sign_out {:controller=>"devise/sessions", :action=>"destroy"}
|
||||
|
||||
# Password routes for Recoverable, if User model has :recoverable configured
|
||||
new_user_password GET /users/password/new(.:format) {:controller=>"devise/passwords", :action=>"new"}
|
||||
edit_user_password GET /users/password/edit(.:format) {:controller=>"devise/passwords", :action=>"edit"}
|
||||
user_password PUT /users/password(.:format) {:controller=>"devise/passwords", :action=>"update"}
|
||||
POST /users/password(.:format) {:controller=>"devise/passwords", :action=>"create"}
|
||||
|
||||
# Confirmation routes for Confirmable, if User model has :confirmable configured
|
||||
new_user_confirmation GET /users/confirmation/new(.:format) {:controller=>"devise/confirmations", :action=>"new"}
|
||||
user_confirmation GET /users/confirmation(.:format) {:controller=>"devise/confirmations", :action=>"show"}
|
||||
POST /users/confirmation(.:format) {:controller=>"devise/confirmations", :action=>"create"}
|
||||
</code></pre>
|
||||
|
||||
<h3 id="customizing-devise_for">Customizing devise_for</h3>
|
||||
|
||||
<pre><code>devise_for :users,
|
||||
:path => "usuarios",
|
||||
:path_names => {
|
||||
:sign_in => 'login',
|
||||
:sign_out => 'logout',
|
||||
:password => 'secret',
|
||||
:confirmation => 'verification',
|
||||
:unlock => 'unblock',
|
||||
:registration => 'register',
|
||||
:sign_up => 'cmon_let_me_in' }
|
||||
</code></pre>
|
||||
|
||||
<h2 id="test-helpers">Test helpers</h2>
|
||||
|
||||
<pre><code>include Devise::TestHelpers
|
||||
https://github.com/plataformatec/devise/blob/1094ba65aac1d37713f2cba71f9edad76b5ca274/lib/devise/test_helpers.rb
|
||||
|
||||
sign_in @user
|
||||
sign_out @user
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/devise.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Devise.%20https://devhints.io/devise.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/divshot.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Divshot cheatsheet</title>
|
||||
<meta content='Divshot cheatsheet' property='og:title'>
|
||||
<meta content='Divshot cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/divshot.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/divshot.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Divshot: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Divshot: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Divshot: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/divshot">
|
||||
<meta name="og:url" content="https://devhints.io/divshot">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Others' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Divshot cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/divshot.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Divshot: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#others",
|
||||
"name": "Others"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/divshot",
|
||||
"name": "Divshot"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Divshot</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/divshot.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Divshot.%20https://devhints.io/divshot.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
|
||||
<h3 id="install-divshot-cli">Install divshot-cli</h3>
|
||||
|
||||
<pre><code>$ npm install -g divshot-cli
|
||||
$ divshot login
|
||||
</code></pre>
|
||||
|
||||
<h3 id="create-divshotjson">Create divshot.json</h3>
|
||||
|
||||
<pre><code class="language-json">{
|
||||
"name": "yourapp",
|
||||
"root": "./app"
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h3 id="push-your-app">Push your app</h3>
|
||||
|
||||
<pre><code>$ divshot push
|
||||
</code></pre>
|
||||
|
||||
<h2 id="configuration">Configuration</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<pre><code class="language-json">{
|
||||
"name": "yourapp",
|
||||
"root": "./app",
|
||||
"clean_urls": true,
|
||||
"clean_urls": ["/app/**", "/!components/**"],,
|
||||
"error_page": "error.html",
|
||||
"exclude": [ "Gruntfile.js" ],
|
||||
"cache_control": {},
|
||||
"routes": {
|
||||
"/*.html": "index.html",
|
||||
"/app/**/*.html": "app.html",
|
||||
"**": "index.html"
|
||||
},
|
||||
"redirects": {
|
||||
"/old/:segment/path": "/new/path/:segment",
|
||||
"/some/old/path": {
|
||||
"status": 302,
|
||||
"url": "/some/new/path"
|
||||
}
|
||||
},
|
||||
"headers": {
|
||||
"/cors-stuff/**": {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
},
|
||||
"/scripts/**": {
|
||||
"content-type": "text/javascript"
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h2 id="cli">CLI</h2>
|
||||
|
||||
<pre><code class="language-sh">divshot s # server
|
||||
|
||||
divshot push [staging|production|development]
|
||||
divshot pull [staging|production|development]
|
||||
divshot purge # cleans cache
|
||||
divshot files
|
||||
|
||||
divshot promote development production
|
||||
|
||||
divshot open [<env>]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="config">Config</h3>
|
||||
<p>Edits <code>divshot.json</code></p>
|
||||
|
||||
<pre><code>
|
||||
divshot config:add name your-app-name
|
||||
divshot config:remove name
|
||||
</code></pre>
|
||||
|
||||
<h3 id="environment-vars">Environment vars</h3>
|
||||
|
||||
<pre><code>divshot env:add <env> KEY=value
|
||||
divshot env:remove <env> KEY
|
||||
divshot env:pull <env>
|
||||
</code></pre>
|
||||
|
||||
<h3 id="app-management">App management</h3>
|
||||
|
||||
<pre><code>divshot create <appname>
|
||||
divshot rename <newname>
|
||||
divshot status
|
||||
divshot destroy
|
||||
</code></pre>
|
||||
|
||||
<p>divshot apps
|
||||
divshot account</p>
|
||||
<pre><code>
|
||||
### Password protect
|
||||
|
||||
```sh
|
||||
divshot protect <env> <username:password>
|
||||
</code></pre>
|
||||
|
||||
<h2 id="custom-domains">Custom domains</h2>
|
||||
|
||||
<p>See <a href="http://docs.divshot.com/guides/domains">custom domains guide</a>.</p>
|
||||
|
||||
<pre><code class="language-sh">divshot domains:add foo.bar.com
|
||||
</code></pre>
|
||||
|
||||
<p>In your DNS create a <code>CNAME</code>: (no apex domains are supported)</p>
|
||||
|
||||
<pre><code>www. CNAME yourname.divshot.io
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/divshot.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Divshot.%20https://devhints.io/divshot.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/do.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Do gem cheatsheet</title>
|
||||
<meta content='Do gem cheatsheet' property='og:title'>
|
||||
<meta content='Do gem cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/do.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/do.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Do gem: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Do gem: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Do gem: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/do">
|
||||
<meta name="og:url" content="https://devhints.io/do">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Ruby libraries' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Do gem cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/do.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Do gem: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#ruby-libraries",
|
||||
"name": "Ruby libraries"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/do",
|
||||
"name": "Do gem"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Do gem</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/do.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Do%20gem.%20https://devhints.io/do.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<ul>
|
||||
<li><a href="https://github.com/DAddYE/do">DAddYE/do</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="connection">Connection</h3>
|
||||
|
||||
<pre><code>server = DO::Server.new('srv1', 'srv1.domain.local', 'root', :key =>
|
||||
%w[srv1.pem]
|
||||
</code></pre>
|
||||
|
||||
<h3 id="run">Run</h3>
|
||||
<pre><code>server.run 'uname'
|
||||
# root@srv1 ~ # uname
|
||||
# Linux
|
||||
|
||||
server.run 'uname', '-a'
|
||||
# root@srv1 ~ # uname -a
|
||||
# Linux srv1.lipsiasoft.net 2.6.18-194.32.1.el5 x86_64 x86_64 x86_64 GNU/Linux
|
||||
|
||||
server.run 'mysqladmin -u root -p password "oldone"', 'newpassword'
|
||||
# root@srv1 ~ # mysqladmin -u root -p password 'oldone'
|
||||
# Enter password: oldone
|
||||
# mysqladmin: connect to server at 'localhost' failed
|
||||
# error: 'Access denied for user 'root'@'localhost' (using password: YES)'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="files">Files</h3>
|
||||
|
||||
<pre><code>server.exist?('~/.ssh')
|
||||
# root@srv1 ~ # test -e ~/.ssh && echo True
|
||||
# => true
|
||||
|
||||
server.read('/etc/redhat-release')
|
||||
# root@srv1 ~ # cat /etc/redhat-release
|
||||
# => "CentOS release 5.5 (Final)"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="uploaddownload">Upload/download</h3>
|
||||
|
||||
<pre><code>server.upload '/tmp/file', '/tmp/foo'
|
||||
# root@srv1 ~ # upload from '/tmp/file' to '/tmp/foo'
|
||||
|
||||
server.download '/tmp/foo', '/tmp/file2'
|
||||
# root@srv1 ~ # download from '/tmp/foo' to '/tmp/file2'
|
||||
</code></pre>
|
||||
|
||||
<h3 id="replace">Replace</h3>
|
||||
|
||||
<pre><code>server.replace :all, 'new content', '/tmp/file'
|
||||
# root@srv1 ~ # replace all in '/tmp/foo'
|
||||
|
||||
server.read('/tmp/foo')
|
||||
# root@srv1 ~ # cat /tmp/foo
|
||||
# => "new content"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="replace-via-regex">Replace via regex</h3>
|
||||
|
||||
<pre><code>server.replace /content$/, 'changed content', '/tmp/foo'
|
||||
# root@srv1 ~ # replace /content$/ in '/tmp/foo'
|
||||
|
||||
server.read('/tmp/foo')
|
||||
# root@srv1 ~ # cat /tmp/foo
|
||||
# => "new changed content"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="append">Append</h3>
|
||||
|
||||
<pre><code>server.append('appended', '/tmp/foo')
|
||||
# root@srv1 ~ # append to 'bottom' in '/tmp/foo'
|
||||
|
||||
server.read('/tmp/foo')
|
||||
# root@srv1 ~ # cat /tmp/foo
|
||||
# => "new changed contentappended"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="append-to-top">Append to top</h3>
|
||||
|
||||
<pre><code>server.append('---', '/tmp/foo', :top)
|
||||
# root@srv1 ~ # append to 'top' in '/tmp/foo'
|
||||
|
||||
server.read('/tmp/foo')
|
||||
# root@srv1 ~ # cat /tmp/foo
|
||||
# => "---new changed contentappended"
|
||||
</code></pre>
|
||||
|
||||
<h3 id="prompt">Prompt</h3>
|
||||
|
||||
<pre><code>server.ask "Please choose"
|
||||
# root@srv1 ~ # Please choose: foo
|
||||
# => "foo"
|
||||
|
||||
server.yes? "Do you want to proceed"
|
||||
# root@srv1 ~ # Do you want to proceed? (y/n): y
|
||||
# => 0
|
||||
|
||||
server.wait
|
||||
# Press ENTER to continue...
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/do.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Do%20gem.%20https://devhints.io/do.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,19 @@
|
|||
version: '3'
|
||||
services:
|
||||
web:
|
||||
build: .
|
||||
volumes:
|
||||
- .:/app
|
||||
- rubygems:/usr/local/bundle
|
||||
- ./node_modules:/app/node_modules
|
||||
- yarn_cache:/root/.cache/yarn
|
||||
ports:
|
||||
- '4001:4001'
|
||||
- '35729:35729'
|
||||
command: >
|
||||
bash -c 'yarn; bundle; env PORT=4001 HOST=0.0.0.0 yarn run dev'
|
||||
|
||||
volumes:
|
||||
rubygems:
|
||||
node_modules:
|
||||
yarn_cache:
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,260 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/dom-range.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>DOM Range cheatsheet</title>
|
||||
<meta content='DOM Range cheatsheet' property='og:title'>
|
||||
<meta content='DOM Range cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/dom-range.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/dom-range.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to DOM Range: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to DOM Range: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to DOM Range: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/dom-range">
|
||||
<meta name="og:url" content="https://devhints.io/dom-range">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "DOM Range cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/dom-range.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to DOM Range: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript",
|
||||
"name": "JavaScript"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/dom-range",
|
||||
"name": "DOM Range"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>DOM Range</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/dom-range.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20DOM%20Range.%20https://devhints.io/dom-range.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="creating-ranges">Creating ranges</h3>
|
||||
<p>See <a href="http://devdocs.io/dom/document/createrange">http://devdocs.io/dom/document/createrange</a></p>
|
||||
|
||||
<pre><code class="language-js">var range = document.createRange()
|
||||
</code></pre>
|
||||
|
||||
<h2 id="methods">Methods</h2>
|
||||
<p>See <a href="http://devdocs.io/dom/range">http://devdocs.io/dom/range</a></p>
|
||||
|
||||
<pre><code class="language-js">range
|
||||
.setStart(startNode, startOffset)
|
||||
.setEnd(endNode, endOffset)
|
||||
|
||||
.setStartBefore(node)
|
||||
.setStartAfter(node)
|
||||
.setEndBefore(node)
|
||||
.setEndAfter(node)
|
||||
|
||||
.selectNode(node)
|
||||
.selectNodeContents(node)
|
||||
</code></pre>
|
||||
|
||||
<h3 id="collapsing">Collapsing</h3>
|
||||
|
||||
<pre><code class="language-js">range
|
||||
.collapse() // to end (a single point)
|
||||
.collapse(true) // to start (a single point)
|
||||
.collapsed // true | false
|
||||
</code></pre>
|
||||
|
||||
<h3 id="operations">Operations</h3>
|
||||
|
||||
<pre><code class="language-js">range
|
||||
.cloneContents() // copy => DocumentFragment
|
||||
.extractContents() // cut => DocumentFragment
|
||||
.deleteContents() // delete
|
||||
|
||||
.insertNode(node)
|
||||
</code></pre>
|
||||
|
||||
<h3 id="etc">Etc</h3>
|
||||
|
||||
<pre><code class="language-js">range
|
||||
.toString()
|
||||
</code></pre>
|
||||
|
||||
<h3 id="read-only-attributes">Read-only attributes</h3>
|
||||
|
||||
<pre><code class="language-js">range
|
||||
.collapsed // true/false
|
||||
.startContainer // Node
|
||||
.startOffset
|
||||
.endContainer // Node
|
||||
.endOffset
|
||||
.commonAncestorContainer // closest of start and end containers
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/dom-range.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20DOM%20Range.%20https://devhints.io/dom-range.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/dom-selection.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>DOM Selection cheatsheet</title>
|
||||
<meta content='DOM Selection cheatsheet' property='og:title'>
|
||||
<meta content='DOM Selection cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/dom-selection.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/dom-selection.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to DOM Selection: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to DOM Selection: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to DOM Selection: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/dom-selection">
|
||||
<meta name="og:url" content="https://devhints.io/dom-selection">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='JavaScript' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "DOM Selection cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/dom-selection.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to DOM Selection: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#javascript",
|
||||
"name": "JavaScript"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/dom-selection",
|
||||
"name": "DOM Selection"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>DOM Selection</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/dom-selection.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20DOM%20Selection.%20https://devhints.io/dom-selection.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="selection">Selection</h2>
|
||||
<p>See <a href="http://devdocs.io/dom/selection">http://devdocs.io/dom/selection</a></p>
|
||||
|
||||
<pre><code class="language-js">var selection = document.getSelection()
|
||||
</code></pre>
|
||||
|
||||
<h2 id="methods">Methods</h2>
|
||||
|
||||
<pre><code class="language-js">selection
|
||||
.removeAllRanges() // deselects
|
||||
.addRange(range) // sets a selection
|
||||
.removeRange(range) // remove a range
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-js">selection
|
||||
.rangeCount // ranges
|
||||
.getRangeAt(0) // get the 0th range
|
||||
</code></pre>
|
||||
|
||||
<h3 id="collapsing">Collapsing</h3>
|
||||
|
||||
<pre><code class="language-js">selection
|
||||
.collapse(parent, offset)
|
||||
.collapseToEnd()
|
||||
.collapseToStart()
|
||||
.isCollapsed
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-js">selection
|
||||
.containsNode(node)
|
||||
</code></pre>
|
||||
|
||||
<h3 id="deleting">Deleting</h3>
|
||||
|
||||
<pre><code class="language-js">selection
|
||||
.deleteFromDocument()
|
||||
</code></pre>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<pre><code class="language-js">document.addEventListener('selectionchange', () => {})
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/dom-selection.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20DOM%20Selection.%20https://devhints.io/dom-selection.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/ec2.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>EC2 API tools cheatsheet</title>
|
||||
<meta content='EC2 API tools cheatsheet' property='og:title'>
|
||||
<meta content='EC2 API tools cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/ec2.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/ec2.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to EC2 API tools: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to EC2 API tools: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to EC2 API tools: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/ec2">
|
||||
<meta name="og:url" content="https://devhints.io/ec2">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devops' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "EC2 API tools cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/ec2.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to EC2 API tools: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#devops",
|
||||
"name": "Devops"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/ec2",
|
||||
"name": "EC2 API tools"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>EC2 API tools</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ec2.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20EC2%20API%20tools.%20https://devhints.io/ec2.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="install">Install</h3>
|
||||
|
||||
<pre><code>$ sudo apt-get install ec2-api-tools ec2-ami-tools
|
||||
$ brew install ec2-api-tools ec2-ami-tools
|
||||
</code></pre>
|
||||
|
||||
<h3 id="pem-files">Pem files</h3>
|
||||
|
||||
<pre><code>$ brew info ec2-api-tools
|
||||
</code></pre>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Before you can use these tools you must export some variables to your $SHELL
|
||||
and download your X.509 certificate and private key from Amazon Web Services.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Your certificate and private key are available at
|
||||
<a href="http://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key">aws-portal.amazon.com</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Download two <code>.pem</code> files, one starting with <code>pk-</code>, and one starting with <code>cert-</code>.
|
||||
You need to put both into a folder in your home directory, <code>~/.ec2</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="key-pair">Key pair</h3>
|
||||
|
||||
<pre><code># To use public images (AMI's), you need an SSH keypair from EC2.
|
||||
ec2-add-keypair my-keypair > ~/.ec2/my-keypair.pem
|
||||
chmod 600 ec2-keypair.pem
|
||||
</code></pre>
|
||||
|
||||
<h3 id="start-an-instance">Start an instance</h3>
|
||||
|
||||
<pre><code># Start an instance using a given AMI image:
|
||||
# (Use the Ubuntu locator, or ec2-describe-images)
|
||||
ec2-run-instances ami-xxxxxx -k ec2-keypair
|
||||
|
||||
# Open up ports (in the 'default' security group):
|
||||
ec2-authorize default -p 22
|
||||
ec2-authorize default -p 80
|
||||
|
||||
# Connect
|
||||
ssh -i ~/.ec2/my-keypair.pem root@ec2-xxx.amazonaws.com
|
||||
</code></pre>
|
||||
|
||||
<h3 id="management">Management</h3>
|
||||
|
||||
<pre><code># Show running instances
|
||||
ec2-describe-instances
|
||||
|
||||
# Kill an instance
|
||||
ec2-terminate-instances i-yourinstance
|
||||
</code></pre>
|
||||
|
||||
<h3 id="misc">Misc</h3>
|
||||
|
||||
<pre><code># Create a security group
|
||||
ec2-add-group group_name -d "Description"
|
||||
|
||||
# Show images (AMI's) owned by amazon, or me
|
||||
ec2-describe-images -o self -o amazon
|
||||
</code></pre>
|
||||
|
||||
<h3 id="ubuntu-images">Ubuntu images</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://cloud-images.ubuntu.com/locator/ec2/">Ubuntu EC2 AMI locator</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="change-certificates">Change certificates</h3>
|
||||
|
||||
<pre><code>EC2_CERT_PATH="$HOME/.ec2"
|
||||
export EC2_PRIVATE_KEY="$(/bin/ls $EC2_CERT_PATH/pk-*.pem | /usr/bin/head -1)"
|
||||
export EC2_CERT="$(/bin/ls $EC2_CERT_PATH/cert-*.pem | /usr/bin/head -1)"
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/ec2.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20EC2%20API%20tools.%20https://devhints.io/ec2.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,228 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/elixir-metaprogramming.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Elixir metaprogramming cheatsheet</title>
|
||||
<meta content='Elixir metaprogramming cheatsheet' property='og:title'>
|
||||
<meta content='Elixir metaprogramming cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/elixir-metaprogramming.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/elixir-metaprogramming.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Elixir metaprogramming: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Elixir metaprogramming: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Elixir metaprogramming: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/elixir-metaprogramming">
|
||||
<meta name="og:url" content="https://devhints.io/elixir-metaprogramming">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Elixir' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Elixir metaprogramming cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/elixir-metaprogramming.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Elixir metaprogramming: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#elixir",
|
||||
"name": "Elixir"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/elixir-metaprogramming",
|
||||
"name": "Elixir metaprogramming"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Elixir metaprogramming</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/elixir-metaprogramming.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Elixir%20metaprogramming.%20https://devhints.io/elixir-metaprogramming.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h2 id="kernel">Kernel</h2>
|
||||
|
||||
<p>Most of these magic is defined in <a href="http://devdocs.io/elixir/elixir/kernel.specialforms">Kernel.SpecialForms</a>.</p>
|
||||
|
||||
<h3 id="pseudo-variables">Pseudo-variables</h3>
|
||||
|
||||
<pre><code class="language-elixir">__DIR__ # current dir
|
||||
__MODULE__ # current module
|
||||
__CALLER__ # caller of the function
|
||||
</code></pre>
|
||||
|
||||
<h3 id="__env__"><a href="http://devdocs.io/elixir/elixir/kernel.specialforms#__ENV__/0"><code>__ENV__</code></a></h3>
|
||||
|
||||
<pre><code class="language-elixir">Map.keys(__ENV__)
|
||||
[:__struct__, :aliases, :context, :context_modules, :export_vars, :file,
|
||||
:function, :functions, :lexical_tracker, :line, :macro_aliases, :macros,
|
||||
:module, :requires, :vars]
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-elixir">__CALLER__.module |> Module.definitions_in |> IO.inspect
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-elixir">apply(Enum, :reverse, [[1, 2, 3]])
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/elixir-metaprogramming.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Elixir%20metaprogramming.%20https://devhints.io/elixir-metaprogramming.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,226 @@
|
|||
<!doctype html>
|
||||
<html lang='en' class='no-js '>
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||||
<meta content='/emacs.html' name='app:pageurl'>
|
||||
|
||||
|
||||
<title>Emacs cheatsheet</title>
|
||||
<meta content='Emacs cheatsheet' property='og:title'>
|
||||
<meta content='Emacs cheatsheet' property='twitter:title'>
|
||||
<meta content='article' property='og:type'>
|
||||
|
||||
|
||||
|
||||
<meta content='https://assets.devhints.io/previews/emacs.jpg?t=20200622144344' property='og:image'>
|
||||
<meta content='https://assets.devhints.io/previews/emacs.jpg?t=20200622144344' property='twitter:image'>
|
||||
<meta content='900' property='og:image:width'>
|
||||
<meta content='471' property='og:image:height'>
|
||||
|
||||
|
||||
|
||||
<meta content="The one-page guide to Emacs: usage, examples, links, snippets, and more." name="description">
|
||||
<meta content="The one-page guide to Emacs: usage, examples, links, snippets, and more." property="og:description">
|
||||
<meta content="The one-page guide to Emacs: usage, examples, links, snippets, and more." property="twitter:description">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://devhints.io/emacs">
|
||||
<meta name="og:url" content="https://devhints.io/emacs">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta content='CLI' property='article:section'>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
||||
<script>
|
||||
|
||||
window.dataLayer=window.dataLayer||[];
|
||||
function gtag(){dataLayer.push(arguments)};
|
||||
gtag('js',new Date());
|
||||
gtag('config','UA-106902774-1');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta property='page:depth' content='1'>
|
||||
|
||||
|
||||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||||
|
||||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&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'))</script>
|
||||
|
||||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||||
|
||||
<style>html{opacity:0}</style>
|
||||
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622144344">
|
||||
<link href="./assets/style.css?t=20200622144344" rel="stylesheet" />
|
||||
<link href="./assets/print.css?t=20200622144344" rel="stylesheet" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='all'>
|
||||
|
||||
<div class='site-header'>
|
||||
<div class='container'>
|
||||
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "https://google.com/article"
|
||||
},
|
||||
"headline": "Emacs cheatsheet",
|
||||
"image": [ "https://assets.devhints.io/previews/emacs.jpg?t=20200622144344" ],
|
||||
"description": "The one-page guide to Emacs: usage, examples, links, snippets, and more."
|
||||
}
|
||||
</script>
|
||||
<script type='application/ld+json'>
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/#cli",
|
||||
"name": "CLI"
|
||||
}
|
||||
},{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@id": "https://devhints.io/emacs",
|
||||
"name": "Emacs"
|
||||
}
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class='post-list -single -cheatsheet'>
|
||||
<div class='post-item'>
|
||||
<div class='post-headline -cheatsheet'>
|
||||
<p class='prelude'><span></span></p>
|
||||
<h1><span>Emacs</span></h1>
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/emacs.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Emacs.%20https://devhints.io/emacs.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='post-content -cheatsheet'>
|
||||
<h3 id="movements">Movements</h3>
|
||||
|
||||
<p>^n ^p # up/down
|
||||
^f ^b # left/right</p>
|
||||
|
||||
<p>^v Mv # up/down page</p>
|
||||
|
||||
<p>^a ^e # begin/end of line
|
||||
Ma Me # begin/end of sentence</p>
|
||||
|
||||
<h3 id="basic">Basic</h3>
|
||||
|
||||
<p>^x ^f # find file
|
||||
^x ^s # save file</p>
|
||||
|
||||
<h3 id="command-line">Command line</h3>
|
||||
|
||||
<p>Mx</p>
|
||||
|
||||
<h3 id="packages">Packages</h3>
|
||||
|
||||
<p>Mx package-install RET evil RET</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="social-list ">
|
||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/emacs.html" target="share"><span class="text"></span></a></li>
|
||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Emacs.%20https://devhints.io/emacs.html" target="share"><span class="text"></span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-the-site">
|
||||
<div class="container">
|
||||
<p class='blurb'>
|
||||
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
||||
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
||||
<i class='fleuron'></i>
|
||||
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
||||
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
||||
</p>
|
||||
|
||||
|
||||
<p class='back'>
|
||||
<a class='big-button -back -slim' href='.#toc'></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad()</script>
|
||||
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue