├── _sass ├── 2017 │ ├── components │ │ ├── push-button.scss │ │ ├── body-area.scss │ │ ├── codefund-sponsor.scss │ │ ├── announcements-list.scss │ │ ├── related-posts-area.scss │ │ ├── attribute-peg.scss │ │ ├── pre-footer.scss │ │ ├── related-posts-group.scss │ │ ├── notice-box.scss │ │ ├── h2-section.scss │ │ ├── comments-section.scss │ │ ├── intro-content.scss │ │ ├── related-post-list.scss │ │ ├── hint-mark.scss │ │ ├── comments-area.scss │ │ ├── search-footer.scss │ │ ├── home-button.scss │ │ ├── site-header.scss │ │ ├── missing-message.scss │ │ ├── main-heading.scss │ │ ├── side-ad.scss │ │ ├── berry-sponsor.scss │ │ ├── back-button.scss │ │ ├── comments-details.scss │ │ ├── related-posts-callout.scss │ │ ├── headline-ad.scss │ │ ├── announcements-item.scss │ │ ├── pages-list.scss │ │ └── related-posts-section.scss │ ├── utils │ │ ├── _font-size.scss │ │ ├── gutter.scss │ │ ├── section-gutter.scss │ │ ├── section-with-container.scss │ │ ├── heading-style.scss │ │ └── carbon-style.scss │ ├── markdown │ │ ├── a-em.scss │ │ ├── local-anchor.scss │ │ ├── ul.scss │ │ ├── headings.scss │ │ └── p.scss │ ├── placeholders │ │ └── push-button.scss │ └── base │ │ ├── fade.scss │ │ └── base.scss └── .gitignore ├── CNAME ├── _js ├── behaviors │ ├── main-body.js │ ├── searchable-item.js │ ├── no-preview.js │ ├── search-form.js │ ├── dismissable.js │ ├── search-input.js │ ├── dismiss.js │ ├── searchable-header.js │ ├── h3-section-list.js │ ├── disqus.js │ └── anchors.js ├── helpers │ ├── noop.js │ ├── preview.js │ ├── qs.js │ ├── __tests__ │ │ └── qs.test.js │ ├── data.js │ ├── dismiss.js │ ├── store.js │ ├── inject_disqus.js │ ├── search.js │ └── dom.js ├── initializers │ └── onmount.js ├── app.js ├── critical.js └── wrapify │ └── __tests__ │ └── index.test.js ├── .dockerignore ├── _layouts ├── 2017 │ └── not_found.html ├── blank.html ├── redirect.html ├── default.html ├── default-ad.html └── home.html ├── robots.txt ├── _data ├── disqus.yml ├── codefund.yml ├── assets.yml ├── google_analytics.yml ├── carbon.yml ├── berry.yml └── categories.yml ├── .gitignore ├── gpg.md ├── Gemfile ├── assets ├── 2017 │ └── style.scss └── print.css ├── date.md ├── 404.html ├── brew.md ├── es2015.md ├── es2016.md ├── es2017.md ├── es2018.md ├── fetch.md ├── gpgconf.md ├── sh.md ├── css-font.md ├── expect.js.md ├── flexbox.md ├── gutom.md ├── harvey-js.md ├── jade.md ├── flowtype.md ├── package.md ├── commander-js.md ├── immutable-js.md ├── _docs └── images │ └── screenshot.png ├── css-animation.md ├── css-selectors.md ├── handlebars-js.md ├── css-background.md ├── factory_girl.md ├── powerline.txt ├── phoenix-ecto@1.3.md ├── webpack.config.js ├── .babelrc ├── _inactive ├── deprecated │ ├── cinema4d.md │ ├── github.md │ ├── eslint.md │ ├── docker-osx.md │ └── jquery-mobile-events.md ├── git-one-liners.md ├── homebrew-formula.md ├── gpg.md ├── ios.md └── gh.md ├── mongodb.md ├── jquery-cdn.md ├── _includes ├── 2017 │ ├── codefund.html │ ├── foot.html │ ├── search-footer.html │ ├── related-posts-item.html │ ├── announcements-list.html │ ├── berry-sponsor.html │ ├── pages-list-item.html │ ├── search-form.html │ ├── article-schema.html │ ├── comments-area.html │ ├── top-nav.html │ └── head.html ├── site-header.html ├── values │ ├── title.html │ └── description.html ├── head.html ├── foot.html ├── about-the-site.html ├── polyfills.html └── social-list.html ├── index.md ├── .travis.yml ├── index@2016.md ├── crypto.md ├── linux.md ├── .projections.json ├── freenode.md ├── docker-compose.yml ├── passenger.md ├── strftime.md ├── nodejs-assert.md ├── simple_form.md ├── gmail.md ├── premailer.md ├── yaml.md ├── Dockerfile ├── sh-pipes.md ├── perl-pie.md ├── _support ├── cf-prime.sh ├── webpack.critical.js ├── cf-purge.sh └── critical.js ├── google-webfonts.md ├── bookshelf-contrib.md ├── nocode.md ├── rails-features.md ├── browser-sync.md ├── emacs.md ├── man.md ├── appcache.md ├── rack-test.md ├── ansible-examples.md ├── datetime.md ├── rubiks.md ├── rails-gems.md ├── nodejs-path.md ├── nock.md ├── ansible-roles.md ├── mixpanel.md ├── sitemap.xml ├── README.md ├── cidr.md ├── ncftp.md ├── rake.md ├── ubuntu.md ├── html-share.md ├── inkscape.md ├── html-microformats.md ├── postgresql.md ├── weinre.md ├── ruby21.md ├── js-speech.md ├── siege.md ├── spreadsheet.md ├── qunit.md ├── frequency-separation-retouching.md ├── zombie.md ├── animated_gif.md ├── rubygems.md ├── social-images.md ├── analytics.md ├── phoenix@1.2.md ├── virtual-dom.md ├── inline-docs.md ├── handlebars.js.md ├── ledger-query.md ├── sed.md ├── cordova.md ├── harvey.js.md ├── commander.js.md ├── ansi.md ├── superagent.md ├── saucelabs.md ├── applinks.md ├── ruby.md ├── watchman.md ├── ledger-csv.md ├── znc.md ├── imagemagick.md ├── gh-pages.md ├── css-antialias.md ├── data └── search-index.json ├── rename.md ├── vagrant.md ├── elixir-metaprogramming.md ├── immutable.js.md ├── ie_bugs.md ├── flashlight.md ├── sql-join.md ├── less.md ├── c_preprocessor.md ├── analytics.js.md ├── mocha.md ├── bookshelf.md ├── nodejs-process.md ├── vimscript-snippets.md ├── haml.md ├── dom-selection.md ├── jquery.md ├── js-lazy.md ├── tape.md ├── ledger-periods.md ├── blessed.md ├── js-appcache.md ├── applescript.md ├── chunky_png.md ├── mocha-tdd.md ├── ets.md ├── pass.md ├── nopt.md ├── modernizr.md ├── browserify.md ├── macos-mouse-acceleration.md ├── scp.md ├── deprecated └── bower-api.md ├── git-branch.md ├── machinist.md ├── google_analytics.md ├── vows.md ├── mocha-html.md ├── rst.md ├── make-assets.md ├── parsimmon.md ├── bolt.md ├── deis.md ├── promise.md ├── ledger-examples.md ├── css-system-font-stack.md ├── ledger-format.md ├── _config.yml ├── cron.md ├── jscoverage.md ├── web-workers.md ├── dom-range.md ├── Makefile ├── bundler.md ├── find.md ├── nodejs.md ├── rails-tricks.md ├── deku.md ├── kramdown.md ├── meow.md ├── polyfill.io.md └── resolutions.md /_sass/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | devhints.io 2 | -------------------------------------------------------------------------------- /_js/behaviors/main-body.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /_js/helpers/noop.js: -------------------------------------------------------------------------------- 1 | /* blank */ 2 | -------------------------------------------------------------------------------- /_layouts/blank.html: -------------------------------------------------------------------------------- 1 | {{content}} 2 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /_data/disqus.yml: -------------------------------------------------------------------------------- 1 | enabled: true 2 | host: devhints.disqus.com 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _output 2 | _site 3 | .jekyll-metadata 4 | /node_modules 5 | /vendor 6 | -------------------------------------------------------------------------------- /gpg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GPG 3 | category: Hidden 4 | redirect_to: /gnupg 5 | --- 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', group: :jekyll_plugins 3 | -------------------------------------------------------------------------------- /_data/codefund.yml: -------------------------------------------------------------------------------- 1 | enabled: true 2 | token: "c2c8bc62-c275-4c7a-a304-74335c5a1cd0" 3 | -------------------------------------------------------------------------------- /assets/2017/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | type: other 3 | --- 4 | @import '2017/style.scss'; 5 | -------------------------------------------------------------------------------- /date.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Date 3 | categoroy: Hidden 4 | redirect_to: /datetime 5 | --- 6 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 2017/not_found 3 | type: error 4 | permalink: /404.html 5 | --- 6 | -------------------------------------------------------------------------------- /_sass/2017/components/push-button.scss: -------------------------------------------------------------------------------- 1 | .push-button { 2 | @extend %push-button; 3 | } 4 | -------------------------------------------------------------------------------- /brew.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Homebrew 3 | category: Hidden 4 | redirect_to: /homebrew 5 | --- 6 | -------------------------------------------------------------------------------- /es2015.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES2015 3 | category: JavaScript 4 | redirect_to: /es6 5 | --- 6 | -------------------------------------------------------------------------------- /es2016.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES2016 3 | category: JavaScript 4 | redirect_to: /es6 5 | --- 6 | -------------------------------------------------------------------------------- /es2017.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES2017 3 | category: JavaScript 4 | redirect_to: /es6 5 | --- 6 | -------------------------------------------------------------------------------- /es2018.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES2018 3 | category: JavaScript 4 | redirect_to: /es6 5 | --- 6 | -------------------------------------------------------------------------------- /fetch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: fetch() 3 | category: Hidden 4 | redirect_to: /js-fetch 5 | --- 6 | -------------------------------------------------------------------------------- /gpgconf.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: gpgconf 3 | category: Hidden 4 | redirect_to: /gnupg 5 | --- 6 | -------------------------------------------------------------------------------- /sh.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Shell scripting 3 | category: CLI 4 | redirect_to: /bash 5 | --- 6 | -------------------------------------------------------------------------------- /_data/assets.yml: -------------------------------------------------------------------------------- 1 | # No trailing slash 2 | preview_host: https://assets.devhints.io/previews 3 | -------------------------------------------------------------------------------- /_data/google_analytics.yml: -------------------------------------------------------------------------------- 1 | enabled: true 2 | hostname: devhints.io 3 | id: "UA-106902774-1" 4 | -------------------------------------------------------------------------------- /css-font.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS font 3 | category: Hidden 4 | redirect_to: /css#fonts 5 | --- 6 | -------------------------------------------------------------------------------- /expect.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: expect.js 3 | category: Hidden 4 | redirect_to: /expectjs 5 | --- 6 | -------------------------------------------------------------------------------- /flexbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flexbox 3 | category: Hidden 4 | redirect_to: /css-flexbox 5 | --- 6 | -------------------------------------------------------------------------------- /gutom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gutom 3 | category: Hidden 4 | redirect_to: /ph-food-delivery 5 | --- 6 | -------------------------------------------------------------------------------- /harvey-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Harvey.js 3 | category: Hidden 4 | redirect_to: /harvey.js 5 | --- 6 | -------------------------------------------------------------------------------- /jade.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jade 3 | category: JavaScript libraries 4 | redirect_to: /pug 5 | --- 6 | -------------------------------------------------------------------------------- /flowtype.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flow 3 | redirect_to: /flow 4 | category: JavaScript libraries 5 | --- 6 | -------------------------------------------------------------------------------- /package.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: package.json 3 | category: Hidden 4 | redirect_to: /package.json 5 | --- 6 | -------------------------------------------------------------------------------- /_sass/2017/utils/_font-size.scss: -------------------------------------------------------------------------------- 1 | @mixin font-size ($n) { 2 | @include ms-respond(font-size, $n); 3 | } 4 | -------------------------------------------------------------------------------- /commander-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Commander.js 3 | category: Hidden 4 | redirect_to: /commander.js 5 | --- 6 | -------------------------------------------------------------------------------- /immutable-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Immutable.js 3 | category: Hidden 4 | redirect_to: /immutable.js 5 | --- 6 | -------------------------------------------------------------------------------- /_docs/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ilhan-mstf/cheatsheets/HEAD/_docs/images/screenshot.png -------------------------------------------------------------------------------- /css-animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS animations 3 | category: Hidden 4 | redirect_to: /css#animation 5 | --- 6 | -------------------------------------------------------------------------------- /css-selectors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS selectors 3 | category: Hidden 4 | redirect_to: /css#selectors 5 | --- 6 | -------------------------------------------------------------------------------- /handlebars-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Handlebars.js 3 | category: Hidden 4 | redirect_to: /handlebars.js 5 | --- 6 | -------------------------------------------------------------------------------- /css-background.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS background 3 | category: Hidden 4 | redirect_to: /css#background 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /factory_girl.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Factory Girl 3 | category: Ruby libraries 4 | redirect_to: /factory_bot 5 | --- 6 | -------------------------------------------------------------------------------- /_data/carbon.yml: -------------------------------------------------------------------------------- 1 | enabled: false 2 | src: //cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom 3 | -------------------------------------------------------------------------------- /powerline.txt: -------------------------------------------------------------------------------- 1 | Powerline: 2 | ⮂ 3 | ⮀ 4 | ⮃ 5 | ⮁ 6 | ⭤ 7 | ⭡ 8 | ⭠ 9 | 10 | 11 | ┌─┐ 12 | └─ 13 | ✈ 14 | ⋅ 15 | -------------------------------------------------------------------------------- /phoenix-ecto@1.3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Phoenix: Ecto models" 3 | category: Hidden 4 | redirect_to: /phoenix-ecto 5 | deprecated: true 6 | --- 7 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | require('./_support/webpack.config.js'), 3 | require('./_support/webpack.critical.js') 4 | ] 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "forceAllTransforms": true 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /_inactive/deprecated/cinema4d.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cinema4d 3 | category: Apps 4 | --- 5 | 6 | E R T : Move/rotate/scale 7 | P : snapping 8 | -------------------------------------------------------------------------------- /mongodb.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MongoDB 3 | category: Development 4 | --- 5 | 6 | ## Querying 7 | 8 | ``` 9 | { name: 'john' } 10 | { name: { $eq: 'john' } } 11 | -------------------------------------------------------------------------------- /_data/berry.yml: -------------------------------------------------------------------------------- 1 | enabled: false 2 | token: "653d56e083fec2a9ae1b6c7cde4e5f5f" 3 | title: "Rollbar" 4 | description: "Real-time error monitoring, alerting, and analytics for developers 🚀" 5 | -------------------------------------------------------------------------------- /_inactive/git-one-liners.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git one-liners 3 | --- 4 | 5 | When did someone work 6 | 7 | git log --all --author='Rico' --pretty="%ai" | awk '{ print $1 }' | sort | uniq 8 | -------------------------------------------------------------------------------- /_js/helpers/preview.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Checks if we're in preview mode (?preview=1). 3 | */ 4 | 5 | export function isPreview () { 6 | return window.location.search.indexOf('preview=1') !== -1 7 | } 8 | -------------------------------------------------------------------------------- /_inactive/deprecated/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub 3 | category: Git 4 | --- 5 | 6 | ### URLs 7 | 8 | github.com/:userrepo/blame/:branch/:path 9 | github.com/:userrepo/commit/:commit 10 | -------------------------------------------------------------------------------- /_sass/2017/components/body-area.scss: -------------------------------------------------------------------------------- 1 | .body-area { 2 | max-width: $area-width; 3 | margin: 0 auto; 4 | @include gutter(padding); 5 | 6 | &.-slim { 7 | max-width: 740px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /_sass/2017/markdown/a-em.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * For links with sources, eg, 3 | * [Foo](foo.com) _(foo.com)_ 4 | */ 5 | 6 | .MarkdownBody.MarkdownBody { 7 | a + em { 8 | opacity: 0.5; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_sass/2017/components/codefund-sponsor.scss: -------------------------------------------------------------------------------- 1 | .codefund-sponsor { 2 | & { 3 | min-height: 114px; 4 | } 5 | 6 | .cf-wrapper { 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_sass/2017/utils/gutter.scss: -------------------------------------------------------------------------------- 1 | @mixin gutter ($property, $multiplier: 1) { 2 | #{$property}: $gut * $multiplier; 3 | 4 | @media (max-width: 480px) { 5 | #{$property}: $gut-small * $multiplier; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /jquery-cdn.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery CDN 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### Google jQuery 7 | 8 | 9 | -------------------------------------------------------------------------------- /_includes/site-header.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | full_title: "Devhints — TL;DR for developer documentation" 3 | description: "A ridiculous collection of web development cheatsheets" 4 | layout: 2017/home 5 | og_type: website 6 | type: home 7 | --- 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.5.0 4 | script: 5 | - make -B _site 6 | - if ! make test; then make test-warning; exit 16; fi 7 | cache: 8 | directories: 9 | - node_modules 10 | - _site 11 | -------------------------------------------------------------------------------- /_js/initializers/onmount.js: -------------------------------------------------------------------------------- 1 | import ready from 'dom101/ready' 2 | import onmount from 'onmount' 3 | 4 | /** 5 | * Behavior: Wrapping 6 | */ 7 | 8 | ready(() => { 9 | setTimeout(() => { onmount() }) 10 | }) 11 | -------------------------------------------------------------------------------- /_sass/2017/utils/section-gutter.scss: -------------------------------------------------------------------------------- 1 | @mixin section-gutter($property, $multiplier: 1) { 2 | #{$property}: 16px * $multiplier; 3 | 4 | @media (max-width: $area-width + 32px) { 5 | #{$property}: 8px * $multiplier; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /index@2016.md: -------------------------------------------------------------------------------- 1 | --- 2 | full_title: "Devhints — for web development and more" 3 | description: "TL;DR for developer documentation - a ridiculous collection of cheatsheets" 4 | layout: home 5 | type: home 6 | og_type: website 7 | --- 8 | -------------------------------------------------------------------------------- /_includes/2017/codefund.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /_sass/2017/utils/section-with-container.scss: -------------------------------------------------------------------------------- 1 | @mixin section-with-container { 2 | & > .container { 3 | @include gutter(padding-left); 4 | @include gutter(padding-right); 5 | max-width: $area-width; 6 | margin: 0 auto; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /crypto.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cryptography 3 | --- 4 | 5 | * [PBKDF2](http://en.wikipedia.org/wiki/PBKDF2) - password-based key derivation 6 | function 7 | 8 | * [HMAC](http://en.wikipedia.org/wiki/HMAC) - Hash-based message authentication 9 | code 10 | -------------------------------------------------------------------------------- /linux.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Linux 3 | --- 4 | 5 | ### Mounting a RAM drive 6 | 7 | $ mount -t tmpfs -o size=5G,nr_inodes=5k,mode=700 tmpfs /tmp 8 | 9 | ### Visudo 10 | 11 | sudo visudo 12 | 13 | username ALL=(ALL) NOPASSWD:/sbin/restart whatever 14 | -------------------------------------------------------------------------------- /_includes/values/title.html: -------------------------------------------------------------------------------- 1 | {% 2 | if page.full_title 3 | %}{{ page.full_title }}{% 4 | elsif page.type == 'article' 5 | %}{{ page.title }} cheatsheet{% 6 | elsif page.title 7 | %}{{ page.title }}{% 8 | else 9 | %}{{ site.title }}{% 10 | endif 11 | %} 12 | -------------------------------------------------------------------------------- /_js/app.js: -------------------------------------------------------------------------------- 1 | // 3rd party libs 2 | window.Prism = require('prismjs') 3 | 4 | // All the others 5 | function requireAll (r) { r.keys().forEach(r) } 6 | requireAll(require.context('./initializers/', true, /\.js$/)) 7 | requireAll(require.context('./behaviors/', true, /\.js$/)) 8 | -------------------------------------------------------------------------------- /.projections.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.md": { 3 | "type": "cheat", 4 | "template": [ 5 | "---", 6 | "title: {basename|capitalize}", 7 | "category: Ruby", 8 | "layout: 2017/sheet", 9 | "updated: DATE", 10 | "---" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /freenode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Freenode 3 | --- 4 | 5 | ### irc.freenode.net 6 | 7 | /msg nickserv identify [nick] 8 | /msg nickserv info 9 | 10 | ### Add a nick 11 | 12 | /nick newnick 13 | /msg nickserv identify 14 | /msg nickserv group 15 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | services: 3 | web: 4 | build: . 5 | volumes: 6 | - .:/app 7 | - rubygems:/usr/local/bundle 8 | ports: 9 | - '4001:4001' 10 | - '35729:35729' 11 | command: 'env PORT=4001 HOST=0.0.0.0 yarn run dev' 12 | 13 | volumes: 14 | rubygems: 15 | -------------------------------------------------------------------------------- /passenger.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Phusion Passenger 3 | --- 4 | 5 | server { 6 | listen 80; 7 | server_name www.yourhost.com; 8 | root /somewhere/public; # <--- be sure to point to 'public'! 9 | passenger_enabled on; 10 | autoindex on; # Show directory listings 11 | } 12 | 13 | -------------------------------------------------------------------------------- /strftime.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: strftime format 3 | layout: 2017/sheet 4 | weight: -5 5 | updated: 2017-09-04 6 | tags: [Featurable] 7 | intro: | 8 | The strftime format is the standard date formatting for UNIX. It's used in C, Ruby, and more. 9 | --- 10 | 11 | {% include common/strftime_format.md title="strftime" %} 12 | -------------------------------------------------------------------------------- /nodejs-assert.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: assert 3 | category: Node.js 4 | --- 5 | 6 | assert(val) 7 | assert.equal(actual, expected) 8 | assert.notEqual(a, e) 9 | 10 | assert.deepEqual(a, e) 11 | assert.notDeepEqual(a, e) 12 | 13 | assert.throws(fn) 14 | 15 | ### References 16 | 17 | - http://nodejs.org/api/assert.html 18 | -------------------------------------------------------------------------------- /simple_form.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SimpleForm 3 | --- 4 | 5 | ```ruby 6 | <%= f.input :email, required: false, autofocus: true %> 7 | <%= f.input :password, required: false %> 8 | <%= f.input :remember_me, as: :boolean %> 9 | <%= f.button :submit, "Sign in" %> 10 | ``` 11 | 12 | ```ruby 13 | simple_form_for @x, 14 | wrapper: :small 15 | ``` 16 | -------------------------------------------------------------------------------- /gmail.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gmail 3 | --- 4 | 5 | ### IMAP 6 | 7 | * `imap.gmail.com:993` 8 | * SSL: yes 9 | * Username: full `username@gmail.com` 10 | 11 | ### SMTP 12 | 13 | * `smtp.gmail.com` 14 | * SSL port: 465 15 | * TLS/STARTTLS port: 587 16 | * Use authentication: yes 17 | 18 | ### POP3 19 | 20 | * `pop.gmail.com:995` 21 | * SSL: yes 22 | -------------------------------------------------------------------------------- /premailer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Premailer 3 | --- 4 | 5 | 6 | -premailer-width 7 | Available on table, th and td elements 8 | -premailer-height 9 | Available on table, tr, th and td elements 10 | -premailer-cellpadding 11 | Available on table elements 12 | -premailer-cellspacing 13 | Available on table elements 14 | -------------------------------------------------------------------------------- /_inactive/deprecated/eslint.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: eslint 3 | category: JavaScript libraries 4 | --- 5 | 6 | ```js 7 | // "comma-dangle": "always" ("always-multiline", "never") 8 | var foo = { 9 | bar: "baz", 10 | qux: "quux", 11 | }; 12 | var arr = [1,2,]; 13 | ``` 14 | 15 | ``` 16 | // "yoda": "always" ("never") 17 | if ("red" === color) 18 | ``` 19 | -------------------------------------------------------------------------------- /yaml.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Yaml 3 | category: Markup 4 | layout: 2017/sheet 5 | prism_languages: [yaml] 6 | --- 7 | 8 | ### Multiline strings 9 | 10 | ```yaml 11 | Multiline: | 12 | hello 13 | world 14 | ``` 15 | 16 | ### Inheritance 17 | 18 | ```yaml 19 | parent: &defaults 20 | a: 2 21 | b: 3 22 | 23 | child: 24 | <<: *defaults 25 | b: 4 26 | ``` 27 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM ruby:2.5.1-alpine3.7 2 | RUN apk update && apk add --no-cache nodejs build-base 3 | RUN apk add yarn --no-cache --repository http://dl-3.alpinelinux.org/alpine/v3.8/community/ --allow-untrusted 4 | RUN mkdir -p /app 5 | WORKDIR /app 6 | # COPY Gemfile Gemfile.lock ./ 7 | # RUN bundle install -j 4 8 | # COPY package.json yarn.lock ./ 9 | # RUN yarn 10 | -------------------------------------------------------------------------------- /_sass/2017/components/announcements-list.scss: -------------------------------------------------------------------------------- 1 | .announcements-list { 2 | & { 3 | position: fixed; 4 | left: 0; 5 | bottom: 0; 6 | max-width: 420px; 7 | padding: 0; 8 | z-index: 10; 9 | } 10 | 11 | @media (min-width: 481px) { 12 | padding: 16px; 13 | } 14 | 15 | @media (min-width: 769px) { 16 | padding: 32px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /_sass/2017/components/related-posts-area.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Related posts 3 | */ 4 | 5 | .related-posts-area { 6 | & { 7 | @include section-with-container; 8 | padding-top: 16px; 9 | padding-bottom: 16px; 10 | background: $gray-bg; 11 | } 12 | 13 | @media (min-width: 481px) { 14 | padding-top: 64px; 15 | padding-bottom: 64px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /_sass/2017/components/attribute-peg.scss: -------------------------------------------------------------------------------- 1 | .attribute-peg { 2 | & { 3 | display: inline-block; 4 | height: 12px; 5 | width: 20px; 6 | text-align: center; 7 | } 8 | 9 | & > span { 10 | display: inline-block; 11 | width: 8px; 12 | height: 8px; 13 | background: saturate(lighten(#5a8, 16%), 24%); 14 | border-radius: 50%; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /sh-pipes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Shell: named pipes" 3 | category: CLI 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Named pipes 8 | 9 | ```sh 10 | diff <(ls ./old) <(ls ./new) 11 | ``` 12 | 13 | This creates a virtual file with the contents of the output of `ls ./old`. 14 | 15 | ### References 16 | 17 | * [Named pipe](https://en.wikipedia.org/wiki/Named_pipe) _(wikipedia.org)_ 18 | -------------------------------------------------------------------------------- /perl-pie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Perl-pie 3 | category: Development 4 | --- 5 | 6 | ### Search and replace 7 | 8 | ```sh 9 | perl -p -i -e 's/hello/hola/g' *.txt 10 | ``` 11 | 12 | ### Back-referencing 13 | 14 | Use `\1` et al. 15 | 16 | ```sh 17 | # '@include align-items(center);' => 'align-items: center;' 18 | perl -p -i -e "s/\@include (align-items)\((.*)\);/\1: \2;/g" 19 | ``` 20 | -------------------------------------------------------------------------------- /_sass/2017/utils/heading-style.scss: -------------------------------------------------------------------------------- 1 | @mixin heading-style { 2 | margin: 0; 3 | padding: 0; 4 | margin-bottom: 16px + 8px; 5 | margin-top: 64px; 6 | position: relative; 7 | 8 | @media (max-width: 768px) { 9 | margin-bottom: 8px; 10 | margin-top: 32px; 11 | } 12 | 13 | @media (max-width: 480px) { 14 | margin-bottom: 8px; 15 | margin-top: 32px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /_support/cf-prime.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ( 4 | echo https://devhints.io/ 5 | ( 6 | git ls-files \ 7 | | grep -E '\.md$' \ 8 | | grep -v -E 'CONTRIBUTING|README|Readme' \ 9 | | grep -v -E '^_' \ 10 | | sort \ 11 | | uniq \ 12 | | sed 's/\.md$//g' 13 | ) \ 14 | | sed 's#^#https://devhints.io/#g' 15 | ) \ 16 | | xargs curl >/dev/null 17 | -------------------------------------------------------------------------------- /_sass/2017/components/pre-footer.scss: -------------------------------------------------------------------------------- 1 | /* 2 | content: ''; 3 | * Spacer before footer 4 | */ 5 | 6 | .pre-footer { 7 | & { 8 | padding: 32px; 9 | padding-top: 24px; 10 | padding-bottom: 48px; 11 | text-align: center; 12 | } 13 | 14 | & > .icon::before { 15 | content: ''; 16 | @include ion-ios-flash(32px, $base-mute); 17 | opacity: 0.25; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /_sass/2017/components/related-posts-group.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Group 3 | */ 4 | 5 | .related-posts-group { 6 | & > h3 { 7 | @include font-size(1); 8 | color: $base-a; 9 | margin: 0; 10 | padding: 0; 11 | margin-bottom: 16px; 12 | padding-bottom: 16px; 13 | border-bottom: solid 1px $dark-line-color; 14 | line-height: 1.2; 15 | font-weight: 400; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /google-webfonts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Google Webfonts 3 | --- 4 | 5 | ### Link tag 6 | 7 | 8 | 9 | ### CSS import 10 | 11 | @import url(http://fonts.googleapis.com/css?family=Open+Sans); 12 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic|Montserrat:400,700); 13 | -------------------------------------------------------------------------------- /_includes/2017/foot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% for lang in page.prism_languages %}{% endfor %} 6 | -------------------------------------------------------------------------------- /bookshelf-contrib.md: -------------------------------------------------------------------------------- 1 | # bookshelf-contrib.Scopes 2 | # 3 | class Books 4 | scopes: 5 | published: (q) -> q.where(published: true) 6 | 7 | Books.published().fetchAll() 8 | 9 | 10 | # bookshelf-contrib.QueryProxy 11 | # 12 | Books.query().where(published: true) 13 | Books.where(published: true) 14 | 15 | # bookshelf-contrib.Migration 16 | class Migration 17 | up: -> 18 | down: -> 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_sass/2017/components/notice-box.scss: -------------------------------------------------------------------------------- 1 | .notice-box { 2 | & { 3 | margin-bottom: 24px; 4 | color: $base-mute; 5 | } 6 | 7 | @media (max-width: 480px) { 8 | margin-bottom: 16px; 9 | } 10 | 11 | &::before { 12 | content: ''; 13 | @include ion-md-information-circle(24px, $base-mute3); 14 | margin-right: 8px; 15 | } 16 | 17 | & > a { 18 | text-decoration: none; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /_includes/2017/search-footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 11 |
12 |
13 | -------------------------------------------------------------------------------- /nocode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nocode 3 | layout: 2017/sheet 4 | updated: 2018-03-17 5 | intro: | 6 | [Nocode](https://github.com/kelseyhightower/nocode) is the best way to write secure and reliable applications. Write nothing; deploy nowhere. 7 | --- 8 | 9 | ## Nothing 10 | {: .-one-column} 11 | 12 |































13 | -------------------------------------------------------------------------------- /_js/behaviors/searchable-item.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import permutate from '../helpers/permutate' 3 | 4 | /** 5 | * Sets search indices (`data-search-index` attribute) 6 | */ 7 | 8 | onmount('[data-js-searchable-item]', function () { 9 | const data = JSON.parse(this.getAttribute('data-js-searchable-item') || '{}') 10 | const words = permutate(data) 11 | 12 | this.setAttribute('data-search-index', words.join(' ')) 13 | }) 14 | -------------------------------------------------------------------------------- /rails-features.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rails features 3 | category: Rails 4 | --- 5 | 6 | ### [Page caching](https://github.com/rails/actionpack-page_caching) 7 | 8 | class WeblogController < ActionController::Base 9 | caches_page :show, :new 10 | end 11 | 12 | This will generate cache files such as `weblog/show/5.html` and 13 | `weblog/new.html`, which match the URLs used that would normally trigger dynamic 14 | page generation 15 | -------------------------------------------------------------------------------- /_includes/2017/related-posts-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 | {{ include.page.title }} 4 | 5 | cheatsheet 6 | 7 | {% if include.page.layout == '2017/sheet' %} 8 | 9 | {% endif %} 10 | 11 | 12 |
  • 13 | -------------------------------------------------------------------------------- /_js/behaviors/no-preview.js: -------------------------------------------------------------------------------- 1 | import remove from 'dom101/remove' 2 | import onmount from 'onmount' 3 | import addClass from 'dom101/add-class' 4 | 5 | import { isPreview } from '../helpers/preview' 6 | 7 | /* 8 | * Behavior: Things to remove when preview mode is on 9 | */ 10 | 11 | onmount('[data-js-no-preview]', function (b) { 12 | if (isPreview()) { 13 | remove(this) 14 | addClass(document.documentElement, 'PreviewMode') 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /browser-sync.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Browsersync 3 | category: JavaScript libraries 4 | --- 5 | 6 | ``` 7 | npm i -g browser-sync 8 | ``` 9 | {:.terminal} 10 | 11 | ### Start a server 12 | 13 | ```sh 14 | browser-sync start --server --files='**/*.html, **/*.css' 15 | ``` 16 | 17 | ### Options 18 | 19 | ```sh 20 | --port=N 21 | --proxy="http://127.0.0.1:3000" 22 | ``` 23 | 24 | ### Reference 25 | 26 | * [browsersync.io](http://browsersync.io) 27 | -------------------------------------------------------------------------------- /emacs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Emacs 3 | category: CLI 4 | --- 5 | 6 | ### Movements 7 | 8 | ^n ^p # up/down 9 | ^f ^b # left/right 10 | 11 | ^v Mv # up/down page 12 | 13 | ^a ^e # begin/end of line 14 | Ma Me # begin/end of sentence 15 | 16 | ### Basic 17 | 18 | ^x ^f # find file 19 | ^x ^s # save file 20 | 21 | ### Command line 22 | 23 | Mx 24 | 25 | ### Packages 26 | 27 | Mx package-install RET evil RET 28 | -------------------------------------------------------------------------------- /man.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Man 3 | category: CLI 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Man paths 8 | 9 | | `1` | General User Commands | 10 | | `2` | System Calls | 11 | | `3` | Library Routines | 12 | | `4` | Special Files and Sockets | 13 | | `5` | File formats and Conventions | 14 | | `6` | Games and Fun Stuff | 15 | | `7` | Miscellaneous Documentation | 16 | | `8` | System Administration | 17 | | `9` | Kernel and Programming Style | 18 | | `n` | Tcl/Tk | 19 | -------------------------------------------------------------------------------- /_js/behaviors/search-form.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import on from 'dom101/on' 3 | 4 | /** 5 | * Submitting the search form 6 | */ 7 | 8 | onmount('[data-js-search-form]', function () { 9 | on(this, 'submit', e => { 10 | e.preventDefault() 11 | 12 | const link = document.querySelector('a[data-search-index]:visible') 13 | const href = link && link.getAttribute('href') 14 | 15 | if (href) window.location = href 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /_sass/2017/components/h2-section.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * h2 section 3 | */ 4 | 5 | /* Hide the first h2 heading */ 6 | .h2-section { 7 | &:first-child:not(.-no-hide) > h2 { 8 | display: none; 9 | } 10 | 11 | @media (min-width: 481px) { 12 | & + & { 13 | margin-top: 48px; 14 | } 15 | } 16 | 17 | /* Hide anchors until mouseover */ 18 | & > .anchor { 19 | opacity: 0; 20 | } 21 | 22 | &:hover > .anchor { 23 | opacity: 1; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /appcache.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Appcache 3 | category: HTML 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Format 8 | 9 | ``` 10 | CACHE MANIFEST 11 | # version 12 | 13 | CACHE: 14 | http://www.google.com/jsapi 15 | /assets/app.js 16 | /assets/bg.png 17 | 18 | NETWORK: 19 | * 20 | ``` 21 | 22 | Note that Appcache is deprecated! 23 | 24 | See: [Using the application cache](https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache) _(developer.mozilla.org)_ 25 | -------------------------------------------------------------------------------- /_sass/2017/components/comments-section.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Disqus 3 | */ 4 | 5 | .comments-section { 6 | & { 7 | display: flex; 8 | } 9 | 10 | // Mobile: full width 11 | @media (max-width: 768px) { 12 | & > .comments { 13 | flex: 1 0 100%; 14 | width: 100%; 15 | } 16 | } 17 | 18 | // Desktop: partial width 19 | @media (min-width: 769px) { 20 | & > .comments { 21 | flex: 0 1 66%; 22 | min-width: 300px; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /rack-test.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: rack-test 3 | category: Ruby libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Methods 8 | 9 | ```ruby 10 | get 'url' 11 | post 'url', 'name' => 'john' 12 | put 13 | patch 14 | delete 15 | options 16 | head 17 | ``` 18 | 19 | ```ruby 20 | authorize 'user', 'pass' 21 | env 'rack.session', csrf: 'token' 22 | header 'Content-Type', 'text/html' 23 | ``` 24 | 25 | See [rack/test.rb](https://github.com/brynary/rack-test/blob/master/lib/rack/test.rb). 26 | -------------------------------------------------------------------------------- /_js/helpers/qs.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Helper: minimal qs implementation 3 | */ 4 | 5 | export default function qs (search) { 6 | search = search.substr(1) 7 | const parts = search.split('&').map(p => p.split('=')) 8 | return parts.reduce((result, part) => { 9 | result[part[0]] = qsdecode(part[1]) 10 | return result 11 | }, {}) 12 | } 13 | 14 | export function qsdecode (string) { 15 | if (!string) string = '' 16 | string = string.replace(/\+/g, ' ') 17 | return string 18 | } 19 | -------------------------------------------------------------------------------- /ansible-examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ansible examples 3 | category: Ansible 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Examples 8 | 9 | * [Ruby installation](https://github.com/chelsea/ansible-example-ruby/blob/master/roles/webserver/tasks/main.yml) _(github.com)_ 10 | * [Postgres installation](https://github.com/chelsea/ansible-example-ruby/blob/master/roles/db/tasks/main.yml) _(github.com)_ 11 | * [GitLab installation](https://github.com/tingtun/ansible-playbook-gitlab) _(github.com)_ 12 | -------------------------------------------------------------------------------- /datetime.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Date & time formats 3 | layout: 2017/sheet 4 | weight: -5 5 | updated: 2017-09-04 6 | tags: [Featurable] 7 | --- 8 | 9 | ## Common time formats 10 | {: .-one-column} 11 | 12 | - [UNIX strftime](./strftime) - Used by Ruby, `date`, and more 13 | - [Moment.js](./moment#formatting) - Used by Moment.js, date-fns, and more 14 | 15 | {% include common/strftime_format.md title="strftime format" %} 16 | 17 | {% include common/moment_format.md title="Moment.js format" %} 18 | -------------------------------------------------------------------------------- /_data/categories.yml: -------------------------------------------------------------------------------- 1 | enabled: true 2 | names: 3 | - Analytics 4 | - Ansible 5 | - Apps 6 | - C-like 7 | - CLI 8 | - CSS 9 | - Databases 10 | - Devops 11 | - Elixir 12 | - Git 13 | - HTML 14 | - Java & JVM 15 | - JavaScript 16 | - JavaScript libraries 17 | - Jekyll 18 | - Ledger 19 | - Markup 20 | - macOS 21 | - Node.js 22 | - PHP 23 | - Python 24 | - Rails 25 | - React 26 | - Ruby 27 | - Ruby libraries 28 | - Vim 29 | - Fitness 30 | - Others 31 | -------------------------------------------------------------------------------- /_includes/2017/announcements-list.html: -------------------------------------------------------------------------------- 1 | {% if site.data.content.announcement %} 2 |
    3 |
    4 |

    {{ site.data.content.announcement.title }}

    5 |
    {{ site.data.content.announcement.body | markdownify }}
    6 | 7 |
    8 |
    9 | {% endif %} 10 | 11 | -------------------------------------------------------------------------------- /_sass/2017/components/intro-content.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * A prelude/intro to the article 3 | */ 4 | 5 | .intro-content { 6 | // Horizontal line, but I don't like how it looks! 7 | // &::before { 8 | // content: ''; 9 | // display: block; 10 | // margin-bottom: 16px; 11 | // height: 1px; 12 | // background: linear-gradient(to right, $dark-line-color, transparent 50%); 13 | 14 | // @media (min-width: 769px) { 15 | // margin-bottom: 32px; 16 | // } 17 | // } 18 | } 19 | -------------------------------------------------------------------------------- /_sass/2017/components/related-post-list.scss: -------------------------------------------------------------------------------- 1 | .related-post-list { 2 | &, 3 | & > li { 4 | margin: 0; 5 | padding: 0; 6 | list-style-type: none; 7 | } 8 | 9 | & { 10 | display: flex; 11 | margin: -4px; 12 | flex-wrap: wrap; 13 | } 14 | 15 | @media (max-width: 768px) { 16 | flex-wrap: wrap; 17 | } 18 | 19 | & > .item { 20 | flex: 1 1 auto; 21 | margin: 4px; 22 | 23 | @media (min-width: 481px) { 24 | flex: 1 1 40%; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /rubiks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rubiks cube 3 | --- 4 | 5 | ### Getting the cross 6 | 7 | * L (N W C) 8 | * line (E C W) 9 | * cross (N E W S C) 10 | 11 | `F R U R' U' F'` 12 | 13 | ### Aligning the cross's sides 14 | 15 | * Nothing aligned 16 | * line (N C S) 17 | * L (N C E) 18 | * All are aligned 19 | 20 | `R U R' U R 2U R'` 21 | 22 | ### Aligning the corners 23 | 24 | * 0 spots ok 25 | * 1 spot ok in south-east 26 | * 4 spots ok: proceed 27 | 28 | `U R U' L' U R' U' L` 29 | 30 | 31 | -------------------------------------------------------------------------------- /_js/helpers/__tests__/qs.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import qs from '../qs' 3 | 4 | describe('qs()', () => { 5 | test('basic', run({ 6 | input: '?preview=1', 7 | output: { preview: '1' } 8 | })) 9 | 10 | test('two fragments', run({ 11 | input: '?a=1&b=2', 12 | output: { a: '1', b: '2' } 13 | })) 14 | 15 | function run ({ input, output }) { 16 | return function () { 17 | const result = qs(input) 18 | expect(result).toEqual(output) 19 | } 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /_layouts/redirect.html: -------------------------------------------------------------------------------- 1 | 2 | {% assign target = page.redirect.to | remove: '.html' | replace: 'cheatsheets/cheatsheets', 'cheatsheets' %} 3 | 4 | 5 | Redirecting… 6 | 7 | 8 |

    Redirecting...

    9 | Click here if you are not redirected. 10 | 11 | 12 | -------------------------------------------------------------------------------- /rails-gems.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rails gems 3 | category: Rails 4 | --- 5 | 6 | ### Rico's preferred rails gems 7 | 8 | Development: 9 | 10 | gem 'spring' # code reloading 11 | gem 'letter_opener' 12 | gem 'better_errors' 13 | gem 'meta-tags' 14 | gem 'guard-rspec' 15 | 16 | Prod: 17 | 18 | gem 'kaminari' # pagination 19 | gem 'devise' 20 | gem 'meta-tags', require: 'meta_tags' 21 | gem 'friendly_id' 22 | gem 'bourbon' 23 | gem 'neat' 24 | gem 'turbolinks' 25 | -------------------------------------------------------------------------------- /nodejs-path.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: path 3 | category: Node.js 4 | --- 5 | 6 | fs.realpath('/etc/passwd', function(err, path) { /* "/private/etc/passwd" */ 7 | }); 8 | 9 | dir = path.join('etc', 'passwd'); 10 | dir = path.resolve('/etc', 'passwd', '..', 'var'); 11 | 12 | path.dirname('/etc/passwd') //=> "/etc" 13 | path.basename('/etc/passwd') //=> "passwd" 14 | path.basename('/etc/rc.d', '.d') //=> "rc" 15 | 16 | ### References 17 | 18 | - http://nodejs.org/api/path.html 19 | -------------------------------------------------------------------------------- /_inactive/homebrew-formula.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Homebrew formula 3 | --- 4 | 5 | brew create http://example.com/foo-0.1.tar.gz 6 | 7 | https://github.com/Homebrew/homebrew/blob/master/share/doc/homebrew/Formula-Cookbook.md#formula-cookbook 8 | 9 | assert(this.ary.indexOf(zero) === two) 10 | 11 | 12 | ``` 13 | def install 14 | system "./configure", "--prefix=#{prefix}", "--disable-debug", "--disable-dependency-tracking" 15 | system "make", "install" 16 | cd "build/cmake" 17 | mv "a", "b" 18 | end 19 | ``` 20 | -------------------------------------------------------------------------------- /_sass/2017/components/hint-mark.scss: -------------------------------------------------------------------------------- 1 | .hint-mark { 2 | & { 3 | cursor: help; 4 | } 5 | 6 | & > i::before { 7 | content: '?'; 8 | font-size: 11px; 9 | font-weight: bold; 10 | font-style: normal; 11 | } 12 | 13 | & > i { 14 | display: inline-block; 15 | width: 16px; 16 | height: 16px; 17 | line-height: 16px - 4px; 18 | text-align: center; 19 | border-radius: 50%; 20 | background: rgba($base-b3, 0.3); 21 | color: $base-mute; 22 | margin: 0 0.4em; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include meta.html %} 5 | {% include polyfills.html %} 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | -------------------------------------------------------------------------------- /nock.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nock 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Nock 8 | 9 | ```js 10 | scope = nock('http://foo.com') 11 | scope = nock('http://foo.com', { allowUnmocked: true }) 12 | ``` 13 | 14 | ```js 15 | nock('http://foo.com') 16 | .get('/user') 17 | .reply(200, { id: 1234 }) 18 | ``` 19 | 20 | ### Filtering 21 | 22 | ```js 23 | nock('http://foo.com') 24 | .filteringPath(/[&\?]token=[^&]*/g, '') 25 | .get('/user') 26 | 27 | // catches "/user?token=..." as well 28 | ``` 29 | -------------------------------------------------------------------------------- /ansible-roles.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ansible roles 3 | category: Ansible 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Structure 8 | 9 | roles/ 10 | common/ 11 | tasks/ 12 | handlers/ 13 | files/ # 'copy' will refer to this 14 | templates/ # 'template' will refer to this 15 | meta/ # Role dependencies here 16 | vars/ 17 | defaults/ 18 | main.yml 19 | 20 | ### References 21 | 22 | * http://www.ansibleworks.com/docs/playbooks_roles.html 23 | -------------------------------------------------------------------------------- /_js/helpers/data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Stores and retrieves data from an element. Works like jQuery.data(). 3 | */ 4 | 5 | export function data (el, key, val) { 6 | if (typeof val !== 'undefined') { 7 | return getData(el, key) 8 | } else { 9 | return setData(el, key, val) 10 | } 11 | } 12 | 13 | export function getData (el, key) { 14 | const str = el.getAttribute('data-' + key) 15 | return JSON.parse(str || '{}') 16 | } 17 | 18 | export function setData (el, key, val) { 19 | el.setAttribute('data-' + key, JSON.stringify(val)) 20 | } 21 | -------------------------------------------------------------------------------- /_js/behaviors/dismissable.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import remove from 'dom101/remove' 3 | import removeClass from 'dom101/remove-class' 4 | 5 | import { getData } from '../helpers/data' 6 | import { isDismissed } from '../helpers/dismiss' 7 | import { isPreview } from '../helpers/preview' 8 | 9 | onmount('[data-js-dismissable]', function () { 10 | const id = getData(this, 'js-dismissable').id || '' 11 | 12 | if (isPreview() || isDismissed(id)) { 13 | remove(this) 14 | } else { 15 | removeClass(this, '-hide') 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /mixpanel.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mixpanel 3 | layout: 2017/sheet 4 | category: Analytics 5 | --- 6 | 7 | ### Identify 8 | 9 | ```js 10 | mixpanel.identify('284') 11 | mixpanel.people.set({ $email: 'hi@gmail.com' }) 12 | ``` 13 | 14 | ```js 15 | // Set common properties 16 | mixpanel.register({ age: 28, gender: 'male' }) 17 | ``` 18 | 19 | ### Track events 20 | 21 | ```js 22 | mixpanel.track('Login success') 23 | mixpanel.track('Search', { query: 'cheese' }) 24 | ``` 25 | 26 | ### References 27 | 28 | * 29 | -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blank 3 | type: other 4 | --- 5 | 6 | 7 | {{ site.url }}/ 8 | {% for page in site.pages %}{% if page.type == 'article' %}{{ site.url }}{{ page.url | remove: '.html' }} 9 | {% endif %}{% endfor %} 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Devhints 2 | 3 | > TL;DR for developer documentation - a ridiculous collection of cheatsheets 4 | 5 | [![Status](https://travis-ci.org/rstacruz/cheatsheets.svg?branch=master)](https://travis-ci.org/rstacruz/cheatsheets "See test builds") 6 | 7 |
    8 | 9 |

    10 | 11 |
    12 | ✨ devhints.io ✨ 13 |

    14 | 15 |
    16 | 17 | --- 18 | 19 | See [CONTRIBUTING.md](CONTRIBUTING.md) for developer notes. 20 | -------------------------------------------------------------------------------- /_sass/2017/components/comments-area.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Disqus 3 | */ 4 | 5 | .comments-area { 6 | & { 7 | margin: 32px 0 16px 0; 8 | } 9 | 10 | // Container 11 | & > .container { 12 | @include gutter(padding-left); 13 | @include gutter(padding-right); 14 | max-width: $area-width; 15 | margin: 0 auto; 16 | } 17 | 18 | // Horizontal line 19 | & > .container::before { 20 | content: ''; 21 | display: block; 22 | background: linear-gradient(to right, $dark-line-color 50%, transparent); 23 | height: 1px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /cidr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CIDR 3 | category: Misc 4 | layout: 2017/sheet 5 | updated: 2018-05-14 6 | --- 7 | 8 | ### CIDR ranges 9 | 10 | | Range | First IP | Last IP | 11 | | --- | --- | --- | 12 | | **10.0.0.0/24** | 10.0.0.0 | 10.0.0.255 | 13 | | **10.0.0.0/16** | 10.0.0.0 | 10.0.255.255 | 14 | | **10.0.0.0/8** | 10.0.0.0 | 10.255.255.255 | 15 | | **0.0.0.0/0** | (all) | (all) | 16 | 17 | ### Resources 18 | 19 | - [CIDR range calculator](http://ipaddressguide.com/cidr#range) _(ipaddressguide.com)_ 20 | -------------------------------------------------------------------------------- /ncftp.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ncftp 3 | category: CLI 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Bookmarking 8 | 9 | ```bash 10 | $ ncftp 11 | $ open -u username ftp.host.com 12 | $ bookmark bookmarkname 13 | ``` 14 | 15 | ### Mass download 16 | 17 | ```bash 18 | $ ncftpget -R bookmarkname /www/ . 19 | ``` 20 | 21 | ### Mass upload 22 | 23 | ```bash 24 | $ ncftpput -R bookmarkname /www/ . 25 | ``` 26 | 27 | ### Upload just the changed files 28 | 29 | ```bash 30 | $ git show --pretty="format:" --name-only HEAD~1 31 | $ ncftpget -R -C log bookmarkname /www/ . 32 | ``` 33 | -------------------------------------------------------------------------------- /rake.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rake 3 | category: Ruby 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Basic syntax 8 | 9 | ```rb 10 | namespace :foo do 11 | desc "Description" 12 | task :bar do 13 | ... 14 | end 15 | 16 | task :baz => :dependency do 17 | end 18 | 19 | task :baz => [:dep1, :dep2, :dep3] do 20 | end 21 | end 22 | 23 | # rake foo:bar 24 | ``` 25 | 26 | ### Rake task with arguments 27 | 28 | ```rb 29 | desc "Do something" 30 | task :workit, [:id] => :environment do |_, args| 31 | id = args[:id] 32 | end 33 | 34 | # rake workit[234] 35 | ``` 36 | -------------------------------------------------------------------------------- /ubuntu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ubuntu 3 | --- 4 | 5 | ### Aptitude stuff 6 | 7 | aptitude search mysql # Look for something 8 | dpkg -S `which tsclient` # What package does it belong to? 9 | dpkg -L aria2c # What does this package provide? 10 | dpkg -i *.deb # Install a deb file 11 | dpkg -s nodejs # Show info 12 | 13 | dpkg --get-selections # list installed packages 14 | 15 | ### Apt archives path 16 | 17 | /var/cache/apt/archives 18 | 19 | ### List services 20 | 21 | service --status-all 22 | -------------------------------------------------------------------------------- /html-share.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Share links 3 | layout: 2017/sheet 4 | category: HTML 5 | updated: 2017-09-04 6 | --- 7 | 8 | ## Share links 9 | {: .-one-column} 10 | 11 | Facebook: 12 | {:.-setup} 13 | 14 | ```html 15 | 16 | ``` 17 | 18 | Twitter: 19 | {:.-setup} 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | Google Plus: 26 | {:.-setup} 27 | 28 | ```html 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /inkscape.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inkscape 3 | category: Apps 4 | layout: 2017/sheet 5 | tags: [WIP] 6 | --- 7 | 8 | ### All 9 | 10 | | `-` _/_ `=` | Zoom in/out 11 | | `3` _/_ `4` | Zoom to selection / drawing 12 | | `5` _/_ `6` | Zoom to page / page width 13 | {: .-shortcuts} 14 | 15 | ### Select tool (F1) 16 | 17 | | `[ ]` | Rotate 18 | {: .-shortcuts} 19 | 20 | ### Edit path (F2) 21 | 22 | | `Ctrl` | constraint 23 | {: .-shortcuts} 24 | 25 | ### Dragging an anchor handle 26 | 27 | | `Ctrl` | snap to 15 degrees 28 | | `Alt` | ? 29 | {: .-shortcuts} 30 | 31 | ### Bezier (Shift F6) 32 | -------------------------------------------------------------------------------- /_inactive/gpg.md: -------------------------------------------------------------------------------- 1 | 2 | ### Encrypt decrypt 3 | 4 | gpg --encrypt --recepient 'James Receiverson' foo.txt 5 | gpg --decrypt foo.txt.gpg 6 | 7 | ### Making keys 8 | 9 | gpg --gen-key 10 | 11 | ### Share your public key 12 | 13 | # via file 14 | gpg --armor --output pub.txt --export "Rico Sta. Cruz" 15 | 16 | # via server 17 | gpg --send-keys "Rico Sta. Cruz" --keyserver http://... 18 | 19 | ### Key management 20 | 21 | gpg --list-keys 22 | gpg --delete-key 'email@addie' 23 | 24 | ### See 25 | 26 | * https://www.madboa.com/geek/gpg-quickstart/ 27 | -------------------------------------------------------------------------------- /_inactive/ios.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: iOS 3 | --- 4 | 5 | Multiple Exchange accounts: 6 | 7 | scp root@iphone.local:/private/var/mobile/Library/Preferences/com.apple.accountsettings.plist . 8 | 9 | Paths: 10 | 11 | /Library/Themes # Winterboard themes 12 | /User/Media/DCIM/100APPLE # Photos 13 | /User/Media/Recordings # Voice recordings 14 | 15 | Copy photos: 16 | 17 | rsync -v -r root@iphone.local:/User/Media/DCIM/100APPLE ./photos 18 | 19 | Ringtone conversion using ffmpeg: 20 | 21 | ffmpeg -i foo.mp3 -ac 1 -ab 128000 -f mp4 -acodec libfaac -y target.m4r 22 | -------------------------------------------------------------------------------- /html-microformats.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Microformats 3 | category: HTML 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Author 8 | 9 | ``` html 10 | 14 | 15 | ``` 16 | 17 | ### Time 18 | 19 | ``` html 20 | 21 | ``` 22 | -------------------------------------------------------------------------------- /postgresql.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PostgreSQL 3 | category: Databases 4 | --- 5 | 6 | Replace anything within `` accordingly 7 | 8 | ### Console 9 | 10 | $ psql #logs in to default database & default user 11 | $ sudo -u psql #logs in with a particular user 12 | 13 | ### Commands 14 | 15 | * Show roles: `\du` 16 | * Show tables: `\dt` 17 | * Show databases: `\l` 18 | * Connect to a database: `\c ` 19 | * Show columns of a table: `\d ` or `\d+
    ` 20 | * Quit: `\q` 21 | 22 | ### Creating database 23 | 24 | $ createdb databasename 25 | -------------------------------------------------------------------------------- /weinre.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Weinre 3 | category: JavaScript libraries 4 | --- 5 | 6 | * [Weinre](http://people.apache.org/~pmuellr/weinre/) 7 | 8 | Install: 9 | 10 | $ npm install -g weinre 11 | 12 | Start the server: 13 | 14 | $ weinre --boundHost 0.0.0.0 15 | $ open http://localhost:8080 16 | 17 | 18 | -------------------------------------------------------------------------------- /_js/behaviors/search-input.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import * as Search from '../helpers/search' 3 | import qs from '../helpers/qs' 4 | import on from 'dom101/on' 5 | 6 | onmount('[data-js-search-input]', function () { 7 | on(this, 'input', () => { 8 | const val = this.value 9 | 10 | if (val === '') { 11 | Search.showAll() 12 | } else { 13 | Search.show(val) 14 | } 15 | }) 16 | 17 | const query = (qs(window.location.search) || {}).q 18 | if (query && query.length) { 19 | this.value = query 20 | setTimeout(() => { Search.show(query) }) 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /ruby21.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ruby 2.1 3 | category: Ruby 4 | --- 5 | 6 | ### Named arguments with defaults 7 | 8 | # length is required 9 | def pad(num, length:, char: "0") 10 | num.to_s.rjust(length, char) 11 | end 12 | 13 | pad(42, length: 6) #=> "000042" 14 | pad(42) #=> # 15 | 16 | ### Module.prepend 17 | 18 | prepend(Module.new do 19 | define_method ... 20 | end) 21 | 22 | ### References 23 | 24 | * http://globaldev.co.uk/2013/03/ruby-2-0-0-in-detail 25 | * http://globaldev.co.uk/2014/05/ruby-2-1-in-detail 26 | -------------------------------------------------------------------------------- /js-speech.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JavaScript speech synthesis 3 | category: JavaScript 4 | layout: 2017/sheet 5 | weight: -1 6 | --- 7 | 8 | ## SpeechSynthesisUtterance 9 | {: .-one-column} 10 | 11 | ```js 12 | function speak (message) { 13 | var msg = new SpeechSynthesisUtterance(message) 14 | var voices = window.speechSynthesis.getVoices() 15 | msg.voice = voices[0] 16 | window.speechSynthesis.speak(msg) 17 | } 18 | ``` 19 | 20 | ```js 21 | speak('Hello, world') 22 | ``` 23 | 24 | See: [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) _(developer.mozilla.org)_ 25 | -------------------------------------------------------------------------------- /_sass/2017/components/search-footer.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Search bar around the footer 3 | */ 4 | 5 | .search-footer { 6 | & { 7 | @include section-with-container; 8 | padding-top: 16px; 9 | padding-bottom: 16px; 10 | background: $gray-bg; 11 | border-top: solid 1px $dark-line-color; 12 | border-bottom: solid 1px $dark-line-color; 13 | } 14 | } 15 | 16 | .search-footer-section { 17 | & { 18 | display: flex; 19 | } 20 | 21 | & > .search { 22 | flex: 0 1 640px; 23 | } 24 | 25 | & > .links { 26 | @include gutter(padding-left); 27 | flex: 0 1 auto; 28 | margin-left: auto; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /_sass/2017/markdown/local-anchor.scss: -------------------------------------------------------------------------------- 1 | .local-anchor { 2 | & { 3 | margin-left: -.9em; 4 | margin-right: .1em; 5 | padding: 0 .1em; 6 | } 7 | 8 | // Decoration 9 | .MarkdownBody &, 10 | .MarkdownBody &:visited { 11 | color: $base-mute; 12 | text-decoration: inherit; 13 | opacity: .5; 14 | } 15 | 16 | .MarkdownBody &:target, 17 | .MarkdownBody :target > & { 18 | color: $base-a; 19 | opacity: 1; 20 | } 21 | 22 | .MarkdownBody &:hover, 23 | .MarkdownBody &:focus { 24 | color: white; 25 | background: $base-a; 26 | opacity: 1; 27 | text-decoration: inherit; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /_layouts/2017/not_found.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include 2017/head.html %} 5 | 6 | 7 | 8 | {% include 2017/top-nav.html page=page noshare=true %} 9 | 10 |
    11 | 21 |
    22 | 23 | {% include 2017/foot.html %} 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /_includes/foot.html: -------------------------------------------------------------------------------- 1 | {% include about-the-site.html %} 2 | 3 | 4 | {% comment %}{% endcomment %} 5 | {% for lang in page.hljs_languages %} 6 | 7 | {% endfor %} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | type: article 3 | --- 4 | {% include head.html %} 5 | {% include site-header.html %} 6 | 7 | {% include 2017/article-schema.html page=page %} 8 | 9 |
    10 |
    11 |
    12 |

    13 |

    {{ page.title }}

    14 | {% include social-list.html page=page %} 15 |
    16 | 17 |
    18 | {{ content }} 19 |
    20 | 21 | {% include social-list.html page=page %} 22 |
    23 |
    24 | 25 | {% include foot.html %} 26 | -------------------------------------------------------------------------------- /siege.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Siege 3 | category: Others 4 | --- 5 | 6 | ``` 7 | siege -b -c=10 -t=5m http://... 8 | ``` 9 | 10 | ``` 11 | -c, --concurrent=N 12 | -t, --time=MINSm 13 | -r, --reps=N 14 | ``` 15 | 16 | ``` 17 | -i, --internet Hit URLs randomly 18 | -b, --benchmark No delay between requests 19 | ``` 20 | 21 | ### Configuration 22 | 23 | ``` 24 | -f, --file=FILE load urls.txt 25 | -R, --rc=FILE load siegerc 26 | ``` 27 | 28 | > Also see: [siegerc](https://gist.github.com/stansmet/3067988) 29 | 30 | ### Headers 31 | 32 | ``` 33 | -H, --header="Cookie: foo=bar" 34 | -A, --user-agent="Mozilla" 35 | -T, --content-type="text/html" 36 | ``` 37 | -------------------------------------------------------------------------------- /spreadsheet.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Spreadsheet functions 3 | --- 4 | 5 | ### If 6 | 7 | =IF(test, then, else) 8 | =IF(EQ(A1, "paid"), "true", "false") 9 | 10 | ### Comparators 11 | 12 | =EQ(a,b) NE() 13 | =GT() GTE() LT() LTE() 14 | 15 | ### Math 16 | 17 | =POW(2, 32) # 2^32 18 | =SIN() ACOS() etc 19 | =CEILING(n,sig,mode) 20 | =FLOOR(n,sig,mode) 21 | =INT(n) 22 | 23 | =SUM(range) 24 | 25 | =SUMIF(range, criteria, sum_range) 26 | =SUMIF(A1:A5, ">300", B1:B5) # if A# is >300, use B# 27 | 28 | ### Core 29 | 30 | =TO_DATE(number) 31 | 32 | ### Vlook 33 | 34 | =VLOOKUP(value, range, column_index) 35 | 36 | -------------------------------------------------------------------------------- /_includes/2017/berry-sponsor.html: -------------------------------------------------------------------------------- 1 | {% assign pixel_href = 'https://codefund.io/t/l/TOKEN/pixel.png' | replace: 'TOKEN', site.data.berry.token %} 2 | {% assign link_href = 'https://codefund.io/t/c/TOKEN/' | replace: 'TOKEN', site.data.berry.token %} 3 | 4 | 14 | -------------------------------------------------------------------------------- /_js/behaviors/dismiss.js: -------------------------------------------------------------------------------- 1 | import closest from 'dom101/closest' 2 | import remove from 'dom101/remove' 3 | import on from 'dom101/on' 4 | import { getData } from '../helpers/data' 5 | import onmount from 'onmount' 6 | import * as Dismiss from '../helpers/dismiss' 7 | 8 | /** 9 | * Dismiss button 10 | */ 11 | 12 | onmount('[data-js-dismiss]', function () { 13 | const parent = closest(this, '[data-js-dismissable]') 14 | const dismissable = getData(parent, 'js-dismissable') 15 | const id = (dismissable && dismissable.id) || '' 16 | 17 | on(this, 'click', e => { 18 | Dismiss.setDismissed(id) 19 | e.preventDefault() 20 | if (parent) remove(parent) 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /_includes/2017/pages-list-item.html: -------------------------------------------------------------------------------- 1 | {% assign slug = include.page.url | remove: '.html' | remove_first: '/' %} 2 | 5 | 6 | {{ slug }} 7 | 8 | {% if include.page.layout == '2017/sheet' %} 9 | 10 | {% endif %} 11 | 12 | {{ include.page.title }} {{ include.page.redirect_to }} 13 | 14 | 15 | -------------------------------------------------------------------------------- /qunit.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Qunit 3 | category: JavaScript libraries 4 | --- 5 | 6 | QUnit.module('a'); 7 | QUnit.test('ok', function (t) { ... }); 8 | 9 | ### Hooks 10 | 11 | // each test 12 | QUnit.testStart(function) 13 | QUnit.testEnd(function) 14 | 15 | // each module 16 | QUnit.moduleStart(function) 17 | QUnit.moduleEnd(function) 18 | 19 | // all 20 | QUnit.begin(function) 21 | QUnit.done(function) 22 | 23 | ### Assertions 24 | 25 | t.equal(actual, expected) 26 | t.deepEqual(actual, expected) 27 | t.strictEqual(actual, expected) 28 | t.propEqual(actual, expected) 29 | 30 | t.notEqual 31 | 32 | t.expect(amount) 33 | -------------------------------------------------------------------------------- /_js/behaviors/searchable-header.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import { nextUntil } from '../helpers/dom' 3 | import matches from 'dom101/matches' 4 | 5 | // Ensure that search-index is set first 6 | import './searchable-item' 7 | 8 | /** 9 | * Propagate item search indices to headers 10 | */ 11 | 12 | onmount('[data-js-searchable-header]', function () { 13 | const els = nextUntil(this, '[data-js-searchable-header]') 14 | .filter(el => matches(el, '[data-search-index]')) 15 | 16 | const keywords = els 17 | .map(n => n.getAttribute('data-search-index')) 18 | .join(' ') 19 | .split(' ') 20 | 21 | this.setAttribute('data-search-index', keywords.join(' ')) 22 | }) 23 | -------------------------------------------------------------------------------- /_js/helpers/dismiss.js: -------------------------------------------------------------------------------- 1 | import * as Store from './store' 2 | 3 | /** 4 | * Dismisses an announcement. 5 | * 6 | * @example 7 | * setDismissed('2017-09-02-happy-birthday') 8 | */ 9 | 10 | export function setDismissed (id) { 11 | Store.update('dismissed', function (data) { 12 | data[id] = true 13 | return data 14 | }) 15 | } 16 | 17 | /** 18 | * Checks if an announcement has been dismissed before. 19 | * 20 | * @example 21 | * setDismissed('2017-09-02-happy-birthday') 22 | * isDismissed('2017-09-02-happy-birthday') => true 23 | */ 24 | 25 | export function isDismissed (id) { 26 | const data = Store.fetch('dismissed') 27 | return data && data[id] 28 | } 29 | -------------------------------------------------------------------------------- /_support/webpack.critical.js: -------------------------------------------------------------------------------- 1 | const join = require('path').resolve 2 | const webpack = require('webpack') 3 | 4 | module.exports = { 5 | context: join(__dirname, '..'), 6 | entry: './_js/critical.js', 7 | output: { 8 | path: join(__dirname, '..', '_includes', '2017', 'critical'), 9 | filename: 'critical.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | use: [ 17 | { loader: 'babel-loader' } 18 | ] 19 | } 20 | ] 21 | }, 22 | stats: 'minimal', 23 | plugins: [ 24 | new webpack.EnvironmentPlugin({ 25 | NODE_ENV: 'production' 26 | }) 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /frequency-separation-retouching.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Frequency separation retouching 3 | category: Others 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Frequency separation retouching in Photoshop 8 | 9 | Duplicate the layer twice. Perform these in each layer: 10 | {: .-setup} 11 | 12 | #### Lower layer 13 | 14 | - Apply **Gaussian Blur** 15 | 16 | #### Upper layer 17 | 18 | - Set layer mask to **Linear light** 19 | - Image → **Apply Image** 20 | - Layer: _(select the lower layer)_ 21 | - Blending mode: `Subtract` 22 | - Scale: `2` 23 | - Offset: `128` 24 | 25 | ### Reference 26 | 27 | - 28 | {: .-also-see} 29 | -------------------------------------------------------------------------------- /_sass/2017/placeholders/push-button.scss: -------------------------------------------------------------------------------- 1 | %push-button { 2 | display: inline-block; 3 | text-decoration: none; 4 | padding: 8px 16px; 5 | border-radius: 3px; 6 | 7 | &, 8 | &:visited { 9 | background-color: $base-a; 10 | background: $base-a-gradient; 11 | color: white; 12 | } 13 | 14 | &:hover, 15 | &:focus { 16 | background: darken($base-a, 16%); 17 | box-shadow: none; 18 | color: white; 19 | } 20 | } 21 | 22 | %push-button.-dark { 23 | &, 24 | &:visited { 25 | background: darken($base-a, 16%); 26 | color: white; 27 | } 28 | 29 | &:hover, 30 | &:focus { 31 | background: darken($base-a, 24%); 32 | color: white; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /zombie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Zombie 3 | category: JavaScript libraries 4 | --- 5 | 6 | 7 | browser 8 | .visit("http://.../", ->) 9 | .fill("email", "zombie@underworld.dead") 10 | .fill("password", "eat-the-living") 11 | .select("Born", "1985") 12 | .uncheck("Send newsletter") 13 | .clickLink("Link name") 14 | .pressButton("Sign", -> ...) 15 | 16 | .text("H1") 17 | 18 | 19 | expect(browser.query("#brains")) 20 | 21 | expect(browser.body.queryAll(".hand")).length 2 22 | 23 | console.log(browser.html()) 24 | console.log(browser.html("table.parts")) 25 | 26 | expect(Browser.text(".card-nopad small"), "A better way to get around!") 27 | -------------------------------------------------------------------------------- /_sass/2017/markdown/ul.scss: -------------------------------------------------------------------------------- 1 | .MarkdownBody ul.-six-column { 2 | & { 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | & > li { 8 | flex: 0 0 (100% / 6); 9 | 10 | @media (max-width: 480px) { 11 | flex: 0 0 (100% / 2); 12 | } 13 | 14 | @media (max-width: 768px) { 15 | flex: 0 0 (100% / 4); 16 | } 17 | } 18 | } 19 | 20 | .MarkdownBody ul.-four-column { 21 | & { 22 | display: flex; 23 | flex-wrap: wrap; 24 | } 25 | 26 | & > li { 27 | flex: 0 0 (100% / 4); 28 | 29 | @media (max-width: 480px) { 30 | flex: 0 0 (100% / 2); 31 | } 32 | 33 | @media (max-width: 768px) { 34 | flex: 0 0 (100% / 3); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /_sass/2017/components/home-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Home button inside `search-footer` 3 | */ 4 | 5 | .home-button { 6 | & { 7 | display: inline-block; 8 | box-shadow: inset 0 0 0 1px $dark-line-color; 9 | border-radius: 50%; 10 | } 11 | 12 | &, 13 | &:visited { 14 | color: $base-mute; 15 | } 16 | 17 | &:hover, 18 | &:focus { 19 | background-color: $base-a; 20 | color: white; 21 | } 22 | 23 | & > i::before { 24 | content: ''; 25 | @include ion-ios-home-outline(24px, $base-mute); 26 | height: 48px; 27 | line-height: 48px; 28 | width: 48px; 29 | } 30 | 31 | &:hover > i::before { 32 | background-image: ion-ios-home-image(white); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /animated_gif.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Animated GIFs 3 | category: CLI 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Animated GIFs 8 | {: .-one-column} 9 | 10 | ### Convert MP4 to GIF 11 | 12 | ```bash 13 | mkdir -p gif 14 | mplayer -ao null -vo gif89a:outdir=gif $INPUT 15 | mogrify -format gif *.png 16 | gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${INPUT%.*}.gif 17 | rm -rf gif 18 | ``` 19 | 20 | You'll need `mplayer`, `imagemagick` and `gifsicle`. This converts frames to .png, then turns them into an animated gif. 21 | 22 | ### A given range 23 | 24 | ```bash 25 | mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4 26 | ``` 27 | 28 | See `-ss` and `-endpos`. 29 | -------------------------------------------------------------------------------- /rubygems.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rubygems 3 | category: Ruby 4 | --- 5 | 6 | gem build *.gemspec # Build a gem 7 | gem install *.gem # Install locally 8 | gem push *.gem # Upload to rubygems.org 9 | gem yank foogem -v 0.0.1 # Take it back 10 | 11 | gem owner foogem -a rico@ricostacruz.com 12 | 13 | gem list # List local gems 14 | gem which rake # Point to where lib/rake.rb is 15 | gem search -r rails # [remote] Search for gems 16 | 17 | # https://github.com/fnando/gem-open 18 | gem open foogem 19 | GEM_EDITOR="vim" gem open foogem 20 | 21 | cd $(basename `gem which rake`) # Go to a gem's path 22 | -------------------------------------------------------------------------------- /social-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Social media images 3 | --- 4 | 5 | ### Facebook 6 | 7 | | What | Dimensions | 8 | |:---- | ----------:| 9 | | Cover photo | 851 x 315 | 10 | | Display picture | 168 x 168 ? | 11 | | Highlighted image | 1200 x 717 (appears 843 x 504) | 12 | | Share link (og:image) | 940 x 492 (1.91:1, appears as 470 x 246) | 13 | | Share link (square) | 1:1, appears as 114 x 114? | 14 | 15 | ### Twitter 16 | 17 | | What | Dimensions | 18 | |:---- | ----------:| 19 | | Page header | 1500 x 500 | 20 | | Display picture | 400 x 400 (shown as 200x200) | 21 | | In-stream photo preview | 440 x 220 (2:1) | 22 | 23 | ### References 24 | 25 | * https://developers.facebook.com/docs/plugins/checklist/ 26 | -------------------------------------------------------------------------------- /analytics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Analytics libraries 3 | layout: 2017/sheet 4 | category: Analytics 5 | --- 6 | 7 | ### Mixpanel 8 | 9 | ```js 10 | mixpanel.identify('284'); 11 | mixpanel.people.set({ $email: 'hi@gmail.com' }); 12 | mixpanel.register({ age: 28, gender: 'male' }); /* set common properties */ 13 | ``` 14 | 15 | [mixpanel](./mixpanel) 16 | {: .-crosslink} 17 | 18 | ### Google Analytics's analytics.js 19 | 20 | ```js 21 | ga('create', 'UA-XXXX-Y', 'auto'); 22 | ga('create', 'UA-XXXX-Y', { userId: 'USER_ID' }); 23 | ``` 24 | 25 | ```js 26 | ga('send', 'pageview'); 27 | ga('send', 'pageview', { 'dimension15': 'My custom dimension' }); 28 | ``` 29 | 30 | [analytics.js](./analytics.js) 31 | {: .-crosslink} 32 | -------------------------------------------------------------------------------- /phoenix@1.2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Phoenix 1.2 3 | category: Elixir 4 | layout: 2017/sheet 5 | weight: -1 6 | updated: 2018-01-15 7 | --- 8 | 9 | See [Phoenix](./phoenix) for a more updated cheatsheet. 10 | 11 | ### Directory structure (Legacy 1.2) 12 | 13 | ``` 14 | ├── _build 15 | ├── config/ 16 | ├── deps/ 17 | ├── lib/ 18 | │ ├── hello/ 19 | │ ├── hello.ex 20 | ├── node_modules/ 21 | ├── priv/ 22 | ├── test/ 23 | └── web/ 24 | │ ├── channels/ 25 | │ ├── controllers/ 26 | │ ├── models/ 27 | │ ├── static/ 28 | │ ├── templates/ 29 | │ ├── views/ 30 | │ ├── gettext.ex 31 | │ ├── router.ex 32 | │ ├── web.ex 33 | ├── mix.exs 34 | ``` 35 | 36 | This is Phoenix 1.2's structure. Phoenix 1.3 has no `models`. 37 | -------------------------------------------------------------------------------- /virtual-dom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Virtual-dom 3 | category: JavaScript libraries 4 | --- 5 | 6 | See 7 | 8 | ```js 9 | var h = require('virtual-dom/h') 10 | var diff = require('virtual-dom/diff') 11 | var patch = require('virtual-dom/patch') 12 | var createElement = require('virtual-dom/create-element') 13 | ``` 14 | 15 | ### Rendering 16 | 17 | ```js 18 | tree = h('div', { style: { color: 'blue' } }, [ 'hello' ]) 19 | el = createElement(tree) 20 | document.body.appendChild(root) 21 | ``` 22 | 23 | ### Updating 24 | 25 | ```js 26 | tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ]) 27 | delta = diff(tree, tree2) 28 | el = patch(el, delta) // patch() modifies el 29 | ``` 30 | -------------------------------------------------------------------------------- /_support/cf-purge.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # Helper to copy the latest cheatsheets to the clipboard for CloudFlare 3 | # purging. This ensures visitors will see new versions. 4 | 5 | ( 6 | git log "master@{3 days ago}..HEAD" --pretty="" --name-only \ 7 | | grep -E '\.md$' \ 8 | | grep -v -E 'CONTRIBUTING|README|Readme' \ 9 | | grep -v -E '^_' \ 10 | | sort \ 11 | | uniq \ 12 | | sed 's/\.md$//g' 13 | ) \ 14 | | sed 's#^#https://devhints.io/#g' \ 15 | | xargs echo https://devhints.io/ \ 16 | | pbcopy 17 | 18 | echo "Copied to clipboard." 19 | echo "Purge it here:" 20 | echo "" 21 | echo " https://www.cloudflare.com/a/caching/devhints.io" 22 | echo "" 23 | echo "Then click 'Purge Individual Files'" 24 | -------------------------------------------------------------------------------- /inline-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline documentation 3 | --- 4 | 5 | * Ruby: rdoc 6 | * JavaScript: jsdoc 7 | 8 | ### RDoc 9 | 10 | # Gets a circle's area 11 | # 12 | # @example 13 | # 14 | # area(3) 15 | # #=> 28.27 16 | # 17 | # @param [Number] r The radius of the ricle 18 | # @return [true] If so 19 | # 20 | # == Definition lists 21 | # 22 | # list:: hi. 23 | # +foo+:: parameterized 24 | # 25 | # == Definition lists 26 | # [foo] also 27 | # [bar] like this 28 | 29 | http://rdoc.rubyforge.org/RDoc/Markup.html 30 | 31 | ### Jsdoc 32 | 33 | /** 34 | * Ads numbers 35 | * 36 | * @this {Circle} 37 | * @param {Number} r The radius 38 | -------------------------------------------------------------------------------- /handlebars.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Handlebars.js 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | weight: -1 6 | --- 7 | 8 | {% raw %} 9 | 10 | ### Helpers 11 | 12 | ```js 13 | Handlebars.registerHelper('link_to', function() { 14 | return "" + this.body + ""; 15 | }) 16 | ``` 17 | 18 | ```js 19 | var context = { posts: [{url: "/hello-world", body: "Hello World!"}] } 20 | var source = "
      {{#posts}}
    • {{{link_to}}}
    • {{/posts}}
    " 21 | ``` 22 | 23 | ```js 24 | var template = Handlebars.compile(source) 25 | template(context) 26 | ``` 27 | 28 | Would render: 29 | 30 | ```html 31 | 34 | ``` 35 | 36 | {% endraw %} 37 | -------------------------------------------------------------------------------- /ledger-query.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ledger queries 3 | category: Ledger 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Query characters 8 | 9 | | Query | Description | 10 | | --- | --- | 11 | | `@payee` | Payee | 12 | | `%tag` | Tag | 13 | | `=note` | Note | 14 | | `#code` | Code | 15 | | --- | --- | 16 | | `TERM and TERM` | Boolean and | 17 | | `TERM or TERM` | Boolean or | 18 | | `not TERM` | Boolean not | 19 | 20 | ### Examples 21 | 22 | ```sh 23 | ledger r @taco 24 | ledger r comment =~ /landline/ 25 | ``` 26 | 27 | ## References 28 | {: .-one-column} 29 | 30 | - 31 | -------------------------------------------------------------------------------- /sed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: sed 3 | category: CLI 4 | layout: 2017/sheet 5 | intro: | 6 | Here's home hints on using sed. 7 | --- 8 | 9 | ### In place replacements 10 | 11 | #### In GNU sed: use `-i` without arg. 12 | 13 | ```bash 14 | sed -i -e 's/foo/bar/' example.md 15 | ``` 16 | 17 | #### In OSX, `-i ''` is required. 18 | 19 | ```bash 20 | sed -i '' -e 's/foo/bar/' example.md 21 | ``` 22 | 23 | ### File regions 24 | 25 | #### Print until a certain line is met 26 | 27 | ```bash 28 | sed '/begin api/q' 29 | ``` 30 | 31 | #### Print until a certain line is met, but not that line 32 | 33 | ```bash 34 | sed '/^# begin/,$d' 35 | ``` 36 | 37 | #### Print everything after a given line 38 | 39 | ```bash 40 | sed -n '/end api/,$p' 41 | ``` 42 | -------------------------------------------------------------------------------- /_js/critical.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This is the "critical path" JavaScript that will be included INLINE on every 3 | * page. Keep this as small as possible! 4 | */ 5 | 6 | import wrapify from './wrapify' 7 | import addClass from 'dom101/add-class' 8 | import on from 'dom101/on' 9 | 10 | // Transform the main body markup to make it readable. 11 | const body = document.querySelector('[data-js-main-body]') 12 | 13 | if (body) { 14 | wrapify(body) 15 | addClass(body, '-wrapified') 16 | } 17 | 18 | // Be "done" when we're done, or after a certain timeout. 19 | on(window, 'load', done) 20 | setTimeout(done, 5000) 21 | 22 | let isDone 23 | function done () { 24 | if (isDone) return 25 | addClass(document.documentElement, 'LoadDone') 26 | isDone = true 27 | } 28 | -------------------------------------------------------------------------------- /cordova.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cordova 3 | --- 4 | 5 | cordova plugin ls 6 | cordova plugin search facebook 7 | cordova plugin add com.phonegap.plugins.facebookconnect 8 | 9 | cordova platform add ios 10 | cordova platform ls 11 | cordova platform update ios 12 | cordova platform check 13 | 14 | ### Some plugins 15 | 16 | You'll likely need these: 17 | 18 | * [org.apache.cordova.console](https://github.com/apache/cordova-plugin-console) 19 | * [org.apache.cordova.inappbrowser](https://github.com/apache/cordova-plugin-inappbrowser) 20 | * [org.apache.cordova.statusbar](https://github.com/apache/cordova-plugin-statusbar) 21 | * org.apache.cordova.splashscreen 22 | 23 | Also: 24 | 25 | * com.phonegap.plugins.facebookconnect 26 | -------------------------------------------------------------------------------- /harvey.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Harvey.js 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | intro: | 6 | [Harvey.js](http://harvesthq.github.io/harvey/) helps you build responsive interfaces. 7 | --- 8 | 9 | ### Usage 10 | 11 | ```js 12 | Harvey.attach('(min-width: 600px)', { 13 | setup: function () { 14 | // Called on first enter 15 | }, 16 | on: function () { 17 | // Called on every enter 18 | }, 19 | off: function () { 20 | // Called on every exit 21 | } 22 | }) 23 | ``` 24 | 25 | ### Deprecated 26 | 27 | Harvey.js hasn't been updated in a while, as of time of writing. Consider [enquire.js](https://github.com/WickyNilliams/enquire.js) instead. 28 | 29 | ### References 30 | 31 | * 32 | -------------------------------------------------------------------------------- /_js/helpers/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Updates a local storage key. If it doesn't exist, it defaults to an empty 3 | * object. 4 | * 5 | * @example 6 | * update('dismissed', (data) => { 7 | * data.lol = true 8 | * return data 9 | * }) 10 | */ 11 | 12 | export function update (key, fn) { 13 | if (!window.localStorage) return 14 | let data = JSON.parse(window.localStorage[key] || '{}') 15 | data = fn(data) 16 | window.localStorage[key] = JSON.stringify(data) 17 | } 18 | 19 | /** 20 | * Fetches a local storage key. 21 | * 22 | * @example 23 | * const data = fetch('dismissed') 24 | */ 25 | 26 | export function fetch (key) { 27 | if (!window.localStorage) return 28 | return JSON.parse(window.localStorage[key] || '{}') 29 | } 30 | -------------------------------------------------------------------------------- /commander.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Commander.js 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### Initialize 7 | 8 | var cli = require('commander'); 9 | 10 | ### Options 11 | 12 | cli 13 | .version(require('../package').version) 14 | .usage('[options] ') 15 | .option('-w, --words ', 'generate words') 16 | .option('-i, --interval ', 'interval [1000]', 1000) 17 | .option('-s, --symbols', 'include symbols') 18 | .parse(process.argv); 19 | 20 | ### Help 21 | 22 | .on('--help', function() { 23 | console.log(''); 24 | }) 25 | 26 | ### Commands 27 | 28 | cli.outputHelp(); 29 | cli.args == ["hello"]; 30 | 31 | ### Other useful things 32 | 33 | process.exit(0); 34 | 35 | 36 | -------------------------------------------------------------------------------- /_js/helpers/inject_disqus.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Injects disqus's scripts into the page. 3 | * 4 | * @example 5 | * inject('devhints.disqus.com') 6 | */ 7 | 8 | export default function inject (host) { 9 | injectEmbed(host) 10 | injectCount(host) 11 | } 12 | 13 | export function injectEmbed (host) { 14 | const d = document 15 | const s = d.createElement('script') 16 | s.src = `https://${host}/embed.js` 17 | s.setAttribute('data-timestamp', +new Date()) 18 | ;(d.head || d.body).appendChild(s) 19 | } 20 | 21 | export function injectCount (host) { 22 | const d = document 23 | const s = d.createElement('script') 24 | s.src = `https://${host}/count.js` 25 | s.id = 'dsq-count-scr' 26 | s.async = true 27 | ;(d.head || d.body).appendChild(s) 28 | } 29 | -------------------------------------------------------------------------------- /ansi.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ansi codes 3 | category: CLI 4 | --- 5 | 6 | Format 7 | 8 | \033[#m 9 | 10 | Where: 11 | 12 | 0 clear 13 | 1 bold 14 | 4 underline 15 | 5 blink 16 | 17 | 30-37 fg color 18 | 40-47 bg color 19 | 20 | 1K clear line (to beginning of line) 21 | 2K clear line (entire line) 22 | 2J clear screen 23 | 0;0H move cursor to 0;0 24 | 25 | 1A move up 1 line 26 | 27 | Colors 28 | 29 | 0 black 30 | 1 red 31 | 2 green 32 | 3 yellow 33 | 4 blue 34 | 5 magenta 35 | 6 cyan 36 | 7 white 37 | 38 | Stuff 39 | 40 | hide_cursor() { printf "\e[?25l"; } 41 | show_cursor() { printf "\e[?25h"; } 42 | -------------------------------------------------------------------------------- /superagent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Superagent 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### Result 7 | 8 | result == { 9 | ok: true 10 | error: false 11 | 12 | // Response 13 | body: null 14 | text: "..." 15 | 16 | // Headers 17 | status: 200 18 | type: "text/html" 19 | charset: "UTF-8" 20 | headers: { 21 | 'cache-control': 'public', 22 | 'content-type': 'text/html; charset=UTF-8' 23 | } 24 | 25 | accepted: false 26 | 27 | // specific errors 28 | badRequest: false 29 | clientError: false 30 | forbidden: false 31 | notFound: false 32 | noContent: false 33 | notAcceptable: false 34 | unauthorized: false 35 | } 36 | -------------------------------------------------------------------------------- /_inactive/gh.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: node-gh 3 | category: JavaScript libraries 4 | --- 5 | 6 | ## Everywhere 7 | 8 | | Flag | Description | 9 | | ---- | ---- | 10 | | `-u rstacruz -r nprogress` | Repo name | 11 | | `--browser` | Browser | 12 | {:.no-head} 13 | 14 | ## Notifications 15 | 16 | ``` 17 | gh nt 18 | gh nt --watch 19 | ``` 20 | 21 | ## Issues 22 | 23 | | Command | Description | 24 | | ---- | ---- | 25 | | `gh is 'Issue name'` | Create issue | 26 | | `gh is --search 'foo'` | Search issues | 27 | | `gh is 'Name' 'Description'` | Create issue | 28 | | `gh is 123` | Modify issue `123` (use with flags below) | 29 | | ... `-L`/`--label x,y,z` | Add label | 30 | | ... `-A`/`--assignee` | Assign to user | 31 | | ... `-c`/`--comment 'Thanks'` | Add a comment 32 | {:.no-head} 33 | -------------------------------------------------------------------------------- /saucelabs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Saucelabs 3 | layout: 2017/sheet 4 | --- 5 | 6 | ### Getting started 7 | 8 | Sign up for opensauce: 9 | {: .-setup} 10 | 11 | - http://saucelabs.com/opensauce 12 | 13 | Install [zuul](https://npmjs.com/package/zuul): 14 | 15 | ``` 16 | npm i -g zuul 17 | ``` 18 | 19 | Configure zuul: 20 | 21 | ```yml 22 | # ~/.zuulrc 23 | sauce_username: me 24 | sauce_key: abc12348-e3e2-... 25 | ``` 26 | 27 | Add `.zuul.yml` to your project: 28 | 29 | ```yml 30 | # .zuul.yml 31 | ui: mocha-bdd 32 | browsers: 33 | - name: chrome 34 | version: latest 35 | - name: ie 36 | version: 6..latest 37 | - name: firefox 38 | version: latest 39 | ``` 40 | 41 | Try to run tests: 42 | 43 | ``` 44 | zuul test/test.js 45 | zuul --local test/test.js 46 | ``` 47 | -------------------------------------------------------------------------------- /applinks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Applinks 3 | category: HTML 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ### Device types 18 | 19 | * `ios` 20 | * `ipad` 21 | * `iphone` 22 | * `android` 23 | * `windows_phone` 24 | * `web` 25 | 26 | ### Reference 27 | 28 | * [applinks.org](http://applinks.org/documentation/) 29 | -------------------------------------------------------------------------------- /_includes/about-the-site.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    4 | {{ site.title }} is a collection of cheatsheets I've written over the years. 5 | Suggestions and corrections? Send them in. 6 | 7 | I'm Rico Sta. Cruz. 8 | Check out my Today I learned blog for more. 9 |

    10 | 11 | {% if page.url != '/index.html' %} 12 |

    13 | 14 |

    15 | {% endif %} 16 | 17 |

    18 |

    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /ruby.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ruby 3 | category: Ruby 4 | --- 5 | 6 | * `$!` - latest error message 7 | * `$@` - location of error 8 | * `$_` - string last read by gets 9 | * `$.` - line number last read by interpreter 10 | * `$&` - string last matched by regexp 11 | * `$~` - the last regexp match, as an array of subexpressions 12 | * `$n` - the nth subexpression in the last match (same as `$~[n]`) 13 | * `$=` - case-insensitivity flag 14 | * `$/` - input record separator 15 | * `$\` - output record separator 16 | * `$0` - the name of the ruby script file 17 | * `$*` (or `ARGV`) - the command line arguments 18 | * `$$` - interpreter's process ID 19 | * `$?` - exit status of last executed child process 20 | * `$-i` `$-l` `$-p` `$-v` - Command line switches 21 | * `$-v` (or `$VERBOSE`) - verbose mode 22 | -------------------------------------------------------------------------------- /watchman.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Watchman 3 | layout: 2017/sheet 4 | updated: 2017-10-18 5 | weight: -1 6 | keywords: 7 | - "watchman watch ~/src" 8 | - "watchman watch-list" 9 | - "watchman -- trigger ~/rsc remake '*.js' -- make " 10 | --- 11 | 12 | ### Getting started 13 | 14 | ```bash 15 | watchman watch ./src 16 | ``` 17 | 18 | Adds `./src` to the watch list. 19 | 20 | ```bash 21 | watchman -- trigger ./src retest '*.js' -- npm test 22 | ``` 23 | 24 | Adds a trigger called `retest` to run `npm test` every time `*.js` changes in `./src`. 25 | 26 | ### Watching 27 | 28 | ``` 29 | watchman watch ~/src 30 | watchman watch-list 31 | watchman watch-del ~/src 32 | ``` 33 | 34 | ## Also see 35 | 36 | * [Documentation](https://facebook.github.io/watchman/docs/install.html) _(facebook.github.io)_ 37 | -------------------------------------------------------------------------------- /ledger-csv.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ledger CSV format 3 | category: Ledger 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Ledger CSV format 8 | {: .-one-column} 9 | 10 | ``` 11 | $ ledger csv 12 | ``` 13 | {: .-setup} 14 | 15 | ```csv 16 | date , ? , desc , account , currency , amt , pending/cleared , ? 17 | "2013/09/02" , "" , "things" , "Assets:Cash" , "P" , "-2000" , "*" , "" 18 | "2013/09/02" , "" , "things" , "Liabilities:Card" , "P" , "-200" , "*" , "" 19 | "2013/09/02" , "" , "things" , "Expenses:Things" , "P" , "2200" , "*" , "" 20 | "2013/09/04" , "" , "stuff" , "Assets:Cash" , "P" , "-20" , "*" , "" 21 | "2013/09/04" , "" , "stuff" , "Expneses:Others" , "P" , "20" , "*" , "" 22 | ``` 23 | -------------------------------------------------------------------------------- /znc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ZNC bouncer 3 | --- 4 | 5 | ## Start 6 | 7 | /msg *status addserver irc.undernet.org [6667] 8 | /msg *status connect 9 | 10 | /msg *status loadmod webadmin 11 | /msg *status loadmod admin 12 | /msg *status loadmod away 13 | /msg *status loadmod awaynick 14 | /msg *status loadmod clientnotify # Notifies when another client logs 15 | /msg *status loadmod keepnick 16 | /msg *status loadmod kickrejoin 17 | 18 | ## Away 19 | 20 | /msg *status loadmod away 21 | /msg *away away 22 | /msg *away back 23 | /msg *away show #=> Show messages 24 | /msg *away delete all 25 | 26 | ## Watch 27 | 28 | /msg *status loadmod watch 29 | /msg *watch list 30 | /msg *watch add * *watch *rico* 31 | /msg *watch add * *watch *%nick%* 32 | 33 | -------------------------------------------------------------------------------- /imagemagick.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Imagemagick 3 | --- 4 | 5 | ### Stuff 6 | 7 | -resize 100x40 8 | -crop 40x30+10+10 # (width)x(height)+(x)+y 9 | -crop 40x30-10-10 # (width)x(height)+(x)+y 10 | -flip # vertical 11 | -flop # horizontal 12 | -transpose # flip vertical + rotate 90deg 13 | -transverse # flip horizontal + rotate 270deg 14 | -trim # trim image edges 15 | -rotate 90 16 | 17 | ### Resize to fit 18 | 19 | convert input.jpg -resize 80x80^ -gravity center -extent 80x80 icon.png 20 | 21 | ### Convert all images to another format 22 | 23 | mogrify -format jpg -quality 85 *.png 24 | 25 | ### Make a pdf 26 | 27 | convert *.jpg hello.pdf 28 | 29 | ### References 30 | 31 | * http://www.noah.org/wiki/ImageMagick 32 | -------------------------------------------------------------------------------- /_sass/2017/components/site-header.scss: -------------------------------------------------------------------------------- 1 | .site-header { 2 | margin: 32px 0; 3 | 4 | & > p { 5 | margin: 0; 6 | padding: 0; 7 | text-align: center; 8 | color: $base-mute; 9 | } 10 | 11 | & > p > a { 12 | text-decoration: none; 13 | } 14 | 15 | & > h1 { 16 | @include font-size(8); 17 | line-height: 1.2; 18 | margin: 0; 19 | padding: 0; 20 | color: $base-head; 21 | font-weight: 200; 22 | text-align: center; 23 | margin-bottom: 16px; 24 | } 25 | 26 | & > .search { 27 | margin-top: 32px; 28 | } 29 | 30 | & > .action { 31 | margin-top: 32px; 32 | } 33 | 34 | & > .adbox { 35 | margin: 16px auto; 36 | } 37 | 38 | @media (max-width: 480px) { 39 | & > .adbox { 40 | margin-left: -16px; 41 | margin-right: -16px; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /gh-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub pages 3 | category: Jekyll 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Custom domains 8 | 9 | ### Custom domains 10 | 11 | ```sh 12 | $ echo "foobar.com" > CNAME 13 | $ git commit && git push 14 | ``` 15 | 16 | Create a `CNAME` file with your domain on it. 17 | 18 | See: [Setting up a custom domain](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/) _(github.com)_ 19 | 20 | ### Set up your domain 21 | 22 | Subdomain (like www): 23 | {: .-setup} 24 | 25 | CNAME => username.github.io 26 | 27 | Apex domains: 28 | {: .-setup} 29 | 30 | ALIAS => username.github.io 31 | 32 | Apex domains (alternative): 33 | {: .-setup} 34 | 35 | A => 192.30.252.153 36 | A => 192.30.252.154 37 | 38 | ## References 39 | {: .-one-column} 40 | 41 | - 42 | -------------------------------------------------------------------------------- /css-antialias.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS antialiasing 3 | category: CSS 4 | layout: 2017/sheet 5 | updated: 2017-08-26 6 | intro: | 7 | Here's a 4-line snippet on how to get beautiful, antialiased text with CSS. 8 | --- 9 | 10 | ### Antialias 11 | {: .-prime} 12 | 13 | ```css 14 | * { 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | ``` 19 | 20 | ### Support 21 | 22 | * Firefox 25+ on OSX 23 | * Webkits (Chrome, Safari, etc) 24 | 25 | ## References 26 | {: .-one-column} 27 | 28 | * [maxvoltar.com](http://maxvoltar.com/archive/-webkit-font-smoothing) 29 | * [maximilianhoffman.com](http://maximilianhoffmann.com/posts/better-font-rendering-on-osx) 30 | * [ilikekillnerds.com](http://ilikekillnerds.com/2010/12/a-solution-to-stop-font-face-fonts-looking-bold-on-mac-browsers/) 31 | {: .-also-see} 32 | -------------------------------------------------------------------------------- /_layouts/default-ad.html: -------------------------------------------------------------------------------- 1 | --- 2 | type: article 3 | --- 4 | {% include head.html %} 5 | {% include site-header.html %} 6 | 7 |
    8 |
    9 | {% include social-list.html page=page class="-collapse" %} 10 | 11 |
    12 |

    13 |

    {{ page.title }}

    14 |
    15 | 16 | {% if site.data.carbon.enabled %} 17 |
    18 | 19 |
    20 | {% endif %} 21 | 22 |
    23 | {{ content }} 24 |
    25 | 26 | {% include social-list.html page=page %} 27 |
    28 |
    29 | 30 | {% include foot.html %} 31 | -------------------------------------------------------------------------------- /data/search-index.json: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blank 3 | type: other 4 | --- 5 | {% assign pages = site.pages 6 | | where_exp: "page", 'page.type == "article"' 7 | %}[ 8 | {% for page in pages 9 | %}{% if forloop.index0 != 0 %},{% endif %}{ 10 | "id": {{ page.url | replace: ".html", "" | slice: 1, 9999 | jsonify }}, 11 | "title": {{ page.title | jsonify }}, 12 | "url": {{ page.url | replace: ".html", "" | jsonify }}, 13 | "category": {{ page.category | jsonify }}, 14 | "keywords": {{ page.keywords | jsonify }}, 15 | "content_html": {{ page.content | markdownify | strip | jsonify }}, 16 | "intro_html": {{ page.intro | markdownify | strip | jsonify }}, 17 | "description_html": {{ page.description | markdownify | strip | jsonify }}, 18 | "tags": {{ page.tags | jsonify }}, 19 | "updated": {{ page.updated | jsonify }} 20 | }{% endfor %} 21 | ] 22 | -------------------------------------------------------------------------------- /_includes/values/description.html: -------------------------------------------------------------------------------- 1 | {% 2 | if page.description and page.intro 3 | %}{{ page.description }} {{ page.intro | markdownify | strip_html }}{% 4 | elsif page.description 5 | %}{{ page.description }} · One-page guide to {{ page.title }}{% 6 | elsif page.keywords and page.intro 7 | %}{{ page.keywords | join: ' · ' }} · {{ page.intro | markdownify | strip_html }}{% 8 | elsif page.keywords 9 | %}{{ page.keywords | join: ' · ' }} · One-page guide to {{ page.title }}{% 10 | elsif page.intro 11 | %}One-page guide to {{ page.title }}: usage, examples, and more. {{ page.intro | markdownify | strip_html }}{% 12 | elsif page.type == 'article' 13 | %}The one-page guide to {{ page.title }}: usage, examples, links, snippets, and more.{% 14 | else 15 | %}The one-page guide to {{ page.title }}: usage, examples, links, snippets, and more.{% 16 | endif 17 | %} 18 | -------------------------------------------------------------------------------- /_includes/2017/search-form.html: -------------------------------------------------------------------------------- 1 | 4 | 19 | 20 | -------------------------------------------------------------------------------- /rename.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: rename 3 | category: CLI 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Installation 8 | 9 | ```bash 10 | brew install rename 11 | ``` 12 | 13 | See: 14 | 15 | ### Regex substitution 16 | 17 | ```bash 18 | rename 's/hello/world/' *.txt 19 | ``` 20 | 21 | Rename `hello.txt` to `world.txt` and so on in `*.txt`. 22 | 23 | ### Replace extension 24 | 25 | ```bash 26 | rename -s .png .jpg.png *.png 27 | ``` 28 | 29 | Replace `.png` with `.jpg.png` in `*.png`. 30 | 31 | ### Options 32 | 33 | | Option | Description | 34 | | --- | --- | 35 | | `-n` | Simulation | 36 | | `-l` | Symlink instead of rename | 37 | | `-i` | Interactive | 38 | 39 | ## Also see 40 | 41 | - [Rename website](http://plasmasturm.org/code/rename/) _(plasmasturm.org)_ 42 | -------------------------------------------------------------------------------- /vagrant.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vagrant 3 | category: Devops 4 | layout: 2017/sheet 5 | intro: | 6 | [Vagrant](http://vagrantup.com) lets you build isolated virtual environments for your apps. 7 | --- 8 | 9 | ### Get started 10 | 11 | Add some base boxes: 12 | {: .-setup} 13 | 14 | ```bash 15 | vagrant box add precise64 http://files.vagrantup.com/precise64.box 16 | ``` 17 | 18 | Work it: 19 | 20 | ```bash 21 | mkdir test_box 22 | cd test_box 23 | vagrant init precise64 24 | ``` 25 | 26 | Run it: 27 | 28 | ```bash 29 | vagrant up 30 | vagrant ssh 31 | ``` 32 | 33 | To stop, use one of the following: 34 | 35 | ```bash 36 | vagrant ssh # then: sudo shutdown -h now 37 | vagrant suspend 38 | vagrant destroy # !! 39 | ``` 40 | 41 | ### Also see 42 | 43 | * [Vagrant website](http://vagrantup.com) _(vagrantup.com)_ 44 | * [Vagrantfile cheatsheet](./vagrantfile) 45 | -------------------------------------------------------------------------------- /_js/behaviors/h3-section-list.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-new */ 2 | 3 | import Isotope from 'isotope-layout/dist/isotope.pkgd.js' 4 | import onmount from 'onmount' 5 | import on from 'dom101/on' 6 | import qsa from 'dom101/query-selector-all' 7 | 8 | /* 9 | * Behavior: Isotope 10 | */ 11 | 12 | onmount('[data-js-h3-section-list]', function () { 13 | const iso = new Isotope(this, { 14 | itemSelector: '.h3-section', 15 | transitionDuration: 0 16 | }) 17 | 18 | const images = qsa('img', this) 19 | 20 | images.forEach(image => { 21 | on(image, 'load', () => { 22 | iso.layout() 23 | }) 24 | }) 25 | 26 | // Insurance against weirdness on pages like devhints.io/vim, where the 27 | // critical path CSS may look different from the final CSS (because of the 28 | // tables). 29 | on(window, 'load', () => { 30 | iso.layout() 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /_sass/2017/utils/carbon-style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Base carbon ads style 3 | */ 4 | 5 | @mixin carbon-style { 6 | .carbon-img, 7 | .carbon-text, 8 | .carbon-poweredby { 9 | text-decoration: none; 10 | display: block; 11 | } 12 | 13 | .carbon-img { 14 | width: 130px; 15 | height: 100px; 16 | box-shadow: $shadow3; 17 | } 18 | 19 | .carbon-img > img { 20 | border-radius: 3px; 21 | background: white; 22 | } 23 | 24 | .carbon-img:hover { 25 | transform: translate3d(0, -1px, 0); 26 | box-shadow: $shadow6; 27 | } 28 | 29 | .carbon-text, 30 | .carbon-text:visited { 31 | color: $gray-text; 32 | } 33 | 34 | .carbon-poweredby, 35 | .carbon-poweredby:visited { 36 | color: lighten($gray-text, 20%); 37 | } 38 | 39 | .carbon-text:hover, 40 | .carbon-poweredby:hover { 41 | color: $base-a; 42 | } 43 | } 44 | 45 | -------------------------------------------------------------------------------- /elixir-metaprogramming.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Elixir metaprogramming 3 | category: Elixir 4 | --- 5 | 6 | ## Kernel 7 | 8 | Most of these magic is defined in [Kernel.SpecialForms](http://devdocs.io/elixir/elixir/kernel.specialforms). 9 | 10 | ### Pseudo-variables 11 | 12 | ```elixir 13 | __DIR__ # current dir 14 | __MODULE__ # current module 15 | __CALLER__ # caller of the function 16 | ``` 17 | 18 | ### [`__ENV__`](http://devdocs.io/elixir/elixir/kernel.specialforms#__ENV__/0) 19 | 20 | ```elixir 21 | Map.keys(__ENV__) 22 | [:__struct__, :aliases, :context, :context_modules, :export_vars, :file, 23 | :function, :functions, :lexical_tracker, :line, :macro_aliases, :macros, 24 | :module, :requires, :vars] 25 | ``` 26 | 27 | ```elixir 28 | __CALLER__.module |> Module.definitions_in |> IO.inspect 29 | ``` 30 | 31 | ```elixir 32 | apply(Enum, :reverse, [[1, 2, 3]]) 33 | ``` 34 | -------------------------------------------------------------------------------- /immutable.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Immutable.js 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Maps 8 | 9 | ```js 10 | var map = Immutable.Map({ a: 1, b: 2, c: 3 }) 11 | ``` 12 | 13 | ```js 14 | map 15 | .set('b', 50) 16 | .get('b') // 50 17 | ``` 18 | 19 | ### Lists 20 | 21 | ```js 22 | var list = Immutable.List.of(1, 2) 23 | 24 | list 25 | .push(3, 4, 5) 26 | .unshift(0) 27 | .concat(list2, list3) 28 | .get(0) 29 | .size 30 | ``` 31 | 32 | ### Nested maps 33 | 34 | ```js 35 | var nested = Immutable.fromJS({ user: { profile: { name: 'John' } } }) 36 | 37 | nested 38 | // Update 39 | .mergeDeep({ user: { profile: { age: 90 } } }) 40 | .setIn([ 'user', 'profile', 'name' ], 'Jack') 41 | .updateIn([ 'user', 'profile', 'name' ], (s) => s.toUpperCase()) 42 | 43 | // Get 44 | .getIn(['user', 'profile', 'name']) // 'JACK' 45 | ``` 46 | -------------------------------------------------------------------------------- /ie_bugs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Legacy IE bugs 3 | category: HTML 4 | layout: 2017/sheet 5 | updated: 2017-10-29 6 | intro: | 7 | A bunch of bugs to take care of if you're going to target legacy IE browsers. 8 | --- 9 | 10 | ### IE8: 'change' event 11 | 12 | The 'change' event doesn't always fire. Not for checkboxes, radios, multi-select lists. Use the `click` handler instead. 13 | 14 | * [(1)](http://stackoverflow.com/questions/8005442/checkbox-change-event-works-when-click-the-label-in-ie8-ie7) 15 | 16 | ### IE8: label with input 17 | 18 | Clicking label with input inside doesn't focus the input. 19 | 20 | * [(1)](http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/LabelForWithImage.html) 21 | 22 | ### IE8: Opacity propagation 23 | 24 | An element's 'opacity' value isn't propagated to its positioned descendants. 25 | 26 | * [test case](http://jhop.me/tests/bugs/ie8/opacity_positioned.html) 27 | -------------------------------------------------------------------------------- /_sass/2017/markdown/headings.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * MarkdownBody context 3 | */ 4 | 5 | .MarkdownBody h2 { 6 | @include heading-style; 7 | @include font-size(6); 8 | line-height: 1.2; 9 | font-weight: 200; 10 | font-family: $heading-font; 11 | margin-top: 0; 12 | 13 | &:target { 14 | color: $base-a; 15 | } 16 | } 17 | 18 | .MarkdownBody h3 { 19 | margin: 0; 20 | padding: 0; 21 | margin-bottom: 16px; 22 | font-family: $heading-font; 23 | @include font-size(2); 24 | font-weight: 400; 25 | color: $base-a; 26 | } 27 | 28 | .MarkdownBody { 29 | a, 30 | a:visited { 31 | color: $base-b; 32 | text-decoration: none; 33 | } 34 | 35 | a:hover { 36 | text-decoration: underline; 37 | } 38 | 39 | em { 40 | font-style: normal; 41 | color: $gray-text; 42 | } 43 | 44 | iframe { 45 | border: 0; 46 | margin: 0; 47 | width: 100%; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /flashlight.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flashlight 3 | category: Apps 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Commands 8 | {: .-three-column} 9 | 10 | ### Events and reminders 11 | 12 | * `add Dinner with Rico 5 pm tomorrow` 13 | * `remind Go to school at 2:30pm` 14 | * `remind Go to school in 15 mins` 15 | 16 | ### DuckDuckGo 17 | 18 | * `!g foo` 19 | * `!mdn settimeout` 20 | 21 | ### System 22 | 23 | * `shutdown` 24 | * `restart` 25 | * `logout` 26 | * `sleep` 27 | * `ejall` 28 | * `screen saver` 29 | 30 | ### Emoji 31 | 32 | * `emoji grin` 33 | * `:rocket:` 34 | 35 | ### Web search 36 | 37 | * `/react` 38 | 39 | Prefix with `/` to do a web search. 40 | 41 | ### References 42 | 43 | * [Flashlight](http://flashlight.nateparrott.com/) 44 | * [Flashlight on GitHub](https://github.com/nate-parrott/Flashlight) 45 | * [Creating a plugin](https://github.com/nate-parrott/Flashlight/wiki/Creating-a-Plugin) 46 | -------------------------------------------------------------------------------- /sql-join.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SQL joins 3 | layout: 2017/sheet 4 | category: Databases 5 | updated: 2017-10-30 6 | weight: -1 7 | --- 8 | 9 | ### Example 10 | 11 | ``` 12 | SELECT * FROM order_items \ 13 | LEFT OUTER JOIN orders \ 14 | ON order_items.order_id = orders.id 15 | ``` 16 | {: .-wrap} 17 | 18 | Joins are typically added to `SELECT` statements to add more columns and records. 19 | 20 | ### Diagram 21 | 22 | ``` 23 | SELECT * FROM `A` INNER JOIN `B` 24 | ``` 25 | {: .-setup} 26 | 27 | ``` 28 | ┌────────┐ 29 | │ A ┌───┼────┐ 30 | │ │ ∩ │ │ 31 | └────┼───┘ B │ 32 | └────────┘ 33 | ``` 34 | {: .-box-chars.-setup} 35 | 36 | | Join | What | 37 | | ---- | ---- | 38 | | Inner join | `∩` | 39 | | Left outer join | `A` + `∩` | 40 | | Right outer join | `∩` + `B` | 41 | | Full outer join | `A` + `∩` + `B` | 42 | -------------------------------------------------------------------------------- /less.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Less.js 3 | --- 4 | 5 | ### Functions 6 | 7 | unit(30px / 5px) #=> 6 8 | unit(5, px) #=> 5px 9 | 10 | e("ms:stuff()") #=> ms:stuff() (unquote) 11 | 12 | %("count: %d", 1+2) #=> "count: 3" 13 | 14 | iscolor(@x) 15 | isstring(@x) 16 | isnumber(@x) 17 | iskeyword(@x) 18 | isurl(url(...)) 19 | ispixel() 20 | isem() 21 | ispercentage() 22 | isunit() 23 | 24 | hue(@color) 25 | saturation(@color) 26 | lightness(@color) 27 | luma(@color) 28 | luminance(@color) 29 | 30 | fade(@color, amount) 31 | fadein(@color, amount) 32 | fadeout(@color, amount) 33 | spin(@color, degrees) 34 | mix(@a, @b, amount) 35 | 36 | ### Conditionals 37 | 38 | .image when (luma(@color) > 50%) { } 39 | .image when (not(...)) { } 40 | .image when (default()) {} 41 | .image when (e(@shape) = 'circle') { } 42 | 43 | -------------------------------------------------------------------------------- /c_preprocessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: C Preprocessor 3 | category: C-like 4 | --- 5 | 6 | ### Compiling 7 | 8 | $ cpp -P file > outfile 9 | 10 | ### Includes 11 | 12 | #include "file" 13 | 14 | ### Defines 15 | 16 | #define FOO 17 | #define FOO "hello" 18 | 19 | #undef FOO 20 | 21 | ### If 22 | 23 | #ifdef DEBUG 24 | console.log('hi'); 25 | #elif defined VERBOSE 26 | ... 27 | #else 28 | ... 29 | #endif 30 | 31 | ### Error 32 | 33 | #if VERSION == 2.0 34 | #error Unsupported 35 | #warning Not really supported 36 | #endif 37 | 38 | ### Macro 39 | 40 | #define DEG(x) ((x) * 57.29) 41 | 42 | ### Token concat 43 | 44 | #define DST(name) name##_s name##_t 45 | DST(object); #=> "object_s object_t;" 46 | 47 | ### file and line 48 | 49 | #define LOG(msg) console.log(__FILE__, __LINE__, msg) 50 | #=> console.log("file.txt", 3, "hey") 51 | -------------------------------------------------------------------------------- /_js/helpers/search.js: -------------------------------------------------------------------------------- 1 | import { splitwords } from './permutate' 2 | import qsa from 'dom101/query-selector-all' 3 | 4 | /** 5 | * Show everything. 6 | * 7 | * @example 8 | * Search.showAll() 9 | */ 10 | 11 | export function showAll () { 12 | qsa('[data-search-index]').forEach(el => { 13 | el.removeAttribute('aria-hidden') 14 | }) 15 | } 16 | 17 | /** 18 | * Search for a given keyword. 19 | * 20 | * @example 21 | * Search.show('hello') 22 | */ 23 | 24 | export function show (val) { 25 | const keywords = splitwords(val) 26 | 27 | if (!keywords.length) return showAll() 28 | 29 | const selectors = keywords 30 | .map(k => `[data-search-index~=${JSON.stringify(k)}]`) 31 | .join('') 32 | 33 | qsa('[data-search-index]').forEach(el => { 34 | el.setAttribute('aria-hidden', true) 35 | }) 36 | 37 | qsa(selectors).forEach(el => { 38 | el.removeAttribute('aria-hidden') 39 | }) 40 | } 41 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | html_class: home 3 | type: home 4 | --- 5 | {% include head.html %} 6 | {% include site-header.html %} 7 | 8 | {% for category in site.data.categories.names %} 9 |
    10 |

    {{ category }}

    11 |
    12 |
    13 | {% for page in site.pages %} 14 | {% if page.category == category %} 15 | 16 | {{ page.title }} 17 | {{ page.url | remove: '.html' | remove: '/' }} 18 | 19 | {% endif %} 20 | {% endfor %} 21 |
    22 | {% endfor %} 23 | 24 | {% if site.data.carbon.enabled %} 25 |
    26 | 27 |
    28 | {% endif %} 29 | 30 | {% include foot.html %} 31 | -------------------------------------------------------------------------------- /_sass/2017/components/missing-message.scss: -------------------------------------------------------------------------------- 1 | .missing-message.missing-message { 2 | text-align: center; 3 | margin: 32px 0; 4 | display: flex; 5 | align-items: center; 6 | border-top: solid 1px $dark-line-color; 7 | padding-top: 16px; 8 | 9 | @media (min-width: 769px) { 10 | padding-top: 32px; 11 | } 12 | 13 | & > h3, 14 | & > p { 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | & > h3 { 20 | @include font-size(1); 21 | font-weight: normal; 22 | color: $base-text; 23 | flex: 1 0 auto; 24 | text-align: left; 25 | } 26 | 27 | & > h3::before { 28 | content: ''; 29 | @include ion-md-arrow-forward(24px, $base-a); 30 | margin-right: 16px; 31 | } 32 | 33 | & > p { 34 | color: $base-mute; 35 | flex: 0 0 auto; 36 | } 37 | 38 | @media (max-width: 480px) { 39 | flex-wrap: wrap; 40 | 41 | & > p { 42 | margin-top: 16px; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /analytics.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Google Analytics's analytics.js 3 | category: Analytics 4 | layout: 2017/sheet 5 | updated: 2017-10-29 6 | intro: | 7 | Google Analytics's analytics.js is deprecated. 8 | --- 9 | 10 | ### Page view 11 | 12 | ```js 13 | ga('create', 'UA-XXXX-Y', 'auto') 14 | ga('create', 'UA-XXXX-Y', { userId: 'USER_ID' }) 15 | ``` 16 | 17 | ```js 18 | ga('send', 'pageview') 19 | ga('send', 'pageview', { 'dimension15': 'My custom dimension' }) 20 | ``` 21 | 22 | ### Events 23 | 24 | ```js 25 | ga('send', 'event', 'button', 'click', {color: 'red'}); 26 | ``` 27 | 28 | ```js 29 | ga('send', 'event', 'button', 'click', 'nav buttons', 4); 30 | /* ^category ^action ^label ^value */ 31 | ``` 32 | 33 | ### Exceptions 34 | 35 | ```js 36 | ga('send', 'exception', { 37 | exDescription: 'DatabaseError', 38 | exFatal: false, 39 | appName: 'myapp', 40 | appVersion: '0.1.2' 41 | }) 42 | ``` 43 | -------------------------------------------------------------------------------- /mocha.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocha.js 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### BDD 7 | 8 | mocha.setup('bdd'); 9 | 10 | describe('something', function() { 11 | beforeEach(function() { 12 | }); 13 | 14 | it('should work', function() { 15 | }); 16 | }); 17 | 18 | ### Async 19 | 20 | it('should save', function(done) { 21 | var user = new User(); 22 | user.save(function(err) { 23 | if (err) throw err; 24 | done(); 25 | }); 26 | }); 27 | 28 | ### Chai: Shoulds 29 | 30 | chai.should(); 31 | 32 | foo.should.be.a('string'); 33 | foo.should.equal('bar'); 34 | foo.should.have.length(3); 35 | tea.should.have.property('flavors').with.length(3); 36 | 37 | ### See also 38 | 39 | * [Mocha TDD](mocha-tdd.html) 40 | * [Mocha HTML](mocha-html.html) 41 | * [Chai](chai.html) 42 | * [Sinon](sinon.html) 43 | * [Sinon Chai](sinon-chai.html) 44 | -------------------------------------------------------------------------------- /bookshelf.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bookshelf.js 3 | category: JavaScript libraries 4 | --- 5 | 6 | Model 7 | ----- 8 | 9 | ```js 10 | Summary = bookshelf.Model.extend({ 11 | tableName: 'summaries', 12 | hasTimestamps: true, 13 | hasTimestamps: ['created_at', 'updated_at'], 14 | }) 15 | ``` 16 | 17 | ### Associations 18 | 19 | ```js 20 | Summary = bookshelf.Model.extend({ 21 | book () { 22 | return this.belongsTo(Book) 23 | }, 24 | author () { 25 | return this.hasOne(Author) 26 | } 27 | // belongsToMany 28 | // hasMany 29 | // hasMany().through() 30 | }) 31 | ``` 32 | 33 | ### CRUD 34 | 35 | ```js 36 | Book.create({ title: '..' }).save() 37 | new Book({ title: '..' }).save() 38 | 39 | new Book({ id: 1 }).fetch() 40 | 41 | Book.where({ id: 1 }).fetch() 42 | Book.where('favorite_color', 'red').fetch() 43 | Book.where('favorite_color', '<>', 'red').fetch() 44 | Book 45 | .query((q) => q.orderBy('updated_at') 46 | ``` 47 | -------------------------------------------------------------------------------- /nodejs-process.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: process 3 | category: Node.js 4 | --- 5 | 6 | ### Streams 7 | 8 | process.stdout.write('...'); 9 | process.stderr.write('...'); 10 | 11 | function stdin(fn) { 12 | var data = ''; 13 | 14 | process.stdin.setEncoding('utf8'); 15 | process.stdin.on('readable', function() { 16 | var chunk = process.stdin.read(); 17 | if (chunk !== null) data += chunk; 18 | }); 19 | 20 | process.stdin.on('end', function() { 21 | fn(null, data); 22 | }); 23 | } 24 | 25 | ### stuff 26 | 27 | process.argv; //=> ['node', 'file.js', 'one', 'two'] 28 | process.env; //=> {TERM: 'screen-256color', SHELL: '/bin/bash', ...} 29 | 30 | process.exit(); 31 | process.exit(1); 32 | 33 | ### Directories 34 | 35 | process.cwd(); //=> "/tmp" 36 | process.chdir('dir'); 37 | 38 | ### References 39 | 40 | - http://nodejs.org/api/process.html 41 | -------------------------------------------------------------------------------- /_includes/polyfills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /_sass/2017/components/main-heading.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * The top-level heading 3 | */ 4 | 5 | .main-heading { 6 | @include heading-style; 7 | 8 | & { 9 | margin-top: 0; 10 | margin-bottom: 0; 11 | } 12 | 13 | & > h1 { 14 | @include font-size(8); 15 | line-height: 1.2; 16 | font-weight: 200; 17 | font-family: $body-font; 18 | margin: 0; 19 | } 20 | 21 | & > h1 > em { 22 | font-style: normal; 23 | color: lighten($gray-text, 20%); 24 | } 25 | } 26 | 27 | .main-heading.-center { 28 | & > h1 { 29 | text-align: center; 30 | } 31 | 32 | & > .adbox { 33 | margin-top: 16px; 34 | text-align: center; 35 | } 36 | 37 | & > .adbox > .ad { 38 | display: inline-block; 39 | } 40 | 41 | & > .adbox > .ad.-carbon { 42 | margin-top: 16px; 43 | } 44 | } 45 | 46 | /** 47 | * Add some space in preview mode 48 | */ 49 | 50 | .PreviewMode .main-heading { 51 | margin-top: 16px; 52 | } 53 | -------------------------------------------------------------------------------- /vimscript-snippets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vimscript snippets 3 | category: Vim 4 | --- 5 | 6 | ### Bind function to key and command 7 | 8 | command! YoFunctionHere call s:YoFunctionHere() 9 | nnoremap x :call FunctionHere() 10 | function! s:FunctionHere() 11 | endfunction 12 | 13 | ### Call a function in insert mode 14 | 15 | inoremap X =script#myfunction() 16 | inoremap =MyVimFunc()?'':'' 17 | 18 | ### Checking plugins 19 | 20 | if globpath(&rtp, "plugin/commentary.vim") != "" 21 | 22 | ## Autoload 23 | 24 | " autoload/hello.vim 25 | if exists("g:hello_loaded") | finish | endif 26 | let g:hello_loaded=1 27 | 28 | function hello#method() 29 | endfunction 30 | 31 | " calling hello#method() will load only if autoload() 32 | 33 | ## Misc 34 | 35 | ### Version check 36 | 37 | if version < 704 38 | echom "requires vim >= 7.4" 39 | endif 40 | 41 | -------------------------------------------------------------------------------- /haml.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Haml 3 | category: Markup 4 | layout: 2017/sheet 5 | prism_languages: [haml] 6 | --- 7 | 8 | ### Doctype 9 | 10 | ```haml 11 | !!! 5 12 | ``` 13 | 14 | ### Tags 15 | 16 | ```haml 17 | %html 18 | %head 19 | %title 20 | %body 21 | %h1 Hello World 22 | %br/ 23 | ``` 24 | 25 | ### Classes and ID's 26 | 27 | ```haml 28 | %p.class-example 29 | .no-tag-defaults-to-div 30 | %div#butItCanBeIncluded 31 | ``` 32 | 33 | ### Inline Attributes 34 | 35 | Either hash syntax works 36 | 37 | ```haml 38 | %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" } 39 | %input{ :type => "text", :required => true } 40 | ``` 41 | 42 | ### Ruby 43 | 44 | ```haml 45 | -# This is a comment 46 | -# Anything starting with a hyphen signals to Haml that Ruby is coming 47 | - @arr = [1, 2, 3] 48 | - @str = "test" 49 | -# Equal signals output 50 | = render partial: "shared/header" 51 | = yield 52 | = link_to page_url 53 | ``` 54 | -------------------------------------------------------------------------------- /dom-selection.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM Selection 3 | category: JavaScript 4 | --- 5 | 6 | ## Selection 7 | See 8 | 9 | ```js 10 | var selection = document.getSelection() 11 | ``` 12 | 13 | ## Methods 14 | 15 | ```js 16 | selection 17 | .removeAllRanges() // deselects 18 | .addRange(range) // sets a selection 19 | .removeRange(range) // remove a range 20 | ``` 21 | 22 | ```js 23 | selection 24 | .rangeCount // ranges 25 | .getRangeAt(0) // get the 0th range 26 | ``` 27 | 28 | ### Collapsing 29 | 30 | ```js 31 | selection 32 | .collapse(parent, offset) 33 | .collapseToEnd() 34 | .collapseToStart() 35 | .isCollapsed 36 | ``` 37 | 38 | ```js 39 | selection 40 | .containsNode(node) 41 | ``` 42 | 43 | ### Deleting 44 | 45 | ```js 46 | selection 47 | .deleteFromDocument() 48 | ``` 49 | 50 | ### Events 51 | 52 | ```js 53 | document.addEventListener('selectionchange', () => {}) 54 | ``` 55 | -------------------------------------------------------------------------------- /jquery.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | tags: [WIP] 6 | weight: -1 7 | --- 8 | 9 | ### Traversing 10 | 11 | ```js 12 | $('.box') 13 | .children() 14 | .closest('div') 15 | .filter(':selected') 16 | .find('div') 17 | .has('div') 18 | .first() 19 | .next('div') 20 | .nextUntil('div') 21 | ``` 22 | 23 | ## Advanced features 24 | 25 | ### Extending selectors 26 | 27 | ```js 28 | $.expr[':'].inline = function (el) { 29 | return $(el).css('display') === 'inline' 30 | } 31 | ``` 32 | 33 | Enables `$(':inline')` 34 | 35 | ### Extend CSS properties 36 | 37 | ```js 38 | $.cssHooks.someCSSProp = { 39 | get: function (elem, computed, extra) { 40 | }, 41 | set: function (elem, value) { 42 | } 43 | } 44 | 45 | // Disable "px" 46 | $.cssNumber["someCSSProp"] = true 47 | ``` 48 | 49 | ### fn.animate() hooks 50 | 51 | ```js 52 | $.fn.step.someWhatever = function(fx) { 53 | // ... 54 | } 55 | ``` 56 | -------------------------------------------------------------------------------- /js-lazy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JavaScript lazy shortcuts 3 | category: JavaScript 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Shortcuts 8 | {: .-left-reference} 9 | 10 | ### Examples 11 | 12 | ```js 13 | n = +'4096' // n === 4096 14 | s = '' + 200 // s === '200' 15 | ``` 16 | 17 | ```js 18 | now = +new Date() 19 | isPublished = !!post.publishedAt 20 | ``` 21 | 22 | ### Shortcuts 23 | 24 | | What | Lazy mode | "The right way" | 25 | | --- | --- | --- | 26 | | String to number | `+str` | `parseInt(str, 10)` _or_ `parseFloat()` | 27 | | Math floor | `num | 0` | `Math.floor(num)` | 28 | | Number to string | `'' + num` | `num.toString()` | 29 | | Date to UNIX timestamp | `+new Date()` | `new Date().getTime()` | 30 | | Any to boolean | `!!value` | `Boolean(value)` | 31 | | Check array contents | `if (~arr.indexOf(v))` | `if (arr.includes(v))` | 32 | {: .-left-align.-headers} 33 | 34 | `.includes` is ES6-only, otherwise use `.indexOf(val) !== -1` if you don't polyfill. 35 | -------------------------------------------------------------------------------- /tape.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tape 3 | category: JavaScript libraries 4 | --- 5 | 6 | ```js 7 | test('things', (t) => { 8 | t.plan(1) 9 | 10 | t.equal('actual', 'expected') 11 | t.equal('actual', 'expected', 'should be equal') // messages are optional 12 | 13 | t.end(err) 14 | t.fail('msg') 15 | t.pass('msg') 16 | t.timeoutAfter(2000) 17 | t.skip('msg') 18 | 19 | t.ok(value, 'is truthy') 20 | t.notOk(value, 'is falsy') 21 | t.error(err, 'is falsy (print err.message)') 22 | 23 | t.equal(actual, expected, 'is equal') 24 | t.notEqual 25 | 26 | t.deepEqual(actual, expected, 'is equal (use node's deepEqual)') 27 | t.notDeepEqual 28 | 29 | t.looseEqual(actual, expected, 'is equal (use node's deepEqual with ==)') 30 | t.notLooseEqual 31 | 32 | t.throws(fn, /FooError/) 33 | t.throws(fn, FooError /* class */) 34 | t.doesNotThrow 35 | 36 | t.comment('message') 37 | }) 38 | ``` 39 | 40 | ```js 41 | test.only((t) => { ... }) 42 | ``` 43 | -------------------------------------------------------------------------------- /_includes/2017/article-schema.html: -------------------------------------------------------------------------------- 1 | 14 | 35 | -------------------------------------------------------------------------------- /_js/behaviors/disqus.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import injectDisqus from '../helpers/inject_disqus' 3 | 4 | /** 5 | * Delay disqus by some time. It's at the bottom of the page, there's no need 6 | * for it to load fast. This will give more time to load more critical assets. 7 | */ 8 | 9 | const DISQUS_DELAY = 100 10 | 11 | /** 12 | * Injects Disqus onto the page. 13 | */ 14 | 15 | onmount('[data-js-disqus]', function () { 16 | const data = JSON.parse(this.getAttribute('data-js-disqus')) 17 | const $parent = this.parentNode 18 | $parent.setAttribute('hidden', true) 19 | 20 | window.disqus_config = function () { 21 | this.page.url = data.url 22 | this.page.identifier = data.identifier 23 | } 24 | 25 | // Disqus takes a while to load, don't do it so eagerly. 26 | window.addEventListener('load', () => { 27 | setTimeout(() => { 28 | injectDisqus(data.host) 29 | $parent.removeAttribute('hidden') 30 | }, DISQUS_DELAY) 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /ledger-periods.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ledger periods 3 | category: Ledger 4 | --- 5 | 6 | [INTERVAL] [BEGIN] [END] 7 | 8 | Interval: 9 | 10 | every day 11 | every week 12 | every month 13 | every quarter 14 | every year 15 | every N days # N is any integer 16 | every N weeks 17 | every N months 18 | every N quarters 19 | every N years 20 | daily 21 | weekly 22 | biweekly 23 | monthly 24 | bimonthly 25 | quarterly 26 | yearly 27 | 28 | Begin: 29 | 30 | from 31 | since 32 | 33 | The end time can be either of: 34 | 35 | to 36 | until 37 | 38 | Spec: 39 | 40 | 2004 41 | 2004/10 42 | 2004/10/1 43 | 10/1 44 | october 45 | oct 46 | this week # or day, month, quarter, year 47 | next week 48 | last week 49 | 50 | Examples: 51 | 52 | $ ledger r -p "since last month" 53 | 54 | See: http://ledger-cli.org/3.0/doc/ledger3.html#Period-Expressions 55 | -------------------------------------------------------------------------------- /_sass/2017/components/side-ad.scss: -------------------------------------------------------------------------------- 1 | .SideAd { 2 | @include font-size(-1); 3 | @include carbon-style; 4 | 5 | @media (min-width: 961px) { 6 | position: absolute; 7 | right: 32px; 8 | top: 80px; 9 | width: 130px; 10 | text-align: left; 11 | 12 | .carbon-img { 13 | margin-bottom: 16px; 14 | } 15 | } 16 | 17 | .carbon-text:first-line { 18 | color: $base-head; 19 | font-weight: bold; 20 | } 21 | 22 | .carbon-poweredby::before { 23 | display: block; 24 | content: ''; 25 | width: 32px; 26 | height: 1px; 27 | background: $dark-line-color; 28 | margin: 12px 0; 29 | } 30 | 31 | @media (max-width: 960px) { 32 | & { 33 | margin: 16px auto; 34 | max-width: 300px; 35 | } 36 | 37 | &::after { 38 | content: ''; 39 | display: table; 40 | clear: both; 41 | zoom: 1; 42 | } 43 | 44 | .carbon-img { 45 | float: left; 46 | margin-right: 16px; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /blessed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Blessed 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Screen 8 | 9 | ```js 10 | screen = blessed.screen({ 11 | smartCSR: true // optimize for flickering 12 | autoPadding: true // .. 13 | }) 14 | 15 | screen.append(Element) 16 | screen.destroy() 17 | 18 | screen.width 19 | screen.height 20 | screen.title = 'My window title' 21 | screen.key(['escape', 'q', 'C-c'], (ch, key) => { ... }) 22 | ``` 23 | 24 | ### Element 25 | 26 | ```js 27 | box = blessed.box({ 28 | style: { fg, bg, border.fg, scrollbar.bg, focus.bg, hover.bg }, 29 | border: { type: 'line'|'bg', bg, fg, bold, underline } 30 | tags: true, // parse {bold}tags{/bold} 31 | 32 | top, left, width, height, 33 | width: '100%', 34 | height: '100%-1', 35 | top: 'center' 36 | }) 37 | ``` 38 | 39 | ### Tags 40 | 41 | ``` 42 | {bold} 43 | {right} {center} 44 | {|} left-right separator 45 | {#c0ff33-fg}{/} 46 | ``` 47 | 48 | ``` 49 | blessed.escape('...') 50 | ``` 51 | -------------------------------------------------------------------------------- /js-appcache.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: applicationCache 3 | category: JavaScript 4 | layout: 2017/sheet 5 | --- 6 | 7 | ## Reference 8 | {: .-one-column} 9 | 10 | ### applicationCache checking 11 | 12 | ```js 13 | if (window.applicationCache) { 14 | // "Naturally" reload when an update is available 15 | var reload = false 16 | 17 | window.applicationCache.addEventListener('updateready', () => { 18 | if (window.applicationCache.status === window.applicationCache.UPDATEREADY) { 19 | window.applicationCache.swapCache() 20 | reload = true 21 | } 22 | }, false) 23 | 24 | setInterval(() => { 25 | try { 26 | // There's nothing to update for first-time load, browser freaks out :/ 27 | window.applicationCache.update() 28 | } catch (e) { } 29 | }, 1000 * 60 * 60) // Every hour 30 | } 31 | ``` 32 | 33 | This is a deprecated HTML feature. See: [Using the application cache](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) _(developer.mozilla.org)_ 34 | -------------------------------------------------------------------------------- /_inactive/deprecated/docker-osx.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Docker on OSX 3 | category: Devops 4 | --- 5 | 6 | You'll need these: 7 | 8 | * [boot2docker] - bootstraps a Virtualbox VM to run a docker daemon 9 | * [docker] - docker client 10 | 11 | ### Install 12 | 13 | $ brew install boot2docker 14 | $ brew install docker 15 | $ boot2docker init 16 | 17 | ### Turning on 18 | 19 | $ boot2docker start 20 | 21 | Waiting for VM to be started...... Started. 22 | To connect the Docker client to the Docker daemon, please set: 23 | 24 | export DOCKER_HOST=tcp://192.168.59.103:2375 25 | 26 | $ export DOCKER_HOST=tcp://192.168.59.103:2375 27 | 28 | ### Try it 29 | 30 | $ docker search ubuntu 31 | 32 | $ docker pull ubuntu 33 | $ docker start ubuntu 34 | 35 | ### Turning off 36 | 37 | $ boot2docker save 38 | # save state to disk 39 | 40 | ### Vagrant 41 | 42 | [boot2docker]: https://github.com/boot2docker/boot2docker 43 | [docker]: https://www.docker.com/ 44 | -------------------------------------------------------------------------------- /applescript.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: AppleScript 3 | updated: 2018-03-17 4 | layout: 2017/sheet 5 | category: macOS 6 | prism_languages: [applescript] 7 | --- 8 | 9 | ### Running 10 | 11 | ```applescript 12 | osascript -e "..." 13 | ``` 14 | 15 | ```applescript 16 | display notification "X" with title "Y" 17 | ``` 18 | 19 | ### Comments 20 | 21 | ```applescript 22 | -- This is a single line comment 23 | ``` 24 | 25 | ```applescript 26 | # This is another single line comment 27 | ``` 28 | 29 | ```applescript 30 | (* 31 | This is 32 | a multi 33 | line comment 34 | *) 35 | ``` 36 | 37 | ### Say 38 | 39 | ```applescript 40 | -- default voice 41 | say "Hi I am a Mac" 42 | ``` 43 | 44 | ```applescript 45 | -- specified voice 46 | say "Hi I am a Mac" using "Zarvox" 47 | ``` 48 | 49 | ### Beep 50 | 51 | ```applescript 52 | -- beep once 53 | beep 54 | ``` 55 | 56 | ```applescript 57 | -- beep 10 times 58 | beep 10 59 | ``` 60 | 61 | ### Delay 62 | 63 | ```applescript 64 | -- delay for 5 seconds 65 | delay 5 66 | ``` 67 | -------------------------------------------------------------------------------- /chunky_png.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chunky PNG 3 | category: Ruby libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Loading 8 | 9 | ```ruby 10 | image = ChunkyPNG::Image.from_file('file.png') 11 | ``` 12 | 13 | #### Alternate ways 14 | 15 | ```ruby 16 | image = ChunkyPNG::Image.from_blob(File.read('file.png')) 17 | image = ChunkyPNG::Image.from_io(io) 18 | ``` 19 | 20 | Loads from `file.png`. 21 | 22 | ### Saving 23 | 24 | ```ruby 25 | image.save('filename.png') 26 | ``` 27 | 28 | #### Alternate ways 29 | 30 | ```ruby 31 | File.open('newfile.png', 'wb') { |io| image.write(io) } 32 | binary_string = image.to_blob 33 | ``` 34 | 35 | Writes an image to `newfile.png`. 36 | 37 | ### Drawing 38 | 39 | ```ruby 40 | image[0, 0] = ChunkyPNG::Color.rgba(255, 0,0, 128) 41 | image.line(1, 1, 10, 1, ChunkyPNG::Color.from_hex('#aa007f')) 42 | ``` 43 | 44 | ### Canvas 45 | 46 | ```ruby 47 | crop(x, y, w, h) 48 | ``` 49 | 50 | ### Transforms 51 | 52 | ```ruby 53 | new_image = image.flip_horizontally.rotate_right 54 | ``` 55 | -------------------------------------------------------------------------------- /mocha-tdd.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocha.js TDD interface 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### TDD 7 | 8 | mocha.setup('tdd'); 9 | 10 | suite('something', function() { 11 | setup(function() { 12 | }); 13 | 14 | test('should work', function() { 15 | }); 16 | 17 | teardown(function() { 18 | }); 19 | }); 20 | 21 | ### Async 22 | 23 | test('should save', function(done) { 24 | var user = new User(); 25 | user.save(function(err) { 26 | if (err) throw err; 27 | done(); 28 | }); 29 | }); 30 | 31 | ### Chai: Expect 32 | 33 | var expect = chai.expect; 34 | 35 | expect(foo).to.be.a('string'); 36 | expect(foo).to.equal('bar'); 37 | expect(foo).to.have.length(3); 38 | expect(tea).to.have.property('flavors').with.length(3); 39 | 40 | ### See also 41 | 42 | * [Mocha BDD](mocha.html) 43 | * [Mocha HTML](mocha-html.html) 44 | * [Chai](chai.html) 45 | * [Sinon](sinon.html) 46 | * [Sinon Chai](sinon-chai.html) 47 | -------------------------------------------------------------------------------- /_support/critical.js: -------------------------------------------------------------------------------- 1 | const critical = require('critical') 2 | 3 | console.warn('Generating critical path styles into _includes/2017/critical/...') 4 | 5 | const OPTIONS = { 6 | base: '_site', 7 | width: 1400, 8 | height: 900, 9 | minify: true, 10 | extract: true, 11 | ignore: [ 12 | '@font-face' 13 | ], 14 | include: [ 15 | // fade-in magic (base/fade) 16 | /html\.WithJs/ 17 | ] 18 | } 19 | 20 | critical.generate({ 21 | ...OPTIONS, 22 | src: 'index.html', 23 | dest: '../_includes/2017/critical/home.css', 24 | include: [ 25 | ...OPTIONS.include, 26 | 27 | // searchbox with placeholder 28 | /\.search-box/ 29 | ] 30 | }) 31 | 32 | critical.generate({ 33 | ...OPTIONS, 34 | src: 'react.html', 35 | dest: '../_includes/2017/critical/sheet.css', 36 | include: [ 37 | ...OPTIONS.include, 38 | 39 | // sections (and h3 section list), just to be sure 40 | /\.h3-section/, 41 | 42 | // eg, -six-column in devhints.io/layout-thrashing 43 | /-column/ 44 | ] 45 | }) 46 | -------------------------------------------------------------------------------- /_sass/2017/base/fade.scss: -------------------------------------------------------------------------------- 1 | $bounce: cubic-bezier(.75,-0.5,0,1.75); 2 | 3 | /* 4 | * "Preloader": 5 | * This makes the content semi-transparent before the page ad loads. 6 | */ 7 | 8 | .post-content { 9 | html.WithJs & { 10 | opacity: 0; 11 | } 12 | } 13 | 14 | /* 15 | * Pop it in as the page loads 16 | */ 17 | 18 | .berry-sponsor { 19 | html.WithJs & { 20 | transform: scale(0.9) translate3d(0, -16px, 0); 21 | opacity: 0; 22 | } 23 | 24 | html.WithJs.LoadDone & { 25 | transform: scale(1) translate3d(0, 0, 0); 26 | opacity: 1; 27 | transition: transform 500ms $bounce, opacity 500ms linear; 28 | } 29 | } 30 | 31 | /* 32 | * Defer "loading" until page's onload event fires. 33 | * (The page actually already loaded, we just pretend like it hasn't) 34 | */ 35 | 36 | .pages-list, 37 | .post-content.-wrapified, 38 | .intro-content { 39 | html.WithJs & { 40 | opacity: 0.4; 41 | } 42 | 43 | html.WithJs.LoadDone & { 44 | opacity: 1; 45 | transition: opacity 100ms linear 100ms; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /ets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Erlang ETS 3 | category: Elixir 4 | layout: 2017/sheet 5 | weight: -1 6 | --- 7 | 8 | ## ETS 9 | 10 | ### Usage 11 | 12 | ```elixir 13 | iex> table = :ets.new(:my_table, []) 14 | 8211 15 | ``` 16 | 17 | ```elixir 18 | iex> :ets.insert(table, {:fruit, "Apple"}) 19 | iex> :ets.lookup(table, :fruit) 20 | [{:fruit, "Apple"}] 21 | ``` 22 | 23 | ```elixir 24 | iex> :ets.delete(table) 25 | iex> :ets.delete_all_objects(table) 26 | ``` 27 | 28 | ### Flags 29 | 30 | ```elixir 31 | iex> table = :ets.new(:my_table, [:set, :protected]) 32 | ``` 33 | {: .-setup} 34 | 35 | | `:set` | no duplicate keys (or: `:ordered_set`, `:bag`, `:duplicate_bag`) | 36 | | `:protected` | only this process can use it (or: `:public`, `:private`) | 37 | 38 | ### Ordered sets 39 | 40 | ```elixir 41 | :ets.first(table) 42 | :ets.last(table) 43 | :ets.next(table, key) 44 | :ets.prev(table, key) 45 | ``` 46 | 47 | ## References 48 | {: .-one-column} 49 | 50 | * 51 | * 52 | -------------------------------------------------------------------------------- /pass.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pass 3 | layout: 2017/sheet 4 | category: CLI 5 | --- 6 | 7 | Reference 8 | --------- 9 | 10 | ### Create 11 | 12 | ``` bash 13 | $ pass init [-p] 14 | $ pass git init 15 | $ pass git remote add origin 16 | $ pass git push -u --all 17 | ``` 18 | 19 | ### Store 20 | 21 | ``` bash 22 | $ pass insert [-m] twitter.com/rsc 23 | $ pass generate [-n] twitter.com/rsc length 24 | ``` 25 | 26 | ### Retrieve 27 | 28 | ``` bash 29 | $ pass ls twitter.com/ 30 | $ pass show twitter.com/rsc 31 | $ pass -c twitter.com/rsc 32 | ``` 33 | 34 | ### Search 35 | 36 | ``` bash 37 | $ pass find twitter.com 38 | ``` 39 | 40 | ### Management 41 | 42 | ``` bash 43 | $ pass mv twitter.com twitter.com/rsc 44 | $ pass rm [-rf] twitter.com 45 | $ pass cp twitter.com/rsc twitter.com/ricosc 46 | ``` 47 | 48 | ``` bash 49 | $ pass edit twitter.com/rsc 50 | ``` 51 | 52 | ### Synchronize 53 | 54 | ``` 55 | $ pass git push 56 | $ pass git pull 57 | ``` 58 | 59 | ## References 60 | 61 | * 62 | -------------------------------------------------------------------------------- /_sass/2017/markdown/p.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Crosslink (eg, phoenix.md) 3 | */ 4 | 5 | .MarkdownBody.MarkdownBody { 6 | img { 7 | max-width: 100%; 8 | } 9 | } 10 | 11 | .MarkdownBody.MarkdownBody p.-crosslink { 12 | & > a { 13 | display: block; 14 | text-decoration: none; 15 | color: $base-a; 16 | border-bottom: 0; 17 | box-shadow: none; 18 | margin: -16px; 19 | padding: 16px; 20 | } 21 | 22 | & > a:visited { 23 | color: $base-a; 24 | } 25 | 26 | & > a::before { 27 | content: ''; 28 | @include ion-md-arrow-forward(16px, white); 29 | margin-right: 16px; 30 | width: 32px; 31 | height: 32px; 32 | line-height: 32px; 33 | border-radius: 50%; 34 | } 35 | 36 | & > a, 37 | & > a:visited { 38 | &::before { 39 | background-color: $base-a; 40 | color: white; 41 | } 42 | } 43 | 44 | & > a:hover, 45 | & > a:focus { 46 | & { 47 | color: $base-a7; 48 | } 49 | 50 | &::before { 51 | background-color: $base-a7; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /nopt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nopt 3 | category: JavaScript libraries 4 | --- 5 | 6 | ```js 7 | var args = require('nopt')({ 8 | foo: [String, null], 9 | size: ['big', 'medium', 'small'], 10 | many: [String, Array], 11 | debug: Boolean, 12 | version: Boolean, 13 | help: Boolean 14 | }, { 15 | h: '--help', 16 | v: '--version' 17 | }, process.argv); 18 | 19 | args == { 20 | debug: true, 21 | version: true, 22 | size: 'big', 23 | argv: { 24 | remain: ['...', '...'], 25 | cooked: ..., 26 | original: ... 27 | } 28 | } 29 | ``` 30 | 31 | ```js 32 | if (args.help) { 33 | console.log([ 34 | 'Usage:', 35 | ' hicat [options] [file]', 36 | '', 37 | 'Options:', 38 | ' -h, --help print usage information', 39 | ' -v, --version show version info and exit', 40 | ].join('\n')); 41 | process.exit(0); 42 | } 43 | 44 | if (args.version) { 45 | console.log(require('../package.json').version); 46 | process.exit(0); 47 | } 48 | ``` 49 | 50 | https://www.npmjs.org/package/nopt 51 | -------------------------------------------------------------------------------- /modernizr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modernizr 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### Script 7 | 8 | 9 | 10 | ### Detections 11 | 12 | JavaScript 13 | 14 | * js 15 | 16 | CSS 17 | 18 | * flexbox 19 | * rgba 20 | * hsla 21 | * multiplebgs 22 | * backgroundsize 23 | * borderimage 24 | * borderradius 25 | * boxshadow 26 | * textshadow 27 | * opacity 28 | * cssanimations 29 | * csscolumns 30 | * cssgradients 31 | * cssreflections 32 | * csstransforms 33 | * csstransforms3d 34 | * csstransitions 35 | * fontface 36 | * generatedcontent 37 | 38 | HTML5 39 | 40 | * canvas 41 | * canvastext 42 | * webgl 43 | * touch 44 | * geolocation 45 | * postmessage 46 | * websqldatabase 47 | * indexeddb 48 | * hashchange 49 | * history 50 | * draganddrop 51 | * websockets 52 | * video 53 | * audio 54 | * localstorage 55 | * sessionstorage 56 | * webworkers 57 | * applicationcache 58 | * svg 59 | * inlinesvg 60 | * smil 61 | * svgclippaths 62 | -------------------------------------------------------------------------------- /browserify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Browserify 3 | category: JavaScript libraries 4 | --- 5 | 6 | browserify input.js 7 | -o output.js 8 | -t coffeeify 9 | -t [ coffeeify --extension coffee ] 10 | 11 | -u react (--exclude: omit a file) 12 | -x react (--external: reference in another bundle) 13 | -i react (--ignore: stub a file) 14 | -s Myapp (--standalone: generate a UMD bundle) 15 | --debug 16 | 17 | ### Programmatic usage 18 | 19 | browserify = require('browserify') 20 | browserify() 21 | .add('main.js') 22 | .bundle() 23 | .transform(coffeeify) 24 | .transform({extensions: '.coffee'}, coffeeify) 25 | .pipe(process.stdout) 26 | 27 | browserify({}) 28 | 29 | ### Tools 30 | 31 | * watchify (recompiles on demand) 32 | * beefy (http server) 33 | * debowerify 34 | * es6ify (es6 to es5) 35 | 36 | Transforms 37 | 38 | * coffeeify 39 | * ractify 40 | * reactify 41 | * brfs 42 | * cssify 43 | * https://github.com/substack/node-browserify/wiki/list-of-transforms 44 | 45 | -------------------------------------------------------------------------------- /assets/print.css: -------------------------------------------------------------------------------- 1 | .site-header, .social-list, .about-the-site, 2 | #see-also, #see-also+ul { 3 | display: none; 4 | } 5 | /*.post-headline.-cheatsheet .prelude span:before { 6 | content: 'cheatsheet for' 7 | }*/ 8 | .post-list { 9 | margin: 0; 10 | padding-top: 0; 11 | padding-bottom: 0; 12 | } 13 | .post-item { 14 | max-width: 100%; 15 | } 16 | .post-headline.-cheatsheet .prelude { 17 | max-width: 300px; 18 | } 19 | .post-headline, p.prelude { 20 | margin-top: 0; 21 | } 22 | .post-headline.-cheatsheet .prelude { 23 | font-size: 0.6em; 24 | letter-spacing: 1px; 25 | } 26 | .post-headline { 27 | margin-bottom: 1.5em; 28 | } 29 | .post-headline.-cheatsheet .prelude span { 30 | padding: 0.75em 20px; 31 | border-bottom: solid 1.5px #111; 32 | } 33 | .post-headline.-cheatsheet h1 { 34 | font-size: 1.75em; 35 | text-shadow: none; 36 | } 37 | pre { 38 | border-top: solid 1px #ddd; 39 | border-bottom: solid 1px #ddd; 40 | background: none; 41 | } 42 | h3 { 43 | margin: 1em 0; 44 | } 45 | pre { 46 | margin-top: 1.1em; 47 | margin-bottom: 1.1em; 48 | } 49 | -------------------------------------------------------------------------------- /macos-mouse-acceleration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mouse Acceleration 3 | layout: 2017/sheet 4 | category: macOS 5 | updated: 2018-03-20 6 | weight: -1 7 | keywords: 8 | - "defaults write .GlobalPreferences com.apple.mouse.scaling -1" 9 | intro: | 10 | Disable mouse acceleration with this one weird trick. 11 | --- 12 | 13 | ## Acceleration 14 | 15 | 16 | ### Disabling 17 | 18 | ```bash 19 | defaults write .GlobalPreferences com.apple.mouse.scaling -1 20 | ``` 21 | 22 | Note: Log out to take effect. If you change *Tracking Speed* under System Preferences, it will undo this fix. Only affects the mouse, not the trackpad. 23 | 24 | ### Re-enabling 25 | 26 | Under *System Preferences* → *Mouse*, change *Tracking Speed*. 27 | 28 | ### Trackpad acceleration 29 | 30 | ```bash 31 | defaults write .GlobalPreferences com.apple.trackpad.scaling -1 32 | ``` 33 | 34 | Works the same way, but only affects trackpads. 35 | 36 | ## References 37 | 38 | - [Disabling mouse acceleration](https://stackoverflow.com/questions/5782884/disabling-mouse-acceleration-in-mac-os-x) _(stackoverflow.com)_ 39 | -------------------------------------------------------------------------------- /scp.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: scp 3 | category: CLI 4 | layout: 2017/sheet 5 | updated: 2018-12-25 6 | authors: 7 | - github: vastpeng 8 | --- 9 | 10 | ### Usage 11 | {: .-prime} 12 | 13 | ```bash 14 | scp source_path destination_path 15 | ``` 16 | 17 | ### Conditions 18 | 19 | ```bash 20 | -r # transfer directory 21 | -v # see the transfer details 22 | -C # copy files with compression 23 | -l 800 # limit bandwith with 800 24 | -p # preserving the original attributes of the copied files 25 | -q # hidden the output 26 | ``` 27 | 28 | ### Commands 29 | 30 | ```bash 31 | $ scp file user@host:/path/to/file # copying a file to the remote system using scp command 32 | $ scp user@host:/path/to/file /local/path/to/file # copying a file from the remote system using scp command 33 | ``` 34 | 35 | ```bash 36 | $ scp file1 file2 user@host:/path/to/directory # copying multiple files using scp command 37 | $ scp -r /path/to/directory user@host:/path/to/directory # Copying an entire directory with scp command 38 | ``` 39 | -------------------------------------------------------------------------------- /_sass/2017/components/berry-sponsor.scss: -------------------------------------------------------------------------------- 1 | .berry-sponsor { 2 | text-align: center; 3 | position: relative; 4 | overflow: hidden; 5 | max-width: 320px; 6 | margin-left: auto; 7 | margin-right: auto; 8 | } 9 | 10 | /* 11 | * Berry styles 12 | */ 13 | 14 | .cs__header { 15 | color: $base-mute; 16 | @include font-size(-1); 17 | display: block; 18 | margin-bottom: 8px; 19 | 20 | &::before, 21 | &::after { 22 | content: '—'; 23 | margin: 0 0.5em; 24 | opacity: 0.5; 25 | } 26 | } 27 | 28 | .cs__blurb { 29 | &, 30 | &:hover, 31 | &:focus { 32 | text-decoration: none; 33 | } 34 | 35 | & { 36 | color: $base-text; 37 | display: block; 38 | } 39 | 40 | & > strong { 41 | color: $base-head; 42 | font-weight: bold; 43 | } 44 | 45 | &:hover, 46 | &:focus { 47 | & > strong { 48 | color: $base-text; 49 | } 50 | 51 | & > span { 52 | color: $base-mute; 53 | } 54 | } 55 | } 56 | 57 | .cs__pixel { 58 | position: absolute; 59 | left: 0; 60 | top: 0; 61 | pointer-events: none; 62 | } 63 | -------------------------------------------------------------------------------- /deprecated/bower-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bower API 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | --- 6 | 7 | ```js 8 | require('bower').config 9 | ``` 10 | 11 | ```js 12 | { cwd: '/Users/rsc', 13 | directory: 'bower_components', 14 | registry: 15 | { search: [ 'https://bower.herokuapp.com' ], 16 | register: 'https://bower.herokuapp.com', 17 | publish: 'https://bower.herokuapp.com' }, 18 | shorthandResolver: 'git://github.com/{{owner}}/{{package}}.git', 19 | tmp: '/var/folders/5y/190gjd_j2c5bfkn563dk2xdr0000gn/T/rsc/bower', 20 | timeout: 30000, 21 | ca: { search: [] }, 22 | strictSsl: true, 23 | userAgent: 'node/v0.10.33 darwin x64', 24 | color: true, 25 | storage: 26 | { packages: '/Users/rsc/.cache/bower/packages', 27 | links: '/Users/rsc/.local/share/bower/links', 28 | completion: '/Users/rsc/.local/share/bower/completion', 29 | registry: '/Users/rsc/.cache/bower/registry', 30 | empty: '/Users/rsc/.local/share/bower/empty' }, 31 | interactive: false, 32 | argv: { remain: [], cooked: [], original: [] } } 33 | ``` 34 | -------------------------------------------------------------------------------- /git-branch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git branches 3 | category: Git 4 | layout: 2017/sheet 5 | updated: 2017-09-20 6 | --- 7 | 8 | ## Working with branches 9 | {: .-three-column} 10 | 11 | ### Creating 12 | 13 | ```bash 14 | git checkout -b $branchname 15 | git push origin $branchname --set-upstream 16 | ``` 17 | 18 | Creates a new branch locally then pushes it. 19 | 20 | ### Getting from remote 21 | 22 | ```bash 23 | git fetch origin 24 | git checkout --track origin/$branchname 25 | ``` 26 | 27 | Gets a branch in a remote. 28 | 29 | ### Delete local remote-tracking branches 30 | 31 | ```bash 32 | git remote prune origin 33 | ``` 34 | 35 | Deletes `origin/*` branches in your local copy. Doesn't affect the remote. 36 | 37 | ### List merged branches 38 | 39 | ```bash 40 | git branch -a --merged 41 | ``` 42 | 43 | List outdated branches that have been merged into the current one. 44 | 45 | ### Delete remote branch 46 | 47 | ```bash 48 | git push origin :$branchname 49 | ``` 50 | 51 | Works for tags, too! 52 | 53 | ### Get current sha1 54 | 55 | ```bash 56 | git show-ref HEAD -s 57 | ``` 58 | -------------------------------------------------------------------------------- /machinist.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Machinist 3 | category: Ruby libraries 4 | --- 5 | 6 | ### Installing 7 | 8 | # Gemfile 9 | gem 'machinist', '>= 2.0.0.beta2', group: 'test' 10 | 11 | # ~$ bundle 12 | # ~$ rails generate machinist:install 13 | 14 | ### Building objects 15 | 16 | User.make 17 | 18 | # `make` builds it, and `make!` builds+saves it 19 | User.make! 20 | User.make! name: "David" 21 | User.make!(:admin) 22 | 23 | ### Defining blueprints 24 | 25 | User.blueprint do 26 | name { "User #{sn}" } 27 | email { "user-#{sn}@example.com" } 28 | end 29 | 30 | User.blueprint(:admin) do 31 | name { "Admin User #{sn}" } 32 | admin { true } 33 | end 34 | 35 | ### Associations 36 | 37 | Post.blueprint do 38 | author { User.make } 39 | 40 | comments(3) # Makes 3 comments (has_many / habtm) 41 | 42 | author # autodetect (Assumes there's User.blueprint) 43 | 44 | end 45 | 46 | ### References 47 | 48 | * [https://github.com/notahat/machinist](https://github.com/notahat/machinist) 49 | -------------------------------------------------------------------------------- /_sass/2017/components/back-button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Home link 3 | */ 4 | 5 | .back-button { 6 | text-decoration: none; 7 | width: 48px; 8 | height: 48px; 9 | line-height: 48px - 2px; 10 | text-align: center; 11 | display: inline-block; 12 | border-radius: 50%; 13 | transition: all 100ms linear; 14 | 15 | // Smaller on mobile 16 | @media (max-width: 480px) { 17 | width: 32px; 18 | height: 32px; 19 | line-height: 32px - 2; 20 | } 21 | 22 | // Colors 23 | &, 24 | &:visited { 25 | color: $base-mute; 26 | } 27 | 28 | // Active 29 | &:hover, 30 | &:focus { 31 | color: white; 32 | background: $base-a; 33 | opacity: 1; 34 | } 35 | 36 | // Icon 37 | &::before { 38 | content: ''; 39 | @include ion-md-arrow-back(24px, $base-text); 40 | vertical-align: middle; 41 | } 42 | 43 | &:hover::before, 44 | &:focus::before { 45 | @include ion-md-arrow-back(24px, white); 46 | } 47 | 48 | // Icon: smaller on mobile 49 | @media (max-width: 480px) { 50 | &::before { 51 | font-size: 16px; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /google_analytics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Google Analytics 3 | --- 4 | 5 | ### Pageview 6 | 7 | // Analytics.js 8 | ga('create', 'UA-XXXX-Y', 'auto'); 9 | ga('send', 'pageview'); 10 | 11 | ### Track events 12 | 13 | // ga.js 14 | // [..., category, action, label, value (int), noninteraction (bool)] 15 | _gaq.push(['_trackEvent', 'Videos', 'Play', 'Birthday video', true]) 16 | _gaq.push(['_trackEvent', 'Projects', 'Donate', 'Project name']) 17 | _gaq.push(['_trackEvent', 'Accounts', 'Login']) 18 | 19 | // Analytics.js 20 | // , , category, action, label, value (int) 21 | ga('send', 'event', 'button', 'click', 'nav buttons', 4); 22 | 23 | ### Variables 24 | 25 | // [..., index, name, value, scope (optional)] 26 | _gaq.push(['_setCustomVar', 1, 'Logged in', 'Yes', 2]); 27 | 28 | // Scope = 1 (visitor), 2 (session), 3 (page, default) 29 | 30 | https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables 31 | https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide 32 | -------------------------------------------------------------------------------- /_sass/2017/components/comments-details.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Comments disclosure triangle 3 | */ 4 | 5 | .comments-details { 6 | & { 7 | margin-bottom: -16px; 8 | } 9 | 10 | &[open] { 11 | margin-bottom: 0; 12 | } 13 | 14 | & > summary { 15 | @include font-size(1); 16 | color: $base-a; 17 | padding: 24px 0; 18 | white-space: nowrap; 19 | cursor: pointer; 20 | } 21 | 22 | & > summary:hover, 23 | & > summary:focus { 24 | &, 25 | & > .suffix { 26 | color: $base-a7; 27 | } 28 | 29 | & > .fauxlink { 30 | border-bottom: solid 1px $base-a7; 31 | } 32 | } 33 | 34 | & > summary > .count { 35 | font-weight: bold; 36 | } 37 | 38 | & > summary > .count::before { 39 | @include ion-md-chatboxes(24px, $base-a); 40 | content: ''; 41 | vertical-align: middle; 42 | color: $base-a; 43 | margin: 0 8px; 44 | } 45 | 46 | & > summary > .suffix { 47 | color: $base-mute; 48 | } 49 | 50 | & > summary > .fauxlink { 51 | margin-left: 4px; 52 | border-bottom: solid 1px rgba($base-a, 0.25); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /vows.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vows 3 | category: JavaScript libraries 4 | --- 5 | 6 | * [Vowsjs.org](http://vowsjs.org/) 7 | 8 | ### CoffeeScript usage 9 | 10 | vows = require "vows" 11 | assert = require "assert" 12 | 13 | vows 14 | .describe('My tests') 15 | .addBatch 16 | 'context': 17 | topic: -> 18 | 100 19 | 'should work': (number) -> 20 | assert.equal number, 100 21 | 22 | .export(module) 23 | 24 | ### Running 25 | 26 | vows test/*-test.* --spec 27 | 28 | ### Assertions 29 | 30 | assert.equal a, b 31 | assert.notEqual a, b 32 | assert.strictEqual a, b 33 | 34 | assert.isNaN(number) 35 | assert.instanceOf(object, klass) 36 | assert.isUndefined(object) 37 | assert.isFunction(func) 38 | assert.isNull(object) 39 | assert.isNotZero(object) 40 | assert.isObject(object) 41 | assert.isString(object) 42 | 43 | ### Async 44 | 45 | .addBatch 46 | topic: -> 47 | doStuff() 48 | @callback 2 49 | 'check things': (n) -> 50 | assert.equal 2, n 51 | -------------------------------------------------------------------------------- /mocha-html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocha HTML 3 | category: JavaScript libraries 4 | --- 5 | 6 | This is a mocha template that loads js/css from cdn. 7 | 8 | ```html 9 | 10 | 11 | 12 | 13 | Mocha 14 | 15 | 16 | 17 | 18 |
    19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /rst.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ReStructuredText 3 | category: Markup 4 | --- 5 | 6 | ### Comments 7 | 8 | .. @theme 2010 9 | .. include:: ../themes/2010/common.rst 10 | .. contents:: 11 | .. |substitute| replace:: replacement name 12 | 13 | ### Headings 14 | 15 | Heading 16 | ======= 17 | 18 | .. class:: brief 19 | 20 | Hello there. |substitute| **This is bold** 21 | 22 | 23 | - Bullet list with a link_ (or `link with words`_) 24 | - Yes 25 | 26 | .. _link: http://link.org 27 | 28 | ### PDF page break 29 | 30 | .. raw:: pdf 31 | 32 | PageBreak oneColumn 33 | 34 | ### Link targets 35 | 36 | Internal link target_. 37 | 38 | .. _target: 39 | 40 | This is where _target will end up in. 41 | 42 | ### Tables (?) 43 | 44 | .. class:: hash-table 45 | 46 | .. list-table:: 47 | 48 | * - :key:`Cuisine:` 49 | - :val:`French/fusion` 50 | * - :key:`Number of ingredients:` 51 | - :val:`8` 52 | * - :key:`Preparation time:` 53 | - :val:`30 hours` 54 | -------------------------------------------------------------------------------- /_includes/2017/comments-area.html: -------------------------------------------------------------------------------- 1 | {% assign identifier = include.page.url | remove: '.html' | remove_first: '/' %} 2 | {% if site.data.disqus.enabled %} 3 |
    4 |
    5 |
    6 | 7 | 8 | 0 Comments 9 | 10 | {{ site.data.content.comments_area.suffix }} 11 | {{ site.data.content.comments_area.link }} 12 | 13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 | 21 |
    22 | {% endif %} 23 | -------------------------------------------------------------------------------- /make-assets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Make for assets 3 | hljs_languages: [makefile] 4 | --- 5 | 6 | ## Basic compiling 7 | 8 | ```makefile 9 | bin := ./node_modules/.bin 10 | 11 | all: build/foo.js 12 | 13 | build/%.js: src/%.coffee 14 | @$(bin)/coffee < $^ > $@ 15 | ``` 16 | 17 | ## Stylus + Autoprefixer 18 | 19 | bin := ./node_modules/.bin 20 | stylus := $(bin)/stylus 21 | autoprefixer := $(bin)/autoprefixer 22 | styl_files := $(shell find web/ -name "*.styl") 23 | 24 | all: public/app.css 25 | 26 | public/app.css: css/app.styl 27 | 28 | %.css: %.styl $(styl_files) 29 | @$(stylus) $< | $(autoprefixer) -b "> 1%" > $@ 30 | 31 | ## Hint 32 | 33 | hint: 34 | $(js_files) 35 | 36 | ## Watching 37 | 38 | watch: 39 | @echo "... watching for changes" 40 | @while true; do make -s; sleep 1; done 41 | 42 | ## Browserify 43 | 44 | js_files := $(shell find web/ -name "*.js") 45 | 46 | public/app.js: web/app.js 47 | public/vendor.js: web/vendor.js 48 | 49 | public/%.js: web/%.js $(js_files) 50 | $(browserify) -t [ cssify -x .css ] $< > $@ 51 | -------------------------------------------------------------------------------- /_includes/social-list.html: -------------------------------------------------------------------------------- 1 | {% if include.page.type == 'home' %} 2 | {% assign description = site.data.content.social_list.default_description %} 3 | {% else %} 4 | {% assign description = site.data.content.social_list.description | replace: "TITLE", include.page.title %} 5 | {% endif %} 6 | 13 | -------------------------------------------------------------------------------- /parsimmon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Parsimmon 3 | category: JavaScript libraries 4 | --- 5 | 6 | ```js 7 | const P = require('parsimmon') 8 | 9 | P.regexp(/[a-z]+/) 10 | .parse('hello') 11 | //=> { status: true, value: ['hello'] } 12 | ``` 13 | 14 | ## Atoms 15 | 16 | ```js 17 | P.regexp(/[a-z]+/) 18 | P.string('hello') 19 | P.oneOf('abc') // like P.regexp(/[abc]/) 20 | 21 | P.whitespace 22 | P.optWhitespace 23 | P.eof 24 | ``` 25 | 26 | ## Combinators 27 | 28 | ```js 29 | P.seq(a, b, c) // sequence of these 30 | P.alt(a, b) // any of these 31 | P.sepBy(a, P.string(',')) // sequence of `a`, separated by ',' 32 | P.sepBy1(a, P.string(',')) // same, at least once 33 | 34 | a.or(b) // like P.alt(a, b) 35 | a.skip(b) // parses `b` but discards it 36 | 37 | a.many() 38 | a.times(3) 39 | a.times(1, 4) // 1 <= x <= 4 40 | a.atMost(10) 41 | a.atLeast(10) 42 | ``` 43 | 44 | ## Formatting 45 | 46 | ```js 47 | P.seq(P.number, P.oneOf('+-*/'), P.number) 48 | .map(([left, oper, right]) => ({ oper, left, right })) 49 | ``` 50 | 51 | ## Reference 52 | 53 | - 54 | -------------------------------------------------------------------------------- /_sass/2017/base/base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Base 3 | */ 4 | 5 | html, body { 6 | background: $base-body; 7 | font-family: $body-font; 8 | font-size: 14px; 9 | line-height: 1.6; 10 | color: $base-text; 11 | overflow-x: hidden; 12 | } 13 | 14 | body { 15 | @include font-size(0); 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | /* 21 | * Code 22 | */ 23 | 24 | pre, code { 25 | font-family: $monospace-font; 26 | letter-spacing: -0.03em; 27 | } 28 | 29 | pre { 30 | font-size: $code-size; 31 | } 32 | 33 | /* 34 | * Antialias 35 | */ 36 | 37 | *:not(pre):not(code) { 38 | -webkit-font-smoothing: antialiased; 39 | -moz-osx-font-smoothing: grayscale; 40 | } 41 | 42 | /* 43 | * Links 44 | */ 45 | 46 | a { 47 | color: $base-b; 48 | } 49 | 50 | a:visited { 51 | color: $base-b7; 52 | } 53 | 54 | a:hover { 55 | color: $base-b3; 56 | } 57 | 58 | /* prism.js adds area-hidden which it probably shouldn't */ 59 | [aria-hidden]:not(.line-highlight) { 60 | display: none !important; 61 | } 62 | 63 | // No tooltips on mobile 64 | @media (max-width: 580px) { 65 | .hint--bottom { 66 | &::before, 67 | &::after { 68 | display: none; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /bolt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bolt Quickstart 3 | category: Bolt 4 | layout: 2017/sheet 5 | updated: 2018-12-25 6 | authors: 7 | - github: lucywyman 8 | keywords: 9 | - Puppet 10 | - tasks 11 | - modules 12 | description: | 13 | A quick guide to getting started writing Bolt tasks 14 | --- 15 | 16 | ### Install Bolt 17 | 18 | ```bash 19 | # On MacOS 20 | brew cask install puppetlabs/puppet/puppet-bolt 21 | # On Windows 22 | choco install puppet-bolt 23 | ``` 24 | 25 | Bolt is available as a package for most platforms. See [installing bolt](https://puppet.com/docs/bolt/latest/bolt_installing.html) 26 | 27 | ### Create a module with a task 28 | 29 | ```bash 30 | mkdir -p ~/.puppetlabs/bolt/modules/mymodule/tasks 31 | cp myscript.sh ~/.puppetlabs/bolt/modules/mymodule/tasks/ 32 | ``` 33 | 34 | Tasks can be written in any language your targets can run. See [writing tasks](https://puppet.com/docs/bolt/latest/writing_tasks.html) for more details. 35 | 36 | ### Run Bolt 37 | 38 | ```bash 39 | bolt task run mymodule::myscript -n node1.example.com,node2.example.com --private-key ~/.ssh/id_rsa-private 40 | ``` 41 | 42 | See `bolt task run --help` for more information and command line options. 43 | -------------------------------------------------------------------------------- /_includes/2017/top-nav.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Params: 3 | - noshare 4 | - noedit 5 | - noback 6 | {% endcomment %} 7 | 36 | -------------------------------------------------------------------------------- /deis.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deis 3 | category: Devops 4 | layout: 2017/sheet 5 | --- 6 | 7 | ### Deploy 8 | 9 | ``` 10 | deis create app-name 11 | git push deis master 12 | deis open 13 | ``` 14 | 15 | ### Deploy dockerfile 16 | 17 | ```sh 18 | $ deis create app-name 19 | $ deis pull redis:latest 20 | Creating build... done, v2 21 | # default process type is `cmd` 22 | ``` 23 | 24 | ### Config 25 | 26 | ``` 27 | deis config:list 28 | deis config:set FOO=bar BAZ=foo 29 | deis config:unset FOO 30 | deis config:pull # writes to .env 31 | deis config:push # reads from .env 32 | ``` 33 | 34 | ### Managing instances 35 | 36 | ``` 37 | deis logs 38 | deis run rake db:migrate 39 | deis ps 40 | ``` 41 | 42 | ### Custom domains 43 | 44 | ``` 45 | deis domains:list 46 | deis domains:add www.myapp.com 47 | deis domains:remove www.myapp.com 48 | ``` 49 | 50 | ### Limits 51 | 52 | ```sh 53 | deis limits:set web=1G 54 | deis limits:set web=1024 --cpu 55 | # (`web` is a process type) 56 | ``` 57 | 58 | ### Sharing 59 | 60 | ``` 61 | deis perms:create otheruser 62 | ``` 63 | 64 | ### SSL 65 | 66 | ``` 67 | deis certs:add server.crt server.key 68 | ``` 69 | 70 | See: [SSL](http://docs.deis.io/en/latest/using_deis/app-ssl/) 71 | -------------------------------------------------------------------------------- /promise.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Promises 3 | category: JavaScript 4 | --- 5 | 6 | Based on the [Promise API reference][promise] (mozilla.org). 7 | {:.brief-intro.center} 8 | 9 | [promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 10 | 11 | ### Creating promises 12 | 13 | ```js 14 | new Promise(function (ok, err) { 15 | doStuff(function () { 16 | if (success) { ok(); } 17 | else { err(); } 18 | }); 19 | }) 20 | ``` 21 | 22 | ### Consuming promises 23 | 24 | ```js 25 | promise 26 | .then(okFn, errFn) 27 | .catch(errFn) 28 | ``` 29 | 30 | ### Multiple promises 31 | 32 | ```js 33 | var promises = [ 34 | promise1(), promise2(), ... 35 | ] 36 | 37 | // succeeds when all succeed 38 | Promise.all(promises) 39 | .then(function (results) { 40 | }); 41 | 42 | // succeeds when one finishes first 43 | Promise.race(promises) 44 | .then(function (result) { 45 | }); 46 | ``` 47 | 48 | ### Converting other promises 49 | 50 | ```js 51 | return Promise.resolve("result"); 52 | return Promise.resolve(promise); 53 | return Promise.resolve(thenable); 54 | 55 | return Promise.reject("reason"); 56 | 57 | Promise.resolve($.get('http://google.com')) 58 | .then(...) 59 | ``` 60 | -------------------------------------------------------------------------------- /ledger-examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ledger examples 3 | category: Ledger 4 | --- 5 | 6 | Inspecting transactions: 7 | 8 | # show me expenses for october (--period) 9 | ledger r Expenses -p oct 10 | 11 | # what's the most expensive? (--sorted) 12 | ledger r Expenses -S amount --tail 10 13 | 14 | # how much was spent on grocery? (--weekly, --monthly) 15 | ledger r Grocery 16 | ledger r Grocery -W 17 | ledger r Grocery -M 18 | 19 | # what did I spend my Mastercard on? (--period, --begin, --end) 20 | ledger r mastercard 21 | ledger r mastercard -p "january" 22 | ledger r mastercard -b 01/25 -e 01/31 23 | 24 | Graphing: 25 | 26 | # Graph my bank account balance, monthly 27 | ledger r Savings -M 28 | 29 | # Graph my expenses, monthly (-n = --collapse) 30 | ledger r Expenses -M -n 31 | 32 | # ...what's the average per month? 33 | ledger r Expenses -M -n --average 34 | 35 | Simple: 36 | 37 | # what did I do yesterday? 38 | # ..list transactions on this day 39 | ledger r -p 01/26 40 | ledger r -p yesterday 41 | 42 | Switches: 43 | 44 | # what's everything I got in USD? (--exchange) 45 | ledger b Assets -X USD 46 | -------------------------------------------------------------------------------- /css-system-font-stack.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "CSS system fonts" 3 | category: CSS 4 | layout: 2017/sheet 5 | weight: -3 6 | tags: [Featurable] 7 | --- 8 | 9 | ### System fonts 10 | 11 | ```css 12 | font-family: -apple-system, BlinkMacSystemFont, 13 | "Segoe UI", "Roboto", "Oxygen", 14 | "Ubuntu", "Cantarell", "Fira Sans", 15 | "Droid Sans", "Helvetica Neue", sans-serif; 16 | ``` 17 | 18 | This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_ 19 | 20 | ### Explanation 21 | 22 | | Font | OS | 23 | | ---- | -- | 24 | | `-apple-system` | OS X (10.11+), iOS (9+) | 25 | | `BlinkMacSystemFont` | OS X, Chrome | 26 | | `Segoe UI` | Windows | 27 | | `Roboto` | Android 4.0+ | 28 | | `Oxygen` | Linux, KDE | 29 | | `Ubuntu` | Linux, Ubuntu | 30 | | `Cantarell` | Linux, GNOME | 31 | | `Fira Sans` | Firefox OS | 32 | | `Droid Sans` | Android (until 3.2) | 33 | | `Helvetica Neue` | OS X (10.9) | 34 | -------------------------------------------------------------------------------- /ledger-format.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ledger format 3 | category: Ledger 4 | --- 5 | 6 | ``` 7 | 2015/01/01 Pay rent 8 | Assets:Savings -$300 9 | Expenses:Rent 10 | ``` 11 | 12 | ### First line 13 | 14 | ``` 15 | 2015/01/01 * Pay rent ; tagname: 16 | ^ ^ ^ 17 | Date Flag Description ^ comment/tag 18 | ``` 19 | 20 | ### Balance assertion 21 | 22 | ``` 23 | 2015/01/01 Pay rent 24 | Assets:Savings -$300 = $1200 ; assert there's $1200 left after 25 | Expenses:Rent 26 | ``` 27 | Flags: 28 | 29 | ``` 30 | * cleared 31 | ! pending 32 | ``` 33 | 34 | ## Accounts 35 | Only relevant with `--strict` or `--pedantic` 36 | 37 | ``` 38 | account Expenses:Food 39 | note This account is all about the chicken! 40 | alias food 41 | payee ^(KFC|Popeyes)$ 42 | check commodity == "$" 43 | assert commodity == "$" 44 | eval print("Hello!") 45 | default 46 | ``` 47 | 48 | ## Others 49 | 50 | ``` 51 | D $1,000.00 ; set default commodity 52 | 53 | alias Cash = Assets:Cash 54 | 55 | Y2015 ; set default year (you can use 01/25 as date after) 56 | ``` 57 | 58 | ### Prefix all transactions with an account 59 | 60 | ``` 61 | account Home 62 | include home.journal 63 | end 64 | ``` 65 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Jekyll configuration 2 | 3 | whitelist: 4 | - jekyll-redirect-from 5 | - jekyll-github-metadata 6 | 7 | plugins: 8 | - jekyll-redirect-from 9 | - jekyll-github-metadata 10 | 11 | exclude: 12 | - Makefile 13 | - README.md 14 | - CONTRIBUTING.md 15 | - Gemfile 16 | - Gemfile.lock 17 | - CNAME 18 | - vendor 19 | - package.json 20 | - .babelrc 21 | - yarn.lock 22 | - package-lock.json 23 | - webpack.config.js 24 | - node_modules 25 | - Dockerfile 26 | - docker_compose.yml 27 | 28 | # Markdown 29 | 30 | highlighter: false 31 | markdown: kramdown 32 | kramdown: 33 | input: GFM 34 | hard_wrap: false 35 | parse_block_html: true 36 | syntax_highlighter_opts: 37 | disable: true 38 | 39 | # Defaults 40 | 41 | defaults: 42 | - scope: 43 | path: "" 44 | type: pages 45 | values: 46 | layout: "default" 47 | og_type: article 48 | type: article 49 | category: "Others" 50 | excerpt_separator: "" 51 | prism_languages: [] 52 | 53 | # Site info 54 | 55 | url: https://devhints.io 56 | title: Devhints.io cheatsheets 57 | 58 | # GitHub metadata 59 | # https://help.github.com/articles/repository-metadata-on-github-pages/ 60 | 61 | repository: rstacruz/cheatsheets 62 | -------------------------------------------------------------------------------- /_inactive/deprecated/jquery-mobile-events.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery mobile events 3 | category: JavaScript libraries 4 | --- 5 | 6 | ### Mobile events 7 | 8 | For support for `tap`, `swipe`, `swipeLeft`, et al, use 9 | [jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first. 10 | 11 | To get `$.support.touch` (and family), use this from 12 | [jquery.mobile.support.js][s]: 13 | 14 | $.extend($.support, { 15 | orientation: "orientation" in window && "onorientationchange" in window, 16 | touch: "ontouchend" in document, 17 | cssTransitions: "WebKitTransitionEvent" in window, 18 | pushState: "pushState" in history && "replaceState" in history, 19 | mediaquery: $.mobile.media( "only all" ), 20 | cssPseudoElement: !!propExists( "content" ), 21 | touchOverflow: !!propExists( "overflowScrolling" ), 22 | boxShadow: !!propExists( "boxShadow" ) && !bb, 23 | scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini, 24 | dynamicBaseTag: baseTagTest() 25 | }); 26 | 27 | [m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js 28 | [s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js 29 | -------------------------------------------------------------------------------- /cron.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cron 3 | category: CLI 4 | layout: 2017/sheet 5 | updated: 2017-08-26 6 | weight: -3 7 | --- 8 | 9 | ## Format 10 | {: .-two-column} 11 | 12 | ### Format 13 | 14 | ``` 15 | Min Hour Day Mon Weekday 16 | ``` 17 | {: .-setup} 18 | 19 | ``` 20 | * * * * * command to be executed 21 | ``` 22 | 23 | ``` 24 | ┬ ┬ ┬ ┬ ┬ 25 | │ │ │ │ └─ Weekday (0=Sun .. 6=Sat) 26 | │ │ │ └────── Month (1..12) 27 | │ │ └─────────── Day (1..31) 28 | │ └──────────────── Hour (0..23) 29 | └───────────────────── Minute (0..59) 30 | ``` 31 | {: .-setup.-box-chars} 32 | 33 | ### Examples 34 | 35 | | Example | Description | 36 | | --- | --- | 37 | | `0 * * * *` | every hour | 38 | | `*/15 * * * *` | every 15 mins | 39 | | `0 */2 * * *` | every 2 hours | 40 | | `0 0 * * 0` | every Sunday midnight | 41 | | --- | --- | 42 | | `@reboot` | every reboot | 43 | 44 | ### Crontab 45 | 46 | ```bash 47 | # Adding tasks easily 48 | echo "@reboot echo hi" | crontab 49 | ``` 50 | 51 | ```bash 52 | # Open in editor 53 | crontab -e 54 | ``` 55 | 56 | ```bash 57 | # List tasks 58 | crontab -l [-u user] 59 | ``` 60 | -------------------------------------------------------------------------------- /jscoverage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jscoverage 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | intro: | 6 | A small guide into installing [jscoverage](https://npmjs.com/package./jscoverage). Also see [mocha-blanket](./mocha-blanket). 7 | --- 8 | 9 | ### Install 10 | 11 | #### Install via npm 12 | 13 | ```bash 14 | npm install --save-dev jscoverage 15 | ``` 16 | 17 | #### Ignore output 18 | 19 | ```bash 20 | echo coverage.html >> .gitignore 21 | ``` 22 | 23 | ### package.json 24 | 25 | The `coverage` task injects your source files (`lib`) with jscoverage hooks, runs `mocha -R html-cov`, then restores later. 26 | {: .-setup} 27 | 28 | ```bash 29 | /* directory */ 30 | "coverage": "mv lib lib~; (jscoverage lib~ lib; mocha -R html-cov > coverage.html); rm -rf lib; mv lib~ lib" 31 | ``` 32 | {: .-hard-wrap} 33 | 34 | ```bash 35 | /* single file */ 36 | "coverage": "(cp index.js index.js~; jscoverage index.js; mv index-cov.js index.js; mocha -R html-cov > coverage.html); mv index.js~ index.js" 37 | ``` 38 | {: .-hard-wrap} 39 | 40 | ### Run 41 | 42 | ```bash 43 | npm run coverage 44 | ``` 45 | 46 | ```bash 47 | open coverage.html 48 | ``` 49 | 50 | ### Caveats 51 | 52 | If you're using jsdom, be sure to expose the `window._$jscoverage` variable into 53 | the `global` scope. 54 | -------------------------------------------------------------------------------- /web-workers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Web workers 3 | category: JavaScript 4 | updated: 2017-10-30 5 | layout: 2017/sheet 6 | weight: -1 7 | --- 8 | 9 | ## Web workers 10 | 11 | #### Client 12 | 13 | ```js 14 | var worker = new Worker('worker.js') 15 | 16 | worker.onmessage = function (message) { 17 | alert(JSON.stringify(message.data)) 18 | }) 19 | 20 | worker.postMessage('hello!') 21 | ``` 22 | 23 | Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) 24 | 25 | #### Worker 26 | 27 | ```js 28 | self.onmessage = function (message) { 29 | ··· 30 | } 31 | 32 | self.postMessage({ msg: 'hello' }) 33 | ``` 34 | 35 | ### Message data 36 | 37 | #### [MessageEvent] 38 | 39 | ```js 40 | bubbles: false 41 | cancelBubble: false 42 | cancelable: false 43 | clipboardData: undefined 44 | currentTarget: Worker 45 | data: "Hello" ← the data 46 | defaultPrevented: false 47 | eventPhase: 0 48 | lastEventId: "" 49 | origin: "" 50 | ports: Array[0] 51 | returnValue: true 52 | source: null 53 | srcElement: Worker 54 | target: Worker 55 | timeStamp: 1344821022383 56 | type: "message" 57 | ``` 58 | 59 | These are the contents of `message` on onmessage. 60 | -------------------------------------------------------------------------------- /_js/behaviors/anchors.js: -------------------------------------------------------------------------------- 1 | import onmount from 'onmount' 2 | import prepend from 'dom101/prepend' 3 | 4 | const DEFAULTS = { 5 | // select elements to put anchor on 6 | rule: 'h2[id]', 7 | // class name for anchor 8 | className: 'local-anchor anchor', 9 | // text of anchor 10 | text: '#', 11 | // append before or after innerText? 12 | shouldAppend: false, 13 | } 14 | 15 | /* 16 | * Behavior: Add local anchors 17 | */ 18 | 19 | onmount('[data-js-anchors]', function () { 20 | const data = JSON.parse(this.getAttribute('data-js-anchors') || '{}') 21 | const rules = Array.isArray(data) 22 | ? (data.length ? data : [DEFAULTS]) 23 | : [Object.assign({}, DEFAULTS, data)] 24 | 25 | for (const { rule, className, text, shouldAppend } of rules) { 26 | for (const el of this.querySelectorAll(rule)) { 27 | if (!el.hasAttribute('id')) { 28 | continue 29 | } 30 | 31 | const id = el.getAttribute('id') 32 | const anchor = document.createElement('a') 33 | anchor.setAttribute('href', `#${id}`) 34 | anchor.setAttribute('class', className) 35 | anchor.innerText = String(text || DEFAULTS.text) 36 | 37 | if (shouldAppend) { 38 | el.appendChild(anchor) 39 | } else { 40 | prepend(el, anchor) 41 | } 42 | } 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /_sass/2017/components/related-posts-callout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Callout 3 | */ 4 | 5 | .related-posts-callout { 6 | & { 7 | display: flex; 8 | text-decoration: none; 9 | background: $base-a-gradient; 10 | padding: 32px; 11 | align-items: center; 12 | justify-content: center; 13 | color: white; 14 | border-radius: 2px; 15 | box-shadow: $shadow2; 16 | text-shadow: 0 1px 1px rgba(black, 0.2); 17 | } 18 | 19 | &, 20 | &:visited { 21 | color: white; 22 | } 23 | 24 | &:hover, 25 | &:focus { 26 | background: darken($base-a, 8%); 27 | } 28 | 29 | & > .text { 30 | margin: auto; 31 | text-align: center; 32 | } 33 | 34 | & > .text > .icon { 35 | margin-bottom: 16px; 36 | display: block; 37 | } 38 | 39 | & > .text > .icon::before { 40 | content: ''; 41 | @include ion-ios-arrow-back(48px, adjust-color($base-a, $lightness: 16%, $hue: 20deg)); 42 | height: 64px; 43 | width: 64px; 44 | border: solid 2px adjust-color($base-a, $lightness: 16%, $hue: 20deg); 45 | border-radius: 50%; 46 | text-indent: -2px; 47 | text-shadow: none; 48 | } 49 | 50 | & > .text > .description { 51 | @include font-size(1); 52 | line-height: 1.4; 53 | font-weight: 300; 54 | display: block; 55 | margin-bottom: 16px; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /dom-range.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM Range 3 | category: JavaScript 4 | --- 5 | 6 | ### Creating ranges 7 | See 8 | 9 | ```js 10 | var range = document.createRange() 11 | ``` 12 | 13 | ## Methods 14 | See 15 | 16 | ```js 17 | range 18 | .setStart(startNode, startOffset) 19 | .setEnd(endNode, endOffset) 20 | 21 | .setStartBefore(node) 22 | .setStartAfter(node) 23 | .setEndBefore(node) 24 | .setEndAfter(node) 25 | 26 | .selectNode(node) 27 | .selectNodeContents(node) 28 | ``` 29 | 30 | ### Collapsing 31 | 32 | ```js 33 | range 34 | .collapse() // to end (a single point) 35 | .collapse(true) // to start (a single point) 36 | .collapsed // true | false 37 | ``` 38 | 39 | ### Operations 40 | 41 | ```js 42 | range 43 | .cloneContents() // copy => DocumentFragment 44 | .extractContents() // cut => DocumentFragment 45 | .deleteContents() // delete 46 | 47 | .insertNode(node) 48 | ``` 49 | 50 | ### Etc 51 | 52 | ```js 53 | range 54 | .toString() 55 | ``` 56 | 57 | ### Read-only attributes 58 | 59 | ```js 60 | range 61 | .collapsed // true/false 62 | .startContainer // Node 63 | .startOffset 64 | .endContainer // Node 65 | .endOffset 66 | .commonAncestorContainer // closest of start and end containers 67 | ``` 68 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | npmbin := ./node_modules/.bin 2 | PORT ?= 3000 3 | HOST ?= 127.0.0.1 4 | 5 | # Builds intermediate files. Needs a _site built first though 6 | update: _site critical 7 | 8 | # Builds _site 9 | _site: 10 | bundle exec jekyll build --incremental 11 | 12 | # Builds critical path CSS/JS 13 | critical: _site 14 | node _support/critical.js 15 | 16 | # Starts development server 17 | dev: 18 | $(npmbin)/concurrently -k -p command -c "blue,green" \ 19 | "make dev-webpack" \ 20 | "make dev-jekyll" 21 | 22 | dev-webpack: 23 | $(npmbin)/webpack --watch --colors -p 24 | 25 | dev-jekyll: 26 | if [ -f _site ]; then \ 27 | bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \ 28 | else \ 29 | bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \ 30 | fi 31 | 32 | test: _site 33 | @test -f _site/vim.html 34 | @test -f _site/react.html 35 | @test -f _site/index.html 36 | @grep " 15 | 16 | 17 | 21 | 25 | -------------------------------------------------------------------------------- /kramdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Kramdown 3 | category: Markup 4 | --- 5 | 6 | ### Configuration 7 | 8 | * `parse_block_html` - process kramdown syntax inside blocks 9 | * `parse_span_html` - process kramdown syntax inside inlines 10 | * `html_to_native` - convert html elements to native elements 11 | 12 | {::options parse_block_html="true" /} 13 | 14 | For the GFM parser: 15 | 16 | * `hard_wrap` 17 | 18 | http://kramdown.gettalong.org/parser/gfm.html 19 | 20 | ### For jekyll (gh-pages) 21 | 22 | # _config.yml 23 | markdown: kramdown 24 | kramdown: 25 | input: GFM 26 | 27 | ### Footnotes (Kramdown) 28 | 29 | This is some text.[^1]. Other text.[^footnote]. 30 | 31 | [^1]: Some *crazy* footnote definition. 32 | 33 | ### Abbreviations (Kramdown) 34 | 35 | This is some text not written in HTML but in another language! 36 | 37 | *[another language]: It's called Markdown 38 | *[HTML]: HyperTextMarkupLanguage 39 | 40 | ### Classes and IDs (Kramdown) 41 | 42 | A simple paragraph with an ID attribute. 43 | {: #para-one} 44 | 45 | > A blockquote with a title 46 | {:title="The blockquote title"} 47 | {: #myid} 48 | 49 | * {:.cls} This item has the class "cls" 50 | 51 | {:.ruby} 52 | Some code here 53 | 54 | ### References 55 | 56 | * http://kramdown.gettalong.org/syntax.html 57 | * http://kramdown.gettalong.org/parser/kramdown.html 58 | -------------------------------------------------------------------------------- /meow.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Meow 3 | category: JavaScript libraries 4 | layout: 2017/sheet 5 | updated: 2017-10-30 6 | weight: -1 7 | intro: | 8 | [meow](https://npmjs.com/package/meow) is the easiest way to write command line apps for Node.js. 9 | --- 10 | 11 | ### Typical settings 12 | 13 | ```js 14 | const cli = require('meow')(` 15 | Usage: appname [options] 16 | 17 | Options: 18 | --lang LANG set the language 19 | 20 | Other options: 21 | -h, --help show usage information 22 | -v, --version print version info and exit 23 | `, { 24 | string: ['lang'], 25 | boolean: ['help', 'version'], 26 | alias: { h: 'help', v: 'version' } 27 | }) 28 | ``` 29 | 30 | `string` and `boolean` lets meow/minimist know which flags expect arguments (`string`) and which don't (`boolean`). 31 | 32 | ### Using the result 33 | 34 | ```js 35 | cli.flags // { lang: 'en' } 36 | cli.input // [] 37 | ``` 38 | 39 | Yes, flags are automatically camelCased! 40 | 41 | ### Lesser-used settings 42 | 43 | ```js 44 | meow(`...`, { 45 | // Default values if flags are not specified 46 | default: { lang: 'en' }, 47 | 48 | // allow using -- to stop processing flags 49 | '--': true, 50 | 51 | // Populate `_` with first non-option 52 | stopEarly: true, 53 | 54 | // Invoked on unknown param 55 | unknown: function () { ... } 56 | }) 57 | ``` 58 | 59 | Also see [minimist](minimist.html). 60 | -------------------------------------------------------------------------------- /polyfill.io.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Polyfill.io 3 | category: JavaScript libraries 4 | updated: 2017-10-26 5 | layout: 2017/sheet 6 | intro: | 7 | [Polyfill.io](https://polyfill.io) is a service that serves JavaScript polyfills. 8 | --- 9 | 10 | ## Usage 11 | 12 | ### Default usage 13 | 14 | ```html 15 | 16 | ``` 17 | 18 | {: .-wrap} 19 | 20 | This is the default script for Polyfill.io. 21 | 22 | ### References 23 | 24 | * [API example](https://polyfill.io/v2/docs/api) _(polyfill.io)_ 25 | * [List of features](https://polyfill.io/v2/docs/features) _(polyfill.io)_ 26 | 27 | ## Optimized 28 | 29 | ### For modern browsers 30 | 31 | ```html 32 | 33 | ``` 34 | 35 | This only includes polyfill.io when necessary, skipping it for modern browsers for faster load times. 36 | 37 | ### Extra features 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | This is the same as the previous, but also adds a polyfill for `window.fetch()`. We add a `window.fetch` check and loads the additional `fetch` feature. 44 | -------------------------------------------------------------------------------- /_js/wrapify/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import wrapify from '../index' 3 | import $ from 'jquery' 4 | 5 | it('simple usage', run(` 6 |
    7 |

    simple usage

    8 | 9 |

    install

    10 |

    (install)

    11 | 12 |

    usage

    13 |

    (usage)

    14 |
    15 | `, $div => { 16 | expect($div.find('.h2-section .h3-section-list .h3-section').length).toEqual(2) 17 | })) 18 | 19 | it('h3 with class', run(` 20 |
    21 |

    install

    22 |

    (install)

    23 |
    24 | `, $div => { 25 | expect($div.find('div.h3-section.-hello').length).toEqual(1) 26 | expect($div.find('div.h3-section-list.-hello').length).toEqual(1) 27 | })) 28 | 29 | it('multiple h2s', run(` 30 |
    31 |

    multiple h2

    32 | 33 |

    install

    34 |

    (install)

    35 | 36 |

    usage

    37 |

    (usage)

    38 | 39 |

    getting started

    40 | 41 |

    first

    42 |

    (first)

    43 | 44 |

    second

    45 |

    (second)

    46 |
    47 | `)) 48 | 49 | function run (input, fn) { 50 | return function () { 51 | const $div = $(input) 52 | wrapify($div[0]) 53 | expect($div[0]).toMatchSnapshot() 54 | if (fn) fn($div) 55 | } 56 | } 57 | 58 | it('h2 + pre', run(` 59 |
    60 |

    heading

    61 |
    (code)
    62 |
    63 | `)) 64 | -------------------------------------------------------------------------------- /_sass/2017/components/announcements-item.scss: -------------------------------------------------------------------------------- 1 | .announcements-item { 2 | & { 3 | position: relative; 4 | padding: 16px; 5 | box-shadow: $shadow6; 6 | border-radius: 1px; 7 | background: white; 8 | padding-right: 48px; 9 | animation: announcements-item-flyin 500ms ease-out; 10 | transition: opacity 500ms linear, transform 500ms ease-out; 11 | } 12 | 13 | &.-hide { 14 | display: none; 15 | } 16 | 17 | & > .title { 18 | @include font-size(1); 19 | font-weight: normal; 20 | color: $base-a; 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | & > .body > p { 26 | margin: 0; 27 | padding: 0; 28 | 29 | & + p { 30 | margin-top: 1em; 31 | } 32 | } 33 | 34 | & > .close { 35 | position: absolute; 36 | right: 0; 37 | top: 0; 38 | width: 40px; 39 | height: 40px; 40 | line-height: 40px; 41 | text-align: center; 42 | border: 0; 43 | margin: 0; 44 | padding: 0; 45 | cursor: pointer; 46 | 47 | &:hover, 48 | &:focus { 49 | color: $base-a; 50 | } 51 | } 52 | 53 | & > .close::before { 54 | content: "\00D7"; 55 | font-size: 14px; 56 | } 57 | } 58 | 59 | @keyframes announcements-item-flyin { 60 | 0% { 61 | transform: translate3d(0, 32px, 0); 62 | opacity: 0; 63 | } 64 | 65 | 100% { 66 | transform: translate3d(0, 0, 0); 67 | opacity: 1; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /resolutions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Screen resolutions 3 | layout: 2017/sheet 4 | updated: 2017-10-30 5 | weight: -1 6 | --- 7 | 8 | ## Resolutions 9 | {: .-one-column} 10 | 11 | ### Mobile 12 | 13 | | Resolution | DPPX | Actual resolution | DPPI | Actual PPI | Size | Devices | 14 | | --- | --- | --- | --- | --- | --- | --- | 15 | | 320 x 480 | @1x | 320 x 480 | 163 ppi | 163 ppi | 3.5" | iPhone 3GS | 16 | | 320 x 480 | @2x | 640 x 960 | 163 ppi | 326 ppi | 3.5" | iPhone 4S | 17 | | 320 x 568 | @2x | 640 x 1136 | 163 ppi | 326 ppi | 4" | iPhone SE | 18 | | 375 x 667 | @2x | 750 x 1334 | 163 ppi | 326 ppi | 4.7" | iPhone 7/8 | 19 | | 414 x 736 | @3x | 1242 x 2208 | 133 ppi | 401 ppi | 5.5" | iPhone 7+/8+ | 20 | | --- | --- | --- | ---- | --- | --- | --- | 21 | | 360 x 640 | @3x | 1080 x 1920 | 147 ppi | 441 ppi | 5" | Galaxy S4 | 22 | {: .-headers} 23 | 24 | ### Tablet 25 | 26 | | Resolution | DPPX | Actual resolution | DPPI | Actual PPI | Size | Devices | 27 | | --- | ---- | --- | --- | --- | ---- | --- | 28 | | 1024 x 768 | @2x | 2048 x 1536 | 163 ppi | 326 ppi | 7.9" | iPad Mini Retina | 29 | | 1024 x 768 | @2x | 2048 x 1536 | 132 ppi | 264 ppi | 9.7" | iPad Air | 30 | {: .-headers} 31 | -------------------------------------------------------------------------------- /_sass/2017/components/pages-list.scss: -------------------------------------------------------------------------------- 1 | // search-box.scss 2 | 3 | .pages-list { 4 | & { 5 | display: flex; 6 | flex-wrap: wrap; 7 | } 8 | 9 | > .item { 10 | flex: 0 0 100%; 11 | } 12 | 13 | > .item.article { 14 | flex: 0 0 50%; 15 | } 16 | 17 | @media (min-width: 581px) { 18 | > .item.top-sheet { 19 | flex: 0 0 25%; 20 | } 21 | } 22 | } 23 | 24 | // Article 25 | .pages-list > .article { 26 | text-decoration: none; 27 | display: block; 28 | white-space: nowrap; 29 | padding: 4px 0; 30 | 31 | &, 32 | &:visited { 33 | color: $base-mute3; 34 | } 35 | 36 | & > .info > .slug { 37 | color: $base-head; 38 | } 39 | 40 | &:visited > .info > .slug { 41 | color: $base-text; 42 | } 43 | 44 | & > .info > .title::before { 45 | content: ''; 46 | margin: 0 4px; 47 | } 48 | 49 | & > .info > .title { 50 | opacity: 0; 51 | } 52 | 53 | @media (max-width: 768px) { 54 | & > .info > .title { 55 | display: none; 56 | } 57 | } 58 | 59 | &:hover, 60 | &:focus { 61 | & { 62 | color: $base-mute; 63 | } 64 | 65 | & > .info > .title { 66 | opacity: 1; 67 | color: $base-a; 68 | } 69 | } 70 | } 71 | 72 | .pages-list > .category { 73 | @include font-size(1); 74 | border-bottom: solid 1px $dark-line-color; 75 | margin: 16px 0; 76 | padding: 0 0 16px 0; 77 | font-weight: normal; 78 | color: $base-a; 79 | } 80 | -------------------------------------------------------------------------------- /_sass/2017/components/related-posts-section.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Section 3 | * has callout and group 4 | */ 5 | 6 | .related-posts-section { 7 | & { 8 | display: flex; 9 | @include section-gutter(margin-left, $multiplier: -1); 10 | @include section-gutter(margin-right, $multiplier: -1); 11 | } 12 | 13 | & > .callout, 14 | & > .group { 15 | margin: 0; 16 | @include section-gutter(margin-left); 17 | @include section-gutter(margin-right); 18 | } 19 | 20 | & > .callout { 21 | flex: 1 1 33%; 22 | } 23 | 24 | & > .group { 25 | flex: 1 1 50%; 26 | } 27 | 28 | & > .callout { 29 | display: flex; 30 | 31 | & > * { 32 | flex: 1 0 100%; 33 | } 34 | } 35 | 36 | // Mobile 37 | @media (max-width: 480px) { 38 | & { 39 | flex-wrap: wrap; 40 | } 41 | 42 | & > .callout, 43 | & > .group { 44 | @include section-gutter(margin-top); 45 | @include section-gutter(margin-bottom); 46 | flex: 1 1 100%; 47 | } 48 | } 49 | 50 | // Tablet 51 | @media (min-width: 481px) { 52 | @media (max-width: 768px) { 53 | & { 54 | flex-wrap: wrap; 55 | } 56 | 57 | & > .callout, 58 | & > .group { 59 | @include section-gutter(margin-top); 60 | @include section-gutter(margin-bottom); 61 | flex: 1 1 100%; 62 | } 63 | 64 | & > .group { 65 | flex: 1 1 40%; 66 | } 67 | } 68 | } 69 | } 70 | --------------------------------------------------------------------------------